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.

`useBranchPickerNumber`

import { useBranchPickerNumber } from "@assistant-ui/react";
 
const Number = () => {
  const number = useBranchPickerNumber();
 
  return <span>{number}</span>;
};

Count

The total number of branches.

This primitive renders the raw number as a string.

`useBranchPickerCount`

import { useBranchPickerCount } from "@assistant-ui/react";
 
const Count = () => {
  const count = useBranchPickerCount();
 
  return <span>{count}</span>;
};

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.

`useBranchPickerPrevious`

import { useBranchPickerPrevious } from "@assistant-ui/react";
 
const Previous = () => {
  const previous = useBranchPickerPrevious();
 
  // previous action is not available
  if (!previous) return null;
 
  return <button onClick={previous}>Previous</button>;
};

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.

`useBranchPickerNext`

import { useBranchPickerNext } from "@assistant-ui/react";
 
const Next = () => {
  const next = useBranchPickerNext();
 
  // next action is not available
  if (!next) return null;
 
  return <button onClick={next}>Next</button>;
};

BranchPicker

BranchPickerPrimitiveRootProps

asChild:

hideWhenSingleBranch:

BranchPickerPrimitivePreviousProps

asChild:

BranchPickerPrimitiveNextProps

asChild:

On this page