Feat: The delete button is displayed only when the cursor is hovered over the connection line #3221 (#8422)

### What problem does this PR solve?

Feat: The delete button is displayed only when the cursor is hovered
over the connection line #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

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

@@ -1,5 +1,6 @@
 import {
   BaseEdge,
+  Edge,
   EdgeLabelRenderer,
   EdgeProps,
   getBezierPath,
@@ -8,7 +9,9 @@ import useGraphStore from '../../store';
 
 import { useTheme } from '@/components/theme-provider';
 import { useFetchAgent } from '@/hooks/use-agent-request';
+import { cn } from '@/lib/utils';
 import { useMemo } from 'react';
+import { NodeHandleId, Operator } from '../../constant';
 import styles from './index.less';
 
 export function ButtonEdge({
@@ -24,7 +27,9 @@ export function ButtonEdge({
   style = {},
   markerEnd,
   selected,
-}: EdgeProps) {
+  data,
+  sourceHandleId,
+}: EdgeProps<Edge<{ isHovered: boolean }>>) {
   const deleteEdgeById = useGraphStore((state) => state.deleteEdgeById);
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
@@ -72,6 +77,14 @@ export function ButtonEdge({
     return {};
   }, [source, target, graphPath]);
 
+  const visible = useMemo(() => {
+    return (
+      data?.isHovered &&
+      sourceHandleId !== NodeHandleId.Tool && // The connection between the agent node and the tool node does not need to display the delete button
+      !target.startsWith(Operator.Tool)
+    );
+  }, [data?.isHovered, sourceHandleId, target]);
+
   return (
     <>
       <BaseEdge
@@ -79,6 +92,7 @@ export function ButtonEdge({
         markerEnd={markerEnd}
         style={{ ...style, ...selectedStyle, ...highlightStyle }}
       />
+
       <EdgeLabelRenderer>
         <div
           style={{
@@ -93,9 +107,11 @@ export function ButtonEdge({
           className="nodrag nopan"
         >
           <button
-            className={
-              theme === 'dark' ? styles.edgeButtonDark : styles.edgeButton
-            }
+            className={cn(
+              theme === 'dark' ? styles.edgeButtonDark : styles.edgeButton,
+              'invisible',
+              { visible },
+            )}
             type="button"
             onClick={onEdgeClick}
           >

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

@@ -84,6 +84,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
     onEdgesChange,
     onNodesChange,
     onSelectionChange,
+    onEdgeMouseEnter,
+    onEdgeMouseLeave,
   } = useSelectCanvasData();
   const isValidConnection = useValidateConnection();
 
@@ -170,6 +172,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           onSelectionChange={onSelectionChange}
           nodeOrigin={[0.5, 0]}
           isValidConnection={isValidConnection}
+          onEdgeMouseEnter={onEdgeMouseEnter}
+          onEdgeMouseLeave={onEdgeMouseLeave}
           defaultEdgeOptions={{
             type: 'buttonEdge',
             markerEnd: 'logo',

web/src/pages/agent/canvas/node/toolbar.tsx

@@ -5,14 +5,19 @@ import {
 } from '@/components/xyflow/tooltip-node';
 import { Position } from '@xyflow/react';
 import { Copy, Play, Trash2 } from 'lucide-react';
-import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
+import {
+  HTMLAttributes,
+  MouseEventHandler,
+  PropsWithChildren,
+  useCallback,
+} from 'react';
 import { Operator } from '../../constant';
 import { useDuplicateNode } from '../../hooks';
 import useGraphStore from '../../store';
 
-function IconWrapper({ children }: PropsWithChildren) {
+function IconWrapper({ children, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className="p-1.5 bg-text-title rounded-sm cursor-pointer">
+    <div className="p-1.5 bg-text-title rounded-sm cursor-pointer" {...props}>
       {children}
     </div>
   );
@@ -30,7 +35,7 @@ export function ToolBar({ selected, children, label, id }: ToolBarProps) {
     (store) => store.deleteIterationNodeById,
   );
 
-  const deleteNode: MouseEventHandler<SVGElement> = useCallback(
+  const deleteNode: MouseEventHandler<HTMLDivElement> = useCallback(
     (e) => {
       e.stopPropagation();
       if (label === Operator.Iteration) {
@@ -44,7 +49,7 @@ export function ToolBar({ selected, children, label, id }: ToolBarProps) {
 
   const duplicateNode = useDuplicateNode();
 
-  const handleDuplicate: MouseEventHandler<SVGElement> = useCallback(
+  const handleDuplicate: MouseEventHandler<HTMLDivElement> = useCallback(
     (e) => {
       e.stopPropagation();
       duplicateNode(id, label);
@@ -61,11 +66,11 @@ export function ToolBar({ selected, children, label, id }: ToolBarProps) {
           <IconWrapper>
             <Play className="size-3.5" />
           </IconWrapper>
-          <IconWrapper>
-            <Copy className="size-3.5" onClick={handleDuplicate} />
+          <IconWrapper onClick={handleDuplicate}>
+            <Copy className="size-3.5" />
           </IconWrapper>
-          <IconWrapper>
-            <Trash2 className="size-3.5" onClick={deleteNode} />
+          <IconWrapper onClick={deleteNode}>
+            <Trash2 className="size-3.5" />
           </IconWrapper>
         </section>
       </TooltipContent>