Initial commit
This commit is contained in:
Jack Levy
188
frontend/app/settings/page.tsx
Normal file
188
frontend/app/settings/page.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Settings, Cpu, RefreshCw, CheckCircle, XCircle, Play } from "lucide-react";
|
||||
import { settingsAPI, adminAPI } from "@/lib/api";
|
||||
|
||||
const LLM_PROVIDERS = [
|
||||
{ value: "openai", label: "OpenAI (GPT-4o)", hint: "Requires OPENAI_API_KEY in .env" },
|
||||
{ value: "anthropic", label: "Anthropic (Claude)", hint: "Requires ANTHROPIC_API_KEY in .env" },
|
||||
{ value: "gemini", label: "Google Gemini", hint: "Requires GEMINI_API_KEY in .env" },
|
||||
{ value: "ollama", label: "Ollama (Local)", hint: "Requires Ollama running on host" },
|
||||
];
|
||||
|
||||
export default function SettingsPage() {
|
||||
const qc = useQueryClient();
|
||||
const { data: settings, isLoading } = useQuery({
|
||||
queryKey: ["settings"],
|
||||
queryFn: () => settingsAPI.get(),
|
||||
});
|
||||
|
||||
const updateSetting = useMutation({
|
||||
mutationFn: ({ key, value }: { key: string; value: string }) => settingsAPI.update(key, value),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ["settings"] }),
|
||||
});
|
||||
|
||||
const [testResult, setTestResult] = useState<{ status: string; detail?: string; summary_preview?: string; provider?: string } | null>(null);
|
||||
const [testing, setTesting] = useState(false);
|
||||
const [taskIds, setTaskIds] = useState<Record<string, string>>({});
|
||||
|
||||
const testLLM = async () => {
|
||||
setTesting(true);
|
||||
setTestResult(null);
|
||||
try {
|
||||
const result = await settingsAPI.testLLM();
|
||||
setTestResult(result);
|
||||
} catch (e: unknown) {
|
||||
setTestResult({ status: "error", detail: e instanceof Error ? e.message : String(e) });
|
||||
} finally {
|
||||
setTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const trigger = async (name: string, fn: () => Promise<{ task_id: string }>) => {
|
||||
const result = await fn();
|
||||
setTaskIds((prev) => ({ ...prev, [name]: result.task_id }));
|
||||
};
|
||||
|
||||
if (isLoading) return <div className="text-center py-20 text-muted-foreground">Loading settings...</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-8 max-w-2xl">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||||
<Settings className="w-5 h-5" /> Settings
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-sm mt-1">Configure LLM provider and system settings</p>
|
||||
</div>
|
||||
|
||||
{/* LLM Provider */}
|
||||
<section className="bg-card border border-border rounded-lg p-6 space-y-4">
|
||||
<h2 className="font-semibold flex items-center gap-2">
|
||||
<Cpu className="w-4 h-4" /> LLM Provider
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Current: <strong>{settings?.llm_provider}</strong> / <strong>{settings?.llm_model}</strong>
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
{LLM_PROVIDERS.map(({ value, label, hint }) => (
|
||||
<label key={value} className="flex items-start gap-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="provider"
|
||||
value={value}
|
||||
checked={settings?.llm_provider === value}
|
||||
onChange={() => updateSetting.mutate({ key: "llm_provider", value })}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<div className="text-sm font-medium">{label}</div>
|
||||
<div className="text-xs text-muted-foreground">{hint}</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-2 border-t border-border">
|
||||
<button
|
||||
onClick={testLLM}
|
||||
disabled={testing}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
<Play className="w-3.5 h-3.5" />
|
||||
{testing ? "Testing..." : "Test Connection"}
|
||||
</button>
|
||||
{testResult && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{testResult.status === "ok" ? (
|
||||
<>
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-green-600 dark:text-green-400">
|
||||
{testResult.provider}/{testResult.summary_preview?.slice(0, 50)}...
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<XCircle className="w-4 h-4 text-red-500" />
|
||||
<span className="text-red-600 dark:text-red-400">{testResult.detail}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Polling Settings */}
|
||||
<section className="bg-card border border-border rounded-lg p-6 space-y-4">
|
||||
<h2 className="font-semibold flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4" /> Data Sources
|
||||
</h2>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium">Congress.gov Poll Interval</div>
|
||||
<div className="text-xs text-muted-foreground">How often to check for new bills</div>
|
||||
</div>
|
||||
<select
|
||||
value={settings?.congress_poll_interval_minutes}
|
||||
onChange={(e) => updateSetting.mutate({ key: "congress_poll_interval_minutes", value: e.target.value })}
|
||||
className="px-3 py-1.5 text-sm bg-background border border-border rounded-md"
|
||||
>
|
||||
<option value="15">Every 15 min</option>
|
||||
<option value="30">Every 30 min</option>
|
||||
<option value="60">Every hour</option>
|
||||
<option value="360">Every 6 hours</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-t border-border">
|
||||
<div>
|
||||
<div className="font-medium">NewsAPI.org</div>
|
||||
<div className="text-xs text-muted-foreground">100 requests/day free tier</div>
|
||||
</div>
|
||||
<span className={`text-xs font-medium ${settings?.newsapi_enabled ? "text-green-500" : "text-muted-foreground"}`}>
|
||||
{settings?.newsapi_enabled ? "Configured" : "Not configured"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-t border-border">
|
||||
<div>
|
||||
<div className="font-medium">Google Trends</div>
|
||||
<div className="text-xs text-muted-foreground">Zeitgeist scoring via pytrends</div>
|
||||
</div>
|
||||
<span className={`text-xs font-medium ${settings?.pytrends_enabled ? "text-green-500" : "text-muted-foreground"}`}>
|
||||
{settings?.pytrends_enabled ? "Enabled" : "Disabled"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Manual Controls */}
|
||||
<section className="bg-card border border-border rounded-lg p-6 space-y-4">
|
||||
<h2 className="font-semibold">Manual Controls</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
onClick={() => trigger("poll", adminAPI.triggerPoll)}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md transition-colors"
|
||||
>
|
||||
<RefreshCw className="w-3.5 h-3.5" /> Trigger Poll
|
||||
</button>
|
||||
<button
|
||||
onClick={() => trigger("members", adminAPI.triggerMemberSync)}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md transition-colors"
|
||||
>
|
||||
<RefreshCw className="w-3.5 h-3.5" /> Sync Members
|
||||
</button>
|
||||
<button
|
||||
onClick={() => trigger("trends", adminAPI.triggerTrendScores)}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md transition-colors"
|
||||
>
|
||||
<RefreshCw className="w-3.5 h-3.5" /> Calculate Trends
|
||||
</button>
|
||||
</div>
|
||||
{Object.entries(taskIds).map(([name, id]) => (
|
||||
<p key={name} className="text-xs text-muted-foreground">{name}: task {id} queued</p>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user