"use client" import { useEffect, useState } from "react" import { Card } from "@/components/ui/card" import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, } from "@/components/ui/conversation" import { Message, MessageContent } from "@/components/ui/message" import { Orb } from "@/components/ui/orb" import { Response } from "@/components/ui/response" const allMessages = [ { id: "1", role: "user", parts: [{ type: "text", text: "Hey, I need help with my order" }] }, { id: "2", role: "assistant", parts: [{ type: "text", tokens: ["Hi!", " I'd", " be", " happy", " to", " help", " you", " with", " your", " order.", " Could", " you", " please", " provide", " your", " order", " number?"], text: "Hi! I'd be happy to help you with your order. Could you please provide your order number?", }], }, { id: "3", role: "user", parts: [{ type: "text", text: "It's ORDER-12345" }] }, { id: "4", role: "assistant", parts: [{ type: "text", tokens: ["Thank", " you!", " Let", " me", " pull", " up", " your", " order", " details.", " I", " can", " see", " that", " your", " order", " was", " placed", " on", " March", " 15th", " and", " is", " currently", " being", " processed.", " It", " should", " ship", " within", " the", " next", " 1-2", " business", " days.", " Is", " there", " anything", " specific", " you'd", " like", " to", " know", " about", " this", " order?"], text: "Thank you! Let me pull up your order details. I can see that your order was placed on March 15th and is currently being processed. It should ship within the next 1-2 business days. Is there anything specific you'd like to know about this order?", }], }, { id: "5", role: "user", parts: [{ type: "text", text: "Can I change the shipping address?" }] }, { id: "6", role: "assistant", parts: [{ type: "text", tokens: ["Absolutely!", " Since", " the", " order", " hasn't", " shipped", " yet,", " I", " can", " update", " the", " shipping", " address", " for", " you.", " What", " would", " you", " like", " the", " new", " address", " to", " be?"], text: "Absolutely! Since the order hasn't shipped yet, I can update the shipping address for you. What would you like the new address to be?", }], }, ] const ConversationDemo = () => { const [messages, setMessages] = useState([]) const [streamingMessageIndex, setStreamingMessageIndex] = useState(null) const [streamingContent, setStreamingContent] = useState("") useEffect(() => { const timeouts: NodeJS.Timeout[] = [] const intervals: NodeJS.Timeout[] = [] let currentMessageIndex = 0 const addNextMessage = () => { if (currentMessageIndex >= allMessages.length) return const message = allMessages[currentMessageIndex] const part = message.parts[0] if (message.role === "assistant" && "tokens" in part && part.tokens) { setStreamingMessageIndex(currentMessageIndex) setStreamingContent("") let currentContent = "" let tokenIndex = 0 const streamInterval = setInterval(() => { if (tokenIndex < part.tokens.length) { currentContent += part.tokens[tokenIndex] setStreamingContent(currentContent) tokenIndex++ } else { clearInterval(streamInterval) setMessages((prev) => [...prev, message]) setStreamingMessageIndex(null) setStreamingContent("") currentMessageIndex++ timeouts.push(setTimeout(addNextMessage, 500)) } }, 100) intervals.push(streamInterval) } else { setMessages((prev) => [...prev, message]) currentMessageIndex++ timeouts.push(setTimeout(addNextMessage, 800)) } } timeouts.push(setTimeout(addNextMessage, 1000)) return () => { timeouts.forEach((timeout) => clearTimeout(timeout)) intervals.forEach((interval) => clearInterval(interval)) } }, []) return (

{messages.length === 0 && streamingMessageIndex === null ? ( } title="Start a conversation" description="This is a simulated conversation" /> ) : ( <> {messages.map((message) => ( {message.parts.map((part, i) => { switch (part.type) { case "text": return {part.text} default: return null } })} {message.role === "assistant" && (

)} ))} {streamingMessageIndex !== null && ( {streamingContent || "\u200B"} {allMessages[streamingMessageIndex].role === "assistant" && (

)} )} )}

) } export { ConversationDemo }