{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "speech-input-demo",
  "registryDependencies": [
    "https://ui.elevenlabs.io/r/speech-input.json",
    "input",
    "textarea"
  ],
  "files": [
    {
      "path": "examples/speech-input-demo.tsx",
      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport { getScribeToken } from \"@/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  SpeechInput,\n  SpeechInputCancelButton,\n  SpeechInputPreview,\n  SpeechInputRecordButton,\n} from \"@/components/ui/speech-input\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nasync function getToken() {\n  const result = await getScribeToken()\n  if (result.error) {\n    throw new Error(result.error)\n  }\n  return result.token!\n}\n\nfunction TextareaWithSpeechInputRight() {\n  const [value, setValue] = useState(\"\")\n  const valueAtStartRef = useRef(\"\")\n\n  return (\n    <div className=\"relative\">\n      <Textarea\n        value={value}\n        onChange={(event) => {\n          setValue(event.target.value)\n        }}\n        placeholder=\"Jot down some thoughts...\"\n        className=\"min-h-[120px] resize-none rounded-2xl px-3.5 pt-3 pb-14\"\n      />\n      <div className=\"absolute right-3 bottom-3 flex items-center gap-2\">\n        <SpeechInput\n          size=\"sm\"\n          getToken={getToken}\n          onStart={() => {\n            valueAtStartRef.current = value\n          }}\n          onChange={({ transcript }) => {\n            setValue(valueAtStartRef.current + transcript)\n          }}\n          onStop={({ transcript }) => {\n            setValue(valueAtStartRef.current + transcript)\n          }}\n          onCancel={() => {\n            setValue(valueAtStartRef.current)\n          }}\n          onError={(error) => {\n            toast.error(String(error))\n          }}\n        >\n          <SpeechInputCancelButton />\n          <SpeechInputPreview placeholder=\"Listening...\" />\n          <SpeechInputRecordButton />\n        </SpeechInput>\n      </div>\n    </div>\n  )\n}\n\nfunction TextareaWithSpeechInputLeft() {\n  const [value, setValue] = useState(\"\")\n  const valueAtStartRef = useRef(\"\")\n\n  return (\n    <div className=\"relative\">\n      <Textarea\n        value={value}\n        onChange={(event) => {\n          setValue(event.target.value)\n        }}\n        placeholder=\"Jot down some thoughts...\"\n        className=\"min-h-[120px] resize-none rounded-2xl px-3.5 pt-3 pb-14\"\n      />\n      <div className=\"absolute bottom-3 left-3 flex items-center gap-2\">\n        <SpeechInput\n          size=\"sm\"\n          getToken={getToken}\n          onStart={() => {\n            valueAtStartRef.current = value\n          }}\n          onChange={({ transcript }) => {\n            setValue(valueAtStartRef.current + transcript)\n          }}\n          onStop={({ transcript }) => {\n            setValue(valueAtStartRef.current + transcript)\n          }}\n          onCancel={() => {\n            setValue(valueAtStartRef.current)\n          }}\n          onError={(error) => {\n            toast.error(String(error))\n          }}\n        >\n          <SpeechInputRecordButton />\n          <SpeechInputPreview placeholder=\"Listening...\" />\n          <SpeechInputCancelButton />\n        </SpeechInput>\n      </div>\n    </div>\n  )\n}\n\nfunction InputWithSpeechInput() {\n  const [value, setValue] = useState(\"\")\n  const valueAtStartRef = useRef(\"\")\n\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <Input\n        value={value}\n        onChange={(event) => {\n          setValue(event.target.value)\n        }}\n        placeholder=\"Give this idea a title...\"\n        className=\"min-w-0 flex-1 px-3.5 text-base transition-[flex-basis] duration-200 md:text-sm\"\n      />\n      <SpeechInput\n        getToken={getToken}\n        className=\"shrink-0\"\n        onStart={() => {\n          valueAtStartRef.current = value\n        }}\n        onChange={({ transcript }) => {\n          setValue(valueAtStartRef.current + transcript)\n        }}\n        onStop={({ transcript }) => {\n          setValue(valueAtStartRef.current + transcript)\n        }}\n        onCancel={() => {\n          setValue(valueAtStartRef.current)\n        }}\n        onError={(error) => {\n          toast.error(String(error))\n        }}\n      >\n        <SpeechInputCancelButton />\n        <SpeechInputRecordButton />\n      </SpeechInput>\n    </div>\n  )\n}\n\nexport default function SpeechInputDemo() {\n  return (\n    <div className=\"absolute inset-0 space-y-4 overflow-auto rounded-2xl p-10\">\n      <TextareaWithSpeechInputRight />\n      <TextareaWithSpeechInputLeft />\n      <InputWithSpeechInput />\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}