chatkit/frontend/src/components/ModelSelector.tsx

interface ModelOption {
  id: string;
  name: string;
  desc: string;
  tag?: string;
}

const MODELS: ModelOption[] = [
  {
    id: "gpt-5.4",
    name: "GPT-5.4",
    desc: "最強模型，適合複雜專業分析",
    tag: "推薦",
  },
  {
    id: "gpt-5.4-pro",
    name: "GPT-5.4 Pro",
    desc: "更高算力，回答更精確（較慢）",
  },
  {
    id: "gpt-5.3-chat-latest",
    name: "GPT-5.3 Instant",
    desc: "快速回應，適合圖片解析與日常任務",
  },
  {
    id: "gpt-5-mini",
    name: "GPT-5 Mini",
    desc: "快速省費，適合簡單任務",
  },
  {
    id: "gpt-4o",
    name: "GPT-4o",
    desc: "穩定可靠，速度快成本低",
  },
  {
    id: "gpt-4o-mini",
    name: "GPT-4o Mini",
    desc: "最便宜，適合大量資料或測試",
  },
];

interface ModelSelectorProps {
  value: string;
  onChange: (model: string) => void;
  label?: string;
}

export function ModelSelector({ value, onChange, label }: ModelSelectorProps) {
  const selected = MODELS.find((m) => m.id === value) || MODELS[0];

  return (
    <div className="flex items-center gap-3">
      {label && (
        <span className="text-xs text-[var(--color-text-muted)] whitespace-nowrap">{label}</span>
      )}
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="input !w-auto !py-1.5 text-sm"
      >
        {MODELS.map((m) => (
          <option key={m.id} value={m.id}>
            {m.name} — {m.desc}{m.tag ? ` (${m.tag})` : ""}
          </option>
        ))}
      </select>
    </div>
  );
}