チャットパネルChatPanelExperimental

import * as React from "react";
import { ChatPanel, ToastProvider, useToast, type ChatPanelMessage } from "@gunjo/ui";

const actionMessages = {
  copy: "メッセージをコピーしました。",
  branch: "この回答から分岐します。",
  raw: "Raw 表示を開きます。",
  edit: "メッセージを編集します。",
};

function SupportChatPanelBody() {
  const [messages, setMessages] = React.useState<ChatPanelMessage[]>([
    { id: "system", role: "system", content: "会話を開始しました。" },
    {
      id: "assistant",
      role: "assistant",
      userName: "サポート",
      content: "確認したい内容を送ってください。",
      timestamp: "10:01",
    },
  ]);
  const [isProcessing, setIsProcessing] = React.useState(false);
  const { showToast } = useToast();

  return (
    <ChatPanel
      title="サポートチャット"
      description="会話履歴と入力欄を同じパネルで扱います。"
      messages={messages}
      onSend={(message) => {
        setMessages((current) => [
          ...current,
          { id: `user-${Date.now()}`, role: "user", userName: "あなた", content: message, timestamp: "10:02" },
        ]);
        setIsProcessing(true);
      }}
      onStop={() => setIsProcessing(false)}
      onMessageAction={(_, action) => {
        showToast(actionMessages[action] ?? "操作を実行しました。", "success", 1800);
      }}
      isProcessing={isProcessing}
      placeholder="確認したい内容を入力..."
    />
  );
}

export function SupportChatPanel() {
  return (
    <ToastProvider labels={{ close: "閉じる" }}>
      <SupportChatPanelBody />
    </ToastProvider>
  );
}