Branch navigator
Moves between the versions of an edited message or a regenerated reply: previous, 2 / 3, next.
On this page
Move between regenerated replies.
Installation
Usage
import { BranchNavigator } from "@/components/ui/chatcn/branch-navigator"
<BranchNavigator count={versions.length} index={index} onIndexChange={setIndex} />Props
| Prop | Type | Notes |
|---|---|---|
count | number | Number of versions. Renders nothing below 2 |
index, defaultIndex, onIndexChange | number | 0-based. Defaults to the newest |
pending | boolean | A new version is generating: shows a spinner by the count |
noun | string | Used in labels. Defaults to version |
Keyboard
| Key | Action |
|---|---|
←, → | Previous and next version while focused (mirrored in right-to-left) |
Home, End | First and last version |
Accessibility
- The group is labeled Version 2 of 3, and the buttons Previous version and Next version.
- The ends use
aria-disabledinstead ofdisabled, so focus stays on a button that reaches the end. - The count uses tabular figures, so the control never changes width.
Motion
The navigator itself does not animate. Crossfade the content below it if you like, as the example does, over 150 ms.