54329aa516
- Extend the AssistantConfig model to include agent_interface_type, agent_values, and agent_secrets for enhanced agent management. - Update ModelType to include "Agent" for broader capability support. - Seed new agent models and configurations in the database for Dify, FastGPT, and OpenCode applications. - Modify the Assistant routes to validate and handle agent capabilities. - Implement agent resource resolution in the config resolver for runtime configuration. - Enhance the interface catalog with agent-specific fields and definitions. - Update frontend components to manage agent configurations, including form handling and state management for agent-related inputs.
1043 lines
33 KiB
TypeScript
1043 lines
33 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
CheckCircle2,
|
||
ChevronDown,
|
||
ChevronUp,
|
||
Copy,
|
||
Eye,
|
||
EyeOff,
|
||
Loader2,
|
||
MoreHorizontal,
|
||
Pencil,
|
||
Plug,
|
||
Plus,
|
||
Trash2,
|
||
XCircle,
|
||
} from "lucide-react";
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuTrigger,
|
||
} from "@/components/ui/dropdown-menu";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import { DataList } from "@/components/ui/data-list";
|
||
import { PageHeader } from "@/components/ui/page-header";
|
||
import { FilterPills } from "@/components/ui/filter-pills";
|
||
import { SearchInput } from "@/components/ui/search-input";
|
||
import { ListToolbar } from "@/components/ui/list-toolbar";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Switch } from "@/components/ui/switch";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import {
|
||
interfaceDefinitionsApi,
|
||
modelResourcesApi,
|
||
type InterfaceDefinition,
|
||
type InterfaceField,
|
||
type ModelResource,
|
||
type ModelType,
|
||
} from "@/lib/api";
|
||
|
||
const capabilities: ModelType[] = [
|
||
"LLM",
|
||
"ASR",
|
||
"TTS",
|
||
"Realtime",
|
||
"Embedding",
|
||
"Agent",
|
||
];
|
||
|
||
const capabilityFilters = ["全部", ...capabilities] as const;
|
||
|
||
type ResourceDraft = {
|
||
name: string;
|
||
capability: ModelType;
|
||
interfaceType: string;
|
||
values: Record<string, unknown>;
|
||
secrets: Record<string, unknown>;
|
||
supportImageInput: boolean;
|
||
};
|
||
|
||
const emptyDraft: ResourceDraft = {
|
||
name: "",
|
||
capability: "LLM",
|
||
interfaceType: "",
|
||
values: {},
|
||
secrets: {},
|
||
supportImageInput: false,
|
||
};
|
||
|
||
function defaults(definition: InterfaceDefinition): Record<string, unknown> {
|
||
return Object.fromEntries(
|
||
definition.fieldSchema.fields
|
||
.filter((field) => field.group === "values" && field.default !== undefined)
|
||
.map((field) => [field.key, field.default]),
|
||
);
|
||
}
|
||
|
||
function formatUpdatedAt(value?: string | null): string {
|
||
if (!value) return "—";
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) return "—";
|
||
return date.toLocaleString("zh-CN", {
|
||
year: "numeric",
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
}
|
||
|
||
// 列表按更新时间排序:newest=最近更新在前(倒叙,默认) / oldest=最早更新在前
|
||
type SortOrder = "newest" | "oldest";
|
||
|
||
// 缺失/非法时间戳视为最早(0),用于排序
|
||
function updatedAtValue(value?: string | null): number {
|
||
const time = value ? new Date(value).getTime() : NaN;
|
||
return Number.isNaN(time) ? 0 : time;
|
||
}
|
||
|
||
function fieldValue(draft: ResourceDraft, field: InterfaceField): unknown {
|
||
return field.group === "secrets"
|
||
? draft.secrets[field.key]
|
||
: draft.values[field.key];
|
||
}
|
||
|
||
function secretMask(
|
||
masks: Record<string, unknown>,
|
||
field: InterfaceField,
|
||
): string {
|
||
if (field.group !== "secrets") return "";
|
||
const value = masks[field.key];
|
||
return typeof value === "string" && value.includes("****") ? value : "";
|
||
}
|
||
|
||
function extraBodyText(values: Record<string, unknown>): string {
|
||
const value = values.extraBody;
|
||
if (!value || typeof value !== "object" || Array.isArray(value)) return "";
|
||
return JSON.stringify(value, null, 2);
|
||
}
|
||
|
||
function parseExtraBody(text: string):
|
||
| { ok: true; value: Record<string, unknown> | null }
|
||
| { ok: false; error: string } {
|
||
const trimmed = text.trim();
|
||
if (!trimmed) return { ok: true, value: null };
|
||
try {
|
||
const parsed = JSON.parse(trimmed) as unknown;
|
||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
|
||
return { ok: false, error: "Extra Body 必须是 JSON 对象" };
|
||
}
|
||
return { ok: true, value: parsed as Record<string, unknown> };
|
||
} catch {
|
||
return { ok: false, error: "Extra Body 不是合法 JSON" };
|
||
}
|
||
}
|
||
|
||
function valuesWithExtraBody(
|
||
values: Record<string, unknown>,
|
||
extraBody: Record<string, unknown> | null,
|
||
): Record<string, unknown> {
|
||
const next = { ...values };
|
||
delete next.extraBody;
|
||
if (extraBody) next.extraBody = extraBody;
|
||
return next;
|
||
}
|
||
|
||
function isSelectableDefinition(definition: InterfaceDefinition): boolean {
|
||
return (
|
||
definition.capability !== "LLM" || definition.interfaceType === "openai-llm"
|
||
);
|
||
}
|
||
|
||
export function ComponentsModelsPage() {
|
||
const [resources, setResources] = useState<ModelResource[]>([]);
|
||
const [definitions, setDefinitions] = useState<InterfaceDefinition[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [loadError, setLoadError] = useState("");
|
||
const [search, setSearch] = useState("");
|
||
const [filter, setFilter] = useState<ModelType | "全部">("全部");
|
||
const [sortOrder, setSortOrder] = useState<SortOrder>("newest");
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
|
||
const [dialogOpen, setDialogOpen] = useState(false);
|
||
const [editingId, setEditingId] = useState<string | null>(null);
|
||
const [draft, setDraft] = useState<ResourceDraft>(emptyDraft);
|
||
const [storedSecretMasks, setStoredSecretMasks] = useState<Record<string, unknown>>({});
|
||
const [extraBodyDraft, setExtraBodyDraft] = useState("");
|
||
const [saving, setSaving] = useState(false);
|
||
const [saveError, setSaveError] = useState("");
|
||
const [testing, setTesting] = useState(false);
|
||
const [testResult, setTestResult] = useState<{
|
||
ok: boolean;
|
||
message: string;
|
||
} | null>(null);
|
||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||
const [duplicatingId, setDuplicatingId] = useState<string | null>(null);
|
||
|
||
const load = useCallback(async () => {
|
||
setLoading(true);
|
||
setLoadError("");
|
||
try {
|
||
const [nextResources, nextDefinitions] = await Promise.all([
|
||
modelResourcesApi.list(),
|
||
interfaceDefinitionsApi.list(),
|
||
]);
|
||
setResources(nextResources);
|
||
setDefinitions(nextDefinitions);
|
||
} catch (error) {
|
||
setLoadError(error instanceof Error ? error.message : "加载失败");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
// Initial external API synchronization.
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||
void load();
|
||
}, [load]);
|
||
|
||
const selectableDefinitions = definitions.filter(isSelectableDefinition);
|
||
const availableDefinitions = selectableDefinitions.filter(
|
||
(definition) => definition.capability === draft.capability,
|
||
);
|
||
const selectedDefinition = definitions.find(
|
||
(definition) => definition.interfaceType === draft.interfaceType,
|
||
);
|
||
const connectionFields =
|
||
selectedDefinition?.fieldSchema.fields.filter(
|
||
(field) => field.group === "secrets" || field.required,
|
||
) ?? [];
|
||
const optionalFields =
|
||
selectedDefinition?.fieldSchema.fields.filter(
|
||
(field) => field.group === "values" && !field.required,
|
||
) ?? [];
|
||
|
||
const filtered = useMemo(() => {
|
||
const keyword = search.trim().toLowerCase();
|
||
return resources.filter((resource) => {
|
||
if (filter !== "全部" && resource.capability !== filter) return false;
|
||
return (
|
||
!keyword ||
|
||
[
|
||
resource.name,
|
||
resource.interfaceType,
|
||
String(resource.values.modelId ?? ""),
|
||
]
|
||
.join(" ")
|
||
.toLowerCase()
|
||
.includes(keyword)
|
||
);
|
||
});
|
||
}, [resources, search, filter]);
|
||
|
||
// 按更新时间排序(以原始时间戳为准);id 作为稳定的次级排序键
|
||
const sorted = useMemo(() => {
|
||
return [...filtered].sort((a, b) => {
|
||
const diff = updatedAtValue(b.updatedAt) - updatedAtValue(a.updatedAt);
|
||
if (diff !== 0) return sortOrder === "newest" ? diff : -diff;
|
||
return a.id.localeCompare(b.id);
|
||
});
|
||
}, [filtered, sortOrder]);
|
||
|
||
const pageSize = 5;
|
||
const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
|
||
const safeCurrentPage = Math.min(currentPage, totalPages);
|
||
const pageStart = (safeCurrentPage - 1) * pageSize;
|
||
const pageEnd = pageStart + pageSize;
|
||
const paginatedResources = sorted.slice(pageStart, pageEnd);
|
||
|
||
function changeFilter(nextFilter: ModelType | "全部") {
|
||
setFilter(nextFilter);
|
||
setCurrentPage(1);
|
||
}
|
||
|
||
function changeSearch(value: string) {
|
||
setSearch(value);
|
||
setCurrentPage(1);
|
||
}
|
||
|
||
function changeSort(order: SortOrder) {
|
||
setSortOrder(order);
|
||
setCurrentPage(1);
|
||
}
|
||
|
||
function toggleSortOrder() {
|
||
changeSort(sortOrder === "newest" ? "oldest" : "newest");
|
||
}
|
||
|
||
function selectDefinition(interfaceType: string) {
|
||
const definition = definitions.find(
|
||
(item) => item.interfaceType === interfaceType,
|
||
);
|
||
setDraft((previous) => ({
|
||
...previous,
|
||
interfaceType,
|
||
values: definition ? defaults(definition) : {},
|
||
secrets: {},
|
||
}));
|
||
setStoredSecretMasks({});
|
||
setExtraBodyDraft("");
|
||
setTestResult(null);
|
||
}
|
||
|
||
function selectCapability(capability: ModelType) {
|
||
const first = selectableDefinitions.find(
|
||
(definition) => definition.capability === capability,
|
||
);
|
||
setDraft((previous) => ({
|
||
...previous,
|
||
capability,
|
||
interfaceType: first?.interfaceType ?? "",
|
||
values: first ? defaults(first) : {},
|
||
secrets: {},
|
||
supportImageInput:
|
||
capability === "LLM" ? previous.supportImageInput : false,
|
||
}));
|
||
setStoredSecretMasks({});
|
||
setExtraBodyDraft("");
|
||
setTestResult(null);
|
||
}
|
||
|
||
function openCreate() {
|
||
const first = selectableDefinitions.find(
|
||
(definition) => definition.capability === "LLM",
|
||
);
|
||
setEditingId(null);
|
||
setDraft({
|
||
...emptyDraft,
|
||
interfaceType: first?.interfaceType ?? "",
|
||
values: first ? defaults(first) : {},
|
||
secrets: {},
|
||
supportImageInput: false,
|
||
});
|
||
setStoredSecretMasks({});
|
||
setExtraBodyDraft("");
|
||
setSaveError("");
|
||
setTestResult(null);
|
||
setDialogOpen(true);
|
||
}
|
||
|
||
function openEdit(resource: ModelResource) {
|
||
setEditingId(resource.id);
|
||
setDraft({
|
||
name: resource.name,
|
||
capability: resource.capability,
|
||
interfaceType: resource.interfaceType,
|
||
values: resource.values,
|
||
secrets: {},
|
||
supportImageInput: resource.supportImageInput,
|
||
});
|
||
setStoredSecretMasks(resource.secrets);
|
||
setExtraBodyDraft(extraBodyText(resource.values));
|
||
setSaveError("");
|
||
setTestResult(null);
|
||
setDialogOpen(true);
|
||
}
|
||
|
||
function updateField(field: InterfaceField, value: unknown) {
|
||
const target = field.group === "secrets" ? "secrets" : "values";
|
||
setDraft((previous) => ({
|
||
...previous,
|
||
[target]: { ...previous[target], [field.key]: value },
|
||
}));
|
||
setTestResult(null);
|
||
}
|
||
|
||
const parsedExtraBody = parseExtraBody(extraBodyDraft);
|
||
const extraBodyError = parsedExtraBody.ok ? "" : parsedExtraBody.error;
|
||
const canSave = Boolean(
|
||
draft.name.trim() &&
|
||
selectedDefinition &&
|
||
!extraBodyError &&
|
||
selectedDefinition.fieldSchema.fields.every((field) => {
|
||
if (!field.required) return true;
|
||
const value =
|
||
field.group === "secrets" && secretMask(storedSecretMasks, field)
|
||
? secretMask(storedSecretMasks, field)
|
||
: fieldValue(draft, field);
|
||
return value !== undefined && value !== null && value !== "";
|
||
}),
|
||
);
|
||
|
||
function payload() {
|
||
const extraBody = parsedExtraBody.ok ? parsedExtraBody.value : null;
|
||
return {
|
||
name: draft.name.trim(),
|
||
interfaceType: draft.interfaceType,
|
||
values:
|
||
draft.capability === "LLM"
|
||
? valuesWithExtraBody(draft.values, extraBody)
|
||
: draft.values,
|
||
secrets: editingId
|
||
? { ...storedSecretMasks, ...draft.secrets }
|
||
: draft.secrets,
|
||
supportImageInput:
|
||
draft.capability === "LLM" ? draft.supportImageInput : false,
|
||
enabled: editingId
|
||
? resources.find((resource) => resource.id === editingId)?.enabled ?? true
|
||
: true,
|
||
isDefault: editingId
|
||
? resources.find((resource) => resource.id === editingId)?.isDefault ?? false
|
||
: false,
|
||
};
|
||
}
|
||
|
||
async function testConnection() {
|
||
if (!canSave) return;
|
||
setTesting(true);
|
||
setTestResult(null);
|
||
try {
|
||
const result = await modelResourcesApi.test(payload(), editingId ?? undefined);
|
||
setTestResult({
|
||
ok: result.ok,
|
||
message: [
|
||
result.message,
|
||
result.latencyMs !== null ? `${result.latencyMs}ms` : "",
|
||
result.detail,
|
||
]
|
||
.filter(Boolean)
|
||
.join(" · "),
|
||
});
|
||
} catch (error) {
|
||
setTestResult({
|
||
ok: false,
|
||
message: error instanceof Error ? error.message : "测试连接失败",
|
||
});
|
||
} finally {
|
||
setTesting(false);
|
||
}
|
||
}
|
||
|
||
async function save() {
|
||
if (!canSave) return;
|
||
setSaving(true);
|
||
setSaveError("");
|
||
const body = payload();
|
||
try {
|
||
if (editingId) {
|
||
await modelResourcesApi.update(editingId, body);
|
||
} else {
|
||
await modelResourcesApi.create(body);
|
||
}
|
||
setDialogOpen(false);
|
||
await load();
|
||
} catch (error) {
|
||
setSaveError(error instanceof Error ? error.message : "保存失败");
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}
|
||
|
||
async function remove(id: string) {
|
||
setDeletingId(id);
|
||
try {
|
||
await modelResourcesApi.remove(id);
|
||
await load();
|
||
} catch (error) {
|
||
setLoadError(error instanceof Error ? error.message : "删除失败");
|
||
} finally {
|
||
setDeletingId(null);
|
||
}
|
||
}
|
||
|
||
async function duplicate(id: string) {
|
||
setDuplicatingId(id);
|
||
try {
|
||
await modelResourcesApi.duplicate(id);
|
||
await load();
|
||
} catch (error) {
|
||
setLoadError(error instanceof Error ? error.message : "复制失败");
|
||
} finally {
|
||
setDuplicatingId(null);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
|
||
<PageHeader
|
||
title="模型资源"
|
||
description="接口定义决定能力、鉴权字段和调用参数，表单会随接口类型动态更新。"
|
||
action={
|
||
<Button
|
||
size="lg"
|
||
className="w-full gap-2 sm:w-auto"
|
||
onClick={openCreate}
|
||
>
|
||
<Plus size={16} />
|
||
添加模型
|
||
</Button>
|
||
}
|
||
/>
|
||
|
||
<section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
|
||
<ListToolbar
|
||
filters={
|
||
<FilterPills
|
||
options={capabilityFilters}
|
||
value={filter}
|
||
onChange={changeFilter}
|
||
/>
|
||
}
|
||
search={
|
||
<SearchInput
|
||
value={search}
|
||
onChange={changeSearch}
|
||
placeholder="搜索名称、接口类型或模型 ID"
|
||
className="lg:w-[320px]"
|
||
/>
|
||
}
|
||
/>
|
||
|
||
<DataList<ModelResource>
|
||
rows={paginatedResources}
|
||
rowKey={(resource) => resource.id}
|
||
loading={loading}
|
||
error={loadError || null}
|
||
onRetry={() => void load()}
|
||
empty={{
|
||
title:
|
||
resources.length === 0
|
||
? "暂无模型资源"
|
||
: "未找到匹配的模型资源",
|
||
description:
|
||
resources.length === 0
|
||
? "点击右上角「添加模型」开始。"
|
||
: "请调整关键词或筛选条件后再试。",
|
||
}}
|
||
pagination={{
|
||
page: safeCurrentPage,
|
||
totalPages,
|
||
onPageChange: setCurrentPage,
|
||
summary:
|
||
filtered.length === 0
|
||
? "没有数据"
|
||
: `显示 ${pageStart + 1}-${Math.min(pageEnd, filtered.length)} / 共 ${filtered.length} 个模型资源`,
|
||
}}
|
||
columns={[
|
||
{
|
||
key: "name",
|
||
header: "模型名称",
|
||
width: "md:w-[360px]",
|
||
cell: (resource) => (
|
||
<>
|
||
<div className="flex min-w-0 items-center gap-2">
|
||
<span className="truncate font-medium text-foreground">
|
||
{resource.name}
|
||
</span>
|
||
{resource.supportImageInput && (
|
||
<span
|
||
className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-surface-strong text-muted-foreground"
|
||
title="支持图片输入"
|
||
aria-label="支持图片输入"
|
||
>
|
||
<Eye size={12} />
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="mt-1 truncate text-xs text-muted-soft">
|
||
{String(
|
||
resource.values.modelId ?? resource.values.apiUrl ?? "",
|
||
)}
|
||
</div>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
key: "capability",
|
||
header: "能力",
|
||
width: "md:w-[128px]",
|
||
cell: (resource) => (
|
||
<Badge
|
||
variant="secondary"
|
||
className="h-6 bg-surface-strong px-3 text-muted-foreground"
|
||
>
|
||
{resource.capability}
|
||
</Badge>
|
||
),
|
||
},
|
||
{
|
||
key: "interfaceType",
|
||
header: "接口类型",
|
||
width: "md:w-[220px]",
|
||
cell: (resource) => (
|
||
<Badge variant="outline" className="h-6 px-3">
|
||
{resource.interfaceType}
|
||
</Badge>
|
||
),
|
||
},
|
||
{
|
||
key: "updatedAt",
|
||
width: "md:w-[176px]",
|
||
header: (
|
||
<button
|
||
type="button"
|
||
onClick={toggleSortOrder}
|
||
className="caption-label -mx-2 inline-flex items-center gap-1 rounded-md px-2 py-1 text-muted-soft transition-colors hover:bg-surface-strong hover:text-foreground"
|
||
aria-label={
|
||
sortOrder === "newest"
|
||
? "当前按最近更新排序,点击切换为最早更新"
|
||
: "当前按最早更新排序,点击切换为最近更新"
|
||
}
|
||
>
|
||
更新时间
|
||
{sortOrder === "newest" ? (
|
||
<ChevronDown size={13} />
|
||
) : (
|
||
<ChevronUp size={13} />
|
||
)}
|
||
</button>
|
||
),
|
||
cellClassName:
|
||
"whitespace-nowrap tabular-nums text-muted-foreground",
|
||
cell: (resource) => formatUpdatedAt(resource.updatedAt),
|
||
},
|
||
{
|
||
key: "actions",
|
||
header: "操作",
|
||
align: "right",
|
||
cellClassName: "flex justify-end gap-2",
|
||
cell: (resource) => (
|
||
<>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="gap-1.5 border-hairline-strong text-xs text-muted-foreground hover:text-foreground"
|
||
onClick={() => openEdit(resource)}
|
||
>
|
||
<Pencil size={14} />
|
||
编辑
|
||
</Button>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
size="icon-sm"
|
||
className="border-hairline-strong text-muted-foreground hover:text-foreground"
|
||
aria-label={`${resource.name} 更多操作`}
|
||
>
|
||
<MoreHorizontal size={15} />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent
|
||
align="end"
|
||
className="w-32 min-w-32 rounded-xl border border-hairline bg-popover p-1"
|
||
>
|
||
<DropdownMenuItem
|
||
className="rounded-lg"
|
||
disabled={duplicatingId === resource.id}
|
||
onSelect={(event) => {
|
||
event.preventDefault();
|
||
void duplicate(resource.id);
|
||
}}
|
||
>
|
||
{duplicatingId === resource.id ? (
|
||
<Loader2 size={14} className="animate-spin" />
|
||
) : (
|
||
<Copy size={14} />
|
||
)}
|
||
复制
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
variant="destructive"
|
||
className="rounded-lg"
|
||
disabled={deletingId === resource.id}
|
||
onSelect={(event) => {
|
||
event.preventDefault();
|
||
void remove(resource.id);
|
||
}}
|
||
>
|
||
{deletingId === resource.id ? (
|
||
<Loader2 size={14} className="animate-spin" />
|
||
) : (
|
||
<Trash2 size={14} />
|
||
)}
|
||
删除
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</section>
|
||
|
||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||
<DialogContent className="max-h-[calc(100vh-3rem)] overflow-y-auto sm:max-w-6xl lg:max-w-[88rem] lg:overflow-hidden">
|
||
<DialogHeader>
|
||
<DialogTitle>{editingId ? "编辑模型资源" : "添加模型资源"}</DialogTitle>
|
||
<DialogDescription>
|
||
选择具体接口类型后，系统会从接口定义生成需要填写的字段。修改能力类型会自动取消不再兼容的助手绑定。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="grid gap-5 lg:grid-cols-2">
|
||
<div className="space-y-5 lg:flex lg:h-[38rem] lg:flex-col lg:space-y-0 lg:gap-5">
|
||
<FieldSection title="基本信息">
|
||
<Field label="资源名称" required>
|
||
<Input
|
||
value={draft.name}
|
||
onChange={(event) =>
|
||
setDraft((previous) => ({
|
||
...previous,
|
||
name: event.target.value,
|
||
}))
|
||
}
|
||
/>
|
||
</Field>
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<Field label="能力类型" required>
|
||
<Select
|
||
value={draft.capability}
|
||
onValueChange={(value) =>
|
||
selectCapability(value as ModelType)
|
||
}
|
||
>
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{capabilities.map((capability) => (
|
||
<SelectItem key={capability} value={capability}>
|
||
{capability}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</Field>
|
||
<Field label="接口类型" required>
|
||
<Select
|
||
value={draft.interfaceType}
|
||
onValueChange={selectDefinition}
|
||
>
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue placeholder="请选择接口类型" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{availableDefinitions.map((definition) => (
|
||
<SelectItem
|
||
key={definition.interfaceType}
|
||
value={definition.interfaceType}
|
||
>
|
||
{definition.name}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</Field>
|
||
</div>
|
||
{draft.capability === "LLM" && (
|
||
<div className="flex items-center justify-between rounded-xl border border-hairline p-4">
|
||
<span className="text-sm font-medium">支持图片输入</span>
|
||
<Switch
|
||
checked={draft.supportImageInput}
|
||
onCheckedChange={(checked) =>
|
||
setDraft((previous) => ({
|
||
...previous,
|
||
supportImageInput: checked,
|
||
}))
|
||
}
|
||
/>
|
||
</div>
|
||
)}
|
||
</FieldSection>
|
||
|
||
<FieldSection title="连接与鉴权信息" scrollable fill>
|
||
{connectionFields.map((field) => (
|
||
<DynamicField
|
||
key={`${field.group}-${field.key}`}
|
||
field={field}
|
||
value={fieldValue(draft, field)}
|
||
storedValueMask={secretMask(storedSecretMasks, field)}
|
||
onChange={(value) => updateField(field, value)}
|
||
/>
|
||
))}
|
||
</FieldSection>
|
||
</div>
|
||
|
||
<FieldSection title="可选项" scrollable tall>
|
||
{draft.capability === "LLM" && (
|
||
<Field label="Extra Body">
|
||
<Textarea
|
||
rows={7}
|
||
value={extraBodyDraft}
|
||
onChange={(event) => {
|
||
setExtraBodyDraft(event.target.value);
|
||
setTestResult(null);
|
||
}}
|
||
placeholder={'例如：{\n "thinking": { "type": "disabled" }\n}'}
|
||
className="font-mono text-xs leading-5"
|
||
/>
|
||
{extraBodyError && (
|
||
<div className="text-xs text-destructive">
|
||
{extraBodyError}
|
||
</div>
|
||
)}
|
||
</Field>
|
||
)}
|
||
{optionalFields.length > 0 ? (
|
||
optionalFields.map((field) => (
|
||
<DynamicField
|
||
key={`${field.group}-${field.key}`}
|
||
field={field}
|
||
value={fieldValue(draft, field)}
|
||
storedValueMask={secretMask(storedSecretMasks, field)}
|
||
onChange={(value) => updateField(field, value)}
|
||
/>
|
||
))
|
||
) : draft.capability === "LLM" ? null : (
|
||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
||
当前接口没有可选项
|
||
</div>
|
||
)}
|
||
</FieldSection>
|
||
</div>
|
||
|
||
{saveError && <div className="text-sm text-destructive">{saveError}</div>}
|
||
|
||
<DialogFooter className="sm:items-center sm:justify-between">
|
||
<div className="flex min-w-0 items-center gap-3">
|
||
<Button
|
||
variant="outline"
|
||
className="shrink-0 gap-2"
|
||
disabled={!canSave || testing}
|
||
onClick={() => void testConnection()}
|
||
>
|
||
{testing ? (
|
||
<Loader2 size={14} className="animate-spin" />
|
||
) : (
|
||
<Plug size={14} />
|
||
)}
|
||
测试连接
|
||
</Button>
|
||
{testResult && (
|
||
<span
|
||
className={[
|
||
"flex min-w-0 items-center gap-1.5 text-xs",
|
||
testResult.ok ? "text-emerald-500" : "text-destructive",
|
||
].join(" ")}
|
||
title={testResult.message}
|
||
>
|
||
{testResult.ok ? (
|
||
<CheckCircle2 size={14} className="shrink-0" />
|
||
) : (
|
||
<XCircle size={14} className="shrink-0" />
|
||
)}
|
||
<span className="truncate">{testResult.message}</span>
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||
取消
|
||
</Button>
|
||
<Button disabled={!canSave || saving} onClick={() => void save()}>
|
||
{saving && <Loader2 size={14} className="animate-spin" />}
|
||
保存
|
||
</Button>
|
||
</div>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Field({
|
||
label,
|
||
required,
|
||
children,
|
||
}: {
|
||
label: string;
|
||
required?: boolean;
|
||
children: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<label className="block space-y-2">
|
||
<span className="text-sm font-medium">
|
||
{label}
|
||
{required && <span className="ml-1 text-destructive">*</span>}
|
||
</span>
|
||
{children}
|
||
</label>
|
||
);
|
||
}
|
||
|
||
function FieldSection({
|
||
title,
|
||
scrollable,
|
||
tall,
|
||
fill,
|
||
children,
|
||
}: {
|
||
title: string;
|
||
scrollable?: boolean;
|
||
tall?: boolean;
|
||
fill?: boolean;
|
||
children: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<section
|
||
className={[
|
||
"rounded-xl border border-hairline bg-surface-strong/20",
|
||
tall ? "lg:flex lg:h-[38rem] lg:flex-col" : "",
|
||
fill ? "lg:flex lg:min-h-0 lg:flex-1 lg:flex-col" : "",
|
||
].join(" ")}
|
||
>
|
||
<div className="border-b border-hairline px-4 py-3 text-sm font-medium">
|
||
{title}
|
||
</div>
|
||
<div
|
||
className={[
|
||
"space-y-4 p-4",
|
||
scrollable ? "max-h-72 overflow-y-auto" : "",
|
||
tall ? "lg:max-h-none lg:flex-1" : "",
|
||
fill ? "lg:min-h-0 lg:max-h-none lg:flex-1" : "",
|
||
].join(" ")}
|
||
>
|
||
{children}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function DynamicField({
|
||
field,
|
||
value,
|
||
storedValueMask,
|
||
onChange,
|
||
}: {
|
||
field: InterfaceField;
|
||
value: unknown;
|
||
storedValueMask?: string;
|
||
onChange: (value: unknown) => void;
|
||
}) {
|
||
const [showPassword, setShowPassword] = useState(false);
|
||
|
||
if (field.type === "boolean") {
|
||
return (
|
||
<div className="flex items-center justify-between rounded-xl border border-hairline p-4">
|
||
<span className="text-sm font-medium">{field.label}</span>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant={Boolean(value) ? "default" : "outline"}
|
||
onClick={() => onChange(!Boolean(value))}
|
||
>
|
||
{Boolean(value) ? "开启" : "关闭"}
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (field.type === "select") {
|
||
return (
|
||
<Field label={field.label} required={field.required}>
|
||
<Select value={String(value ?? "")} onValueChange={onChange}>
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{(field.options ?? []).map((option) => (
|
||
<SelectItem key={option} value={option}>
|
||
{option}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</Field>
|
||
);
|
||
}
|
||
|
||
if (field.type === "password") {
|
||
const inputValue = String(value ?? "");
|
||
const hasStoredValue = Boolean(storedValueMask);
|
||
|
||
return (
|
||
<Field label={field.label} required={field.required}>
|
||
{hasStoredValue && (
|
||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||
<span>当前密钥</span>
|
||
<code className="rounded-md bg-surface-strong px-2 py-1 font-mono text-foreground">
|
||
{storedValueMask}
|
||
</code>
|
||
</div>
|
||
)}
|
||
<div className="relative">
|
||
<Input
|
||
type={showPassword ? "text" : "password"}
|
||
value={inputValue}
|
||
onChange={(event) => {
|
||
const nextValue = event.target.value;
|
||
if (!nextValue) setShowPassword(false);
|
||
onChange(nextValue);
|
||
}}
|
||
placeholder={
|
||
hasStoredValue ? "已配置，留空则保持不变" : undefined
|
||
}
|
||
autoComplete="new-password"
|
||
className="pr-10"
|
||
/>
|
||
<button
|
||
type="button"
|
||
disabled={!inputValue}
|
||
onClick={() => setShowPassword((current) => !current)}
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-soft transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40"
|
||
aria-label={showPassword ? "隐藏密钥" : "显示密钥"}
|
||
>
|
||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||
</button>
|
||
</div>
|
||
{hasStoredValue && (
|
||
<p className="text-xs leading-5 text-muted-foreground">
|
||
仅显示当前密钥首尾用于识别。留空可保持原密钥，输入新值将覆盖原密钥。
|
||
</p>
|
||
)}
|
||
</Field>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Field label={field.label} required={field.required}>
|
||
<Input
|
||
type={
|
||
field.type === "number"
|
||
? "number"
|
||
: field.type === "url"
|
||
? "url"
|
||
: "text"
|
||
}
|
||
value={String(value ?? "")}
|
||
onChange={(event) =>
|
||
onChange(
|
||
field.type === "number"
|
||
? Number(event.target.value)
|
||
: event.target.value,
|
||
)
|
||
}
|
||
/>
|
||
</Field>
|
||
);
|
||
}
|