A voice conversation panel that reflects the live state of an exchange — listening, processing, or speaking — with a transcript and controls.
Loading demo: voice-session-real-world
npx sdaia-ui@latest add voice-session
import { VoiceSession } from "sdaia-ui"1<VoiceSession2variant="neutral"3state="listening"4title="Voice session"5model="SDAIA Voice · GPT-5.5"6language="English"7/>
Capturing the user’s voice input — pulse-ring orb, info-blue accent, and a live transcript.
Loading demo: voice-session-neutral
Working on the request — a muted waveform and a warning-amber “Processing request…” state.
Loading demo: voice-session-processing
Voicing the reply — an active brand-green waveform, the assistant bubble, and an audio player.
Loading demo: voice-session-speaking
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'neutral' | optional |
state | 'listening' | 'processing' | 'speaking' | 'listening' | optional |
title | ReactNode | 'Voice session' | optional |
model | ReactNode | 'SDAIA Voice · GPT-5.5' | optional |
language | ReactNode | 'English' | optional |
timer | ReactNode | per state | optional |
statusLabel | ReactNode | per state | optional |
stageTitle | ReactNode | per state | optional |
stageHint | ReactNode | per state | optional |
speaker | ReactNode | per state | optional |
speakerMeta | ReactNode | per state | optional |
transcript | ReactNode | per state | optional |
audioCurrentTime | string | '0:12' | optional |
audioDuration | string | '2:32' | optional |
audioProgress | number | 30 | optional |
showControls | boolean | true | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
as | ElementType | 'div' | optional |