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

@@ -24,3 +24,5 @@ export enum AgentGlobals {
   SysConversationTurns = 'sys.conversation_turns',
   SysFiles = 'sys.files',
 }
+
+export const AgentGlobalsSysQueryWithBrace = `{${AgentGlobals.SysQuery}}`;

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

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 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">
@@ -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} />

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: [],