Added estimation of waiting time + changed how GH stars banner is shown on results page.

wasp-ai/src/client/RootComponent.jsx

@@ -1,4 +1,5 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
+import { useLocation } from "react-router-dom";
 import Prism from "prismjs";
 import "prismjs/components/prism-json";
 import addWaspLangauge from "./prism/wasp";
@@ -12,6 +13,13 @@ addWaspLangauge(Prism);
 export function RootComponent({ children }) {
   // const { isAlreadyShown } = useWelcomeDialog();
   // const [isDialogOpen, setIsDialogOpen] = useState(!isAlreadyShown);
+  const location = useLocation();
+
+  const shouldDisplayTopBanner = useMemo(() => {
+    return !(location.pathname.startsWith("/result/"));
+  }, [location]);
+
+
   useEffect(() => {
     const script = document.createElement("script");
 
@@ -24,47 +32,51 @@ export function RootComponent({ children }) {
       document.body.removeChild(script);
     };
   }, []);
+
   return (
     <>
-      <div
-        className="overflow-hidden
-      cursor-pointer flex-row
-      space-x-3
-      text-white bg-gradient-to-r from-pink-400 to-amber-400"
-        onClick={() => window.open("https://github.com/wasp-lang/wasp")}
-      >
+      { shouldDisplayTopBanner && (
         <div
-          className={`
-          mx-auto flex items-center justify-center divide-white p-3
-          text-sm font-medium
-          lg:container lg:divide-x lg:px-16 xl:px-20
-        `}
+          className="overflow-hidden
+            cursor-pointer flex-row
+            space-x-3
+            text-white bg-gradient-to-r from-pink-400 to-amber-400"
+          onClick={() => window.open("https://github.com/wasp-lang/wasp/tree/wasp-ai")}
         >
-          <span className="item-center flex gap-2 px-3">
-            <span>
-              🔮 This is a Wasp powered project. If you like it,{" "}
-              <span className="underline">star us on GitHub</span>!
-            </span>
-          </span>
-
-          <span
-            className="space-x-2 px-3"
-            style={{
-              marginBottom: "-5px",
-            }}
+          <div
+            className={`
+            mx-auto flex items-center justify-center divide-white p-3
+            text-sm font-medium
+            lg:container lg:divide-x lg:px-16 xl:px-20
+          `}
           >
-            <a
-              className="github-button"
-              href="https://github.com/wasp-lang/wasp"
-              data-icon="octicon-star"
-              data-show-count="true"
-              aria-label="Star wasp-lang/wasp on GitHub"
+            <span className="item-center flex gap-2 px-3">
+              <span>
+                🔮 This is a Wasp powered project. If you like it,{" "}
+                <span className="underline">star us on GitHub</span>!
+              </span>
+            </span>
+
+            <span
+              className="space-x-2 px-3"
+              style={{
+                marginBottom: "-5px",
+              }}
             >
-              Star
-            </a>
-          </span>
+              <a
+                className="github-button"
+                href="https://github.com/wasp-lang/wasp"
+                data-icon="octicon-star"
+                data-show-count="true"
+                aria-label="Star wasp-lang/wasp on GitHub"
+              >
+                Star
+              </a>
+            </span>
+          </div>
         </div>
-      </div>
+      )}
+
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {children}
         <footer className="mt-8">

wasp-ai/src/client/components/Logs.jsx

@@ -52,7 +52,7 @@ export function Logs({ logs, status, onRetry }) {
   return (
     logs && (
       <>
-        <header className="relative big-box-dark mt-4 mb-8">
+        <header className="relative big-box-dark">
           {status === "success" && (
             <div className="absolute inset-0 bg-green-500 opacity-[.15] z-0"></div>
           )}

wasp-ai/src/client/components/WaitingRoomContent.jsx

@@ -1,17 +1,41 @@
+import { useMemo } from "react";
 import { availableColors } from "./Color";
 import Tilt from "react-parallax-tilt";
 
-export function WaitingRoomContent() {
+const NUM_APPS_WE_CAN_GENERATE_IN_PARALLEL = 7;
+const AVG_APP_GENERATION_TIME_IN_MIN = 3;
+
+export function WaitingRoomContent(props) {
+  const estimatedWaitingTimeInMinutes = useMemo(() => {
+    return Math.max(1, Math.round((props.numberOfProjectsAheadInQueue - 1) / NUM_APPS_WE_CAN_GENERATE_IN_PARALLEL * AVG_APP_GENERATION_TIME_IN_MIN));
+  }, [props.numberOfProjectsAheadInQueue]);
+
   return (
     <>
       <header className="relative mb-4 bg-slate-50 p-8 rounded-xl text-gray-500">
+        { estimatedWaitingTimeInMinutes > 5 && (
+          <>
+            <p className="bg-yellow-100 text-center text-yellow-700 rounded p-2">
+              🚨 We are experiencing heavy load at the moment! 🚨 
+            </p>
+            <br />
+          </>
+        )}
         <p className="text-gray-500">Hello there! 🤖</p>
         <br />
         <p>
-          Thanks for trying out the AI web App Generator. Looks like it might be
-          a couple of minutes before we can start building your app. In the
-          meantime, you can take a look at some of our already generated apps
-          below.
+          Thanks for trying out the AI web App Generator. Looks like it might be a bit before we can start building your app.
+        </p>
+        <br />
+        <p>
+          Estimated waiting time: <strong>{estimatedWaitingTimeInMinutes} minutes.</strong>
+        </p>
+        <br />
+        <p>
+          In the meantime, you can: <br/>
+          1. <strong>Take a look at some of our already generated apps below.</strong> You can check out the real generated code, and also try downloading and running them.<br/>
+          2. Read more about the GPT Web App Generator <a href="#faq" className="underline">here</a>.<br/>
+          3. Join our <a href="https://discord.gg/rzdnErX" className="underline" target="_blank" rel="noopener noreferrer">Discord</a> and chat with us about the project.<br/>
         </p>
         <br />
         <p>

wasp-ai/src/client/pages/ResultPage.jsx

@@ -217,9 +217,36 @@ export const ResultPage = () => {
           </header>
         </>
       )}
+
       <Logs logs={logs} status={currentStatus.status} onRetry={retry} />
+
+      <div
+        className="overflow-hidden
+          flex-row
+          space-x-3
+          "
+      >
+        <div
+          className={`
+            mx-auto flex items-center justify-center divide-white p-3
+            text-sm font-medium
+            lg:container lg:divide-x lg:px-16 xl:px-20
+          `}
+        >
+          <span
+            className="item-center flex gap-2 p-1 px-2 cursor-pointer text-pink-800 bg-pink-200 rounded"
+            onClick={() => window.open("https://github.com/wasp-lang/wasp/tree/wasp-ai")}
+          >
+            <span>
+              🔮 This is a Wasp powered project. If you like it,{" "}
+              <span className="underline">star us on GitHub</span>!
+            </span>
+          </span>
+        </div>
+      </div>
+
       {currentStatus.status === "pending" && (
-        <WaitingRoomContent />
+        <WaitingRoomContent numberOfProjectsAheadInQueue={appGenerationResult?.numberOfProjectsAheadInQueue || 0}/>
       )}
 
       {interestingFilePaths.length > 0 && (