Skip to content

Transcript

Streaming event log: type-label column beside a pre-wrap body, error and warning variants, truncation notice, connection state. Long-lived and appended-to while visible — live-region wired, reduced-motion safe.

Prop Type Notes
events TranscriptEvent[]
connection 'live' | 'reconnecting' | 'polling' Connection state line pinned under the log.
connectionLabel React.ReactNode Override the connection line's label.
truncated boolean Shows the "Some events were truncated" notice at the top.
live boolean aria-live announcements for appended events (default true).
className string

Other props pass through to the root element (React.HTMLAttributes<HTMLDivElement>).

Preview

Declarations

TypeScript
export interface TranscriptEvent {
  /** Narrow uppercase type label, e.g. "tool call", "output", "error". */
  type: React.ReactNode;
  /** Whitespace-preserving body; wraps rather than scrolls. */
  body: React.ReactNode;
  /** Row emphasis. */
  tone?: 'error' | 'warning';
  /** Right-aligned timestamp (tabular). */
  time?: React.ReactNode;
  id?: string | number;
}

export interface TranscriptProps extends React.HTMLAttributes<HTMLDivElement> {
  events?: TranscriptEvent[];
  /** Connection state line pinned under the log. */
  connection?: 'live' | 'reconnecting' | 'polling';
  /** Override the connection line's label. */
  connectionLabel?: React.ReactNode;
  /** Shows the "Some events were truncated" notice at the top. */
  truncated?: boolean;
  /** aria-live announcements for appended events (default true). */
  live?: boolean;
  className?: string;
}

/**
 * Streaming event log: type-label column beside a pre-wrap body, error and
 * warning variants, truncation notice, connection state. Long-lived and
 * appended-to while visible — live-region wired, reduced-motion safe.
 */
export function Transcript(props: TranscriptProps): React.JSX.Element;