360 lines
12 KiB
JavaScript
360 lines
12 KiB
JavaScript
import React, { useState, useEffect, useCallback } from 'react';
|
||
import { useSettings } from '../hooks/useSettings';
|
||
import { getServiceHealth } from '../api/orchestration';
|
||
import { useModels } from '../hooks/useModels';
|
||
|
||
export default function SettingsView({ onNavigate }) {
|
||
const { settings, saveSetting, saving } = useSettings();
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', background: 'var(--bg-base)' }}>
|
||
<div className="panel-header" style={{ padding: '0 24px' }}>
|
||
<span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Settings</span>
|
||
</div>
|
||
|
||
<div className="flex-1 scroll-y" style={{ padding: '24px' }}>
|
||
|
||
<SettingsSection title="Memory">
|
||
<SettingsRow
|
||
label="Memory Viewer"
|
||
description="Browse, search, and delete stored episodes"
|
||
action={<button className="btn-primary" style={{ padding: '6px 14px', fontSize: '13px' }}
|
||
onClick={() => onNavigate('memory')}>Open →</button>}
|
||
/>
|
||
<NumberSetting
|
||
label="Recent Episode Limit"
|
||
description="Recent episodes injected into each prompt"
|
||
value={settings?.recentEpisodeLimit}
|
||
min={1} max={20}
|
||
onSave={val => saveSetting('recentEpisodeLimit', val)}
|
||
saving={saving}
|
||
/>
|
||
<NumberSetting
|
||
label="Semantic Search Limit"
|
||
description="Max episodes retrieved via vector search per query"
|
||
value={settings?.semanticLimit}
|
||
min={1} max={20}
|
||
onSave={val => saveSetting('semanticLimit', val)}
|
||
saving={saving}
|
||
/>
|
||
<NumberSetting
|
||
label="Score Threshold"
|
||
description="Minimum similarity score for semantic results (0–1)"
|
||
value={settings?.scoreThreshold}
|
||
min={0} max={1} step={0.05}
|
||
onSave={val => saveSetting('scoreThreshold', val)}
|
||
saving={saving}
|
||
/>
|
||
</SettingsSection>
|
||
|
||
<SettingsSection title="Models">
|
||
<ModelsSection />
|
||
</SettingsSection>
|
||
|
||
<SettingsSection title="About">
|
||
<SettingsRow
|
||
label="Service Health"
|
||
description="Ping all four services"
|
||
action={<ServiceHealth />}
|
||
/>
|
||
<SettingsRow
|
||
label="Version"
|
||
description="NexusAI"
|
||
action={<span className="text-sm text-muted">v0.1.0</span>}
|
||
/>
|
||
</SettingsSection>
|
||
|
||
<SettingsSection title="Appearance">
|
||
<SettingsRow label="Theme" description="UI colour scheme" action={<ComingSoon />} />
|
||
</SettingsSection>
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SettingsSection({ title, children }) {
|
||
return (
|
||
<div style={{ marginBottom: '32px' }}>
|
||
<p className="label-upper" style={{ marginBottom: '12px', color: 'var(--text-secondary)' }}>
|
||
{title}
|
||
</p>
|
||
<div style={{
|
||
background: 'var(--bg-surface)',
|
||
border: '1px solid var(--border)',
|
||
borderRadius: 'var(--radius-lg)',
|
||
overflow: 'hidden',
|
||
}}>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function NumberSetting({ label, description, value, min, max, step = 1, onSave, saving }) {
|
||
const [local, setLocal] = useState(value ?? '');
|
||
const isDirty = local !== '' && Number(local) !== value;
|
||
|
||
// Sync when settings load from API
|
||
useEffect(() => {
|
||
if (value !== undefined) setLocal(value);
|
||
}, [value]);
|
||
|
||
return (
|
||
<SettingsRow
|
||
label={label}
|
||
description={description}
|
||
action={
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||
<input
|
||
type="number"
|
||
value={local}
|
||
min={min} max={max} step={step}
|
||
onChange={e => setLocal(e.target.value)}
|
||
style={{
|
||
width: '64px', padding: '5px 8px', textAlign: 'center',
|
||
background: 'var(--bg-elevated)', border: '1px solid var(--border)',
|
||
borderRadius: 'var(--radius-md)', color: 'var(--text-primary)',
|
||
fontSize: '13px', outline: 'none',
|
||
}}
|
||
/>
|
||
{isDirty && (
|
||
<button
|
||
className="btn-primary"
|
||
style={{ padding: '5px 10px', fontSize: '12px' }}
|
||
disabled={saving}
|
||
onClick={() => onSave(Number(local))}
|
||
>
|
||
Save
|
||
</button>
|
||
)}
|
||
</div>
|
||
}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function SettingsRow({ label, description, action }) {
|
||
return (
|
||
<div style={{
|
||
display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
|
||
padding: '14px 16px',
|
||
borderBottom: '1px solid var(--border)',
|
||
}}
|
||
// Remove bottom border on last child via CSS would need a class;
|
||
// easiest to just let it render — the section border-radius clips it cleanly
|
||
>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||
<span className="text-sm" style={{ color: 'var(--text-primary)', fontWeight: 500 }}>{label}</span>
|
||
{description && <span className="text-xs text-muted">{description}</span>}
|
||
</div>
|
||
<div style={{ flexShrink: 0, marginLeft: 16 }}>
|
||
{action}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ComingSoon() {
|
||
return <span className="text-xs text-muted" style={{ fontStyle: 'italic' }}>Coming soon</span>;
|
||
}
|
||
|
||
function ServiceHealth() {
|
||
const [services, setServices] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [lastChecked, setLastChecked] = useState(null);
|
||
|
||
const check = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
setServices(await getServiceHealth());
|
||
setLastChecked(new Date());
|
||
} catch (err) {
|
||
console.error('[ServiceHealth]', err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<button
|
||
className="btn-primary"
|
||
style={{ padding: '5px 12px', fontSize: '12px' }}
|
||
disabled={loading}
|
||
onClick={check}
|
||
>
|
||
{loading ? 'Checking…' : 'Check Now'}
|
||
</button>
|
||
{lastChecked && (
|
||
<span className="text-xs text-muted">
|
||
{lastChecked.toLocaleTimeString()}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{services && (
|
||
<div style={{
|
||
display: 'flex', flexDirection: 'column',
|
||
border: '1px solid var(--border)',
|
||
borderRadius: 'var(--radius-md)',
|
||
overflow: 'hidden', marginTop: 4,
|
||
}}>
|
||
{services.map((svc, i) => (
|
||
<div key={svc.key} style={{
|
||
display: 'flex', alignItems: 'center', gap: 10,
|
||
padding: '8px 12px',
|
||
borderBottom: i < services.length - 1 ? '1px solid var(--border)' : 'none',
|
||
background: 'var(--bg-elevated)',
|
||
}}>
|
||
{/* Status dot */}
|
||
<div style={{
|
||
width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
|
||
background: svc.status === 'healthy' ? '#2ecc71' : '#e74c3c',
|
||
}} />
|
||
|
||
{/* Label */}
|
||
<span className="text-sm" style={{ minWidth: 90, color: 'var(--text-primary)' }}>
|
||
{svc.label}
|
||
</span>
|
||
|
||
{/* Detail — show model for inference, nothing extra for others */}
|
||
<span className="text-xs text-muted" style={{ flex: 1 }}>
|
||
{svc.key === 'inference' && svc.detail?.model
|
||
? svc.detail.model
|
||
: svc.status === 'unreachable' ? 'Unreachable' : ''}
|
||
</span>
|
||
|
||
{/* Latency */}
|
||
<span className="text-xs text-muted" style={{ flexShrink: 0 }}>
|
||
{svc.latency}ms
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ModelsSection({ onNavigate }) {
|
||
const { models, selectedModel, setSelectedModel } = useModels();
|
||
const [selectedInfo, setSelectedInfo] = useState(null);
|
||
|
||
// Sync info panel when selection changes
|
||
useEffect(() => {
|
||
const m = models.find(m => m.value === selectedModel);
|
||
setSelectedInfo(m ?? null);
|
||
}, [selectedModel, models]);
|
||
|
||
return (
|
||
<>
|
||
<SettingsRow
|
||
label="Models Folder"
|
||
description="Path to folder containing .gguf files"
|
||
action={<ModelsFolderSetting />}
|
||
/>
|
||
<SettingsRow
|
||
label="Active Model"
|
||
description="Model used for inference"
|
||
action={
|
||
<select
|
||
value={selectedModel}
|
||
onChange={e => setSelectedModel(e.target.value)}
|
||
style={{
|
||
padding: '6px 10px', fontSize: '13px',
|
||
background: 'var(--bg-elevated)', border: '1px solid var(--border)',
|
||
borderRadius: 'var(--radius-md)', color: 'var(--text-primary)',
|
||
cursor: 'pointer', outline: 'none', maxWidth: '220px',
|
||
}}
|
||
>
|
||
{models.map(m => (
|
||
<option key={m.value} value={m.value}>{m.label}</option>
|
||
))}
|
||
</select>
|
||
}
|
||
/>
|
||
|
||
{/* Model info panel */}
|
||
{selectedInfo && (
|
||
<div style={{
|
||
margin: '0', padding: '14px 16px',
|
||
borderTop: '1px solid var(--border)',
|
||
background: 'var(--bg-elevated)',
|
||
display: 'flex', flexDirection: 'column', gap: 8,
|
||
}}>
|
||
<p className="label-upper" style={{ color: 'var(--text-muted)' }}>Model Info</p>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||
<InfoLine label="File" value={selectedInfo.value} mono />
|
||
<InfoLine label="Size" value={selectedInfo.size ?? '—'} />
|
||
{selectedInfo.description && (
|
||
<InfoLine label="Description" value={selectedInfo.description} />
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-muted" style={{ marginTop: 4, fontStyle: 'italic' }}>
|
||
Model loading and parameter configuration coming soon
|
||
</p>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function InfoLine({ label, value, mono }) {
|
||
return (
|
||
<div style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
|
||
<span className="text-xs text-muted" style={{ minWidth: 72, flexShrink: 0 }}>{label}</span>
|
||
<span style={{
|
||
fontSize: 12, color: 'var(--text-secondary)',
|
||
fontFamily: mono ? 'monospace' : 'inherit',
|
||
wordBreak: 'break-all',
|
||
}}>{value}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ModelsFolderSetting() {
|
||
const { settings, saveSetting, saving } = useSettings();
|
||
const [local, setLocal] = useState('');
|
||
const [error, setError] = useState(null);
|
||
|
||
useEffect(() => {
|
||
if (settings?.modelsFolderPath) setLocal(settings.modelsFolderPath);
|
||
}, [settings?.modelsFolderPath]);
|
||
|
||
const isDirty = local !== '' && local !== settings?.modelsFolderPath;
|
||
|
||
async function handleSave() {
|
||
setError(null);
|
||
try {
|
||
await saveSetting('modelsFolderPath', local);
|
||
} catch (err) {
|
||
setError('Path not accessible');
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
|
||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||
<input
|
||
value={local}
|
||
onChange={e => { setLocal(e.target.value); setError(null); }}
|
||
style={{
|
||
width: '220px', padding: '5px 8px', fontSize: '12px',
|
||
fontFamily: 'monospace',
|
||
background: 'var(--bg-elevated)', border: `1px solid ${error ? '#e74c3c' : 'var(--border)'}`,
|
||
borderRadius: 'var(--radius-md)', color: 'var(--text-primary)', outline: 'none',
|
||
}}
|
||
/>
|
||
{isDirty && (
|
||
<button className="btn-primary" style={{ padding: '5px 10px', fontSize: '12px' }}
|
||
disabled={saving} onClick={handleSave}>
|
||
Save
|
||
</button>
|
||
)}
|
||
</div>
|
||
{error && <span className="text-xs" style={{ color: '#e74c3c' }}>{error}</span>}
|
||
</div>
|
||
);
|
||
} |