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 messages3/21/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 messages3/21/2026claude-opus-4
Shorter Analysis
12 messages3/21/2026claude-sonnet-4

Alternative Branch Active

Switch between branches with visual indicators

Conversation Branches

3 branches • Switch between conversation paths

Main Conversation
24 messages3/21/2026claude-sonnet-4
With Opus 4CURRENT
18 messages3/21/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 messages3/21/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