Primitive

Transcript item

Transcript item anatomy for agent, tool, system, and user transcript surfaces.

TranscriptItem owns transcript row DOM, avatar slot, stack, meta row, plain/bubble bridges, and action rail. Components own message data, role semantics, status mapping, and generated content.
feedback
DOM renderImage render
Transcript itemDefault
A
Assistantcomplete
Here is the compact result.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Assistant message with avatar, meta, and bubble surface.
A
Assistantcomplete
Here is the compact result.
Render state

Assistant

Assistant message with action rail.
A
Assistantcomplete
Here is the compact result.
Render state

User

Outbound user message.
Tighten the component boundary.
Render state

Grouped

Grouped assistant follow-up messages.
A
Assistant1:42 PM
I found the stale table fixture.
Next I will patch the render input.
Render state

Plain

Plain content surface for tool or reasoning output.
Loaded files, classified selectors, and selected the next primitive.
Render state

Statuses

Message status states for streaming and errors.
Assistantstreaming
Reviewing the primitive boundary...
Toolerror
Catalog route returned a render error.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
messageRole'assistant' | 'system' | 'tool' | 'user'assistantMessage direction and role.
surface'bubble' | 'plain'bubbleContent surface mode.
groupedbooleanfalseCompact spacing when grouped with nearby messages.
metaReactNode-Optional meta row content.
avatarReactNode-Optional avatar slot.
actionsReactNode-Optional action rail.