add a way to create space in a follow up request

app/api/ask/route.ts

@@ -16,13 +16,15 @@ import {
   SEARCH_START,
   UPDATE_PAGE_START,
   UPDATE_PAGE_END,
+  PROMPT_FOR_PROJECT_NAME,
 } from "@/lib/prompts";
 import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { Page } from "@/types";
-import { uploadFiles } from "@huggingface/hub";
+import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub";
 import { isAuthenticated } from "@/lib/auth";
 import { getBestProvider } from "@/lib/best-provider";
 import { rewritePrompt } from "@/lib/rewrite-prompt";
+import { COLORS } from "@/lib/utils";
 
 const ipAddresses = new Map();
 
@@ -31,7 +33,7 @@ export async function POST(request: NextRequest) {
   const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, provider, model, redesignMarkdown, enhancedSettings } = body;
+  const { prompt, provider, model, redesignMarkdown, enhancedSettings, pages } = body;
 
   if (!model || (!prompt && !redesignMarkdown)) {
     return NextResponse.json(
@@ -131,7 +133,7 @@ export async function POST(request: NextRequest) {
               },
               {
                 role: "user",
-                content: `${rewrittenPrompt}${redesignMarkdown ? `\n\nHere is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : ""}`
+                content: `${rewrittenPrompt}${redesignMarkdown ? `\n\nHere is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : ""} : ""}`
               },
             ],
             max_tokens: selectedProvider.max_tokens,
@@ -220,10 +222,12 @@ export async function PUT(request: NextRequest) {
   const authHeaders = await headers();
 
   const body = await request.json();
-  const { prompt, previousPrompts, provider, selectedElementHtml, model, pages, files, repoId } =
+  const { prompt, previousPrompts, provider, selectedElementHtml, model, pages, files, repoId: repoIdFromBody, isNew, enhancedSettings } =
     body;
 
-  if (!prompt || pages.length === 0 || !repoId) {
+  let repoId = repoIdFromBody;
+
+  if (!prompt || pages.length === 0) {
     return NextResponse.json(
       { ok: false, error: "Missing required fields" },
       { status: 400 }
@@ -300,7 +304,7 @@ export async function PUT(request: NextRequest) {
         messages: [
           {
             role: "system",
-            content: FOLLOW_UP_SYSTEM_PROMPT,
+            content: FOLLOW_UP_SYSTEM_PROMPT + (isNew ? PROMPT_FOR_PROJECT_NAME : ""),
           },
           {
             role: "user",
@@ -514,6 +518,42 @@ export async function PUT(request: NextRequest) {
         files.push(file);
       });
 
+      if (isNew) {
+        const projectName = chunk.match(/<<<<<<< PROJECT_NAME_START ([\s\S]*?) >>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
+        const formattedTitle = projectName?.toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .split("-")
+          .filter(Boolean)
+          .join("-")
+          .slice(0, 96);
+        const repo: RepoDesignation = {
+          type: "space",
+          name: `${user.name}/${formattedTitle}`,
+        };
+        const { repoUrl} = await createRepo({
+          repo,
+          accessToken: user.token as string,
+        });
+        repoId = repoUrl.split("/").slice(-2).join("/");
+        const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
+        const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
+        const README = `---
+title: ${projectName}
+colorFrom: ${colorFrom}
+colorTo: ${colorTo}
+emoji: 🐳
+sdk: static
+pinned: false
+tags:
+  - deepsite-v3
+---
+
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+      `;
+        files.push(new File([README], "README.md", { type: "text/markdown" }));
+      }
+
       const response = await uploadFiles({
         repo: {
           type: "space",
@@ -528,6 +568,7 @@ export async function PUT(request: NextRequest) {
         ok: true,
         updatedLines,
         pages: updatedPages,
+        repoId,
         commit: {
           ...response.commit,
           title: prompt,

components/editor/ask-ai/index.tsx

@@ -41,7 +41,7 @@ export const AskAi = ({
   onScrollToBottom?: () => void;
 }) => {
   const { user, projects } = useUser();
-  const { currentPageData, isUploading, pages, isLoadingProject } = useEditor();
+  const { isSameHtml, isUploading, pages, isLoadingProject } = useEditor();
   const {
     isAiWorking,
     isThinking,
@@ -75,10 +75,6 @@ export const AskAi = ({
   const [think, setThink] = useState("");
   const [openThink, setOpenThink] = useState(false);
 
-  const isSameHtml = useMemo(() => {
-    return isTheSameHtml(currentPageData.html);
-  }, [currentPageData.html]);
-
   const handleThink = (think: string) => {
     setThink(think);
     setIsThinking(true);
@@ -93,7 +89,7 @@ export const AskAi = ({
     if (!redesignMarkdown && !prompt.trim()) return;
 
     if (isFollowUp && !redesignMarkdown && !isSameHtml) {
-      const result = await callAiFollowUp(prompt, enhancedSettings);
+      const result = await callAiFollowUp(prompt, enhancedSettings, isNew);
 
       if (result?.error) {
         handleError(result.error, result.message);
@@ -223,7 +219,7 @@ export const AskAi = ({
           />
         </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">
+          <div className="flex-1 flex items-center justify-start gap-1.5 flex-wrap">
             <PromptBuilder
               enhancedSettings={enhancedSettings!}
               setEnhancedSettings={setEnhancedSettings}

components/editor/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useMemo, useRef, useState, useEffect } from "react";
-import { useCopyToClipboard } from "react-use";
+import { useCopyToClipboard, useMount } from "react-use";
 import { CopyIcon } from "lucide-react";
 import { toast } from "sonner";
 import classNames from "classnames";
@@ -10,6 +10,7 @@ import Editor from "@monaco-editor/react";
 import { useEditor } from "@/hooks/useEditor";
 import { Header } from "@/components/editor/header";
 import { useAi } from "@/hooks/useAi";
+import { defaultHTML } from "@/lib/consts";
 
 import { ListPages } from "./pages";
 import { AskAi } from "./ask-ai";
@@ -47,7 +48,17 @@ export const AppEditor = ({
   const editor = useRef<HTMLDivElement>(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
 
-  // Show save popup when there are unsaved changes
+  useMount(() => {
+    if (isNew) {
+      setPages([
+        {
+          path: "index.html",
+          html: defaultHTML,
+        },
+      ]);
+    }
+  });
+
   useEffect(() => {
     if (hasUnsavedChanges && !isAiWorking) {
       setShowSavePopup(true);
@@ -92,11 +103,9 @@ export const AppEditor = ({
                 horizontal: "hidden",
               },
               wordWrap: "on",
-              readOnly: !!isAiWorking || !!currentCommit || isNew,
+              readOnly: !!isAiWorking || !!currentCommit,
               readOnlyMessage: {
-                value: isNew
-                  ? "You can't edit the code, as this is a new project. Ask DeepSite first."
-                  : currentCommit
+                value: currentCommit
                   ? "You can't edit the code, as this is an old version of the project."
                   : "Wait for DeepSite to finish working...",
                 isTrusted: true,

components/editor/preview/index.tsx

@@ -33,6 +33,7 @@ export const Preview = forwardRef<LivePreviewRef, { isNew: boolean }>(
       pages,
       setPages,
       setCurrentPage,
+      isSameHtml,
     } = useEditor();
     const {
       isEditableModeEnabled,
@@ -239,7 +240,7 @@ export const Preview = forwardRef<LivePreviewRef, { isNew: boolean }>(
             </span>
           </div>
         )}
-        {isNew && !isLoadingProject && !globalAiLoading ? (
+        {isNew && !isLoadingProject && !globalAiLoading && isSameHtml ? (
           <iframe
             className={classNames(
               "w-full select-none transition-all duration-200 bg-black h-full",

hooks/useAi.ts

@@ -14,7 +14,7 @@ import { LivePreviewRef } from "@/components/editor/live-preview";
 export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefObject<LivePreviewRef | null>) => {
   const client = useQueryClient();
   const audio = useRef<HTMLAudioElement | null>(null);
-  const { setPages, setCurrentPage, setPrompts, prompts, pages, project, setProject, commits, setCommits, setLastSavedPages } = useEditor();
+  const { setPages, setCurrentPage, setPrompts, prompts, pages, project, setProject, commits, setCommits, setLastSavedPages, isSameHtml } = useEditor();
   const [controller, setController] = useState<AbortController | null>(null);
   const [storageProvider, setStorageProvider] = useLocalStorage("provider", "auto");
   const [storageModel, setStorageModel] = useLocalStorage("model", MODELS[0].value);
@@ -256,7 +256,7 @@ export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefO
     }
   };
 
-  const callAiFollowUp = async (prompt: string, enhancedSettings?: EnhancedSettings) => {
+  const callAiFollowUp = async (prompt: string, enhancedSettings?: EnhancedSettings, isNew?: boolean) => {
     if (isAiWorking) return;
     if (!prompt.trim()) return;
 
@@ -266,7 +266,7 @@ export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefO
     const abortController = new AbortController();
     setController(abortController);
     
-    try {      
+    try {
       const request = await fetch("/api/ask", {
         method: "PUT",
         body: JSON.stringify({
@@ -277,7 +277,9 @@ export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefO
           pages,
           selectedElementHtml: selectedElement?.outerHTML,
           files: selectedFiles,
-          repoId: project?.space_id
+          repoId: project?.space_id,
+          isNew,
+          enhancedSettings,
         }),
         headers: {
           "Content-Type": "application/json",
@@ -307,20 +309,25 @@ export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefO
         }
 
         toast.success("AI responded successfully");
-        setIsAiWorking(false);
         const iframe = document.getElementById(
           "preview-iframe"
         ) as HTMLIFrameElement;
 
-        setPages(res.pages);
-        setLastSavedPages([...res.pages]); // Mark AI changes as saved
-        setCommits([res.commit, ...commits]);
-        setPrompts(
-          [...prompts, prompt]
-        )
-        setSelectedElement(null);
-        setSelectedFiles([]);
-        setIsEditableModeEnabled(false);
+        if (isNew && res.repoId) {
+          router.push(`/projects/${res.repoId}`);
+          setIsAiWorking(false);
+        } else {
+          setPages(res.pages);
+          setLastSavedPages([...res.pages]); // Mark AI changes as saved
+          setCommits([res.commit, ...commits]);
+          setPrompts(
+            [...prompts, prompt]
+          )
+          setSelectedElement(null);
+          setSelectedFiles([]);
+          setIsEditableModeEnabled(false);
+        }
+
         if (audio.current) audio.current.play();
         if (iframe) {
           setTimeout(() => {

hooks/useEditor.ts

@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
 import { defaultHTML } from "@/lib/consts";
 import { Commit, HtmlHistory, Page, Project } from "@/types";
 import { api } from "@/lib/api";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
 
 export const useEditor = (namespace?: string, repoId?: string) => {
   const client = useQueryClient();
@@ -60,7 +61,7 @@ export const useEditor = (namespace?: string, repoId?: string) => {
   const { data: pages = [] } = useQuery<Page[]>({
     queryKey: ["editor.pages"],
     queryFn: async (): Promise<Page[]> => {
-      return pagesStorage ?? [
+      return [
         {
           path: "index.html",
           html: defaultHTML,
@@ -71,7 +72,7 @@ export const useEditor = (namespace?: string, repoId?: string) => {
     refetchOnReconnect: false,
     refetchOnMount: false,
     retry: false,
-    initialData: pagesStorage ?? [
+    initialData: [
       {
         path: "index.html",
         html: defaultHTML,
@@ -319,6 +320,10 @@ export const useEditor = (namespace?: string, repoId?: string) => {
     }
   }, [namespace, repoId])
 
+  const isSameHtml = useMemo(() => {
+    return isTheSameHtml(currentPageData.html);
+  }, [pages]);
+
   return {
     isLoadingProject,
     project,
@@ -341,6 +346,7 @@ export const useEditor = (namespace?: string, repoId?: string) => {
     currentCommit,
     setCurrentCommit,
     setProject,
+    isSameHtml,
     isUploading: uploadFilesMutation.isPending,
     globalEditorLoading: uploadFilesMutation.isPending || isLoadingProject,
     // Unsaved changes functionality

lib/prompts.ts

@@ -74,21 +74,25 @@ If it's a new page, you MUST applied the following NEW_PAGE_START and UPDATE_PAG
 ${PROMPT_FOR_IMAGE_GENERATION}
 Do NOT explain the changes or what you did, just return the expected results.
 Update Format Rules:
-1. Start with ${UPDATE_PAGE_START}
-2. Provide the name of the page you are modifying.
-3. Close the start tag with the ${UPDATE_PAGE_END}.
-4. Start with ${SEARCH_START}
-5. Provide the exact lines from the current code that need to be replaced.
-6. Use ${DIVIDER} to separate the search block from the replacement.
-7. Provide the new lines that should replace the original lines.
-8. End with ${REPLACE_END}
-9. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
-10. To insert code, use an empty SEARCH block (only ${SEARCH_START} and ${DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
-11. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only ${DIVIDER} and ${REPLACE_END} on their lines).
-12. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace.
+1. Start with ${PROJECT_NAME_START}.
+2. Add the name of the project, right after the start tag.
+3. Close the start tag with the ${PROJECT_NAME_END}.
+4. Start with ${UPDATE_PAGE_START}
+5. Provide the name of the page you are modifying.
+6. Close the start tag with the ${UPDATE_PAGE_END}.
+7. Start with ${SEARCH_START}
+8. Provide the exact lines from the current code that need to be replaced.
+9. Use ${DIVIDER} to separate the search block from the replacement.
+10. Provide the new lines that should replace the original lines.
+11. End with ${REPLACE_END}
+12. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
+13. To insert code, use an empty SEARCH block (only ${SEARCH_START} and ${DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
+14. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only ${DIVIDER} and ${REPLACE_END} on their lines).
+15. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace.
 Example Modifying Code:
 \`\`\`
 Some explanation...
+${PROJECT_NAME_START}Project Name${PROJECT_NAME_END}
 ${UPDATE_PAGE_START}index.html${UPDATE_PAGE_END}
 ${SEARCH_START}
     <h1>Old Title</h1>