refactor(ui): move LLM provider config into Config tab, remove standalone route
This commit is contained in:
99
decnet_web/src/components/Config/tabs/LLMTab.test.tsx
Normal file
99
decnet_web/src/components/Config/tabs/LLMTab.test.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { LLMTab } from './LLMTab';
|
||||
import { renderWithRouter } from '../../../test/renderWithRouter';
|
||||
|
||||
vi.mock('../../../utils/api', () => ({
|
||||
default: { get: vi.fn(), put: vi.fn() },
|
||||
}));
|
||||
|
||||
import api from '../../../utils/api';
|
||||
const apiGet = api.get as ReturnType<typeof vi.fn>;
|
||||
const apiPut = api.put as ReturnType<typeof vi.fn>;
|
||||
|
||||
const defaultPayload = {
|
||||
provider: 'ollama',
|
||||
base_url: null,
|
||||
model: 'llama3.1',
|
||||
timeout: 60,
|
||||
api_key_set: false,
|
||||
};
|
||||
|
||||
const render = (isAdmin = true) =>
|
||||
renderWithRouter(<LLMTab isAdmin={isAdmin} />);
|
||||
|
||||
describe('LLMTab', () => {
|
||||
beforeEach(() => {
|
||||
apiGet.mockReset();
|
||||
apiPut.mockReset();
|
||||
});
|
||||
|
||||
it('renders current model after load', async () => {
|
||||
apiGet.mockResolvedValueOnce({ data: defaultPayload });
|
||||
render();
|
||||
await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
|
||||
expect(screen.getByDisplayValue('llama3.1')).toBeDefined();
|
||||
});
|
||||
|
||||
it('shows key-stored indicator when api_key_set is true', async () => {
|
||||
apiGet.mockResolvedValueOnce({ data: { ...defaultPayload, api_key_set: true } });
|
||||
render();
|
||||
await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
|
||||
expect(screen.getByText(/Key stored/)).toBeDefined();
|
||||
});
|
||||
|
||||
it('calls PUT on save and shows success', async () => {
|
||||
apiGet.mockResolvedValueOnce({ data: defaultPayload });
|
||||
apiPut.mockResolvedValueOnce({ data: { ...defaultPayload, model: 'phi3' } });
|
||||
|
||||
const user = userEvent.setup();
|
||||
render();
|
||||
await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
|
||||
|
||||
const modelInput = screen.getByDisplayValue('llama3.1');
|
||||
await user.clear(modelInput);
|
||||
await user.type(modelInput, 'phi3');
|
||||
await user.click(screen.getByRole('button', { name: /SAVE/ }));
|
||||
|
||||
await waitFor(() => expect(screen.getByText('LLM CONFIG SAVED')).toBeDefined());
|
||||
const [url, body] = apiPut.mock.calls[0];
|
||||
expect(url).toBe('/realism/llm');
|
||||
expect(body.model).toBe('phi3');
|
||||
});
|
||||
|
||||
it('shows error on 403', async () => {
|
||||
apiGet.mockResolvedValueOnce({ data: defaultPayload });
|
||||
apiPut.mockRejectedValueOnce({ response: { status: 403 } });
|
||||
|
||||
const user = userEvent.setup();
|
||||
render();
|
||||
await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
|
||||
await user.click(screen.getByRole('button', { name: /SAVE/ }));
|
||||
|
||||
await waitFor(() => expect(screen.getByText(/ADMIN ROLE REQUIRED/)).toBeDefined());
|
||||
});
|
||||
|
||||
it('hides save button for viewers', async () => {
|
||||
apiGet.mockResolvedValueOnce({ data: defaultPayload });
|
||||
render(false);
|
||||
await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
|
||||
expect(screen.queryByRole('button', { name: /SAVE/ })).toBeNull();
|
||||
});
|
||||
|
||||
it('sends empty api_key to clear when CLEAR button used', async () => {
|
||||
apiGet.mockResolvedValueOnce({ data: { ...defaultPayload, api_key_set: true } });
|
||||
apiPut.mockResolvedValueOnce({ data: { ...defaultPayload, api_key_set: false } });
|
||||
|
||||
const user = userEvent.setup();
|
||||
render();
|
||||
await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /CLEAR/ }));
|
||||
await user.click(screen.getByRole('button', { name: /SAVE/ }));
|
||||
|
||||
await waitFor(() => expect(apiPut).toHaveBeenCalledOnce());
|
||||
const [, body] = apiPut.mock.calls[0];
|
||||
expect(body.api_key).toBe('');
|
||||
});
|
||||
});
|
||||
226
decnet_web/src/components/Config/tabs/LLMTab.tsx
Normal file
226
decnet_web/src/components/Config/tabs/LLMTab.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Save, CheckCircle } from '../../../icons';
|
||||
import api from '../../../utils/api';
|
||||
|
||||
interface LLMPayload {
|
||||
provider: string;
|
||||
base_url: string | null;
|
||||
model: string;
|
||||
timeout: number;
|
||||
api_key_set: boolean;
|
||||
}
|
||||
|
||||
interface PutBody {
|
||||
provider?: string;
|
||||
base_url?: string | null;
|
||||
model?: string;
|
||||
timeout?: number;
|
||||
api_key?: string;
|
||||
}
|
||||
|
||||
const DEFAULTS: LLMPayload = {
|
||||
provider: 'ollama',
|
||||
base_url: null,
|
||||
model: 'llama3.1',
|
||||
timeout: 60,
|
||||
api_key_set: false,
|
||||
};
|
||||
|
||||
const _SENTINEL = Symbol();
|
||||
|
||||
interface Props {
|
||||
isAdmin: boolean;
|
||||
}
|
||||
|
||||
export const LLMTab: React.FC<Props> = ({ isAdmin }) => {
|
||||
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 [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' }))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setMsg(null);
|
||||
const body: PutBody = {
|
||||
provider: cfg.provider,
|
||||
base_url: cfg.base_url || null,
|
||||
model: cfg.model,
|
||||
timeout: cfg.timeout,
|
||||
};
|
||||
if (clearApiKey) body.api_key = '';
|
||||
else if (apiKeyInput.trim()) body.api_key = apiKeyInput.trim();
|
||||
|
||||
try {
|
||||
const r = await api.put<LLMPayload>('/realism/llm', body);
|
||||
setCfg(r.data);
|
||||
setApiKeyInput('');
|
||||
setClearApiKey(false);
|
||||
setMsg({ type: 'success', text: 'LLM CONFIG SAVED' });
|
||||
} 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' });
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="config-panel"><span className="config-label">LOADING…</span></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="config-panel">
|
||||
<div className="config-field">
|
||||
<span className="config-label">PROVIDER</span>
|
||||
{isAdmin ? (
|
||||
<select
|
||||
className="role-select"
|
||||
style={{ width: 200 }}
|
||||
value={cfg.provider}
|
||||
onChange={(e) => setCfg({ ...cfg, provider: e.target.value })}
|
||||
>
|
||||
<option value="ollama">Ollama</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="config-value">{cfg.provider}</span>
|
||||
)}
|
||||
</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>
|
||||
|
||||
<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="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>
|
||||
{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="config-input-row">
|
||||
<input
|
||||
type="password"
|
||||
style={{ width: 280 }}
|
||||
placeholder={clearApiKey
|
||||
? '(will be cleared on save)'
|
||||
: 'Enter key to set — blank keeps existing'}
|
||||
value={apiKeyInput}
|
||||
disabled={clearApiKey}
|
||||
onChange={(e) => setApiKeyInput(e.target.value)}
|
||||
/>
|
||||
{clearApiKey && (
|
||||
<button className="action-btn" onClick={() => setClearApiKey(false)}>
|
||||
CANCEL
|
||||
</button>
|
||||
)}
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -24,4 +24,5 @@ export type ConfigTab =
|
||||
| 'globals'
|
||||
| 'appearance'
|
||||
| 'workers'
|
||||
| 'ttp';
|
||||
| 'ttp'
|
||||
| 'llm';
|
||||
|
||||
Reference in New Issue
Block a user