chat-shimmer-demo

1"use client"
2 
3import { useCallback, useRef, useState } from "react"
4 
5import { cn } from "@/lib/utils"
6import { ChatContainer } from "@/components/ui/ai-elements/chat-container"
7import {
8  Conversation,
9  ConversationContent,
10  ConversationScrollButton,
11} from "@/components/ui/ai-elements/conversation"
12import {
13  Message,
14  MessageContent,
15} from "@/components/ui/ai-elements/message"
16import {
17  PromptInput,
18  PromptInputActionAddAttachments,
19  PromptInputActionMenu,
20  PromptInputActionMenuContent,
21  PromptInputActionMenuTrigger,
22  PromptInputAttachment,
23  PromptInputAttachments,
24  PromptInputBody,
25  PromptInputFooter,
26  PromptInputModelSelect,
27  PromptInputModelSelectContent,
28  PromptInputModelSelectItem,
29  PromptInputModelSelectTrigger,
30  PromptInputModelSelectValue,
31  PromptInputSubmit,
32  PromptInputTextarea,
33  PromptInputTools,
34  type PromptInputMessage,
35} from "@/components/ui/ai-elements/prompt-input"
36import { Response } from "@/components/ui/ai-elements/response"
37import { Shimmer } from "@/components/ui/ai-elements/shimmer"
38 
39type MessageType = {
40  key: string
41  from: "user" | "assistant"
42  content: string
43  isShimmering?: boolean
44  avatar: string
45  name: string
46}
47 
48const initialMessages: MessageType[] = []
49 
50const models = [
51  { id: "gpt-4", name: "GPT-4" },
52  { id: "claude-2", name: "Claude 2" },
53  { id: "palm-2", name: "PaLM 2" },
54]
55 
56const Example = () => {
57  const [model, setModel] = useState<string>(models[0].id)
58  const [text, setText] = useState<string>("")
59  const [status, setStatus] = useState<
60    "submitted" | "streaming" | "ready" | "error"
61  >("ready")
62  const [messages, setMessages] = useState<MessageType[]>(initialMessages)
63  const shouldCancelRef = useRef<boolean>(false)
64  const textareaRef = useRef<HTMLTextAreaElement>(null)
65 
66  const stop = useCallback(() => {
67    shouldCancelRef.current = true
68    setStatus("ready")
69  }, [])
70 
71  const addUserMessage = useCallback((content: string) => {
72    const userMessage: MessageType = {
73      key: `user-${Date.now()}`,
74      from: "user",
75      content,
76      avatar: "https://patrickprunty.com/icon.webp",
77      name: "User",
78    }
79 
80    setMessages((prev) => [...prev, userMessage])
81 
82    // Add shimmer message immediately
83    const shimmerMessage: MessageType = {
84      key: `assistant-${Date.now()}`,
85      from: "assistant",
86      content: "Processing your request...",
87      isShimmering: true,
88      avatar: "https://github.com/openai.png",
89      name: "Assistant",
90    }
91 
92// … truncated