184 lines
9.0 KiB
TypeScript
184 lines
9.0 KiB
TypeScript
import React from 'react';
|
|
import { Brain, Cpu, Zap, Lock, RotateCcw, Wifi, FileText, Shield } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface AiManagerProps {
|
|
aiConfig: any;
|
|
handleUpdateAiProvider: (provider: string) => void;
|
|
aiKeys: { gemini: string; claude: string };
|
|
setAiKeys: (keys: any) => void;
|
|
isSavingKeys: boolean;
|
|
onSaveAiKeys: () => void;
|
|
isTestingKeys: { gemini: boolean; claude: boolean };
|
|
onTestAiKey: (provider: 'gemini' | 'claude') => void;
|
|
aiPrompt: string;
|
|
setAiPrompt: (prompt: string) => void;
|
|
isSavingPrompt: boolean;
|
|
onUpdatePrompt: () => void;
|
|
}
|
|
|
|
export default function AiManager({
|
|
aiConfig,
|
|
handleUpdateAiProvider,
|
|
aiKeys,
|
|
setAiKeys,
|
|
isSavingKeys,
|
|
onSaveAiKeys,
|
|
isTestingKeys,
|
|
onTestAiKey,
|
|
aiPrompt,
|
|
setAiPrompt,
|
|
isSavingPrompt,
|
|
onUpdatePrompt
|
|
}: AiManagerProps) {
|
|
return (
|
|
<section className="bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/ai">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
|
|
<Brain size={20} />
|
|
</div>
|
|
<h2 className="text-xl font-black text-white tracking-tight">AI Intelligence</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-4">
|
|
{aiConfig?.providers?.map((p: any) => (
|
|
<button
|
|
key={p.id}
|
|
onClick={() => handleUpdateAiProvider(p.id)}
|
|
className={cn(
|
|
"p-4 rounded-2xl border transition-all text-left flex items-center justify-between group",
|
|
p.active
|
|
? "bg-indigo-600 border-indigo-500 shadow-xl shadow-indigo-600/10"
|
|
: "bg-slate-950/60 border-slate-800 hover:border-indigo-500/40"
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className={cn(
|
|
"w-8 h-8 rounded-lg flex items-center justify-center transition-colors",
|
|
p.active ? "bg-white/20 text-white" : "bg-indigo-500/10 text-indigo-400 group-hover:bg-indigo-500/20"
|
|
)}>
|
|
{p.id === 'gemini' ? <Cpu size={16} /> : <Zap size={16} />}
|
|
</div>
|
|
<div>
|
|
<p className={cn("text-xs font-black tracking-tight", p.active ? "text-white" : "text-slate-200")}>{p.name}</p>
|
|
<p className={cn(
|
|
"text-[9px] font-black mt-0.5 px-0.5 rounded",
|
|
p.active
|
|
? (p.configured ? "text-emerald-200" : "text-rose-100")
|
|
: (p.configured ? "text-emerald-500" : "text-rose-500")
|
|
)}>
|
|
{p.configured ? "● Key Configured" : "○ Missing Api Key"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{p.active && (
|
|
<div className="bg-white/20 px-2 py-0.5 rounded-full text-[8px] font-black text-white tracking-tighter">
|
|
Active
|
|
</div>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="bg-indigo-500/5 border border-indigo-500/10 rounded-[2rem] p-6 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-indigo-500/10 rounded-lg text-indigo-400"><Lock size={14} /></div>
|
|
<h3 className="text-xs font-black text-slate-200 tracking-tight">Provider Access Keys</h3>
|
|
</div>
|
|
<button
|
|
onClick={onSaveAiKeys}
|
|
disabled={isSavingKeys}
|
|
className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-[10px] font-black transition-all active:scale-95 shadow-xl shadow-indigo-600/10 tracking-tight border border-indigo-500/30 flex items-center gap-2"
|
|
>
|
|
{isSavingKeys ? <RotateCcw size={14} className="animate-spin" /> : <Lock size={14} />}
|
|
{isSavingKeys ? "Storing..." : "Store Keys"}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-[9px] font-black text-slate-500 tracking-tight ml-1">Gemini Api Key</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="password"
|
|
value={aiKeys.gemini}
|
|
onChange={(e) => setAiKeys({...aiKeys, gemini: e.target.value})}
|
|
placeholder={aiConfig?.providers?.find((p: any) => p.id === 'gemini')?.masked_key || "Enter Gemini Key..."}
|
|
className="flex-1 bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs text-white outline-none focus:border-indigo-500/50 transition-all placeholder:text-slate-600"
|
|
/>
|
|
<button
|
|
onClick={() => onTestAiKey('gemini')}
|
|
disabled={isTestingKeys.gemini}
|
|
className={cn(
|
|
"px-4 py-2 rounded-xl text-[9px] font-black tracking-tighter transition-all border shadow-lg flex items-center gap-1.5",
|
|
isTestingKeys.gemini
|
|
? "bg-slate-800 border-slate-700 text-slate-500 cursor-wait"
|
|
: "bg-indigo-600 border-indigo-500 text-white hover:bg-indigo-500"
|
|
)}
|
|
>
|
|
{isTestingKeys.gemini ? <RotateCcw size={12} className="animate-spin" /> : <Wifi size={12} />}
|
|
{isTestingKeys.gemini ? "..." : "Test"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-[9px] font-black text-slate-500 tracking-tight ml-1">Claude Api Key</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="password"
|
|
value={aiKeys.claude}
|
|
onChange={(e) => setAiKeys({...aiKeys, claude: e.target.value})}
|
|
placeholder={aiConfig?.providers?.find((p: any) => p.id === 'claude')?.masked_key || "Enter Claude Key..."}
|
|
className="flex-1 bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs text-white outline-none focus:border-indigo-500/50 transition-all placeholder:text-slate-600"
|
|
/>
|
|
<button
|
|
onClick={() => onTestAiKey('claude')}
|
|
disabled={isTestingKeys.claude}
|
|
className={cn(
|
|
"px-4 py-2 rounded-xl text-[9px] font-black uppercase tracking-tighter transition-all border shadow-lg flex items-center gap-1.5",
|
|
isTestingKeys.claude
|
|
? "bg-slate-800 border-slate-700 text-slate-500 cursor-wait"
|
|
: "bg-indigo-600 border-indigo-500 text-white hover:bg-indigo-500"
|
|
)}
|
|
>
|
|
{isTestingKeys.claude ? <RotateCcw size={12} className="animate-spin" /> : <Wifi size={12} />}
|
|
{isTestingKeys.claude ? "..." : "Test"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between px-1">
|
|
<label className="text-[10px] font-black text-slate-500 tracking-tight">System Prompt (Vision Extraction)</label>
|
|
<button
|
|
onClick={onUpdatePrompt}
|
|
disabled={isSavingPrompt}
|
|
className="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-[10px] font-black transition-all active:scale-95 shadow-xl shadow-indigo-600/10 tracking-tight border border-indigo-500/30 flex items-center gap-2"
|
|
>
|
|
{isSavingPrompt ? <RotateCcw size={14} className="animate-spin" /> : <FileText size={14} />}
|
|
{isSavingPrompt ? "Saving..." : "Save Prompt"}
|
|
</button>
|
|
</div>
|
|
<textarea
|
|
value={aiPrompt}
|
|
onChange={(e) => setAiPrompt(e.target.value)}
|
|
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl p-6 text-[11px] font-mono font-bold text-slate-300 leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
|
|
/>
|
|
</div>
|
|
<div className="bg-purple-500/5 border border-purple-500/10 rounded-2xl p-4 flex gap-4 items-start">
|
|
<div className="p-2 bg-purple-500/10 rounded-lg text-purple-400 shrink-0"><Shield size={14} /></div>
|
|
<p className="text-[10px] font-bold text-slate-500 leading-relaxed">
|
|
This prompt instructs the Vision AI core on label interpretation. Ensure it defines explicit mapping for technical attributes like <span className="text-purple-400">Item</span>, <span className="text-purple-400">Type</span>, and <span className="text-purple-400">Part Number</span> to avoid extraction null-pointers and ensure inventory data integrity.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|