From a80b0de18da5c74aff1276b822582de777710a23 Mon Sep 17 00:00:00 2001
From: Zamil Majdy <zamil.majdy@agpt.co>
Date: Tue, 1 Oct 2024 00:00:10 +0200
Subject: [PATCH] fix(platform): Fix unexpected closing block list on tutorial
 (#8233)

---
 .../frontend/src/components/Flow.tsx          | 29 ++++++-------------
 .../frontend/src/components/NavBarButtons.tsx |  2 --
 .../frontend/src/components/TallyPopup.tsx    |  5 ++--
 3 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/Flow.tsx b/autogpt_platform/frontend/src/components/Flow.tsx
index 7d22be3923..3b24dc964d 100644
--- a/autogpt_platform/frontend/src/components/Flow.tsx
+++ b/autogpt_platform/frontend/src/components/Flow.tsx
@@ -38,7 +38,7 @@ import { IconUndo2, IconRedo2 } from "@/components/ui/icons";
 import { startTutorial } from "./tutorial";
 import useAgentGraph from "@/hooks/useAgentGraph";
 import { v4 as uuidv4 } from "uuid";
-import { useRouter, usePathname } from "next/navigation";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import RunnerUIWrapper, {
   RunnerUIWrapperRef,
 } from "@/components/RunnerUIWrapper";
@@ -91,13 +91,12 @@ const FlowEditor: React.FC<{
 
   const router = useRouter();
   const pathname = usePathname();
+  const params = useSearchParams();
   const initialPositionRef = useRef<{
     [key: string]: { x: number; y: number };
   }>({});
   const isDragging = useRef(false);
 
-  // State to control if tutorial has started
-  const [tutorialStarted, setTutorialStarted] = useState(false);
   // State to control if blocks menu should be pinned open
   const [pinBlocksPopover, setPinBlocksPopover] = useState(false);
 
@@ -105,27 +104,17 @@ const FlowEditor: React.FC<{
 
   const { toast } = useToast();
 
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
+  const TUTORIAL_STORAGE_KEY = "shepherd-tour";
 
-    // If resetting tutorial
+  useEffect(() => {
     if (params.get("resetTutorial") === "true") {
-      localStorage.removeItem("shepherd-tour"); // Clear tutorial flag
+      localStorage.removeItem(TUTORIAL_STORAGE_KEY);
       router.push(pathname);
-    } else {
-      // Otherwise, start tutorial if conditions are met
-      const shouldStartTutorial = !localStorage.getItem("shepherd-tour");
-      if (
-        shouldStartTutorial &&
-        availableNodes.length > 0 &&
-        !tutorialStarted
-      ) {
-        startTutorial(setPinBlocksPopover);
-        setTutorialStarted(true);
-        localStorage.setItem("shepherd-tour", "yes");
-      }
+    } else if (!localStorage.getItem(TUTORIAL_STORAGE_KEY)) {
+      startTutorial(setPinBlocksPopover);
+      localStorage.setItem(TUTORIAL_STORAGE_KEY, "yes");
     }
-  }, [availableNodes, tutorialStarted, router, pathname]);
+  }, [availableNodes, router, pathname, params]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
diff --git a/autogpt_platform/frontend/src/components/NavBarButtons.tsx b/autogpt_platform/frontend/src/components/NavBarButtons.tsx
index 5ca410e313..56c85598a1 100644
--- a/autogpt_platform/frontend/src/components/NavBarButtons.tsx
+++ b/autogpt_platform/frontend/src/components/NavBarButtons.tsx
@@ -31,8 +31,6 @@ export function NavBarButtons({ className }: { className?: string }) {
 
   const activeButton = buttons.find((button) => button.href === pathname);
 
-  console.log(">>>> ", activeButton);
-
   return buttons.map((button) => (
     <Link
       key={button.href}
diff --git a/autogpt_platform/frontend/src/components/TallyPopup.tsx b/autogpt_platform/frontend/src/components/TallyPopup.tsx
index f37e08b3fa..e36738598d 100644
--- a/autogpt_platform/frontend/src/components/TallyPopup.tsx
+++ b/autogpt_platform/frontend/src/components/TallyPopup.tsx
@@ -2,9 +2,11 @@
 import React, { useEffect, useState } from "react";
 import { Button } from "./ui/button";
 import { IconMegaphone } from "@/components/ui/icons";
+import { useRouter } from "next/navigation";
 
 const TallyPopupSimple = () => {
   const [isFormVisible, setIsFormVisible] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     // Load Tally script
@@ -42,8 +44,7 @@ const TallyPopupSimple = () => {
   }
 
   const resetTutorial = () => {
-    const url = `${window.location.origin}/build?resetTutorial=true`;
-    window.location.href = url;
+    router.push("/build?resetTutorial=true");
   };
 
   return (