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.

DOM render JPEG render

Rubricnow

The eval runner is failing during schema hydration. I found one stale fixture and a missing tool permission edge.

Playground

Props in the URL.

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

Loading playground.

States

Rendered matrix.

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

Rubricnow

The eval runner is failing during schema hydration. I found one stale fixture and a missing tool permission edge.

Assistant

Assistant response with metadata and actions.

/render state

Dexter

Can you inspect the failing run and summarize the blocker?

User

Outbound user message treatment.

/render state

System

Context window compacted. Latest workspace state and render routes are available.

System

System note for constraints, memory, or run context.

/render state

Props

Public contract.

Name	Type	Default	Description
`messageRole`	`'assistant' \| 'system' \| 'tool' \| 'user'`	`assistant`	Transcript role controlling alignment and tone.
`surface`	`'bubble' \| 'plain'`	`bubble`	Bubble chat surface or stronger plain answer surface.
`status`	`'complete' \| 'error' \| 'pending' \| 'streaming'`	`complete`	Optional status badge for live or failed messages.
`author`	`ReactNode`	-	Author label shown above the bubble.
`avatar`	`ReactNode`	-	Custom avatar slot for multiplayer or multi-agent transcripts.
`avatarInitials`	`string`	-	Convenience initials for the built-in Avatar primitive.
`avatarSrc`	`string`	-	Convenience image source for the built-in Avatar primitive.
`showAvatar`	`boolean`	`false`	Forces built-in avatar rendering.
`showStatus`	`boolean`	`true`	Shows non-complete status badges.
`grouped`	`boolean`	`false`	Tucks consecutive messages into a tighter transcript rhythm.
`meta`	`ReactNode`	-	Timestamp or secondary metadata.
`actions`	`ReactNode`	-	Subtle toolbar-like action slot below the message body.
`children`	`ReactNode`	-	Message content.