Message
A primitive component for displaying individual messages in a conversation thread. Supports user and assistant roles with customizable styling variants.
Examples
User Message
Assistant Message
Assistant Message with Reasoning
Step 1:
Step 2:
Assistant Message with Rendered Component
Solid Variant
Loading State
Thinking/Loading State with Reasoning
Installation
Component API
Message
| Prop | Type | Default | Description |
|---|---|---|---|
| role | "user" | "assistant" | - | The role of the message sender |
| message | TamboThreadMessage | - | The full Tambo thread message object. Can include optional reasoning field (string[]) for displaying AI reasoning steps. |
| variant | "default" | "solid" | "default" | Optional styling variant for the message container |
| isLoading | boolean | false | Optional flag to indicate if the message is in a loading state. Enables thinking animation in ReasoningInfo component. |
| children | React.ReactNode | - | The child elements to render within the root container |
Sub-components
- MessageContent - Displays the actual message text content with optional markdown rendering. Handles loading states, tool call status, and content formatting. Supports custom content override and markdown toggle.
- MessageRenderedComponentArea - Renders interactive components returned by assistant messages. Shows a "View in canvas" button if a canvas space exists, otherwise renders the component inline. Only appears for assistant messages with rendered components.
- ReasoningInfo - Displays reasoning information in a collapsible dropdown. Shows the reasoning steps provided by the LLM when available. Auto-collapses when message content arrives. Shows animated "Thinking" text when in loading state.