Message Branch for Radix UI

One message, several versions: the reader sees one at a time and flips between them with the arrows under it, which say "2 of 3".

Use it when a reply is regenerated or a prompt edited and the earlier version should stay: the reader can go back and compare. Each version is a MessageBranchItem around a Message, so the messages keep their own structure. In React, the selector shows only once there are two versions, so a message that was never regenerated looks like any other.

Installation

Anatomy

MessageBranch
├── MessageBranchContent
│   └── MessageBranchItem (one per version)
└── MessageBranchSelector
    ├── MessageBranchPrevious
    ├── MessageBranchPage
    └── MessageBranchNext

Usage

import { Message, MessageContent } from "@/components/ui/message";
import {
  MessageBranch, MessageBranchContent, MessageBranchItem,
  MessageBranchNext, MessageBranchPage, MessageBranchPrevious,
  MessageBranchSelector,
} from "@/components/ui/message-branch";

<MessageBranch>
  <MessageBranchContent>
    {versions.map((version) => (
      <MessageBranchItem key={version.id}>
        <Message>
          <MessageContent>{version.text}</MessageContent>
        </Message>
      </MessageBranchItem>
    ))}
  </MessageBranchContent>
  <MessageBranchSelector from="assistant">
    <MessageBranchPrevious />
    <MessageBranchPage />
    <MessageBranchNext />
  </MessageBranchSelector>
</MessageBranch>

Demos

Regenerate

A reply with Copy and Regenerate in its footer, and the selector beside them. It starts with one version, so there is no selector; each Regenerate adds a version and shows it, through branch and onBranchChange. Put the whole message inside MessageBranch when the selector belongs in the message's own footer.

Edited Prompts

The person's prompt has two versions, each with the reply it got, so each MessageBranchItem holds a pair. defaultBranch opens on the latest edit, and from="user" puts the selector at the end, under the bubble. Use it when editing a prompt starts the conversation again from there.

AI SDK

regenerate replaces a reply with a new one. To keep the old one as a version, save it before you call it, under the prompt it answers.

const { messages, regenerate } = useChat();
const [replaced, setReplaced] = useState<Record<string, UIMessage[]>>({});

function retry(prompt: UIMessage, reply: UIMessage) {
  setReplaced({
    ...replaced,
    [prompt.id]: [...(replaced[prompt.id] ?? []), reply],
  });
  regenerate({ messageId: reply.id });
}

The reply's versions are the saved ones and the reply itself. A new reply has a new id, so keying the branch on it opens it on the newest version.

const versions = [...(replaced[prompt.id] ?? []), reply];

return (
  <MessageBranch defaultBranch={versions.length - 1} key={reply.id}>
    <MessageBranchContent>
      {versions.map((version) => (
        <MessageBranchItem key={version.id}>
          <Message>{/* the version's parts */}</Message>
        </MessageBranchItem>
      ))}
    </MessageBranchContent>
    <MessageBranchSelector from="assistant">
      <MessageBranchPrevious />
      <MessageBranchPage />
      <MessageBranchNext />
    </MessageBranchSelector>
  </MessageBranch>
);

Migrating from AI SDK Elements

AI SDK Elements keeps these parts in components/ai-elements/message.tsx, and an older project in components/ai-elements/branch.tsx as Branch, BranchMessages, BranchSelector, BranchPrevious, BranchNext and BranchPage. Run the command in Installation, then import the parts from @/components/ui/message-branch instead, under their MessageBranch names. What differs:

• Wrap each version in a MessageBranchItem. Elements counted MessageBranchContent's children; here each version registers itself, so a version can sit in a fragment or a list, and the count is right in Vue, Svelte and Solid too.
• defaultBranch and onBranchChange are the same; branch makes it controlled.
• from on MessageBranchSelector is optional: user puts it at the end.
• The selector is a group of ghost buttons rather than a ButtonGroup, the buttons say "Previous version" and "Next version", and MessageBranchPage is a live region.

FAQ

API Reference