Thread History

A primitive component that displays a sidebar with conversation history, search functionality, and thread management. Supports collapsible behavior and can be positioned on left or right.

Installation

npx tambo add thread-history

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

Sub-components

<ThreadHistoryHeader /> - Header section with title and collapse/expand toggle button. Handles the sidebar visibility state and provides visual indication of current state.
<ThreadHistoryNewButton /> - Button to create a new conversation thread. Supports keyboard shortcut (Alt+Shift+N) and automatically refreshes the thread list after creation.
<ThreadHistorySearch /> - Search input for filtering through conversation history. Automatically expands the sidebar when focused from collapsed state and filters threads in real-time.
<ThreadHistoryList /> - Displays the list of previous conversation threads. Shows thread metadata like creation time, handles thread switching, and displays appropriate empty states.

Usage

tsx

import { 
  ThreadHistory, 
  ThreadHistoryHeader, 
  ThreadHistoryNewButton,
  ThreadHistorySearch,
  ThreadHistoryList 
} from "@/components/ui/thread-history";

// Basic usage (left sidebar)
<ThreadHistory contextKey="my-app" position="left" defaultCollapsed={false}>
  <ThreadHistoryHeader />
  <ThreadHistoryNewButton />
  <ThreadHistorySearch />
  <ThreadHistoryList />
</ThreadHistory>

// Right sidebar with callbacks
<ThreadHistory 
  contextKey="my-app" 
  position="right" 
  defaultCollapsed={true}
  onThreadChange={() => console.log("Thread changed")}
>
  <ThreadHistoryHeader />
  <ThreadHistoryNewButton />
  <ThreadHistorySearch />
  <ThreadHistoryList />
</ThreadHistory>

Left Position (Expanded) XXXX

Tambo Conversations

Loading threads...

Main content area would go here

Collapsed State

Loading threads...

Main content area adjusts when sidebar is collapsed

Click the arrow icon in the sidebar to expand

Minimal (Header Only)

Tambo Conversations

Loading threads...

Minimal sidebar with just header

Props

ThreadHistory

Prop	Type	Description
contextKey	string	Optional context key to scope thread history
position	"left" \| "right"	Position of the sidebar (default: "left")
defaultCollapsed	boolean	Whether the sidebar starts collapsed (default: true)
onThreadChange	() => void	Optional callback when thread is switched
children	React.ReactNode	The sub-components to render within the sidebar

Features

Collapsible Sidebar: Can be collapsed to save space
Thread Management: Create new threads and switch between existing ones
Search Functionality: Filter through conversation history
Keyboard Shortcuts: Alt+Shift+N to create new thread
Position Flexibility: Can be positioned on left or right side
Responsive Behavior: Automatically adjusts layout based on collapse state