メッセージ分岐は、メッセージを編集したりリロードする際、異なる会話の分岐間で切り替えることができます。
メッセージ編集は、ユーザがカスタムエディタ・インターフェイスでメッセージを編集することを可能にします。

assistant-ui 入門 – ガイド : メッセージ (分岐, 編集)

作成 : Masashi Okumura (@classcat.com)
作成日時 : 03/24/2026
バージョン : assistant-ui@0.0.84

* 本記事は assistant-ui.com/docs の以下のページを参考にしています :

• Guides : Message Branching
• Guides : Message Editing

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

 

 

assistant-ui 入門 – ガイド : メッセージ分岐

メッセージを編集したりリロードする際、異なる会話の分岐間で移動できます (切り替えることができます)。

新しい分岐は以下の場合に作成されます :

• ユーザメッセージが編集される

• アシスタントメッセージがリロードされる

分岐は、assistant-ui が messages 配列への変更を関しすることで、自動的に追跡されます。

 

分岐サポートの有効化

BranchPickerPrimitive を使用してブランチ・ピッカーを表示できます。

import { BranchPickerPrimitive } from "@assistant-ui/react";


const Message = () => {
  return (
    <MessagePrimitive.Root>
      ...
      <BranchPicker /> {/* <-- show the branch picker */}
      ...
    </MessagePrimitive.Root>
  );
};


const BranchPicker = () => {
  return (
    <BranchPickerPrimitive.Root hideWhenSingleBranch>
      <BranchPickerPrimitive.Previous />
      <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
      <BranchPickerPrimitive.Next />
    </BranchPickerPrimitive.Root>
  );
};

 

API

API 経由で現在の分岐の状態にアクセスしたり移動することもできます。これらの API はメッセージ・スコープに依存し、メッセージコンポーネント内でのみ呼び出して良いです。

import { useAui, useAuiState } from "@assistant-ui/react";

// read branch state
const { branchNumber, branchCount } = useAuiState((s) => s.message);

// navigation
const aui = useAui();
aui.message().switchToBranch({ position: "next" });
aui.message().switchToBranch({ position: "previous" });
aui.message().switchToBranch({ branchId: "some-id" });

 

assistant-ui 入門 – ガイド : メッセージ編集

ユーザがカスタムエディタ・インターフェイスでメッセージを編集することを可能にします。つまりユーザにメッセージを編集する機能を提供します。

 

編集サポートの有効化

ComposerPrimitive を使用して、エディタ・インターフェイスを表示できます。

import { ComposerPrimitive, useAuiState } from "@assistant-ui/react";
...

const Thread = () => {
  return (
    <ThreadPrimitive.Root>
      <ThreadPrimitive.Viewport>
        ...
        <ThreadPrimitive.Messages>
          {({ message }) => {
            // Show our new component during edit mode
            return <MessageWithEditComposer />;
          }}
        </ThreadPrimitive.Messages>
      </ThreadPrimitive.Viewport>
      ...
    </ThreadPrimitive.Root>
  );
};

const UserMessage = () => {
  return (
    <MessagePrimitive.Root>
      ...
      <ActionBarPrimitive.Root>
        ...
        <ActionBarPrimitive.Edit /> {/* <-- add a button to enable edit mode */}
      </ActionBarPrimitive.Root>
    </MessagePrimitive.Root>
  );
};

// define a wrapper component that handles both display and edit mode
const MessageWithEditComposer = () => {
  const isEditing = useAuiState((s) => s.composer.isEditing);
  if (isEditing) return <EditComposer />;
  return <UserMessage />;
};

// define the edit composer component
const EditComposer = () => {
  return (
    // you can return a MessagePrimitive including a ComposerPrimitive, or only a ComposerPrimitive
    <MessagePrimitive.Root>
      ...
      <ComposerPrimitive.Root>
        <ComposerPrimitive.Input />
        <ComposerPrimitive.Cancel />
        <ComposerPrimitive.Send />
      </ComposerPrimitive.Root>
    </MessagePrimitive.Root>
  );
};

以上