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)

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>
   );