Fix: Fixed the issue where the connection lines of placeholder nodes in the agent canvas could not be displayed #9869 (#10485)

### What problem does this PR solve?

Fix: Fixed the issue where the connection lines of placeholder nodes in
the agent canvas could not be displayed #9869

### Type of change

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

web/src/pages/agent/hooks/use-connection-drag.ts

@@ -1,8 +1,7 @@
-import { Connection, Position } from '@xyflow/react';
+import { Connection, OnConnectEnd, Position } from '@xyflow/react';
 import { useCallback, useRef } from 'react';
 import { useDropdownManager } from '../canvas/context';
 import { Operator, PREVENT_CLOSE_DELAY } from '../constant';
-import useGraphStore from '../store';
 import { useAddNode } from './use-add-node';
 
 interface ConnectionStartParams {
@@ -40,7 +39,6 @@ export const useConnectionDrag = (
 
   const { addCanvasNode } = useAddNode(reactFlowInstance);
   const { setActiveDropdown } = useDropdownManager();
-  const { setHighlightedPlaceholderEdgeId } = useGraphStore();
 
   /**
    * Connection start handler function
@@ -66,8 +64,8 @@ export const useConnectionDrag = (
   /**
    * Connection end handler function
    */
-  const onConnectEnd = useCallback(
-    (event: MouseEvent | TouchEvent) => {
+  const onConnectEnd: OnConnectEnd = useCallback(
+    (event) => {
       if ('clientX' in event && 'clientY' in event) {
         const { clientX, clientY } = event;
         setDropdownPosition({ x: clientX, y: clientY });
@@ -113,11 +111,6 @@ export const useConnectionDrag = (
 
           if (newNodeId) {
             setCreatedPlaceholderRef(newNodeId);
-
-            if (connectionStartRef.current) {
-              const edgeId = `xy-edge__${connectionStartRef.current.nodeId}${connectionStartRef.current.handleId}-${newNodeId}end`;
-              setHighlightedPlaceholderEdgeId(edgeId);
-            }
           }
 
           // Calculate placeholder node position and display dropdown menu
@@ -154,7 +147,6 @@ export const useConnectionDrag = (
       calculateDropdownPosition,
       setActiveDropdown,
       showModal,
-      setHighlightedPlaceholderEdgeId,
       checkAndRemoveExistingPlaceholder,
       removePlaceholderNode,
       hideModal,
@@ -206,13 +198,7 @@ export const useConnectionDrag = (
     removePlaceholderNode();
     hideModal();
     clearActiveDropdown();
-    setHighlightedPlaceholderEdgeId(null);
-  }, [
-    removePlaceholderNode,
-    hideModal,
-    clearActiveDropdown,
-    setHighlightedPlaceholderEdgeId,
-  ]);
+  }, [removePlaceholderNode, hideModal, clearActiveDropdown]);
 
   return {
     onConnectStart,

web/src/pages/agent/hooks/use-placeholder-manager.ts

@@ -42,9 +42,6 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
         });
       }
 
-      // Clear highlighted placeholder edge
-      useGraphStore.getState().setHighlightedPlaceholderEdgeId(null);
-
       // Update ref reference
       if (createdPlaceholderRef.current === existingPlaceholder.id) {
         createdPlaceholderRef.current = null;
@@ -62,8 +59,7 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
       reactFlowInstance &&
       !userSelectedNodeRef.current
     ) {
-      const { nodes, edges, setHighlightedPlaceholderEdgeId } =
-        useGraphStore.getState();
+      const { nodes, edges } = useGraphStore.getState();
 
       // Remove edges related to placeholder
       const edgesToRemove = edges.filter(
@@ -84,8 +80,6 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
         });
       }
 
-      setHighlightedPlaceholderEdgeId(null);
-
       createdPlaceholderRef.current = null;
     }
 
@@ -101,13 +95,7 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
     (newNodeId: string) => {
       // First establish connection between new node and source, then delete placeholder
       if (createdPlaceholderRef.current && reactFlowInstance) {
-        const {
-          nodes,
-          edges,
-          addEdge,
-          updateNode,
-          setHighlightedPlaceholderEdgeId,
-        } = useGraphStore.getState();
+        const { nodes, edges, addEdge, updateNode } = useGraphStore.getState();
 
         // Find placeholder node to get its position
         const placeholderNode = nodes.find(
@@ -157,8 +145,6 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
             edges: edgesToRemove,
           });
         }
-
-        setHighlightedPlaceholderEdgeId(null);
       }
 
       // Mark that user has selected a node