feat(ui): restyle LLMTab with DeckyFleet/PersonaGeneration form vocabulary
This commit is contained in:
@@ -1,6 +1,10 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Save, CheckCircle } from '../../../icons';
|
||||
import { Save, CheckCircle, AlertTriangle } from '../../../icons';
|
||||
import api from '../../../utils/api';
|
||||
import { useToast } from '../../Toasts/useToast';
|
||||
import '../../DeckyFleet.css';
|
||||
import '../../PersonaGeneration.css';
|
||||
import './LLMTab.css';
|
||||
|
||||
interface LLMPayload {
|
||||
provider: string;
|
||||
@@ -31,23 +35,24 @@ interface Props {
|
||||
}
|
||||
|
||||
export const LLMTab: React.FC<Props> = ({ isAdmin }) => {
|
||||
const { push } = useToast();
|
||||
const [cfg, setCfg] = useState<LLMPayload>(DEFAULTS);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [msg, setMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [apiKeyInput, setApiKeyInput] = useState('');
|
||||
const [clearApiKey, setClearApiKey] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
api.get<LLMPayload>('/realism/llm')
|
||||
.then((r) => setCfg(r.data))
|
||||
.catch(() => setMsg({ type: 'error', text: 'FAILED TO LOAD LLM CONFIG' }))
|
||||
.catch(() => setError('Failed to load LLM config.'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setMsg(null);
|
||||
setError(null);
|
||||
const body: PutBody = {
|
||||
provider: cfg.provider,
|
||||
base_url: cfg.base_url || null,
|
||||
@@ -62,161 +67,155 @@ export const LLMTab: React.FC<Props> = ({ isAdmin }) => {
|
||||
setCfg(r.data);
|
||||
setApiKeyInput('');
|
||||
setClearApiKey(false);
|
||||
setMsg({ type: 'success', text: 'LLM CONFIG SAVED' });
|
||||
push({ text: 'LLM CONFIG SAVED', tone: 'matrix', icon: 'terminal' });
|
||||
} catch (err: any) {
|
||||
const detail = err?.response?.data?.detail;
|
||||
const status = err?.response?.status;
|
||||
if (status === 403) setMsg({ type: 'error', text: 'ADMIN ROLE REQUIRED' });
|
||||
else if (status === 400 && detail) setMsg({ type: 'error', text: `VALIDATION FAILED: ${detail}` });
|
||||
else setMsg({ type: 'error', text: 'SAVE FAILED' });
|
||||
if (status === 403) setError('Admin role required to save.');
|
||||
else if (status === 400 && detail) setError(`Validation failed: ${detail}`);
|
||||
else setError('Save failed.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="config-panel"><span className="config-label">LOADING…</span></div>;
|
||||
return <div className="llm-tab-root"><div className="dim" style={{ padding: '16px 0' }}>Loading…</div></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="config-panel">
|
||||
<div className="config-field">
|
||||
<span className="config-label">PROVIDER</span>
|
||||
{isAdmin ? (
|
||||
<div className="llm-tab-root">
|
||||
<div className="info-banner">
|
||||
<div>
|
||||
<strong>Scope:</strong> configures the LLM backend used for{' '}
|
||||
<em>email bodies, drafts, and notes</em> generated by the realism
|
||||
subsystem. Changes are persisted and hot-reloaded immediately; the
|
||||
orchestrator worker picks them up within one refresh tick (~5 min).
|
||||
</div>
|
||||
{error && (
|
||||
<div className="info-line alert-text" style={{ marginTop: 8 }}>
|
||||
<AlertTriangle size={12} /> {error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-grid">
|
||||
<div className="tweak-group">
|
||||
<label>Provider</label>
|
||||
<select
|
||||
className="role-select"
|
||||
style={{ width: 200 }}
|
||||
className="input"
|
||||
value={cfg.provider}
|
||||
disabled={!isAdmin}
|
||||
onChange={(e) => setCfg({ ...cfg, provider: e.target.value })}
|
||||
>
|
||||
<option value="ollama">Ollama</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="config-value">{cfg.provider}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="tweak-group">
|
||||
<label>Model</label>
|
||||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="llama3.1"
|
||||
value={cfg.model}
|
||||
disabled={!isAdmin}
|
||||
onChange={(e) => setCfg({ ...cfg, model: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="config-field">
|
||||
<span className="config-label">BASE URL</span>
|
||||
{isAdmin ? (
|
||||
<>
|
||||
<div className="config-input-row">
|
||||
<input
|
||||
type="url"
|
||||
style={{ width: 340 }}
|
||||
placeholder="http://127.0.0.1:11434 — blank for local subprocess"
|
||||
value={cfg.base_url || ''}
|
||||
onChange={(e) => setCfg({ ...cfg, base_url: e.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
<span className="interval-hint">
|
||||
Leave blank to use local Ollama subprocess. Set to the daemon URL when targeting a remote host.
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="config-value">{cfg.base_url || '(subprocess)'}</span>
|
||||
)}
|
||||
<div className="form-grid single-col">
|
||||
<div className="tweak-group">
|
||||
<label>Base URL</label>
|
||||
<input
|
||||
className="input"
|
||||
type="url"
|
||||
placeholder="http://127.0.0.1:11434 — leave blank for local subprocess"
|
||||
value={cfg.base_url || ''}
|
||||
disabled={!isAdmin}
|
||||
onChange={(e) => setCfg({ ...cfg, base_url: e.target.value || null })}
|
||||
/>
|
||||
<span className="field-hint">
|
||||
Blank = use local <span className="mono">ollama run</span> subprocess.
|
||||
Set to the daemon URL to target a remote host.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="config-field">
|
||||
<span className="config-label">MODEL</span>
|
||||
{isAdmin ? (
|
||||
<div className="config-input-row">
|
||||
<input
|
||||
type="text"
|
||||
style={{ width: 200 }}
|
||||
placeholder="llama3.1"
|
||||
value={cfg.model}
|
||||
onChange={(e) => setCfg({ ...cfg, model: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span className="config-value">{cfg.model}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="form-grid">
|
||||
<div className="tweak-group">
|
||||
<label>Timeout (seconds)</label>
|
||||
<input
|
||||
className="input"
|
||||
type="number"
|
||||
min={1}
|
||||
step={1}
|
||||
value={cfg.timeout}
|
||||
disabled={!isAdmin}
|
||||
onChange={(e) => {
|
||||
const v = parseFloat(e.target.value);
|
||||
if (v > 0) setCfg({ ...cfg, timeout: v });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="config-field">
|
||||
<span className="config-label">TIMEOUT (seconds)</span>
|
||||
{isAdmin ? (
|
||||
<div className="config-input-row">
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
step={1}
|
||||
style={{ width: 120 }}
|
||||
value={cfg.timeout}
|
||||
onChange={(e) => {
|
||||
const v = parseFloat(e.target.value);
|
||||
if (v > 0) setCfg({ ...cfg, timeout: v });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span className="config-value">{cfg.timeout}s</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div className="config-field">
|
||||
<span className="config-label">API KEY (write-only)</span>
|
||||
<div className="tweak-group">
|
||||
<label>API Key (write-only)</label>
|
||||
{cfg.api_key_set && !clearApiKey ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{ fontSize: '0.75rem', display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<CheckCircle size={12} /> Key stored
|
||||
</span>
|
||||
<button
|
||||
className="action-btn"
|
||||
onClick={() => { setClearApiKey(true); setApiKeyInput(''); }}
|
||||
>
|
||||
CLEAR
|
||||
</button>
|
||||
</div>
|
||||
<>
|
||||
<div className="key-badge">
|
||||
<CheckCircle size={11} /> KEY SET — enter a new value to rotate
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<div className="actions">
|
||||
<button
|
||||
className="btn ghost"
|
||||
style={{ padding: '3px 10px', fontSize: '0.65rem' }}
|
||||
onClick={() => { setClearApiKey(true); setApiKeyInput(''); }}
|
||||
>
|
||||
CLEAR
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="config-input-row">
|
||||
<>
|
||||
<input
|
||||
className="input"
|
||||
type="password"
|
||||
style={{ width: 280 }}
|
||||
placeholder={clearApiKey
|
||||
? '(will be cleared on save)'
|
||||
: 'Enter key to set — blank keeps existing'}
|
||||
value={apiKeyInput}
|
||||
disabled={clearApiKey}
|
||||
disabled={!isAdmin || clearApiKey}
|
||||
onChange={(e) => setApiKeyInput(e.target.value)}
|
||||
/>
|
||||
{clearApiKey && (
|
||||
<button className="action-btn" onClick={() => setClearApiKey(false)}>
|
||||
CANCEL
|
||||
</button>
|
||||
{clearApiKey && isAdmin && (
|
||||
<div className="actions">
|
||||
<button
|
||||
className="btn ghost"
|
||||
style={{ padding: '3px 10px', fontSize: '0.65rem' }}
|
||||
onClick={() => setClearApiKey(false)}
|
||||
>
|
||||
CANCEL CLEAR
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div className="config-field" style={{ marginBottom: 0 }}>
|
||||
<div className="config-input-row">
|
||||
<button
|
||||
className="save-btn"
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
<Save size={14} />
|
||||
{saving ? 'SAVING...' : 'SAVE'}
|
||||
</button>
|
||||
</div>
|
||||
{msg && (
|
||||
<span className={msg.type === 'success' ? 'config-success' : 'config-error'}>
|
||||
{msg.text}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isAdmin && (
|
||||
<div className="config-field" style={{ marginBottom: 0 }}>
|
||||
<span className="config-label">API KEY</span>
|
||||
<span className="config-value">{cfg.api_key_set ? '••••••••' : '(not set)'}</span>
|
||||
<div className="actions">
|
||||
<button
|
||||
className="btn violet"
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
<Save size={12} /> {saving ? 'SAVING…' : 'SAVE'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user