Push to talkPro

Hold the button or Space to talk, with a ring that follows your voice, and let go to send. Slide away or press Escape to cancel, too short holds cancel with a hint, and keyboard users can latch it with Enter.

Markdown

On this page

ProA channel with a dispatch agent. Hold the button or Space and talk; let go to send, slide away or press Escape to cancel.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/push-to-talk

Usage

tsx

import { PushToTalk } from "@/components/ui/chatcn/pro/push-to-talk"

<PushToTalk
  level={mic.getLevel}
  onStart={recorder.start}
  onSend={() => recorder.stopAndSend()}
  onCancel={recorder.discard}
/>

Space works anywhere on the page unless the user is typing or another control has focus; pass hotkey={false} to limit it to the focused button. Losing the window mid hold cancels, so a microphone is never left open. status="sending" shows a spinner until you set it back.

Examples

Every state

ProReady, holding, about to cancel, the keyboard latch, sending, a blocked microphone, disabled and inline.

Props

Prop	Type	Notes
`level`	`number \| () => number`	The input level for the ring
`onStart`	`() => void`	Open the mic
`onSend`	`(durationMs: number) => void`	Released with enough audio
`onCancel`	`(reason: "slide" \| "escape" \| "short" \| "interrupted") => void`	Let go without sending
`status`	`"ready" \| "sending" \| "error"`	Default `ready`
`error`	`ReactNode`	Shown in the error status. Say how to fix it
`hotkey`	`string \| false`	Default `" "` (Space)
`minDuration`, `maxDuration`	`number`	Default 400 ms and 60 s. The limit sends by itself
`layout`	`"stacked" \| "inline"`	Inline puts the status at the start, for composer rows
`size`	`"md" \| "lg"`	56 or 72 px
`previewPhase`, `previewElapsed`	`string`, `number`	Show a phase without input, for docs

Keyboard

Key	Action
Hold `Space`	Talk; release to send
`Enter`	Start recording on the focused button; `Enter` again sends
`Escape`	Cancel the recording

Accessibility

A button with aria-pressed while recording and aria-keyshortcuts for the hotkey.
Recording, sent with its length, cancelled and too short are announced politely.
The Enter latch means nobody has to hold a key or a pointer to talk.

Motion

The button presses to 0.97 while held and the ring swells with the level; under reduced motion the ring holds still at one size.
Sliding past 72 px turns the button to the cancel mark at once: no animation on a decision the finger is making.