Add branch summary handling to NodeConfigPanel and WorkflowEditor

web/app/dashboard/ai-workflows/_components/node-config-panel.tsx

@@ -11,6 +11,7 @@ import { VariableSelector } from "./variable-selector"
 import type {
   WorkflowNodeSpec,
   WorkflowVariableRef,
+  WorkflowVariableSpec,
   WorkflowVariableSelector,
 } from "./workflow-utils"
 
@@ -21,15 +22,24 @@ type WorkflowNodeData = Record<string, unknown> & {
   inputs?: Record<string, WorkflowVariableSelector>
 }
 
+export type WorkflowBranchSummary = {
+  edgeId: string
+  targetName: string
+  conditionLabel: string
+  isDefault: boolean
+}
+
 export function NodeConfigPanel({
   node,
   nodeSpec,
   availableVariables,
+  branchSummaries = [],
   onChange,
 }: {
   node: Node<WorkflowNodeData> | null
   nodeSpec?: WorkflowNodeSpec
   availableVariables: WorkflowVariableRef[]
+  branchSummaries?: WorkflowBranchSummary[]
   onChange: (nodeId: string, data: WorkflowNodeData) => void
 }) {
   if (!node) {
@@ -46,6 +56,7 @@ export function NodeConfigPanel({
       node={node}
       nodeSpec={nodeSpec}
       availableVariables={availableVariables}
+      branchSummaries={branchSummaries}
       onChange={onChange}
     />
   )
@@ -55,11 +66,13 @@ function NodeConfigForm({
   node,
   nodeSpec,
   availableVariables,
+  branchSummaries,
   onChange,
 }: {
   node: Node<WorkflowNodeData>
   nodeSpec?: WorkflowNodeSpec
   availableVariables: WorkflowVariableRef[]
+  branchSummaries: WorkflowBranchSummary[]
   onChange: (nodeId: string, data: WorkflowNodeData) => void
 }) {
   const [name, setName] = useState(node.data.name ?? "")
@@ -70,6 +83,7 @@ function NodeConfigForm({
   const [error, setError] = useState("")
   const inputSchema = nodeSpec?.inputSchema ?? []
   const outputSchema = nodeSpec?.outputSchema ?? []
+  const isConditionNode = node.data.nodeType === "condition"
 
   const commitChange = (next: Partial<WorkflowNodeData>) => {
     onChange(node.id, {
@@ -106,64 +120,128 @@ function NodeConfigForm({
           onBlur={() => commitChange({ name: name.trim() || node.data.nodeType || node.id })}
         />
       </div>
-      {inputSchema.length > 0 ? (
-        <div className="space-y-3">
-          <div className="text-sm font-medium">输入映射</div>
-          {availableVariables.length === 0 ? (
-            <div className="rounded-md border border-dashed p-2 text-xs text-muted-foreground">
-              当前节点前面还没有可用变量，请先连接上游节点。
-            </div>
-          ) : null}
-          {inputSchema.map((input) => (
-            <div key={input.name} className="space-y-1.5">
-              <div className="flex items-center justify-between gap-2">
-                <Label className="text-xs">
-                  {input.name}
-                  {input.required ? <span className="text-destructive"> *</span> : null}
-                </Label>
-                <span className="text-xs text-muted-foreground">{input.type}</span>
-              </div>
-              <VariableSelector
-                value={inputs[input.name]}
-                variables={availableVariables}
-                onChange={(value) => {
-                  const nextInputs = {
-                    ...inputs,
-                    [input.name]: value,
-                  }
-                  setInputs(nextInputs)
-                  commitChange({
-                    inputs: nextInputs,
-                  })
-                }}
-              />
-              {inputs[input.name] ? (
-                <div className="text-xs text-muted-foreground">
-                  已选择：{inputs[input.name].nodeId}.{inputs[input.name].field}
+      {isConditionNode ? (
+        <ConditionNodePanel branchSummaries={branchSummaries} outputSchema={outputSchema} />
+      ) : (
+        <>
+          {inputSchema.length > 0 ? (
+            <div className="space-y-3">
+              <div className="text-sm font-medium">输入映射</div>
+              {availableVariables.length === 0 ? (
+                <div className="rounded-md border border-dashed p-2 text-xs text-muted-foreground">
+                  当前节点前面还没有可用变量，请先连接上游节点。
                 </div>
               ) : null}
-              {input.description ? (
-                <div className="text-xs text-muted-foreground">{input.description}</div>
-              ) : null}
+              {inputSchema.map((input) => (
+                <div key={input.name} className="space-y-1.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <Label className="text-xs">
+                      {input.name}
+                      {input.required ? <span className="text-destructive"> *</span> : null}
+                    </Label>
+                    <span className="text-xs text-muted-foreground">{input.type}</span>
+                  </div>
+                  <VariableSelector
+                    value={inputs[input.name]}
+                    variables={availableVariables}
+                    onChange={(value) => {
+                      const nextInputs = {
+                        ...inputs,
+                        [input.name]: value,
+                      }
+                      setInputs(nextInputs)
+                      commitChange({
+                        inputs: nextInputs,
+                      })
+                    }}
+                  />
+                  {inputs[input.name] ? (
+                    <div className="text-xs text-muted-foreground">
+                      已选择：{inputs[input.name].nodeId}.{inputs[input.name].field}
+                    </div>
+                  ) : null}
+                  {input.description ? (
+                    <div className="text-xs text-muted-foreground">{input.description}</div>
+                  ) : null}
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-      ) : null}
-      <details className="rounded-md border bg-background p-3">
-        <summary className="cursor-pointer text-sm font-medium">高级配置 JSON</summary>
-        <div className="mt-3 space-y-2">
-          <Textarea
-            id="workflow-node-config"
-            className="h-40 font-mono text-xs"
-            value={configText}
-            onChange={(event) => setConfigText(event.target.value)}
-          />
-          {error ? <div className="text-xs text-destructive">{error}</div> : null}
-          <Button type="button" variant="outline" size="sm" onClick={handleApply}>
-            保存高级配置
-          </Button>
-        </div>
-      </details>
+          ) : null}
+          <details className="rounded-md border bg-background p-3">
+            <summary className="cursor-pointer text-sm font-medium">高级配置 JSON</summary>
+            <div className="mt-3 space-y-2">
+              <Textarea
+                id="workflow-node-config"
+                className="h-40 font-mono text-xs"
+                value={configText}
+                onChange={(event) => setConfigText(event.target.value)}
+              />
+              {error ? <div className="text-xs text-destructive">{error}</div> : null}
+              <Button type="button" variant="outline" size="sm" onClick={handleApply}>
+                保存高级配置
+              </Button>
+            </div>
+          </details>
+          {outputSchema.length > 0 ? (
+            <div className="space-y-2">
+              <div className="text-sm font-medium">输出变量</div>
+              <div className="space-y-1 rounded-md border bg-background p-2">
+                {outputSchema.map((output) => (
+                  <div key={output.name} className="space-y-0.5 rounded-sm px-1 py-0.5">
+                    <div className="flex items-center justify-between gap-2 text-xs">
+                      <span className="truncate font-medium">{output.name}</span>
+                      <span className="shrink-0 text-muted-foreground">{output.type}</span>
+                    </div>
+                    {output.description ? (
+                      <div className="text-xs text-muted-foreground">{output.description}</div>
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </>
+      )}
+    </div>
+  )
+}
+
+function ConditionNodePanel({
+  branchSummaries,
+  outputSchema,
+}: {
+  branchSummaries: WorkflowBranchSummary[]
+  outputSchema: WorkflowVariableSpec[]
+}) {
+  return (
+    <>
+      {/* <div className="rounded-md border bg-muted/30 p-3 text-xs text-muted-foreground">
+        条件节点只负责分流；每条出口连线承载自己的判断条件，没有条件的出口会作为默认分支。
+      </div> */}
+      <div className="space-y-2">
+        <div className="text-sm font-medium">出口分支</div>
+        {branchSummaries.length > 0 ? (
+          <div className="space-y-2">
+            {branchSummaries.map((branch) => (
+              <div key={branch.edgeId} className="rounded-md border bg-background p-2">
+                <div className="flex items-center justify-between gap-2 text-xs">
+                  <span className="min-w-0 truncate font-medium">{branch.targetName}</span>
+                  <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-muted-foreground">
+                    {branch.isDefault ? "默认" : "条件"}
+                  </span>
+                </div>
+                <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                  {branch.conditionLabel}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-md border border-dashed p-2 text-xs text-muted-foreground">
+            当前还没有出口连线。
+          </div>
+        )}
+      </div>
       {outputSchema.length > 0 ? (
         <div className="space-y-2">
           <div className="text-sm font-medium">输出变量</div>
@@ -182,6 +260,6 @@ function NodeConfigForm({
           </div>
         </div>
       ) : null}
-    </div>
+    </>
   )
 }