feat(frontend): Update and fix tutorial (#8943)

This is to fix [Tutorial highlight causes bottom buttons to move up
#8942](https://github.com/Significant-Gravitas/AutoGPT/issues/8942)

### Changes 🏗️

Updates the tutorial to add a short delay before moving onto the next
step which prevents the UI from lifting up in a weird way (skip to 14
seconds in the video below to see this being fixed)
Updates to some of the positioning of the steps

Video to show latest run through whole tutorial 


https://github.com/user-attachments/assets/4cf09a2f-8ed2-45bd-9909-aa92540af845

autogpt_platform/frontend/src/components/tutorial.ts

@@ -172,7 +172,7 @@ export const startTutorial = (
     text: "Please click the block button to open the blocks menu.",
     attachTo: {
       element: '[data-id="blocks-control-popover-trigger"]',
-      on: "bottom",
+      on: "right",
     },
     advanceOn: {
       selector: '[data-id="blocks-control-popover-trigger"]',
@@ -210,7 +210,7 @@ export const startTutorial = (
     id: "focus-new-block",
     title: "New Block",
     text: "This is the Calculator Block! Let's go over how it works.",
-    attachTo: { element: `[data-id="custom-node-1"]`, on: "top" },
+    attachTo: { element: `[data-id="custom-node-1"]`, on: "left" },
     beforeShowPromise: () => waitForElement('[data-id="custom-node-1"]'),
     buttons: [
       {
@@ -308,7 +308,7 @@ export const startTutorial = (
     text: "Enter a name for your agent, add an optional description, and then click 'Save agent' to save your flow.",
     attachTo: {
       element: '[data-id="save-control-popover-content"]',
-      on: "bottom",
+      on: "top",
     },
     buttons: [],
     beforeShowPromise: () =>
@@ -371,13 +371,14 @@ export const startTutorial = (
     id: "check-output",
     title: "Check the Output",
     text: "Check here to see the output of the block after running the flow.",
-    attachTo: { element: '[data-id="latest-output"]', on: "bottom" },
-    beforeShowPromise: () => waitForElement('[data-id="latest-output"]'),
+    attachTo: { element: '[data-id="latest-output"]', on: "top" },
+    beforeShowPromise: () =>
+      new Promise((resolve) => {
+        setTimeout(() => {
+          waitForElement('[data-id="latest-output"]').then(resolve);
+        }, 100);
+      }),
     buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
       {
         text: "Next",
         action: tour.next,