Transcript
Read caller-supplied speech with optional speaker and timing.
Preview
The meeting transcript shows the active turn at a supplied playback time.
Design guidance
Keep recognition, audio playback, persistence, and transcript updates in the application. Transcript preserves the supplied segment order and IDs; it does not infer speaker identity, word timing, or finality. Only valid supplied intervals become seek controls. Put pending and error feedback beside the transcript in the caller's existing composition.
Installation
Transcript uses the canonical Ghost Button for seek controls.
Download example files — JSX recipes, demo styles and any sample assets. Install the component first.
Basic usage
Use untimed segments when the source has no alignment data. Text is rendered as React text, with whitespace preserved.
Structures
The convenience Transcript component and its Root, Segment, Speaker, Time, Text, and Words parts share the same exported owners. Parts accept native attributes and forward their refs. When composing parts directly, provide each segment and word's stable caller ID.
Examples
Start with plain and timed parts, then partial speech and caller-owned playback or conversation compositions.
Plain transcript
Keep short message transcripts inside the existing Message body without another card surface.
Explicit parts
Use the same Root, Segment, Speaker, Time, Text, and Words owners when a custom layout needs direct control over transcript markup. The caller supplies segment identity, timing, and seeking state.
Timed speech
Use variant="timed" for turns with valid start and end times. A valid current time highlights the containing segment. Only the current timed turn receives the subtle surface and leading rule; speaker names align with the speech after the fixed timestamp gutter.
Live draft and interruption
Keep finalized speech in text and the unfinished tail in draftText. Mark the segment partial to show one Draft label. Mark caller-truncated text interrupted to show one interruption label; a final segment has no extra status label.
Conversation composition
Use Message scroller for chronological conversation reading and Transcript for the supplied speech content. Each owner keeps its own job.
Focus captions
Call bar
Recorded speech
This audio sample matches the supplied text and shares Audio player's actual media clock. Only whole-turn timing is supplied.
Workflow recipes
Live speech · Earlier conversation turns
API reference
Transcript.Rootsegments | readonly TranscriptSegmentData[] | [] | Ordered caller-supplied transcript segments. |
|---|
variant | 'plain' | 'timed' | 'captions' | 'plain' | Plain has no frame; timed and captions show valid timestamps and supplied word controls. |
|---|
currentTime | number | — | Current caller-owned playback time in seconds. Finite nonnegative values can highlight valid intervals. |
|---|
activeSegmentId | string | — | Explicit caller-owned active segment ID for an untimed live turn or valid timed segment. |
|---|
onSeek | (seconds, segment) => void | — | Called by valid timestamp and word Buttons. Transcript does not control media. |
|---|
emptyFallback | React.ReactNode | 'No transcript available.' | Caller-replaceable empty content. |
|---|
children | React.ReactNode | — | Optional caller composition when using the Root part. |
|---|
TranscriptSegmentData contains id, stable text, optional draftText, optional speaker, optional start/end, optional status (partial, final, or interrupted), and optional word intervals. TranscriptWordData contains stable id, exact text, start, and end; include any required spaces or punctuation in each word's text. Valid intervals have finite nonnegative starts and a finite end greater than the start. A valid segment start can be sought even when its end is not yet known; it cannot be highlighted as current without a complete interval. The explicit activeSegmentId can mark an untimed live segment current. Invalid intervals remain ordinary text and cannot be sought or highlighted. Time zero is valid. The component accepts native div attributes and forwards its ref; all parts have their matching native element attributes and refs. Root provides variant, current time, active ID, and seek behavior to manually composed Segment parts. No audio element, SDK, transport, inference, per-word live announcement, or scrolling behavior is owned here.