Fix: Fixed the issue where the operator added by clicking the plus sign in the data flow would overlap with the original section #9886 (#10458)

### What problem does this PR solve?

Fix: Fixed the issue where the operator added by clicking the plus sign
in the data flow would overlap with the original section #9886

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/home-card.tsx

@@ -41,7 +41,7 @@ export function HomeCard({
         <div className="flex flex-col justify-between gap-1 flex-1 h-full w-[calc(100%-50px)]">
           <section className="flex justify-between w-full">
             <section className="flex gap-1 items-center w-full">
-              <div className="text-[20px] font-bold w-80% leading-5 text-ellipsis overflow-hidden">
+              <div className="text-base font-bold w-80% text-ellipsis overflow-hidden leading-snug">
                 {data.name}
               </div>
               {icon}

web/src/pages/agent/hooks/use-add-node.ts

@@ -116,6 +116,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.UserFillUp]: initialUserFillUpValues,
       [Operator.StringTransform]: initialStringTransformValues,
       [Operator.TavilyExtract]: initialTavilyExtractValues,
+      [Operator.Placeholder]: {},
     };
   }, [llmId]);
 

web/src/pages/data-flow/canvas/index.tsx

@@ -178,11 +178,17 @@ function DataFlowCanvas({ drawerVisible, hideDrawer, showLogSheet }: IProps) {
   };
 
   const onConnectEnd: OnConnectEnd = (event, connectionState) => {
+    const target = event.target as HTMLElement;
     const nodeId = connectionState.fromNode?.id;
+
     // Events triggered by Handle are directly interrupted
-    if (connectionState.toNode !== null || (nodeId && hasChildNode(nodeId))) {
+    if (
+      target?.classList.contains('react-flow__handle') ||
+      (nodeId && hasChildNode(nodeId))
+    ) {
       return;
     }
+
     if ('clientX' in event && 'clientY' in event) {
       const { clientX, clientY } = event;
       setDropdownPosition({ x: clientX, y: clientY });

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

@@ -52,31 +52,33 @@ function OperatorItemList({
   const getNodeName = useGetNodeName();
   const getNodeDescription = useGetNodeDescription();
 
-  const handleClick = (operator: Operator) => {
+  const handleClick =
-    const contextData = handleContext || {
+    (operator: Operator): React.MouseEventHandler<HTMLElement> =>
-      nodeId: '',
+    (e) => {
-      id: '',
+      const contextData = handleContext || {
-      type: 'source' as const,
+        nodeId: '',
-      position: Position.Right,
+        id: '',
-      isFromConnectionDrag: true,
+        type: 'source' as const,
+        position: Position.Right,
+        isFromConnectionDrag: true,
+      };
+
+      const mockEvent = mousePosition
+        ? {
+            clientX: mousePosition.x,
+            clientY: mousePosition.y,
+          }
+        : e;
+
+      const newNodeId = addCanvasNode(operator, contextData)(mockEvent);
+
+      if (onNodeCreated && newNodeId) {
+        onNodeCreated(newNodeId);
+      }
+
+      hideModal?.();
     };
 
-    const mockEvent = mousePosition
-      ? {
-          clientX: mousePosition.x,
-          clientY: mousePosition.y,
-        }
-      : undefined;
-
-    const newNodeId = addCanvasNode(operator, contextData)(mockEvent);
-
-    if (onNodeCreated && newNodeId) {
-      onNodeCreated(newNodeId);
-    }
-
-    hideModal?.();
-  };
-
   const renderOperatorItem = (operator: Operator) => {
     const commonContent = (
       <div className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start">
@@ -89,12 +91,12 @@ function OperatorItemList({
       <Tooltip key={operator}>
         <TooltipTrigger asChild>
           {isCustomDropdown ? (
-            <li onClick={() => handleClick(operator)}>{commonContent}</li>
+            <li onClick={handleClick(operator)}>{commonContent}</li>
           ) : (
             <DropdownMenuItem
               key={operator}
               className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
-              onClick={() => handleClick(operator)}
+              onClick={handleClick(operator)}
               onSelect={() => hideModal?.()}
             >
               <OperatorIcon name={operator} />