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}
           >