Component

Message

Role-aware message wrapper with avatars, plain or bubble surfaces, metadata, and subtle action toolbars.

Message keeps transcript structure portable: role, author, avatar, status, meta, surface, actions, and body. It does not own transport or persistence.
surface
DOM renderImage render
MessageDefault
RL
Rubricnow
I found the stale fixture and the missing tool permission edge.

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

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

Default

Assistant response with metadata and actions.
RL
Rubricnow
I found the stale fixture and the missing tool permission edge.
Render state

Assistant

Assistant response with metadata and actions.
RL
Rubricnow
I found the stale fixture and the missing tool permission edge.
Render state

User

Outbound user message treatment.
DS
Dexter
Can you inspect the failing run and summarize the blocker?
Render state

System

System note for constraints, memory, or run context.
System
Context window compacted. Latest workspace state and render routes are available.
Render state

Grouped

Stacked assistant replies with grouped follow-up treatment.
RL
Rubricnow
The failing catalog route is narrowed to the generated toolbar example.
Rubricnow
I am checking the serialized input next so the fix lands in the example instead of the renderer.
Render state

Statuses

Pending, streaming, and error status metadata.
Rubricpending
Queued behind the current package build.
Rubricstreaming
Reading render traces and updating the catalog fixture.
Rubricerror
Catalog route failed because a server example included a callback prop.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
messageRole'assistant' | 'system' | 'tool' | 'user'assistantTranscript role controlling alignment and tone.
surface'bubble' | 'plain'bubbleBubble chat surface or stronger plain answer surface.
status'complete' | 'error' | 'pending' | 'streaming'completeOptional status badge for live or failed messages.
authorReactNode-Author label shown above the bubble.
avatarReactNode-Custom avatar slot for multiplayer or multi-agent transcripts.
avatarInitialsstring-Convenience initials for the built-in Avatar primitive.
avatarSrcstring-Convenience image source for the built-in Avatar primitive.
showAvatarbooleanfalseForces built-in avatar rendering.
showStatusbooleantrueShows non-complete status badges.
groupedbooleanfalseTucks consecutive messages into a tighter transcript rhythm.
metaReactNode-Timestamp or secondary metadata.
actionsReactNode-Subtle toolbar-like action slot below the message body.
childrenReactNode-Message content.