mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-12 20:45:20 +02:00
feat(model-connections): add provider-specific connection forms and shared components
This commit is contained in:
Anish Sarkar
parent
ced1bb85ed
commit
356f0e56c5
15 changed files with 1423 additions and 574 deletions
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
import {
|
||||
BookText,
|
||||
Bot,
|
||||
CircleUser,
|
||||
Cpu,
|
||||
Earth,
|
||||
UserKey,
|
||||
} from "lucide-react";
|
||||
|
|
@ -54,7 +54,7 @@ export function SearchSpaceSettingsLayoutShell({
|
|||
{
|
||||
value: "models" as const,
|
||||
label: t("nav_models"),
|
||||
icon: <Bot className="h-4 w-4" />,
|
||||
icon: <Cpu className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
value: "team-roles" as const,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { Bot, Check, ChevronDown } from "lucide-react";
|
||||
import { Check, ChevronDown, Cpu } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
|
@ -82,7 +82,7 @@ export function FreeModelSelector({ className }: { className?: string }) {
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<Bot className="size-4 text-muted-foreground" />
|
||||
<Cpu className="size-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">Select Model</span>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useAtom, useAtomValue } from "jotai";
|
||||
import { Bot, Check, ChevronDown, ImageOff, Search, Settings2, Zap } from "lucide-react";
|
||||
import { Check, ChevronDown, Cpu, ImageOff, Search, Settings2, Zap } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { updateModelRolesMutationAtom } from "@/atoms/model-connections/model-connections-mutation.atoms";
|
||||
import {
|
||||
|
|
@ -222,7 +222,7 @@ export function ModelSelector({
|
|||
{selected ? (
|
||||
getProviderIcon(selected.provider, { className: "size-4" })
|
||||
) : (
|
||||
<Bot className="h-4 w-4" />
|
||||
<Cpu className="h-4 w-4" />
|
||||
)}
|
||||
<span className="max-w-[180px] truncate text-sm">
|
||||
{selected ? modelName(selected) : "Auto"}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useAtom, useAtomValue } from "jotai";
|
||||
import {
|
||||
Check,
|
||||
CheckCircle2,
|
||||
ChevronsUpDown,
|
||||
Eye,
|
||||
EyeOff,
|
||||
RefreshCcw,
|
||||
Settings,
|
||||
Trash2,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { CheckCircle2, Trash2, XCircle } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
addManualModelMutationAtom,
|
||||
|
|
@ -19,10 +9,8 @@ import {
|
|||
createModelConnectionMutationAtom,
|
||||
deleteModelConnectionMutationAtom,
|
||||
discoverConnectionModelsMutationAtom,
|
||||
updateModelConnectionMutationAtom,
|
||||
updateModelMutationAtom,
|
||||
updateModelRolesMutationAtom,
|
||||
verifyModelConnectionMutationAtom,
|
||||
} from "@/atoms/model-connections/model-connections-mutation.atoms";
|
||||
import {
|
||||
globalModelConnectionsAtom,
|
||||
|
|
@ -44,27 +32,7 @@ import {
|
|||
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,
|
||||
|
|
@ -73,108 +41,16 @@ import {
|
|||
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>
|
||||
);
|
||||
}
|
||||
import type { ConnectionRead, ModelRead } from "@/contracts/types/model-connections.types";
|
||||
import { ConnectionSettingsDialog } from "./model-connections/connection-settings-dialog";
|
||||
import { capability, modelLabel } from "./model-connections/model-utils";
|
||||
import { ProviderConnectDialog } from "./model-connections/provider-connect-dialog";
|
||||
import {
|
||||
type ConnectionDraft,
|
||||
PROVIDER_ORDER,
|
||||
providerDisplay,
|
||||
providerIcon,
|
||||
} from "./model-connections/provider-metadata";
|
||||
|
||||
function StatusBadge({ connection }: { connection: ConnectionRead }) {
|
||||
if (connection.last_status === "OK") {
|
||||
|
|
@ -198,7 +74,7 @@ function flattenModels(connections: ConnectionRead[]) {
|
|||
return connections.flatMap((connection) =>
|
||||
connection.models.map((model) => ({
|
||||
...model,
|
||||
connectionName: connection.provider,
|
||||
connectionName: providerDisplay(connection.provider).name,
|
||||
connectionId: connection.id,
|
||||
provider: connection.provider,
|
||||
}))
|
||||
|
|
@ -206,110 +82,21 @@ function flattenModels(connections: ConnectionRead[]) {
|
|||
}
|
||||
|
||||
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("") }
|
||||
);
|
||||
}
|
||||
const providerMeta = providerDisplay(connection.provider);
|
||||
const providerLabel = providerMeta.name;
|
||||
|
||||
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="rounded-lg border border-border/60 overflow-hidden">
|
||||
<div className="flex items-center justify-between gap-3 p-4 transition-colors hover:bg-accent hover:text-accent-foreground">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 font-semibold">
|
||||
{getProviderIcon(providerLabel, { className: "size-4" })}
|
||||
{providerIcon(connection.provider)}
|
||||
<span className="truncate">{providerLabel}</span>
|
||||
{connection.scope === "GLOBAL" ? (
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
|
|
@ -323,253 +110,7 @@ function ConnectionCard({ connection }: { connection: ConnectionRead }) {
|
|||
</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>
|
||||
<ConnectionSettingsDialog connection={connection} providerLabel={providerLabel} />
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
|
|
@ -613,13 +154,29 @@ export function ModelConnectionsSettings({ searchSpaceId }: { searchSpaceId: num
|
|||
const [{ data: providers = [] }] = useAtom(modelProvidersAtom);
|
||||
const [{ data: roles }] = useAtom(modelRolesAtom);
|
||||
const createConnection = useAtomValue(createModelConnectionMutationAtom);
|
||||
const addManualModel = useAtomValue(addManualModelMutationAtom);
|
||||
const discoverModels = useAtomValue(discoverConnectionModelsMutationAtom);
|
||||
const updateModel = useAtomValue(updateModelMutationAtom);
|
||||
const bulkUpdateModels = useAtomValue(bulkUpdateModelsMutationAtom);
|
||||
const updateRoles = useAtomValue(updateModelRolesMutationAtom);
|
||||
|
||||
const [isAddProviderOpen, setIsAddProviderOpen] = useState(false);
|
||||
const [provider, setProvider] = useState("openai_compatible");
|
||||
const [baseUrl, setBaseUrl] = useState("");
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
const [connectedConnection, setConnectedConnection] = useState<ConnectionRead | null>(null);
|
||||
const [connectModels, setConnectModels] = useState<ModelRead[]>([]);
|
||||
const selectedProvider = providers.find((item) => item.provider === provider);
|
||||
const isOllama = provider === "ollama_chat";
|
||||
|
||||
const sortedProviders = [...providers].sort((left, right) => {
|
||||
const leftIndex = PROVIDER_ORDER.indexOf(left.provider);
|
||||
const rightIndex = PROVIDER_ORDER.indexOf(right.provider);
|
||||
if (leftIndex !== -1 || rightIndex !== -1) {
|
||||
return (
|
||||
(leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex) -
|
||||
(rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex)
|
||||
);
|
||||
}
|
||||
return providerDisplay(left.provider).name.localeCompare(providerDisplay(right.provider).name);
|
||||
});
|
||||
|
||||
const allConnections = [...globalConnections, ...connections];
|
||||
const enabledModels = flattenModels(allConnections).filter((model) => model.enabled);
|
||||
|
|
@ -627,26 +184,116 @@ export function ModelConnectionsSettings({ searchSpaceId }: { searchSpaceId: num
|
|||
const visionModels = enabledModels.filter((model) => capability(model, "vision"));
|
||||
const imageModels = enabledModels.filter((model) => capability(model, "image_gen"));
|
||||
|
||||
function handleCreate() {
|
||||
function resetConnectState() {
|
||||
setConnectedConnection(null);
|
||||
setConnectModels([]);
|
||||
}
|
||||
|
||||
function handleConnectOpenChange(open: boolean) {
|
||||
setIsAddProviderOpen(open);
|
||||
if (!open) {
|
||||
resetConnectState();
|
||||
}
|
||||
}
|
||||
|
||||
function replaceConnectModels(updatedModels: ModelRead[]) {
|
||||
setConnectModels((current) =>
|
||||
current.map((model) => updatedModels.find((updated) => updated.id === model.id) ?? model)
|
||||
);
|
||||
}
|
||||
|
||||
// Each provider connect form builds its own credential payload; the backend
|
||||
// resolver (`to_litellm`) forwards `extra.litellm_params` straight to LiteLLM.
|
||||
function handleCreate(draft: ConnectionDraft) {
|
||||
createConnection.mutate(
|
||||
{
|
||||
provider,
|
||||
base_url: baseUrl || null,
|
||||
api_key: apiKey || null,
|
||||
base_url: draft.base_url,
|
||||
api_key: draft.api_key,
|
||||
scope: "SEARCH_SPACE",
|
||||
search_space_id: searchSpaceId,
|
||||
extra: {},
|
||||
extra: draft.extra,
|
||||
enabled: true,
|
||||
},
|
||||
{ onSuccess: () => setApiKey("") }
|
||||
{
|
||||
onSuccess: (created) => {
|
||||
setConnectedConnection(created);
|
||||
setConnectModels([]);
|
||||
if (draft.seedModelId) {
|
||||
addManualModel.mutate(
|
||||
{
|
||||
connectionId: created.id,
|
||||
data: { model_id: draft.seedModelId },
|
||||
},
|
||||
{
|
||||
onSuccess: (model) => setConnectModels([model]),
|
||||
}
|
||||
);
|
||||
} else {
|
||||
discoverModels.mutate(created.id, {
|
||||
onSuccess: (models) => setConnectModels(models),
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function openProviderDialog(providerId: string) {
|
||||
resetConnectState();
|
||||
setProvider(providerId);
|
||||
setIsAddProviderOpen(true);
|
||||
}
|
||||
|
||||
function refreshConnectModels() {
|
||||
if (!connectedConnection) return;
|
||||
discoverModels.mutate(connectedConnection.id, {
|
||||
onSuccess: (models) => setConnectModels(models),
|
||||
});
|
||||
}
|
||||
|
||||
function addConnectModel(modelId: string) {
|
||||
if (!connectedConnection) return;
|
||||
addManualModel.mutate(
|
||||
{ connectionId: connectedConnection.id, data: { model_id: modelId } },
|
||||
{
|
||||
onSuccess: (model) => setConnectModels((current) => [...current, model]),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function toggleConnectModel(model: ModelRead, enabled: boolean) {
|
||||
updateModel.mutate(
|
||||
{ id: model.id, data: { enabled } },
|
||||
{
|
||||
onSuccess: (updated) => replaceConnectModels([updated]),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function bulkToggleConnectModels(models: ModelRead[], enabled: boolean) {
|
||||
if (!connectedConnection) return;
|
||||
bulkUpdateModels.mutate(
|
||||
{
|
||||
connectionId: connectedConnection.id,
|
||||
data: { model_ids: models.map((model) => model.id), enabled },
|
||||
},
|
||||
{
|
||||
onSuccess: replaceConnectModels,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function finishConnectFlow() {
|
||||
setIsAddProviderOpen(false);
|
||||
resetConnectState();
|
||||
}
|
||||
|
||||
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" })}
|
||||
{providerIcon(model.provider)}
|
||||
{modelLabel(model)} · {model.connectionName}
|
||||
</span>
|
||||
</SelectItem>
|
||||
|
|
@ -655,91 +302,76 @@ export function ModelConnectionsSettings({ searchSpaceId }: { searchSpaceId: num
|
|||
|
||||
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">
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">Add Provider</h3>
|
||||
<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.
|
||||
SurfSense supports popular providers and self-hosted model endpoints.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{sortedProviders.map((item) => {
|
||||
const meta = providerDisplay(item.provider);
|
||||
|
||||
{connections.length > 0 ? (
|
||||
return (
|
||||
<Button
|
||||
key={item.provider}
|
||||
variant="ghost"
|
||||
type="button"
|
||||
className="h-auto justify-between gap-3 rounded-lg border border-border/60 p-4 text-left whitespace-normal transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
onClick={() => openProviderDialog(item.provider)}
|
||||
>
|
||||
<span className="flex min-w-0 items-center gap-3">
|
||||
{providerIcon(item.provider, "size-5")}
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-sm font-semibold">{meta.name}</span>
|
||||
<span className="block truncate text-xs text-muted-foreground">
|
||||
{meta.subtitle}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="shrink-0 text-sm font-medium text-muted-foreground">
|
||||
Connect
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProviderConnectDialog
|
||||
open={isAddProviderOpen}
|
||||
onOpenChange={handleConnectOpenChange}
|
||||
provider={provider}
|
||||
selectedProvider={selectedProvider}
|
||||
isPending={createConnection.isPending}
|
||||
onSubmit={handleCreate}
|
||||
connectedConnection={connectedConnection}
|
||||
connectModels={connectModels}
|
||||
isDiscoveringModels={discoverModels.isPending}
|
||||
isAddingManualModel={addManualModel.isPending}
|
||||
isUpdatingModel={updateModel.isPending}
|
||||
isBulkUpdatingModels={bulkUpdateModels.isPending}
|
||||
onRefreshModels={refreshConnectModels}
|
||||
onAddManualModel={addConnectModel}
|
||||
onToggleModel={toggleConnectModel}
|
||||
onBulkToggleModels={bulkToggleConnectModels}
|
||||
onDone={finishConnectFlow}
|
||||
/>
|
||||
|
||||
{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">
|
||||
<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>
|
||||
{connections.map((connection) => (
|
||||
<ConnectionCard key={connection.id} connection={connection} />
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
import { useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { ApiKeyField, ConnectFormFooter } from "./connect-fields";
|
||||
import {
|
||||
isValidAzureTargetUri,
|
||||
type ProviderConnectFormProps,
|
||||
parseAzureTargetUri,
|
||||
} from "./provider-metadata";
|
||||
|
||||
/**
|
||||
* Azure OpenAI connect form. The user pastes a single Target URI, which we parse
|
||||
* into api base, api version, and the deployment name (seeded as the model).
|
||||
*/
|
||||
export function AzureConnectForm({ isPending, onCancel, onSubmit }: ProviderConnectFormProps) {
|
||||
const [targetUri, setTargetUri] = useState("");
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
const canSubmit = isValidAzureTargetUri(targetUri) && Boolean(apiKey.trim());
|
||||
|
||||
function handleSubmit() {
|
||||
const parsed = parseAzureTargetUri(targetUri);
|
||||
onSubmit({
|
||||
base_url: parsed?.origin ?? null,
|
||||
api_key: apiKey || null,
|
||||
extra: parsed?.apiVersion ? { api_version: parsed.apiVersion } : {},
|
||||
seedModelId: parsed?.deploymentName || undefined,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Target URI</Label>
|
||||
<Input
|
||||
value={targetUri}
|
||||
onChange={(event) => setTargetUri(event.target.value)}
|
||||
placeholder="https://your-resource.cognitiveservices.azure.com/openai/deployments/deployment-name/chat/completions?api-version=2025-01-01-preview"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Paste your endpoint target URI from Azure OpenAI (including API base, deployment name,
|
||||
and API version).
|
||||
</p>
|
||||
</div>
|
||||
<ApiKeyField
|
||||
value={apiKey}
|
||||
onChange={setApiKey}
|
||||
placeholder="Paste your API key from Azure"
|
||||
/>
|
||||
</div>
|
||||
<ConnectFormFooter
|
||||
onCancel={onCancel}
|
||||
onSubmit={handleSubmit}
|
||||
canSubmit={canSubmit}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
import { useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { ConnectFormFooter } from "./connect-fields";
|
||||
import {
|
||||
AWS_REGION_OPTIONS,
|
||||
BEDROCK_AUTH_ACCESS_KEY,
|
||||
BEDROCK_AUTH_IAM,
|
||||
BEDROCK_AUTH_LONG_TERM_API_KEY,
|
||||
type ProviderConnectFormProps,
|
||||
} from "./provider-metadata";
|
||||
|
||||
/**
|
||||
* Amazon Bedrock connect form. Region + auth method drive which AWS credentials
|
||||
* are collected; everything rides along in `extra.litellm_params`.
|
||||
*/
|
||||
export function BedrockConnectForm({ isPending, onCancel, onSubmit }: ProviderConnectFormProps) {
|
||||
const [region, setRegion] = useState("");
|
||||
const [authMethod, setAuthMethod] = useState(BEDROCK_AUTH_ACCESS_KEY);
|
||||
const [accessKeyId, setAccessKeyId] = useState("");
|
||||
const [secretAccessKey, setSecretAccessKey] = useState("");
|
||||
const [bearerToken, setBearerToken] = useState("");
|
||||
|
||||
const canSubmit = (() => {
|
||||
if (!region) return false;
|
||||
if (authMethod === BEDROCK_AUTH_ACCESS_KEY) {
|
||||
return Boolean(accessKeyId && secretAccessKey);
|
||||
}
|
||||
if (authMethod === BEDROCK_AUTH_LONG_TERM_API_KEY) {
|
||||
return Boolean(bearerToken);
|
||||
}
|
||||
return true;
|
||||
})();
|
||||
|
||||
function handleSubmit() {
|
||||
const params: Record<string, string> = { aws_region_name: region };
|
||||
if (authMethod === BEDROCK_AUTH_ACCESS_KEY) {
|
||||
params.aws_access_key_id = accessKeyId;
|
||||
params.aws_secret_access_key = secretAccessKey;
|
||||
} else if (authMethod === BEDROCK_AUTH_LONG_TERM_API_KEY) {
|
||||
params.aws_bearer_token_bedrock = bearerToken;
|
||||
}
|
||||
onSubmit({ base_url: null, api_key: null, extra: { litellm_params: params } });
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>AWS Region</Label>
|
||||
<Select value={region || undefined} onValueChange={setRegion}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a region" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{AWS_REGION_OPTIONS.map((option) => (
|
||||
<SelectItem key={option} value={option}>
|
||||
{option}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Authentication Method</Label>
|
||||
<Select value={authMethod} onValueChange={setAuthMethod}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={BEDROCK_AUTH_IAM}>Environment IAM Role</SelectItem>
|
||||
<SelectItem value={BEDROCK_AUTH_ACCESS_KEY}>Access Key</SelectItem>
|
||||
<SelectItem value={BEDROCK_AUTH_LONG_TERM_API_KEY}>Long-term API Key</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{authMethod === BEDROCK_AUTH_ACCESS_KEY ? (
|
||||
<>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>AWS Access Key ID</Label>
|
||||
<Input
|
||||
value={accessKeyId}
|
||||
onChange={(event) => setAccessKeyId(event.target.value)}
|
||||
placeholder="AKIAIOSFODNN7EXAMPLE"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>AWS Secret Access Key</Label>
|
||||
<Input
|
||||
value={secretAccessKey}
|
||||
onChange={(event) => setSecretAccessKey(event.target.value)}
|
||||
placeholder="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
{authMethod === BEDROCK_AUTH_LONG_TERM_API_KEY ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Long-term API Key</Label>
|
||||
<Input
|
||||
value={bearerToken}
|
||||
onChange={(event) => setBearerToken(event.target.value)}
|
||||
placeholder="Your long-term API key"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{authMethod === BEDROCK_AUTH_IAM ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
SurfSense will use the IAM role attached to the environment it's running in to
|
||||
authenticate.
|
||||
</p>
|
||||
) : null}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Add Bedrock model IDs from the provider's settings after connecting.
|
||||
</p>
|
||||
</div>
|
||||
<ConnectFormFooter
|
||||
onCancel={onCancel}
|
||||
onSubmit={handleSubmit}
|
||||
canSubmit={canSubmit}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { DialogFooter } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface ApiBaseUrlFieldProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
optional?: boolean;
|
||||
/** Placeholder, typically the provider's prefilled default base URL. */
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/** Shared API Base URL input. The prefilled default is passed in via `value`. */
|
||||
export function ApiBaseUrlField({ value, onChange, optional, placeholder }: ApiBaseUrlFieldProps) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>API Base URL{optional ? " (optional)" : ""}</Label>
|
||||
<Input
|
||||
value={value}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder={placeholder || "https://api.example.com/v1"}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Local URLs are tested from the backend container, so use host.docker.internal instead of
|
||||
localhost.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ApiKeyFieldProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/** Shared masked API Key input. */
|
||||
export function ApiKeyField({
|
||||
value,
|
||||
onChange,
|
||||
label = "API Key",
|
||||
placeholder = "API key",
|
||||
}: ApiKeyFieldProps) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>{label}</Label>
|
||||
<Input
|
||||
value={value}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder={placeholder}
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ConnectFormFooterProps {
|
||||
onCancel: () => void;
|
||||
onSubmit: () => void;
|
||||
canSubmit: boolean;
|
||||
isPending: boolean;
|
||||
}
|
||||
|
||||
/** Shared Cancel / Connect footer for every provider connect form. */
|
||||
export function ConnectFormFooter({
|
||||
onCancel,
|
||||
onSubmit,
|
||||
canSubmit,
|
||||
isPending,
|
||||
}: ConnectFormFooterProps) {
|
||||
return (
|
||||
<DialogFooter className="mt-6">
|
||||
<Button variant="secondary" onClick={onCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={onSubmit} disabled={isPending || !canSubmit}>
|
||||
Connect
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
import { useAtomValue } from "jotai";
|
||||
import { Eye, EyeOff, Settings } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
addManualModelMutationAtom,
|
||||
bulkUpdateModelsMutationAtom,
|
||||
discoverConnectionModelsMutationAtom,
|
||||
updateModelConnectionMutationAtom,
|
||||
updateModelMutationAtom,
|
||||
verifyModelConnectionMutationAtom,
|
||||
} from "@/atoms/model-connections/model-connections-mutation.atoms";
|
||||
import { Button } from "@/components/ui/button";
|
||||
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 { Separator } from "@/components/ui/separator";
|
||||
import type {
|
||||
ConnectionRead,
|
||||
ConnectionUpdateRequest,
|
||||
ModelRead,
|
||||
} from "@/contracts/types/model-connections.types";
|
||||
import { ModelsSelectionPanel } from "./models-selection-panel";
|
||||
import { providerIcon } from "./provider-metadata";
|
||||
|
||||
interface ConnectionSettingsDialogProps {
|
||||
connection: ConnectionRead;
|
||||
providerLabel: string;
|
||||
}
|
||||
|
||||
export function ConnectionSettingsDialog({
|
||||
connection,
|
||||
providerLabel,
|
||||
}: ConnectionSettingsDialogProps) {
|
||||
const verifyConnection = useAtomValue(verifyModelConnectionMutationAtom);
|
||||
const discoverModels = useAtomValue(discoverConnectionModelsMutationAtom);
|
||||
const updateConnection = useAtomValue(updateModelConnectionMutationAtom);
|
||||
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 [isOpen, setIsOpen] = 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 isLocal =
|
||||
connection.provider === "ollama_chat" ||
|
||||
connection.provider === "lm_studio" ||
|
||||
!connection.base_url?.startsWith("https");
|
||||
const hasConnectionChanges =
|
||||
baseUrlDraft.trim() !== (connection.base_url ?? "") ||
|
||||
apiKeyDraft.trim() !== (connection.api_key ?? "");
|
||||
|
||||
function handleOpenChange(open: boolean) {
|
||||
setIsOpen(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 handleToggleModel(model: ModelRead, enabled: boolean) {
|
||||
updateModel.mutate({
|
||||
id: model.id,
|
||||
data: { enabled },
|
||||
});
|
||||
}
|
||||
|
||||
function handleBulkToggle(models: ModelRead[], enabled: boolean) {
|
||||
bulkUpdateModels.mutate({
|
||||
connectionId: connection.id,
|
||||
data: { model_ids: models.map((model) => model.id), enabled },
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
||||
<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">
|
||||
{providerIcon(connection.provider, "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>
|
||||
<Input
|
||||
value={baseUrlDraft}
|
||||
onChange={(event) => setBaseUrlDraft(event.target.value)}
|
||||
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" />
|
||||
|
||||
<ModelsSelectionPanel
|
||||
models={connection.models}
|
||||
isRefreshing={discoverModels.isPending}
|
||||
isAddingManual={addManualModel.isPending}
|
||||
isUpdatingModel={updateModel.isPending}
|
||||
isBulkUpdating={bulkUpdateModels.isPending}
|
||||
refreshLabel={`Refresh ${providerLabel} models`}
|
||||
onRefresh={() => discoverModels.mutate(connection.id)}
|
||||
onAddManual={(modelId) =>
|
||||
addManualModel.mutate({
|
||||
connectionId: connection.id,
|
||||
data: { model_id: modelId },
|
||||
})
|
||||
}
|
||||
onToggleModel={handleToggleModel}
|
||||
onBulkToggle={handleBulkToggle}
|
||||
/>
|
||||
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { useState } from "react";
|
||||
import { ApiBaseUrlField, ApiKeyField, ConnectFormFooter } from "./connect-fields";
|
||||
import type { ProviderConnectFormProps } from "./provider-metadata";
|
||||
|
||||
/**
|
||||
* Connect form for OpenAI-compatible / native key providers (OpenAI, Anthropic,
|
||||
* OpenRouter, OpenAI-Compatible, LM Studio, Ollama, …). The base URL is
|
||||
* prefilled from the provider default.
|
||||
*/
|
||||
export function DefaultConnectForm({
|
||||
provider,
|
||||
defaultBaseUrl,
|
||||
baseUrlRequired,
|
||||
isPending,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
}: ProviderConnectFormProps) {
|
||||
const [baseUrl, setBaseUrl] = useState(defaultBaseUrl);
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
const isOllama = provider === "ollama_chat";
|
||||
const canSubmit = !(baseUrlRequired && !baseUrl.trim());
|
||||
|
||||
function handleSubmit() {
|
||||
onSubmit({ base_url: baseUrl || null, api_key: apiKey || null, extra: {} });
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-4">
|
||||
<ApiBaseUrlField
|
||||
value={baseUrl}
|
||||
onChange={setBaseUrl}
|
||||
optional={!baseUrlRequired}
|
||||
placeholder={defaultBaseUrl}
|
||||
/>
|
||||
<ApiKeyField
|
||||
value={apiKey}
|
||||
onChange={setApiKey}
|
||||
label={isOllama ? "API Key (optional)" : "API Key"}
|
||||
placeholder={isOllama ? "Optional for Ollama" : "API key"}
|
||||
/>
|
||||
</div>
|
||||
<ConnectFormFooter
|
||||
onCancel={onCancel}
|
||||
onSubmit={handleSubmit}
|
||||
canSubmit={canSubmit}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import type { ModelRead } from "@/contracts/types/model-connections.types";
|
||||
|
||||
export type ModelCapabilityFilter = "chat" | "vision" | "image_gen";
|
||||
|
||||
export const MODEL_CAPABILITY_FILTERS: { key: ModelCapabilityFilter; label: string }[] = [
|
||||
{ key: "chat", label: "Chat" },
|
||||
{ key: "vision", label: "Vision" },
|
||||
{ key: "image_gen", label: "Image" },
|
||||
];
|
||||
|
||||
export function modelLabel(model: ModelRead) {
|
||||
return model.display_name || model.model_id;
|
||||
}
|
||||
|
||||
export function capability(model: ModelRead, key: ModelCapabilityFilter) {
|
||||
if (key === "chat") return Boolean(model.supports_chat);
|
||||
if (key === "vision") return Boolean(model.supports_image_input);
|
||||
return Boolean(model.supports_image_generation);
|
||||
}
|
||||
|
||||
export function capabilityLabels(model: ModelRead) {
|
||||
return MODEL_CAPABILITY_FILTERS.filter((filter) => capability(model, filter.key))
|
||||
.map((filter) => filter.label.toLowerCase())
|
||||
.join(", ");
|
||||
}
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
import { RefreshCcw } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { ModelRead } from "@/contracts/types/model-connections.types";
|
||||
import {
|
||||
capability,
|
||||
capabilityLabels,
|
||||
MODEL_CAPABILITY_FILTERS,
|
||||
type ModelCapabilityFilter,
|
||||
modelLabel,
|
||||
} from "./model-utils";
|
||||
|
||||
interface ModelsSelectionPanelProps {
|
||||
models: ModelRead[];
|
||||
description?: string;
|
||||
emptyMessage?: string;
|
||||
manualInputPlaceholder?: string;
|
||||
refreshLabel?: string;
|
||||
isRefreshing?: boolean;
|
||||
isAddingManual?: boolean;
|
||||
isUpdatingModel?: boolean;
|
||||
isBulkUpdating?: boolean;
|
||||
onRefresh?: () => void;
|
||||
onAddManual?: (modelId: string) => void;
|
||||
onToggleModel?: (model: ModelRead, enabled: boolean) => void;
|
||||
onBulkToggle?: (models: ModelRead[], enabled: boolean) => void;
|
||||
}
|
||||
|
||||
export function ModelsSelectionPanel({
|
||||
models,
|
||||
description = "Select models to make available for this provider.",
|
||||
emptyMessage = "No models yet. Use the refresh button to discover models or add one manually.",
|
||||
manualInputPlaceholder = "Add a model ID manually",
|
||||
refreshLabel = "Refresh models",
|
||||
isRefreshing = false,
|
||||
isAddingManual = false,
|
||||
isUpdatingModel = false,
|
||||
isBulkUpdating = false,
|
||||
onRefresh,
|
||||
onAddManual,
|
||||
onToggleModel,
|
||||
onBulkToggle,
|
||||
}: ModelsSelectionPanelProps) {
|
||||
const [manualModelId, setManualModelId] = useState("");
|
||||
const [modelFilter, setModelFilter] = useState<ModelCapabilityFilter | null>(null);
|
||||
|
||||
const filteredModels = modelFilter
|
||||
? models.filter((model) => capability(model, modelFilter))
|
||||
: models;
|
||||
const allFilteredModelsEnabled =
|
||||
filteredModels.length > 0 && filteredModels.every((model) => model.enabled);
|
||||
|
||||
function addModel() {
|
||||
const modelId = manualModelId.trim();
|
||||
if (!modelId || !onAddManual) return;
|
||||
onAddManual(modelId);
|
||||
setManualModelId("");
|
||||
}
|
||||
|
||||
function toggleFilteredModels() {
|
||||
const nextEnabled = !allFilteredModelsEnabled;
|
||||
const changedModels = filteredModels.filter((model) => model.enabled !== nextEnabled);
|
||||
if (changedModels.length === 0) return;
|
||||
onBulkToggle?.(changedModels, nextEnabled);
|
||||
}
|
||||
|
||||
return (
|
||||
<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">{description}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
type="button"
|
||||
onClick={toggleFilteredModels}
|
||||
disabled={!onBulkToggle || isBulkUpdating || filteredModels.length === 0}
|
||||
>
|
||||
{allFilteredModelsEnabled ? "Deselect All" : "Select All"}
|
||||
</Button>
|
||||
{onRefresh ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
type="button"
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
aria-label={refreshLabel}
|
||||
>
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{onAddManual ? (
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={manualModelId}
|
||||
onChange={(event) => setManualModelId(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
addModel();
|
||||
}
|
||||
}}
|
||||
placeholder={manualInputPlaceholder}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
type="button"
|
||||
onClick={addModel}
|
||||
disabled={isAddingManual || !manualModelId.trim()}
|
||||
>
|
||||
Add model
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{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 = 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">
|
||||
{models.length === 0 ? (
|
||||
<div className="rounded-lg px-3 py-6 text-center text-sm text-muted-foreground">
|
||||
{emptyMessage}
|
||||
</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) => onToggleModel?.(model, checked === true)}
|
||||
disabled={!onToggleModel || isUpdatingModel}
|
||||
/>
|
||||
<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">
|
||||
{capabilityLabels(model) || "No discovered capabilities"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import type {
|
||||
ConnectionRead,
|
||||
ModelProviderRead,
|
||||
ModelRead,
|
||||
} from "@/contracts/types/model-connections.types";
|
||||
import { AzureConnectForm } from "./azure-connect-form";
|
||||
import { BedrockConnectForm } from "./bedrock-connect-form";
|
||||
import { DefaultConnectForm } from "./default-connect-form";
|
||||
import { ModelsSelectionPanel } from "./models-selection-panel";
|
||||
import {
|
||||
type ConnectionDraft,
|
||||
type ProviderConnectFormProps,
|
||||
providerDefaultBaseUrl,
|
||||
providerDisplay,
|
||||
providerIcon,
|
||||
} from "./provider-metadata";
|
||||
import { VertexConnectForm } from "./vertex-connect-form";
|
||||
|
||||
interface ProviderConnectDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
provider: string;
|
||||
selectedProvider?: ModelProviderRead;
|
||||
isPending: boolean;
|
||||
onSubmit: (draft: ConnectionDraft) => void;
|
||||
connectedConnection?: ConnectionRead | null;
|
||||
connectModels?: ModelRead[];
|
||||
isDiscoveringModels?: boolean;
|
||||
isAddingManualModel?: boolean;
|
||||
isUpdatingModel?: boolean;
|
||||
isBulkUpdatingModels?: boolean;
|
||||
onRefreshModels?: () => void;
|
||||
onAddManualModel?: (modelId: string) => void;
|
||||
onToggleModel?: (model: ModelRead, enabled: boolean) => void;
|
||||
onBulkToggleModels?: (models: ModelRead[], enabled: boolean) => void;
|
||||
onDone?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shared dialog shell for the "Add Provider" flow. It owns the header and routes
|
||||
* to the provider-specific connect form. Forms remount on open (Radix unmounts
|
||||
* closed content), so each gets fresh, prefilled state.
|
||||
*/
|
||||
export function ProviderConnectDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
provider,
|
||||
selectedProvider,
|
||||
isPending,
|
||||
onSubmit,
|
||||
connectedConnection,
|
||||
connectModels = [],
|
||||
isDiscoveringModels = false,
|
||||
isAddingManualModel = false,
|
||||
isUpdatingModel = false,
|
||||
isBulkUpdatingModels = false,
|
||||
onRefreshModels,
|
||||
onAddManualModel,
|
||||
onToggleModel,
|
||||
onBulkToggleModels,
|
||||
onDone,
|
||||
}: ProviderConnectDialogProps) {
|
||||
const meta = providerDisplay(provider);
|
||||
const isModelSelectionStep = Boolean(connectedConnection);
|
||||
|
||||
const formProps: ProviderConnectFormProps = {
|
||||
provider,
|
||||
defaultBaseUrl: providerDefaultBaseUrl(provider, selectedProvider?.default_base_url),
|
||||
baseUrlRequired: Boolean(selectedProvider?.base_url_required),
|
||||
isPending,
|
||||
onCancel: () => onOpenChange(false),
|
||||
onSubmit,
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
className={`flex max-h-[90vh] ${
|
||||
isModelSelectionStep ? "max-w-2xl" : "max-w-xl"
|
||||
} 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">
|
||||
{providerIcon(provider, "size-5")}
|
||||
<div>
|
||||
<DialogTitle>
|
||||
{isModelSelectionStep ? `Select ${meta.name} models` : `Connect ${meta.name}`}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isModelSelectionStep
|
||||
? selectedProvider?.discovery === "static"
|
||||
? "Choose from known model IDs or add one manually."
|
||||
: "Choose which discovered models should be available in this search space."
|
||||
: meta.subtitle}
|
||||
</DialogDescription>
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
{isModelSelectionStep ? (
|
||||
<>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
|
||||
<ModelsSelectionPanel
|
||||
models={connectModels}
|
||||
description={
|
||||
selectedProvider?.discovery === "static"
|
||||
? "These are known model IDs for this provider. Select the ones to make available."
|
||||
: "Select models to make available for this provider."
|
||||
}
|
||||
emptyMessage={
|
||||
isDiscoveringModels
|
||||
? "Discovering models..."
|
||||
: "No models found. You can refresh discovery or add a model ID manually."
|
||||
}
|
||||
isRefreshing={isDiscoveringModels}
|
||||
isAddingManual={isAddingManualModel}
|
||||
isUpdatingModel={isUpdatingModel}
|
||||
isBulkUpdating={isBulkUpdatingModels}
|
||||
refreshLabel={`Refresh ${meta.name} models`}
|
||||
onRefresh={onRefreshModels}
|
||||
onAddManual={onAddManualModel}
|
||||
onToggleModel={onToggleModel}
|
||||
onBulkToggle={onBulkToggleModels}
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter className="shrink-0 border-t bg-popover px-6 py-4">
|
||||
<Button onClick={onDone}>Done</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
) : (
|
||||
<div className="overflow-y-auto px-6 py-5">
|
||||
{provider === "azure" ? (
|
||||
<AzureConnectForm {...formProps} />
|
||||
) : provider === "bedrock" ? (
|
||||
<BedrockConnectForm {...formProps} />
|
||||
) : provider === "vertex_ai" ? (
|
||||
<VertexConnectForm {...formProps} />
|
||||
) : (
|
||||
<DefaultConnectForm {...formProps} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
import { getProviderIcon } from "@/lib/provider-icons";
|
||||
|
||||
export const PROVIDER_ORDER = [
|
||||
"openai",
|
||||
"anthropic",
|
||||
"vertex_ai",
|
||||
"bedrock",
|
||||
"azure",
|
||||
"openrouter",
|
||||
"ollama_chat",
|
||||
"lm_studio",
|
||||
"openai_compatible",
|
||||
];
|
||||
|
||||
export const PROVIDER_DISPLAY: Record<
|
||||
string,
|
||||
{ name: string; subtitle: string; iconKey?: string; defaultBaseUrl?: string }
|
||||
> = {
|
||||
anthropic: {
|
||||
name: "Claude",
|
||||
subtitle: "Anthropic",
|
||||
iconKey: "anthropic",
|
||||
defaultBaseUrl: "https://api.anthropic.com/v1",
|
||||
},
|
||||
azure: { name: "Azure OpenAI", subtitle: "Microsoft Azure", iconKey: "azure_openai" },
|
||||
bedrock: { name: "Amazon Bedrock", subtitle: "AWS", iconKey: "bedrock" },
|
||||
lm_studio: { name: "LM Studio", subtitle: "LM Studio", iconKey: "custom" },
|
||||
ollama_chat: { name: "Ollama", subtitle: "Ollama", iconKey: "ollama" },
|
||||
openai: {
|
||||
name: "GPT",
|
||||
subtitle: "OpenAI",
|
||||
iconKey: "openai",
|
||||
defaultBaseUrl: "https://api.openai.com/v1",
|
||||
},
|
||||
openai_compatible: {
|
||||
name: "OpenAI-Compatible",
|
||||
subtitle: "OpenAI-compatible endpoint",
|
||||
iconKey: "custom",
|
||||
},
|
||||
openrouter: {
|
||||
name: "OpenRouter",
|
||||
subtitle: "OpenRouter",
|
||||
iconKey: "openrouter",
|
||||
defaultBaseUrl: "https://openrouter.ai/api/v1",
|
||||
},
|
||||
vertex_ai: { name: "Gemini", subtitle: "Google Cloud Vertex AI", iconKey: "vertex_ai" },
|
||||
};
|
||||
|
||||
export function providerDisplay(provider: string) {
|
||||
const fallback = provider
|
||||
.split("_")
|
||||
.filter(Boolean)
|
||||
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
PROVIDER_DISPLAY[provider] ?? {
|
||||
name: fallback || provider,
|
||||
subtitle: provider,
|
||||
iconKey: provider,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function providerIcon(provider: string, className = "size-4") {
|
||||
return getProviderIcon(providerDisplay(provider).iconKey ?? provider, { className });
|
||||
}
|
||||
|
||||
export function providerDefaultBaseUrl(provider: string, registryDefault?: string | null) {
|
||||
return registryDefault ?? PROVIDER_DISPLAY[provider]?.defaultBaseUrl ?? "";
|
||||
}
|
||||
|
||||
export const AWS_REGION_OPTIONS = [
|
||||
"us-east-1",
|
||||
"us-east-2",
|
||||
"us-west-2",
|
||||
"us-gov-east-1",
|
||||
"us-gov-west-1",
|
||||
"ap-northeast-1",
|
||||
"ap-south-1",
|
||||
"ap-southeast-1",
|
||||
"ap-southeast-2",
|
||||
"ap-east-1",
|
||||
"ca-central-1",
|
||||
"eu-central-1",
|
||||
"eu-west-2",
|
||||
];
|
||||
|
||||
export const VERTEX_DEFAULT_LOCATION = "global";
|
||||
|
||||
export const BEDROCK_AUTH_IAM = "iam";
|
||||
export const BEDROCK_AUTH_ACCESS_KEY = "access_key";
|
||||
export const BEDROCK_AUTH_LONG_TERM_API_KEY = "long_term_api_key";
|
||||
|
||||
export const VERTEX_AUTH_SERVICE_ACCOUNT = "service_account_json";
|
||||
export const VERTEX_AUTH_WORKLOAD_IDENTITY = "workload_identity";
|
||||
|
||||
// Mirrors Onyx's Azure "Target URI" parser: the user pastes the full endpoint
|
||||
// (e.g. https://res.cognitiveservices.azure.com/openai/deployments/<dep>/chat/completions?api-version=<ver>)
|
||||
// which we split into api base (origin), api version, and deployment name.
|
||||
export function parseAzureTargetUri(rawUri: string) {
|
||||
try {
|
||||
const url = new URL(rawUri);
|
||||
const deploymentMatch = url.pathname.match(/\/openai\/deployments\/([^/]+)/i);
|
||||
return {
|
||||
origin: url.origin,
|
||||
apiVersion: url.searchParams.get("api-version")?.trim() ?? "",
|
||||
deploymentName: deploymentMatch?.[1] ? deploymentMatch[1].toLowerCase() : "",
|
||||
isResponsesPath: /\/openai\/responses/i.test(url.pathname),
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function isValidAzureTargetUri(rawUri: string) {
|
||||
const parsed = parseAzureTargetUri(rawUri);
|
||||
if (!parsed) return false;
|
||||
return Boolean(parsed.apiVersion) && (Boolean(parsed.deploymentName) || parsed.isResponsesPath);
|
||||
}
|
||||
|
||||
/** Connection payload produced by a provider connect form. */
|
||||
export interface ConnectionDraft {
|
||||
base_url: string | null;
|
||||
api_key: string | null;
|
||||
extra: Record<string, unknown>;
|
||||
/** Model id to seed after creation (providers without discovery, e.g. Azure). */
|
||||
seedModelId?: string;
|
||||
}
|
||||
|
||||
/** Props shared by every provider-specific connect form. */
|
||||
export interface ProviderConnectFormProps {
|
||||
provider: string;
|
||||
defaultBaseUrl: string;
|
||||
baseUrlRequired: boolean;
|
||||
isPending: boolean;
|
||||
onCancel: () => void;
|
||||
onSubmit: (draft: ConnectionDraft) => void;
|
||||
}
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
import { useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { ConnectFormFooter } from "./connect-fields";
|
||||
import {
|
||||
type ProviderConnectFormProps,
|
||||
VERTEX_AUTH_SERVICE_ACCOUNT,
|
||||
VERTEX_AUTH_WORKLOAD_IDENTITY,
|
||||
VERTEX_DEFAULT_LOCATION,
|
||||
} from "./provider-metadata";
|
||||
|
||||
/**
|
||||
* Google Vertex AI (Gemini) connect form. Service-account auth uploads a
|
||||
* credentials JSON file (read into a string); workload identity collects a
|
||||
* project id. Credentials ride along in `extra.litellm_params`.
|
||||
*/
|
||||
export function VertexConnectForm({ isPending, onCancel, onSubmit }: ProviderConnectFormProps) {
|
||||
const [authMethod, setAuthMethod] = useState(VERTEX_AUTH_SERVICE_ACCOUNT);
|
||||
const [location, setLocation] = useState(VERTEX_DEFAULT_LOCATION);
|
||||
const [credentials, setCredentials] = useState("");
|
||||
const [project, setProject] = useState("");
|
||||
|
||||
const canSubmit =
|
||||
authMethod === VERTEX_AUTH_SERVICE_ACCOUNT ? Boolean(credentials) : Boolean(project);
|
||||
|
||||
async function handleCredentialsFile(file: File | undefined) {
|
||||
if (!file) return;
|
||||
setCredentials(await file.text());
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
const params: Record<string, string> = {};
|
||||
if (location) params.vertex_location = location;
|
||||
if (authMethod === VERTEX_AUTH_SERVICE_ACCOUNT) {
|
||||
if (credentials) params.vertex_credentials = credentials;
|
||||
} else if (project) {
|
||||
params.vertex_project = project;
|
||||
}
|
||||
onSubmit({ base_url: null, api_key: null, extra: { litellm_params: params } });
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Authentication Method</Label>
|
||||
<Select value={authMethod} onValueChange={setAuthMethod}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={VERTEX_AUTH_SERVICE_ACCOUNT}>Service Account JSON</SelectItem>
|
||||
<SelectItem value={VERTEX_AUTH_WORKLOAD_IDENTITY}>Workload Identity (GKE)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Google Cloud Region Name</Label>
|
||||
<Input
|
||||
value={location}
|
||||
onChange={(event) => setLocation(event.target.value)}
|
||||
placeholder={VERTEX_DEFAULT_LOCATION}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Region where your Google Vertex AI models are hosted.
|
||||
</p>
|
||||
</div>
|
||||
{authMethod === VERTEX_AUTH_SERVICE_ACCOUNT ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Service Account JSON</Label>
|
||||
<Input
|
||||
id="vertex-service-account-json"
|
||||
type="file"
|
||||
accept="application/json,.json"
|
||||
className="sr-only"
|
||||
onChange={(event) => handleCredentialsFile(event.target.files?.[0])}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="vertex-service-account-json"
|
||||
className="flex min-h-28 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-muted-foreground/40 bg-muted/20 px-4 py-6 text-center transition-colors hover:border-muted-foreground/70 hover:bg-muted/40"
|
||||
>
|
||||
<span className="text-sm font-medium">
|
||||
{credentials ? "Service account JSON selected" : "Upload service account JSON"}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Choose a .json file from Google Cloud
|
||||
</span>
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{credentials
|
||||
? "Credentials file loaded."
|
||||
: "Attach your service account key JSON from Google Cloud."}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>GCP Project ID</Label>
|
||||
<Input
|
||||
value={project}
|
||||
onChange={(event) => setProject(event.target.value)}
|
||||
placeholder="my-vertex-project"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
The GCP project where Vertex AI is enabled.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Add Vertex AI model IDs from the provider's settings after connecting.
|
||||
</p>
|
||||
</div>
|
||||
<ConnectFormFooter
|
||||
onCancel={onCancel}
|
||||
onSubmit={handleSubmit}
|
||||
canSubmit={canSubmit}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Bot, Shuffle } from "lucide-react";
|
||||
import { Cpu, Shuffle } from "lucide-react";
|
||||
import {
|
||||
Ai21Icon,
|
||||
AnthropicIcon,
|
||||
|
|
@ -72,7 +72,7 @@ export function getProviderIcon(
|
|||
case "COMETAPI":
|
||||
return <CometApiIcon className={cn(className)} />;
|
||||
case "CUSTOM":
|
||||
return <Bot className={cn(className, "text-gray-400")} />;
|
||||
return <Cpu className={cn(className, "text-gray-400")} />;
|
||||
case "DATABRICKS":
|
||||
return <DatabricksIcon className={cn(className)} />;
|
||||
case "DEEPINFRA":
|
||||
|
|
@ -122,6 +122,6 @@ export function getProviderIcon(
|
|||
case "ZHIPU":
|
||||
return <ZhipuIcon className={cn(className)} />;
|
||||
default:
|
||||
return <Bot className={cn(className, "text-muted-foreground")} />;
|
||||
return <Cpu className={cn(className, "text-muted-foreground")} />;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue