4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1e79,"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" as const, parts: [ { type: "text", text: "Hey, I need help with my order", }, ], }, { id: "2", role: "assistant" as const, 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" as const, parts: [ { type: "text", text: "It's ORDER-12345", }, ], }, { id: "4", role: "assistant" as const, 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" as const, parts: [ { type: "text", text: "Can I change the shipping address?", }, ], }, { id: "6", role: "assistant" as const, 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< number | null >(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++ // Add next message after a delay timeouts.push(setTimeout(addNextMessage, 500)) } }, 100) intervals.push(streamInterval) } else { setMessages((prev) => [...prev, message]) currentMessageIndex++ timeouts.push(setTimeout(addNextMessage, 800)) } } // Start after 1 second 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 default ConversationDemo 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@elevenlabs-ui","registryDependencies":["https://ui.elevenlabs.io/r/message.json","https://ui.elevenlabs.io/r/response.json","https://ui.elevenlabs.io/r/conversation.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"examples/conversation-demo.tsx","content":"$50","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]