Fix: Merge main branch (#10377)

### What problem does this PR solve?


### Type of change

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

---------

Signed-off-by: dependabot[bot] <support@github.com>
Signed-off-by: jinhai <haijin.chn@gmail.com>
Signed-off-by: Jin Hai <haijin.chn@gmail.com>
Co-authored-by: Lynn <lynn_inf@hotmail.com>
Co-authored-by: chanx <1243304602@qq.com>
Co-authored-by: balibabu <cike8899@users.noreply.github.com>
Co-authored-by: 纷繁下的无奈 <zhileihuang@126.com>
Co-authored-by: huangzl <huangzl@shinemo.com>
Co-authored-by: writinwaters <93570324+writinwaters@users.noreply.github.com>
Co-authored-by: Wilmer <33392318@qq.com>
Co-authored-by: Adrian Weidig <adrianweidig@gmx.net>
Co-authored-by: Zhichang Yu <yuzhichang@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Yongteng Lei <yongtengrey@outlook.com>
Co-authored-by: Liu An <asiro@qq.com>
Co-authored-by: buua436 <66937541+buua436@users.noreply.github.com>
Co-authored-by: BadwomanCraZY <511528396@qq.com>
Co-authored-by: cucusenok <31804608+cucusenok@users.noreply.github.com>
Co-authored-by: Russell Valentine <russ@coldstonelabs.org>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Billy Bao <newyorkupperbay@gmail.com>
Co-authored-by: Zhedong Cen <cenzhedong2@126.com>
Co-authored-by: TensorNull <129579691+TensorNull@users.noreply.github.com>
Co-authored-by: TensorNull <tensor.null@gmail.com>
Co-authored-by: Ajay <160579663+aybanda@users.noreply.github.com>
Co-authored-by: AB <aj@Ajays-MacBook-Air.local>
Co-authored-by: 天海蒼灆 <huangaoqin@tecpie.com>
Co-authored-by: He Wang <wanghechn@qq.com>
Co-authored-by: Atsushi Hatakeyama <atu729@icloud.com>
Co-authored-by: Jin Hai <haijin.chn@gmail.com>
Co-authored-by: Mohamed Mathari <155896313+melmathari@users.noreply.github.com>
Co-authored-by: Mohamed Mathari <nocodeventure@Mac-mini-van-Mohamed.fritz.box>
Co-authored-by: Stephen Hu <stephenhu@seismic.com>
Co-authored-by: Shaun Zhang <zhangwfjh@users.noreply.github.com>
Co-authored-by: zhimeng123 <60221886+zhimeng123@users.noreply.github.com>
Co-authored-by: mxc <mxc@example.com>
Co-authored-by: Dominik Novotný <50611433+SgtMarmite@users.noreply.github.com>
Co-authored-by: EVGENY M <168018528+rjohny55@users.noreply.github.com>
Co-authored-by: mcoder6425 <mcoder64@gmail.com>
Co-authored-by: TeslaZY <TeslaZY@outlook.com>
Co-authored-by: lemsn <lemsn@msn.com>
Co-authored-by: lemsn <lemsn@126.com>
Co-authored-by: Adrian Gora <47756404+adagora@users.noreply.github.com>
Co-authored-by: Womsxd <45663319+Womsxd@users.noreply.github.com>
Co-authored-by: FatMii <39074672+FatMii@users.noreply.github.com>

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

@@ -7,7 +7,6 @@ import {
 import { useSetModalState } from '@/hooks/common-hooks';
 import { cn } from '@/lib/utils';
 import {
-  Connection,
   ConnectionMode,
   ControlButton,
   Controls,
@@ -17,7 +16,7 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { NotebookPen } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChatSheet } from '../chat/chat-sheet';
 import { AgentBackground } from '../components/background';
@@ -37,7 +36,10 @@ import {
 import { useAddNode } from '../hooks/use-add-node';
 import { useBeforeDelete } from '../hooks/use-before-delete';
 import { useCacheChatLog } from '../hooks/use-cache-chat-log';
+import { useConnectionDrag } from '../hooks/use-connection-drag';
+import { useDropdownPosition } from '../hooks/use-dropdown-position';
 import { useMoveNote } from '../hooks/use-move-note';
+import { usePlaceholderManager } from '../hooks/use-placeholder-manager';
 import { useDropdownManager } from './context';
 
 import Spotlight from '@/components/spotlight';
@@ -62,6 +64,7 @@ import { KeywordNode } from './node/keyword-node';
 import { LogicNode } from './node/logic-node';
 import { MessageNode } from './node/message-node';
 import NoteNode from './node/note-node';
+import { PlaceholderNode } from './node/placeholder-node';
 import { RelevantNode } from './node/relevant-node';
 import { RetrievalNode } from './node/retrieval-node';
 import { RewriteNode } from './node/rewrite-node';
@@ -73,6 +76,7 @@ export const nodeTypes: NodeTypes = {
   ragNode: RagNode,
   categorizeNode: CategorizeNode,
   beginNode: BeginNode,
+  placeholderNode: PlaceholderNode,
   relevantNode: RelevantNode,
   logicNode: LogicNode,
   noteNode: NoteNode,
@@ -176,19 +180,36 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
   const { visible, hideModal, showModal } = useSetModalState();
   const [dropdownPosition, setDropdownPosition] = useState({ x: 0, y: 0 });
 
-  const isConnectedRef = useRef(false);
-  const connectionStartRef = useRef<{
-    nodeId: string;
-    handleId: string;
-  } | null>(null);
+  const { clearActiveDropdown } = useDropdownManager();
 
-  const preventCloseRef = useRef(false);
+  const { removePlaceholderNode, onNodeCreated, setCreatedPlaceholderRef } =
+    usePlaceholderManager(reactFlowInstance);
 
-  const { setActiveDropdown, clearActiveDropdown } = useDropdownManager();
+  const { calculateDropdownPosition } = useDropdownPosition(reactFlowInstance);
+
+  const {
+    onConnectStart,
+    onConnectEnd,
+    handleConnect,
+    getConnectionStartContext,
+    shouldPreventClose,
+    onMove,
+  } = useConnectionDrag(
+    reactFlowInstance,
+    originalOnConnect,
+    showModal,
+    hideModal,
+    setDropdownPosition,
+    setCreatedPlaceholderRef,
+    calculateDropdownPosition,
+    removePlaceholderNode,
+    clearActiveDropdown,
+  );
 
   const onPaneClick = useCallback(() => {
     hideFormDrawer();
-    if (visible && !preventCloseRef.current) {
+    if (visible && !shouldPreventClose()) {
+      removePlaceholderNode();
       hideModal();
       clearActiveDropdown();
     }
@@ -199,55 +220,16 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
   }, [
     hideFormDrawer,
     visible,
+    shouldPreventClose,
     hideModal,
     imgVisible,
     addNoteNode,
     mouse,
     hideImage,
     clearActiveDropdown,
+    removePlaceholderNode,
   ]);
 
-  const onConnect = (connection: Connection) => {
-    originalOnConnect(connection);
-    isConnectedRef.current = true;
-  };
-
-  const OnConnectStart = (event: any, params: any) => {
-    isConnectedRef.current = false;
-
-    if (params && params.nodeId && params.handleId) {
-      connectionStartRef.current = {
-        nodeId: params.nodeId,
-        handleId: params.handleId,
-      };
-    } else {
-      connectionStartRef.current = null;
-    }
-  };
-
-  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 });
-      if (!isConnectedRef.current) {
-        setActiveDropdown('drag');
-        showModal();
-        preventCloseRef.current = true;
-        setTimeout(() => {
-          preventCloseRef.current = false;
-        }, 300);
-      }
-    }
-  };
-
   return (
     <div className={styles.canvasWrapper}>
       <svg
@@ -278,12 +260,13 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           edges={edges}
           onEdgesChange={onEdgesChange}
           fitView
-          onConnect={onConnect}
+          onConnect={handleConnect}
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
           onDrop={onDrop}
-          onConnectStart={OnConnectStart}
-          onConnectEnd={OnConnectEnd}
+          onConnectStart={onConnectStart}
+          onConnectEnd={onConnectEnd}
+          onMove={onMove}
           onDragOver={onDragOver}
           onNodeClick={onNodeClick}
           onPaneClick={onPaneClick}
@@ -324,20 +307,24 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
         </ReactFlow>
         {visible && (
           <HandleContext.Provider
-            value={{
-              nodeId: connectionStartRef.current?.nodeId || '',
-              id: connectionStartRef.current?.handleId || '',
-              type: 'source',
-              position: Position.Right,
-              isFromConnectionDrag: true,
-            }}
+            value={
+              getConnectionStartContext() || {
+                nodeId: '',
+                id: '',
+                type: 'source',
+                position: Position.Right,
+                isFromConnectionDrag: true,
+              }
+            }
           >
             <InnerNextStepDropdown
               hideModal={() => {
+                removePlaceholderNode();
                 hideModal();
                 clearActiveDropdown();
               }}
               position={dropdownPosition}
+              onNodeCreated={onNodeCreated}
             >
               <span></span>
             </InnerNextStepDropdown>