SDAIA

Voice Session

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

Installation

npx sdaia-ui@latest add voice-session

Usage

import { VoiceSession } from "sdaia-ui"
1<VoiceSession
2  variant="neutral"
3  state="listening"
4  title="Voice session"
5  model="SDAIA Voice · GPT-5.5"
6  language="English"
7/>

Examples

Listening

Capturing the user’s voice input — pulse-ring orb, info-blue accent, and a live transcript.

Loading demo: voice-session-neutral

Processing

Working on the request — a muted waveform and a warning-amber “Processing request…” state.

Loading demo: voice-session-processing

Speaking

Voicing the reply — an active brand-green waveform, the assistant bubble, and an audio player.

Loading demo: voice-session-speaking

API Reference

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