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 <[email protected]> Co-authored-by: Nicholas Tindle <[email protected]> Co-authored-by: Bently <[email protected]>
Significant-Gravitas · Oct 12, 2024 · 8502928 · 8502928
1 parent c1f9741
commit 8502928
Show file tree

Hide file tree

Showing 25 changed files with 1,841 additions and 2,007 deletions.
diff --git a/autogpt_platform/frontend/package.json b/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",

diff --git a/autogpt_platform/frontend/src/app/marketplace/page.tsx b/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>

diff --git a/autogpt_platform/frontend/src/components/CustomEdge.tsx b/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) ?? {