chat-demo

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