wx44wx/ai-video-fullstack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add system tools and state updates

Browse Source
This commit is contained in:
Xin Wang
2026-08-04 15:27:39 +08:00
parent 5bf5987fe4
commit 731a372df9
33 changed files with 1787 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/assistant-editor/dynamic-variables.tsx
View File

@@ -3,7 +3,6 @@
import { Check, Copy } from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import {
Select,
@@ -252,12 +251,18 @@ function DynamicVariablesEditor({
<code className="truncate font-mono text-sm font-medium text-foreground">
{`{{${name}}}`}
</code>
<Badge
variant="secondary"
className="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium"
>
已引用
</Badge>
<div className="flex shrink-0 items-center gap-2">
<span className="text-xs text-muted-foreground">
会话开始时必须提供
</span>
<Switch
checked={definition.required}
aria-label={`变量 ${name} 必填`}
onCheckedChange={(required) =>
updateDefinition(name, { required })
}
/>
</div>
</div>
<div className="grid grid-cols-[120px_1fr] gap-2">
<Select
@@ -328,18 +333,6 @@ function DynamicVariablesEditor({
/>
)}
</div>
<div className="flex items-center justify-between gap-3">
<span className="text-xs text-muted-foreground">
会话开始时必须提供
</span>
<Switch
checked={definition.required}
aria-label={`变量 ${name} 必填`}
onCheckedChange={(required) =>
updateDefinition(name, { required })
}
/>
</div>
</div>
))}
</div>

224
frontend/src/components/assistant-editor/editor-controls.tsx
View File

@@ -12,6 +12,7 @@ import {
Plus,
ServerCog,
Settings2,
Sparkles,
Waypoints,
Wrench,
X,
@@ -37,8 +38,19 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import type { KnowledgeRetrievalConfig, Tool } from "@/lib/api";
import type {
KnowledgeRetrievalConfig,
SystemToolKind,
Tool,
} from "@/lib/api";
import { SYSTEM_TOOL_OPTIONS } from "@/lib/system-tools";
import type { RuntimeMode } from "./types";
@@ -475,31 +487,90 @@ export function ToolPicker({
tools,
selectedIds,
onChange,
selectedSystemTools,
onSystemToolsChange,
showBuiltInSystemTools,
}: {
tools: Tool[];
selectedIds: string[];
onChange: (ids: string[]) => void;
selectedSystemTools: SystemToolKind[];
onSystemToolsChange: (tools: SystemToolKind[]) => void;
showBuiltInSystemTools: boolean;
}) {
const [open, setOpen] = useState(false);
const [activeTab, setActiveTab] = useState<Tool["type"]>("system");
const [draftIds, setDraftIds] = useState<string[]>(selectedIds);
const [draftSystemTools, setDraftSystemTools] =
useState<SystemToolKind[]>(selectedSystemTools);
const selectedTools = selectedIds
.map((id) => tools.find((tool) => tool.id === id))
.filter((tool): tool is Tool => Boolean(tool));
const selectedBuiltInTools = selectedSystemTools
.map((kind) => SYSTEM_TOOL_OPTIONS.find((option) => option.value === kind))
.filter((option): option is (typeof SYSTEM_TOOL_OPTIONS)[number] =>
Boolean(option),
);
function openPicker() {
setDraftIds(selectedIds);
setDraftSystemTools(selectedSystemTools);
setOpen(true);
}
function toggleResourceTool(toolId: string) {
setDraftIds((current) =>
current.includes(toolId)
? current.filter((id) => id !== toolId)
: [...current, toolId],
);
}
function toggleBuiltInTool(kind: SystemToolKind) {
setDraftSystemTools((current) =>
current.includes(kind)
? current.filter((item) => item !== kind)
: [...current, kind],
);
}
const tabs: Array<{ value: Tool["type"]; label: string }> = [
{ value: "system", label: "System" },
{ value: "http", label: "HTTP" },
{ value: "client", label: "Client" },
{ value: "mcp", label: "MCP" },
];
return (
<>
<div className="flex min-h-9 flex-wrap items-center gap-2">
{selectedBuiltInTools.map((tool) => (
<div
key={`built-in-${tool.value}`}
className="flex h-8 items-center gap-2 rounded-lg border border-hairline-strong bg-background px-2.5 text-sm"
>
<Sparkles size={14} />
<span className="max-w-48 truncate">{tool.label}</span>
<button
type="button"
onClick={() =>
onSystemToolsChange(
selectedSystemTools.filter((kind) => kind !== tool.value),
)
}
className="text-muted-soft transition-colors hover:text-foreground"
aria-label={`移除系统工具 ${tool.label}`}
>
<X size={13} />
</button>
</div>
))}
{selectedTools.map((tool) => (
<div
key={tool.id}
className="flex h-8 items-center gap-2 rounded-lg border border-hairline-strong bg-background px-2.5 text-sm"
>
{tool.type === "end_call" ? (
{tool.type === "system" ? (
<PhoneOff size={14} />
) : tool.type === "mcp" ? (
<ServerCog size={14} />
@@ -534,58 +605,108 @@ export function ToolPicker({
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle>选择工具</DialogTitle>
<DialogDescription>选择已经在工具资源中启用的工具。</DialogDescription>
<DialogDescription>
按类型选择内置系统工具或已经启用的工具资源。
</DialogDescription>
</DialogHeader>
{tools.length === 0 ? (
<div className="rounded-xl border border-dashed border-hairline-strong px-4 py-10 text-center text-sm text-muted-foreground">
暂无可用工具
</div>
) : (
<div className="max-h-80 divide-y divide-hairline overflow-y-auto rounded-xl border border-hairline">
{tools.map((tool) => {
const checked = draftIds.includes(tool.id);
return (
<label
key={tool.id}
className="flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors hover:bg-surface-strong/40"
>
<input
type="checkbox"
checked={checked}
onChange={() =>
setDraftIds((current) =>
checked
? current.filter((id) => id !== tool.id)
: [...current, tool.id],
)
}
className="size-4 accent-primary"
/>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="truncate font-medium text-foreground">
{tool.name}
</span>
<Badge variant="secondary">
{tool.type === "end_call"
? "End Call"
: tool.type === "mcp"
? "MCP"
: tool.type === "client"
? "Client"
: "HTTP"}
</Badge>
</div>
<div className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
{tool.functionName}
</div>
<Tabs
value={activeTab}
onValueChange={(value) => setActiveTab(value as Tool["type"])}
>
<TabsList
variant="line"
className="w-full justify-start border-b border-hairline px-1"
>
{tabs.map((tab) => (
<TabsTrigger
key={tab.value}
value={tab.value}
className="flex-none px-4"
>
{tab.label}
</TabsTrigger>
))}
</TabsList>
{tabs.map((tab) => {
const resources = tools.filter((tool) => tool.type === tab.value);
const hasBuiltIns =
tab.value === "system" && showBuiltInSystemTools;
const isEmpty = resources.length === 0 && !hasBuiltIns;
return (
<TabsContent key={tab.value} value={tab.value} className="pt-3">
{isEmpty ? (
<div className="rounded-xl border border-dashed border-hairline-strong px-4 py-10 text-center text-sm text-muted-foreground">
暂无可用的 {tab.label} 工具
</div>
</label>
);
})}
</div>
)}
) : (
<div className="max-h-[280px] divide-y divide-hairline overflow-y-auto rounded-xl border border-hairline">
{hasBuiltIns &&
SYSTEM_TOOL_OPTIONS.map((option) => {
const checked = draftSystemTools.includes(option.value);
return (
<label
key={`built-in-${option.value}`}
className="flex h-14 cursor-pointer items-center gap-3 px-4 transition-colors hover:bg-surface-strong/40"
>
<input
type="checkbox"
checked={checked}
onChange={() => toggleBuiltInTool(option.value)}
className="size-4 accent-primary"
/>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="truncate font-medium text-foreground">
{option.label}
</span>
<Badge variant="secondary">内置</Badge>
</div>
<div className="mt-0.5 truncate text-xs text-muted-foreground">
{option.description}
</div>
</div>
</label>
);
})}
{resources.map((tool) => {
const checked = draftIds.includes(tool.id);
return (
<label
key={tool.id}
className="flex h-14 cursor-pointer items-center gap-3 px-4 transition-colors hover:bg-surface-strong/40"
>
<input
type="checkbox"
checked={checked}
onChange={() => toggleResourceTool(tool.id)}
className="size-4 accent-primary"
/>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="truncate font-medium text-foreground">
{tool.name}
</span>
{tool.type === "system" && (
<Badge variant="secondary">资源</Badge>
)}
</div>
<div className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
{tool.functionName}
</div>
</div>
</label>
);
})}
</div>
)}
</TabsContent>
);
})}
</Tabs>
<DialogFooter>
<Button variant="outline" onClick={() => setOpen(false)}>
@@ -594,6 +715,7 @@ export function ToolPicker({
<Button
onClick={() => {
onChange(draftIds);
onSystemToolsChange(draftSystemTools);
setOpen(false);
}}
>

8
frontend/src/components/assistant-editor/prompt-editor.tsx
View File

@@ -506,6 +506,9 @@ export function PromptEditor({
openingMessage: null,
});
}
if (runtimeMode === "realtime" && form.systemTools.length) {
updateForm("systemTools", []);
}
}}
/>
@@ -602,6 +605,11 @@ export function PromptEditor({
tools={tools.filter((tool) => tool.status === "active")}
selectedIds={form.toolIds}
onChange={(toolIds) => updateForm("toolIds", toolIds)}
selectedSystemTools={form.systemTools}
onSystemToolsChange={(systemTools) =>
updateForm("systemTools", systemTools)
}
showBuiltInSystemTools={form.runtimeMode === "pipeline"}
/>
</SectionCard>
</section>

2
frontend/src/components/assistant-editor/types.ts
View File

@@ -2,6 +2,7 @@ import type {
DynamicVariableDefinition,
KnowledgeRetrievalConfig,
StartupConfig,
SystemToolKind,
TurnConfig,
} from "@/lib/api";
@@ -22,6 +23,7 @@ export type AssistantForm = {
enableInterrupt: boolean;
turnConfig: TurnConfig;
startup: StartupConfig;
systemTools: SystemToolKind[];
visionEnabled: boolean;
visionModelResourceId: string;
toolIds: string[];

6
frontend/src/components/assistant-editor/workflow-page.tsx
View File

@@ -185,6 +185,12 @@ export function WorkflowPage({
modelOptions={modelOptions}
toolOptions={toolOptions}
knowledgeOptions={kbOptions}
dynamicVariableOptions={Object.entries(
dynamicVariableDefinitions,
).map(([value, definition]) => ({
value,
label: `${value} · ${definition.type}`,
}))}
/>
</div>
</div>

8
frontend/src/components/pages/AssistantPage.tsx
View File

@@ -184,6 +184,7 @@ function blankPromptForm(name: string): AssistantForm {
actions: [],
openingMessage: null,
},
systemTools: [],
visionEnabled: false,
visionModelResourceId: "",
toolIds: [],
@@ -479,6 +480,7 @@ export function AssistantPage(props: AssistantPageProps) {
actions: a.startup?.actions ?? [],
openingMessage: a.startup?.openingMessage ?? null,
},
systemTools: a.systemTools ?? [],
visionEnabled: a.visionEnabled,
visionModelResourceId: a.visionModelResourceId ?? "",
toolIds: a.toolIds ?? [],
@@ -555,6 +557,7 @@ export function AssistantPage(props: AssistantPageProps) {
actions: [],
openingMessage: null,
},
systemTools: [],
visionEnabled: false,
visionModelResourceId: null,
modelResourceIds: {},
@@ -614,6 +617,7 @@ export function AssistantPage(props: AssistantPageProps) {
enableInterrupt: form.enableInterrupt,
turnConfig: form.turnConfig,
startup: form.startup,
systemTools: form.runtimeMode === "pipeline" ? form.systemTools : [],
visionEnabled: form.visionEnabled,
visionModelResourceId: form.visionModelResourceId || null,
modelResourceIds: {
@@ -1300,7 +1304,9 @@ export function AssistantPage(props: AssistantPageProps) {
vision: visionModelOptionsFor(""),
}}
toolOptions={tools
.filter((tool) => tool.status === "active")
.filter(
(tool) => tool.status === "active" && tool.type !== "system",
)
.map((tool) => ({ value: tool.id, label: tool.name }))}
knowledgeOptions={kbOptions}
onBack={() => router.push("/assistants")}

39
frontend/src/components/pages/ComponentsToolsPage.tsx
View File

@@ -64,9 +64,9 @@ import {
type ToolUpsert,
} from "@/lib/api";
type ToolKind = "end_call" | "http" | "client";
type ToolKind = "system" | "http" | "client";
type HttpMethod = HttpToolDefinition["config"]["method"];
type ToolFilter = "全部" | "End Call" | "HTTP" | "Client" | "MCP";
type ToolFilter = "全部" | "System" | "HTTP" | "Client" | "MCP";
type SortOrder = "newest" | "oldest";
type ToolResource =
| { kind: "tool"; id: string; tool: Tool }
@@ -74,7 +74,7 @@ type ToolResource =
const toolFilters: readonly ToolFilter[] = [
"全部",
"End Call",
"System",
"HTTP",
"Client",
"MCP",
@@ -112,7 +112,7 @@ function blankForm(): ToolForm {
return {
name: "",
functionName: "",
type: "end_call",
type: "system",
description: "",
status: "active",
messageType: "none",
@@ -147,7 +147,7 @@ function formFromTool(tool: Tool): ToolForm {
base.type = tool.type;
base.description = tool.description;
base.status = tool.status;
if (tool.definition.type === "end_call") {
if (tool.definition.type === "system") {
base.messageType = tool.definition.config.messageType;
base.customMessage = tool.definition.config.customMessage;
base.captureReason = tool.definition.config.captureReason;
@@ -235,7 +235,7 @@ function payloadFromForm(form: ToolForm): ToolUpsert {
throw new Error("函数名必须以小写字母开头，且只能包含小写字母、数字和下划线");
}
if (form.type === "end_call") {
if (form.type === "system") {
return {
name: form.name.trim(),
functionName: form.functionName,
@@ -244,8 +244,9 @@ function payloadFromForm(form: ToolForm): ToolUpsert {
secrets: {},
definition: {
schemaVersion: 1,
type: "end_call",
type: "system",
config: {
kind: "end_conversation",
messageType: form.messageType,
customMessage: form.messageType === "custom" ? form.customMessage : "",
captureReason: form.captureReason,
@@ -418,7 +419,7 @@ export function ComponentsToolsPage() {
const tool = resource.tool;
return (
(filter === "全部" ||
(filter === "End Call" && tool.type === "end_call") ||
(filter === "System" && tool.type === "system") ||
(filter === "HTTP" && tool.type === "http") ||
(filter === "Client" && tool.type === "client")) &&
(!query ||
@@ -569,8 +570,8 @@ export function ComponentsToolsPage() {
>
{resource.kind === "mcp"
? "MCP"
: resource.tool.type === "end_call"
? "End Call"
: resource.tool.type === "system"
? "System"
: resource.tool.type === "client"
? "Client"
: "HTTP"}
@@ -783,7 +784,7 @@ export function ComponentsToolsPage() {
>
<SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="end_call">End Call</SelectItem>
<SelectItem value="system">System</SelectItem>
<SelectItem value="http">HTTP</SelectItem>
<SelectItem value="client">Client Tool</SelectItem>
</SelectContent>
@@ -826,8 +827,8 @@ export function ComponentsToolsPage() {
</FieldSection>
<FieldSection title="参数配置" scrollable tall>
{form.type === "end_call" ? (
<EndCallFields form={form} setForm={setForm} />
{form.type === "system" ? (
<SystemToolFields form={form} setForm={setForm} />
) : form.type === "client" ? (
<ClientToolFields form={form} setForm={setForm} />
) : (
@@ -860,7 +861,7 @@ export function ComponentsToolsPage() {
);
}
function EndCallFields({
function SystemToolFields({
form,
setForm,
}: {
@@ -869,6 +870,16 @@ function EndCallFields({
}) {
return (
<div className="space-y-4">
<Field label="系统动作">
<Select value="end_conversation" disabled>
<SelectTrigger className="w-full border-hairline-strong bg-background">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="end_conversation">结束对话</SelectItem>
</SelectContent>
</Select>
</Field>
<Field label="结束语">
<Select
value={form.messageType}

2
frontend/src/components/workflow/GenericNode.tsx
View File

@@ -72,6 +72,8 @@ export function GenericNode({ id, type, data, selected }: NodeProps) {
messagePolicy === "playback" ? "播放完继续" : null,
messagePolicy === "confirmation" ? "确认后继续" : null,
].filter(Boolean)
: type === "update_state"
? [`${Object.keys(nodeData.assignments ?? {}).length} 个变量`]
: [];
return (

6
frontend/src/components/workflow/WorkflowCanvas.tsx
View File

@@ -72,6 +72,8 @@ function defaultNodeData(spec: RuntimeNodeSpec): WorkflowNodeData {
contextPolicy: "inherit",
inheritGlobalConfig: true,
entryMode: "wait_user",
systemTools: [],
stateVariableNames: [],
});
} else if (spec.type === "action") {
Object.assign(data, {
@@ -79,6 +81,8 @@ function defaultNodeData(spec: RuntimeNodeSpec): WorkflowNodeData {
resultAssignmentMode: "inherit",
userInputPolicy: "queue",
});
} else if (spec.type === "update_state") {
Object.assign(data, { assignments: {} });
} else if (spec.type === "message") {
Object.assign(data, {
speech: "",
@@ -170,6 +174,7 @@ export function WorkflowCanvas({
specsByType,
toolOptions = [],
knowledgeOptions = [],
dynamicVariableOptions,
}: WorkflowEditorProps & { specsByType: NodeSpecMap }) {
const initial = useMemo(() => toFlow(value ?? defaultGraph()), [value]);
const [nodes, setNodes, onNodesChange] = useNodesState(initial.nodes);
@@ -780,6 +785,7 @@ export function WorkflowCanvas({
asrOptions={modelOptions.asr}
ttsOptions={modelOptions.tts}
visionOptions={modelOptions.vision}
dynamicVariableOptions={dynamicVariableOptions}
workflowSettings={settings}
onChange={(patch) =>
updateNodeData(editingNode.id, patch)

99
frontend/src/components/workflow/panels/AgentNodePanel.tsx
View File

@@ -16,7 +16,8 @@ import { VisionConfigSection } from "@/components/editor/vision-config-section";
import { TurnConfigEditor } from "@/components/turn-config-editor";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import type { KnowledgeRetrievalConfig } from "@/lib/api";
import type { KnowledgeRetrievalConfig, SystemToolKind } from "@/lib/api";
import { SYSTEM_TOOL_OPTIONS } from "@/lib/system-tools";
import { normalizeTurnConfig } from "@/lib/turn-config";
import { NodeSelect, ToolOptionPicker } from "./controls";
@@ -38,6 +39,7 @@ export function AgentNodePanel({
asrOptions,
ttsOptions,
visionOptions,
dynamicVariableOptions,
}: {
draft: WorkflowNodeData;
set: (key: string, val: unknown) => void;
@@ -49,6 +51,7 @@ export function AgentNodePanel({
asrOptions: ModelOption[];
ttsOptions: ModelOption[];
visionOptions: ModelOption[];
dynamicVariableOptions: ModelOption[];
}) {
const inheritsGlobal = draft.inheritGlobalConfig !== false;
const knowledgeConfig: KnowledgeRetrievalConfig = {
@@ -101,6 +104,27 @@ export function AgentNodePanel({
turnConfig: agentTurnConfig,
});
};
const toggleSystemTool = (kind: SystemToolKind, enabled: boolean) => {
const current = draft.systemTools ?? [];
const systemTools = enabled
? [...new Set([...current, kind])]
: current.filter((item) => item !== kind);
setPatch({
systemTools,
...(!enabled && kind === "update_state"
? { stateVariableNames: [] }
: {}),
});
};
const toggleStateVariable = (name: string, enabled: boolean) => {
const current = draft.stateVariableNames ?? [];
set(
"stateVariableNames",
enabled
? [...new Set([...current, name])]
: current.filter((item) => item !== name),
);
};
return (
<PanelAnchorNavigation
@@ -109,6 +133,7 @@ export function AgentNodePanel({
{ id: "scope", label: "配置范围" },
{ id: "prompt", label: inheritsGlobal ? "任务" : "提示词" },
{ id: "entry", label: "进入行为" },
{ id: "system-tools", label: "系统工具" },
...(!inheritsGlobal
? [
{ id: "models", label: "模型与语音" },
@@ -186,6 +211,78 @@ export function AgentNodePanel({
</SectionCard>
</PanelAnchor>
<PanelAnchor id="system-tools">
<SectionCard
icon={<Sparkles size={15} />}
title="系统工具"
description="只对当前 Agent 生效的内置会话控制能力"
>
<div className="space-y-3">
{SYSTEM_TOOL_OPTIONS.map((option) => {
const enabled = (draft.systemTools ?? []).includes(option.value);
return (
<div
key={option.value}
className="rounded-xl border border-hairline bg-canvas-soft p-3.5"
>
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<div className="text-sm font-medium text-foreground">
{option.label}
</div>
<p className="mt-1 text-xs leading-5 text-muted-foreground">
{option.description}
</p>
</div>
<Switch
checked={enabled}
onCheckedChange={(checked) =>
toggleSystemTool(option.value, checked)
}
aria-label={`启用${option.label}`}
/>
</div>
{option.value === "update_state" && enabled && (
<div className="mt-3 border-t border-hairline pt-3">
<div className="mb-2 text-xs font-medium text-foreground">
允许更新的变量
</div>
{dynamicVariableOptions.length ? (
<div className="space-y-2">
{dynamicVariableOptions.map((variable) => (
<div
key={variable.value}
className="flex items-center justify-between gap-3 rounded-lg border border-hairline bg-background px-3 py-2"
>
<span className="truncate text-xs text-foreground">
{variable.label}
</span>
<Switch
checked={(draft.stateVariableNames ?? []).includes(
variable.value,
)}
onCheckedChange={(checked) =>
toggleStateVariable(variable.value, checked)
}
aria-label={`允许更新${variable.value}`}
/>
</div>
))}
</div>
) : (
<p className="text-xs leading-5 text-muted-foreground">
请先在工作流的动态变量面板中声明变量。
</p>
)}
</div>
)}
</div>
);
})}
</div>
</SectionCard>
</PanelAnchor>
{!inheritsGlobal && (
<>
<PanelAnchor id="models">

27
frontend/src/components/workflow/panels/NodeSettingsPanel.tsx
View File

@@ -12,6 +12,7 @@ import { Textarea } from "@/components/ui/textarea";
import { ActionNodePanel } from "./ActionNodePanel";
import { AgentNodePanel } from "./AgentNodePanel";
import { MessageNodePanel } from "./MessageNodePanel";
import { UpdateStateNodePanel } from "./UpdateStateNodePanel";
import { NodeSelect, ToolOptionPicker } from "./controls";
import {
PanelAnchor,
@@ -31,6 +32,7 @@ export function NodeSettingsPanel({
asrOptions,
ttsOptions,
visionOptions,
dynamicVariableOptions,
workflowSettings,
onChange,
}: {
@@ -43,6 +45,7 @@ export function NodeSettingsPanel({
asrOptions: ModelOption[];
ttsOptions: ModelOption[];
visionOptions: ModelOption[];
dynamicVariableOptions: ModelOption[];
workflowSettings: WorkflowSettings;
onChange: (patch: WorkflowNodeData) => void;
}) {
@@ -91,6 +94,8 @@ export function NodeSettingsPanel({
]
: spec.type === "action"
? [{ id: "execution", label: "工具执行" }]
: spec.type === "update_state"
? [{ id: "state", label: "状态更新" }]
: spec.type === "handoff"
? [{ id: "handoff", label: "转交配置" }]
: spec.type === "end"
@@ -114,6 +119,7 @@ export function NodeSettingsPanel({
setArgumentsJson={setArgumentsJson}
setAssignmentsJson={setAssignmentsJson}
commitActionJson={commitActionJson}
dynamicVariableOptions={dynamicVariableOptions}
/>
</PanelAnchorNavigation>
);
@@ -130,6 +136,7 @@ export function NodeSettingsPanel({
asrOptions={asrOptions}
ttsOptions={ttsOptions}
visionOptions={visionOptions}
dynamicVariableOptions={dynamicVariableOptions}
/>
);
}
@@ -262,6 +269,14 @@ export function NodeSettingsPanel({
<MessageNodePanel draft={draft} set={set} setPatch={setPatch} />
)}
{spec.type === "update_state" && (
<UpdateStateNodePanel
draft={draft}
set={set}
dynamicVariableOptions={dynamicVariableOptions}
/>
)}
{spec.type === "handoff" && (
<NodeSelect
label="转交类型"
@@ -306,6 +321,7 @@ function WorkflowNodePanelForm({
setArgumentsJson,
setAssignmentsJson,
commitActionJson,
dynamicVariableOptions,
}: {
spec: RuntimeNodeSpec;
draft: WorkflowNodeData;
@@ -318,6 +334,7 @@ function WorkflowNodePanelForm({
setArgumentsJson: (value: string) => void;
setAssignmentsJson: (value: string) => void;
commitActionJson: (argumentsValue: string, assignmentsValue: string) => void;
dynamicVariableOptions: ModelOption[];
}) {
return (
<div className="space-y-3">
@@ -341,6 +358,16 @@ function WorkflowNodePanelForm({
<MessageNodePanel draft={draft} set={set} setPatch={setPatch} />
)}
{spec.type === "update_state" && (
<PanelAnchor id="state">
<UpdateStateNodePanel
draft={draft}
set={set}
dynamicVariableOptions={dynamicVariableOptions}
/>
</PanelAnchor>
)}
{spec.type === "handoff" && (
<PanelAnchor id="handoff">
<SectionCard

79
frontend/src/components/workflow/panels/UpdateStateNodePanel.tsx Normal file
View File

@@ -0,0 +1,79 @@
"use client";
import { Braces } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { SectionCard } from "@/components/editor/section-card";
import type { WorkflowNodeData } from "../specs";
import type { ModelOption } from "../types";
export function UpdateStateNodePanel({
draft,
set,
dynamicVariableOptions,
}: {
draft: WorkflowNodeData;
set: (key: string, value: unknown) => void;
dynamicVariableOptions: ModelOption[];
}) {
const [value, setValue] = useState(
JSON.stringify(draft.assignments ?? {}, null, 2),
);
const [error, setError] = useState("");
const commit = () => {
try {
const assignments = JSON.parse(value) as Record<string, unknown>;
if (
!assignments ||
Array.isArray(assignments) ||
typeof assignments !== "object"
) {
throw new Error();
}
setError("");
set("assignments", assignments);
} catch {
setError("变量赋值必须是 JSON 对象");
}
};
return (
<SectionCard
icon={<Braces size={15} />}
title="状态更新"
description="一次性更新已声明的动态变量，然后继续执行后续节点"
>
<div>
<div className="mb-1.5 text-sm font-medium text-foreground">
变量赋值
</div>
<Textarea
rows={8}
value={value}
onChange={(event) => setValue(event.target.value)}
onBlur={commit}
placeholder={'{\n "customer_name": "张三",\n "confirmed": true\n}'}
className="field-sizing-fixed min-h-44 resize-y border-hairline-strong bg-background font-mono text-xs text-foreground placeholder:text-muted-soft"
/>
{error && <p className="mt-1.5 text-xs text-destructive">{error}</p>}
</div>
<Button type="button" variant="outline" onClick={commit}>
应用变量赋值
</Button>
<div className="rounded-xl border border-hairline bg-canvas-soft p-3 text-xs leading-5 text-muted-foreground">
可用变量：
{dynamicVariableOptions.length
? dynamicVariableOptions.map((option) => option.label).join("、")
: "暂无，请先在动态变量面板中声明"}
</div>
<p className="text-xs leading-5 text-muted-foreground">
值支持字符串、数字、布尔值，也可使用完整占位符，例如
{" {{source_name}}"}。
</p>
</SectionCard>
);
}

8
frontend/src/components/workflow/specs.ts
View File

@@ -3,7 +3,7 @@
import * as LucideIcons from "lucide-react";
import { Circle, type LucideIcon } from "lucide-react";
import type { NodeSpecDto, TurnConfig } from "@/lib/api";
import type { NodeSpecDto, SystemToolKind, TurnConfig } from "@/lib/api";
import { defaultTurnConfig } from "@/lib/turn-config";
export type WorkflowNodeType =
@@ -11,6 +11,7 @@ export type WorkflowNodeType =
| "agent"
| "message"
| "action"
| "update_state"
| "handoff"
| "end";
export type ContextPolicy = "inherit" | "fresh";
@@ -40,6 +41,8 @@ export type WorkflowNodeData = {
contextPolicy?: ContextPolicy;
inheritGlobalConfig?: boolean;
entryMode?: AgentEntryMode;
systemTools?: SystemToolKind[];
stateVariableNames?: string[];
toolIds?: string[];
knowledgeBaseId?: string;
knowledgeMode?: KnowledgeMode;
@@ -56,6 +59,7 @@ export type WorkflowNodeData = {
arguments?: Record<string, unknown>;
resultAssignmentMode?: ActionResultAssignmentMode;
resultAssignments?: Record<string, string>;
assignments?: Record<string, unknown>;
userInputPolicy?: ActionUserInputPolicy;
speech?: string;
/** Legacy field read only while an older graph is open in the editor. */
@@ -279,6 +283,8 @@ export function defaultGraph(): WorkflowGraph {
contextPolicy: "inherit",
inheritGlobalConfig: true,
entryMode: "wait_user",
systemTools: [],
stateVariableNames: [],
},
},
{

1
frontend/src/components/workflow/types.ts
View File

@@ -33,6 +33,7 @@ export type WorkflowEditorProps = {
};
toolOptions?: ModelOption[];
knowledgeOptions?: ModelOption[];
dynamicVariableOptions: ModelOption[];
dynamicVariablesOpen: boolean;
onDynamicVariablesOpenChange: (open: boolean) => void;
dynamicVariablesPanel: ReactNode;

2
frontend/src/hooks/use-voice-preview.ts
View File

@@ -612,6 +612,8 @@ export function useVoicePreview(
onNodeActiveRef.current?.(msg.nodeId);
} else if (msg.type === "workflow-variables") {
setSessionVariables(publicVariableSnapshot(msg.variables));
} else if (msg.type === "session-variables") {
setSessionVariables(publicVariableSnapshot(msg.variables));
} else if (msg.type === "call-ended") {
endedByServerRef.current = true;
setCallEnded(true);

16
frontend/src/lib/api.ts
View File

@@ -216,6 +216,12 @@ export type StartupConfig = {
} | null;
};
export type SystemToolKind =
| "end_conversation"
| "update_state"
| "skip_turn"
| "request_human_handoff";
/** 后端 AssistantOut(宽表 STI:瘦字段平铺,workflow 用 graph)。apiKey 读时打码 */
export type Assistant = {
id: string;
@@ -226,6 +232,7 @@ export type Assistant = {
enableInterrupt: boolean;
turnConfig: TurnConfig;
startup: StartupConfig;
systemTools: SystemToolKind[];
visionEnabled: boolean;
visionModelResourceId: string | null;
modelResourceIds: Partial<Record<ModelType, string>>;
@@ -354,10 +361,11 @@ export type ToolParameter = {
required: boolean;
};
export type EndCallToolDefinition = {
export type SystemToolDefinition = {
schemaVersion: number;
type: "end_call";
type: "system";
config: {
kind: "end_conversation";
messageType: "none" | "custom";
customMessage: string;
captureReason: boolean;
@@ -411,10 +419,10 @@ export type Tool = {
id: string;
name: string;
functionName: string;
type: "end_call" | "http" | "mcp" | "client";
type: "system" | "http" | "mcp" | "client";
description: string;
definition:
| EndCallToolDefinition
| SystemToolDefinition
| HttpToolDefinition
| ClientToolDefinition
| McpToolDefinition;

28
frontend/src/lib/system-tools.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { SystemToolKind } from "@/lib/api";
export const SYSTEM_TOOL_OPTIONS: Array<{
value: SystemToolKind;
label: string;
description: string;
}> = [
{
value: "end_conversation",
label: "结束对话",
description: "模型可在用户告别或任务完成时主动结束通话。",
},
{
value: "update_state",
label: "更新状态",
description: "模型可更新明确授权的动态变量，记录本轮获得的信息。",
},
{
value: "skip_turn",
label: "跳过本轮",
description: "用户要求稍等、话未说完或输入只是噪音时保持静默。",
},
{
value: "request_human_handoff",
label: "请求人工接管",
description: "模型可提交人工接管请求；请求成功不代表人工已经接通。",
},
];