{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ai-prompt-input", "title": "AI: Prompt Input", "description": "A full chat composer: auto-growing textarea, model select, tools, attachments and speech input.", "dependencies": [ "@untitledui/icons@^0.0.22", "nanoid@^5.1.16" ], "registryDependencies": [ "@nx-ui/utils", "@nx-ui/button", "@nx-ui/command", "@nx-ui/dropdown-menu", "@nx-ui/hover-card", "@nx-ui/input-group", "@nx-ui/select", "@nx-ui/ai-types" ], "files": [ { "path": "components/ai/prompt-input.tsx", "content": "\"use client\"\n\nimport {\n type ChangeEvent,\n type ChangeEventHandler,\n Children,\n type ClipboardEventHandler,\n type ComponentProps,\n type FormEvent,\n type FormEventHandler,\n Fragment,\n type HTMLAttributes,\n type KeyboardEventHandler,\n type PropsWithChildren,\n type ReactNode,\n type RefObject,\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport {\n CornerDownLeft,\n Image01,\n Loading02,\n Microphone01,\n Paperclip,\n Plus,\n Square,\n XClose,\n} from \"@untitledui/icons\"\nimport { nanoid } from \"nanoid\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n} from \"@/components/ui/command\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/components/ui/hover-card\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupTextarea,\n} from \"@/components/ui/input-group\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\nimport type { ChatStatus, FileUIPart } from \"./types\"\n\n// ============================================================================\n// Provider Context & Types\n// ============================================================================\n\nexport type AttachmentsContext = {\n files: (FileUIPart & { id: string })[]\n add: (files: File[] | FileList) => void\n remove: (id: string) => void\n clear: () => void\n openFileDialog: () => void\n fileInputRef: RefObject\n}\n\nexport type TextInputContext = {\n value: string\n setInput: (v: string) => void\n clear: () => void\n}\n\nexport type PromptInputControllerProps = {\n textInput: TextInputContext\n attachments: AttachmentsContext\n /** INTERNAL: Allows PromptInput to register its file textInput + \"open\" callback */\n __registerFileInput: (\n ref: RefObject,\n open: () => void\n ) => void\n}\n\nconst PromptInputController = createContext(\n null\n)\nconst ProviderAttachmentsContext = createContext(null)\n\nexport const usePromptInputController = () => {\n const ctx = useContext(PromptInputController)\n if (!ctx) {\n throw new Error(\n \"Wrap your component inside to use usePromptInputController().\"\n )\n }\n return ctx\n}\n\n// Optional variants (do NOT throw). Useful for dual-mode components.\nconst useOptionalPromptInputController = () => useContext(PromptInputController)\n\nexport const useProviderAttachments = () => {\n const ctx = useContext(ProviderAttachmentsContext)\n if (!ctx) {\n throw new Error(\n \"Wrap your component inside to use useProviderAttachments().\"\n )\n }\n return ctx\n}\n\nconst useOptionalProviderAttachments = () =>\n useContext(ProviderAttachmentsContext)\n\nexport type PromptInputProviderProps = PropsWithChildren<{\n initialInput?: string\n}>\n\n/**\n * Optional global provider that lifts PromptInput state outside of PromptInput.\n * If you don't use it, PromptInput stays fully self-managed.\n */\nexport function PromptInputProvider({\n initialInput: initialTextInput = \"\",\n children,\n}: PromptInputProviderProps) {\n // ----- textInput state\n const [textInput, setTextInput] = useState(initialTextInput)\n const clearInput = useCallback(() => setTextInput(\"\"), [])\n\n // ----- attachments state (global when wrapped)\n const [attachmentFiles, setAttachmentFiles] = useState<\n (FileUIPart & { id: string })[]\n >([])\n const fileInputRef = useRef(null)\n const openRef = useRef<() => void>(() => {})\n\n const add = useCallback((files: File[] | FileList) => {\n const incoming = Array.from(files)\n if (incoming.length === 0) {\n return\n }\n\n setAttachmentFiles((prev) =>\n prev.concat(\n incoming.map((file) => ({\n id: nanoid(),\n type: \"file\" as const,\n url: URL.createObjectURL(file),\n mediaType: file.type,\n filename: file.name,\n }))\n )\n )\n }, [])\n\n const remove = useCallback((id: string) => {\n setAttachmentFiles((prev) => {\n const found = prev.find((f) => f.id === id)\n if (found?.url) {\n URL.revokeObjectURL(found.url)\n }\n return prev.filter((f) => f.id !== id)\n })\n }, [])\n\n const clear = useCallback(() => {\n setAttachmentFiles((prev) => {\n for (const f of prev) {\n if (f.url) {\n URL.revokeObjectURL(f.url)\n }\n }\n return []\n })\n }, [])\n\n // Keep a ref to attachments for cleanup on unmount (avoids stale closure)\n const attachmentsRef = useRef(attachmentFiles)\n attachmentsRef.current = attachmentFiles\n\n // Cleanup blob URLs on unmount to prevent memory leaks\n useEffect(() => {\n return () => {\n for (const f of attachmentsRef.current) {\n if (f.url) {\n URL.revokeObjectURL(f.url)\n }\n }\n }\n }, [])\n\n const openFileDialog = useCallback(() => {\n openRef.current?.()\n }, [])\n\n const attachments = useMemo(\n () => ({\n files: attachmentFiles,\n add,\n remove,\n clear,\n openFileDialog,\n fileInputRef,\n }),\n [attachmentFiles, add, remove, clear, openFileDialog]\n )\n\n const __registerFileInput = useCallback(\n (ref: RefObject, open: () => void) => {\n fileInputRef.current = ref.current\n openRef.current = open\n },\n []\n )\n\n const controller = useMemo(\n () => ({\n textInput: {\n value: textInput,\n setInput: setTextInput,\n clear: clearInput,\n },\n attachments,\n __registerFileInput,\n }),\n [textInput, clearInput, attachments, __registerFileInput]\n )\n\n return (\n \n \n {children}\n \n \n )\n}\n\n// ============================================================================\n// Component Context & Hooks\n// ============================================================================\n\nconst LocalAttachmentsContext = createContext(null)\n\nexport const usePromptInputAttachments = () => {\n // Dual-mode: prefer provider if present, otherwise use local\n const provider = useOptionalProviderAttachments()\n const local = useContext(LocalAttachmentsContext)\n const context = provider ?? local\n if (!context) {\n throw new Error(\n \"usePromptInputAttachments must be used within a PromptInput or PromptInputProvider\"\n )\n }\n return context\n}\n\nexport type PromptInputAttachmentProps = HTMLAttributes & {\n data: FileUIPart & { id: string }\n className?: string\n}\n\nexport function PromptInputAttachment({\n data,\n className,\n ...props\n}: PromptInputAttachmentProps) {\n const attachments = usePromptInputAttachments()\n\n const filename = data.filename || \"\"\n\n const mediaType =\n data.mediaType?.startsWith(\"image/\") && data.url ? \"image\" : \"file\"\n const isImage = mediaType === \"image\"\n\n const attachmentLabel = filename || (isImage ? \"Image\" : \"Attachment\")\n\n return (\n \n \n
\n
\n {isImage ? (\n // eslint-disable-next-line @next/next/no-img-element\n \n ) : (\n
\n \n
\n )}\n
\n svg]:size-2.5\"\n onClick={(e) => {\n e.stopPropagation()\n attachments.remove(data.id)\n }}\n type=\"button\"\n variant=\"ghost\"\n >\n \n Remove\n \n
\n\n {attachmentLabel}\n \n }\n />\n \n
\n {isImage && (\n
\n {/* eslint-disable-next-line @next/next/no-img-element */}\n \n
\n )}\n
\n
\n

\n {filename || (isImage ? \"Image\" : \"Attachment\")}\n

\n {data.mediaType && (\n

\n {data.mediaType}\n

\n )}\n
\n
\n
\n \n \n )\n}\n\nexport type PromptInputAttachmentsProps = Omit<\n HTMLAttributes,\n \"children\"\n> & {\n children: (attachment: FileUIPart & { id: string }) => ReactNode\n}\n\nexport function PromptInputAttachments({\n children,\n className,\n ...props\n}: PromptInputAttachmentsProps) {\n const attachments = usePromptInputAttachments()\n\n if (!attachments.files.length) {\n return null\n }\n\n return (\n \n {attachments.files.map((file) => (\n {children(file)}\n ))}\n \n )\n}\n\nexport type PromptInputActionAddAttachmentsProps = ComponentProps<\n typeof DropdownMenuItem\n> & {\n label?: string\n}\n\nexport const PromptInputActionAddAttachments = ({\n label = \"Add photos or files\",\n ...props\n}: PromptInputActionAddAttachmentsProps) => {\n const attachments = usePromptInputAttachments()\n\n return (\n {\n e.preventDefault()\n attachments.openFileDialog()\n }}\n >\n {label}\n \n )\n}\n\nexport type PromptInputMessage = {\n text: string\n files: FileUIPart[]\n}\n\nexport type PromptInputProps = Omit<\n HTMLAttributes,\n \"onSubmit\" | \"onError\"\n> & {\n accept?: string // e.g., \"image/*\" or leave undefined for any\n multiple?: boolean\n // When true, accepts drops anywhere on document. Default false (opt-in).\n globalDrop?: boolean\n // Render a hidden input with given name and keep it in sync for native form posts. Default false.\n syncHiddenInput?: boolean\n // Minimal constraints\n maxFiles?: number\n maxFileSize?: number // bytes\n onError?: (err: {\n code: \"max_files\" | \"max_file_size\" | \"accept\"\n message: string\n }) => void\n onSubmit: (\n message: PromptInputMessage,\n event: FormEvent\n ) => void | Promise\n}\n\nexport const PromptInput = ({\n className,\n accept,\n multiple,\n globalDrop,\n syncHiddenInput,\n maxFiles,\n maxFileSize,\n onError,\n onSubmit,\n children,\n ...props\n}: PromptInputProps) => {\n // Try to use a provider controller if present\n const controller = useOptionalPromptInputController()\n const usingProvider = !!controller\n\n // Refs\n const inputRef = useRef(null)\n const formRef = useRef(null)\n\n // ----- Local attachments (only used when no provider)\n const [items, setItems] = useState<(FileUIPart & { id: string })[]>([])\n const files = usingProvider ? controller.attachments.files : items\n\n // Keep a ref to files for cleanup on unmount (avoids stale closure)\n const filesRef = useRef(files)\n filesRef.current = files\n\n const openFileDialogLocal = useCallback(() => {\n inputRef.current?.click()\n }, [])\n\n const matchesAccept = useCallback(\n (f: File) => {\n if (!accept || accept.trim() === \"\") {\n return true\n }\n\n const patterns = accept\n .split(\",\")\n .map((s) => s.trim())\n .filter(Boolean)\n\n return patterns.some((pattern) => {\n if (pattern.endsWith(\"/*\")) {\n const prefix = pattern.slice(0, -1) // e.g: image/* -> image/\n return f.type.startsWith(prefix)\n }\n return f.type === pattern\n })\n },\n [accept]\n )\n\n const addLocal = useCallback(\n (fileList: File[] | FileList) => {\n const incoming = Array.from(fileList)\n const accepted = incoming.filter((f) => matchesAccept(f))\n if (incoming.length && accepted.length === 0) {\n onError?.({\n code: \"accept\",\n message: \"No files match the accepted types.\",\n })\n return\n }\n const withinSize = (f: File) =>\n maxFileSize ? f.size <= maxFileSize : true\n const sized = accepted.filter(withinSize)\n if (accepted.length > 0 && sized.length === 0) {\n onError?.({\n code: \"max_file_size\",\n message: \"All files exceed the maximum size.\",\n })\n return\n }\n\n setItems((prev) => {\n const capacity =\n typeof maxFiles === \"number\"\n ? Math.max(0, maxFiles - prev.length)\n : undefined\n const capped =\n typeof capacity === \"number\" ? sized.slice(0, capacity) : sized\n if (typeof capacity === \"number\" && sized.length > capacity) {\n onError?.({\n code: \"max_files\",\n message: \"Too many files. Some were not added.\",\n })\n }\n const next: (FileUIPart & { id: string })[] = []\n for (const file of capped) {\n next.push({\n id: nanoid(),\n type: \"file\",\n url: URL.createObjectURL(file),\n mediaType: file.type,\n filename: file.name,\n })\n }\n return prev.concat(next)\n })\n },\n [matchesAccept, maxFiles, maxFileSize, onError]\n )\n\n const removeLocal = useCallback(\n (id: string) =>\n setItems((prev) => {\n const found = prev.find((file) => file.id === id)\n if (found?.url) {\n URL.revokeObjectURL(found.url)\n }\n return prev.filter((file) => file.id !== id)\n }),\n []\n )\n\n const clearLocal = useCallback(\n () =>\n setItems((prev) => {\n for (const file of prev) {\n if (file.url) {\n URL.revokeObjectURL(file.url)\n }\n }\n return []\n }),\n []\n )\n\n const add = usingProvider ? controller.attachments.add : addLocal\n const remove = usingProvider ? controller.attachments.remove : removeLocal\n const clear = usingProvider ? controller.attachments.clear : clearLocal\n const openFileDialog = usingProvider\n ? controller.attachments.openFileDialog\n : openFileDialogLocal\n\n // Let provider know about our hidden file input so external menus can call openFileDialog()\n useEffect(() => {\n if (!usingProvider) return\n controller.__registerFileInput(inputRef, () => inputRef.current?.click())\n }, [usingProvider, controller])\n\n // Note: File input cannot be programmatically set for security reasons\n // The syncHiddenInput prop is no longer functional\n useEffect(() => {\n if (syncHiddenInput && inputRef.current && files.length === 0) {\n inputRef.current.value = \"\"\n }\n }, [files, syncHiddenInput])\n\n // Attach drop handlers on nearest form and document (opt-in)\n useEffect(() => {\n const form = formRef.current\n if (!form) return\n if (globalDrop) return // when global drop is on, let the document-level handler own drops\n\n const onDragOver = (e: DragEvent) => {\n if (e.dataTransfer?.types?.includes(\"Files\")) {\n e.preventDefault()\n }\n }\n const onDrop = (e: DragEvent) => {\n if (e.dataTransfer?.types?.includes(\"Files\")) {\n e.preventDefault()\n }\n if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {\n add(e.dataTransfer.files)\n }\n }\n form.addEventListener(\"dragover\", onDragOver)\n form.addEventListener(\"drop\", onDrop)\n return () => {\n form.removeEventListener(\"dragover\", onDragOver)\n form.removeEventListener(\"drop\", onDrop)\n }\n }, [add, globalDrop])\n\n useEffect(() => {\n if (!globalDrop) return\n\n const onDragOver = (e: DragEvent) => {\n if (e.dataTransfer?.types?.includes(\"Files\")) {\n e.preventDefault()\n }\n }\n const onDrop = (e: DragEvent) => {\n if (e.dataTransfer?.types?.includes(\"Files\")) {\n e.preventDefault()\n }\n if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {\n add(e.dataTransfer.files)\n }\n }\n document.addEventListener(\"dragover\", onDragOver)\n document.addEventListener(\"drop\", onDrop)\n return () => {\n document.removeEventListener(\"dragover\", onDragOver)\n document.removeEventListener(\"drop\", onDrop)\n }\n }, [add, globalDrop])\n\n useEffect(\n () => () => {\n if (!usingProvider) {\n for (const f of filesRef.current) {\n if (f.url) URL.revokeObjectURL(f.url)\n }\n }\n },\n [usingProvider]\n )\n\n const handleChange: ChangeEventHandler = (event) => {\n if (event.currentTarget.files) {\n add(event.currentTarget.files)\n }\n // Reset input value to allow selecting files that were previously removed\n event.currentTarget.value = \"\"\n }\n\n const convertBlobUrlToDataUrl = async (\n url: string\n ): Promise => {\n try {\n const response = await fetch(url)\n const blob = await response.blob()\n return new Promise((resolve) => {\n const reader = new FileReader()\n reader.onloadend = () => resolve(reader.result as string)\n reader.onerror = () => resolve(null)\n reader.readAsDataURL(blob)\n })\n } catch {\n return null\n }\n }\n\n const ctx = useMemo(\n () => ({\n files: files.map((item) => ({ ...item, id: item.id })),\n add,\n remove,\n clear,\n openFileDialog,\n fileInputRef: inputRef,\n }),\n [files, add, remove, clear, openFileDialog]\n )\n\n const handleSubmit: FormEventHandler = (event) => {\n event.preventDefault()\n\n const form = event.currentTarget\n const text = usingProvider\n ? controller.textInput.value\n : (() => {\n const formData = new FormData(form)\n return (formData.get(\"message\") as string) || \"\"\n })()\n\n // Reset form immediately after capturing text to avoid race condition\n // where user input during async blob conversion would be lost\n if (!usingProvider) {\n form.reset()\n }\n\n // Convert blob URLs to data URLs asynchronously\n Promise.all(\n files.map(async ({ id, ...item }) => {\n if (item.url && item.url.startsWith(\"blob:\")) {\n const dataUrl = await convertBlobUrlToDataUrl(item.url)\n // If conversion failed, keep the original blob URL\n return {\n ...item,\n url: dataUrl ?? item.url,\n }\n }\n return item\n })\n )\n .then((convertedFiles: FileUIPart[]) => {\n try {\n const result = onSubmit({ text, files: convertedFiles }, event)\n\n // Handle both sync and async onSubmit\n if (result instanceof Promise) {\n result\n .then(() => {\n clear()\n if (usingProvider) {\n controller.textInput.clear()\n }\n })\n .catch(() => {\n // Don't clear on error - user may want to retry\n })\n } else {\n // Sync function completed without throwing, clear attachments\n clear()\n if (usingProvider) {\n controller.textInput.clear()\n }\n }\n } catch {\n // Don't clear on error - user may want to retry\n }\n })\n .catch(() => {\n // Don't clear on error - user may want to retry\n })\n }\n\n // Render with or without local provider\n const inner = (\n <>\n \n \n {children}\n \n \n )\n\n return usingProvider ? (\n inner\n ) : (\n \n {inner}\n \n )\n}\n\nexport type PromptInputBodyProps = HTMLAttributes\n\nexport const PromptInputBody = ({\n className,\n ...props\n}: PromptInputBodyProps) => (\n
\n)\n\nexport type PromptInputTextareaProps = ComponentProps\n\nexport const PromptInputTextarea = ({\n onChange,\n className,\n placeholder = \"What would you like to know?\",\n ...props\n}: PromptInputTextareaProps) => {\n const controller = useOptionalPromptInputController()\n const attachments = usePromptInputAttachments()\n const [isComposing, setIsComposing] = useState(false)\n\n const handleKeyDown: KeyboardEventHandler = (e) => {\n if (e.key === \"Enter\") {\n if (isComposing || e.nativeEvent.isComposing) {\n return\n }\n if (e.shiftKey) {\n return\n }\n e.preventDefault()\n\n // Check if the submit button is disabled before submitting\n const form = e.currentTarget.form\n const submitButton = form?.querySelector(\n 'button[type=\"submit\"]'\n ) as HTMLButtonElement | null\n if (submitButton?.disabled) {\n return\n }\n\n form?.requestSubmit()\n }\n\n // Remove last attachment when Backspace is pressed and textarea is empty\n if (\n e.key === \"Backspace\" &&\n e.currentTarget.value === \"\" &&\n attachments.files.length > 0\n ) {\n e.preventDefault()\n const lastAttachment = attachments.files.at(-1)\n if (lastAttachment) {\n attachments.remove(lastAttachment.id)\n }\n }\n }\n\n const handlePaste: ClipboardEventHandler = (event) => {\n const items = event.clipboardData?.items\n\n if (!items) {\n return\n }\n\n const files: File[] = []\n\n for (const item of items) {\n if (item.kind === \"file\") {\n const file = item.getAsFile()\n if (file) {\n files.push(file)\n }\n }\n }\n\n if (files.length > 0) {\n event.preventDefault()\n attachments.add(files)\n }\n }\n\n const controlledProps = controller\n ? {\n value: controller.textInput.value,\n onChange: (e: ChangeEvent) => {\n controller.textInput.setInput(e.currentTarget.value)\n onChange?.(e)\n },\n }\n : {\n onChange,\n }\n\n return (\n setIsComposing(false)}\n onCompositionStart={() => setIsComposing(true)}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n placeholder={placeholder}\n {...props}\n {...controlledProps}\n />\n )\n}\n\nexport type PromptInputHeaderProps = Omit<\n ComponentProps,\n \"align\"\n>\n\nexport const PromptInputHeader = ({\n className,\n ...props\n}: PromptInputHeaderProps) => (\n \n)\n\nexport type PromptInputFooterProps = Omit<\n ComponentProps,\n \"align\"\n>\n\nexport const PromptInputFooter = ({\n className,\n ...props\n}: PromptInputFooterProps) => (\n \n)\n\nexport type PromptInputToolsProps = HTMLAttributes\n\nexport const PromptInputTools = ({\n className,\n ...props\n}: PromptInputToolsProps) => (\n
\n)\n\nexport type PromptInputButtonProps = ComponentProps\n\nexport const PromptInputButton = ({\n variant = \"ghost\",\n className,\n size,\n ...props\n}: PromptInputButtonProps) => {\n const newSize =\n size ?? (Children.count(props.children) > 1 ? \"sm\" : \"icon-sm\")\n\n return (\n \n )\n}\n\nexport type PromptInputActionMenuProps = ComponentProps\nexport const PromptInputActionMenu = (props: PromptInputActionMenuProps) => (\n \n)\n\nexport type PromptInputActionMenuTriggerProps = PromptInputButtonProps\n\nexport const PromptInputActionMenuTrigger = ({\n className,\n children,\n ...props\n}: PromptInputActionMenuTriggerProps) => (\n \n {children ?? }\n \n }\n />\n)\n\nexport type PromptInputActionMenuContentProps = ComponentProps<\n typeof DropdownMenuContent\n>\nexport const PromptInputActionMenuContent = ({\n className,\n ...props\n}: PromptInputActionMenuContentProps) => (\n \n)\n\nexport type PromptInputActionMenuItemProps = ComponentProps<\n typeof DropdownMenuItem\n>\nexport const PromptInputActionMenuItem = ({\n className,\n ...props\n}: PromptInputActionMenuItemProps) => (\n \n)\n\n// Note: Actions that perform side-effects (like opening a file dialog)\n// are provided in opt-in modules (e.g., prompt-input-attachments).\n\nexport type PromptInputSubmitProps = ComponentProps & {\n status?: ChatStatus\n}\n\nexport const PromptInputSubmit = ({\n className,\n variant = \"default\",\n size = \"icon-sm\",\n status,\n children,\n ...props\n}: PromptInputSubmitProps) => {\n let Icon = \n\n if (status === \"submitted\") {\n Icon = \n } else if (status === \"streaming\") {\n Icon = \n } else if (status === \"error\") {\n Icon = \n }\n\n return (\n \n {children ?? Icon}\n \n )\n}\n\ninterface SpeechRecognition extends EventTarget {\n continuous: boolean\n interimResults: boolean\n lang: string\n start(): void\n stop(): void\n onstart: ((this: SpeechRecognition, ev: Event) => unknown) | null\n onend: ((this: SpeechRecognition, ev: Event) => unknown) | null\n onresult:\n | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => unknown)\n | null\n onerror:\n | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => unknown)\n | null\n}\n\ninterface SpeechRecognitionEvent extends Event {\n results: SpeechRecognitionResultList\n resultIndex: number\n}\n\ntype SpeechRecognitionResultList = {\n readonly length: number\n item(index: number): SpeechRecognitionResult\n [index: number]: SpeechRecognitionResult\n}\n\ntype SpeechRecognitionResult = {\n readonly length: number\n item(index: number): SpeechRecognitionAlternative\n [index: number]: SpeechRecognitionAlternative\n isFinal: boolean\n}\n\ntype SpeechRecognitionAlternative = {\n transcript: string\n confidence: number\n}\n\ninterface SpeechRecognitionErrorEvent extends Event {\n error: string\n}\n\ndeclare global {\n interface Window {\n SpeechRecognition: {\n new (): SpeechRecognition\n }\n webkitSpeechRecognition: {\n new (): SpeechRecognition\n }\n }\n}\n\nexport type PromptInputSpeechButtonProps = ComponentProps<\n typeof PromptInputButton\n> & {\n textareaRef?: RefObject\n onTranscriptionChange?: (text: string) => void\n}\n\nexport const PromptInputSpeechButton = ({\n className,\n textareaRef,\n onTranscriptionChange,\n ...props\n}: PromptInputSpeechButtonProps) => {\n const [isListening, setIsListening] = useState(false)\n const [recognition, setRecognition] = useState(null)\n const recognitionRef = useRef(null)\n\n useEffect(() => {\n if (\n typeof window !== \"undefined\" &&\n (\"SpeechRecognition\" in window || \"webkitSpeechRecognition\" in window)\n ) {\n const SpeechRecognition =\n window.SpeechRecognition || window.webkitSpeechRecognition\n const speechRecognition = new SpeechRecognition()\n\n speechRecognition.continuous = true\n speechRecognition.interimResults = true\n speechRecognition.lang = \"en-US\"\n\n speechRecognition.onstart = () => {\n setIsListening(true)\n }\n\n speechRecognition.onend = () => {\n setIsListening(false)\n }\n\n speechRecognition.onresult = (event) => {\n let finalTranscript = \"\"\n\n for (let i = event.resultIndex; i < event.results.length; i++) {\n const result = event.results[i]\n if (result.isFinal) {\n finalTranscript += result[0]?.transcript ?? \"\"\n }\n }\n\n if (finalTranscript && textareaRef?.current) {\n const textarea = textareaRef.current\n const currentValue = textarea.value\n const newValue =\n currentValue + (currentValue ? \" \" : \"\") + finalTranscript\n\n textarea.value = newValue\n textarea.dispatchEvent(new Event(\"input\", { bubbles: true }))\n onTranscriptionChange?.(newValue)\n }\n }\n\n speechRecognition.onerror = (event) => {\n console.error(\"Speech recognition error:\", event.error)\n setIsListening(false)\n }\n\n recognitionRef.current = speechRecognition\n setRecognition(speechRecognition)\n }\n\n return () => {\n if (recognitionRef.current) {\n recognitionRef.current.stop()\n }\n }\n }, [textareaRef, onTranscriptionChange])\n\n const toggleListening = useCallback(() => {\n if (!recognition) {\n return\n }\n\n if (isListening) {\n recognition.stop()\n } else {\n recognition.start()\n }\n }, [recognition, isListening])\n\n return (\n \n \n \n )\n}\n\nexport type PromptInputSelectProps = ComponentProps\n\nexport const PromptInputSelect = (props: PromptInputSelectProps) => (\n