Message

A primitive component for displaying individual messages in a conversation thread. Supports user and assistant roles with customizable styling variants.

Installation

npx tambo add message

Note: This component is automatically included when you install any of the "Message Thread" blocks.

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.

Usage

tsx

import { Message, MessageContent, MessageRenderedComponentArea, ReasoningInfo } from "@/components/ui/message";

// Basic usage
<Message 
  role="user" 
  message={{ id: "msg-1", role: "user", content: "Hello!", createdAt: "..." }}
  variant="default"
  isLoading={false}
>
  <MessageContent />
  <MessageRenderedComponentArea />
</Message>

// With reasoning
<Message 
  role="assistant" 
  message={{ 
    id: "msg-2", 
    role: "assistant", 
    content: "Let me help you with that...", 
    reasoning: ["First, I need to understand...", "Then, I should consider..."],
    createdAt: "..." 
  }}
  variant="default"
>
  <ReasoningInfo />
  <MessageContent />
</Message>

// Thinking/Loading state with reasoning
<Message 
  role="assistant" 
  message={{ 
    id: "msg-3", 
    role: "assistant", 
    content: [], 
    reasoning: ["Analyzing the request..."],
    createdAt: "..." 
  }}
  isLoading={true}
>
  <ReasoningInfo />
  <MessageContent />
</Message>

// With custom content
<Message 
  role="assistant" 
  message={{ id: "msg-4", role: "assistant", content: "Hi there!", createdAt: "..." }}
  variant="solid"
>
  <MessageContent content="Custom message content" markdown={false} />
</Message>

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

Step 1:

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

Step 2:

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

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...

Props

Prop	Type	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"	Optional styling variant for the message container
isLoading	boolean	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