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.

Usage

tsx

import { Message, MessageContent, MessageRenderedComponentArea } 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 custom content
<Message 
  role="assistant" 
  message={{ id: "msg-2", 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 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

Props

Prop	Type	Description
role	"user" \| "assistant"	The role of the message sender
message	TamboThreadMessage	The full Tambo thread message object
variant	"default" \| "solid"	Optional styling variant for the message container
isLoading	boolean	Optional flag to indicate if the message is in a loading state
children	React.ReactNode	The child elements to render within the root container