Component

Live Transcript

A speaker-attributed transcript panel for audio rooms and meetings. Consecutive entries from the same speaker are automatically merged into a single block so the panel stays readable. The container is a live region (role="log" aria-live="polite") so screen readers announce new entries without interrupting the user.

Basic

Pass an array of entries; the panel renders each speaker in order.

Alice0:00

Good morning everyone, let's get started.

Bob0:04

Morning! Ready when you are.

Carol0:06

Same here.

Grouped consecutive

When the same speaker has multiple consecutive entries, they are merged under one speaker header. Speaker colors can be applied via speakerColor on each entry.

Alice0:10

So to summarise the agenda:

First we'll cover last week's highlights.

Then we'll open the floor for questions.

Bob0:22

Sounds great. I have a few items for the Q&A.

Specifically around the launch timeline.

Compact

The compact prop tightens spacing for dense side-panel layouts.

Alice0:00

Can everyone hear me?

Bob0:02

Yes, loud and clear.

Carol0:03

Same.

Alice0:04

Great. Let's begin.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { LiveTranscript } from '@refraction-ui/react'
import type { TranscriptEntry } from '@refraction-ui/react'

const entries: TranscriptEntry[] = [
  { id: '1', speaker: 'Alice', text: 'Good morning, everyone!', timestamp: '0:00' },
  { id: '2', speaker: 'Bob', text: 'Morning! Ready when you are.', timestamp: '0:04' },
]

export function MeetingPanel() {
  return (
    <LiveTranscript
      entries={entries}
      className="max-h-96"
    />
  )
}

Props

Prop	Type	Default	Description
`entries`	`TranscriptEntry[]`	--	The ordered list of transcript entries. Each entry has `id`, `speaker`, `text`, and optional `timestamp` and `speakerColor`.
`compact`	`boolean`	`false`	Tightens the spacing between speaker blocks for dense layouts.
`className`	`string`	--	Additional CSS classes to apply to the scroll container.