445 lines
21 KiB
TypeScript
445 lines
21 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { useRouter } from 'next/navigation';
|
|
import { BB_PEN_NAMES, AV_PEN_NAMES } from '@/lib/auth/permissions';
|
|
|
|
interface Settings {
|
|
ollama_endpoint: string;
|
|
ollama_model_default: string;
|
|
ollama_model_translation: string;
|
|
ollama_model_background: string;
|
|
auto_failover: boolean;
|
|
failover_timeout_seconds: number;
|
|
default_site_id: number;
|
|
default_pen_name_bb: string;
|
|
default_pen_name_av: string;
|
|
save_session_history: boolean;
|
|
history_retention_days: number;
|
|
streaming_enabled: boolean;
|
|
background_use_local: boolean;
|
|
background_timeout_seconds: number;
|
|
priority_queue_enabled: boolean;
|
|
}
|
|
|
|
interface ConnectionTest {
|
|
online: boolean;
|
|
latencyMs: number;
|
|
models: string[];
|
|
}
|
|
|
|
export default function AIConsoleSettingsPage() {
|
|
const { user, loading } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const [settings, setSettings] = useState<Settings>({
|
|
ollama_endpoint: '',
|
|
ollama_model_default: '',
|
|
ollama_model_translation: '',
|
|
ollama_model_background: '',
|
|
auto_failover: true,
|
|
failover_timeout_seconds: 8,
|
|
default_site_id: 1,
|
|
default_pen_name_bb: 'Michael Strand',
|
|
default_pen_name_av: 'Rex Chandler',
|
|
save_session_history: true,
|
|
history_retention_days: 30,
|
|
streaming_enabled: true,
|
|
background_use_local: true,
|
|
background_timeout_seconds: 120,
|
|
priority_queue_enabled: true,
|
|
});
|
|
|
|
const [loadingSettings, setLoadingSettings] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [testing, setTesting] = useState(false);
|
|
const [connectionResult, setConnectionResult] = useState<ConnectionTest | null>(null);
|
|
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
|
|
|
|
const showToast = (message: string, type: 'success' | 'error' = 'success') => {
|
|
setToast({ message, type });
|
|
setTimeout(() => setToast(null), 4000);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!loading && !user) router.push('/login');
|
|
}, [user, loading, router]);
|
|
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
fetch('/api/ai/console-settings')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.settings) setSettings(data.settings);
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => setLoadingSettings(false));
|
|
}, [user]);
|
|
|
|
const handleTestConnection = async () => {
|
|
setTesting(true);
|
|
setConnectionResult(null);
|
|
try {
|
|
const res = await fetch('/api/ai/console-settings?action=test_connection');
|
|
const data = await res.json();
|
|
setConnectionResult(data);
|
|
} catch {
|
|
setConnectionResult({ online: false, latencyMs: 0, models: [] });
|
|
} finally {
|
|
setTesting(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const res = await fetch('/api/ai/console-settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ action: 'save_settings', ...settings }),
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) showToast('Settings saved');
|
|
else showToast(data.error || 'Failed to save', 'error');
|
|
} catch {
|
|
showToast('Failed to save', 'error');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const update = (key: keyof Settings, value: any) => {
|
|
setSettings(prev => ({ ...prev, [key]: value }));
|
|
};
|
|
|
|
if (loading || loadingSettings) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0d1117] flex items-center justify-center">
|
|
<div className="w-6 h-6 border-2 border-[#3b82f6]/30 border-t-[#3b82f6] rounded-full animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0d1117]">
|
|
{/* Header */}
|
|
<div className="bg-[#111827] border-b border-[#1e2a3a] px-6 py-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Link href="/dashboard/ai-console" className="text-[#555] hover:text-[#3b82f6] text-sm transition-colors">← AI Console</Link>
|
|
<span className="text-[#333]">/</span>
|
|
<h1 className="text-white font-bold text-sm">AI Console Settings</h1>
|
|
</div>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white text-sm px-4 py-2 rounded-lg transition-colors font-medium"
|
|
>
|
|
{saving ? 'Saving...' : 'Save Settings'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="max-w-3xl mx-auto px-6 py-8 space-y-8">
|
|
{/* Local AI Server */}
|
|
<section className="bg-[#111827] border border-[#1e2a3a] rounded-xl p-6">
|
|
<h2 className="text-white font-bold text-base mb-1">Local AI Server (Ollama)</h2>
|
|
<p className="text-[#555] text-xs mb-5">
|
|
Connect to your local Ollama instance running on your Windows PC with 24GB GPU.
|
|
</p>
|
|
|
|
{/* Windows sleep warning */}
|
|
<div className="bg-yellow-900/20 border border-yellow-700/40 rounded-lg p-4 mb-5">
|
|
<div className="flex gap-3">
|
|
<span className="text-yellow-400 text-lg flex-shrink-0">⚠</span>
|
|
<div>
|
|
<p className="text-yellow-300 text-sm font-semibold mb-1">Windows Sleep / Hibernate Warning</p>
|
|
<p className="text-yellow-200/70 text-xs leading-relaxed">
|
|
Your Windows server may sleep or hibernate when inactive, causing the local AI to go offline.
|
|
To prevent this:
|
|
</p>
|
|
<ul className="text-yellow-200/70 text-xs mt-2 space-y-1 ml-3">
|
|
<li>• <strong className="text-yellow-200">Option 1:</strong> Windows Settings → System → Power & Sleep → Sleep → set to <strong className="text-yellow-200">Never</strong></li>
|
|
<li>• <strong className="text-yellow-200">Option 2:</strong> Download the free <strong className="text-yellow-200">Caffeine</strong> app for Windows — keeps your PC awake automatically</li>
|
|
</ul>
|
|
<p className="text-yellow-200/50 text-[10px] mt-2">
|
|
The Health Dashboard will alert you if the local server has been offline for more than 30 minutes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">Endpoint URL</label>
|
|
<input
|
|
type="text"
|
|
value={settings.ollama_endpoint}
|
|
onChange={e => update('ollama_endpoint', e.target.value)}
|
|
placeholder="http://192.168.1.x:11434 or https://your-tunnel.ngrok.io"
|
|
className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6] placeholder-[#333]"
|
|
/>
|
|
<p className="text-[#444] text-[10px] mt-1">
|
|
Use direct IP if on the same network, or a tunnel URL (ngrok, Cloudflare Tunnel, Tailscale) for remote access.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={handleTestConnection}
|
|
disabled={testing || !settings.ollama_endpoint}
|
|
className="bg-[#1e2a3a] hover:bg-[#253347] disabled:opacity-40 text-white text-sm px-4 py-2 rounded-lg transition-colors"
|
|
>
|
|
{testing ? 'Testing...' : 'Test Connection'}
|
|
</button>
|
|
{connectionResult && (
|
|
<div className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm ${
|
|
connectionResult.online
|
|
? 'bg-green-900/30 border border-green-700/40 text-green-400' :'bg-red-900/30 border border-red-700/40 text-red-400'
|
|
}`}>
|
|
<div className={`w-2 h-2 rounded-full ${connectionResult.online ? 'bg-green-500' : 'bg-red-500'}`} />
|
|
{connectionResult.online
|
|
? `Connected — ${connectionResult.latencyMs}ms — ${connectionResult.models.length} model(s)`
|
|
: 'Unreachable'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{connectionResult?.models && connectionResult.models.length > 0 && (
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Model (Stories)</label>
|
|
<select
|
|
value={settings.ollama_model_default}
|
|
onChange={e => update('ollama_model_default', e.target.value)}
|
|
className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
|
|
>
|
|
<option value="">Auto (largest available)</option>
|
|
{connectionResult.models.map(m => <option key={m} value={m}>{m}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Model (Translation)</label>
|
|
<select
|
|
value={settings.ollama_model_translation}
|
|
onChange={e => update('ollama_model_translation', e.target.value)}
|
|
className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
|
|
>
|
|
<option value="">Same as default</option>
|
|
{connectionResult.models.map(m => <option key={m} value={m}>{m}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Model (Background Tasks)</label>
|
|
<select
|
|
value={settings.ollama_model_background}
|
|
onChange={e => update('ollama_model_background', e.target.value)}
|
|
className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
|
|
>
|
|
<option value="">Same as default</option>
|
|
{connectionResult.models.map(m => <option key={m} value={m}>{m}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-[#aaa] text-xs font-medium">Auto-failover to Cloud AI</p>
|
|
<p className="text-[#444] text-[10px]">Automatically use Anthropic when local is unavailable</p>
|
|
</div>
|
|
<button
|
|
onClick={() => update('auto_failover', !settings.auto_failover)}
|
|
className={`w-10 h-5 rounded-full transition-colors relative ${settings.auto_failover ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
|
|
>
|
|
<div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.auto_failover ? 'translate-x-5' : 'translate-x-0.5'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">Failover Timeout (seconds)</label>
|
|
<input
|
|
type="number"
|
|
value={settings.failover_timeout_seconds}
|
|
onChange={e => update('failover_timeout_seconds', Number(e.target.value))}
|
|
min={3} max={30}
|
|
className="w-32 bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:border-[#3b82f6]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Cloud AI */}
|
|
<section className="bg-[#111827] border border-[#1e2a3a] rounded-xl p-6">
|
|
<h2 className="text-white font-bold text-base mb-1">Cloud AI (Anthropic Failover)</h2>
|
|
<p className="text-[#555] text-xs mb-5">Used when local Ollama is unavailable.</p>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between py-2 border-b border-[#1e2a3a]">
|
|
<span className="text-[#aaa] text-sm">Model</span>
|
|
<span className="text-white text-sm font-mono">claude-sonnet-4-20250514</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2 border-b border-[#1e2a3a]">
|
|
<span className="text-[#aaa] text-sm">Fallback Model</span>
|
|
<span className="text-[#555] text-sm font-mono">claude-3-5-sonnet-20241022</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2">
|
|
<span className="text-[#aaa] text-sm">API Key Status</span>
|
|
<span className={`text-sm font-medium ${process.env.NEXT_PUBLIC_SITE_URL ? 'text-green-400' : 'text-red-400'}`}>
|
|
{/* Key status shown via ping */}
|
|
<span className="text-green-400">Configured</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Console Preferences */}
|
|
<section className="bg-[#111827] border border-[#1e2a3a] rounded-xl p-6">
|
|
<h2 className="text-white font-bold text-base mb-5">AI Console Preferences</h2>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Site</label>
|
|
<select
|
|
value={settings.default_site_id}
|
|
onChange={e => update('default_site_id', Number(e.target.value))}
|
|
className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
|
|
>
|
|
<option value={1}>Broadcast Beat</option>
|
|
<option value={2}>AV Beat</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Pen Name (Broadcast Beat)</label>
|
|
<select
|
|
value={settings.default_pen_name_bb}
|
|
onChange={e => update('default_pen_name_bb', e.target.value)}
|
|
className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
|
|
>
|
|
{BB_PEN_NAMES.map(n => <option key={n} value={n}>{n}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Pen Name (AV Beat)</label>
|
|
<select
|
|
value={settings.default_pen_name_av}
|
|
onChange={e => update('default_pen_name_av', e.target.value)}
|
|
className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
|
|
>
|
|
{AV_PEN_NAMES.map(n => <option key={n} value={n}>{n}</option>)}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-[#aaa] text-xs font-medium">Save Session History</p>
|
|
<p className="text-[#444] text-[10px]">Store last 20 sessions</p>
|
|
</div>
|
|
<button
|
|
onClick={() => update('save_session_history', !settings.save_session_history)}
|
|
className={`w-10 h-5 rounded-full transition-colors relative ${settings.save_session_history ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
|
|
>
|
|
<div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.save_session_history ? 'translate-x-5' : 'translate-x-0.5'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">History Retention</label>
|
|
<select
|
|
value={settings.history_retention_days}
|
|
onChange={e => update('history_retention_days', Number(e.target.value))}
|
|
className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
|
|
>
|
|
<option value={30}>30 days</option>
|
|
<option value={60}>60 days</option>
|
|
<option value={90}>90 days</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-[#aaa] text-xs font-medium">Streaming Responses</p>
|
|
<p className="text-[#444] text-[10px]">Text appears as it generates</p>
|
|
</div>
|
|
<button
|
|
onClick={() => update('streaming_enabled', !settings.streaming_enabled)}
|
|
className={`w-10 h-5 rounded-full transition-colors relative ${settings.streaming_enabled ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
|
|
>
|
|
<div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.streaming_enabled ? 'translate-x-5' : 'translate-x-0.5'}`} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Background Tasks */}
|
|
<section className="bg-[#111827] border border-[#1e2a3a] rounded-xl p-6">
|
|
<h2 className="text-white font-bold text-base mb-5">Background AI Tasks</h2>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-[#aaa] text-xs font-medium">Route Background Tasks to Local AI</p>
|
|
<p className="text-[#444] text-[10px]">Story generation, translation, classification</p>
|
|
</div>
|
|
<button
|
|
onClick={() => update('background_use_local', !settings.background_use_local)}
|
|
className={`w-10 h-5 rounded-full transition-colors relative ${settings.background_use_local ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
|
|
>
|
|
<div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.background_use_local ? 'translate-x-5' : 'translate-x-0.5'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[#aaa] text-xs font-medium mb-1.5">Background Task Timeout (seconds)</label>
|
|
<input
|
|
type="number"
|
|
value={settings.background_timeout_seconds}
|
|
onChange={e => update('background_timeout_seconds', Number(e.target.value))}
|
|
min={30} max={300}
|
|
className="w-32 bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:border-[#3b82f6]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-[#aaa] text-xs font-medium">Priority Queue</p>
|
|
<p className="text-[#444] text-[10px]">Interactive requests take priority over background tasks</p>
|
|
</div>
|
|
<button
|
|
onClick={() => update('priority_queue_enabled', !settings.priority_queue_enabled)}
|
|
className={`w-10 h-5 rounded-full transition-colors relative ${settings.priority_queue_enabled ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
|
|
>
|
|
<div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.priority_queue_enabled ? 'translate-x-5' : 'translate-x-0.5'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-[#0d1117] border border-[#1e2a3a] rounded-lg p-4">
|
|
<p className="text-[#555] text-xs font-semibold mb-2 uppercase tracking-wide">Priority Queue Order</p>
|
|
<ol className="space-y-1">
|
|
{[
|
|
'Interactive AI Console requests (admin typing)',
|
|
'Breaking news story generation',
|
|
'Show coverage auto-stories during show week',
|
|
'Standard background auto-stories',
|
|
'Translation backfill',
|
|
'Classification and extraction tasks',
|
|
].map((item, i) => (
|
|
<li key={i} className="flex items-center gap-2 text-xs text-[#555]">
|
|
<span className="w-4 h-4 rounded-full bg-[#1e2a3a] text-[#3b82f6] text-[10px] flex items-center justify-center font-bold flex-shrink-0">{i + 1}</span>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{toast && (
|
|
<div className={`fixed bottom-6 right-6 px-4 py-3 rounded-lg text-sm font-medium shadow-lg z-50 ${
|
|
toast.type === 'error' ? 'bg-red-900 text-red-200 border border-red-700' : 'bg-green-900 text-green-200 border border-green-700'
|
|
}`}>
|
|
{toast.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|