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.

Examples

Default 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

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)

Installation

$
npx tambo add thread-content

Component API

ThreadContent

PropTypeDefaultDescription
variant"default" | "solid""default"Optional styling variant for the message container
childrenReact.ReactNode-The child elements to render within the container

ThreadContentMessages

PropTypeDefaultDescription
classNamestring-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