UI componentsComponents
Turn Transcript
Two-column conversation transcript with per-turn metadata. Agent and user messages are paired; each pair links back to the corresponding timeline segment.
Preview
Loading turn transcript preview…
Installation
pnpm dlx agent-observability-ui@latest add turn-transcriptnpx agent-observability-ui@latest add turn-transcriptyarn dlx agent-observability-ui@latest add turn-transcriptbunx --bun agent-observability-ui@latest add turn-transcriptUsage
import { TurnTranscriptSection } from '@/components/turn-transcript'
// Default — chat-paired, context-driven
<TurnTranscriptSection />
// Embedded under a parent card, left-aligned log view
<TurnTranscriptSection embedded alignment="left" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
chatHistory | ChatItem[] | null | — | Override the raw chat history resolved from provider context. Falls back to structured turn data from metrics when omitted. |
metrics | SessionMetrics | null | — | Override the per-turn metrics resolved from provider context. |
highlightedTurn | number | null | — | Scrolls the matching turn into view when set. The provider updates this when users click turn chips in the timeline. |
embedded | boolean | false | Strips the outer card/header when embedding the transcript under another container (e.g. inside the session detail Session tab). |
alignment | 'chat' | 'left' | 'chat' | "chat" pairs user/agent messages across the column; "left" stacks both sides on the left for a log-style view. |
Session Timeline
Scrollable per-turn timeline synchronized with the recording. Each turn is a band with STT, LLM, and TTS segments; hover to scrub, click to jump.
Session Events
Chronological stream of raw pipeline events captured during the session — function calls, agent handoffs, state changes. Filterable by event type.