Message
A primitive component for displaying individual messages in a conversation thread. Supports user and assistant roles with customizable styling variants.
Examples
User Message
Hello! Can you help me with a React component?
Assistant Message
Of course! I'd be happy to help you with your React component. What specifically would you like to know?
Assistant Message with Reasoning
The user is asking for help with a React component. I should consider what type of component would be most useful and educational. A button component is a great starting point because:
- It's commonly used in most applications
- It demonstrates key React concepts like props and styling
- It can show how to handle different variants and states
- It's simple enough to understand but flexible enough to be useful
For the button component, I should include:
- Props interface: Define clear prop types for variant, size, disabled state, etc.
- Styling system: Use a flexible approach like CSS classes or styled-components
- Accessibility: Include proper ARIA attributes and keyboard navigation
- Event handling: Show how to handle click events properly
I'll create a component that's both educational and production-ready.
I'll help you create a reusable button component. Let me think through the best approach for this.
Assistant Message with Rendered Component
Here's a simple button component for you:
Solid Variant
Of course! I'd be happy to help you with your React component. What specifically would you like to know?
Loading State
Thinking/Loading State with Reasoning
Let me analyze this request step by step. The user wants help with a React component, so I should consider what would be most helpful...
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.