Eidetic

Conversation Branch

AI
Results
Governor

Git-like conversation branching for AI chat interfaces. Create, switch between, and manage multiple conversation paths with visual hierarchy and version control-style operations.

Preview

Interactive branch management with expandable previews

Conversation Branches

3 branches • Switch between conversation paths

Main ConversationCURRENT
24 messages4/16/2026claude-sonnet-4
Last message
Based on my analysis of your Q4 sales data, I recommend focusing on the enterprise segment where we see a 23% higher con...
With Opus 4
18 messages4/16/2026claude-opus-4
Shorter Analysis
12 messages4/16/2026claude-sonnet-4

Alternative Branch Active

Switch between branches with visual indicators

Conversation Branches

3 branches • Switch between conversation paths

Main Conversation
24 messages4/16/2026claude-sonnet-4
With Opus 4CURRENT
18 messages4/16/2026claude-opus-4
Last message
I've conducted a deeper analysis using more sophisticated reasoning. The enterprise segment shows promise, but consider ...
Shorter Analysis
12 messages4/16/2026claude-sonnet-4

Props

ConversationBranch component API reference

PropTypeDefaultDescription
branchesBranch[]Default branchesArray of conversation branches to display
currentBranchIdstring'main'ID of the currently active branch
compactbooleanfalseCompact display mode with less padding
visualizationMode'tree' | 'list' | 'timeline''tree'Visualization style for branches
showPreviewbooleantrueShow message preview when branch is expanded
onSwitch(branchId: string) => void—Callback when switching to a different branch
onCreateBranch() => void—Callback when creating a new branch
onRename(branchId: string, newLabel: string) => void—Callback when renaming a branch
onDelete(branchId: string) => void—Callback when deleting a branch
onExport(branchId: string) => void—Callback when exporting a branch
onTogglePin(branchId: string) => void—Callback when toggling pin status
classNamestring—Additional CSS classes

Branch Type

interface Branch {
 id: string
 label: string
 messages: number
 created: string // ISO date string
 model?: string // AI model used (e.g., 'claude-sonnet-4')
 lastMessage?: string // Preview of last message
 pinned?: boolean // Pin to top
}

Usage

Import and implementation example

import { ConversationBranch, type Branch } from '@/blocks/ai-conversation/conversation-branch'


const branches: Branch[] = [
 {
 id: 'main',
 label: 'Main Conversation',
 messages: 24,
 created: new Date().toISOString(),
 model: 'claude-sonnet-4',
 lastMessage: 'Analysis summary...',
 pinned: true,
 },
 {
 id: 'alt-1',
 label: 'Alternative Path',
 messages: 18,
 created: new Date().toISOString(),
 model: 'claude-opus-4',
 lastMessage: 'Different approach...',
 },
]


export default function Example() {
 const [currentBranch, setCurrentBranch] = useState('main')


 return (
 <ConversationBranch
 branches={branches}
 currentBranchId={currentBranch}
 onSwitch={(id) => setCurrentBranch(id)}
 onCreateBranch={() => console.log('Create new branch')}
 onRename={(id, label) => console.log('Rename:', id, label)}
 onDelete={(id) => console.log('Delete:', id)}
 onExport={(id) => console.log('Export:', id)}
 />
 )
}
This block is self-contained (no UI component dependencies)

Features

Built-in functionality

  • Git-like branching: Create and manage conversation branches like version control
  • Visual hierarchy: Color-coded branches with connection lines
  • Branch operations: Rename, delete, pin, and export branches
  • Message preview: Expandable preview of last message in each branch
  • Model tracking: Display which AI model was used for each branch
  • Active state indicator: Clear visual highlight of current branch
  • Pin functionality: Pin important branches for quick access
  • Metadata display: Show message count, creation date, and model info
  • Dark mode: Full dark mode support with proper color contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

role="region" on containeraria-label for branch sectionsaria-current for active branch

Keyboard Navigation

KeyAction
TabNavigate between branch cards and action buttons
Enter / SpaceSelect branch or activate button

Notes

  • Branch cards are clickable and keyboard accessible
  • Pinned status is visually indicated with star icon
  • Current branch is clearly marked with badge
  • Action buttons have descriptive titles

Related Components

AIConversationHistoryAIChatMessageAIModelSelectorTree