Speaker lanesPro

Diarized speakers as lanes on a timeline, with rename and merge.

Markdown

On this page

ProFour diarized speakers; rename one or merge two the diarizer split.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/speaker-lanes

Usage

tsx

import { SpeakerLanes } from "@/components/ui/chatcn/pro/speaker-lanes"

<SpeakerLanes speakers={speakers} segments={segments} duration={64} currentTime={time} onSeek={seek} onRename={rename} onMerge={merge} />

Each speaker keeps a chart hue in a fixed order, always beside their name, with talk time and share. Merge folds a speaker the diarizer split into another; the parent moves their segments.

Examples

States

ProRead only, and not transcribed yet.

Props

Prop	Type	Notes
`speakers`	`{ id, name }[]`	In lane order
`segments`	`{ id, speaker, start, end, text? }[]`	Seconds
`onRename`	`(id, name) => void`	Shows Rename
`onMerge`	`(from, into) => void`	Shows Merge into
`onSeek`	`(seconds) => void`	Makes segments buttons

Accessibility

Segments carry their times and text as their names.
The line being spoken is a polite live region under the lanes.