Transcript

Install

pnpm dlx shadcn@latest add @vegastack/transcript

Usage

import {
  Transcript,
  TranscriptList,
  TranscriptSearch,
} from "@/components/ui/transcript";

<Transcript
  aria-label="Meeting transcript"
  segments={segments}
  speakerName={(id) => people[id].name}
  currentTime={time}
  onSeek={(seconds) => seekTo(seconds)}
  className="h-96"
>
  <TranscriptSearch />
  <TranscriptList />
</Transcript>;

Each segment is { id, start, end?, speaker, text }, with start and end in seconds and the segments sorted by start. Each turn is a header — the time, the speaker's coloured dot and name — with the text full width below it, the same layout on a phone and a desktop. The row playing at currentTime is marked current, and while the transcript is following it stays centred. A reader who scrolls pauses following, and "Back to current line" brings it back.

Long transcripts mount progressively: the first batchSize turns (100) at once and the rest in idle-time batches, with the current line and the current search match always mounted before anything scrolls to them.

Scope

• Owns: the current line, following it, pausing on a user scroll, seek buttons, search with <mark> highlights, speaker colours and chips, progressive mounting, and the empty and loading states.
• Does not own: playback or the clock. Pass currentTime from your player, and seek it in onSeek.
• Compose with: AudioPlayer or VideoPlayer through their mediaRef. Scrolling is MessageScroller's engine.

Anatomy

Transcript is a compound component. Every exported part, with the data-slot it renders (generated from the canonical source):

Examples

Current line and seek

Each timestamp is a button named "Play from 0:15" that calls onSeek with the segment's start. Here it moves a local clock, so clicking a line makes it the current one.

Rows opt out of MessageScrollerItem's content-visibility: auto, so every row is laid out at mount. A skipped row reports an estimated height, and a follow or search jump measured against that estimate lands past its line once the real rows render; laying them all out costs once, and a currentTime tick still re-renders at most two rows.

With audio

Read currentTime from the player's <audio> element on timeupdate, and set it in onSeek. The transcript follows the playing line until you scroll it yourself.

Search

TranscriptSearch wraps each match in <mark>. Enter and Shift+Enter, or the arrow buttons, move between matches. Each move scrolls the match into view, pauses following, and announces its position ("2 of 5"). Pass query and onQueryChange to control the query yourself, for example to keep it in the URL.

Speakers and rename

Pass onSpeakerRename(id, name) to the Transcript and the speaker name in every turn header becomes an inline EditableCell: click the name to edit it, Enter or leaving the field saves, Escape cancels. The rename is by speaker id, so every turn with that speaker takes the new name. Store the name and return it from speakerName. The search field is capped at max-w-sm, so it never stretches across the toolbar. TranscriptSpeakers (the old chip row) is deprecated.

<Transcript
  aria-label="Meeting transcript"
  segments={segments}
  speakerName={(id) => names[id] ?? id}
  onSpeakerRename={(id, name) => renameSpeaker(id, name)}
>
  <TranscriptSearch />
  <TranscriptList />
</Transcript>

Read-only

Without onSeek the timestamps are plain text and no row has a button. Without currentTime no line is current.

Loading and empty

loading shows skeleton lines and marks the list busy. With no segments and nothing loading, the list shows emptyState ("No transcript yet" by default).

API Reference

TranscriptSearch

TranscriptSpeakers

TranscriptList

Accessibility

• The list is a scroll region named by aria-label and reachable with Tab. Its lines are a list of listitems. The current line has aria-current="true" and starts with a visually hidden "Now playing".
• The line is not a live region, so playback never talks over the recording. The one live region announces search positions ("1 of 3", "No matches").
• A seek button's name, "Play from 0:15", contains its visible time. Time updates never move focus.
• When "Back to current line" scrolls back, focus moves to the list so it does not fall to the page.
• Speaker chips are a list named "Speakers"; each rename button is named Rename {name}, and the rename field returns focus to it when it closes. Speaker colour is never the only cue: every turn names its speaker.
• Follow and search scroll smoothly, and instantly under prefers-reduced-motion.

Do / Don't