Call screenPro

A phone call surface for voice agents and people: name, state or timer, a ring that follows the other side's voice, mute, keypad with key tones and speaker, and hang up. Incoming, calling, on hold, reconnecting, ended and failed calls are all designed.

Markdown

On this page

ProCalling a pharmacy refill line. It rings, connects and talks; the ring follows its voice. Open the keypad and type with the keys or the keyboard.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/call-screen

Usage

tsx

import { CallScreen } from "@/components/ui/chatcn/pro/call-screen"

<CallScreen
  name="Refill line"
  detail="Larkfield Pharmacy"
  status={call.status}
  startedAt={call.startedAt}
  outputLevel={remote.getLevel}
  onDigit={(digit) => call.sendDtmf(digit)}
  onHangUp={call.hangUp}
/>

Mute, speaker and keypad are each controlled or uncontrolled. Keys play their two DTMF tones locally through Web Audio (turn it off with tones={false}) and reach you through onDigit. Add more round controls to the grid with CallScreenControl in actions.

Examples

Every state

ProIncoming, calling, muted on speaker, the keypad, on hold, reconnecting, ended, failed and a long name.

Props

Prop	Type	Notes
`name`, `detail`	`string`, `ReactNode`	Who, and a second line
`avatar`	`string \| ReactNode`	An image URL or a node. Falls back to initials
`status`	`"incoming" \| "calling" \| "active" \| "on-hold" \| "reconnecting" \| "ended" \| "failed"`	Each has its own status line and actions
`startedAt`, `endedAt`	`number`	Epoch ms for the timer
`outputLevel`	`number \| () => number`	Drives the ring around the avatar
`muted`, `speaker`, `keypad`	`boolean`	Each controlled, with `default` and `onChange`
`onDigit`	`(digit: string) => void`	A pad key, pressed or typed
`tones`	`boolean`	Play key tones locally. Default true
`onAccept`, `onDecline`, `onHangUp`, `onRedial`	`() => void`	The primary actions per state
`errorMessage`	`ReactNode`	Shown when the call failed. Say how to fix it
`actions`	`ReactNode`	More `CallScreenControl`s in the grid

Keyboard

Key	Action
`0`-`9`, `*`, `#`	Press that key while the pad is open
`Backspace`	Delete the last digit shown
`Escape`	Hide the pad
`Tab`, `Space`, `Enter`	Every control is a button

Accessibility

Toggles carry aria-pressed and their visible label is the accessible name.
The status is announced politely; the timer reads as words for screen readers, never as ticks.
The pad is a labeled group; star and pound are named in words.

Motion

Buttons press to 0.97 in 100 ms. Keys typed on the keyboard flash their pressed fill without moving.
The ring follows the level with a fast attack and slow release; under reduced motion it holds still while they talk.