チャットメッセージChatMessageExperimental

import { ChatMessage, ToastProvider, useToast } from "@gunjo/ui";

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

function ConversationPreviewBody() {
  const { showToast } = useToast();

  const handleMessageAction = (action) => {
    showToast(actionMessages[action] ?? "操作を実行しました。", "success", 1800);
  };

  return (
    <div className="w-full max-w-2xl rounded-lg border bg-background">
      <ChatMessage role="system" content="会話を開始しました。" />
      <ChatMessage
        role="assistant"
        userName="アシスタント"
        content="確認したい内容を送ってください。回答側はカードや進捗を内包しやすいように、本文の背景と枠線を持ちません。"
        copyValue="確認したい内容を送ってください。"
        timestamp="10:01"
        onAction={handleMessageAction}
      />
      <ChatMessage
        role="user"
        userName="あなた"
        content="状態とバリエーションを見直して。"
        timestamp="10:02"
        onAction={handleMessageAction}
      />
      <ChatMessage role="assistant" userName="アシスタント" content="" isTyping />
    </div>
  );
}

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