Voice agent consolePro

Installation

The template installs as a folder under components/chatcn/pro/voice-agent-console/: the console, the rail, the configuration page, the test call panel and its engine, the call log and review, and the data model.

Usage

import { VoiceAgentConsole } from "@/components/chatcn/pro/voice-agent-console/voice-agent-console"

<VoiceAgentConsole
  workspace="Northgate Veterinary"
  agents={agents}
  calls={calls}
  models={models}
  voices={voices}
  scenarios={scenarios}
/>

Give it a height: it fills its parent. Agents, calls, models and voices are plain data in the shapes of console-data.ts. Test calls run on the free useChatcnVoiceMock inside use-console-call.ts; to go live, swap it for your realtime adapter and feed the same turn, tool and timing events. onPublish receives the agent whose draft should go live; throw from it to show the publish error.

Examples

Call log

Every call across the workspace with today's totals. Filter by outcome, search a name, a number or an outcome, and move through rows with the arrow keys.

Call review

The booking calendar timed out, the reply waited past budget and the agent handed off, as its prompt says. The review is the Pro CallDetail on one clock.

On a phone

Below 768 px the rail moves into a drawer, the tabs take their own row, the log stacks each call into two lines and the test call takes the whole view with a way back to the agent. Pass layout="mobile" to force it inside a device frame.

What is inside

• The shell is the free ChatLayout: the rail collapses to icons with Cmd+B, the test call is its resizable side panel.
• Configure: who speaks first and the first message, the instructions on the free SystemPromptEditor with {{variables}} and version history, the model on ModelPicker, the voice on VoiceLibrary in a dialog with a sample in place, SpeechSettings, turn taking (interruptions, response delay, acknowledgements, noise filter, silence and length limits) and tools.
• Edits save to the draft as you make them. A bar names every field that differs from the live version, with Discard and Publish; an agent that was never published says so.
• Test call: pick a scenario and call the draft. ParticleOrb follows both voices, LiveCaptions roll, TurnIndicator shows who has the floor and cut ins, tools show while they run, and TurnLatencyBar shows each reply's stages. Every reply waits exactly its stages, so a longer response delay or a slower model is felt, not only read. Type as the caller at any point.
• The ended call lands in the log as a Test row and opens in the same review as a real call.
• Calls: today's totals, outcome filters, search, and a table that folds to stacked rows by its own width. A review is the Pro CallDetail: recording, turn timeline with barge-ins, transcript with tool calls and latency on every agent turn.
• Minutes used this month at the foot of the rail, amber from 80 %, and every shortcut in KeyboardShortcuts.

Props

Keyboard

Accessibility

• Landmarks from the layout, a skip link, a named navigation for agents and calls with aria-current, and one heading level 1 per view.
• Configure and Calls are tabs. Every setting names itself from its row; the response delay is a real range input with its value in words.
• The test call is a named region. Captions announce finished agent lines once, the turn indicator announces cut ins, and the ended call is announced with its outcome.
• The call log is a table with a caption. The caller's name is the row's button, so its accessible name starts with the visible text; the whole row is its target.
• Publishing, discarding and saved test calls are announced politely. A failed publish is an alert that says how to fix it.

Motion

• The orb follows both voices and holds a still frame under reduced motion. Captions roll a line at a time.
• The test call panel slides 16 px on the panel curve. Tool and response rows and the publish bar swap in with a 150 ms crossfade.
• Moving between agents, tabs, the log and a review is instant. Nothing in the log moves.