274 lines
10 KiB
TypeScript
274 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { ArrowLeft, Settings, Loader2, Save } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
interface SettingEntry {
|
|
value: any;
|
|
description: string;
|
|
}
|
|
|
|
export default function WorkflowSettingsPage() {
|
|
const [settings, setSettings] = useState<Record<string, SettingEntry>>({});
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [modified, setModified] = useState<Record<string, any>>({});
|
|
|
|
useEffect(() => { loadSettings(); }, []);
|
|
|
|
const loadSettings = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const res = await fetch('/api/workflow/settings');
|
|
if (res.ok) {
|
|
setSettings(await res.json());
|
|
setModified({});
|
|
}
|
|
} catch { toast.error('Failed to load settings'); }
|
|
finally { setIsLoading(false); }
|
|
};
|
|
|
|
const getValue = (key: string): any => {
|
|
if (key in modified) return modified[key];
|
|
return settings[key]?.value;
|
|
};
|
|
|
|
const setValue = (key: string, value: any) => {
|
|
setModified({ ...modified, [key]: value });
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (Object.keys(modified).length === 0) return;
|
|
setIsSaving(true);
|
|
try {
|
|
const res = await fetch('/api/workflow/settings', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(modified),
|
|
});
|
|
if (res.ok) {
|
|
toast.success('Settings saved');
|
|
setSettings(await res.json());
|
|
setModified({});
|
|
}
|
|
} catch { toast.error('Failed to save settings'); }
|
|
finally { setIsSaving(false); }
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="container mx-auto p-6 flex justify-center py-20">
|
|
<Loader2 className="w-6 h-6 animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto p-6 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Link href="/admin/workflow">
|
|
<Button variant="ghost" size="sm">
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Back
|
|
</Button>
|
|
</Link>
|
|
<Settings className="w-6 h-6" />
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Workflow Settings</h1>
|
|
<p className="text-sm text-muted-foreground">Configure AI providers, thresholds, and behavior</p>
|
|
</div>
|
|
</div>
|
|
{Object.keys(modified).length > 0 && (
|
|
<Button onClick={handleSave} disabled={isSaving}>
|
|
{isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
|
|
Save Changes
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Engine Control */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Engine Control</CardTitle>
|
|
<CardDescription>Master enable/disable for the workflow engine</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label>Workflow Engine</Label>
|
|
<p className="text-sm text-muted-foreground">When enabled, new tickets are automatically classified</p>
|
|
</div>
|
|
<Switch
|
|
checked={getValue('workflow_engine_enabled') ?? false}
|
|
onCheckedChange={(v) => setValue('workflow_engine_enabled', v)}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* AI Provider Config */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>AI Provider Configuration</CardTitle>
|
|
<CardDescription>Configure API keys and models for AI-assisted classification</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label>Default AI Provider</Label>
|
|
<Select value={getValue('default_ai_provider') || 'openai'} onValueChange={(v) => setValue('default_ai_provider', v)}>
|
|
<SelectTrigger className="w-60"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="openai">OpenAI</SelectItem>
|
|
<SelectItem value="anthropic">Anthropic</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div className="space-y-4">
|
|
<h4 className="font-medium">OpenAI</h4>
|
|
<div className="space-y-2">
|
|
<Label>API Key</Label>
|
|
<Input
|
|
type="password"
|
|
value={getValue('openai_api_key') || ''}
|
|
onChange={(e) => setValue('openai_api_key', e.target.value)}
|
|
placeholder="sk-..."
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Model</Label>
|
|
<Input
|
|
value={getValue('openai_model') || 'gpt-4o'}
|
|
onChange={(e) => setValue('openai_model', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h4 className="font-medium">Anthropic</h4>
|
|
<div className="space-y-2">
|
|
<Label>API Key</Label>
|
|
<Input
|
|
type="password"
|
|
value={getValue('anthropic_api_key') || ''}
|
|
onChange={(e) => setValue('anthropic_api_key', e.target.value)}
|
|
placeholder="sk-ant-..."
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Model</Label>
|
|
<Input
|
|
value={getValue('anthropic_model') || 'claude-sonnet-4-20250514'}
|
|
onChange={(e) => setValue('anthropic_model', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* AI Feature Toggles */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>AI Feature Toggles</CardTitle>
|
|
<CardDescription>Control when AI is used during triage</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{[
|
|
{ key: 'ai_for_title_cleanup', label: 'Title Cleanup', desc: 'Use AI to clean up messy ticket titles (email subjects, long titles)' },
|
|
{ key: 'ai_for_description_rewrite', label: 'Description Rewrite', desc: 'Use AI to restructure unstructured ticket descriptions' },
|
|
{ key: 'ai_for_ambiguous_classification', label: 'Ambiguous Classification', desc: 'Use AI when robotic classifier has no confident match' },
|
|
{ key: 'ai_for_troubleshooting', label: 'Troubleshooting Steps', desc: 'Generate AI troubleshooting steps for incident tickets' },
|
|
].map(({ key, label, desc }) => (
|
|
<div key={key} className="flex items-center justify-between">
|
|
<div>
|
|
<Label>{label}</Label>
|
|
<p className="text-sm text-muted-foreground">{desc}</p>
|
|
</div>
|
|
<Switch
|
|
checked={getValue(key) ?? true}
|
|
onCheckedChange={(v) => setValue(key, v)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Processing Config */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Processing Configuration</CardTitle>
|
|
<CardDescription>Thresholds, delays, and retry settings</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label>Confidence Threshold</Label>
|
|
<p className="text-xs text-muted-foreground">Minimum confidence to skip AI classification</p>
|
|
<Select
|
|
value={getValue('classification_confidence_threshold') || 'medium'}
|
|
onValueChange={(v) => setValue('classification_confidence_threshold', v)}
|
|
>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="high">High (AI for medium + low)</SelectItem>
|
|
<SelectItem value="medium">Medium (AI only for low)</SelectItem>
|
|
<SelectItem value="low">Low (AI rarely used)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>Autotask Update Delay (ms)</Label>
|
|
<p className="text-xs text-muted-foreground">Delay before writing back to Autotask to avoid WF rule conflicts</p>
|
|
<Input
|
|
type="number"
|
|
value={getValue('autotask_update_delay_ms') ?? 30000}
|
|
onChange={(e) => setValue('autotask_update_delay_ms', parseInt(e.target.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>Max AI Retries</Label>
|
|
<p className="text-xs text-muted-foreground">Max retry attempts when AI validation fails</p>
|
|
<Input
|
|
type="number"
|
|
value={getValue('max_ai_retries') ?? 2}
|
|
onChange={(e) => setValue('max_ai_retries', parseInt(e.target.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>Log Retention (days)</Label>
|
|
<p className="text-xs text-muted-foreground">Days to retain execution logs</p>
|
|
<Input
|
|
type="number"
|
|
value={getValue('log_retention_days') ?? 90}
|
|
onChange={(e) => setValue('log_retention_days', parseInt(e.target.value))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|