961 lines
30 KiB
TypeScript
961 lines
30 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
import {
|
||
ChevronDown,
|
||
ChevronUp,
|
||
Copy,
|
||
Loader2,
|
||
MoreHorizontal,
|
||
Pencil,
|
||
Plus,
|
||
Trash2,
|
||
} from "lucide-react";
|
||
|
||
import { McpServersSection } from "@/components/tools/McpServersSection";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { DataList, type DataListColumn } from "@/components/ui/data-list";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuTrigger,
|
||
} from "@/components/ui/dropdown-menu";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import { Input } from "@/components/ui/input";
|
||
import { FilterPills } from "@/components/ui/filter-pills";
|
||
import { ListToolbar } from "@/components/ui/list-toolbar";
|
||
import { PageHeader } from "@/components/ui/page-header";
|
||
import { SearchInput } from "@/components/ui/search-input";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { Switch } from "@/components/ui/switch";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import {
|
||
toolsApi,
|
||
type HttpToolDefinition,
|
||
type Tool,
|
||
type ToolParameter,
|
||
type ToolStatus,
|
||
type ToolUpsert,
|
||
} from "@/lib/api";
|
||
|
||
type ToolKind = "end_call" | "http" | "mcp";
|
||
type HttpMethod = HttpToolDefinition["config"]["method"];
|
||
type ToolFilter = "全部" | "End Call" | "HTTP" | "MCP";
|
||
type SortOrder = "newest" | "oldest";
|
||
|
||
const toolFilters: readonly ToolFilter[] = ["全部", "End Call", "HTTP", "MCP"];
|
||
|
||
type ToolForm = {
|
||
name: string;
|
||
functionName: string;
|
||
type: ToolKind;
|
||
description: string;
|
||
status: ToolStatus;
|
||
messageType: "none" | "custom";
|
||
customMessage: string;
|
||
captureReason: boolean;
|
||
method: HttpMethod;
|
||
url: string;
|
||
timeoutSeconds: string;
|
||
headers: string;
|
||
secretHeaders: string;
|
||
parameters: string;
|
||
body: string;
|
||
dynamicVariableAssignments: string;
|
||
secretDynamicVariables: string;
|
||
mcpServerId: string;
|
||
remoteToolName: string;
|
||
inputSchema: string;
|
||
schemaHash: string;
|
||
};
|
||
|
||
const EMPTY_OBJECT = "{}";
|
||
const EMPTY_ARRAY = "[]";
|
||
|
||
function blankForm(): ToolForm {
|
||
return {
|
||
name: "",
|
||
functionName: "",
|
||
type: "end_call",
|
||
description: "",
|
||
status: "active",
|
||
messageType: "none",
|
||
customMessage: "",
|
||
captureReason: true,
|
||
method: "GET",
|
||
url: "",
|
||
timeoutSeconds: "15",
|
||
headers: EMPTY_OBJECT,
|
||
secretHeaders: EMPTY_OBJECT,
|
||
parameters: EMPTY_ARRAY,
|
||
body: EMPTY_OBJECT,
|
||
dynamicVariableAssignments: EMPTY_OBJECT,
|
||
secretDynamicVariables: EMPTY_OBJECT,
|
||
mcpServerId: "",
|
||
remoteToolName: "",
|
||
inputSchema: EMPTY_OBJECT,
|
||
schemaHash: "",
|
||
};
|
||
}
|
||
|
||
function pretty(value: unknown, fallback: string): string {
|
||
return JSON.stringify(value ?? JSON.parse(fallback), null, 2);
|
||
}
|
||
|
||
function formFromTool(tool: Tool): ToolForm {
|
||
const base = { ...blankForm(), name: tool.name, functionName: tool.functionName };
|
||
base.type = tool.type;
|
||
base.description = tool.description;
|
||
base.status = tool.status;
|
||
if (tool.definition.type === "end_call") {
|
||
base.messageType = tool.definition.config.messageType;
|
||
base.customMessage = tool.definition.config.customMessage;
|
||
base.captureReason = tool.definition.config.captureReason;
|
||
return base;
|
||
}
|
||
if (tool.definition.type === "mcp") {
|
||
base.mcpServerId = tool.mcpServerId ?? "";
|
||
base.remoteToolName = tool.definition.config.remoteToolName;
|
||
base.inputSchema = pretty(tool.definition.config.inputSchema, EMPTY_OBJECT);
|
||
base.schemaHash = tool.definition.config.schemaHash;
|
||
base.dynamicVariableAssignments = pretty(
|
||
tool.definition.config.dynamicVariableAssignments ?? {},
|
||
EMPTY_OBJECT,
|
||
);
|
||
return base;
|
||
}
|
||
base.method = tool.definition.config.method;
|
||
base.url = tool.definition.config.url;
|
||
base.timeoutSeconds = String(tool.definition.config.timeoutSeconds);
|
||
base.headers = pretty(tool.definition.config.headers, EMPTY_OBJECT);
|
||
base.parameters = pretty(tool.definition.config.parameters, EMPTY_ARRAY);
|
||
base.body = pretty(tool.definition.config.body, EMPTY_OBJECT);
|
||
base.dynamicVariableAssignments = pretty(
|
||
tool.definition.config.dynamicVariableAssignments ?? {},
|
||
EMPTY_OBJECT,
|
||
);
|
||
const secrets = tool.secrets as {
|
||
headers?: Record<string, string>;
|
||
dynamic_variables?: Record<string, string>;
|
||
};
|
||
base.secretHeaders = pretty(secrets.headers ?? {}, EMPTY_OBJECT);
|
||
base.secretDynamicVariables = pretty(
|
||
secrets.dynamic_variables ?? {},
|
||
EMPTY_OBJECT,
|
||
);
|
||
return base;
|
||
}
|
||
|
||
function parseObject(value: string, label: string): Record<string, unknown> {
|
||
let parsed: unknown;
|
||
try {
|
||
parsed = JSON.parse(value || EMPTY_OBJECT);
|
||
} catch {
|
||
throw new Error(`${label}不是有效的 JSON`);
|
||
}
|
||
if (!parsed || Array.isArray(parsed) || typeof parsed !== "object") {
|
||
throw new Error(`${label}必须是 JSON 对象`);
|
||
}
|
||
return parsed as Record<string, unknown>;
|
||
}
|
||
|
||
function parseParameters(value: string): ToolParameter[] {
|
||
let parsed: unknown;
|
||
try {
|
||
parsed = JSON.parse(value || EMPTY_ARRAY);
|
||
} catch {
|
||
throw new Error("参数定义不是有效的 JSON");
|
||
}
|
||
if (!Array.isArray(parsed)) throw new Error("参数定义必须是 JSON 数组");
|
||
return parsed as ToolParameter[];
|
||
}
|
||
|
||
function functionNameFrom(value: string): string {
|
||
return value
|
||
.trim()
|
||
.toLowerCase()
|
||
.replace(/[^a-z0-9]+/g, "_")
|
||
.replace(/^_+|_+$/g, "")
|
||
.slice(0, 64);
|
||
}
|
||
|
||
function payloadFromForm(form: ToolForm): ToolUpsert {
|
||
if (!form.name.trim()) throw new Error("请输入工具名称");
|
||
if (!/^[a-z][a-z0-9_]{0,63}$/.test(form.functionName)) {
|
||
throw new Error("函数名必须以小写字母开头，且只能包含小写字母、数字和下划线");
|
||
}
|
||
|
||
if (form.type === "end_call") {
|
||
return {
|
||
name: form.name.trim(),
|
||
functionName: form.functionName,
|
||
description: form.description.trim(),
|
||
status: form.status,
|
||
secrets: {},
|
||
definition: {
|
||
schemaVersion: 1,
|
||
type: "end_call",
|
||
config: {
|
||
messageType: form.messageType,
|
||
customMessage: form.messageType === "custom" ? form.customMessage : "",
|
||
captureReason: form.captureReason,
|
||
},
|
||
},
|
||
};
|
||
}
|
||
if (form.type === "mcp") {
|
||
return {
|
||
name: form.name.trim(),
|
||
functionName: form.functionName,
|
||
description: form.description.trim(),
|
||
status: form.status,
|
||
mcpServerId: form.mcpServerId,
|
||
secrets: {},
|
||
definition: {
|
||
schemaVersion: 1,
|
||
type: "mcp",
|
||
config: {
|
||
remoteToolName: form.remoteToolName,
|
||
inputSchema: parseObject(form.inputSchema, "MCP Input Schema"),
|
||
schemaHash: form.schemaHash,
|
||
dynamicVariableAssignments: parseObject(
|
||
form.dynamicVariableAssignments,
|
||
"变量赋值",
|
||
) as Record<string, string>,
|
||
},
|
||
},
|
||
};
|
||
}
|
||
|
||
const timeoutSeconds = Number(form.timeoutSeconds);
|
||
if (!Number.isInteger(timeoutSeconds) || timeoutSeconds < 1 || timeoutSeconds > 120) {
|
||
throw new Error("超时时间必须是 1 到 120 秒之间的整数");
|
||
}
|
||
const headers = parseObject(form.headers, "Header");
|
||
const secretHeaders = parseObject(form.secretHeaders, "敏感 Header");
|
||
const body = parseObject(form.body, "固定 Body");
|
||
const dynamicVariableAssignments = parseObject(
|
||
form.dynamicVariableAssignments,
|
||
"变量赋值",
|
||
);
|
||
const secretDynamicVariables = parseObject(
|
||
form.secretDynamicVariables,
|
||
"密钥变量",
|
||
);
|
||
const parameters = parseParameters(form.parameters);
|
||
return {
|
||
name: form.name.trim(),
|
||
functionName: form.functionName,
|
||
description: form.description.trim(),
|
||
status: form.status,
|
||
definition: {
|
||
schemaVersion: 1,
|
||
type: "http",
|
||
config: {
|
||
method: form.method,
|
||
url: form.url.trim(),
|
||
timeoutSeconds,
|
||
headers: headers as Record<string, string>,
|
||
parameters,
|
||
body,
|
||
dynamicVariableAssignments: dynamicVariableAssignments as Record<string, string>,
|
||
},
|
||
},
|
||
secrets: {
|
||
headers: secretHeaders,
|
||
dynamic_variables: secretDynamicVariables,
|
||
},
|
||
};
|
||
}
|
||
|
||
function formatTimestamp(value?: string | null): string {
|
||
if (!value) return "—";
|
||
return new Intl.DateTimeFormat("zh-CN", {
|
||
year: "numeric",
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
}).format(new Date(value));
|
||
}
|
||
|
||
function updatedAtValue(value?: string | null): number {
|
||
const time = value ? new Date(value).getTime() : NaN;
|
||
return Number.isNaN(time) ? 0 : time;
|
||
}
|
||
|
||
export function ComponentsToolsPage() {
|
||
const [tools, setTools] = useState<Tool[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [search, setSearch] = useState("");
|
||
const [filter, setFilter] = useState<ToolFilter>("全部");
|
||
const [sortOrder, setSortOrder] = useState<SortOrder>("newest");
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [dialogOpen, setDialogOpen] = useState(false);
|
||
const [editing, setEditing] = useState<Tool | null>(null);
|
||
const [form, setForm] = useState<ToolForm>(blankForm);
|
||
const [saving, setSaving] = useState(false);
|
||
const [formError, setFormError] = useState<string | null>(null);
|
||
const [functionNameTouched, setFunctionNameTouched] = useState(false);
|
||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||
const [duplicatingId, setDuplicatingId] = useState<string | null>(null);
|
||
|
||
const loadTools = useCallback(async () => {
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
setTools(await toolsApi.list());
|
||
} catch (loadError) {
|
||
setError(loadError instanceof Error ? loadError.message : "加载工具失败");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||
void loadTools();
|
||
}, [loadTools]);
|
||
|
||
const filteredTools = useMemo(() => {
|
||
const query = search.trim().toLowerCase();
|
||
return tools.filter((tool) =>
|
||
(filter === "全部" ||
|
||
(filter === "End Call" && tool.type === "end_call") ||
|
||
(filter === "HTTP" && tool.type === "http") ||
|
||
(filter === "MCP" && tool.type === "mcp")) &&
|
||
(!query ||
|
||
[tool.name, tool.functionName, tool.description].some((value) =>
|
||
value.toLowerCase().includes(query),
|
||
)),
|
||
);
|
||
}, [filter, search, tools]);
|
||
|
||
const sortedTools = useMemo(() => {
|
||
return [...filteredTools].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);
|
||
});
|
||
}, [filteredTools, sortOrder]);
|
||
|
||
const pageSize = 5;
|
||
const totalPages = Math.max(1, Math.ceil(sortedTools.length / pageSize));
|
||
const safeCurrentPage = Math.min(currentPage, totalPages);
|
||
const pageStart = (safeCurrentPage - 1) * pageSize;
|
||
const pageEnd = pageStart + pageSize;
|
||
const paginatedTools = sortedTools.slice(pageStart, pageEnd);
|
||
|
||
function changeFilter(value: ToolFilter) {
|
||
setFilter(value);
|
||
setCurrentPage(1);
|
||
}
|
||
|
||
function changeSearch(value: string) {
|
||
setSearch(value);
|
||
setCurrentPage(1);
|
||
}
|
||
|
||
function openCreate() {
|
||
setEditing(null);
|
||
setForm(blankForm());
|
||
setFunctionNameTouched(false);
|
||
setFormError(null);
|
||
setDialogOpen(true);
|
||
}
|
||
|
||
function openEdit(tool: Tool) {
|
||
setEditing(tool);
|
||
setForm(formFromTool(tool));
|
||
setFunctionNameTouched(true);
|
||
setFormError(null);
|
||
setDialogOpen(true);
|
||
}
|
||
|
||
async function saveTool() {
|
||
if (saving) return;
|
||
setSaving(true);
|
||
setFormError(null);
|
||
try {
|
||
const payload = payloadFromForm(form);
|
||
if (editing) await toolsApi.update(editing.id, payload);
|
||
else await toolsApi.create(payload);
|
||
setDialogOpen(false);
|
||
await loadTools();
|
||
} catch (saveError) {
|
||
setFormError(saveError instanceof Error ? saveError.message : "保存失败");
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}
|
||
|
||
async function removeTool(tool: Tool) {
|
||
if (!window.confirm(`确认删除工具“${tool.name}”？`)) return;
|
||
setDeletingId(tool.id);
|
||
try {
|
||
await toolsApi.remove(tool.id);
|
||
await loadTools();
|
||
} catch (removeError) {
|
||
setError(removeError instanceof Error ? removeError.message : "删除失败");
|
||
} finally {
|
||
setDeletingId(null);
|
||
}
|
||
}
|
||
|
||
async function duplicateTool(id: string) {
|
||
setDuplicatingId(id);
|
||
try {
|
||
await toolsApi.duplicate(id);
|
||
await loadTools();
|
||
} catch (duplicateError) {
|
||
setError(duplicateError instanceof Error ? duplicateError.message : "复制失败");
|
||
} finally {
|
||
setDuplicatingId(null);
|
||
}
|
||
}
|
||
|
||
const columns: DataListColumn<Tool>[] = [
|
||
{
|
||
key: "name",
|
||
header: "工具名称",
|
||
width: "md:w-[360px]",
|
||
cell: (tool) => (
|
||
<>
|
||
<div className="flex min-w-0 items-center gap-2">
|
||
<span className="truncate font-medium text-foreground">{tool.name}</span>
|
||
</div>
|
||
<div className="mt-1 truncate font-mono text-xs text-muted-soft">
|
||
{tool.functionName}
|
||
</div>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
key: "type",
|
||
header: "类型",
|
||
width: "md:w-[128px]",
|
||
cell: (tool) => (
|
||
<Badge
|
||
variant="secondary"
|
||
className="h-6 bg-surface-strong px-3 text-muted-foreground"
|
||
>
|
||
{tool.type === "end_call"
|
||
? "End Call"
|
||
: tool.type === "mcp"
|
||
? "MCP"
|
||
: "HTTP"}
|
||
</Badge>
|
||
),
|
||
},
|
||
{
|
||
key: "status",
|
||
header: "状态",
|
||
width: "md:w-[156px]",
|
||
cell: (tool) => (
|
||
<Badge variant="outline" className="h-6 px-3">
|
||
{tool.status === "active" ? "启用" : tool.status === "draft" ? "草稿" : "已归档"}
|
||
</Badge>
|
||
),
|
||
},
|
||
{
|
||
key: "updated",
|
||
width: "md:w-[176px]",
|
||
header: (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setSortOrder((current) => (current === "newest" ? "oldest" : "newest"));
|
||
setCurrentPage(1);
|
||
}}
|
||
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: (tool) => formatTimestamp(tool.updatedAt),
|
||
},
|
||
{
|
||
key: "actions",
|
||
header: "操作",
|
||
align: "right",
|
||
cellClassName: "flex justify-end gap-2",
|
||
cell: (tool) => (
|
||
<>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="gap-1.5 border-hairline-strong text-xs text-muted-foreground hover:text-foreground"
|
||
onClick={() => openEdit(tool)}
|
||
>
|
||
<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={`${tool.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 === tool.id || tool.type === "mcp"}
|
||
onSelect={(event) => {
|
||
event.preventDefault();
|
||
void duplicateTool(tool.id);
|
||
}}
|
||
>
|
||
{duplicatingId === tool.id ? (
|
||
<Loader2 size={14} className="animate-spin" />
|
||
) : (
|
||
<Copy size={14} />
|
||
)}
|
||
复制
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
variant="destructive"
|
||
className="rounded-lg"
|
||
disabled={deletingId === tool.id}
|
||
onSelect={(event) => {
|
||
event.preventDefault();
|
||
void removeTool(tool);
|
||
}}
|
||
>
|
||
{deletingId === tool.id ? (
|
||
<Loader2 size={14} className="animate-spin" />
|
||
) : (
|
||
<Trash2 size={14} />
|
||
)}
|
||
删除
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</>
|
||
),
|
||
},
|
||
];
|
||
|
||
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>
|
||
}
|
||
/>
|
||
|
||
<McpServersSection onToolsChanged={loadTools} />
|
||
|
||
<section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
|
||
<ListToolbar
|
||
filters={
|
||
<FilterPills options={toolFilters} value={filter} onChange={changeFilter} />
|
||
}
|
||
search={
|
||
<SearchInput
|
||
value={search}
|
||
onChange={changeSearch}
|
||
placeholder="搜索名称、函数名或描述"
|
||
className="lg:w-[320px]"
|
||
/>
|
||
}
|
||
/>
|
||
<DataList<Tool>
|
||
columns={columns}
|
||
rows={paginatedTools}
|
||
rowKey={(tool) => tool.id}
|
||
loading={loading}
|
||
loadingText="正在加载工具…"
|
||
error={error}
|
||
onRetry={() => void loadTools()}
|
||
empty={{
|
||
title: tools.length === 0 ? "暂无工具资源" : "未找到匹配的工具资源",
|
||
description:
|
||
tools.length === 0
|
||
? "点击右上角「添加工具」开始。"
|
||
: "请调整关键词或筛选条件后再试。",
|
||
}}
|
||
pagination={{
|
||
page: safeCurrentPage,
|
||
totalPages,
|
||
onPageChange: setCurrentPage,
|
||
summary:
|
||
filteredTools.length === 0
|
||
? "没有数据"
|
||
: `显示 ${pageStart + 1}-${Math.min(pageEnd, filteredTools.length)} / 共 ${filteredTools.length} 个工具资源`,
|
||
}}
|
||
/>
|
||
</section>
|
||
|
||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||
<DialogContent className="max-h-[calc(100vh-3rem)] overflow-y-auto sm:max-w-6xl lg:overflow-hidden">
|
||
<DialogHeader>
|
||
<DialogTitle>{editing ? "编辑工具资源" : "添加工具资源"}</DialogTitle>
|
||
<DialogDescription>
|
||
左侧配置工具的固定信息，右侧参数会随工具类型更新。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="grid gap-5 lg:grid-cols-2">
|
||
<FieldSection title="基本信息" tall>
|
||
<Field label="工具名称" required>
|
||
<Input
|
||
value={form.name}
|
||
onChange={(event) => {
|
||
const name = event.target.value;
|
||
setForm((current) => ({
|
||
...current,
|
||
name,
|
||
functionName: functionNameTouched
|
||
? current.functionName
|
||
: functionNameFrom(name),
|
||
}));
|
||
}}
|
||
/>
|
||
</Field>
|
||
<Field label="函数名" required>
|
||
<Input
|
||
value={form.functionName}
|
||
onChange={(event) => {
|
||
setFunctionNameTouched(true);
|
||
setForm((current) => ({ ...current, functionName: event.target.value }));
|
||
}}
|
||
placeholder="query_order"
|
||
/>
|
||
</Field>
|
||
<Field label="工具类型" required>
|
||
<Select
|
||
value={form.type}
|
||
disabled={form.type === "mcp"}
|
||
onValueChange={(type: ToolKind) =>
|
||
setForm((current) => ({ ...current, type }))
|
||
}
|
||
>
|
||
<SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="end_call">End Call</SelectItem>
|
||
<SelectItem value="http">HTTP</SelectItem>
|
||
<SelectItem value="mcp" disabled={!editing || form.type !== "mcp"}>
|
||
MCP（由 Server 同步）
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</Field>
|
||
<Field label="状态">
|
||
<Select
|
||
value={form.status}
|
||
onValueChange={(status: ToolStatus) =>
|
||
setForm((current) => ({ ...current, status }))
|
||
}
|
||
>
|
||
<SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="active">启用</SelectItem>
|
||
<SelectItem value="draft">草稿</SelectItem>
|
||
<SelectItem value="archived">归档</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</Field>
|
||
<Field label="描述">
|
||
<Textarea
|
||
value={form.description}
|
||
onChange={(event) =>
|
||
setForm((current) => ({ ...current, description: event.target.value }))
|
||
}
|
||
rows={5}
|
||
/>
|
||
</Field>
|
||
</FieldSection>
|
||
|
||
<FieldSection title="参数配置" scrollable tall>
|
||
{form.type === "end_call" ? (
|
||
<EndCallFields form={form} setForm={setForm} />
|
||
) : form.type === "mcp" ? (
|
||
<McpFields form={form} setForm={setForm} />
|
||
) : (
|
||
<HttpFields form={form} setForm={setForm} />
|
||
)}
|
||
</FieldSection>
|
||
</div>
|
||
|
||
{formError && <div className="text-sm text-destructive">{formError}</div>}
|
||
|
||
<DialogFooter>
|
||
<div className="flex items-center gap-2">
|
||
<Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
|
||
<Button onClick={() => void saveTool()} disabled={saving}>
|
||
{saving && <Loader2 size={15} className="animate-spin" />}
|
||
保存
|
||
</Button>
|
||
</div>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EndCallFields({
|
||
form,
|
||
setForm,
|
||
}: {
|
||
form: ToolForm;
|
||
setForm: React.Dispatch<React.SetStateAction<ToolForm>>;
|
||
}) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<Field label="结束语">
|
||
<Select
|
||
value={form.messageType}
|
||
onValueChange={(messageType: "none" | "custom") =>
|
||
setForm((current) => ({ ...current, messageType }))
|
||
}
|
||
>
|
||
<SelectTrigger className="w-full border-hairline-strong bg-background"><SelectValue /></SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="none">不播放固定结束语</SelectItem>
|
||
<SelectItem value="custom">自定义结束语</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</Field>
|
||
{form.messageType === "custom" && (
|
||
<Field label="自定义结束语">
|
||
<Textarea
|
||
value={form.customMessage}
|
||
onChange={(event) =>
|
||
setForm((current) => ({ ...current, customMessage: event.target.value }))
|
||
}
|
||
rows={3}
|
||
/>
|
||
</Field>
|
||
)}
|
||
<div className="flex items-center justify-between gap-4 rounded-lg border border-hairline-strong px-4 py-3">
|
||
<div>
|
||
<div className="font-medium text-foreground">记录结束原因</div>
|
||
<div className="mt-0.5 text-xs text-muted-foreground">要求模型在调用时提供 reason 参数</div>
|
||
</div>
|
||
<Switch
|
||
checked={form.captureReason}
|
||
onCheckedChange={(captureReason) =>
|
||
setForm((current) => ({ ...current, captureReason }))
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function McpFields({
|
||
form,
|
||
setForm,
|
||
}: {
|
||
form: ToolForm;
|
||
setForm: React.Dispatch<React.SetStateAction<ToolForm>>;
|
||
}) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="rounded-xl border border-hairline bg-canvas-soft px-4 py-3 text-sm text-muted-foreground">
|
||
连接和参数 Schema 由 MCP Server 同步维护；这里仅配置本地名称、状态和结果变量赋值。
|
||
</div>
|
||
<Field label="远端工具名称">
|
||
<Input value={form.remoteToolName} disabled className="font-mono" />
|
||
</Field>
|
||
<Field label="MCP Server ID">
|
||
<Input value={form.mcpServerId} disabled className="font-mono" />
|
||
</Field>
|
||
<JsonField
|
||
label="Input Schema（只读）"
|
||
value={form.inputSchema}
|
||
onChange={() => undefined}
|
||
rows={10}
|
||
disabled
|
||
/>
|
||
<JsonField
|
||
label="响应变量赋值"
|
||
value={form.dynamicVariableAssignments}
|
||
onChange={(dynamicVariableAssignments) =>
|
||
setForm((current) => ({ ...current, dynamicVariableAssignments }))
|
||
}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function HttpFields({
|
||
form,
|
||
setForm,
|
||
}: {
|
||
form: ToolForm;
|
||
setForm: React.Dispatch<React.SetStateAction<ToolForm>>;
|
||
}) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="grid gap-4 sm:grid-cols-[140px_1fr]">
|
||
<Field label="方法">
|
||
<Select
|
||
value={form.method}
|
||
onValueChange={(method: HttpMethod) =>
|
||
setForm((current) => ({ ...current, method }))
|
||
}
|
||
>
|
||
<SelectTrigger className="w-full border-hairline-strong bg-background"><SelectValue /></SelectTrigger>
|
||
<SelectContent>
|
||
{(["GET", "POST", "PUT", "PATCH", "DELETE"] as HttpMethod[]).map((method) => (
|
||
<SelectItem key={method} value={method}>{method}</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</Field>
|
||
<Field label="URL">
|
||
<Input
|
||
value={form.url}
|
||
onChange={(event) => setForm((current) => ({ ...current, url: event.target.value }))}
|
||
placeholder="https://api.example.com/orders/{order_id}"
|
||
/>
|
||
</Field>
|
||
</div>
|
||
<Field label="超时时间（秒）">
|
||
<Input
|
||
type="number"
|
||
min={1}
|
||
max={120}
|
||
value={form.timeoutSeconds}
|
||
onChange={(event) =>
|
||
setForm((current) => ({ ...current, timeoutSeconds: event.target.value }))
|
||
}
|
||
/>
|
||
</Field>
|
||
<JsonField label="Header" value={form.headers} onChange={(headers) => setForm((current) => ({ ...current, headers }))} />
|
||
<JsonField label="敏感 Header" value={form.secretHeaders} onChange={(secretHeaders) => setForm((current) => ({ ...current, secretHeaders }))} />
|
||
<JsonField label="参数定义" value={form.parameters} onChange={(parameters) => setForm((current) => ({ ...current, parameters }))} rows={6} />
|
||
<JsonField label="固定 Body" value={form.body} onChange={(body) => setForm((current) => ({ ...current, body }))} />
|
||
<JsonField
|
||
label="响应变量赋值"
|
||
value={form.dynamicVariableAssignments}
|
||
onChange={(dynamicVariableAssignments) =>
|
||
setForm((current) => ({ ...current, dynamicVariableAssignments }))
|
||
}
|
||
/>
|
||
<JsonField
|
||
label="密钥变量"
|
||
value={form.secretDynamicVariables}
|
||
onChange={(secretDynamicVariables) =>
|
||
setForm((current) => ({ ...current, secretDynamicVariables }))
|
||
}
|
||
/>
|
||
</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 text-foreground">
|
||
{label}
|
||
{required && <span className="ml-1 text-destructive">*</span>}
|
||
</span>
|
||
{children}
|
||
</label>
|
||
);
|
||
}
|
||
|
||
function FieldSection({
|
||
title,
|
||
scrollable,
|
||
tall,
|
||
children,
|
||
}: {
|
||
title: string;
|
||
scrollable?: boolean;
|
||
tall?: 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" : "",
|
||
].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" : "",
|
||
].join(" ")}
|
||
>
|
||
{children}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function JsonField({
|
||
label,
|
||
value,
|
||
onChange,
|
||
rows = 4,
|
||
disabled = false,
|
||
}: {
|
||
label: string;
|
||
value: string;
|
||
onChange: (value: string) => void;
|
||
rows?: number;
|
||
disabled?: boolean;
|
||
}) {
|
||
return (
|
||
<Field label={label}>
|
||
<Textarea
|
||
value={value}
|
||
onChange={(event) => onChange(event.target.value)}
|
||
rows={rows}
|
||
disabled={disabled}
|
||
className="font-mono text-xs"
|
||
spellCheck={false}
|
||
/>
|
||
</Field>
|
||
);
|
||
}
|