From 795db938965b7de82b4f240d60389d4b7db42e84 Mon Sep 17 00:00:00 2001
From: abhi1992002 <abhimanyu1992002@gmail.com>
Date: Thu, 11 Dec 2025 09:31:48 +0530
Subject: [PATCH] feat(frontend): Enhance CustomEdge component with hover
 effects
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Changes 🏗️
- Added `useState` to manage hover state for the CustomEdge component.
- Updated button opacity to transition based on hover state, improving user interaction feedback.
- Refactored button class to utilize `cn` for conditional styling.

### Checklist 📋
- [x] Implemented hover effects for better UX
- [x] Tested hover functionality to ensure proper visibility of the button
---
 .../build/components/FlowEditor/edges/CustomEdge.tsx  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx
index b49fd11602ce..ff80fdc8accc 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx
@@ -1,3 +1,4 @@
+import { memo, useState } from "react";
 import { Button } from "@/components/atoms/Button/Button";
 import {
   BaseEdge,
@@ -20,7 +21,6 @@ export type CustomEdgeData = {
 };
 
 export type CustomEdge = XYEdge<CustomEdgeData, "custom">;
-import { memo } from "react";
 
 const CustomEdge = ({
   id,
@@ -35,6 +35,8 @@ const CustomEdge = ({
   selected,
 }: EdgeProps<CustomEdge>) => {
   const removeConnection = useEdgeStore((state) => state.removeEdge);
+  const [isHovered, setIsHovered] = useState(false);
+
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
@@ -69,12 +71,17 @@ const CustomEdge = ({
       <EdgeLabelRenderer>
         <Button
           onClick={() => removeConnection(id)}
-          className={`absolute h-fit min-w-0 p-1`}
+          className={cn(
+            "absolute h-fit min-w-0 p-1 transition-opacity",
+            isHovered ? "opacity-100" : "opacity-0",
+          )}
           variant="secondary"
           style={{
             transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
             pointerEvents: "all",
           }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
         >
           <XIcon className="h-3 w-3" weight="bold" />
         </Button>