gobha
b7746c3004
Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
96 lines
4.3 KiB
JavaScript
96 lines
4.3 KiB
JavaScript
/**
|
|
* Admin > AI > Models
|
|
*/
|
|
const { html } = window;
|
|
const { useState, useEffect, useCallback } = hooks;
|
|
|
|
export default function ModelsSection() {
|
|
const [models, setModels] = useState([]);
|
|
const [search, setSearch] = useState('');
|
|
const [loading, setLoading] = useState(true);
|
|
const [fetching, setFetching] = useState(false);
|
|
|
|
const load = useCallback(async () => {
|
|
try {
|
|
const data = await sw.api.admin.models.list();
|
|
setModels(data || []);
|
|
} catch (e) { sw.toast(e.message, 'error'); }
|
|
finally { setLoading(false); }
|
|
}, []);
|
|
|
|
useEffect(() => { load(); }, []);
|
|
|
|
async function fetchModels() {
|
|
setFetching(true);
|
|
try {
|
|
const result = await sw.api.admin.models.fetch();
|
|
sw.toast(`Synced: ${result.added || 0} added, ${result.updated || 0} updated, ${result.total || 0} total`, 'success');
|
|
load();
|
|
} catch (e) { sw.toast(e.message, 'error'); }
|
|
finally { setFetching(false); }
|
|
}
|
|
|
|
async function setVisibility(id, visibility) {
|
|
try {
|
|
await sw.api.admin.models.update(id, { visibility });
|
|
setModels(prev => prev.map(m => m.id === id ? { ...m, visibility } : m));
|
|
} catch (e) { sw.toast(e.message, 'error'); }
|
|
}
|
|
|
|
async function bulkSetVisibility(visibility) {
|
|
try {
|
|
await sw.api.admin.models.bulkUpdate(visibility);
|
|
sw.toast(`All models set to ${visibility}`, 'success');
|
|
load();
|
|
} catch (e) { sw.toast(e.message, 'error'); }
|
|
}
|
|
|
|
const filtered = models.filter(m => {
|
|
if (!search) return true;
|
|
const q = search.toLowerCase();
|
|
return (m.model_id || m.id || '').toLowerCase().includes(q) ||
|
|
(m.display_name || '').toLowerCase().includes(q) ||
|
|
(m.provider_name || '').toLowerCase().includes(q);
|
|
});
|
|
|
|
if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
|
|
|
|
return html`
|
|
<div>
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
|
|
<button class="btn-small btn-primary" onClick=${fetchModels} disabled=${fetching}>
|
|
${fetching ? 'Fetching\u2026' : 'Fetch Models'}
|
|
</button>
|
|
<span class="text-muted" style="font-size:12px;">${models.length} models</span>
|
|
<div style="flex:1"></div>
|
|
<button class="btn-small" onClick=${() => bulkSetVisibility('enabled')}>Enable All</button>
|
|
<button class="btn-small" onClick=${() => bulkSetVisibility('disabled')}>Disable All</button>
|
|
</div>
|
|
|
|
<div class="admin-search" style="margin-bottom:12px;">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--text-3);flex-shrink:0;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
<input placeholder="Search models\u2026" value=${search} onInput=${e => setSearch(e.target.value)} autocomplete="off" />
|
|
</div>
|
|
|
|
<div class="admin-list">
|
|
${filtered.length === 0 && html`<div class="empty-hint">No models found</div>`}
|
|
${filtered.map(m => html`
|
|
<div class="admin-surface-row" key=${m.id}>
|
|
<div style="flex:1;min-width:0;">
|
|
<strong>${m.display_name || m.model_id || m.id}</strong>
|
|
${m.display_name && m.model_id && html`<span class="text-muted" style="margin-left:8px;font-size:11px;">${m.model_id}</span>`}
|
|
${m.provider_name && html`<span class="badge" style="margin-left:6px;">${m.provider_name}</span>`}
|
|
</div>
|
|
<select value=${m.visibility || 'disabled'} onChange=${e => setVisibility(m.id, e.target.value)}
|
|
style="font-size:11px;padding:2px 4px;">
|
|
<option value="enabled">enabled</option>
|
|
<option value="disabled">disabled</option>
|
|
<option value="team">team only</option>
|
|
</select>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|