feat: product tour (#578)

Author: Cahllagerfeld

package.json

@@ -37,6 +37,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-hook-form": "^7.51.1",
+		"react-joyride": "^2.8.1",
 		"react-markdown": "^9.0.1",
 		"react-router-dom": "^6.22.3",
 		"reactflow": "^11.11.0",

pnpm-lock.yaml

@@ -7,16 +7,20 @@ import "reactflow/dist/style.css";
 import { AuthProvider } from "./context/AuthContext";
 import { router } from "./router/Router";
 import { queryClient } from "./router/queryclient";
+import { TourProvider } from "./components/tour/TourContext";
 
 export function App() {
 	return (
 		<Suspense>
 			<AuthProvider>
 				<ReactFlowProvider>
-					<QueryClientProvider client={queryClient}>
-						<Toaster />
-						<RouterProvider router={router} />
-					</QueryClientProvider>
+					<TourProvider>
+						<QueryClientProvider client={queryClient}>
+							<Toaster />
+
+							<RouterProvider router={router} />
+						</QueryClientProvider>
+					</TourProvider>
 				</ReactFlowProvider>
 			</AuthProvider>
 		</Suspense>

src/App.tsx

@@ -2,7 +2,7 @@ import { PageHeader } from "@/components/PageHeader";
 import { Badge } from "@zenml-io/react-component-library";
 import { CommandSection, InfoBox } from "./Fragments";
 import { CTASection, artifactFeatures } from "@/contents/cloud-only";
-import ACP from "@/assets/images/acp.png";
+import ACP from "@/assets/images/acp.webp";
 
 export default function ModelsPage() {
 	return (

src/app/artifacts/page.tsx

@@ -2,9 +2,22 @@ import { PageHeader } from "@/components/PageHeader";
 import { Badge } from "@zenml-io/react-component-library";
 import { CommandSection, InfoBox } from "./Fragments";
 import { CTASection, modelFeatures } from "@/contents/cloud-only";
-import MCP from "@/assets/images/mcp.png";
+import MCP from "@/assets/images/mcp.webp";
+import { useTourContext } from "@/components/tour/TourContext";
+import { useEffect } from "react";
 
 export default function ModelsPage() {
+	const {
+		setTourState,
+		tourState: { tourActive }
+	} = useTourContext();
+
+	useEffect(() => {
+		if (tourActive) {
+			setTourState((prev) => ({ ...prev, run: true, stepIndex: prev.stepIndex }));
+		}
+	}, [tourActive]);
+
 	return (
 		<div>
 			<PageHeader className="flex items-center gap-1">

src/app/models/page.tsx

@@ -2,8 +2,21 @@ import { FallbackSupportCard, ResourcesCard } from "@/components/fallback-pages/
 import { HeaderOnboardingBox } from "./Header";
 import { ProductionSetupChecklist } from "./ProductionSetup";
 import { StarterSetupList } from "./StarterSetup";
+import { useTourContext } from "@/components/tour/TourContext";
+import { useEffect } from "react";
 
 export default function OnboardingPage() {
+	const {
+		setTourState,
+		tourState: { tourActive }
+	} = useTourContext();
+
+	useEffect(() => {
+		if (tourActive) {
+			setTourState((prev) => ({ ...prev, run: true, stepIndex: prev.stepIndex }));
+		}
+	}, [tourActive]);
+
 	return (
 		<div className="layout-container grid grid-cols-4 gap-5 py-5">
 			<div className="col-span-4 space-y-5 lg:col-span-3">

src/app/onboarding/page.tsx

@@ -13,7 +13,6 @@ export function VersionDisplay() {
 				<ZenMLIcon className="h-4 w-4 fill-theme-text-brand" />
 				<p className="ml-2 text-text-sm  font-semibold">Open source</p>
 			</div>
-			{/* TODO get this from server info */}
 			<p className="mb-1 text-text-sm text-theme-text-tertiary">ZenML v{data.version}</p>
 			<p className="text-text-sm text-theme-text-tertiary">
 				UI Version {import.meta.env.VITE_FRONTEND_VERSION}

src/app/settings/VersionDisplay.tsx

@@ -2,8 +2,21 @@ import { FallbackSupportCard, ResourcesCard } from "@/components/fallback-pages/
 import { HeaderBox, InfoBox, StacksHeader } from "./Fragments";
 import { StackCollapsible } from "./StackCollapsible";
 import { StackComponentCollapsible } from "./StackComponentsCollapsible";
+import { useTourContext } from "@/components/tour/TourContext";
+import { useEffect } from "react";
 
 export default function StacksPage() {
+	const {
+		setTourState,
+		tourState: { tourActive }
+	} = useTourContext();
+
+	useEffect(() => {
+		if (tourActive) {
+			setTourState((prev) => ({ ...prev, run: true, stepIndex: prev.stepIndex }));
+		}
+	}, [tourActive]);
+
 	return (
 		<div>
 			<StacksHeader />