Turn indicatorPro

Who has the floor in a voice call, with live level bars, and a barge-in mark when the user talks over the agent. The turn timeline shows the whole call as two lanes with every barge-in as a mark you can jump to.

Markdown

On this page

ProA live call with who has the floor above the transcript and the turns below it. The caller cuts in on the second answer.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/turn-indicator

Usage

tsx

import { TurnIndicator, TurnTimeline } from "@/components/ui/chatcn/pro/turn-indicator"

<TurnIndicator speaker="agent" agentLevel={agent.getLevel} userLevel={mic.getLevel} />
<TurnTimeline turns={turns} duration={elapsed} onSelectBargeIn={(b) => seek(b.at)} />

speaker is none, user, agent or both; both is a barge-in and lights both sides with a mark. Turns are { id, speaker, start, end?, interrupted? } in ms; a user turn that starts inside an agent turn is a barge-in, and its overlap is how long both voices ran together. findBargeIns from the voice kit gives you the same list for your own analytics.

Examples

Every state

ProNobody, you, the agent, thinking and a barge-in, then a finished call's timeline with and without barge-ins.

Props

Prop	Type	Notes
`speaker`	`"none" \| "user" \| "agent" \| "both"`	TurnIndicator. Who has the floor
`thinking`	`boolean`	TurnIndicator. The thinking label on the agent's side
`userLevel`, `agentLevel`	`number \| () => number`	TurnIndicator. Drive the bars
`turns`	`VoiceTurn[]`	TurnTimeline. Open turns run to `duration`
`duration`	`number`	TurnTimeline. Call length, or elapsed while live
`live`	`boolean`	TurnTimeline. Marks the end as live
`onSelectBargeIn`, `activeBargeIn`	`(b: BargeIn) => void`, `string`	TurnTimeline. Jump to and highlight a barge-in
`userLabel`, `agentLabel`	`string`	Both. Default You and Assistant

Keyboard

Key	Action
`Tab`, `Enter`	Through the barge-in marks; Enter selects one

Accessibility

The indicator announces floor changes and barge-ins politely, never level ticks.
The timeline lanes are one image with a summary: turns, talk time per side and the barge-in count. Each barge-in is a button that reads its time and overlap.
Barge-ins carry a hand glyph and a label, never color alone.

Motion

The floor slides between the two sides in 280 ms with the in-out curve and spans both during a barge-in; under reduced motion it jumps.