feat(frontend): Update block UI (#8260)

* feat(platform): Update block UI

* add border on card

* added delay and badge data-id

* Fix border & width for block control list

* More cleanup on border & shadow

* Nav border consistency

* Simplify category badges

* restored backward compatablility

* fix alignement of sub handles

* Fix dynamic pin experience

* Added a timeout to prevent losing focus whilst typing

* Added flex-col back in removed timeout

* Clear nodes before tutorial

* Fix highlight on tutorial

* Sort blocks

* lint

* Fix tutorial and lint error

* w-fit

* Fix tutorial modals silly jumps!

* updates to tutorial

* prettier

* add data-id to save control bar

* prettier again

---------

Co-authored-by: Swifty <craigswift13@gmail.com>
Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>
Co-authored-by: Bently <tomnoon9@gmail.com>

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) ?? {