ConversationBranch

A compact navigation control for stepping through conversation branches (regenerated responses). Shows the current position and total count with previous/next arrows that disable at boundaries.

ConversationBranch — Interactive

2/5

Navigate between 5 conversation branches

ConversationBranch — Boundary States

1/3

At start

2/3

Middle

3/3

At end

1/1

Single

Import

tsx

import { ConversationBranch } from "@arc-lo/ui";

Basic usage

tsx

const [branch, setBranch] = useState(1);
const total = 5;

<ConversationBranch
  current={branch}
  total={total}
  onPrevious={() => setBranch((b) => b - 1)}
  onNext={() => setBranch((b) => b + 1)}
/>

Inline with a message

tsx

<div className="flex items-center gap-2">
  <p>Here is my response...</p>
  <ConversationBranch current={2} total={3} />
</div>

Props

Prop	Type	Default	Description
`current`	`number`	—	Current branch index, 1-indexed (required)
`total`	`number`	—	Total number of branches (required)
`onPrevious`	`() => void`	—	Called when left arrow is clicked
`onNext`	`() => void`	—	Called when right arrow is clicked