tweak(frontend): Update Blocks UI

[Swiftyos]

Background

The current agent flows are engineering prototypes. For the beta we are doing a refresh with rapid fire design tweaks by a pro.

This PR aims to implement our designers work on the blocks ui

Changes 🏗️

• Update Block UI
• Added Context Menu for blocks
• Updated Block Connecting line to terminate at handles
• Update Tutorial and Tally Buttons
• Added pointer indicator in Block Control Panel

Screen.Recording.2024-09-27.at.16.22.27.mov

Screen.Recording.2024-09-27.at.16.50.33.mov

Testing 🔍

Note

Only for the new autogpt platform, currently in autogpt_platform/

• Create from scratch and execute an agent with at least 3 blocks
• Import an agent from file upload, and confirm it executes correctly
• Upload agent to marketplace
• Import an agent from marketplace and confirm it executes correctly
• Edit an agent from monitor, and confirm it executes correctly

[netlify]

✅ Deploy Preview for auto-gpt-docs ready!

Name	Link
🔨 Latest commit	ac6ec23
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/66fdfbb62cb6e600088e1920
😎 Deploy Preview	https://deploy-preview-8190--auto-gpt-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.

I got here through a notification and only reviewed the changes from one commit

[Pwuts]

I like the gist of these changes, but it needs significant polishing:

1. I'm not sure this changed border radius is really an improvement...
2. .. and it's not consistent ..
3. .. across inputs. This kind of aesthetic adjustments should be made as part of a complete design, across the board, and in the base shad/cn components themselves. In this case, I suggest reverting these changes. Functionality and layout is much more important than the exact aesthetics at our current stage anyway.
4. Zero margin
5. Uneven vertical alignment
6. Both vertical and horizontal alignment is off here: vertical misalignment between the handles and the input boxes, and horizontal misalignment between the "+ Add Item" button and the rest. That button should probably be full-width.
7. Horizontal separator does not connect to outer box on the left, while it does on the right

[majdyz]

@Pwuts did you test this or is this coming from the initial screenshots?
I've been aligning this current PR from its initial state with the current design.

Can you checkout the branch, test it, and see if those comments are still valid?

For 7 it was intentional. Discussion on the design can be done separately

[github-actions]

Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly.

[Bentlybro]

Tested and everything seems to be working well 😄