Add tour

llmstack/client/package.json

@@ -14,6 +14,7 @@
     "@mui/x-data-grid-generator": "^6.16.2",
     "@mui/x-date-pickers": "^6.16.1",
     "@novnc/novnc": "^1.4.0",
+    "@reactour/tour": "^3.6.1",
     "@rjsf/core": "^5.13.0",
     "@rjsf/mui": "^5.13.0",
     "@rjsf/utils": "^5.13.0",

llmstack/client/src/components/sidebar.jsx

@@ -151,7 +151,7 @@ export default function Sidebar({ menuItems }) {
   const [anchorEl, setAnchorEl] = useState(null);
 
   return (
-    <Stack sx={siderStyle}>
+    <Stack sx={siderStyle} className="sidebar">
       <Box
         align={"top"}
         style={{ justifyContent: "center", margin: "15px auto" }}

llmstack/client/src/index.js

@@ -9,6 +9,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { RecoilRoot } from "recoil";
 import CircularProgress from "@mui/material/CircularProgress";
 import { Box, createTheme, ThemeProvider } from "@mui/material";
+import { TourProvider } from "@reactour/tour";
 
 const App = lazy(() => import("./App"));
 const ErrorPage = lazy(() => import("./pages/error"));
@@ -313,23 +314,25 @@ root.render(
   <React.StrictMode>
     <RecoilRoot>
       <ThemeProvider theme={defaultTheme}>
-        <CookiesProvider>
-          <Box
-            sx={{
-              minHeight: "100vh",
-              background:
-                window.location.href.endsWith("/embed") ||
-                window.location.href.endsWith("/embed/chatBubble")
-                  ? "transparent"
-                  : "#f5f5f5",
-            }}
-          >
-            <RouterProvider
-              router={router}
-              fallbackElement={<CircularProgress />}
-            />
-          </Box>
-        </CookiesProvider>
+        <TourProvider>
+          <CookiesProvider>
+            <Box
+              sx={{
+                minHeight: "100vh",
+                background:
+                  window.location.href.endsWith("/embed") ||
+                  window.location.href.endsWith("/embed/chatBubble")
+                    ? "transparent"
+                    : "#f5f5f5",
+              }}
+            >
+              <RouterProvider
+                router={router}
+                fallbackElement={<CircularProgress />}
+              />
+            </Box>
+          </CookiesProvider>
+        </TourProvider>
       </ThemeProvider>
     </RecoilRoot>
   </React.StrictMode>,

llmstack/client/src/pages/AppStudio.jsx

@@ -1,14 +1,74 @@
-import React from "react";
+import { useEffect, useRef } from "react";
+import { useTour } from "@reactour/tour";
+import { useCookies } from "react-cookie";
 import { Box, Container, Typography } from "@mui/material";
 import { AppTypeSelector } from "../components/apps/AppTypeSelector";
 import { AppList } from "../components/apps/AppList";
 import { AppTemplatesList } from "../components/apps/AppTemplatesList";
 import { SharedAppList } from "../components/apps/SharedAppList";
 
 const AppStudioPage = () => {
+  const { steps, setSteps, setIsOpen } = useTour();
+  const [cookies, setCookie] = useCookies(["app-studio-tour"]);
+  const containerRef = useRef(null);
+
+  // Tour
+  useEffect(() => {
+    if (
+      containerRef.current &&
+      !steps &&
+      cookies["app-studio-tour"] !== "true"
+    ) {
+      setSteps([
+        {
+          selector: ".main",
+          content: `Welcome to ${
+            process.env.REACT_APP_SITE_NAME || "LLMStack"
+          }. You can build generative AI apps, chatbot and agents here.`,
+          position: "center",
+        },
+        {
+          selector: ".sidebar",
+          content: "Use the sidebar to navigate to different pages.",
+        },
+        {
+          selector: ".app-template-list",
+          content:
+            "Use our curated app templates to get started quickly. Click on any template, fill the form and save the app to create a new app.",
+        },
+        {
+          selector: ".create-new-app",
+          content: "You can also create a new app from scratch.",
+        },
+        {
+          selector: ".your-apps",
+          content: "You can see all your apps here.",
+        },
+        {
+          selector: ".shared-apps",
+          content: "You can see all the apps shared with you here.",
+          actionAfter: () => {
+            setCookie("app-studio-tour", true, {
+              maxAge: 8640000,
+            });
+          },
+        },
+      ]);
+
+      setIsOpen(true);
+    }
+  });
+
   return (
-    <Container maxWidth="md" style={{ minWidth: "100%", padding: 5 }}>
-      <Box style={{ marginTop: "5px", marginBottom: "20px" }}>
+    <Container
+      maxWidth="md"
+      style={{ minWidth: "100%", padding: 5 }}
+      ref={containerRef}
+    >
+      <Box
+        style={{ marginTop: "5px", marginBottom: "20px" }}
+        className="app-template-list"
+      >
         <Typography
           variant="h6"
           style={{
@@ -28,7 +88,7 @@ const AppStudioPage = () => {
         </Typography>
         <AppTemplatesList />
       </Box>
-      <Box style={{ marginBottom: "20px" }}>
+      <Box style={{ marginBottom: "20px" }} className="create-new-app">
         <Typography
           variant="h6"
           style={{
@@ -48,7 +108,7 @@ const AppStudioPage = () => {
         </Typography>
         <AppTypeSelector />
       </Box>
-      <Box style={{ marginBottom: "20px" }}>
+      <Box style={{ marginBottom: "20px" }} className="your-apps">
         <Typography
           variant="h6"
           style={{
@@ -68,7 +128,7 @@ const AppStudioPage = () => {
         </Typography>
         <AppList />
       </Box>
-      <Box style={{ marginBottom: "60px" }}>
+      <Box style={{ marginBottom: "60px" }} className="shared-apps">
         <Typography
           variant="h6"
           style={{