File size: 2,018 Bytes
212c959 | 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 | export default function SettingsModal({ theme, onTheme, onClearChats, onClose }) {
return (
<div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
<div className="modal-card" style={{ maxWidth: 500 }}>
<div className="modal-header">
<span className="modal-title">Settings</span>
<button className="modal-close" onClick={onClose}>
<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
<div className="settings-row">
<div>
<div className="settings-row-label">Appearance</div>
<div className="settings-row-sub">Switch between Light and Dark mode</div>
</div>
<div className="seg-ctrl">
<button className={`seg-btn ${theme === 'dark' ? 'active' : ''}`} onClick={() => onTheme('dark')}>Dark</button>
<button className={`seg-btn ${theme === 'light' ? 'active' : ''}`} onClick={() => onTheme('light')}>Light</button>
</div>
</div>
<div className="settings-row">
<div>
<div className="settings-row-label">Chat History</div>
<div className="settings-row-sub">Clear your current chat session</div>
</div>
<button className="btn btn-danger" onClick={() => { onClearChats(); onClose() }}>
Clear Chat
</button>
</div>
<div style={{ marginTop: 24, padding: 16, background: 'var(--s)', borderRadius: 12, textAlign: 'center', fontSize: 12, color: 'var(--t3)' }}>
<div style={{ fontWeight: 600, color: 'var(--t2)', marginBottom: 2 }}>OwnGPT Web UI v2.0.4</div>
<div>Powered by open-source models, crafted with React and FastAPI.</div>
</div>
</div>
</div>
</div>
)
}
|