Voice conversation
ProA transcript of a spoken conversation with speaker labels.
pnpm dlx shadcn@latest add @caliper/voice-conversationAria
Hello, this is Aria from Northwind Clinic. How can I help?
You
Hi, I would like to move my appointment to Thursday.
AriaInterrupted
Of course. I can see your appointment on Wednesday at 10:30. Would Thursday morning or afternoon suit you better?
You
Morning, if there is anything before noon.
Aria
There is a slot at 9:15 and one at 11:00. Which would you like?
You
Nine fifteen please.
Aria
Done. You are booked for Thursday at 9:15, and I have sent you a confirmation by text.
You
Thank you, goodbye.
When to use #
Use it for
- Showing a call.
Skip it when
- Text chats.
Installation #
pnpm dlx shadcn@latest add @caliper/voice-conversation
Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source.
import { VoiceConversation } from "@/components/ui/voice-conversation"
The worked example comes with Pro
The 21-line example behind the preview opens here with a Pro or Team licence.
API reference #
VoiceConversation
component
Accessibility #
It exposes status semantics, with aria-label, aria-hidden, aria-valuetext and aria-current kept in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion #
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.