Primitive

Message Bubble

Compact conversational message surface.

Message bubbles are transcript content atoms. Let higher-level message components own avatars, actions, status, and tool state.
surface
DOM renderImage render
Message BubbleDefault
Concrete keeps conversational UI crisp.
Ship the primitive set.

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

Inbound assistant message.
Concrete keeps conversational UI crisp.
Ship the primitive set.
Render state

Outbound

Outbound user message.
Concrete keeps conversational UI crisp.
Ship the primitive set.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
direction'inbound' | 'outbound'inboundControls neutral or ink-filled message treatment.
childrenReactNode-Bubble content.