src/components/ChatSettings.jsx

export default function ChatSettings({ settings, setSettings }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      <input
        type="text"
        value={settings.system}
        onChange={(e) => setSettings({ ...settings, system: e.target.value })}
        placeholder="System prompt (e.g. You are a helpful assistant)"
        style={{ padding: "10px", fontSize: "16px" }}
      />

      <label>
        Temperature: {settings.temperature}
        <input
          type="range"
          min="0"
          max="2"
          step="0.1"
          value={settings.temperature}
          onChange={(e) =>
            setSettings({
              ...settings,
              temperature: parseFloat(e.target.value),
            })
          }
        />
      </label>

      <label>
        Top-p: {settings.top_p}
        <input
          type="range"
          min="0"
          max="1"
          step="0.05"
          value={settings.top_p}
          onChange={(e) =>
            setSettings({ ...settings, top_p: parseFloat(e.target.value) })
          }
        />
      </label>

      <label>
        Max tokens: {settings.max_tokens}
        <input
          type="range"
          min="50"
          max="1024"
          step="50"
          value={settings.max_tokens}
          onChange={(e) =>
            setSettings({ ...settings, max_tokens: parseInt(e.target.value) })
          }
        />
      </label>
    </div>
  );
}