TranscriptionDisplay
stablev1.0.0Live speech-to-text output with per-segment confidence signaling. Low-confidence words are underlined in gold (validation) with a confidence pill. Temporal blue border while transcribing, gold for low-confidence final output, error red for STT failure.
import { TranscriptionDisplay } from "@nodus/design-system/patterns"Props
| Prop | Type | Default | Description |
|---|---|---|---|
segmentsreq | TranscriptionSegment[] | — | Transcript segments — append as they arrive. Each has text, confidence, and interim flag. |
state | "transcribing" | "complete" | "low-confidence" | "error" | "transcribing" | Overall display state. |
confidenceThreshold | number | 0.70 | Segments below this threshold get wavy gold underline and confidence pill. |
elapsed | number | — | Elapsed ms since capture started — shown in footer. |
onRetranscribe | () => void | — | Called when user requests re-transcription (shown in error state). |
onClear | () => void | — | Called when user clears the transcript. |
maxHeight | string | "200px" | Max height before transcript body scrolls. |
segmentsrequiredTranscriptionSegment[]Default —Transcript segments — append as they arrive. Each has text, confidence, and interim flag.
state"transcribing" | "complete" | "low-confidence" | "error"Default "transcribing"Overall display state.
confidenceThresholdnumberDefault 0.70Segments below this threshold get wavy gold underline and confidence pill.
elapsednumberDefault —Elapsed ms since capture started — shown in footer.
onRetranscribe() => voidDefault —Called when user requests re-transcription (shown in error state).
onClear() => voidDefault —Called when user clears the transcript.
maxHeightstringDefault "200px"Max height before transcript body scrolls.
This component was designed to express:
Explore Related
Microphone trigger with integrated waveform animation. States: idle, listening (agency red), processing (temporal blue), done, error. Waveform bars animate to real or simulated audio amplitude while listening; freeze and pulse during STT processing.
Ambient ring indicator for voice pipeline state. Sizes: sm/md/lg. States: idle (muted), listening (agency red pulse), processing (temporal blue spin), speaking (green pulse — agent delivering output), error, muted. Designed for headers, toolbars, and conversation panels.
Compact audio playback with waveform visualization. Played portion shown in temporal blue; unplayed in border-structure. Click waveform to seek. Supports controlled and uncontrolled modes. States: idle, playing, paused, loading (skeleton bars), error.
Streaming LLM output with temporal cursor. Displays content immediately — no fake simulation. StreamingDot disappears instantly on completion.