AI Elements

Branch

Step through alternative assistant generations.

Import

tsx

import { Branch } from "@cronus-ui/ui";

bash

npx cronus-ui add branch

Examples

Alternative generations

Step through sibling assistant replies without wrapping past the ends.

First draft of the answer.

tsx

<Branch>
  <BranchMessages>
    <p>First draft of the answer.</p>
    <p>A tighter rewrite of the same answer.</p>
  </BranchMessages>
  <BranchSelector from="assistant">
    <BranchPrevious />
    <BranchPage />
    <BranchNext />
  </BranchSelector>
</Branch>

API Reference

Generated from the component's exported types.

BranchLabels

Prop	Type	Default	Description
`previous`	`string`	—	—
`next`	`string`	—	—
`page`	`string`	—	—

BranchProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`defaultBranch`	`number`	`0`	—
`onBranchChange`	`(branchIndex: number) => void`	—	—
`labels`	`BranchLabels`	—	Override default English strings.

BranchMessagesProps

Extends HTMLAttributes<HTMLDivElement>

No own props — see the extended type above for available props.

BranchSelectorProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`from`	`BranchRole`	`"assistant"`	—

BranchPreviousProps

Extends ComponentProps<typeof Button>

No own props — see the extended type above for available props.

BranchNextProps

Extends ComponentProps<typeof Button>

No own props — see the extended type above for available props.

BranchPageProps

Extends HTMLAttributes<HTMLSpanElement>

No own props — see the extended type above for available props.