A voice composer with a live scrolling waveform, recording timer, streaming transcript, and discard or send actions.
import * as React from 'react'
import { VoiceInput } from '@/components/ui/voice-input'
const words =
'Summarize the open pull requests and flag anything that touches the checkout flow before Friday.'.split(
' ',
)
function format(seconds: number) {
return `00:${String(seconds).padStart(2, '0')}`
}
export default function Demo() {
const [recording, setRecording] = React.useState(true)
const [count, setCount] = React.useState(4)
const [seconds, setSeconds] = React.useState(3)
React.useEffect(() => {
if (!recording) return
const timer = setInterval(() => setSeconds((value) => value + 1), 1000)
return () => clearInterval(timer)
}, [recording])
React.useEffect(() => {
const timer = setTimeout(
() => {
if (!recording) {
setCount(0)
setSeconds(0)
setRecording(true)
} else if (count >= words.length) setRecording(false)
else setCount((value) => value + 1)
},
recording ? 380 : 3600,
)
return () => clearTimeout(timer)
}, [count, recording])
function reset() {
setCount(0)
setSeconds(0)
setRecording(false)
}
return (
<VoiceInput
className="max-w-md"
duration={format(seconds)}
onCancel={reset}
onRecordingChange={setRecording}
onSend={reset}
recording={recording}
transcript={words.slice(0, count).join(' ')}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.