feat(frontend): Update block UI

autogpt_platform/frontend/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",

autogpt_platform/frontend/src/app/marketplace/page.tsx

@@ -105,7 +105,7 @@ const AgentCard: React.FC<{ agent: Agent; featured?: boolean }> = ({
 
   return (
     <div
-      className={`flex cursor-pointer flex-col justify-between rounded-lg border p-6 transition-colors duration-200 hover:bg-gray-50 ${featured ? "border-indigo-500 shadow-md" : "border-gray-200"}`}
+      className={`flex cursor-pointer flex-col justify-between rounded-lg border p-6 transition-colors duration-200 hover:bg-gray-50 ${featured ? "border-indigo-500 shadow-md" : "border-gray-300"}`}
       onClick={handleClick}
     >
       <div>

autogpt_platform/frontend/src/components/CustomEdge.tsx

@@ -48,9 +48,9 @@ export function CustomEdge({
   }>({ beads: [], created: 0, destroyed: 0 });
   const { svgPath, length, getPointForT, getTForDistance } = useBezierPath(
     sourceX - 5,
-    sourceY,
-    targetX + 3,
-    targetY,
+    sourceY - 5,
+    targetX - 9,
+    targetY - 5,
   );
   const { deleteElements } = useReactFlow<Node, CustomEdge>();
   const { visualizeBeads } = useContext(FlowContext) ?? {