logoassistant-ui
Primitives

BranchPicker

View and switch between branches.

Anatomy

import { BranchPickerPrimitive } from "@assistant-ui/react";
 
const BranchPicker = () => (
  <BranchPickerPrimitive.Root>
    <BranchPickerPrimitive.Previous />
    <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
    <BranchPickerPrimitive.Next />
  </BranchPickerPrimitive.Root>
);

API Reference

Root

Containts all parts of the branch picker.

This primitive renders a <div> element unless asChild is set.

BranchPickerPrimitiveRootProps

asChild:

boolean = false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

hideWhenSingleBranch:

boolean = false

Do not render the BranchPicker when there is only one branch at the current message.

Number

The current branch number.

This primitive renders the raw number as a string.

Count

The total number of branches.

This primitive renders the raw number as a string.

Previous

Navigates to the previous branch.

This primitive renders a <button> element unless asChild is set.

BranchPickerPrimitivePreviousProps

asChild:

boolean = false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

Next

Navigates to the next branch.

This primitive renders a <button> element unless asChild is set.

BranchPickerPrimitiveNextProps

asChild:

boolean = false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

Previous

Message

Next

ActionBar

On this page

Edit on Github