AI Thread Options
AI
Settings
Block
Thread management component for controlling conversation context. Switch between continuing, starting fresh, or branching threads.
Card Variant
Full card with mode selection, threads, and context usage
Thread Options
Active: Code review discussion
Context window usage65% of 128k tokens
Inline Variant
Compact mode selector
Thread:
Popover Variant
Dropdown-style panel
Thread Mode
Context usage82% of 128k
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
mode* | 'continue' | 'fresh' | 'branch' | — | Current thread mode |
threads | ThreadInfo[] | — | Available threads |
activeThreadId | string | — | Currently active thread ID |
variant | 'card' | 'inline' | 'popover' | 'card' | Display variant |
onModeChange | (mode: ThreadMode) => void | — | Callback when mode changes |
onThreadSelect | (threadId: string) => void | — | Callback when thread selected |
onNewThread | () => void | — | Callback for creating new thread |
contextUsage | number | — | Current context usage (0-100) |
maxContext | number | — | Max context length in k tokens |
Usage
Import and examples
import { AIThreadOptions } from '@/blocks/ai-tools/ai-thread-options'
const [mode, setMode] = useState<ThreadMode>('continue')
<AIThreadOptions mode={mode} onModeChange={setMode} threads={threads} contextUsage={65} maxContext={128} onNewThread={() => createThread()}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Three modes: Continue, fresh start, and branch thread modes
- Context usage: Visual context window usage indicator with color coding
- Thread management: Pin, archive, and delete threads
- Active state: Highlights the currently active thread
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Mode buttons are focusableThread list navigable via keyboardKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between modes and threads |
| Enter / Space | Select mode or thread |
Notes
- Context usage percentage announced as text
- Mode descriptions visible for clarity