chat-simple-demo

1"use client"
2 
3import { useCallback, useRef, useState } from "react"
4import type { ToolUIPart } from "ai"
5import { GlobeIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react"
6import { toast } from "sonner"
7 
8import { cn } from "@/lib/utils"
9import {
10  Action,
11  Actions,
12  CopyAction,
13} from "@/components/ui/ai-elements/actions"
14import {
15  Branch,
16  BranchMessages,
17  BranchNext,
18  BranchPage,
19  BranchPrevious,
20  BranchSelector,
21} from "@/components/ui/ai-elements/branch"
22import { ChatContainer } from "@/components/ui/ai-elements/chat-container"
23import {
24  Conversation,
25  ConversationContent,
26  ConversationScrollButton,
27} from "@/components/ui/ai-elements/conversation"
28import { Loader } from "@/components/ui/ai-elements/loader"
29import {
30  Message,
31  MessageContent,
32} from "@/components/ui/ai-elements/message"
33import {
34  PromptInput,
35  PromptInputActionAddAttachments,
36  PromptInputActionMenu,
37  PromptInputActionMenuContent,
38  PromptInputActionMenuTrigger,
39  PromptInputAttachment,
40  PromptInputAttachments,
41  PromptInputBody,
42  PromptInputButton,
43  PromptInputFooter,
44  PromptInputModelSelect,
45  PromptInputModelSelectContent,
46  PromptInputModelSelectItem,
47  PromptInputModelSelectTrigger,
48  PromptInputModelSelectValue,
49  PromptInputSpeechButton,
50  PromptInputSubmit,
51  PromptInputTextarea,
52  PromptInputTools,
53  type PromptInputMessage,
54} from "@/components/ui/ai-elements/prompt-input"
55import {
56  Reasoning,
57  ReasoningContent,
58  ReasoningTrigger,
59} from "@/components/ui/ai-elements/reasoning"
60import { Response } from "@/components/ui/ai-elements/response"
61import {
62  Source,
63  Sources,
64  SourcesContent,
65  SourcesTrigger,
66} from "@/components/ui/ai-elements/sources"
67 
68type MessageType = {
69  key: string
70  from: "user" | "assistant"
71  sources?: { href: string; title: string }[]
72  versions: {
73    id: string
74    content: string
75  }[]
76  reasoning?: {
77    content: string
78    duration: number
79  }
80  tools?: {
81    name: string
82    description: string
83    status: ToolUIPart["state"]
84    parameters: Record<string, unknown>
85    result: string | undefined
86    error: string | undefined
87  }[]
88  avatar: string
89  name: string
90}
91 
92const initialMessages: MessageType[] = []
93 
94const models = [
95  { id: "gpt-4", name: "GPT-4" },
96  { id: "gpt-3.5-turbo", name: "GPT-3.5 Turbo" },
97  { id: "claude-2", name: "Claude 2" },
98  { id: "claude-instant", name: "Claude Instant" },
99  { id: "palm-2", name: "PaLM 2" },
100  { id: "llama-2-70b", name: "Llama 2 70B" },
101// … truncated