mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 08:46:22 +02:00
850 lines
28 KiB
TypeScript
850 lines
28 KiB
TypeScript
"use client";
|
||
|
||
import { useAtomValue } from "jotai";
|
||
import {
|
||
AlertCircle,
|
||
Bot,
|
||
Check,
|
||
CheckCircle,
|
||
ChevronsUpDown,
|
||
Clock,
|
||
Edit3,
|
||
Loader2,
|
||
Plus,
|
||
RefreshCw,
|
||
Settings2,
|
||
Trash2,
|
||
} from "lucide-react";
|
||
import { AnimatePresence, motion } from "motion/react";
|
||
import { useEffect, useState } from "react";
|
||
import { toast } from "sonner";
|
||
import {
|
||
createLLMConfigMutationAtom,
|
||
deleteLLMConfigMutationAtom,
|
||
updateLLMConfigMutationAtom,
|
||
} from "@/atoms/llm-config/llm-config-mutation.atoms";
|
||
import { globalLLMConfigsAtom, llmConfigsAtom } from "@/atoms/llm-config/llm-config-query.atoms";
|
||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from "@/components/ui/alert-dialog";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import {
|
||
Command,
|
||
CommandEmpty,
|
||
CommandGroup,
|
||
CommandInput,
|
||
CommandItem,
|
||
CommandList,
|
||
} from "@/components/ui/command";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { LANGUAGES } from "@/contracts/enums/languages";
|
||
import { getModelsByProvider } from "@/contracts/enums/llm-models";
|
||
import { LLM_PROVIDERS } from "@/contracts/enums/llm-providers";
|
||
import type {
|
||
CreateLLMConfigRequest,
|
||
CreateLLMConfigResponse,
|
||
LLMConfig,
|
||
UpdateLLMConfigResponse,
|
||
} from "@/contracts/types/llm-config.types";
|
||
import { cn } from "@/lib/utils";
|
||
import InferenceParamsEditor from "../inference-params-editor";
|
||
|
||
interface ModelConfigManagerProps {
|
||
searchSpaceId: number;
|
||
}
|
||
|
||
export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
|
||
const {
|
||
mutateAsync: createLLMConfig,
|
||
isPending: isCreatingLLMConfig,
|
||
error: createLLMConfigError,
|
||
} = useAtomValue(createLLMConfigMutationAtom);
|
||
const {
|
||
mutateAsync: updateLLMConfig,
|
||
isPending: isUpdatingLLMConfig,
|
||
error: updateLLMConfigError,
|
||
} = useAtomValue(updateLLMConfigMutationAtom);
|
||
const {
|
||
mutateAsync: deleteLLMConfig,
|
||
isPending: isDeletingLLMConfig,
|
||
error: deleteLLMConfigError,
|
||
} = useAtomValue(deleteLLMConfigMutationAtom);
|
||
const {
|
||
data: llmConfigs,
|
||
isFetching: isFetchingLLMConfigs,
|
||
error: LLMConfigsFetchError,
|
||
refetch: refreshConfigs,
|
||
} = useAtomValue(llmConfigsAtom);
|
||
const { data: globalConfigs = [] } = useAtomValue(globalLLMConfigsAtom);
|
||
const [isAddingNew, setIsAddingNew] = useState(false);
|
||
const [editingConfig, setEditingConfig] = useState<LLMConfig | null>(null);
|
||
const [formData, setFormData] = useState<CreateLLMConfigRequest>({
|
||
name: "",
|
||
provider: "" as CreateLLMConfigRequest["provider"], // Allow it as Default,
|
||
custom_provider: "",
|
||
model_name: "",
|
||
api_key: "",
|
||
api_base: "",
|
||
language: "English",
|
||
litellm_params: {},
|
||
search_space_id: searchSpaceId,
|
||
});
|
||
const isSubmitting = isCreatingLLMConfig || isUpdatingLLMConfig;
|
||
const errors = [
|
||
createLLMConfigError,
|
||
updateLLMConfigError,
|
||
deleteLLMConfigError,
|
||
LLMConfigsFetchError,
|
||
] as Error[];
|
||
const isError = Boolean(errors.filter(Boolean).length);
|
||
const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
|
||
const [configToDelete, setConfigToDelete] = useState<LLMConfig | null>(null);
|
||
const [isDeleting, setIsDeleting] = 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 || "",
|
||
language: editingConfig.language || "English",
|
||
litellm_params: editingConfig.litellm_params || {},
|
||
search_space_id: searchSpaceId,
|
||
});
|
||
}
|
||
}, [editingConfig, searchSpaceId]);
|
||
|
||
const handleInputChange = (field: keyof CreateLLMConfigRequest, value: string) => {
|
||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||
};
|
||
|
||
// Handle provider change with auto-fill API Base URL and reset model / 处理 Provider 变更并自动填充 API Base URL 并重置模型
|
||
const handleProviderChange = (providerValue: CreateLLMConfigRequest["provider"]) => {
|
||
const provider = LLM_PROVIDERS.find((p) => p.value === providerValue);
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
provider: providerValue,
|
||
model_name: "", // Reset model when provider changes
|
||
// Auto-fill API Base URL if provider has a default / 如果提供商有默认值则自动填充
|
||
api_base: provider?.apiBase || prev.api_base,
|
||
}));
|
||
};
|
||
|
||
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;
|
||
}
|
||
|
||
let result: CreateLLMConfigResponse | UpdateLLMConfigResponse | null = null;
|
||
if (editingConfig) {
|
||
// Update existing config
|
||
result = await updateLLMConfig({ id: editingConfig.id, data: formData });
|
||
} else {
|
||
// Create new config
|
||
result = await createLLMConfig(formData);
|
||
}
|
||
|
||
if (result) {
|
||
setFormData({
|
||
name: "",
|
||
provider: "" as CreateLLMConfigRequest["provider"],
|
||
custom_provider: "",
|
||
model_name: "",
|
||
api_key: "",
|
||
api_base: "",
|
||
language: "English",
|
||
litellm_params: {},
|
||
search_space_id: searchSpaceId,
|
||
});
|
||
setIsAddingNew(false);
|
||
setEditingConfig(null);
|
||
}
|
||
};
|
||
|
||
const handleDeleteClick = (config: LLMConfig) => {
|
||
setConfigToDelete(config);
|
||
};
|
||
|
||
const handleConfirmDelete = async () => {
|
||
if (!configToDelete) return;
|
||
try {
|
||
await deleteLLMConfig({ id: configToDelete.id });
|
||
} catch (error) {
|
||
toast.error("Failed to delete configuration");
|
||
} finally {
|
||
setConfigToDelete(null);
|
||
}
|
||
};
|
||
|
||
const selectedProvider = LLM_PROVIDERS.find((p) => p.value === formData.provider);
|
||
const availableModels = formData.provider ? getModelsByProvider(formData.provider) : [];
|
||
|
||
const getProviderInfo = (providerValue: string) => {
|
||
return LLM_PROVIDERS.find((p) => p.value === providerValue);
|
||
};
|
||
|
||
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={isFetchingLLMConfigs}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<RefreshCw className={`h-4 w-4 ${isFetchingLLMConfigs ? "animate-spin" : ""}`} />
|
||
Refresh
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Error Alert */}
|
||
{isError &&
|
||
errors.filter(Boolean).map((err, i) => {
|
||
return (
|
||
<Alert key={`err.message-${i}`} variant="destructive">
|
||
<AlertCircle className="h-4 w-4" />
|
||
<AlertDescription>{err?.message ?? "Something went wrong"}</AlertDescription>
|
||
</Alert>
|
||
);
|
||
})}
|
||
|
||
{/* Global Configs Info Alert */}
|
||
{!isFetchingLLMConfigs && !isError && globalConfigs.length > 0 && (
|
||
<Alert>
|
||
<CheckCircle className="h-4 w-4" />
|
||
<AlertDescription>
|
||
<strong>
|
||
{globalConfigs.length} global configuration{globalConfigs.length > 1 ? "s" : ""}
|
||
</strong>{" "}
|
||
available for use. You can assign them in the LLM Roles tab without adding your own API
|
||
keys.
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{/* Loading State */}
|
||
{isFetchingLLMConfigs && (
|
||
<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 */}
|
||
{!isFetchingLLMConfigs && !isError && (
|
||
<div className="grid gap-3 grid-cols-3">
|
||
<Card className="overflow-hidden">
|
||
<div className="h-1 bg-blue-500" />
|
||
<CardContent className="p-4">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<div className="space-y-1 min-w-0">
|
||
<p className="text-2xl font-bold tracking-tight">{llmConfigs?.length}</p>
|
||
<p className="text-xs font-medium text-muted-foreground">Total Configs</p>
|
||
</div>
|
||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
|
||
<Bot className="h-4 w-4 text-blue-600" />
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="overflow-hidden">
|
||
<div className="h-1 bg-green-500" />
|
||
<CardContent className="p-4">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<div className="space-y-1 min-w-0">
|
||
<p className="text-2xl font-bold tracking-tight">
|
||
{new Set(llmConfigs?.map((c) => c.provider)).size}
|
||
</p>
|
||
<p className="text-xs font-medium text-muted-foreground">Providers</p>
|
||
</div>
|
||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-green-500/10">
|
||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="overflow-hidden">
|
||
<div className="h-1 bg-emerald-500" />
|
||
<CardContent className="p-4">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<div className="space-y-1 min-w-0">
|
||
<p className="text-2xl font-bold tracking-tight text-emerald-600">Active</p>
|
||
<p className="text-xs font-medium text-muted-foreground">Status</p>
|
||
</div>
|
||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10">
|
||
<CheckCircle className="h-4 w-4 text-emerald-600" />
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)}
|
||
|
||
{/* Configuration Management */}
|
||
{!isFetchingLLMConfigs && !isError && (
|
||
<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">
|
||
Add your own LLM provider configurations.
|
||
</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 overflow-hidden hover:shadow-md transition-all duration-200">
|
||
<CardContent className="p-0">
|
||
<div className="flex">
|
||
{/* Left accent bar */}
|
||
<div className="w-1 bg-primary/50 group-hover:bg-primary transition-colors" />
|
||
|
||
<div className="flex-1 p-5">
|
||
<div className="flex items-start justify-between gap-4">
|
||
{/* Main content */}
|
||
<div className="flex items-start gap-4 flex-1 min-w-0">
|
||
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 group-hover:bg-primary/15 transition-colors">
|
||
<Bot className="h-5 w-5 text-primary" />
|
||
</div>
|
||
<div className="flex-1 min-w-0 space-y-3">
|
||
{/* Title row */}
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<h4 className="text-base font-semibold tracking-tight truncate">
|
||
{config.name}
|
||
</h4>
|
||
<div className="flex items-center gap-1.5">
|
||
<Badge
|
||
variant="secondary"
|
||
className="text-[10px] font-medium px-1.5 py-0"
|
||
>
|
||
{config.provider}
|
||
</Badge>
|
||
{config.language && (
|
||
<Badge
|
||
variant="outline"
|
||
className="text-[10px] px-1.5 py-0 text-muted-foreground"
|
||
>
|
||
{config.language}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Model name */}
|
||
<div className="flex items-center gap-2">
|
||
<code className="text-xs font-mono text-muted-foreground bg-muted/50 px-2 py-0.5 rounded">
|
||
{config.model_name}
|
||
</code>
|
||
</div>
|
||
|
||
{/* Footer row */}
|
||
<div className="flex items-center gap-3 pt-2">
|
||
{config.created_at && (
|
||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||
<Clock className="h-3 w-3" />
|
||
<span>
|
||
{new Date(config.created_at).toLocaleDateString()}
|
||
</span>
|
||
</div>
|
||
)}
|
||
<div className="flex items-center gap-1.5 text-xs">
|
||
<div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
|
||
<span className="text-emerald-600 dark:text-emerald-400 font-medium">
|
||
Active
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="flex items-center gap-1 shrink-0">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setEditingConfig(config)}
|
||
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
|
||
>
|
||
<Edit3 className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleDeleteClick(config)}
|
||
className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</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: "" as LLMConfig["provider"],
|
||
custom_provider: "",
|
||
model_name: "",
|
||
api_key: "",
|
||
api_base: "",
|
||
language: "",
|
||
litellm_params: {},
|
||
search_space_id: searchSpaceId,
|
||
});
|
||
}
|
||
}}
|
||
>
|
||
<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={handleProviderChange}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Select a provider">
|
||
{formData.provider && (
|
||
<span className="font-medium">
|
||
{LLM_PROVIDERS.find((p) => p.value === formData.provider)?.label}
|
||
</span>
|
||
)}
|
||
</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>
|
||
<Popover open={modelComboboxOpen} onOpenChange={setModelComboboxOpen}>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
aria-expanded={modelComboboxOpen}
|
||
className="w-full justify-between font-normal"
|
||
>
|
||
<span className={cn(!formData.model_name && "text-muted-foreground")}>
|
||
{formData.model_name || "Select or type model name..."}
|
||
</span>
|
||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent className="w-full p-0" align="start" side="bottom">
|
||
<Command shouldFilter={false}>
|
||
<CommandInput
|
||
placeholder={selectedProvider?.example || "Type model name..."}
|
||
value={formData.model_name}
|
||
onValueChange={(value) => handleInputChange("model_name", value)}
|
||
/>
|
||
<CommandList>
|
||
<CommandEmpty>
|
||
<div className="py-2 text-center text-sm text-muted-foreground">
|
||
{formData.model_name
|
||
? `Using custom model: "${formData.model_name}"`
|
||
: "Type your model name above"}
|
||
</div>
|
||
</CommandEmpty>
|
||
{availableModels.length > 0 && (
|
||
<CommandGroup heading="Suggested Models">
|
||
{availableModels
|
||
.filter(
|
||
(model) =>
|
||
!formData.model_name ||
|
||
model.value
|
||
.toLowerCase()
|
||
.includes(formData.model_name.toLowerCase()) ||
|
||
model.label
|
||
.toLowerCase()
|
||
.includes(formData.model_name.toLowerCase())
|
||
)
|
||
.map((model) => (
|
||
<CommandItem
|
||
key={model.value}
|
||
value={model.value}
|
||
onSelect={(currentValue) => {
|
||
handleInputChange("model_name", currentValue);
|
||
setModelComboboxOpen(false);
|
||
}}
|
||
className="flex flex-col items-start py-3"
|
||
>
|
||
<div className="flex w-full items-center">
|
||
<Check
|
||
className={cn(
|
||
"mr-2 h-4 w-4 shrink-0",
|
||
formData.model_name === model.value
|
||
? "opacity-100"
|
||
: "opacity-0"
|
||
)}
|
||
/>
|
||
<div className="flex-1">
|
||
<div className="font-medium">{model.label}</div>
|
||
{model.contextWindow && (
|
||
<div className="text-xs text-muted-foreground">
|
||
Context: {model.contextWindow}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CommandItem>
|
||
))}
|
||
</CommandGroup>
|
||
)}
|
||
</CommandList>
|
||
</Command>
|
||
</PopoverContent>
|
||
</Popover>
|
||
<p className="text-xs text-muted-foreground">
|
||
{availableModels.length > 0
|
||
? `Type freely or select from ${availableModels.length} model suggestions`
|
||
: selectedProvider?.example
|
||
? `Examples: ${selectedProvider.example}`
|
||
: "Type your model name freely"}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="language">Language (Optional)</Label>
|
||
<Select
|
||
value={formData.language || "English"}
|
||
onValueChange={(value) => handleInputChange("language", value)}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Select language" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{LANGUAGES.map((language) => (
|
||
<SelectItem key={language.value} value={language.value}>
|
||
{language.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="api_key">API Key *</Label>
|
||
<Input
|
||
id="api_key"
|
||
type="password"
|
||
placeholder={
|
||
formData.provider === "OLLAMA" ? "Any value (e.g., ollama)" : "Your API key"
|
||
}
|
||
value={formData.api_key}
|
||
onChange={(e) => handleInputChange("api_key", e.target.value)}
|
||
required
|
||
/>
|
||
{formData.provider === "OLLAMA" && (
|
||
<p className="text-xs text-muted-foreground">
|
||
💡 Ollama doesn't require authentication — enter any value (e.g., "ollama")
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="api_base">
|
||
API Base URL
|
||
{selectedProvider?.apiBase && (
|
||
<span className="text-xs font-normal text-muted-foreground ml-2">
|
||
(Auto-filled for {selectedProvider.label})
|
||
</span>
|
||
)}
|
||
</Label>
|
||
<Input
|
||
id="api_base"
|
||
placeholder={selectedProvider?.apiBase || "e.g., https://api.openai.com/v1"}
|
||
value={formData.api_base ?? ""}
|
||
onChange={(e) => handleInputChange("api_base", e.target.value)}
|
||
/>
|
||
{selectedProvider?.apiBase && formData.api_base === selectedProvider.apiBase && (
|
||
<p className="text-xs text-green-600 flex items-center gap-1">
|
||
<CheckCircle className="h-3 w-3" />
|
||
Using recommended API endpoint for {selectedProvider.label}
|
||
</p>
|
||
)}
|
||
{selectedProvider?.apiBase && !formData.api_base && (
|
||
<p className="text-xs text-amber-600 flex items-center gap-1">
|
||
<AlertCircle className="h-3 w-3" />
|
||
⚠️ API Base URL is required for {selectedProvider.label}. Click to auto-fill:
|
||
<button
|
||
type="button"
|
||
className="underline font-medium"
|
||
onClick={() => handleInputChange("api_base", selectedProvider.apiBase || "")}
|
||
>
|
||
{selectedProvider.apiBase}
|
||
</button>
|
||
</p>
|
||
)}
|
||
{/* Ollama-specific help */}
|
||
{formData.provider === "OLLAMA" && (
|
||
<div className="mt-2 p-3 bg-muted/50 rounded-lg border border-muted">
|
||
<p className="text-xs font-medium mb-2">💡 Ollama API Base URL Examples:</p>
|
||
<div className="space-y-1.5">
|
||
<button
|
||
type="button"
|
||
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||
onClick={() => handleInputChange("api_base", "http://localhost:11434")}
|
||
>
|
||
<code className="px-1.5 py-0.5 bg-background rounded border">
|
||
http://localhost:11434
|
||
</code>
|
||
<span>— Standard local installation</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||
onClick={() =>
|
||
handleInputChange("api_base", "http://host.docker.internal:11434")
|
||
}
|
||
>
|
||
<code className="px-1.5 py-0.5 bg-background rounded border">
|
||
http://host.docker.internal:11434
|
||
</code>
|
||
<span>— If using SurfSense Docker image</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Optional Inference Parameters */}
|
||
<div className="pt-4">
|
||
<InferenceParamsEditor
|
||
params={formData.litellm_params || {}}
|
||
setParams={(newParams) =>
|
||
setFormData((prev) => ({ ...prev, litellm_params: newParams }))
|
||
}
|
||
/>
|
||
</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: "" as LLMConfig["provider"],
|
||
custom_provider: "",
|
||
model_name: "",
|
||
api_key: "",
|
||
api_base: "",
|
||
language: "",
|
||
litellm_params: {},
|
||
search_space_id: searchSpaceId,
|
||
});
|
||
}}
|
||
disabled={isSubmitting}
|
||
>
|
||
Cancel
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* Delete Confirmation Dialog */}
|
||
<AlertDialog
|
||
open={!!configToDelete}
|
||
onOpenChange={(open) => !open && setConfigToDelete(null)}
|
||
>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle className="flex items-center gap-2">
|
||
<Trash2 className="h-5 w-5 text-destructive" />
|
||
Delete Configuration
|
||
</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
Are you sure you want to delete{" "}
|
||
<span className="font-semibold text-foreground">{configToDelete?.name}</span>? This
|
||
action cannot be undone and will permanently remove this model configuration.
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={handleConfirmDelete}
|
||
disabled={isDeleting}
|
||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||
>
|
||
{isDeleting ? (
|
||
<>
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
Deleting...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Trash2 className="mr-2 h-4 w-4" />
|
||
Delete
|
||
</>
|
||
)}
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
);
|
||
}
|