Add 'Back' button to tutorial popover

Introduces a 'Back' button to the blocks control popover in the tutorial, allowing users to navigate to the previous step.

autogpt_platform/frontend/src/components/Flow.tsx

@@ -186,10 +186,16 @@ const FlowEditor: React.FC<{
       storage.clean(Key.SHEPHERD_TOUR);
       router.push(pathname);
     } else if (!storage.get(Key.SHEPHERD_TOUR)) {
-      const emptyNodes = (forceRemove: boolean = false) =>
+      // Add a small delay to ensure the component state is fully initialized
-        forceRemove ? (setNodes([]), setEdges([]), true) : nodes.length === 0;
+      // This is especially important when resetTutorial=true caused a redirect
-      startTutorial(emptyNodes, setPinBlocksPopover, setPinSavePopover);
+      const timer = setTimeout(() => {
-      storage.set(Key.SHEPHERD_TOUR, "yes");
+        const emptyNodes = (forceRemove: boolean = false) =>
+          forceRemove ? (setNodes([]), setEdges([]), true) : nodes.length === 0;
+        startTutorial(emptyNodes, setPinBlocksPopover, setPinSavePopover);
+        storage.set(Key.SHEPHERD_TOUR, "yes");
+      }, 100);
+
+      return () => clearTimeout(timer);
     }
   }, [router, pathname, params, setEdges, setNodes, nodes.length]);
 

autogpt_platform/frontend/src/components/tutorial.ts

@@ -190,7 +190,12 @@ export const startTutorial = (
       element: '[data-id="blocks-control-popover-content"]',
       on: "right",
     },
-    buttons: [],
+    buttons: [
+      {
+        text: "Back",
+        action: tour.back,
+      },
+    ],
     beforeShowPromise: () =>
       waitForElement('[data-id="blocks-control-popover-content"]').then(() => {
         disableOtherBlocks(
@@ -202,7 +207,11 @@ export const startTutorial = (
       event: "click",
     },
     when: {
-      show: () => setPinBlocksPopover(true),
+      show: () => {
+        setPinBlocksPopover(true);
+        // Additional safeguard - ensure the popover stays pinned for this step
+        setTimeout(() => setPinBlocksPopover(true), 50);
+      },
       hide: enableAllBlocks,
     },
   });