AI Voice Chat
Full voice conversation interface with waveform visualization, real-time transcription, volume controls, and message history. Press-to-talk interaction with visual feedback.
Preview
Complete voice chat interface
Voice Chat
Press to talk
What's the weather like today?
2:34 PMBased on your location in San Francisco, it's currently 68°F and partly cloudy. The forecast shows temperatures reaching 72°F this afternoon with a slight chance of fog this evening.
2:34 PMShould I bring a jacket?
2:35 PMVoice visualization will appear here
Press and hold to speak
Custom Messages
Provide your own conversation history
Voice Chat
Press to talk
What meetings do I have today?
9:15 AMYou have 3 meetings today: a standup at 10 AM, a design review at 2 PM, and a 1-on-1 with Sarah at 4 PM.
9:15 AMVoice visualization will appear here
Press and hold to speak
Props
AIVoiceChat component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
messages | VoiceMessage[] | (default messages) | Array of conversation messages to display |
defaultListening | boolean | false | Initial listening state |
defaultSpeaking | boolean | false | Initial speaking state (AI responding) |
transcript | string | '' | Initial transcript text |
defaultVolume | number | 80 | Initial volume level (0-100) |
defaultMuted | boolean | false | Initial muted state |
onListeningChange | (isListening: boolean) => void | — | Callback when listening state changes |
onSend | (text: string) => void | — | Callback when a message is sent |
onStop | () => void | — | Callback when stop button is clicked |
onSettings | () => void | — | Callback when settings button is clicked |
onVolumeChange | (volume: number) => void | — | Callback when volume changes |
className | string | — | Additional CSS classes for the container |
VoiceMessage Type
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | number | — | Unique message identifier |
role* | 'user' | 'assistant' | — | Message sender role |
text* | string | — | Message content |
time* | string | — | Message timestamp |
Usage
Import and implementation example
import { AIVoiceChat } from '@/blocks/ai-conversation/ai-voice-chat'
export default function Example() {
const messages = [
{
id: 1,
role: 'user',
text: "What's the weather like today?",
time: '2:34 PM',
},
{
id: 2,
role: 'assistant',
text: "It's currently 68°F and partly cloudy in San Francisco.",
time: '2:34 PM',
},
]
const handleListeningChange = (isListening: boolean) => {
console.log('Listening:', isListening)
// Start/stop speech recognition
}
const handleSend = (text: string) => {
console.log('User said:', text)
// Send to AI backend
}
return (
<AIVoiceChat
messages={messages}
onListeningChange={handleListeningChange}
onSend={handleSend}
onStop={() => console.log('Stopped')}
onSettings={() => openVoiceSettings()}
onVolumeChange={(vol) => setVolume(vol)}
/>
)
}Features
Built-in functionality
- Waveform visualization: Animated 12-bar waveform responding to listening/speaking states
- Real-time transcription: Display transcribed text as user speaks with pulse indicator
- Volume controls: Integrated slider and mute toggle in header
- Conversation history: Scrollable message list with user/assistant avatars
- Press-to-talk button: Large gradient mic button with scale animation
- State indicators: Header shows listening, speaking, or idle state text
- Control buttons: Stop and settings buttons flanking the mic
- Gradient styling: Indigo-to-teal gradients for AI avatar and mic button
- Dark mode: Full dark mode support with proper gradients
Accessibility
Accessibility considerations
ARIA Attributes
Mic button is a native button elementMute toggle and volume slider are accessible controlsStop and settings buttons are native buttonsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between mute, volume, stop, mic, and settings controls |
| Enter / Space | Toggle listening state or activate focused button |
| Arrow keys | Adjust volume slider when focused |
Notes
- State is announced in header subtitle (Listening, AI is speaking, Press to talk)
- Waveform is decorative and does not convey essential information
- Message history is scrollable for keyboard users
- Consider adding aria-label to icon-only buttons
- Consider adding aria-live for transcript updates