AI Voice Chat

AI
Authoring

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 PM

Based 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 PM

Should I bring a jacket?

2:35 PM

Voice 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 AM

You 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 AM

Voice visualization will appear here

Press and hold to speak

Props

AIVoiceChat component API reference

PropTypeDefaultDescription
messagesVoiceMessage[](default messages)Array of conversation messages to display
defaultListeningbooleanfalseInitial listening state
defaultSpeakingbooleanfalseInitial speaking state (AI responding)
transcriptstring''Initial transcript text
defaultVolumenumber80Initial volume level (0-100)
defaultMutedbooleanfalseInitial muted state
onListeningChange(isListening: boolean) => voidCallback when listening state changes
onSend(text: string) => voidCallback when a message is sent
onStop() => voidCallback when stop button is clicked
onSettings() => voidCallback when settings button is clicked
onVolumeChange(volume: number) => voidCallback when volume changes
classNamestringAdditional CSS classes for the container

VoiceMessage Type

PropTypeDefaultDescription
id*string | numberUnique message identifier
role*'user' | 'assistant'Message sender role
text*stringMessage content
time*stringMessage 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)}
    />
  )
}
This block is self-contained (no UI component dependencies)

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 buttons

Keyboard Navigation

KeyAction
TabNavigate between mute, volume, stop, mic, and settings controls
Enter / SpaceToggle listening state or activate focused button
Arrow keysAdjust 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