speech-input

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { motion } from "framer-motion"
6import { MicIcon, SquareIcon, XIcon } from "lucide-react"
7 
8import { cn } from "@/lib/utils"
9import {
10  useScribe,
11  type AudioFormat,
12  type CommitStrategy,
13} from "@/registry/elevenlabs-ui/hooks/use-scribe"
14import { Button } from "@/components/ui/button"
15import { Skeleton } from "@/components/ui/skeleton"
16 
17const buttonVariants = cva("!px-0", {
18  variants: {
19    size: {
20      default: "h-9 w-9",
21      sm: "h-8 w-8",
22      lg: "h-10 w-10",
23    },
24  },
25  defaultVariants: {
26    size: "default",
27  },
28})
29 
30type ButtonSize = VariantProps<typeof buttonVariants>["size"]
31 
32export interface SpeechInputData {
33  /** The current partial (in-progress) transcript */
34  partialTranscript: string
35  /** Array of all committed (finalized) transcripts */
36  committedTranscripts: string[]
37  /** Full transcript combining committed and partial transcripts */
38  transcript: string
39}
40 
41interface SpeechInputContextValue {
42  isConnected: boolean
43  isConnecting: boolean
44  transcript: string
45  partialTranscript: string
46  committedTranscripts: string[]
47  error: string | null
48  start: () => Promise<void>
49  stop: () => void
50  cancel: () => void
51  size: ButtonSize
52}
53 
54const SpeechInputContext = React.createContext<SpeechInputContextValue | null>(
55  null
56)
57 
58function useSpeechInput() {
59  const context = React.useContext(SpeechInputContext)
60  if (!context) {
61    throw new Error(
62      "SpeechInput compound components must be used within a SpeechInput"
63    )
64  }
65  return context
66}
67 
68function buildTranscript({
69  partialTranscript,
70  committedTranscripts,
71}: {
72  partialTranscript: string
73  committedTranscripts: string[]
74}): string {
75  const committed = committedTranscripts.join(" ").trim()
76  const partial = partialTranscript.trim()
77 
78  if (committed && partial) {
79    return `${committed} ${partial}`
80  }
81  return committed || partial
82}
83 
84function buildData({
85  partialTranscript,
86  committedTranscripts,
87}: {
88  partialTranscript: string
89  committedTranscripts: string[]
90}): SpeechInputData {
91  return {
92    partialTranscript,
93    committedTranscripts,
94    transcript: buildTranscript({ partialTranscript, committedTranscripts }),
95  }
96}
97 
98export interface SpeechInputProps {
99  children: React.ReactNode
100 
101  /**
102   * Function that returns a token for authenticating with the speech service.
103   * This should be an async function that fetches a token from your backend.
104// … truncated