From d7d6f386a8571bf308ea1a69f2bbd030e1421f0f Mon Sep 17 00:00:00 2001 From: Ajay Chintala Date: Mon, 13 Nov 2023 15:27:42 -0800 Subject: [PATCH] Add tour --- llmstack/client/package-lock.json | 107 +++++++++++++++++++++ llmstack/client/package.json | 1 + llmstack/client/src/components/sidebar.jsx | 2 +- llmstack/client/src/index.js | 37 +++---- llmstack/client/src/pages/AppStudio.jsx | 72 ++++++++++++-- 5 files changed, 195 insertions(+), 24 deletions(-) diff --git a/llmstack/client/package-lock.json b/llmstack/client/package-lock.json index 20537214f2c..426ffcae94f 100644 --- a/llmstack/client/package-lock.json +++ b/llmstack/client/package-lock.json @@ -17,6 +17,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", @@ -4683,6 +4684,53 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@reactour/mask": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@reactour/mask/-/mask-1.1.0.tgz", + "integrity": "sha512-GkJMLuTs3vTsm4Ryq2uXcE4sMzRP1p4xSd6juSOMqbHa7IVD/UiLCLqJWHR9xGSQPbYhpZAZAORUG5cS0U5tBA==", + "dependencies": { + "@reactour/utils": "*" + }, + "peerDependencies": { + "react": "16.x || 17.x || 18.x" + } + }, + "node_modules/@reactour/popover": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@reactour/popover/-/popover-1.1.1.tgz", + "integrity": "sha512-BouulO0sXfmuHSPX8FwCYI0fMeT+VsWqk7UTao3NQcUC5H903ZeKOV2GYpwSJtRUQhsyNEu1Q8cEruGRf1SOXQ==", + "dependencies": { + "@reactour/utils": "*" + }, + "peerDependencies": { + "react": "16.x || 17.x || 18.x" + } + }, + "node_modules/@reactour/tour": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/@reactour/tour/-/tour-3.6.1.tgz", + "integrity": "sha512-vzmgbm4T7n5gh0cjc4Zi4G3K29dXQyEdi/o7ZYLpNcisJ0hwP5jNKH7BgckrHWEGldBxYSWl34tsRmHcyxporQ==", + "dependencies": { + "@reactour/mask": "*", + "@reactour/popover": "*", + "@reactour/utils": "*" + }, + "peerDependencies": { + "react": "16.x || 17.x || 18.x" + } + }, + "node_modules/@reactour/utils": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@reactour/utils/-/utils-0.5.0.tgz", + "integrity": "sha512-yQs5Nm/Dg1xRM7d/S/UILBV5OInrTgrjGzgc81/RP5khqdO5KnpOaC46yF83kDtCalte8X3RCwp+F2YA509k1w==", + "dependencies": { + "@rooks/use-mutation-observer": "^4.11.2", + "resize-observer-polyfill": "^1.5.1" + }, + "peerDependencies": { + "react": "16.x || 17.x || 18.x" + } + }, "node_modules/@remix-run/router": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz", @@ -4836,6 +4884,14 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==" }, + "node_modules/@rooks/use-mutation-observer": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@rooks/use-mutation-observer/-/use-mutation-observer-4.11.2.tgz", + "integrity": "sha512-vpsdrZdr6TkB1zZJcHx+fR1YC/pHs2BaqcuYiEGjBVbwY5xcC49+h0hAUtQKHth3oJqXfIX/Ng8S7s5HFHdM/A==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz", @@ -17776,6 +17832,11 @@ "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz", "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -24260,6 +24321,41 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, + "@reactour/mask": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@reactour/mask/-/mask-1.1.0.tgz", + "integrity": "sha512-GkJMLuTs3vTsm4Ryq2uXcE4sMzRP1p4xSd6juSOMqbHa7IVD/UiLCLqJWHR9xGSQPbYhpZAZAORUG5cS0U5tBA==", + "requires": { + "@reactour/utils": "*" + } + }, + "@reactour/popover": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@reactour/popover/-/popover-1.1.1.tgz", + "integrity": "sha512-BouulO0sXfmuHSPX8FwCYI0fMeT+VsWqk7UTao3NQcUC5H903ZeKOV2GYpwSJtRUQhsyNEu1Q8cEruGRf1SOXQ==", + "requires": { + "@reactour/utils": "*" + } + }, + "@reactour/tour": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/@reactour/tour/-/tour-3.6.1.tgz", + "integrity": "sha512-vzmgbm4T7n5gh0cjc4Zi4G3K29dXQyEdi/o7ZYLpNcisJ0hwP5jNKH7BgckrHWEGldBxYSWl34tsRmHcyxporQ==", + "requires": { + "@reactour/mask": "*", + "@reactour/popover": "*", + "@reactour/utils": "*" + } + }, + "@reactour/utils": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@reactour/utils/-/utils-0.5.0.tgz", + "integrity": "sha512-yQs5Nm/Dg1xRM7d/S/UILBV5OInrTgrjGzgc81/RP5khqdO5KnpOaC46yF83kDtCalte8X3RCwp+F2YA509k1w==", + "requires": { + "@rooks/use-mutation-observer": "^4.11.2", + "resize-observer-polyfill": "^1.5.1" + } + }, "@remix-run/router": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz", @@ -24354,6 +24450,12 @@ } } }, + "@rooks/use-mutation-observer": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@rooks/use-mutation-observer/-/use-mutation-observer-4.11.2.tgz", + "integrity": "sha512-vpsdrZdr6TkB1zZJcHx+fR1YC/pHs2BaqcuYiEGjBVbwY5xcC49+h0hAUtQKHth3oJqXfIX/Ng8S7s5HFHdM/A==", + "requires": {} + }, "@rushstack/eslint-patch": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz", @@ -33754,6 +33856,11 @@ "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz", "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", diff --git a/llmstack/client/package.json b/llmstack/client/package.json index 87692da0b8f..8e71d515b52 100644 --- a/llmstack/client/package.json +++ b/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", diff --git a/llmstack/client/src/components/sidebar.jsx b/llmstack/client/src/components/sidebar.jsx index b62e7d7e178..9c4f63e3392 100644 --- a/llmstack/client/src/components/sidebar.jsx +++ b/llmstack/client/src/components/sidebar.jsx @@ -151,7 +151,7 @@ export default function Sidebar({ menuItems }) { const [anchorEl, setAnchorEl] = useState(null); return ( - + import("./App")); const ErrorPage = lazy(() => import("./pages/error")); @@ -313,23 +314,25 @@ root.render( - - - } - /> - - + + + + } + /> + + + , diff --git a/llmstack/client/src/pages/AppStudio.jsx b/llmstack/client/src/pages/AppStudio.jsx index 356599fe739..4ad1ec8d84c 100644 --- a/llmstack/client/src/pages/AppStudio.jsx +++ b/llmstack/client/src/pages/AppStudio.jsx @@ -1,4 +1,6 @@ -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"; @@ -6,9 +8,67 @@ 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 ( - - + + { - + { - + { - +