Voice full screenPro

Full screen voice mode: the orb on the stage with rolling captions, a self view, screen sharing that moves the screen to the stage, and mute, camera, share, captions and End in one bar. Connecting, reconnecting, a dropped call and the ended summary each have their own stage.

Markdown

On this page

ProA scripted call to a claims line with the self view on. Share the form, mute with M, toggle captions with C, tap the orb to cut in.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/voice-fullscreen

Usage

tsx

import { VoiceFullscreen } from "@/components/ui/chatcn/pro/voice-fullscreen"

<VoiceFullscreen
  position="fixed"
  state={call.state}
  segments={call.segments}
  inputLevel={mic.getLevel}
  outputLevel={agent.getLevel}
  startedAt={call.startedAt}
  agentName="Claims desk"
  cameraMedia={cameraStream}
  screenMedia={screenStream}
  onCameraChange={toggleCamera}
  onScreenShareChange={toggleShare}
  onEnd={call.end}
  onClose={() => setFullscreen(false)}
/>

Plain props in, events out: wire it to any realtime provider, or to useChatcnVoiceMock for demos. cameraMedia and screenMedia take a MediaStream or any node. The orb is a slot: pass any orb with the voice orb's props through orb, the particle orb by default. contained fills its parent; fixed covers the viewport as a modal dialog.

Examples

ProThe shared claim form takes the stage; the orb moves beside the captions.

Every state

ProConnecting, interim captions, muted, a blocked camera, reconnecting, a dropped call and ended.

Props

Prop	Type	Notes
`state`	`"idle" \| "connecting" \| "listening" \| "thinking" \| "speaking" \| "interrupted" \| "muted" \| "reconnecting" \| "error" \| "ended"`	The orb's states plus the connection's
`segments`	`TranscriptSegment[]`	Feeds the captions. Interim words show in gray
`inputLevel`, `outputLevel`	`number \| () => number`	The user's and the agent's levels
`startedAt`, `endedAt`	`number`	Epoch ms for the timer and the ended summary
`agentName`, `agentDetail`, `userLabel`	`string`, `ReactNode`	Header and caption labels
`orb`	`ComponentType`	Any orb with the voice orb's props. Default `ParticleOrb`
`muted`, `captions`, `camera`, `screenShare`	`boolean`	Each controlled, with `default` and `onChange`
`cameraMedia`, `screenMedia`	`MediaStream \| ReactNode`	What the self view and the shared screen show
`cameraStatus`, `cameraMessage`	`"ready" \| "starting" \| "blocked"`	A spinner, or the fix, in the self view
`onEnd`, `onStart`, `onReconnect`, `onInterrupt`, `onClose`	`() => void`	Tap the orb to interrupt; `onClose` adds minimize and Escape
`errorMessage`	`ReactNode`	Shown when the call drops. Say how to fix it
`controls`	`object`	Device menus and mic errors, passed to `VoiceControls`
`position`	`"contained" \| "fixed"`	Default `contained`

Keyboard

Key	Action
`M`	Mute or unmute, unless typing
`C`	Captions on or off
`Escape`	Leave full screen, when `onClose` is set
`Tab`	Through the header, the orb while it can be interrupted, then the bar

Accessibility

A region named by the agent, or a modal dialog with position="fixed".
State changes are announced in a polite live region; the ticking timer is not. Finished agent lines are announced once, never word by word.
Every control in the bar is a labeled toggle with aria-pressed. The dropped call message is an alert with the fix and a Reconnect button.

Motion

The self view and the shared screen enter with a 180 to 220 ms fade and a 4 px drop; under reduced motion they appear.
Captions keep a fixed height and fade older lines at the top edge, so speech never pushes the layout.