50: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"] 51: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"] 52:T2229,"use client"; import { Badge } from "@/components/ui/badge"; import { Card } from "@/components/ui/card"; import * as React from "react"; import { VoiceInput } from "@/components/ui/voice-input"; import { VoiceWaveform, type WaveformState } from "@/components/ui/voice-waveform"; import { VoiceConversation, type VoiceTurn } from "@/components/ui/voice-conversation"; import { StreamingMessage } from "@/components/ui/streaming-message"; import { PromptInput } from "@/components/ui/prompt-input"; /* ------------------------------------------------------------------ */ /* Copy / data */ /* ------------------------------------------------------------------ */ type Stage = "idle" | "listening" | "recording"; const SPOKEN = "What does streaming versus waiting for the full reply do for perceived latency?"; const SPOKEN_WORDS = SPOKEN.split(" "); const REPLIES = [ "Streaming lands the first token in milliseconds, which makes a reply feel instant. Keep the reveal smooth, offer a stop control, and only surface citations once the claim is actually grounded.", "A voice-first interface should mirror its state out loud: listening, recording, speaking. The waveform is the visual echo of what the assistant is doing right now.", ]; const STAGE_TEXT: Record = { idle: "Tap the mic to start talking", listening: "Listening…", recording: "Recording — tap stop when you are done", }; const SPEAKING_TEXT = "Speaking…"; /* ------------------------------------------------------------------ */ /* Icons */ /* ------------------------------------------------------------------ */ function MicIcon() { return ( ); } /* ------------------------------------------------------------------ */ /* Helpers */ /* ------------------------------------------------------------------ */ function waveState(stage: Stage, streaming: boolean): WaveformState { if (streaming) return "speaking"; if (stage === "recording") return "recording"; if (stage === "listening") return "listening"; return "idle"; } function stageText(stage: Stage, streaming: boolean) { return streaming ? SPEAKING_TEXT : STAGE_TEXT[stage]; } function StatusChip({ stage, streaming }: { stage: Stage; streaming: boolean }) { let label = "Idle"; let cls = "bg-muted text-muted-foreground"; if (streaming) { label = "Speaking"; cls = "bg-muted text-foreground"; } else if (stage === "recording") { label = "Recording"; cls = "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300"; } else if (stage === "listening") { label = "Listening"; cls = "bg-muted text-foreground"; } return ( {label} ); } /* ------------------------------------------------------------------ */ /* VoiceAssistantPattern */ /* ------------------------------------------------------------------ */ export function VoiceAssistantPattern() { const [turns, setTurns] = React.useState([ { id: "1", role: "assistant", text: "Hi, I’m your voice assistant. Tap the mic and talk, or type below — I’ll answer out loud.", time: "Now", }, ]); const [stage, setStage] = React.useState("idle"); const [transcript, setTranscript] = React.useState(""); const [reply, setReply] = React.useState(null); const [streaming, setStreaming] = React.useState(false); const scrollRef = React.useRef(null); const idRef = React.useRef(2); const replyRef = React.useRef(0); const wordRef = React.useRef(0); const typingRef = React.useRef(null); React.useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [turns, reply, stage]); const recordingTime = `0:0${Math.min(3 + Math.ceil(transcript.length / 14), 9)}`; function clearTyping() { if (typingRef.current !== null) { window.clearInterval(typingRef.current); typingRef.current = null; } } function startListening() { if (streaming) { setReply(null); setStreaming(false); } clearTyping(); setTranscript(""); setStage("listening"); window.setTimeout(() => { setStage("recording"); wordRef.current = 0; typingRef.current = window.setInterval(() => { wordRef.current += 1; setTranscript(SPOKEN_WORDS.slice(0, wordRef.current).join(" ")); if (wordRef.current >= SPOKEN_WORDS.length) clearTyping(); }, 230); }, 900); } function cancelRecording() { clearTyping(); setTranscript(""); setStage("idle"); } function stopRecording() { clearTyping(); const text = transcript.trim(); setTranscript(""); if (!text) { setStage("idle"); return; } setStage("idle"); setTurns((t) => [...t, { id: String(idRef.current++), role: "user", text, time: recordingTime }]); beginReply(); } function beginReply() { const text = REPLIES[replyRef.current % REPLIES.length]; replyRef.current += 1; setReply(text); setStreaming(true); } function finishReply() { if (reply) { setTurns((t) => [ ...t, { id: String(idRef.current++), role: "assistant", text: reply, time: "Now" }, ]); } setReply(null); setStreaming(false); } function stopReply() { setReply(null); setStreaming(false); } function submitText(value: string) { setTurns((t) => [...t, { id: String(idRef.current++), role: "user", text: value, time: "Now" }]); beginReply(); } return ( {/* Header */}

Voice Assistant

Hands-free answers

{/* Live waveform strip */}

{stageText(stage, streaming)}

{/* Messages */}

{reply && (

Speaking

)}

{/* Controls */}

); } 4f:["$","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,["$","$L50",null,{"namespace":"@scrimui","registryDependencies":["https://scrimui.dev/r/voice-input.json","https://scrimui.dev/r/voice-waveform.json","https://scrimui.dev/r/voice-conversation.json","https://scrimui.dev/r/streaming-message.json","https://scrimui.dev/r/prompt-input.json","badge","card"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/showcase/patterns/voice-assistant/voice-assistant.tsx","content":"$52","type":"registry:block","target":"components/blocks/voice-assistant.tsx"}],"className":"h-[70svh] min-h-80"}]]}]