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.
Examples
Left Position (Expanded)
Tambo Conversations
Loading threads...
Main content area would go here
Collapsed State
Tambo Conversations
Loading threads...
Main content area adjusts when sidebar is collapsed
Click the arrow icon in the sidebar to expand
Right Position
Main content area with right sidebar
Tambo Conversations
Loading threads...
Minimal (Header Only)
Tambo Conversations
Loading threads...
Minimal sidebar with just header and list
Installation
Component API
ThreadHistory
| Prop | Type | Default | Description |
|---|---|---|---|
| contextKey | string | - | Optional context key to scope thread history |
| position | "left" | "right" | "left" | Position of the sidebar |
| defaultCollapsed | boolean | true | Whether the sidebar starts collapsed |
| onThreadChange | () => void | - | Optional callback when thread is switched |
| children | React.ReactNode | - | The sub-components to render within the sidebar |
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.
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