assistant-ui 入門 : プリミティブ – ActionBar

Posted on by Masashi Okumura

ActionBar プリミティブは自動非表示、状態コピー、インテリジェントな無効化機能を備えたメッセージアクションボタンを構築できます。
ActionBar プリミティブは、コピー、リロード、編集、フィードバック、音声読み上げ、エクスポート、等のメッセージアクションを提供します

assistant-ui 入門 : プリミティブ – ActionBar

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

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

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

 

 

assistant-ui 入門 : プリミティブ – ActionBar

自動非表示、状態コピー、インテリジェントな無効化機能を備えたメッセージアクションボタンを構築します。

ActionBar プリミティブはメッセージアクションを提供します: コピー、リロード、編集、フィードバック、音声読み上げ、エクスポート、等。ホバー時の自動非表示、メッセージ状態に基づく自動無効化、フローティグ動作を備えたインテリジェントな表示制御を処理します。開発者はボタンを作成し、プリミティブがアクション状態と利用可能性を処理します。

Preview

Code

import {
  ActionBarPrimitive,
  MessagePrimitive,
} from "@assistant-ui/react";
import { CheckIcon, CopyIcon, RefreshCwIcon } from "lucide-react";

function AssistantMessage() {
  return (
    <MessagePrimitive.Root className="group flex flex-col items-start gap-1">
      <div className="max-w-[80%] rounded-2xl bg-muted px-4 py-2.5 text-sm">
        <MessagePrimitive.Parts />
      </div>
      <ActionBarPrimitive.Root
        hideWhenRunning
        autohide="not-last"
        autohideFloat="always"
        className="flex gap-0.5 data-[floating]:opacity-0 data-[floating]:group-hover:opacity-100 data-[floating]:transition-opacity"
      >
        <ActionBarPrimitive.Copy className="group/copy flex size-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground">
          <CopyIcon className="size-4 group-data-[copied]/copy:hidden" />
          <CheckIcon className="hidden size-4 group-data-[copied]/copy:block" />
        </ActionBarPrimitive.Copy>
        <ActionBarPrimitive.Reload className="flex size-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground">
          <RefreshCwIcon className="size-4" />
        </ActionBarPrimitive.Reload>
      </ActionBarPrimitive.Root>
    </MessagePrimitive.Root>
  );
}

 

クイックスタート

コピーとリロードを備えた最小限のアクションバー :

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

<ActionBarPrimitive.Root>
  <ActionBarPrimitive.Copy>Copy</ActionBarPrimitive.Copy>
  <ActionBarPrimitive.Reload>Reload</ActionBarPrimitive.Reload>
</ActionBarPrimitive.Root>

Root は <div> をレンダリングし、アクションボタンは <button> 要素をレンダリングします。各ボタンは、そのアクションが利用できない場合には自動的に無効化されます (e.g., Copy はコンテンツがない場合は無効にされ、Reload はモデルが実行中は無効にされます)。

ActionBar は MessagePrimitive.Root 内に配置される必要があります、最も近いメッセージコンテキストからメッセージの状態を読み取るためです。

ℹ️ ランタイム・セットアップ: プリミティブはランタイム・コンテキストを必要とします。UI をランタイム (例えば useLocalRuntime(…)) を持つ AssistantRuntimeProvider でラップします。See Pick a Runtime.

 

以上