random prompt

components/editor/ask-ai/fake-ask.tsx

@@ -1,33 +1,14 @@
 import { useState } from "react";
 import { useLocalStorage } from "react-use";
-import { ArrowUp, Dice1, Dice6 } from "lucide-react";
+import { ArrowUp, Dice6 } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
-import { useLoginModal } from "@/components/contexts/login-context";
 import { PromptBuilder } from "./prompt-builder";
 import { EnhancedSettings } from "@/types";
 import { Settings } from "./settings";
 import classNames from "classnames";
-
-const prompts = [
-  "Create a landing page for a SaaS product, with a hero section, a features section, a pricing section, and a call to action section.",
-  "Create a portfolio website for a designer, with a hero section, a projects section, a about section, and a contact section.",
-  "Create a blog website for a writer, with a hero section, a blog section, a about section, and a contact section.",
-  "Create a Tic Tac Toe game, with a game board, a history section, and a score section.",
-  "Create a Weather App, with a search bar, a weather section, and a forecast section.",
-  "Create a Calculator, with a calculator section, and a history section.",
-  "Create a Todo List, with a todo list section, and a history section.",
-  "Create a Calendar, with a calendar section, and a history section.",
-  "Create a Music Player, with a music player section, and a history section.",
-  "Create a Quiz App, with a quiz section, and a history section.",
-  "Create a Pomodoro Timer, with a timer section, and a history section.",
-  "Create a Notes App, with a notes section, and a history section.",
-  "Create a Task Manager, with a task list section, and a history section.",
-  "Create a Password Generator, with a password generator section, and a history section.",
-  "Create a Currency Converter, with a currency converter section, and a history section.",
-  "Create a Dictionary, with a dictionary section, and a history section.",
-];
+import { PROMPTS_FOR_AI } from "@/lib/prompts";
 
 export const FakeAskAi = () => {
   const router = useRouter();
@@ -51,7 +32,9 @@ export const FakeAskAi = () => {
   const randomPrompt = () => {
     setRandomPromptLoading(true);
     setTimeout(() => {
-      setPrompt(prompts[Math.floor(Math.random() * prompts.length)]);
+      setPrompt(
+        PROMPTS_FOR_AI[Math.floor(Math.random() * PROMPTS_FOR_AI.length)]
+      );
       setRandomPromptLoading(false);
     }, 400);
   };

components/editor/ask-ai/index.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import classNames from "classnames";
-import { ArrowUp, ChevronDown, CircleStop } from "lucide-react";
+import { ArrowUp, ChevronDown, CircleStop, Dice6 } from "lucide-react";
 import { useLocalStorage, useUpdateEffect, useMount } from "react-use";
 import { toast } from "sonner";
 
@@ -20,6 +20,7 @@ import { useLoginModal } from "@/components/contexts/login-context";
 import { Settings } from "./settings";
 import { useProModal } from "@/components/contexts/pro-context";
 import { MAX_FREE_PROJECTS } from "@/lib/utils";
+import { PROMPTS_FOR_AI } from "@/lib/prompts";
 
 export const AskAi = ({
   project,
@@ -69,12 +70,7 @@ export const AskAi = ({
   );
   const [think, setThink] = useState("");
   const [openThink, setOpenThink] = useState(false);
-
-  const handleThink = (think: string) => {
-    setThink(think);
-    setIsThinking(true);
-    setOpenThink(true);
-  };
+  const [randomPromptLoading, setRandomPromptLoading] = useState(false);
 
   useMount(() => {
     if (promptStorage && promptStorage.trim() !== "") {
@@ -152,6 +148,16 @@ export const AskAi = ({
     }
   }, [think]);
 
+  const randomPrompt = () => {
+    setRandomPromptLoading(true);
+    setTimeout(() => {
+      setPrompt(
+        PROMPTS_FOR_AI[Math.floor(Math.random() * PROMPTS_FOR_AI.length)]
+      );
+      setRandomPromptLoading(false);
+    }, 400);
+  };
+
   return (
     <div className="p-3 w-full">
       <div className="relative bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-20 w-full group">
@@ -261,6 +267,20 @@ export const AskAi = ({
               }
             }}
           />
+          {isNew && !isAiWorking && isSameHtml && (
+            <Button
+              size="iconXs"
+              variant="outline"
+              className="!rounded-md -translate-y-2 -translate-x-4"
+              onClick={() => randomPrompt()}
+            >
+              <Dice6
+                className={classNames("size-4", {
+                  "animate-spin animation-duration-500": randomPromptLoading,
+                })}
+              />
+            </Button>
+          )}
         </div>
         <div className="flex items-center justify-between gap-2 px-4 pb-3 mt-2">
           <div className="flex-1 flex items-center justify-start gap-1.5 flex-wrap">
@@ -276,7 +296,7 @@ export const AskAi = ({
             />
             {!isNew && <Uploader project={project} />}
             {isNew && <ReImagine onRedesign={(md) => callAi(md)} />}
-            {!isNew && <Selector />}
+            {!isNew && !isSameHtml && <Selector />}
           </div>
           <div className="flex items-center justify-end gap-2">
             <Button

components/editor/index.tsx

@@ -58,7 +58,7 @@ export const AppEditor = ({
   });
 
   useEffect(() => {
-    if (hasUnsavedChanges && !isAiWorking) {
+    if (hasUnsavedChanges && !isAiWorking && project?.name) {
       setShowSavePopup(true);
     } else {
       setShowSavePopup(false);

components/my-projects/index.tsx

@@ -91,9 +91,9 @@ export function MyProjects() {
               Create Project
             </div>
           )}
-          {projects.map((project: ProjectType) => (
+          {projects.map((project: ProjectType, index: number) => (
             <ProjectCard
-              key={project.name}
+              key={index}
               project={project}
               onDelete={() => onDelete(project)}
             />

lib/prompts.ts

@@ -146,4 +146,23 @@ ${NEW_PAGE_START}index.html${NEW_PAGE_END}
 </html>
 \`\`\`
 IMPORTANT: While creating a new page, UPDATE ALL THE OTHERS (using the UPDATE_PAGE_START and SEARCH/REPLACE format) pages to add or replace the link to the new page, otherwise the user will not be able to navigate to the new page. (Dont use onclick to navigate, only href)
-No need to explain what you did. Just return the expected result.`
+No need to explain what you did. Just return the expected result.`
+
+export const PROMPTS_FOR_AI = [
+    "Create a landing page for a SaaS product, with a hero section, a features section, a pricing section, and a call to action section.",
+    "Create a portfolio website for a designer, with a hero section, a projects section, a about section, and a contact section.",
+    "Create a blog website for a writer, with a hero section, a blog section, a about section, and a contact section.",
+    "Create a Tic Tac Toe game, with a game board, a history section, and a score section.",
+    "Create a Weather App, with a search bar, a weather section, and a forecast section.",
+    "Create a Calculator, with a calculator section, and a history section.",
+    "Create a Todo List, with a todo list section, and a history section.",
+    "Create a Calendar, with a calendar section, and a history section.",
+    "Create a Music Player, with a music player section, and a history section.",
+    "Create a Quiz App, with a quiz section, and a history section.",
+    "Create a Pomodoro Timer, with a timer section, and a history section.",
+    "Create a Notes App, with a notes section, and a history section.",
+    "Create a Task Manager, with a task list section, and a history section.",
+    "Create a Password Generator, with a password generator section, and a history section.",
+    "Create a Currency Converter, with a currency converter section, and a history section.",
+    "Create a Dictionary, with a dictionary section, and a history section.",
+  ];