Feat: Handling abnormal anchor points of agent operators #3221 (#9121)

### What problem does this PR solve? Feat: Handling abnormal anchor points of agent operators #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 20:42:30 +08:00 · 2025-07-30 19:14:33 +08:00
parent db6d4307f2
commit 07e37560fc
10 changed files with 125 additions and 277 deletions
--- a/web/src/pages/agent/canvas/node/agent-node.tsx
+++ b/web/src/pages/agent/canvas/node/agent-node.tsx
@ -1,7 +1,9 @@
+import LLMLabel from '@/components/llm-select/llm-label';
 import { IAgentNode } from '@/interfaces/database/flow';
 import { Handle, NodeProps, Position } from '@xyflow/react';
+import { get } from 'lodash';
 import { memo, useMemo } from 'react';
-import { NodeHandleId } from '../../constant';
+import { AgentExceptionMethod, NodeHandleId } from '../../constant';
 import useGraphStore from '../../store';
 import { isBottomSubAgent } from '../../utils';
 import { CommonHandle } from './handle';
@ -23,6 +25,14 @@ function InnerAgentNode({
    return !isBottomSubAgent(edges, id);
  }, [edges, id]);

+  const exceptionMethod = useMemo(() => {
+    return get(data, 'form.exception_method');
+  }, [data]);
+
+  const isGotoMethod = useMemo(() => {
+    return exceptionMethod === AgentExceptionMethod.Goto;
+  }, [exceptionMethod]);
+
  return (
    <ToolBar selected={selected} id={id} label={data.label}>
      <NodeWrapper selected={selected}>
@ -48,6 +58,7 @@ function InnerAgentNode({
            ></CommonHandle>
          </>
        )}
+
        <Handle
          type="target"
          position={Position.Top}
@ -69,6 +80,32 @@ function InnerAgentNode({
          style={{ left: 20 }}
        ></Handle>
        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
+        <section className="flex flex-col gap-2">
+          <div className={'bg-background-card rounded-sm p-1'}>
+            <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
+          </div>
+          {(isGotoMethod ||
+            exceptionMethod === AgentExceptionMethod.Comment) && (
+            <div className="bg-background-card rounded-sm p-1 flex justify-between gap-2">
+              <span className="text-text-sub-title">Abnormal</span>
+              <span className="truncate flex-1">
+                {isGotoMethod ? 'Exception branch' : 'Output default value'}
+              </span>
+            </div>
+          )}
+        </section>
+        {isGotoMethod && (
+          <CommonHandle
+            type="source"
+            position={Position.Right}
+            isConnectable={isConnectable}
+            className="!bg-text-delete-red"
+            style={{ ...RightHandleStyle, top: 94 }}
+            nodeId={id}
+            id={NodeHandleId.AgentException}
+            isConnectableEnd={false}
+          ></CommonHandle>
+        )}
      </NodeWrapper>
    </ToolBar>
  );
--- a/web/src/pages/agent/constant.tsx
+++ b/web/src/pages/agent/constant.tsx
@ -644,11 +644,12 @@ export const initialAgentValues = {
  max_rounds: 5,
  exception_method: null,
  exception_comment: '',
-  exception_goto: '',
+  exception_goto: [],
+  exception_default_value: '',
  tools: [],
  mcp: [],
  outputs: {
-    structured_output: {
+    // structured_output: {
    //   topic: {
    //     type: 'string',
    //     description:
@ -656,7 +657,7 @@ export const initialAgentValues = {
    //     enum: ['general', 'news'],
    //     default: 'general',
    //   },
-    },
+    // },
    content: {
      type: 'string',
      value: '',
@ -932,6 +933,7 @@ export enum NodeHandleId {
  Tool = 'tool',
  AgentTop = 'agentTop',
  AgentBottom = 'agentBottom',
+  AgentException = 'agentException',
 }

 export enum VariableType {
--- a/web/src/pages/agent/form-hooks.ts
+++ b/web/src/pages/agent/form-hooks.ts
@ -30,40 +30,6 @@ export const useBuildFormSelectOptions = (
  return buildCategorizeToOptions;
 };

-/**
- * dumped
- * @param nodeId
- * @returns
- */
-export const useHandleFormSelectChange = (nodeId?: string) => {
-  const { addEdge, deleteEdgeBySourceAndSourceHandle } = useGraphStore(
-    (state) => state,
-  );
-  const handleSelectChange = useCallback(
-    (name?: string) => (value?: string) => {
-      if (nodeId && name) {
-        if (value) {
-          addEdge({
-            source: nodeId,
-            target: value,
-            sourceHandle: name,
-            targetHandle: null,
-          });
-        } else {
-          // clear selected value
-          deleteEdgeBySourceAndSourceHandle({
-            source: nodeId,
-            sourceHandle: name,
-          });
-        }
-      }
-    },
-    [addEdge, nodeId, deleteEdgeBySourceAndSourceHandle],
-  );
-
-  return { handleSelectChange };
-};
-
 export const useBuildSortOptions = () => {
  const { t } = useTranslate('flow');

--- a/web/src/pages/agent/form/agent-form/index.tsx
+++ b/web/src/pages/agent/form/agent-form/index.tsx
@ -19,19 +19,22 @@ import { LlmModelType } from '@/constants/knowledge';
 import { useFindLlmByUuid } from '@/hooks/use-llm-request';
 import { buildOptions } from '@/utils/form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import {
  AgentExceptionMethod,
+  NodeHandleId,
  VariableType,
  initialAgentValues,
 } from '../../constant';
 import { INextOperatorForm } from '../../interface';
 import useGraphStore from '../../store';
 import { isBottomSubAgent } from '../../utils';
+import { buildOutputList } from '../../utils/build-output-list';
 import { DescriptionField } from '../components/description-field';
+import { FormWrapper } from '../components/form-wrapper';
 import { Output } from '../components/output';
 import { PromptEditor } from '../components/prompt-editor';
 import { QueryVariable } from '../components/query-variable';
@ -69,13 +72,18 @@ const FormSchema = z.object({
  max_rounds: z.coerce.number().optional(),
  exception_method: z.string().nullable(),
  exception_comment: z.string().optional(),
-  exception_goto: z.string().optional(),
+  exception_goto: z.array(z.string()).optional(),
+  exception_default_value: z.string().optional(),
  ...LargeModelFilterFormSchema,
 });

+const outputList = buildOutputList(initialAgentValues.outputs);
+
 function AgentForm({ node }: INextOperatorForm) {
  const { t } = useTranslation();
-  const { edges } = useGraphStore((state) => state);
+  const { edges, deleteEdgesBySourceAndSourceHandle } = useGraphStore(
+    (state) => state,
+  );

  const defaultValues = useValues(node);

@ -83,12 +91,6 @@ function AgentForm({ node }: INextOperatorForm) {
    return isBottomSubAgent(edges, node?.id);
  }, [edges, node?.id]);

-  const outputList = useMemo(() => {
-    return [
-      { title: 'content', type: initialAgentValues.outputs.content.type },
-    ];
-  }, []);
-
  const form = useForm<z.infer<typeof FormSchema>>({
    defaultValues: defaultValues,
    resolver: zodResolver(FormSchema),
@ -98,16 +100,27 @@ function AgentForm({ node }: INextOperatorForm) {

  const findLlmByUuid = useFindLlmByUuid();

+  const exceptionMethod = useWatch({
+    control: form.control,
+    name: 'exception_method',
+  });
+
+  useEffect(() => {
+    if (exceptionMethod !== AgentExceptionMethod.Goto) {
+      if (node?.id) {
+        deleteEdgesBySourceAndSourceHandle(
+          node?.id,
+          NodeHandleId.AgentException,
+        );
+      }
+    }
+  }, [deleteEdgesBySourceAndSourceHandle, exceptionMethod, node?.id]);
+
  useWatchFormChange(node?.id, form);

  return (
    <Form {...form}>
-      <form
-        className="space-y-6 p-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
+      <FormWrapper>
        <FormContainer>
          {isSubAgent && <DescriptionField></DescriptionField>}
          <LargeModelFormField></LargeModelFormField>
@ -219,6 +232,18 @@ function AgentForm({ node }: INextOperatorForm) {
                </FormItem>
              )}
            />
+            <FormField
+              control={form.control}
+              name={`exception_default_value`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Exception default value</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
            <FormField
              control={form.control}
              name={`exception_comment`}
@ -231,15 +256,10 @@ function AgentForm({ node }: INextOperatorForm) {
                </FormItem>
              )}
            />
-            <QueryVariable
-              name="exception_goto"
-              label="Exception goto"
-              type={VariableType.File}
-            ></QueryVariable>
          </FormContainer>
        </Collapse>
        <Output list={outputList}></Output>
-      </form>
+      </FormWrapper>
    </Form>
  );
 }
--- a/web/src/pages/agent/form/categorize-form/dynamic-categorize.tsx
+++ b/web/src/pages/agent/form/categorize-form/dynamic-categorize.tsx
@ -177,7 +177,7 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
  const FormSchema = useCreateCategorizeFormSchema();

  const deleteCategorizeCaseEdges = useGraphStore(
-    (state) => state.deleteCategorizeCaseEdges,
+    (state) => state.deleteEdgesBySourceAndSourceHandle,
  );
  const form = useFormContext<z.infer<typeof FormSchema>>();
  const { t } = useTranslate('flow');
--- a/web/src/pages/agent/form/tavily-extract-form/index.tsx
+++ b/web/src/pages/agent/form/tavily-extract-form/index.tsx
@ -7,7 +7,6 @@ import {
  FormLabel,
  FormMessage,
 } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { buildOptions } from '@/utils/form';
 import { zodResolver } from '@hookform/resolvers/zod';
@ -26,6 +25,7 @@ import { buildOutputList } from '../../utils/build-output-list';
 import { ApiKeyField } from '../components/api-key-field';
 import { FormWrapper } from '../components/form-wrapper';
 import { Output } from '../components/output';
+import { PromptEditor } from '../components/prompt-editor';
 import { TavilyFormSchema } from '../tavily-form';

 const outputList = buildOutputList(initialTavilyExtractValues.outputs);
@ -64,7 +64,11 @@ function TavilyExtractForm({ node }: INextOperatorForm) {
              <FormItem>
                <FormLabel>URL</FormLabel>
                <FormControl>
-                  <Input {...field} />
+                  <PromptEditor
+                    {...field}
+                    multiLine={false}
+                    showToolbar={false}
+                  ></PromptEditor>
                </FormControl>
                <FormMessage />
              </FormItem>
--- a/web/src/pages/agent/form/tavily-form/index.tsx
+++ b/web/src/pages/agent/form/tavily-form/index.tsx
@ -12,7 +12,7 @@ import { RAGFlowSelect } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { buildOptions } from '@/utils/form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import {
@ -21,9 +21,10 @@ import {
  initialTavilyValues,
 } from '../../constant';
 import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
 import { ApiKeyField } from '../components/api-key-field';
 import { FormWrapper } from '../components/form-wrapper';
-import { Output, OutputType } from '../components/output';
+import { Output } from '../components/output';
 import { QueryVariable } from '../components/query-variable';
 import { DynamicDomain } from './dynamic-domain';
 import { useValues } from './use-values';
@ -33,6 +34,8 @@ export const TavilyFormSchema = {
  api_key: z.string(),
 };

+const outputList = buildOutputList(initialTavilyValues.outputs);
+
 function TavilyForm({ node }: INextOperatorForm) {
  const values = useValues(node);

@ -56,16 +59,6 @@ function TavilyForm({ node }: INextOperatorForm) {
    resolver: zodResolver(FormSchema),
  });

-  const outputList = useMemo(() => {
-    return Object.entries(initialTavilyValues.outputs).reduce<OutputType[]>(
-      (pre, [key, val]) => {
-        pre.push({ title: key, type: val.type });
-        return pre;
-      },
-      [],
-    );
-  }, []);
-
  useWatchFormChange(node?.id, form);

  return (
--- a/web/src/pages/agent/store.ts
+++ b/web/src/pages/agent/store.ts
@ -74,7 +74,6 @@ export type RFState = {
  deleteAgentDownstreamNodesById: (id: string) => void;
  deleteAgentToolNodeById: (id: string) => void;
  deleteIterationNodeById: (id: string) => void;
-  deleteEdgeBySourceAndSourceHandle: (connection: Partial<Connection>) => void;
  findNodeByName: (operatorName: Operator) => RAGFlowNodeType | undefined;
  updateMutableNodeFormItem: (id: string, field: string, value: any) => void;
  getOperatorTypeFromId: (id?: string | null) => string | undefined;
@ -84,7 +83,10 @@ export type RFState = {
  setClickedNodeId: (id?: string) => void;
  setClickedToolId: (id?: string) => void;
  findUpstreamNodeById: (id?: string | null) => RAGFlowNodeType | undefined;
-  deleteCategorizeCaseEdges: (source: string, sourceHandle: string) => void; // Deleting a condition of a classification operator will delete the related edge
+  deleteEdgesBySourceAndSourceHandle: (
+    source: string,
+    sourceHandle: string,
+  ) => void; // Deleting a condition of a classification operator will delete the related edge
  findAgentToolNodeById: (id: string | null) => string | undefined;
  selectNodeIds: (nodeIds: string[]) => void;
 };
@ -330,19 +332,6 @@ const useGraphStore = create<RFState>()(
          edges: edges.filter((edge) => edge.id !== id),
        });
      },
-      deleteEdgeBySourceAndSourceHandle: ({
-        source,
-        sourceHandle,
-      }: Partial<Connection>) => {
-        const { edges } = get();
-        const nextEdges = edges.filter(
-          (edge) =>
-            edge.source !== source || edge.sourceHandle !== sourceHandle,
-        );
-        set({
-          edges: nextEdges,
-        });
-      },
      deleteNodeById: (id: string) => {
        const {
          nodes,
@ -511,7 +500,7 @@ const useGraphStore = create<RFState>()(
        const edge = edges.find((x) => x.target === id);
        return getNode(edge?.source);
      },
-      deleteCategorizeCaseEdges: (source, sourceHandle) => {
+      deleteEdgesBySourceAndSourceHandle: (source, sourceHandle) => {
        const { edges, setEdges } = get();
        setEdges(
          edges.filter(
--- a/web/src/pages/agent/utils.test.ts
+++ b/web/src/pages/agent/utils.test.ts
@ -1,106 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import customer_service from '../../../../graph/test/dsl_examples/customer_service.json';
-import headhunter_zh from '../../../../graph/test/dsl_examples/headhunter_zh.json';
-import interpreter from '../../../../graph/test/dsl_examples/interpreter.json';
-import retrievalRelevantRewriteAndGenerate from '../../../../graph/test/dsl_examples/retrieval_relevant_rewrite_and_generate.json';
-import { dsl } from './mock';
-import { buildNodesAndEdgesFromDSLComponents } from './utils';
-
-test('buildNodesAndEdgesFromDSLComponents', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(dsl.components);
-
-  expect(nodes.length).toEqual(4);
-  expect(edges.length).toEqual(4);
-
-  expect(edges).toEqual(
-    expect.arrayContaining([
-      expect.objectContaining({
-        source: 'begin',
-        target: 'Answer:China',
-      }),
-      expect.objectContaining({
-        source: 'Answer:China',
-        target: 'Retrieval:China',
-      }),
-      expect.objectContaining({
-        source: 'Retrieval:China',
-        target: 'Generate:China',
-      }),
-      expect.objectContaining({
-        source: 'Generate:China',
-        target: 'Answer:China',
-      }),
-    ]),
-  );
-});
-
-test('build nodes and edges from  headhunter_zh dsl', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(
-    headhunter_zh.components,
-  );
-  console.info('node length', nodes.length);
-  console.info('edge length', edges.length);
-  try {
-    fs.writeFileSync(
-      path.join(__dirname, 'headhunter_zh.json'),
-      JSON.stringify({ edges, nodes }, null, 4),
-    );
-    console.log('JSON data is saved.');
-  } catch (error) {
-    console.warn(error);
-  }
-  expect(nodes.length).toEqual(12);
-});
-
-test('build nodes and edges from customer_service dsl', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(
-    customer_service.components,
-  );
-  console.info('node length', nodes.length);
-  console.info('edge length', edges.length);
-  try {
-    fs.writeFileSync(
-      path.join(__dirname, 'customer_service.json'),
-      JSON.stringify({ edges, nodes }, null, 4),
-    );
-    console.log('JSON data is saved.');
-  } catch (error) {
-    console.warn(error);
-  }
-  expect(nodes.length).toEqual(12);
-});
-
-test('build nodes and edges from interpreter dsl', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(
-    interpreter.components,
-  );
-  console.info('node length', nodes.length);
-  console.info('edge length', edges.length);
-  try {
-    fs.writeFileSync(
-      path.join(__dirname, 'interpreter.json'),
-      JSON.stringify({ edges, nodes }, null, 4),
-    );
-    console.log('JSON data is saved.');
-  } catch (error) {
-    console.warn(error);
-  }
-  expect(nodes.length).toEqual(12);
-});
-
-test('build nodes and edges from chat bot dsl', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(
-    retrievalRelevantRewriteAndGenerate.components,
-  );
-  try {
-    fs.writeFileSync(
-      path.join(__dirname, 'retrieval_relevant_rewrite_and_generate.json'),
-      JSON.stringify({ edges, nodes }, null, 4),
-    );
-    console.log('JSON data is saved.');
-  } catch (error) {
-    console.warn(error);
-  }
-  expect(nodes.length).toEqual(12);
-});
--- a/web/src/pages/agent/utils.ts
+++ b/web/src/pages/agent/utils.ts
@ -6,91 +6,28 @@ import {
 } from '@/interfaces/database/agent';
 import { DSLComponents, RAGFlowNodeType } from '@/interfaces/database/flow';
 import { removeUselessFieldsFromValues } from '@/utils/form';
-import { Edge, Node, Position, XYPosition } from '@xyflow/react';
+import { Edge, Node, XYPosition } from '@xyflow/react';
 import { FormInstance, FormListFieldData } from 'antd';
 import { humanId } from 'human-id';
 import { curry, get, intersectionWith, isEqual, omit, sample } from 'lodash';
 import pipe from 'lodash/fp/pipe';
 import isObject from 'lodash/isObject';
-import { v4 as uuidv4 } from 'uuid';
 import {
  CategorizeAnchorPointPositions,
  NoDebugOperatorsList,
  NodeHandleId,
-  NodeMap,
  Operator,
 } from './constant';
 import { BeginQuery, IPosition } from './interface';

-const buildEdges = (
-  operatorIds: string[],
-  currentId: string,
-  allEdges: Edge[],
-  isUpstream = false,
-  componentName: string,
-  nodeParams: Record<string, unknown>,
-) => {
-  operatorIds.forEach((cur) => {
-    const source = isUpstream ? cur : currentId;
-    const target = isUpstream ? currentId : cur;
-    if (!allEdges.some((e) => e.source === source && e.target === target)) {
-      const edge: Edge = {
-        id: uuidv4(),
-        label: '',
-        // type: 'step',
-        source: source,
-        target: target,
-        // markerEnd: {
-        //   type: MarkerType.ArrowClosed,
-        //   color: 'rgb(157 149 225)',
-        //   width: 20,
-        //   height: 20,
-        // },
-      };
-      if (componentName === Operator.Categorize && !isUpstream) {
-        const categoryDescription =
-          nodeParams.category_description as ICategorizeItemResult;
-
-        const name = Object.keys(categoryDescription).find(
-          (x) => categoryDescription[x].to === target,
+function buildAgentExceptionGoto(edges: Edge[], nodeId: string) {
+  const exceptionEdges = edges.filter(
+    (x) =>
+      x.source === nodeId && x.sourceHandle === NodeHandleId.AgentException,
  );

-        if (name) {
-          edge.sourceHandle = name;
+  return exceptionEdges.map((x) => x.target);
 }
-      }
-      allEdges.push(edge);
-    }
-  });
-};
-
-export const buildNodesAndEdgesFromDSLComponents = (data: DSLComponents) => {
-  const nodes: Node[] = [];
-  let edges: Edge[] = [];
-
-  Object.entries(data).forEach(([key, value]) => {
-    const downstream = [...value.downstream];
-    const upstream = [...value.upstream];
-    const { component_name: componentName, params } = value.obj;
-    nodes.push({
-      id: key,
-      type: NodeMap[value.obj.component_name as Operator] || 'ragNode',
-      position: { x: 0, y: 0 },
-      data: {
-        label: componentName,
-        name: humanId(),
-        form: params,
-      },
-      sourcePosition: Position.Left,
-      targetPosition: Position.Right,
-    });
-
-    buildEdges(upstream, key, edges, true, componentName, params);
-    buildEdges(downstream, key, edges, false, componentName, params);
-  });
-
-  return { nodes, edges };
-};

 const buildComponentDownstreamOrUpstream = (
  edges: Edge[],
@ -103,7 +40,9 @@ const buildComponentDownstreamOrUpstream = (
      const node = nodes.find((x) => x.id === nodeId);
      let isNotUpstreamTool = true;
      let isNotUpstreamAgent = true;
+      let isNotExceptionGoto = true;
      if (isBuildDownstream && node?.data.label === Operator.Agent) {
+        isNotExceptionGoto = y.sourceHandle !== NodeHandleId.AgentException;
        // Exclude the tool operator downstream of the agent operator
        isNotUpstreamTool = !y.target.startsWith(Operator.Tool);
        // Exclude the agent operator downstream of the agent operator
@ -115,7 +54,8 @@ const buildComponentDownstreamOrUpstream = (
      return (
        y[isBuildDownstream ? 'source' : 'target'] === nodeId &&
        isNotUpstreamTool &&
-        isNotUpstreamAgent
+        isNotUpstreamAgent &&
+        isNotExceptionGoto
      );
    })
    .map((y) => y[isBuildDownstream ? 'target' : 'source']);
@ -234,7 +174,10 @@ export const buildDslComponentsByGraph = (
      switch (operatorName) {
        case Operator.Agent: {
          const { params: formData } = buildAgentTools(edges, nodes, id);
-          params = formData;
+          params = {
+            ...formData,
+            exception_goto: buildAgentExceptionGoto(edges, id),
+          };
          break;
        }
        case Operator.Categorize:
@ -559,7 +502,7 @@ export const buildCategorizeObjectFromList = (list: Array<ICategorizeItem>) => {
    if (cur?.name) {
      pre[cur.name] = {
        ...omit(cur, 'name', 'examples'),
-        examples: convertToStringArray(cur.examples),
+        examples: convertToStringArray(cur.examples) as string[],
      };
    }
    return pre;