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,7 +55,9 @@ function OperatorItemList({
   const onNodeCreated = useContext(OnNodeCreatedContext);
   const { t } = useTranslation();
 
-  const handleClick = (operator: Operator) => {
+  const handleClick =
+    (operator: Operator): React.MouseEventHandler<HTMLElement> =>
+    (e) => {
       const contextData = handleContext || {
         nodeId: '',
         id: '',
@@ -69,7 +71,7 @@ function OperatorItemList({
             clientX: mousePosition.x,
             clientY: mousePosition.y,
           }
-      : undefined;
+        : e;
 
       const newNodeId = addCanvasNode(operator, contextData)(mockEvent);
 
@@ -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: [],