Function ModelSettings

web/components/settings/ModelSettings.tsx:10–123

()

import { cn } from "@/lib/utils";

export function ModelSettings() {
  const { settings, updateSettings, resetSettings } = useChatStore();
  const [showAdvanced, setShowAdvanced] = useState(false);

  const selectedModel = MODELS.find((m) => m.id === settings.model);

  return (
    <div>
      <SectionHeader title="Model" onReset={() => resetSettings("model")} />

      <SettingRow
        label="Default model"
        description="The AI model used for new conversations."
      >
        <select
          value={settings.model}
          onChange={(e) => updateSettings({ model: e.target.value })}
          className={cn(
            "bg-surface-800 border border-surface-700 rounded-md px-3 py-1.5 text-sm",
            "text-surface-200 focus:outline-none focus:ring-1 focus:ring-brand-500"
          )}
        >
          {MODELS.map((m) => (
            <option key={m.id} value={m.id}>
              {m.label} — {m.description}
            </option>
          ))}
        </select>
      </SettingRow>

      {selectedModel && (
        <div className="mb-4 px-3 py-2 rounded-md bg-surface-800/50 border border-surface-800 text-xs text-surface-400">
          <span className="font-medium text-surface-300">{selectedModel.label}</span>
          {" — "}{selectedModel.description}
        </div>
      )}

      <SettingRow
        label="Max tokens"
        description="Maximum number of tokens in the model's response."
        stack
      >
        <div className="flex items-center gap-3">
          <Slider
            value={settings.maxTokens}
            min={1000}
            max={200000}
            step={1000}
            onChange={(v) => updateSettings({ maxTokens: v })}
            showValue={false}
            className="flex-1"
          />
          <input
            type="number"
            value={settings.maxTokens}
            min={1000}
            max={200000}
            step={1000}