speech-input-demo

1"use client"
2 
3import { useRef, useState } from "react"
4import { toast } from "sonner"
5 
6import { getScribeToken } from "@/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token"
7import { Input } from "@/components/ui/input"
8import {
9  SpeechInput,
10  SpeechInputCancelButton,
11  SpeechInputPreview,
12  SpeechInputRecordButton,
13} from "@/components/ui/speech-input"
14import { Textarea } from "@/components/ui/textarea"
15 
16async function getToken() {
17  const result = await getScribeToken()
18  if (result.error) {
19    throw new Error(result.error)
20  }
21  return result.token!
22}
23 
24function TextareaWithSpeechInputRight() {
25  const [value, setValue] = useState("")
26  const valueAtStartRef = useRef("")
27 
28  return (
29    <div className="relative">
30      <Textarea
31        value={value}
32        onChange={(event) => {
33          setValue(event.target.value)
34        }}
35        placeholder="Jot down some thoughts..."
36        className="min-h-[120px] resize-none rounded-2xl px-3.5 pt-3 pb-14"
37      />
38      <div className="absolute right-3 bottom-3 flex items-center gap-2">
39        <SpeechInput
40          size="sm"
41          getToken={getToken}
42          onStart={() => {
43            valueAtStartRef.current = value
44          }}
45          onChange={({ transcript }) => {
46            setValue(valueAtStartRef.current + transcript)
47          }}
48          onStop={({ transcript }) => {
49            setValue(valueAtStartRef.current + transcript)
50          }}
51          onCancel={() => {
52            setValue(valueAtStartRef.current)
53          }}
54          onError={(error) => {
55            toast.error(String(error))
56          }}
57        >
58          <SpeechInputCancelButton />
59          <SpeechInputPreview placeholder="Listening..." />
60          <SpeechInputRecordButton />
61        </SpeechInput>
62      </div>
63    </div>
64  )
65}
66 
67function TextareaWithSpeechInputLeft() {
68  const [value, setValue] = useState("")
69  const valueAtStartRef = useRef("")
70 
71  return (
72    <div className="relative">
73      <Textarea
74        value={value}
75        onChange={(event) => {
76          setValue(event.target.value)
77        }}
78        placeholder="Jot down some thoughts..."
79        className="min-h-[120px] resize-none rounded-2xl px-3.5 pt-3 pb-14"
80      />
81      <div className="absolute bottom-3 left-3 flex items-center gap-2">
82        <SpeechInput
83          size="sm"
84          getToken={getToken}
85          onStart={() => {
86            valueAtStartRef.current = value
87          }}
88// … truncated