mirror of
https://github.com/MODSetter/SurfSense.git
synced 2025-09-02 02:29:08 +00:00
662 lines
20 KiB
TypeScript
662 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import {
|
|
AlertCircle,
|
|
Bot,
|
|
CheckCircle,
|
|
Clock,
|
|
Edit3,
|
|
Eye,
|
|
EyeOff,
|
|
Loader2,
|
|
Plus,
|
|
RefreshCw,
|
|
Settings2,
|
|
Trash2,
|
|
} from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { type CreateLLMConfig, type LLMConfig, useLLMConfigs } from "@/hooks/use-llm-configs";
|
|
|
|
const LLM_PROVIDERS = [
|
|
{
|
|
value: "OPENAI",
|
|
label: "OpenAI",
|
|
example: "gpt-4o, gpt-4, gpt-3.5-turbo",
|
|
description: "Most popular and versatile AI models",
|
|
},
|
|
{
|
|
value: "ANTHROPIC",
|
|
label: "Anthropic",
|
|
example: "claude-3-5-sonnet-20241022, claude-3-opus-20240229",
|
|
description: "Constitutional AI with strong reasoning",
|
|
},
|
|
{
|
|
value: "GROQ",
|
|
label: "Groq",
|
|
example: "llama3-70b-8192, mixtral-8x7b-32768",
|
|
description: "Ultra-fast inference speeds",
|
|
},
|
|
{
|
|
value: "COHERE",
|
|
label: "Cohere",
|
|
example: "command-r-plus, command-r",
|
|
description: "Enterprise-focused language models",
|
|
},
|
|
{
|
|
value: "HUGGINGFACE",
|
|
label: "HuggingFace",
|
|
example: "microsoft/DialoGPT-medium",
|
|
description: "Open source model hub",
|
|
},
|
|
{
|
|
value: "AZURE_OPENAI",
|
|
label: "Azure OpenAI",
|
|
example: "gpt-4, gpt-35-turbo",
|
|
description: "Enterprise OpenAI through Azure",
|
|
},
|
|
{
|
|
value: "GOOGLE",
|
|
label: "Google",
|
|
example: "gemini-pro, gemini-pro-vision",
|
|
description: "Google's Gemini AI models",
|
|
},
|
|
{
|
|
value: "AWS_BEDROCK",
|
|
label: "AWS Bedrock",
|
|
example: "anthropic.claude-v2",
|
|
description: "AWS managed AI service",
|
|
},
|
|
{
|
|
value: "OLLAMA",
|
|
label: "Ollama",
|
|
example: "llama2, codellama",
|
|
description: "Run models locally",
|
|
},
|
|
{
|
|
value: "MISTRAL",
|
|
label: "Mistral",
|
|
example: "mistral-large-latest, mistral-medium",
|
|
description: "European AI excellence",
|
|
},
|
|
{
|
|
value: "TOGETHER_AI",
|
|
label: "Together AI",
|
|
example: "togethercomputer/llama-2-70b-chat",
|
|
description: "Decentralized AI platform",
|
|
},
|
|
{
|
|
value: "REPLICATE",
|
|
label: "Replicate",
|
|
example: "meta/llama-2-70b-chat",
|
|
description: "Run models via API",
|
|
},
|
|
{
|
|
value: "CUSTOM",
|
|
label: "Custom Provider",
|
|
example: "your-custom-model",
|
|
description: "Your own model endpoint",
|
|
},
|
|
];
|
|
|
|
export function ModelConfigManager() {
|
|
const {
|
|
llmConfigs,
|
|
loading,
|
|
error,
|
|
createLLMConfig,
|
|
updateLLMConfig,
|
|
deleteLLMConfig,
|
|
refreshConfigs,
|
|
} = useLLMConfigs();
|
|
const [isAddingNew, setIsAddingNew] = useState(false);
|
|
const [editingConfig, setEditingConfig] = useState<LLMConfig | null>(null);
|
|
const [showApiKey, setShowApiKey] = useState<Record<number, boolean>>({});
|
|
const [formData, setFormData] = useState<CreateLLMConfig>({
|
|
name: "",
|
|
provider: "",
|
|
custom_provider: "",
|
|
model_name: "",
|
|
api_key: "",
|
|
api_base: "",
|
|
litellm_params: {},
|
|
});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
// Populate form when editing
|
|
useEffect(() => {
|
|
if (editingConfig) {
|
|
setFormData({
|
|
name: editingConfig.name,
|
|
provider: editingConfig.provider,
|
|
custom_provider: editingConfig.custom_provider || "",
|
|
model_name: editingConfig.model_name,
|
|
api_key: editingConfig.api_key,
|
|
api_base: editingConfig.api_base || "",
|
|
litellm_params: editingConfig.litellm_params || {},
|
|
});
|
|
}
|
|
}, [editingConfig]);
|
|
|
|
const handleInputChange = (field: keyof CreateLLMConfig, value: string) => {
|
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!formData.name || !formData.provider || !formData.model_name || !formData.api_key) {
|
|
toast.error("Please fill in all required fields");
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
|
|
let result: LLMConfig | null = null;
|
|
if (editingConfig) {
|
|
// Update existing config
|
|
result = await updateLLMConfig(editingConfig.id, formData);
|
|
} else {
|
|
// Create new config
|
|
result = await createLLMConfig(formData);
|
|
}
|
|
|
|
setIsSubmitting(false);
|
|
|
|
if (result) {
|
|
setFormData({
|
|
name: "",
|
|
provider: "",
|
|
custom_provider: "",
|
|
model_name: "",
|
|
api_key: "",
|
|
api_base: "",
|
|
litellm_params: {},
|
|
});
|
|
setIsAddingNew(false);
|
|
setEditingConfig(null);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
if (
|
|
confirm("Are you sure you want to delete this configuration? This action cannot be undone.")
|
|
) {
|
|
await deleteLLMConfig(id);
|
|
}
|
|
};
|
|
|
|
const toggleApiKeyVisibility = (configId: number) => {
|
|
setShowApiKey((prev) => ({
|
|
...prev,
|
|
[configId]: !prev[configId],
|
|
}));
|
|
};
|
|
|
|
const selectedProvider = LLM_PROVIDERS.find((p) => p.value === formData.provider);
|
|
|
|
const getProviderInfo = (providerValue: string) => {
|
|
return LLM_PROVIDERS.find((p) => p.value === providerValue);
|
|
};
|
|
|
|
const maskApiKey = (apiKey: string) => {
|
|
if (apiKey.length <= 8) return "*".repeat(apiKey.length);
|
|
return (
|
|
apiKey.substring(0, 4) + "*".repeat(apiKey.length - 8) + apiKey.substring(apiKey.length - 4)
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10">
|
|
<Settings2 className="h-5 w-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight">Model Configurations</h2>
|
|
<p className="text-muted-foreground">
|
|
Manage your LLM provider configurations and API settings.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={refreshConfigs}
|
|
disabled={loading}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Alert */}
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* Loading State */}
|
|
{loading && (
|
|
<Card>
|
|
<CardContent className="flex items-center justify-center py-12">
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Loader2 className="w-5 h-5 animate-spin" />
|
|
<span>Loading configurations...</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Stats Overview */}
|
|
{!loading && !error && (
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<Card className="border-l-4 border-l-blue-500">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between space-x-4">
|
|
<div className="space-y-1">
|
|
<p className="text-3xl font-bold tracking-tight">{llmConfigs.length}</p>
|
|
<p className="text-sm font-medium text-muted-foreground">Total Configurations</p>
|
|
</div>
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
|
|
<Bot className="h-6 w-6 text-blue-600" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-l-4 border-l-green-500">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between space-x-4">
|
|
<div className="space-y-1">
|
|
<p className="text-3xl font-bold tracking-tight">
|
|
{new Set(llmConfigs.map((c) => c.provider)).size}
|
|
</p>
|
|
<p className="text-sm font-medium text-muted-foreground">Unique Providers</p>
|
|
</div>
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10">
|
|
<CheckCircle className="h-6 w-6 text-green-600" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-l-4 border-l-emerald-500">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between space-x-4">
|
|
<div className="space-y-1">
|
|
<p className="text-3xl font-bold tracking-tight text-emerald-600">Active</p>
|
|
<p className="text-sm font-medium text-muted-foreground">System Status</p>
|
|
</div>
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-500/10">
|
|
<CheckCircle className="h-6 w-6 text-emerald-600" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Configuration Management */}
|
|
{!loading && !error && (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
|
|
<div>
|
|
<h3 className="text-xl font-semibold tracking-tight">Your Configurations</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Manage and configure your LLM providers
|
|
</p>
|
|
</div>
|
|
<Button onClick={() => setIsAddingNew(true)} className="flex items-center gap-2">
|
|
<Plus className="h-4 w-4" />
|
|
Add Configuration
|
|
</Button>
|
|
</div>
|
|
|
|
{llmConfigs.length === 0 ? (
|
|
<Card className="border-dashed border-2 border-muted-foreground/25">
|
|
<CardContent className="flex flex-col items-center justify-center py-16 text-center">
|
|
<div className="rounded-full bg-muted p-4 mb-6">
|
|
<Bot className="h-10 w-10 text-muted-foreground" />
|
|
</div>
|
|
<div className="space-y-2 mb-6">
|
|
<h3 className="text-xl font-semibold">No Configurations Yet</h3>
|
|
<p className="text-muted-foreground max-w-sm">
|
|
Get started by adding your first LLM provider configuration to begin using the
|
|
system.
|
|
</p>
|
|
</div>
|
|
<Button onClick={() => setIsAddingNew(true)} size="lg">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add First Configuration
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="grid gap-4">
|
|
<AnimatePresence>
|
|
{llmConfigs.map((config) => {
|
|
const providerInfo = getProviderInfo(config.provider);
|
|
return (
|
|
<motion.div
|
|
key={config.id}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<Card className="group border-l-4 border-l-primary/50 hover:border-l-primary hover:shadow-md transition-all duration-200">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 space-y-4">
|
|
{/* Header */}
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors">
|
|
<Bot className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div className="flex-1 space-y-2">
|
|
<div className="flex items-center gap-3">
|
|
<h4 className="text-lg font-semibold tracking-tight">
|
|
{config.name}
|
|
</h4>
|
|
<Badge variant="secondary" className="text-xs font-medium">
|
|
{config.provider}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground font-mono">
|
|
{config.model_name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Provider Description */}
|
|
{providerInfo && (
|
|
<p className="text-sm text-muted-foreground">
|
|
{providerInfo.description}
|
|
</p>
|
|
)}
|
|
|
|
{/* Configuration Details */}
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
API Key
|
|
</Label>
|
|
<div className="flex items-center space-x-2">
|
|
<code className="flex-1 rounded-md bg-muted px-3 py-2 text-xs font-mono">
|
|
{showApiKey[config.id]
|
|
? config.api_key
|
|
: maskApiKey(config.api_key)}
|
|
</code>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => toggleApiKeyVisibility(config.id)}
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
{showApiKey[config.id] ? (
|
|
<EyeOff className="h-3 w-3" />
|
|
) : (
|
|
<Eye className="h-3 w-3" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{config.api_base && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
API Base URL
|
|
</Label>
|
|
<code className="block rounded-md bg-muted px-3 py-2 text-xs font-mono break-all">
|
|
{config.api_base}
|
|
</code>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Metadata */}
|
|
<div className="flex flex-wrap items-center gap-4 pt-4 border-t border-border/50">
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<Clock className="h-3 w-3" />
|
|
<span>
|
|
Created {new Date(config.created_at).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<div className="h-2 w-2 rounded-full bg-green-500"></div>
|
|
<span className="text-green-600 font-medium">Active</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col gap-2 ml-6">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setEditingConfig(config)}
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
<Edit3 className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleDelete(config.id)}
|
|
className="h-8 w-8 p-0 border-destructive/20 text-destructive hover:bg-destructive hover:text-destructive-foreground"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</AnimatePresence>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Add/Edit Configuration Dialog */}
|
|
<Dialog
|
|
open={isAddingNew || !!editingConfig}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setIsAddingNew(false);
|
|
setEditingConfig(null);
|
|
setFormData({
|
|
name: "",
|
|
provider: "",
|
|
custom_provider: "",
|
|
model_name: "",
|
|
api_key: "",
|
|
api_base: "",
|
|
litellm_params: {},
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
{editingConfig ? <Edit3 className="w-5 h-5" /> : <Plus className="w-5 h-5" />}
|
|
{editingConfig ? "Edit LLM Configuration" : "Add New LLM Configuration"}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{editingConfig
|
|
? "Update your language model provider configuration"
|
|
: "Configure a new language model provider for your AI assistant"}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Configuration Name *</Label>
|
|
<Input
|
|
id="name"
|
|
placeholder="e.g., My OpenAI GPT-4"
|
|
value={formData.name}
|
|
onChange={(e) => handleInputChange("name", e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="provider">Provider *</Label>
|
|
<Select
|
|
value={formData.provider}
|
|
onValueChange={(value) => handleInputChange("provider", value)}
|
|
>
|
|
<SelectTrigger className="h-auto min-h-[2.5rem] py-2">
|
|
<SelectValue placeholder="Select a provider">
|
|
{formData.provider && (
|
|
<div className="flex items-center space-x-2 py-1">
|
|
<div className="font-medium">
|
|
{LLM_PROVIDERS.find((p) => p.value === formData.provider)?.label}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">•</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{LLM_PROVIDERS.find((p) => p.value === formData.provider)?.description}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{LLM_PROVIDERS.map((provider) => (
|
|
<SelectItem key={provider.value} value={provider.value}>
|
|
<div className="space-y-1 py-1">
|
|
<div className="font-medium">{provider.label}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{provider.description}
|
|
</div>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{formData.provider === "CUSTOM" && (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="custom_provider">Custom Provider Name *</Label>
|
|
<Input
|
|
id="custom_provider"
|
|
placeholder="e.g., my-custom-provider"
|
|
value={formData.custom_provider}
|
|
onChange={(e) => handleInputChange("custom_provider", e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="model_name">Model Name *</Label>
|
|
<Input
|
|
id="model_name"
|
|
placeholder={selectedProvider?.example || "e.g., gpt-4"}
|
|
value={formData.model_name}
|
|
onChange={(e) => handleInputChange("model_name", e.target.value)}
|
|
required
|
|
/>
|
|
{selectedProvider && (
|
|
<p className="text-xs text-muted-foreground">
|
|
Examples: {selectedProvider.example}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="api_key">API Key *</Label>
|
|
<Input
|
|
id="api_key"
|
|
type="password"
|
|
placeholder="Your API key"
|
|
value={formData.api_key}
|
|
onChange={(e) => handleInputChange("api_key", e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="api_base">API Base URL (Optional)</Label>
|
|
<Input
|
|
id="api_base"
|
|
placeholder="e.g., https://api.openai.com/v1"
|
|
value={formData.api_base}
|
|
onChange={(e) => handleInputChange("api_base", e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-2 pt-4">
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting
|
|
? editingConfig
|
|
? "Updating..."
|
|
: "Adding..."
|
|
: editingConfig
|
|
? "Update Configuration"
|
|
: "Add Configuration"}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => {
|
|
setIsAddingNew(false);
|
|
setEditingConfig(null);
|
|
setFormData({
|
|
name: "",
|
|
provider: "",
|
|
custom_provider: "",
|
|
model_name: "",
|
|
api_key: "",
|
|
api_base: "",
|
|
litellm_params: {},
|
|
});
|
|
}}
|
|
disabled={isSubmitting}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|