File size: 2,488 Bytes
4386567 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | import { useState } from 'react';
export default function SettingsModal({ settings, onSave, onClose }) {
const [form, setForm] = useState({ ...settings });
const update = (key, val) => setForm(prev => ({ ...prev, [key]: val }));
return (
<div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
<div className="modal-card">
<div className="modal-header">
<h3>⚙️ Settings</h3>
<button className="modal-close" onClick={onClose}>✕</button>
</div>
<div className="modal-body">
<div className="settings-field">
<label>API Endpoint</label>
<input className="settings-input" type="url" value={form.apiUrl} onChange={e => update('apiUrl', e.target.value)} placeholder="https://mindigenous-mindi-chat.hf.space" />
<div className="settings-hint">HuggingFace Space or custom API URL</div>
</div>
<div className="settings-field">
<label>HuggingFace Token</label>
<input className="settings-input" type="password" value={form.hfToken} onChange={e => update('hfToken', e.target.value)} placeholder="hf_..." />
<div className="settings-hint">Required for ZeroGPU access. Get one at huggingface.co/settings/tokens</div>
</div>
<div className="settings-field">
<label>Temperature</label>
<div className="settings-range-wrap">
<input className="settings-range" type="range" min="0" max="2" step="0.05" value={form.temperature} onChange={e => update('temperature', parseFloat(e.target.value))} />
<span className="settings-range-val">{Number(form.temperature).toFixed(2)}</span>
</div>
</div>
<div className="settings-field">
<label>Max Tokens</label>
<div className="settings-range-wrap">
<input className="settings-range" type="range" min="128" max="4096" step="128" value={form.maxTokens} onChange={e => update('maxTokens', parseInt(e.target.value))} />
<span className="settings-range-val">{form.maxTokens}</span>
</div>
</div>
</div>
<div className="modal-footer">
<button className="modal-btn ghost" onClick={onClose}>Cancel</button>
<button className="modal-btn primary" onClick={() => onSave(form)}>Save Settings</button>
</div>
</div>
</div>
);
}
|