{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "message-demo",
  "registryDependencies": [
    "https://ui.elevenlabs.io/r/message.json",
    "https://ui.elevenlabs.io/r/response.json"
  ],
  "files": [
    {
      "path": "examples/message-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport { Message, MessageContent } from \"@/components/ui/message\"\nimport { Orb } from \"@/components/ui/orb\"\nimport { Response } from \"@/components/ui/response\"\n\nconst assistantMessageTokens = [\n  \"To\",\n  \" create\",\n  \" a\",\n  \" new\",\n  \" agent\",\n  \" with\",\n  \" **\",\n  \"ElevenLabs\",\n  \" Agents\",\n  \"**\",\n  \",\",\n  \" head\",\n  \" to\",\n  \" this\",\n  \" link\",\n  \":\",\n  \" \",\n  \"[\",\n  \"https://elevenlabs.io/app/agents\",\n  \"](\",\n  \"https://elevenlabs.io/app/agents\",\n  \")\",\n  \".\",\n  \"\\n\\n\",\n  \"1.\",\n  \" Sign\",\n  \" in\",\n  \" to\",\n  \" your\",\n  \" ElevenLabs\",\n  \" account\",\n  \".\",\n  \"\\n\",\n  \"2.\",\n  \" Click\",\n  \" **New\",\n  \" Agent**\",\n  \" to\",\n  \" start\",\n  \".\",\n  \"\\n\",\n  \"3.\",\n  \" Give\",\n  \" your\",\n  \" agent\",\n  \" a\",\n  \" name\",\n  \" and\",\n  \" description\",\n  \".\",\n  \"\\n\",\n  \"4.\",\n  \" Configure\",\n  \" its\",\n  \" behavior\",\n  \",\",\n  \" knowledge\",\n  \" sources\",\n  \",\",\n  \" and\",\n  \" voice\",\n  \".\",\n  \"\\n\",\n  \"5.\",\n  \" Save\",\n  \" it\",\n  \" —\",\n  \" and\",\n  \" your\",\n  \" agent\",\n  \" is\",\n  \" ready\",\n  \" to\",\n  \" use\",\n  \".\",\n]\n\nconst Example = () => {\n  const [content, setContent] = useState(\"\\u200B\")\n  const [isStreaming, setIsStreaming] = useState(false)\n\n  useEffect(() => {\n    let currentContent = \"\"\n    let index = 0\n\n    const startTimeout = setTimeout(() => {\n      setIsStreaming(true)\n    }, 500)\n\n    const interval = setInterval(() => {\n      if (index < assistantMessageTokens.length) {\n        currentContent += assistantMessageTokens[index]\n        setContent(currentContent)\n        index++\n      } else {\n        clearInterval(interval)\n        setIsStreaming(false)\n      }\n    }, 100)\n\n    return () => {\n      clearInterval(interval)\n      clearTimeout(startTimeout)\n    }\n  }, [])\n\n  return (\n    <>\n      <style jsx global>{`\n        .message-demo-lists ol,\n        .message-demo-lists ul {\n          padding-left: 1.25rem !important;\n        }\n        .message-demo-lists li {\n          margin-left: 0 !important;\n        }\n      `}</style>\n      <div className=\"flex h-full max-h-[400px] w-full max-w-2xl flex-col overflow-hidden\">\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 py-4\">\n          <div className=\"flex-shrink-0\">\n            <Message from=\"user\">\n              <MessageContent>\n                <Response>How do I create an agent?</Response>\n              </MessageContent>\n            </Message>\n          </div>\n          <div className=\"message-demo-lists flex-shrink-0\">\n            <Message from=\"assistant\">\n              <MessageContent>\n                <Response>{content}</Response>\n              </MessageContent>\n              <div className=\"ring-border size-8 overflow-hidden rounded-full ring-1\">\n                <Orb\n                  className=\"h-full w-full\"\n                  agentState={isStreaming ? \"talking\" : null}\n                />\n              </div>\n            </Message>\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Example\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}