チャットコンポーザーChatComposerExperimental

import * as React from "react";
import { ChatComposer } from "@gunjo/ui";

export function ComposerWithChoices() {
  const [selected, setSelected] = React.useState("hybrid");
  const choices = [
    { id: "hybrid", label: "用途とタイプのハイブリッド" },
    { id: "file", label: "ファイルタイプで分ける" },
    { id: "date", label: "日付で分ける" },
    { id: "proposal", label: "まず提案だけ見たい" },
  ];

  return (
    <ChatComposer
      prompt={
        <div className="rounded-2xl border bg-background p-4 shadow-sm">
          <div className="mb-3 flex items-center justify-between gap-3">
            <p className="text-sm font-semibold">どの整理方針で進めますか？</p>
            <button type="button" className="rounded-md px-2 py-1 text-sm hover:bg-muted">
              スキップ
            </button>
          </div>
          <div className="space-y-2">
            {choices.map((choice, index) => (
              <button
                key={choice.id}
                type="button"
                onClick={() => setSelected(choice.id)}
                className={`flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left text-sm transition-colors ${selected === choice.id ? "border-primary-border bg-primary-subtle text-foreground" : "border-border bg-muted/20 text-muted-foreground hover:bg-muted/40"}`}
              >
                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-background font-semibold">
                  {selected === choice.id ? "✓" : index + 1}
                </span>
                <span>{choice.label}</span>
              </button>
            ))}
          </div>
        </div>
      }
      inputProps={{
        onSend: (message, files) => console.log({ message, files }),
        placeholder: "または直接返信...",
        modelOptions: [
          { value: "auto", label: "自動", description: "内容に合わせて選択" },
          { value: "standard", label: "標準モデル", description: "通常の確認向け" },
          { value: "large", label: "大容量モデル", description: "長い文脈向け" },
          { value: "fast", label: "高速モデル", description: "短い確認向け" },
        ],
      }}
    />
  );
}