{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "conversation-demo", "registryDependencies": [ "https://ui.elevenlabs.io/r/message.json", "https://ui.elevenlabs.io/r/response.json", "https://ui.elevenlabs.io/r/conversation.json" ], "files": [ { "path": "examples/conversation-demo.tsx", "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport { Card } from \"@/components/ui/card\"\nimport {\n Conversation,\n ConversationContent,\n ConversationEmptyState,\n ConversationScrollButton,\n} from \"@/components/ui/conversation\"\nimport { Message, MessageContent } from \"@/components/ui/message\"\nimport { Orb } from \"@/components/ui/orb\"\nimport { Response } from \"@/components/ui/response\"\n\nconst allMessages = [\n {\n id: \"1\",\n role: \"user\" as const,\n parts: [\n {\n type: \"text\",\n text: \"Hey, I need help with my order\",\n },\n ],\n },\n {\n id: \"2\",\n role: \"assistant\" as const,\n parts: [\n {\n type: \"text\",\n tokens: [\n \"Hi!\",\n \" I'd\",\n \" be\",\n \" happy\",\n \" to\",\n \" help\",\n \" you\",\n \" with\",\n \" your\",\n \" order.\",\n \" Could\",\n \" you\",\n \" please\",\n \" provide\",\n \" your\",\n \" order\",\n \" number?\",\n ],\n text: \"Hi! I'd be happy to help you with your order. Could you please provide your order number?\",\n },\n ],\n },\n {\n id: \"3\",\n role: \"user\" as const,\n parts: [\n {\n type: \"text\",\n text: \"It's ORDER-12345\",\n },\n ],\n },\n {\n id: \"4\",\n role: \"assistant\" as const,\n parts: [\n {\n type: \"text\",\n tokens: [\n \"Thank\",\n \" you!\",\n \" Let\",\n \" me\",\n \" pull\",\n \" up\",\n \" your\",\n \" order\",\n \" details.\",\n \" I\",\n \" can\",\n \" see\",\n \" that\",\n \" your\",\n \" order\",\n \" was\",\n \" placed\",\n \" on\",\n \" March\",\n \" 15th\",\n \" and\",\n \" is\",\n \" currently\",\n \" being\",\n \" processed.\",\n \" It\",\n \" should\",\n \" ship\",\n \" within\",\n \" the\",\n \" next\",\n \" 1-2\",\n \" business\",\n \" days.\",\n \" Is\",\n \" there\",\n \" anything\",\n \" specific\",\n \" you'd\",\n \" like\",\n \" to\",\n \" know\",\n \" about\",\n \" this\",\n \" order?\",\n ],\n 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?\",\n },\n ],\n },\n {\n id: \"5\",\n role: \"user\" as const,\n parts: [\n {\n type: \"text\",\n text: \"Can I change the shipping address?\",\n },\n ],\n },\n {\n id: \"6\",\n role: \"assistant\" as const,\n parts: [\n {\n type: \"text\",\n tokens: [\n \"Absolutely!\",\n \" Since\",\n \" the\",\n \" order\",\n \" hasn't\",\n \" shipped\",\n \" yet,\",\n \" I\",\n \" can\",\n \" update\",\n \" the\",\n \" shipping\",\n \" address\",\n \" for\",\n \" you.\",\n \" What\",\n \" would\",\n \" you\",\n \" like\",\n \" the\",\n \" new\",\n \" address\",\n \" to\",\n \" be?\",\n ],\n 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?\",\n },\n ],\n },\n]\n\nconst ConversationDemo = () => {\n const [messages, setMessages] = useState([])\n const [streamingMessageIndex, setStreamingMessageIndex] = useState<\n number | null\n >(null)\n const [streamingContent, setStreamingContent] = useState(\"\")\n\n useEffect(() => {\n const timeouts: NodeJS.Timeout[] = []\n const intervals: NodeJS.Timeout[] = []\n let currentMessageIndex = 0\n\n const addNextMessage = () => {\n if (currentMessageIndex >= allMessages.length) return\n\n const message = allMessages[currentMessageIndex]\n const part = message.parts[0]\n\n if (message.role === \"assistant\" && \"tokens\" in part && part.tokens) {\n setStreamingMessageIndex(currentMessageIndex)\n setStreamingContent(\"\")\n\n let currentContent = \"\"\n let tokenIndex = 0\n\n const streamInterval = setInterval(() => {\n if (tokenIndex < part.tokens.length) {\n currentContent += part.tokens[tokenIndex]\n setStreamingContent(currentContent)\n tokenIndex++\n } else {\n clearInterval(streamInterval)\n setMessages((prev) => [...prev, message])\n setStreamingMessageIndex(null)\n setStreamingContent(\"\")\n currentMessageIndex++\n\n // Add next message after a delay\n timeouts.push(setTimeout(addNextMessage, 500))\n }\n }, 100)\n\n intervals.push(streamInterval)\n } else {\n setMessages((prev) => [...prev, message])\n currentMessageIndex++\n\n timeouts.push(setTimeout(addNextMessage, 800))\n }\n }\n\n // Start after 1 second\n timeouts.push(setTimeout(addNextMessage, 1000))\n\n return () => {\n timeouts.forEach((timeout) => clearTimeout(timeout))\n intervals.forEach((interval) => clearInterval(interval))\n }\n }, [])\n\n return (\n \n
\n \n \n {messages.length === 0 && streamingMessageIndex === null ? (\n }\n title=\"Start a conversation\"\n description=\"This is a simulated conversation\"\n />\n ) : (\n <>\n {messages.map((message) => (\n \n \n {message.parts.map((part, i) => {\n switch (part.type) {\n case \"text\":\n return (\n \n {part.text}\n \n )\n default:\n return null\n }\n })}\n \n {message.role === \"assistant\" && (\n
\n \n
\n )}\n \n ))}\n {streamingMessageIndex !== null && (\n \n \n {streamingContent || \"\\u200B\"}\n \n {allMessages[streamingMessageIndex].role ===\n \"assistant\" && (\n
\n \n
\n )}\n \n )}\n \n )}\n \n \n \n
\n \n )\n}\n\nexport default ConversationDemo\n", "type": "registry:example" } ], "type": "registry:example" }