Feat: Add child nodes and their connecting lines by clicking #3221 (#8314)

### What problem does this PR solve?
Feat: Add child nodes and their connecting lines by clicking #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,7 @@
 import { IAgentNode } from '@/interfaces/database/flow';
 import { Handle, NodeProps, Position } from '@xyflow/react';
 import { memo, useMemo } from 'react';
-import { Operator } from '../../constant';
+import { NodeHandleId, Operator } from '../../constant';
 import useGraphStore from '../../store';
 import { CommonHandle } from './handle';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
@@ -31,21 +31,22 @@ function InnerAgentNode({
         {isNotParentAgent && (
           <>
             <CommonHandle
-              id="c"
-              type="source"
+              type="target"
               position={Position.Left}
               isConnectable={isConnectable}
               style={LeftHandleStyle}
               nodeId={id}
+              id={NodeHandleId.End}
             ></CommonHandle>
             <CommonHandle
               type="source"
               position={Position.Right}
               isConnectable={isConnectable}
               className={styles.handle}
-              id="b"
               style={RightHandleStyle}
               nodeId={id}
+              id={NodeHandleId.Start}
+              isConnectableEnd={false}
             ></CommonHandle>
           </>
         )}

web/src/pages/agent/canvas/node/begin-node.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import {
   BeginQueryType,
   BeginQueryTypeIconMap,
+  NodeHandleId,
   Operator,
 } from '../../constant';
 import { BeginQuery } from '../../interface';
@@ -27,9 +28,9 @@ function InnerBeginNode({ data, id }: NodeProps<IBeginNode>) {
         type="source"
         position={Position.Right}
         isConnectable
-        className={styles.handle}
         style={RightHandleStyle}
         nodeId={id}
+        id={NodeHandleId.Start}
       ></CommonHandle>
 
       <section className="flex items-center justify-center gap-2">

web/src/pages/agent/canvas/node/categorize-node.tsx

@@ -3,6 +3,7 @@ import { ICategorizeNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { get } from 'lodash';
 import { memo } from 'react';
+import { NodeHandleId } from '../../constant';
 import { CommonHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
@@ -23,7 +24,7 @@ export function InnerCategorizeNode({
           type="target"
           position={Position.Left}
           isConnectable
-          id={'a'}
+          id={NodeHandleId.End}
           nodeId={id}
         ></CommonHandle>
 
@@ -47,6 +48,7 @@ export function InnerCategorizeNode({
                   isConnectable
                   style={{ ...RightHandleStyle, top: position.top }}
                   nodeId={id}
+                  isConnectableEnd={false}
                 ></CommonHandle>
               </div>
             );

web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx

@@ -30,8 +30,8 @@ function OperatorItemList({ operators }: OperatorItemProps) {
             key={x}
             className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
             onClick={addCanvasNode(x, {
-              id: nodeId,
-              sourceHandle: id,
+              nodeId,
+              id,
               position,
             })}
           >

web/src/pages/agent/canvas/node/index.tsx

@@ -1,6 +1,7 @@
 import { IRagNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { memo } from 'react';
+import { NodeHandleId } from '../../constant';
 import { CommonHandle } from './handle';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
@@ -17,8 +18,8 @@ function InnerRagNode({
     <ToolBar selected={selected} id={id} label={data.label}>
       <NodeWrapper>
         <CommonHandle
-          id="c"
-          type="source"
+          id={NodeHandleId.End}
+          type="target"
           position={Position.Left}
           isConnectable={isConnectable}
           style={LeftHandleStyle}
@@ -28,9 +29,10 @@ function InnerRagNode({
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
-          id="b"
+          id={NodeHandleId.Start}
           style={RightHandleStyle}
           nodeId={id}
+          isConnectableEnd={false}
         ></CommonHandle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
       </NodeWrapper>

web/src/pages/agent/canvas/node/message-node.tsx

@@ -4,6 +4,7 @@ import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { memo } from 'react';
+import { NodeHandleId } from '../../constant';
 import { CommonHandle } from './handle';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
@@ -22,20 +23,21 @@ function InnerMessageNode({
     <ToolBar selected={selected} id={id} label={data.label}>
       <NodeWrapper>
         <CommonHandle
-          id="c"
-          type="source"
+          type="target"
           position={Position.Left}
           isConnectable={isConnectable}
           style={LeftHandleStyle}
           nodeId={id}
+          id={NodeHandleId.End}
         ></CommonHandle>
         <CommonHandle
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
           style={RightHandleStyle}
-          id="b"
+          id={NodeHandleId.Start}
           nodeId={id}
+          isConnectableEnd={false}
         ></CommonHandle>
         <NodeHeader
           id={id}

web/src/pages/agent/canvas/node/retrieval-node.tsx

@@ -6,6 +6,7 @@ import { Avatar, Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { memo, useMemo } from 'react';
+import { NodeHandleId } from '../../constant';
 import { CommonHandle } from './handle';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
@@ -36,8 +37,8 @@ function InnerRetrievalNode({
     <ToolBar selected={selected} id={id} label={data.label}>
       <NodeWrapper>
         <CommonHandle
-          id="c"
-          type="source"
+          id={NodeHandleId.End}
+          type="target"
           position={Position.Left}
           isConnectable={isConnectable}
           className={styles.handle}
@@ -45,13 +46,14 @@ function InnerRetrievalNode({
           nodeId={id}
         ></CommonHandle>
         <CommonHandle
+          id={NodeHandleId.Start}
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
           className={styles.handle}
           style={RightHandleStyle}
-          id="b"
           nodeId={id}
+          isConnectableEnd={false}
         ></CommonHandle>
         <NodeHeader
           id={id}

web/src/pages/agent/canvas/node/switch-node.tsx

@@ -3,7 +3,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { memo, useCallback } from 'react';
-import { SwitchOperatorOptions } from '../../constant';
+import { NodeHandleId, SwitchOperatorOptions } from '../../constant';
 import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
 import { CommonHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
@@ -65,8 +65,8 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
           type="target"
           position={Position.Left}
           isConnectable
-          id={'a'}
           nodeId={id}
+          id={NodeHandleId.End}
         ></CommonHandle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
         <section className="gap-2.5 flex flex-col">
@@ -96,6 +96,7 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
                   isConnectable
                   style={{ ...RightHandleStyle, top: position.top }}
                   nodeId={id}
+                  isConnectableEnd={false}
                 ></CommonHandle>
               </div>
             );