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:T1147,"use client" import { useRef, useState } from "react" import { toast } from "sonner" import { getScribeToken } from "@/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token" import { Input } from "@/components/ui/input" import { SpeechInput, SpeechInputCancelButton, SpeechInputPreview, SpeechInputRecordButton, } from "@/components/ui/speech-input" import { Textarea } from "@/components/ui/textarea" async function getToken() { const result = await getScribeToken() if (result.error) { throw new Error(result.error) } return result.token! } function TextareaWithSpeechInputRight() { const [value, setValue] = useState("") const valueAtStartRef = useRef("") return (

{
          setValue(event.target.value)
        }}
        placeholder="Jot down some thoughts..."
        className="min-h-[120px] resize-none rounded-2xl px-3.5 pt-3 pb-14"
      />
      <div className="absolute right-3 bottom-3 flex items-center gap-2">
        <SpeechInput
          size="sm"
          getToken={getToken}
          onStart={() => {
            valueAtStartRef.current = value
          }}
          onChange={({ transcript }) => {
            setValue(valueAtStartRef.current + transcript)
          }}
          onStop={({ transcript }) => {
            setValue(valueAtStartRef.current + transcript)
          }}
          onCancel={() => {
            setValue(valueAtStartRef.current)
          }}
          onError={(error) => {
            toast.error(String(error))
          }}
        >
          <SpeechInputCancelButton />
          <SpeechInputPreview placeholder="Listening..." />
          <SpeechInputRecordButton />
        </SpeechInput>
      </div>
    </div>
  )
}

function TextareaWithSpeechInputLeft() {
  const [value, setValue] = useState("")
  const valueAtStartRef = useRef("")

return (
    <div className="relative">
      <Textarea
        value={value}
        onChange={(event) => {
          setValue(event.target.value)
        }}
        placeholder="Jot down some thoughts..."
        className="min-h-[120px] resize-none rounded-2xl px-3.5 pt-3 pb-14"
      />
      <div className="absolute bottom-3 left-3 flex items-center gap-2">
        <SpeechInput
          size="sm"
          getToken={getToken}
          onStart={() => {
            valueAtStartRef.current = value
          }}
          onChange={({ transcript }) => {
            setValue(valueAtStartRef.current + transcript)
          }}
          onStop={({ transcript }) => {
            setValue(valueAtStartRef.current + transcript)
          }}
          onCancel={() => {
            setValue(valueAtStartRef.current)
          }}
          onError={(error) => {
            toast.error(String(error))
          }}
        >
          <SpeechInputRecordButton />
          <SpeechInputPreview placeholder="Listening..." />
          <SpeechInputCancelButton />
        </SpeechInput>
      </div>
    </div>
  )
}

function InputWithSpeechInput() {
  const [value, setValue] = useState("")
  const valueAtStartRef = useRef("")

return (
    <div className="flex items-center gap-2.5">
      <Input
        value={value}
        onChange={(event) => {
          setValue(event.target.value)
        }}
        placeholder="Give this idea a title..."
        className="min-w-0 flex-1 px-3.5 text-base transition-[flex-basis] duration-200 md:text-sm"
      />
      <SpeechInput
        getToken={getToken}
        className="shrink-0"
        onStart={() => {
          valueAtStartRef.current = value
        }}
        onChange={({ transcript }) => {
          setValue(valueAtStartRef.current + transcript)
        }}
        onStop={({ transcript }) => {
          setValue(valueAtStartRef.current + transcript)
        }}
        onCancel={() => {
          setValue(valueAtStartRef.current)
        }}
        onError={(error) => {
          toast.error(String(error))
        }}
      >
        <SpeechInputCancelButton />
        <SpeechInputRecordButton />
      </SpeechInput>
    </div>
  )
}

export default function SpeechInputDemo() {
  return (
    <div className="absolute inset-0 space-y-4 overflow-auto rounded-2xl p-10">
      <TextareaWithSpeechInputRight />
      <TextareaWithSpeechInputLeft />
      <InputWithSpeechInput />
    </div>
  )
}
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/speech-input.json","input","textarea"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"examples/speech-input-demo.tsx","content":"$50","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>