From 1bc33009c7269ef340a60ced0911b7fb04e754ca Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 3 Sep 2025 13:03:23 +0800
Subject: [PATCH] Fix: The operator added by clicking the plus sign will
 overlap with the original operator. #9886 (#9887)

### What problem does this PR solve?

Fix: The operator added by clicking the plus sign will overlap with the
original operator. #9886

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/constants/agent.ts                    |  2 +
 web/src/pages/agent/canvas/index.tsx          |  8 +++
 .../node/dropdown/next-step-dropdown.tsx      | 52 ++++++++++---------
 web/src/pages/agent/constant.tsx              |  3 +-
 4 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/web/src/constants/agent.ts b/web/src/constants/agent.ts
index 3fd17f973..35ac2a6f9 100644
--- a/web/src/constants/agent.ts
+++ b/web/src/constants/agent.ts
@@ -24,3 +24,5 @@ export enum AgentGlobals {
   SysConversationTurns = 'sys.conversation_turns',
   SysFiles = 'sys.files',
 }
+
+export const AgentGlobalsSysQueryWithBrace = `{${AgentGlobals.SysQuery}}`;
diff --git a/web/src/pages/agent/canvas/index.tsx b/web/src/pages/agent/canvas/index.tsx
index f2e77751b..b7c929a52 100644
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@@ -225,6 +225,14 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
   };
 
   const OnConnectEnd = (event: MouseEvent | TouchEvent) => {
+    const target = event.target as HTMLElement;
+    // Clicking Handle will also trigger OnConnectEnd.
+    // To solve the problem that the operator on the right side added by clicking Handle will overlap with the original operator, this event is blocked here.
+    // TODO: However, a better way is to add both operators in the same way as OnConnectEnd.
+    if (target?.classList.contains('react-flow__handle')) {
+      return;
+    }
+
     if ('clientX' in event && 'clientY' in event) {
       const { clientX, clientY } = event;
       setDropdownPosition({ x: clientX, y: clientY });
diff --git a/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx b/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
index 6d9f32453..1655630cb 100644
--- a/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
+++ b/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
@@ -55,31 +55,33 @@ function OperatorItemList({
   const onNodeCreated = useContext(OnNodeCreatedContext);
   const { t } = useTranslation();
 
-  const handleClick = (operator: Operator) => {
-    const contextData = handleContext || {
-      nodeId: '',
-      id: '',
-      type: 'source' as const,
-      position: Position.Right,
-      isFromConnectionDrag: true,
+  const handleClick =
+    (operator: Operator): React.MouseEventHandler<HTMLElement> =>
+    (e) => {
+      const contextData = handleContext || {
+        nodeId: '',
+        id: '',
+        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">
@@ -92,12 +94,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} />
diff --git a/web/src/pages/agent/constant.tsx b/web/src/pages/agent/constant.tsx
index 7e57c4abc..ef7aed18a 100644
--- a/web/src/pages/agent/constant.tsx
+++ b/web/src/pages/agent/constant.tsx
@@ -4,6 +4,7 @@ import {
 } from '@/components/similarity-slider';
 import {
   AgentGlobals,
+  AgentGlobalsSysQueryWithBrace,
   CodeTemplateStrMap,
   ProgrammingLanguage,
 } from '@/constants/agent';
@@ -247,7 +248,7 @@ const initialQueryBaseValues = {
 };
 
 export const initialRetrievalValues = {
-  query: AgentGlobals.SysQuery,
+  query: AgentGlobalsSysQueryWithBrace,
   top_n: 8,
   top_k: 1024,
   kb_ids: [],