Feature/agent UI style optimization (#10385)

### What problem does this PR solve?

Hi team,  @ZhenhangTung @KevinHuSh  @cike8899 
About #10384 , I've completed the UI optimization adjustments for the
Agent page according to our previous discussions and the design draft
sketches provided by @Naomi. The main modifications include:

1. Adjusted the style and content of placeholder-node.
2. Adjusted the location of the dropdown (to the right of the
placeholder-node) .
3. Adjusted the tooltip position spacing when the mouse hovers in the
dropdown menu.
4. Hides the thick scroll bar on the dropdown component.
5. Highlight the connection line when dragging to generate a
placeholder-node

<img width="1323" height="509" alt="Image"
src="https://github.com/user-attachments/assets/0d366f7f-477d-4c00-bb58-d5d58b3a745f"
/>

Please review the related code modifications when you have time. Let me
know if further adjustments are needed!
Thanks！

### Type of change

- [x] Other (please describe): UI Enhancement

---------

Co-authored-by: leonlai <leonlai@futurefab.ai>

web/src/pages/agent/hooks/use-build-dsl.ts

@@ -1,6 +1,7 @@
 import { useFetchAgent } from '@/hooks/use-agent-request';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { useCallback } from 'react';
+import { Operator } from '../constant';
 import useGraphStore from '../store';
 import { buildDslComponentsByGraph } from '../utils';
 
@@ -10,15 +11,35 @@ export const useBuildDslData = () => {
 
   const buildDslData = useCallback(
     (currentNodes?: RAGFlowNodeType[]) => {
+      const nodesToProcess = currentNodes ?? nodes;
+
+      // Filter out placeholder nodes and related edges
+      const filteredNodes = nodesToProcess.filter(
+        (node) => node.data?.label !== Operator.Placeholder,
+      );
+
+      const filteredEdges = edges.filter((edge) => {
+        const sourceNode = nodesToProcess.find(
+          (node) => node.id === edge.source,
+        );
+        const targetNode = nodesToProcess.find(
+          (node) => node.id === edge.target,
+        );
+        return (
+          sourceNode?.data?.label !== Operator.Placeholder &&
+          targetNode?.data?.label !== Operator.Placeholder
+        );
+      });
+
       const dslComponents = buildDslComponentsByGraph(
-        currentNodes ?? nodes,
-        edges,
+        filteredNodes,
+        filteredEdges,
         data.dsl.components,
       );
 
       return {
         ...data.dsl,
-        graph: { nodes: currentNodes ?? nodes, edges },
+        graph: { nodes: filteredNodes, edges: filteredEdges },
         components: dslComponents,
       };
     },

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

@@ -2,6 +2,7 @@ import { Connection, 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 {
@@ -26,6 +27,7 @@ export const useConnectionDrag = (
   ) => { x: number; y: number },
   removePlaceholderNode: () => void,
   clearActiveDropdown: () => void,
+  checkAndRemoveExistingPlaceholder: () => void,
 ) => {
   // Reference for whether connection is established
   const isConnectedRef = useRef(false);
@@ -38,6 +40,7 @@ export const useConnectionDrag = (
 
   const { addCanvasNode } = useAddNode(reactFlowInstance);
   const { setActiveDropdown } = useDropdownManager();
+  const { setHighlightedPlaceholderEdgeId } = useGraphStore();
 
   /**
    * Connection start handler function
@@ -81,10 +84,17 @@ export const useConnectionDrag = (
           }
 
           if (isHandleClick) {
+            removePlaceholderNode();
+            hideModal();
+            clearActiveDropdown();
             connectionStartRef.current = null;
             mouseStartPosRef.current = null;
             return;
           }
+
+          // Check and remove existing placeholder-node before creating new one
+          checkAndRemoveExistingPlaceholder();
+
           // Create placeholder node and establish connection
           const mockEvent = { clientX, clientY };
           const contextData = {
@@ -101,9 +111,13 @@ export const useConnectionDrag = (
             contextData,
           )(mockEvent);
 
-          // Record the created placeholder node ID
           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
@@ -140,6 +154,11 @@ export const useConnectionDrag = (
       calculateDropdownPosition,
       setActiveDropdown,
       showModal,
+      setHighlightedPlaceholderEdgeId,
+      checkAndRemoveExistingPlaceholder,
+      removePlaceholderNode,
+      hideModal,
+      clearActiveDropdown,
     ],
   );
 
@@ -187,7 +206,13 @@ export const useConnectionDrag = (
     removePlaceholderNode();
     hideModal();
     clearActiveDropdown();
-  }, [removePlaceholderNode, hideModal, clearActiveDropdown]);
+    setHighlightedPlaceholderEdgeId(null);
+  }, [
+    removePlaceholderNode,
+    hideModal,
+    clearActiveDropdown,
+    setHighlightedPlaceholderEdgeId,
+  ]);
 
   return {
     onConnectStart,

web/src/pages/agent/hooks/use-dropdown-position.ts

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import {
-  HALF_PLACEHOLDER_NODE_HEIGHT,
+  DROPDOWN_HORIZONTAL_OFFSET,
+  DROPDOWN_VERTICAL_OFFSET,
   HALF_PLACEHOLDER_NODE_WIDTH,
 } from '../constant';
 
@@ -29,8 +30,11 @@ export const useDropdownPosition = (reactFlowInstance: any) => {
 
       // Calculate dropdown position in flow coordinate system
       const dropdownFlowPosition = {
-        x: placeholderNodePosition.x - HALF_PLACEHOLDER_NODE_WIDTH, // Placeholder node left-aligned offset
-        y: placeholderNodePosition.y + HALF_PLACEHOLDER_NODE_HEIGHT, // Placeholder node height plus spacing
+        x:
+          placeholderNodePosition.x +
+          HALF_PLACEHOLDER_NODE_WIDTH +
+          DROPDOWN_HORIZONTAL_OFFSET,
+        y: placeholderNodePosition.y - DROPDOWN_VERTICAL_OFFSET,
       };
 
       // Convert flow coordinates back to screen coordinates

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

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from 'react';
+import { Operator } from '../constant';
 import useGraphStore from '../store';
 
 /**
@@ -11,6 +12,46 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
   // Flag indicating whether user has selected a node
   const userSelectedNodeRef = useRef(false);
 
+  /**
+   * Check if placeholder node exists and remove it if found
+   * Ensures only one placeholder can exist on the panel
+   */
+  const checkAndRemoveExistingPlaceholder = useCallback(() => {
+    const { nodes, edges } = useGraphStore.getState();
+
+    // Find existing placeholder node
+    const existingPlaceholder = nodes.find(
+      (node) => node.data?.label === Operator.Placeholder,
+    );
+
+    if (existingPlaceholder && reactFlowInstance) {
+      // Remove edges related to placeholder
+      const edgesToRemove = edges.filter(
+        (edge) =>
+          edge.target === existingPlaceholder.id ||
+          edge.source === existingPlaceholder.id,
+      );
+
+      // Remove placeholder node
+      const nodesToRemove = [existingPlaceholder];
+
+      if (nodesToRemove.length > 0 || edgesToRemove.length > 0) {
+        reactFlowInstance.deleteElements({
+          nodes: nodesToRemove,
+          edges: edgesToRemove,
+        });
+      }
+
+      // Clear highlighted placeholder edge
+      useGraphStore.getState().setHighlightedPlaceholderEdgeId(null);
+
+      // Update ref reference
+      if (createdPlaceholderRef.current === existingPlaceholder.id) {
+        createdPlaceholderRef.current = null;
+      }
+    }
+  }, [reactFlowInstance]);
+
   /**
    * Function to remove placeholder node
    * Called when user clicks blank area or cancels operation
@@ -21,7 +62,8 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
       reactFlowInstance &&
       !userSelectedNodeRef.current
     ) {
-      const { nodes, edges } = useGraphStore.getState();
+      const { nodes, edges, setHighlightedPlaceholderEdgeId } =
+        useGraphStore.getState();
 
       // Remove edges related to placeholder
       const edgesToRemove = edges.filter(
@@ -42,6 +84,8 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
         });
       }
 
+      setHighlightedPlaceholderEdgeId(null);
+
       createdPlaceholderRef.current = null;
     }
 
@@ -57,7 +101,13 @@ 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 } = useGraphStore.getState();
+        const {
+          nodes,
+          edges,
+          addEdge,
+          updateNode,
+          setHighlightedPlaceholderEdgeId,
+        } = useGraphStore.getState();
 
         // Find placeholder node to get its position
         const placeholderNode = nodes.find(
@@ -107,6 +157,8 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
             edges: edgesToRemove,
           });
         }
+
+        setHighlightedPlaceholderEdgeId(null);
       }
 
       // Mark that user has selected a node
@@ -135,6 +187,7 @@ export const usePlaceholderManager = (reactFlowInstance: any) => {
     onNodeCreated,
     setCreatedPlaceholderRef,
     resetUserSelectedFlag,
+    checkAndRemoveExistingPlaceholder,
     createdPlaceholderRef: createdPlaceholderRef.current,
     userSelectedNodeRef: userSelectedNodeRef.current,
   };