"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn, useMounted } from "@kineticui/core"; import { MicIcon } from "@kineticui/icons"; type SpeechRec = { continuous: boolean; interimResults: boolean; lang: string; start: () => void; stop: () => void; onresult: ((e: { resultIndex: number; results: ArrayLike & { isFinal: boolean }> }) => void) | null; onend: (() => void) | null; onerror: ((e: { error: string }) => void) | null; }; export type VoiceInputProps = { /** Called with the final transcript when listening stops. */ onTranscript?: (text: string) => void; /** Live (interim) transcript while speaking. */ onInterim?: (text: string) => void; lang?: string; /** Bars in the level meter. */ bars?: number; className?: string; }; /** Mic button with a live audio-level waveform and speech-to-text (Web Speech API where available). */ export function VoiceInput({ onTranscript, onInterim, lang = "en-US", bars = 24, className }: VoiceInputProps) { const mounted = useMounted(); const [state, setState] = React.useState<"idle" | "listening" | "error">("idle"); const [levels, setLevels] = React.useState(() => new Array(bars).fill(0.08)); const [text, setText] = React.useState(""); const [seconds, setSeconds] = React.useState(0); const cleanup = React.useRef<() => void>(() => {}); const finalText = React.useRef(""); const supported = mounted && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia; const SR = mounted ? ((window as unknown as { SpeechRecognition?: new () => SpeechRec; webkitSpeechRecognition?: new () => SpeechRec }).SpeechRecognition ?? (window as unknown as { webkitSpeechRecognition?: new () => SpeechRec }).webkitSpeechRecognition) : undefined; const stop = React.useCallback(() => { cleanup.current(); cleanup.current = () => {}; setState("idle"); setLevels(new Array(bars).fill(0.08)); if (finalText.current) onTranscript?.(finalText.current.trim()); }, [bars, onTranscript]); const start = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const ctx = new AudioContext(); const analyser = ctx.createAnalyser(); analyser.fftSize = 64; ctx.createMediaStreamSource(stream).connect(analyser); const data = new Uint8Array(analyser.frequencyBinCount); let raf = 0; const loop = () => { analyser.getByteFrequencyData(data); setLevels(Array.from({ length: bars }, (_, i) => Math.max(0.08, (data[Math.floor((i / bars) * data.length)] ?? 0) / 255))); raf = requestAnimationFrame(loop); }; loop(); const t0 = Date.now(); const timer = window.setInterval(() => setSeconds(Math.floor((Date.now() - t0) / 1000)), 250); let rec: SpeechRec | null = null; finalText.current = ""; setText(""); if (SR) { rec = new SR(); rec.continuous = true; rec.interimResults = true; rec.lang = lang; rec.onresult = (e) => { let interim = ""; for (let i = e.resultIndex; i < e.results.length; i++) { const r = e.results[i]!; if (r.isFinal) finalText.current += r[0]!.transcript + " "; else interim += r[0]!.transcript; } const live = (finalText.current + interim).trim(); setText(live); onInterim?.(live); }; rec.start(); } cleanup.current = () => { cancelAnimationFrame(raf); window.clearInterval(timer); rec?.stop(); stream.getTracks().forEach((t) => t.stop()); void ctx.close(); }; setSeconds(0); setState("listening"); } catch { setState("error"); } }; React.useEffect(() => () => cleanup.current(), []); const listening = state === "listening"; return (

{levels.map((l, i) => ( ))}

{state === "error" ? ( Microphone access was blocked. ) : listening ? ( ● {String(Math.floor(seconds / 60)).padStart(2, "0")}:{String(seconds % 60).padStart(2, "0")} {text || (SR ? "Listening…" : "Recording (speech-to-text not supported in this browser)")} ) : mounted && !supported ? ( Voice input isn't available here. ) : ( Tap to speak )}

); }

Voice Input

Installation

Exports