Conversation Branch

Transparency

Git-like conversation branching for AI chat interfaces. Switch between alternative conversation paths, merge responses, and explore different AI approaches to the same problem.

Interactive Preview

Explore different conversation branches with expandable previews

Conversation Branches

3 branches • Switch between conversation paths

Main ConversationCURRENT

24 messages12/1/2024claude-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 messages12/1/2024claude-opus-4

Shorter Analysis

12 messages12/1/2024claude-sonnet-4

Features

Git-like branching: Create, switch, and manage conversation branches like version control
Multiple visualization modes: Tree, list, and timeline views for different use cases
Branch operations: Rename, merge, delete, pin, and export branches
Message preview: Expandable preview of the last message in each branch
Model tracking: See which AI model was used for each branch
Visual hierarchy: Color-coded branches with connection lines

Installation

Import the ConversationBranch component from your AI components library. Provide an array of branch objects with metadata.

// Example usage

import { ConversationBranch } from '@/components/ai/conversation-branch'

const branches = [
  {
    id: 'main',
    label: 'Main Conversation',
    messages: 24,
    created: '2024-12-01T09:00:00Z',
    model: 'claude-sonnet-4',
    lastMessage: 'Analysis summary...',
    pinned: true
  },
  // ... more branches
]

<ConversationBranch
  branches={branches}
  currentBranchId="main"
  onSwitch={(id) => switchToBranch(id)}
  onMerge={(source, target) => mergeBranches(source, target)}
  onDelete={(id) => deleteBranch(id)}
  onCreateBranch={() => createNewBranch()}
  visualizationMode="tree"
  showPreview={true}
/>

Props

Prop	Type	Default	Description
branches	Branch[]	[]	Array of conversation branches
currentBranchId	string	-	ID of the active branch
onSwitch	(id: string) => void	-	Called when switching branches
onMerge	(source, target) => void	-	Called when merging branches
visualizationMode	'tree' \| 'list' \| 'timeline'	'tree'	Visualization style
showPreview	boolean	true	Show message preview on expand