Branch Comparison

Evaluation

A/B response comparison component for evaluating and selecting between AI-generated alternatives. Features side-by-side layout, confidence scores, vote tracking, and visual selection state.

Preview

Click to select your preferred response

Compare Responses

Response A

Based on the analysis, we recommend proceeding with Option A which prioritizes cost efficiency while maintaining acceptable risk levels.

Confidence: 87%

Votes: 12

Response B

Our analysis suggests Option B as the preferred choice, emphasizing long-term stability and growth potential over immediate savings.

Confidence: 82%

Votes: 8

Static Display

Read-only mode without selection capability

Compare Responses

Conservative

Maintain current investment allocation with minimal adjustments to preserve capital.

Confidence: 91%

Aggressive

Shift 20% of portfolio to emerging market opportunities for higher growth potential.

Confidence: 76%

Pre-selected State

With initial selection

Compare Responses

Option A

Implement feature using the existing API infrastructure.

Confidence: 85%

Votes: 15

Option B

Build new microservice architecture for better scalability.

Confidence: 78%

Votes: 9

Props

BranchComparison component API reference

Prop	Type	Default	Description
`responseA*`	`BranchResponse`	—	First response option (left side)
`responseB*`	`BranchResponse`	—	Second response option (right side)
`onSelect`	`(selected: 'A' \| 'B') => void`	—	Callback when a branch is selected
`selectedBranch`	`'A' \| 'B' \| null`	`null`	Currently selected branch (controlled)
`className`	`string`	—	Additional CSS classes for the container

BranchResponse Type

Prop	Type	Default	Description
`label*`	`string`	—	Response label (e.g., "Response A")
`content*`	`string`	—	Response content text
`confidence`	`number`	—	AI confidence score (0-100)
`votes`	`number`	—	Vote count from users/evaluators

Usage

Import and implementation example

import { BranchComparison } from '@/blocks/ai-transparency/branch-comparison'

export default function Example() {
  const [selected, setSelected] = useState<'A' | 'B' | null>(null)

  const handleSelection = (branch: 'A' | 'B') => {
    setSelected(branch)
    // Submit preference to backend for RLHF training
    submitPreference(branch)
  }

  return (
    <BranchComparison
      responseA={{
        label: 'Option A',
        content: 'First AI-generated response...',
        confidence: 87,
        votes: 12,
      }}
      responseB={{
        label: 'Option B',
        content: 'Second AI-generated response...',
        confidence: 82,
        votes: 8,
      }}
      onSelect={handleSelection}
      selectedBranch={selected}
    />
  )
}

Built With

1 component

This block uses the following UI components from the design system:

Badge

Features

Built-in functionality

Side-by-side comparison: Visual A/B layout for easy comparison
Confidence scores: Display AI confidence percentage for each option
Vote tracking: Optional vote count display for crowd feedback
Selection state: Visual feedback with checkmark for selected option
Color differentiation: Indigo for Option A, sky blue for Option B
Hover states: Interactive hover effects when selectable
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Cards are clickable divs with cursor pointer when selectableSelected state shown with checkmark icon and color changeLabels use Badge component for semantic meaning

Keyboard Navigation

Key	Action
`Tab`	Focus the comparison cards (when selectable)
`Enter / Space`	Select the focused card

Notes

Consider adding role="button" to clickable cards
Consider adding aria-pressed for selection state
Confidence and votes are displayed as visible text
Color is not the only indicator - checkmark shows selection

Related Components

AI Confidence Indicator Regenerate Control Badge Card