{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "voice-chat-02",
  "description": "Voice chat 2",
  "dependencies": [
    "@elevenlabs/react",
    "framer-motion"
  ],
  "registryDependencies": [
    "https://ui.elevenlabs.io/r/orb.json",
    "https://ui.elevenlabs.io/r/shimmering-text.json",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "blocks/voice-chat-02/page.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useState } from \"react\"\nimport {\n  ConversationProvider,\n  useConversationControls,\n  useConversationStatus,\n} from \"@elevenlabs/react\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { Loader2Icon, PhoneIcon, PhoneOffIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Orb } from \"@/components/ui/orb\"\nimport { ShimmeringText } from \"@/components/ui/shimmering-text\"\n\nconst DEFAULT_AGENT = {\n  agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID!,\n  name: \"Customer Support\",\n  description: \"Tap to start voice chat\",\n}\n\nexport default function Page() {\n  return (\n    <ConversationProvider>\n      <VoiceChat02 />\n    </ConversationProvider>\n  )\n}\n\nexport function VoiceChat02() {\n  const { status } = useConversationStatus()\n  const { startSession, endSession, getInputVolume, getOutputVolume } =\n    useConversationControls()\n  const [errorMessage, setErrorMessage] = useState<string | null>(null)\n\n  const startConversation = useCallback(async () => {\n    try {\n      setErrorMessage(null)\n      await navigator.mediaDevices.getUserMedia({ audio: true })\n      startSession({\n        agentId: DEFAULT_AGENT.agentId,\n        connectionType: \"webrtc\",\n      })\n    } catch (error) {\n      console.error(\"Error starting conversation:\", error)\n      if (error instanceof DOMException && error.name === \"NotAllowedError\") {\n        setErrorMessage(\"Please enable microphone permissions in your browser.\")\n      }\n    }\n  }, [startSession])\n\n  const handleCall = useCallback(() => {\n    if (status === \"disconnected\" || status === \"error\") {\n      startConversation()\n    } else if (status === \"connected\") {\n      endSession()\n    }\n  }, [status, endSession, startConversation])\n\n  const isCallActive = status === \"connected\"\n  const isTransitioning = status === \"connecting\"\n\n  const scaledInputVolume = useCallback(() => {\n    try {\n      const rawValue = getInputVolume() ?? 0\n      return Math.min(1.0, Math.pow(rawValue, 0.5) * 2.5)\n    } catch {\n      return 0\n    }\n  }, [getInputVolume])\n\n  const scaledOutputVolume = useCallback(() => {\n    try {\n      const rawValue = getOutputVolume() ?? 0\n      return Math.min(1.0, Math.pow(rawValue, 0.5) * 2.5)\n    } catch {\n      return 0\n    }\n  }, [getOutputVolume])\n\n  return (\n    <Card className=\"flex h-[400px] w-full flex-col items-center justify-center overflow-hidden p-6\">\n      <div className=\"flex flex-col items-center gap-6\">\n        <div className=\"relative size-32\">\n          <div className=\"bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]\">\n            <div className=\"bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]\">\n              <Orb\n                className=\"h-full w-full\"\n                volumeMode=\"manual\"\n                getInputVolume={scaledInputVolume}\n                getOutputVolume={scaledOutputVolume}\n              />\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex flex-col items-center gap-2\">\n          <h2 className=\"text-xl font-semibold\">{DEFAULT_AGENT.name}</h2>\n          <AnimatePresence mode=\"wait\">\n            {errorMessage ? (\n              <motion.p\n                key=\"error\"\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: 10 }}\n                className=\"text-destructive text-center text-sm\"\n              >\n                {errorMessage}\n              </motion.p>\n            ) : status === \"disconnected\" || status === \"error\" ? (\n              <motion.p\n                key=\"disconnected\"\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: 10 }}\n                className=\"text-muted-foreground text-sm\"\n              >\n                {DEFAULT_AGENT.description}\n              </motion.p>\n            ) : (\n              <motion.div\n                key=\"status\"\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: 10 }}\n                className=\"flex items-center gap-2\"\n              >\n                <div\n                  className={cn(\n                    \"h-2 w-2 rounded-full transition-all duration-300\",\n                    status === \"connected\" && \"bg-green-500\",\n                    isTransitioning && \"bg-primary/60 animate-pulse\"\n                  )}\n                />\n                <span className=\"text-sm capitalize\">\n                  {isTransitioning ? (\n                    <ShimmeringText text={status} />\n                  ) : (\n                    <span className=\"text-green-600\">Connected</span>\n                  )}\n                </span>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n\n        <Button\n          onClick={handleCall}\n          disabled={isTransitioning}\n          size=\"icon\"\n          variant={isCallActive ? \"secondary\" : \"default\"}\n          className=\"h-12 w-12 rounded-full\"\n        >\n          <AnimatePresence mode=\"wait\">\n            {isTransitioning ? (\n              <motion.div\n                key=\"loading\"\n                initial={{ opacity: 0, rotate: 0 }}\n                animate={{ opacity: 1, rotate: 360 }}\n                exit={{ opacity: 0 }}\n                transition={{\n                  rotate: { duration: 1, repeat: Infinity, ease: \"linear\" },\n                }}\n              >\n                <Loader2Icon className=\"h-5 w-5\" />\n              </motion.div>\n            ) : isCallActive ? (\n              <motion.div\n                key=\"end\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n              >\n                <PhoneOffIcon className=\"h-5 w-5\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"start\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n              >\n                <PhoneIcon className=\"h-5 w-5\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </Button>\n      </div>\n    </Card>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/voice-chat/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "600px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "agents"
  ],
  "type": "registry:block"
}