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/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 (