mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-18 21:15:16 +02:00
802 lines
26 KiB
TypeScript
802 lines
26 KiB
TypeScript
"use client";
|
|
|
|
import { useAtom, useAtomValue } from "jotai";
|
|
import {
|
|
Check,
|
|
CheckCircle2,
|
|
ChevronsUpDown,
|
|
Eye,
|
|
EyeOff,
|
|
RefreshCcw,
|
|
Settings,
|
|
Trash2,
|
|
XCircle,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
import {
|
|
addManualModelMutationAtom,
|
|
bulkUpdateModelsMutationAtom,
|
|
createModelConnectionMutationAtom,
|
|
deleteModelConnectionMutationAtom,
|
|
discoverConnectionModelsMutationAtom,
|
|
updateModelConnectionMutationAtom,
|
|
updateModelMutationAtom,
|
|
updateModelRolesMutationAtom,
|
|
verifyModelConnectionMutationAtom,
|
|
} from "@/atoms/model-connections/model-connections-mutation.atoms";
|
|
import {
|
|
globalModelConnectionsAtom,
|
|
modelConnectionsAtom,
|
|
modelProvidersAtom,
|
|
modelRolesAtom,
|
|
} from "@/atoms/model-connections/model-connections-query.atoms";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "@/components/ui/command";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} 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 { Separator } from "@/components/ui/separator";
|
|
import type {
|
|
ConnectionRead,
|
|
ConnectionUpdateRequest,
|
|
ModelRead,
|
|
} from "@/contracts/types/model-connections.types";
|
|
import { getProviderIcon } from "@/lib/provider-icons";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// Free-text URL hints (datalist), mirroring OpenWebUI. These never restrict
|
|
// what the user can type — any OpenAI-compatible endpoint works.
|
|
const URL_SUGGESTIONS = [
|
|
"https://api.openai.com/v1",
|
|
"https://api.anthropic.com/v1",
|
|
"https://openrouter.ai/api/v1",
|
|
"https://generativelanguage.googleapis.com/v1beta/openai",
|
|
"https://api.groq.com/openai/v1",
|
|
"https://api.mistral.ai/v1",
|
|
"https://api.deepseek.com/v1",
|
|
"https://api.x.ai/v1",
|
|
"http://host.docker.internal:11434",
|
|
"http://host.docker.internal:1234/v1",
|
|
"http://host.docker.internal:8000/v1",
|
|
];
|
|
|
|
function modelLabel(model: ModelRead) {
|
|
return model.display_name || model.model_id;
|
|
}
|
|
|
|
function capability(model: ModelRead, key: "chat" | "vision" | "image_gen") {
|
|
if (key === "chat") return Boolean(model.supports_chat);
|
|
if (key === "vision") return Boolean(model.supports_image_input);
|
|
return Boolean(model.supports_image_generation);
|
|
}
|
|
|
|
type ModelCapabilityFilter = "chat" | "vision" | "image_gen";
|
|
|
|
const MODEL_CAPABILITY_FILTERS: { key: ModelCapabilityFilter; label: string }[] = [
|
|
{ key: "chat", label: "Chat" },
|
|
{ key: "vision", label: "Vision" },
|
|
{ key: "image_gen", label: "Image" },
|
|
];
|
|
|
|
function UrlSuggestionCombobox({
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
}: {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder: string;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
className="w-full justify-between bg-transparent font-normal"
|
|
>
|
|
<span className={cn("truncate", !value && "text-muted-foreground")}>
|
|
{value || placeholder}
|
|
</span>
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
|
|
<Command className="bg-transparent">
|
|
<CommandInput
|
|
placeholder="Search or type URL..."
|
|
value={value}
|
|
onValueChange={onChange}
|
|
/>
|
|
<CommandList>
|
|
<CommandEmpty>
|
|
<span className="text-xs text-muted-foreground">Use the custom URL you typed</span>
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{URL_SUGGESTIONS.map((url) => (
|
|
<CommandItem
|
|
key={url}
|
|
value={url}
|
|
onSelect={() => {
|
|
onChange(url);
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
<Check
|
|
className={cn("mr-2 h-4 w-4", value === url ? "opacity-100" : "opacity-0")}
|
|
/>
|
|
<span className="truncate font-mono text-sm">{url}</span>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
function StatusBadge({ connection }: { connection: ConnectionRead }) {
|
|
if (connection.last_status === "OK") {
|
|
return (
|
|
<Badge variant="outline" className="gap-1 text-green-600">
|
|
<CheckCircle2 className="h-3 w-3" /> Healthy
|
|
</Badge>
|
|
);
|
|
}
|
|
if (connection.last_status) {
|
|
return (
|
|
<Badge variant="outline" className="gap-1 text-destructive">
|
|
<XCircle className="h-3 w-3" /> {connection.last_status}
|
|
</Badge>
|
|
);
|
|
}
|
|
return <Badge variant="secondary">Not tested</Badge>;
|
|
}
|
|
|
|
function flattenModels(connections: ConnectionRead[]) {
|
|
return connections.flatMap((connection) =>
|
|
connection.models.map((model) => ({
|
|
...model,
|
|
connectionName: connection.provider,
|
|
connectionId: connection.id,
|
|
provider: connection.provider,
|
|
}))
|
|
);
|
|
}
|
|
|
|
function ConnectionCard({ connection }: { connection: ConnectionRead }) {
|
|
const verifyConnection = useAtomValue(verifyModelConnectionMutationAtom);
|
|
const discoverModels = useAtomValue(discoverConnectionModelsMutationAtom);
|
|
const updateConnection = useAtomValue(updateModelConnectionMutationAtom);
|
|
const deleteConnection = useAtomValue(deleteModelConnectionMutationAtom);
|
|
const addManualModel = useAtomValue(addManualModelMutationAtom);
|
|
const updateModel = useAtomValue(updateModelMutationAtom);
|
|
const bulkUpdateModels = useAtomValue(bulkUpdateModelsMutationAtom);
|
|
|
|
const allowlist = Array.isArray(connection.extra?.model_ids)
|
|
? (connection.extra.model_ids as string[])
|
|
: [];
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
const [baseUrlDraft, setBaseUrlDraft] = useState(connection.base_url ?? "");
|
|
const [apiKeyDraft, setApiKeyDraft] = useState("");
|
|
const [showApiKey, setShowApiKey] = useState(false);
|
|
const [allowlistText, setAllowlistText] = useState(allowlist.join(", "));
|
|
const [manualModelId, setManualModelId] = useState("");
|
|
const [modelFilter, setModelFilter] = useState<ModelCapabilityFilter | null>(null);
|
|
|
|
const providerLabel = connection.provider;
|
|
const isLocal =
|
|
connection.provider === "ollama_chat" ||
|
|
connection.provider === "lm_studio" ||
|
|
!connection.base_url?.startsWith("https");
|
|
const filteredModels = modelFilter
|
|
? connection.models.filter((model) => capability(model, modelFilter))
|
|
: connection.models;
|
|
const allFilteredModelsEnabled =
|
|
filteredModels.length > 0 && filteredModels.every((model) => model.enabled);
|
|
const hasConnectionChanges =
|
|
baseUrlDraft.trim() !== (connection.base_url ?? "") ||
|
|
apiKeyDraft.trim() !== (connection.api_key ?? "");
|
|
|
|
function handleSettingsOpenChange(open: boolean) {
|
|
setIsSettingsOpen(open);
|
|
if (open) {
|
|
setBaseUrlDraft(connection.base_url ?? "");
|
|
setApiKeyDraft(connection.api_key ?? "");
|
|
setShowApiKey(false);
|
|
setAllowlistText(allowlist.join(", "));
|
|
}
|
|
}
|
|
|
|
function saveConnectionSettings() {
|
|
const data: ConnectionUpdateRequest = {
|
|
base_url: baseUrlDraft.trim() || null,
|
|
};
|
|
|
|
if (apiKeyDraft.trim() !== (connection.api_key ?? "")) {
|
|
data.api_key = apiKeyDraft.trim() || null;
|
|
}
|
|
|
|
updateConnection.mutate(
|
|
{ id: connection.id, data },
|
|
{
|
|
onSuccess: () => setApiKeyDraft(""),
|
|
}
|
|
);
|
|
}
|
|
|
|
function saveAllowlist() {
|
|
const ids = allowlistText
|
|
.split(",")
|
|
.map((value) => value.trim())
|
|
.filter(Boolean);
|
|
updateConnection.mutate({
|
|
id: connection.id,
|
|
data: { extra: { ...(connection.extra ?? {}), model_ids: ids } },
|
|
});
|
|
}
|
|
|
|
function addModel() {
|
|
const modelId = manualModelId.trim();
|
|
if (!modelId) return;
|
|
addManualModel.mutate(
|
|
{ connectionId: connection.id, data: { model_id: modelId } },
|
|
{ onSuccess: () => setManualModelId("") }
|
|
);
|
|
}
|
|
|
|
function deleteCurrentConnection() {
|
|
deleteConnection.mutate(connection.id);
|
|
}
|
|
|
|
function toggleFilteredModels() {
|
|
const nextEnabled = !allFilteredModelsEnabled;
|
|
const modelIds = filteredModels
|
|
.filter((model) => model.enabled !== nextEnabled)
|
|
.map((model) => model.id);
|
|
|
|
if (modelIds.length === 0) return;
|
|
|
|
bulkUpdateModels.mutate({
|
|
connectionId: connection.id,
|
|
data: { model_ids: modelIds, enabled: nextEnabled },
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-xl border bg-background p-4 shadow-sm">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2 font-semibold">
|
|
{getProviderIcon(providerLabel, { className: "size-4" })}
|
|
<span className="truncate">{providerLabel}</span>
|
|
{connection.scope === "GLOBAL" ? (
|
|
<Badge variant="outline" className="text-[10px]">
|
|
Default
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
<div className="truncate text-sm text-muted-foreground">
|
|
{connection.base_url || "Provider default endpoint"}
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<StatusBadge connection={connection} />
|
|
<Dialog open={isSettingsOpen} onOpenChange={handleSettingsOpenChange}>
|
|
<DialogTrigger asChild>
|
|
<Button variant="ghost" size="icon" aria-label={`Configure ${providerLabel}`}>
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="flex max-h-[90vh] max-w-3xl flex-col overflow-hidden bg-popover p-0 text-popover-foreground">
|
|
<DialogHeader className="shrink-0 border-b px-6 py-5">
|
|
<div className="flex items-center gap-3">
|
|
{getProviderIcon(providerLabel, { className: "size-5" })}
|
|
<div>
|
|
<DialogTitle>
|
|
Configure <span className="italic">{providerLabel}</span>
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Manage credentials and choose which models are available from this provider.
|
|
</DialogDescription>
|
|
</div>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
|
|
<div className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label>API Base URL</Label>
|
|
<UrlSuggestionCombobox
|
|
value={baseUrlDraft}
|
|
onChange={setBaseUrlDraft}
|
|
placeholder="https://api.example.com/v1"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Leave empty to use the provider default endpoint.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>API Key</Label>
|
|
<div className="relative">
|
|
<Input
|
|
value={apiKeyDraft}
|
|
onChange={(event) => setApiKeyDraft(event.target.value)}
|
|
placeholder={connection.has_api_key ? "Saved API key" : "Paste an API key"}
|
|
type={showApiKey ? "text" : "password"}
|
|
className="pr-11"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute top-1/2 right-1 size-8 -translate-y-1/2 text-muted-foreground"
|
|
onClick={() => setShowApiKey((current) => !current)}
|
|
disabled={!apiKeyDraft}
|
|
aria-label={showApiKey ? "Hide API key" : "Show API key"}
|
|
>
|
|
{showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{!isLocal ? (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">Model IDs filter (optional)</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={allowlistText}
|
|
onChange={(event) => setAllowlistText(event.target.value)}
|
|
placeholder="Comma-separated, e.g. anthropic/claude-sonnet-4-5, google/gemini-2.5-pro"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={saveAllowlist}
|
|
disabled={updateConnection.isPending}
|
|
>
|
|
Save filter
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Leave empty to discover all models. Recommended for providers with large
|
|
catalogs.
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
|
|
<Separator className="bg-muted-foreground/20" />
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<div className="font-semibold">Models</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Select models to make available for this provider.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
type="button"
|
|
onClick={toggleFilteredModels}
|
|
disabled={bulkUpdateModels.isPending || filteredModels.length === 0}
|
|
>
|
|
{allFilteredModelsEnabled ? "Deselect All" : "Select All"}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => discoverModels.mutate(connection.id)}
|
|
disabled={discoverModels.isPending}
|
|
aria-label={`Refresh ${providerLabel} models`}
|
|
>
|
|
<RefreshCcw className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={manualModelId}
|
|
onChange={(event) => setManualModelId(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
addModel();
|
|
}
|
|
}}
|
|
placeholder="Add a model ID manually"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={addModel}
|
|
disabled={addManualModel.isPending || !manualModelId.trim()}
|
|
>
|
|
Add model
|
|
</Button>
|
|
</div>
|
|
|
|
{connection.models.length > 0 ? (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Filter models
|
|
</span>
|
|
{MODEL_CAPABILITY_FILTERS.map((filter) => {
|
|
const count = connection.models.filter((model) =>
|
|
capability(model, filter.key)
|
|
).length;
|
|
const isActive = modelFilter === filter.key;
|
|
|
|
return (
|
|
<Button
|
|
key={filter.key}
|
|
type="button"
|
|
variant={isActive ? "secondary" : "outline"}
|
|
size="sm"
|
|
className="h-7 rounded-full px-3 text-xs"
|
|
onClick={() => setModelFilter(isActive ? null : filter.key)}
|
|
>
|
|
{filter.label}
|
|
<span className="ml-1 text-muted-foreground">{count}</span>
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="max-h-80 overflow-y-auto rounded-xl border bg-muted/20 p-2">
|
|
{connection.models.length === 0 ? (
|
|
<div className="rounded-lg px-3 py-6 text-center text-sm text-muted-foreground">
|
|
No models yet. Use the refresh button to discover models or add one
|
|
manually.
|
|
</div>
|
|
) : null}
|
|
{filteredModels.length === 0 && modelFilter ? (
|
|
<div className="rounded-lg px-3 py-6 text-center text-sm text-muted-foreground">
|
|
No{" "}
|
|
{MODEL_CAPABILITY_FILTERS.find(
|
|
(filter) => filter.key === modelFilter
|
|
)?.label.toLowerCase()}{" "}
|
|
models found on this connection.
|
|
</div>
|
|
) : null}
|
|
<div className="space-y-2">
|
|
{filteredModels.map((model) => (
|
|
<div
|
|
key={model.id}
|
|
className="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-background"
|
|
>
|
|
<Checkbox
|
|
checked={model.enabled}
|
|
onCheckedChange={(checked) =>
|
|
updateModel.mutate({
|
|
id: model.id,
|
|
data: { enabled: checked === true },
|
|
})
|
|
}
|
|
disabled={updateModel.isPending}
|
|
/>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 text-sm font-medium">
|
|
<span className="truncate">{modelLabel(model)}</span>
|
|
{model.source === "MANUAL" ? (
|
|
<Badge variant="outline" className="text-[10px]">
|
|
manual
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{["chat", "vision", "image_gen"]
|
|
.filter((key) =>
|
|
capability(model, key as "chat" | "vision" | "image_gen")
|
|
)
|
|
.join(", ") || "No discovered capabilities"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{connection.last_status && connection.last_status !== "OK" ? (
|
|
<p className="rounded-lg bg-amber-500/10 px-3 py-2 text-sm text-amber-600 dark:text-amber-500">
|
|
{connection.last_error || "Could not list models."} Chat may still work; add
|
|
model IDs manually if discovery is unavailable.
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="shrink-0 border-t bg-popover px-6 py-4">
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => verifyConnection.mutate(connection.id)}
|
|
disabled={verifyConnection.isPending}
|
|
>
|
|
Test
|
|
</Button>
|
|
<Button
|
|
onClick={saveConnectionSettings}
|
|
disabled={updateConnection.isPending || !hasConnectionChanges}
|
|
>
|
|
Update
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
disabled={deleteConnection.isPending}
|
|
aria-label={`Delete ${providerLabel}`}
|
|
>
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete this provider?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
<span className="font-medium text-foreground">{providerLabel}</span> and all of
|
|
its models will be removed from this search space. This cannot be undone.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={deleteConnection.isPending}>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={deleteCurrentConnection}
|
|
disabled={deleteConnection.isPending}
|
|
className="bg-destructive text-white hover:bg-destructive/90"
|
|
>
|
|
Delete
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ModelConnectionsSettings({ searchSpaceId }: { searchSpaceId: number }) {
|
|
const [{ data: globalConnections = [] }] = useAtom(globalModelConnectionsAtom);
|
|
const [{ data: connections = [] }] = useAtom(modelConnectionsAtom);
|
|
const [{ data: providers = [] }] = useAtom(modelProvidersAtom);
|
|
const [{ data: roles }] = useAtom(modelRolesAtom);
|
|
const createConnection = useAtomValue(createModelConnectionMutationAtom);
|
|
const updateRoles = useAtomValue(updateModelRolesMutationAtom);
|
|
|
|
const [provider, setProvider] = useState("openai_compatible");
|
|
const [baseUrl, setBaseUrl] = useState("");
|
|
const [apiKey, setApiKey] = useState("");
|
|
const selectedProvider = providers.find((item) => item.provider === provider);
|
|
const isOllama = provider === "ollama_chat";
|
|
|
|
const allConnections = [...globalConnections, ...connections];
|
|
const enabledModels = flattenModels(allConnections).filter((model) => model.enabled);
|
|
const chatModels = enabledModels.filter((model) => capability(model, "chat"));
|
|
const visionModels = enabledModels.filter((model) => capability(model, "vision"));
|
|
const imageModels = enabledModels.filter((model) => capability(model, "image_gen"));
|
|
|
|
function handleCreate() {
|
|
createConnection.mutate(
|
|
{
|
|
provider,
|
|
base_url: baseUrl || null,
|
|
api_key: apiKey || null,
|
|
scope: "SEARCH_SPACE",
|
|
search_space_id: searchSpaceId,
|
|
extra: {},
|
|
enabled: true,
|
|
},
|
|
{ onSuccess: () => setApiKey("") }
|
|
);
|
|
}
|
|
|
|
function renderModelOption(model: ModelRead & { connectionName: string; provider: string }) {
|
|
return (
|
|
<SelectItem key={model.id} value={String(model.id)}>
|
|
<span className="inline-flex items-center gap-2">
|
|
{getProviderIcon(model.provider, { className: "size-4" })}
|
|
{modelLabel(model)} · {model.connectionName}
|
|
</span>
|
|
</SelectItem>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Model Connections</CardTitle>
|
|
<CardDescription>
|
|
Add credentials or local endpoints once, then discover reusable models.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="grid gap-3 md:grid-cols-[220px_1fr_1fr_auto]">
|
|
<div className="space-y-2">
|
|
<Label>Provider</Label>
|
|
<Select
|
|
value={provider}
|
|
onValueChange={(value) => {
|
|
setProvider(value);
|
|
const next = providers.find((item) => item.provider === value);
|
|
if (next?.default_base_url) setBaseUrl(next.default_base_url);
|
|
}}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{providers.map((item) => (
|
|
<SelectItem key={item.provider} value={item.provider}>
|
|
{item.provider}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Base URL</Label>
|
|
<UrlSuggestionCombobox
|
|
value={baseUrl}
|
|
onChange={setBaseUrl}
|
|
placeholder={
|
|
isOllama ? "http://host.docker.internal:11434" : "https://api.example.com/v1"
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>{isOllama ? "API Key (optional)" : "API Key"}</Label>
|
|
<Input
|
|
value={apiKey}
|
|
onChange={(event) => setApiKey(event.target.value)}
|
|
placeholder={isOllama ? "Optional for Ollama" : "API key"}
|
|
type="password"
|
|
/>
|
|
</div>
|
|
<div className="flex items-end">
|
|
<Button
|
|
onClick={handleCreate}
|
|
disabled={
|
|
createConnection.isPending ||
|
|
Boolean(selectedProvider?.base_url_required && !baseUrl.trim())
|
|
}
|
|
>
|
|
Add
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="text-xs text-muted-foreground">
|
|
{selectedProvider
|
|
? `${selectedProvider.transport} transport, ${selectedProvider.discovery} discovery.`
|
|
: "Choose a provider preset."}{" "}
|
|
Base URL is explicit and editable. Local URLs are tested from the backend container,
|
|
so use host.docker.internal instead of localhost.
|
|
</p>
|
|
</div>
|
|
|
|
{connections.length > 0 ? (
|
|
<div className="flex flex-col gap-3">
|
|
<Separator />
|
|
<h3 className="text-sm font-semibold">Available Providers</h3>
|
|
<div className="flex flex-col gap-3">
|
|
{connections.map((connection) => (
|
|
<ConnectionCard key={connection.id} connection={connection} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Model Roles</CardTitle>
|
|
<CardDescription>
|
|
Pick which enabled model powers chat, vision, and image generation for this search
|
|
space.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4 md:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<Label>Chat model</Label>
|
|
<Select
|
|
value={String(roles?.chat_model_id ?? 0)}
|
|
onValueChange={(value) => updateRoles.mutate({ chat_model_id: Number(value) })}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="0">Auto</SelectItem>
|
|
{chatModels.map(renderModelOption)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Vision</Label>
|
|
<Select
|
|
value={String(roles?.vision_model_id ?? 0)}
|
|
onValueChange={(value) => updateRoles.mutate({ vision_model_id: Number(value) })}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="0">Auto / use chat model when possible</SelectItem>
|
|
{visionModels.map(renderModelOption)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Image generation</Label>
|
|
<Select
|
|
value={String(roles?.image_gen_model_id ?? 0)}
|
|
onValueChange={(value) => updateRoles.mutate({ image_gen_model_id: Number(value) })}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="0">Auto / None</SelectItem>
|
|
{imageModels.map(renderModelOption)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|