feat(frontend): add tutorial in new builder

[Abhi1992002]

Changes 🏗️

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:
  • ...

Example test plan

• 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

For configuration changes:

• .env.default is updated or already compatible with my changes
• docker-compose.yml is updated or already compatible with my changes
• I have included a list of my configuration changes in the PR description (under Changes)

Examples of configuration changes

• Changing ports
• Adding new services that need to communicate with each other
• Secrets or environment variable changes
• New or infrastructure changes such as databases

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch abhimanyuyadav/open-2840-add-tutorial-in-new-builder

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for auto-gpt-docs-dev canceled.

Name	Link
🔨 Latest commit	78fd204
🔍 Latest deploy log	https://app.netlify.com/projects/auto-gpt-docs-dev/deploys/6926f4c56490ca0008da21f7

[netlify]

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	78fd204
🔍 Latest deploy log	https://app.netlify.com/projects/auto-gpt-docs/deploys/6926f4c578cfbe0008695d79

[deepsource-io]

Here's the code health analysis summary for commits 1851264..78fd204. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success	❗ 37 occurences introduced 🎯 17 occurences resolved	View Check ↗
Python	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[AutoGPT-Agent]

Thank you for adding this tutorial functionality to the new builder! This looks like a valuable feature that will help users get familiar with the builder interface.

However, before this PR can be approved, there are some issues with the PR description that need to be addressed:

1. Missing description of changes: Please add a clear explanation of what the tutorial does in the "Changes" section of the PR description.

2. Uncompleted checklist: The PR template checklist needs to be filled out completely. Please:

   • Check the box confirming you've listed your changes
   • Make a test plan
   • Check the box confirming you've tested according to the plan
   • Detail your test plan in the provided section

3. No test plan: Please provide a test plan that explains how you've verified this tutorial works correctly. This should include steps like:

   • Testing the complete tutorial flow from beginning to end
   • Testing individual tutorial steps
   • Testing on different browsers/screen sizes (if applicable)
   • Any edge cases you've tested

The code changes themselves look well-structured and comprehensive. I particularly like how you've organized the tutorial helpers into separate modules and created detailed, step-by-step guidance for users.

Please update the PR description with the requested information, and then this PR should be ready for approval.

[AutoGPT-Agent]

Thank you for your contribution adding a tutorial feature to the new builder interface! This looks like a comprehensive implementation of an interactive tutorial system that will help users understand how to use the builder.

However, before we can merge this PR, a few things need to be addressed:

Missing PR Description

• Please add a clear explanation of why these changes are needed in the PR description
• Fill out the "Changes" section with a concise summary of what your PR adds (e.g., "Adds an interactive tutorial system to guide new users through the builder interface")

Incomplete Checklist

• The checklist in the PR description needs to be completed
• Please check the boxes for relevant items (code changes, test plan)
• Add your test plan detailing how you verified the tutorial works correctly

Your code looks well-structured with a comprehensive implementation of the tutorial system. The tutorial steps, helpers, and styles are organized in a maintainable way. I particularly like the attention to detail with the different tutorial steps and the visual guidance provided to users.

Once you've updated the PR description and completed the checklist, we'll be happy to review this again for merging.

[AutoGPT-Agent]

Thank you for adding the tutorial feature to the new builder! This looks like a comprehensive implementation that will help users get started with building agents.

However, before we can merge this PR, please update the PR description to:

1. Explain the need for this tutorial feature (why it's important)
2. Provide a concise description of the changes you've made
3. Complete the checklist items, particularly:
   • Confirming you've listed the changes
   • Noting that you've made a test plan
   • Checking the boxes for testing your changes

Also, could you provide some details about how you tested this feature? For example:

• Testing the tutorial flow from beginning to end
• Testing on different screen sizes
• Any edge cases you checked

The code changes themselves look good - I like how you've structured the tutorial with separate steps and helper functions, and the data-id attributes should make the tutorial elements easy to target.