chat-previous-messages-demo

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