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#

Contains all parts of the branch picker.

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

<ParametersTable
type="BranchPickerPrimitiveRootProps"
parameters={[
{
name: "asChild",
},
{
name: "hideWhenSingleBranch",
type: "boolean",
default: "false",
description:
"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.

<ParametersTable
type="BranchPickerPrimitivePreviousProps"
parameters={[
{
name: "asChild",
},
]}
/>

Next#

Navigates to the next branch.

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

<ParametersTable
type="BranchPickerPrimitiveNextProps"
parameters={[
{
name: "asChild",
},
]}
/>