Branch

Navigate alternate reply branches when regenerating or editing a turn.

Branch cycles through alternate reply versions after regenerate or edit. The selector hides itself when only one branch exists.

Start with the changelog, then run smoke tests before cutover.

<Branch defaultBranch={0}>
  <BranchContent>
    <Bubble>...</Bubble>
    <Bubble>...</Bubble>
  </BranchContent>
  <BranchSelector>
    <BranchPrevious />
    <BranchPage />
    <BranchNext />
  </BranchSelector>
</Branch>

Installation

pnpm dlx cubix@latest add branch --base radix

Usage

Import

import {
  Branch,
  BranchContent,
  BranchNext,
  BranchPage,
  BranchPrevious,
  BranchSelector,
} from "@/components/cubix/branch"

Example

<Branch defaultBranch={0}>
  <BranchContent>
    <Bubble>...</Bubble>
    <Bubble>...</Bubble>
  </BranchContent>
  <BranchSelector>
    <BranchPrevious />
    <BranchPage />
    <BranchNext />
  </BranchSelector>
</Branch>

Composition

Branch
├── BranchContent
│   └── (each child = one branch)
└── BranchSelector
    ├── BranchPrevious
    ├── BranchPage
    └── BranchNext

Features

Compact prev / page / next selector
Circular navigation across reply versions
Controlled and uncontrolled modes
RTL-safe chevrons and numeric order

Single branch

Only one reply version exists, so the selector stays hidden.

<Branch>
  <BranchContent>
    <Bubble>...</Bubble>
  </BranchContent>
  <BranchSelector>
    <BranchPrevious />
    <BranchPage />
    <BranchNext />
  </BranchSelector>
</Branch>

Forced selector

Force the selector even with a single branch for layout testing.

1/1

<BranchSelector force>...</BranchSelector>

Controlled

Ship behind a flag, migrate first, and keep rollback ready for an hour.

<Branch branch={branch} onBranchChange={setBranch}>
  ...
</Branch>

Many branches

Version C focuses on user-facing risk and communication.

<Branch defaultBranch={2}>
  <BranchContent>{versions.map(...)}</BranchContent>
  <BranchSelector>...</BranchSelector>
</Branch>

Custom page label

Start with the changelog, then run smoke tests before cutover.

<BranchPage>v{n}/{total}</BranchPage>

End aligned

Start with the changelog, then run smoke tests before cutover.

<div className="flex justify-end">
  <BranchSelector>...</BranchSelector>
</div>

In a message

Start with the changelog, then run smoke tests before cutover.

<Message>
  <MessageContent>
    <Branch>...</Branch>
  </MessageContent>
</Message>

RTL

To enable RTL support, see the Direction guide. Chevrons flip with dir="rtl" and IRANSans XV follows lang="fa".

اول changelog را بخوان، بعد قبل از cutover تست دود بزن.

<div dir="rtl" lang="fa">
  <Branch defaultBranch={0}>
    <BranchContent>
      <Bubble>...</Bubble>
      <Bubble>...</Bubble>
    </BranchContent>
    <BranchSelector aria-label="نسخه‌ها">
      <BranchPrevious aria-label="نسخه قبلی" />
      <BranchPage />
      <BranchNext aria-label="نسخه بعدی" />
    </BranchSelector>
  </Branch>
</div>

API Reference

Branch

Prop	Type	Default	Description
branch	number	-	Controlled branch index. Pair with onBranchChange.
defaultBranch	number	0	Initial branch index when uncontrolled.
onBranchChange	(branchIndex: number) => void	-	Called when the active branch changes.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

BranchContent

Prop	Type	Default	Description
children	React.ReactNode	-	One child per reply branch. Only the active branch is shown.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

BranchSelector

Prop	Type	Default	Description
force	boolean	false	Always render the selector, even when there is only one branch.
aria-label	string	"Reply branches"	Accessible name for the selector group.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

BranchPrevious / BranchNext

Prop	Type	Default	Description
children	React.ReactNode	-	Optional custom icon or label. Defaults to a chevron.
aria-label	string	"Previous branch" / "Next branch"	Accessible name for the previous or next control.

BranchPage

Prop	Type	Default	Description
children	React.ReactNode	-	Optional custom label. Defaults to "1 / 3" style paging.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

useBranch

Prop	Type	Default	Description
currentBranch	number	-	Active branch index (0-based).
totalBranches	number	-	Number of children registered by BranchContent.
goToPrevious	() => void	-	Cycle to the previous branch, wrapping at the start.
goToNext	() => void	-	Cycle to the next branch, wrapping at the end.