Thread Content

A primitive component that displays the main content area of a conversation thread. Automatically connects to the Tambo context to render messages with customizable styling variants.

Installation

npx tambo add thread-content

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

Sub-components

<ThreadContentMessages /> - Renders the list of messages in the thread. Automatically connects to the Tambo context to display messages with proper alignment based on sender role. Handles loading indicators for messages being generated and supports rendered components within assistant messages.

Usage

tsx

import { ThreadContent, ThreadContentMessages } from "@/components/ui/thread-content";

// Basic usage
<ThreadContent variant="default">
  <ThreadContentMessages />
</ThreadContent>

// With solid variant
<ThreadContent variant="solid">
  <ThreadContentMessages className="custom-messages-styling" />
</ThreadContent>

// Custom wrapper
<ThreadContent>
  <div className="custom-wrapper">
    <ThreadContentMessages />
  </div>
</ThreadContent>

Default Thread Content

What's the weather?

Hello, world! I'm an assistant. I'll get the weather for you

tool: get_weatherparameters: {"city": "San Francisco"}

The weather in San Francisco is sunny.

☀️

San Francisco

Sunny

Thanks

Solid Variant

What's the weather?

Hello, world! I'm an assistant. I'll get the weather for you

tool: get_weatherparameters: {"city": "San Francisco"}

The weather in San Francisco is sunny.

☀️

San Francisco

Sunny

Thanks

Empty Thread (No Messages)

Props

ThreadContent

Prop	Type	Description
variant	"default" \| "solid"	Optional styling variant for the message container
children	React.ReactNode	The child elements to render within the container

ThreadContentMessages Props

Prop	Type	Description
className	string	Optional CSS classes to apply to the messages container

Features

Automatic Context Integration: Connects to Tambo thread context to display messages
Loading State Handling: Shows loading indicators for messages being generated
Message Variants: Applies consistent styling variants to all messages
Responsive Layout: Handles message alignment based on sender role
Component Rendering: Supports rendered components within assistant messages