Upload ChatGPT Image 14 сент. 2025 г., 14_27_00.png

.gitattributes

@@ -0,0 +1 @@
+public/ChatGPT[[:space:]]Image[[:space:]]14[[:space:]]сент.[[:space:]]2025[[:space:]]г.,[[:space:]]14_27_00.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,5 +1,5 @@
 ---
-title: DeepSite v3
+title: DeepSite v2
 emoji: 🐳
 colorFrom: blue
 colorTo: blue
@@ -7,23 +7,16 @@ sdk: docker
 pinned: true
 app_port: 3000
 license: mit
-short_description: Generate any application by Vibe Coding
+short_description: Generate any application with DeepSeek
 models:
   - deepseek-ai/DeepSeek-V3-0324
   - deepseek-ai/DeepSeek-R1-0528
-  - deepseek-ai/DeepSeek-V3.1
-  - deepseek-ai/DeepSeek-V3.1-Terminus
-  - deepseek-ai/DeepSeek-V3.2-Exp
-  - Qwen/Qwen3-Coder-480B-A35B-Instruct
-  - moonshotai/Kimi-K2-Instruct
-  - moonshotai/Kimi-K2-Instruct-0905
-  - zai-org/GLM-4.6
 ---
 
 # DeepSite 🐳
 
-DeepSite is a Vibe Coding Platform designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
+DeepSite is a coding platform powered by DeepSeek AI, designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
 
 ## How to use it locally
 
-Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)
+Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)

app/(public)/layout.tsx

@@ -6,7 +6,7 @@ export default async function PublicLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="h-screen bg-neutral-950 z-1 relative overflow-auto scroll-smooth">
+    <div className="min-h-screen bg-black z-1 relative">
       <div className="background__noisy" />
       <Navigation />
       {children}

app/(public)/page.tsx

@@ -1,5 +1,44 @@
-import { MyProjects } from "@/components/my-projects";
-
-export default async function HomePage() {
-  return <MyProjects />;
+import { AskAi } from "@/components/space/ask-ai";
+import { redirect } from "next/navigation";
+export default function Home() {
+  redirect("/projects/new");
+  return (
+    <>
+      <header className="container mx-auto pt-20 px-6 relative flex flex-col items-center justify-center text-center">
+        <div className="rounded-full border border-neutral-100/10 bg-neutral-100/5 text-xs text-neutral-300 px-3 py-1 max-w-max mx-auto mb-2">
+          ✨ DeepSite Public Beta
+        </div>
+        <h1 className="text-8xl font-semibold text-white font-mono max-w-4xl">
+          Code your website with AI in seconds
+        </h1>
+        <p className="text-2xl text-neutral-300/80 mt-4 text-center max-w-2xl">
+          Vibe Coding has never been so easy.
+        </p>
+        <div className="mt-14 max-w-2xl w-full mx-auto">
+          <AskAi />
+        </div>
+        <div className="absolute inset-0 pointer-events-none -z-[1]">
+          <div className="w-full h-full bg-gradient-to-r from-purple-500 to-pink-500 opacity-10 blur-3xl rounded-full" />
+          <div className="w-2/3 h-3/4 bg-gradient-to-r from-blue-500 to-teal-500 opacity-24 blur-3xl absolute -top-20 right-10 transform rotate-12" />
+          <div className="w-1/2 h-1/2 bg-gradient-to-r from-amber-500 to-rose-500 opacity-20 blur-3xl absolute bottom-0 left-10 rounded-3xl" />
+          <div className="w-48 h-48 bg-gradient-to-r from-cyan-500 to-indigo-500 opacity-20 blur-3xl absolute top-1/3 right-1/3 rounded-lg transform -rotate-15" />
+        </div>
+      </header>
+      <div id="community" className="h-screen flex items-center justify-center">
+        <h1 className="text-7xl font-extrabold text-white font-mono">
+          Community Driven
+        </h1>
+      </div>
+      <div id="deploy" className="h-screen flex items-center justify-center">
+        <h1 className="text-7xl font-extrabold text-white font-mono">
+          Deploy your website in seconds
+        </h1>
+      </div>
+      <div id="features" className="h-screen flex items-center justify-center">
+        <h1 className="text-7xl font-extrabold text-white font-mono">
+          Features that make you smile
+        </h1>
+      </div>
+    </>
+  );
 }

app/(public)/projects/page.tsx

@@ -0,0 +1,13 @@
+import { redirect } from "next/navigation";
+
+import { MyProjects } from "@/components/my-projects";
+import { getProjects } from "@/app/actions/projects";
+
+export default async function ProjectsPage() {
+  const { ok, projects } = await getProjects();
+  if (!ok) {
+    redirect("/");
+  }
+
+  return <MyProjects projects={projects} />;
+}

app/[namespace]/[repoId]/page.tsx

@@ -1,28 +0,0 @@
-import { AppEditor } from "@/components/editor";
-import { generateSEO } from "@/lib/seo";
-import { Metadata } from "next";
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ namespace: string; repoId: string }>;
-}): Promise<Metadata> {
-  const { namespace, repoId } = await params;
-
-  return generateSEO({
-    title: `${namespace}/${repoId} - DeepSite Editor`,
-    description: `Edit and build ${namespace}/${repoId} with AI-powered tools on DeepSite. Create stunning websites with no code required.`,
-    path: `/${namespace}/${repoId}`,
-    // Prevent indexing of individual project editor pages if they contain sensitive content
-    noIndex: false, // Set to true if you want to keep project pages private
-  });
-}
-
-export default async function ProjectNamespacePage({
-  params,
-}: {
-  params: Promise<{ namespace: string; repoId: string }>;
-}) {
-  const { namespace, repoId } = await params;
-  return <AppEditor namespace={namespace} repoId={repoId} />;
-}

app/actions/projects.ts

@@ -2,13 +2,13 @@
 
 import { isAuthenticated } from "@/lib/auth";
 import { NextResponse } from "next/server";
-import { listSpaces } from "@huggingface/hub";
-import { ProjectType } from "@/types";
+import dbConnect from "@/lib/mongodb";
+import Project from "@/models/Project";
+import { Project as ProjectType } from "@/types";
 
 export async function getProjects(): Promise<{
   ok: boolean;
   projects: ProjectType[];
-  isEmpty?: boolean;
 }> {
   const user = await isAuthenticated();
 
@@ -19,29 +19,45 @@ export async function getProjects(): Promise<{
     };
   }
 
-  const projects = [];
-  for await (const space of listSpaces({
-    accessToken: user.token as string,
-    additionalFields: ["author", "cardData"],
-    search: {
-      owner: user.name,
-    }
-  })) {
-    if (
-      !space.private &&
-      space.sdk === "static" &&
-      Array.isArray((space.cardData as { tags?: string[] })?.tags) &&
-      (
-        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite-v3")) ||
-        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite"))
-      )
-    ) {
-      projects.push(space);
-    }
+  await dbConnect();
+  const projects = await Project.find({
+    user_id: user?.id,
+  })
+    .sort({ _createdAt: -1 })
+    .limit(100)
+    .lean();
+  if (!projects) {
+    return {
+      ok: false,
+      projects: [],
+    };
   }
-
   return {
     ok: true,
-    projects,
+    projects: JSON.parse(JSON.stringify(projects)) as ProjectType[],
   };
 }
+
+export async function getProject(
+  namespace: string,
+  repoId: string
+): Promise<ProjectType | null> {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return null;
+  }
+
+  await dbConnect();
+  const project = await Project.findOne({
+    user_id: user.id,
+    namespace,
+    repoId,
+  }).lean();
+
+  if (!project) {
+    return null;
+  }
+
+  return JSON.parse(JSON.stringify(project)) as ProjectType;
+}

app/actions/rewrite-prompt.ts

@@ -0,0 +1,35 @@
+import { InferenceClient } from "@huggingface/inference";
+
+const START_REWRITE_PROMPT = ">>>>>>> START PROMPT >>>>>>";
+const END_REWRITE_PROMPT = ">>>>>>> END PROMPT >>>>>>";
+
+export const callAiRewritePrompt = async (prompt: string, { token, billTo }: { token: string, billTo?: string | null }) => {
+  const client = new InferenceClient(token);
+  const response = await client.chatCompletion(
+    {
+      model: "deepseek-ai/DeepSeek-V3.1",
+      provider: "novita",
+      messages: [{
+        role: "system",
+        content: `You are a helpful assistant that rewrites prompts to make them better. All the prompts will be about creating a website or app.
+Try to make the prompt more detailed and specific to create a good UI/UX Design and good code.
+Format the result by following this format:
+${START_REWRITE_PROMPT}
+new prompt here
+${END_REWRITE_PROMPT}
+If you don't rewrite the prompt, return the original prompt.
+Make sure to return the prompt in the same language as the prompt you are given. Also IMPORTANT: Make sure to keep the original intent of the prompt. Improve it it needed, but don't change the original intent.
+`
+      },{ role: "user", content: prompt }],
+    },
+    billTo ? { billTo } : {}
+  );
+  
+  const responseContent = response.choices[0]?.message?.content;
+  if (!responseContent) {
+    return prompt;
+  }
+  const startIndex = responseContent.indexOf(START_REWRITE_PROMPT);
+  const endIndex = responseContent.indexOf(END_REWRITE_PROMPT);
+  return responseContent.substring(startIndex + START_REWRITE_PROMPT.length, endIndex);
+};

app/api/{ask → ask-ai}/route.ts

@@ -4,7 +4,7 @@ import { NextResponse } from "next/server";
 import { headers } from "next/headers";
 import { InferenceClient } from "@huggingface/inference";
 
-import { MODELS } from "@/lib/providers";
+import { MODELS, PROVIDERS } from "@/lib/providers";
 import {
   DIVIDER,
   FOLLOW_UP_SYSTEM_PROMPT,
@@ -16,17 +16,9 @@ import {
   SEARCH_START,
   UPDATE_PAGE_START,
   UPDATE_PAGE_END,
-  PROMPT_FOR_PROJECT_NAME,
 } from "@/lib/prompts";
-import { calculateMaxTokens, estimateInputTokens, getProviderSpecificConfig } from "@/lib/max-tokens";
 import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { Page } from "@/types";
-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";
-import { templates } from "@/lib/templates";
 
 const ipAddresses = new Map();
 
@@ -35,7 +27,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, pages } = body;
+  const { prompt, provider, model, redesignMarkdown, previousPrompts, pages } = body;
 
   if (!model || (!prompt && !redesignMarkdown)) {
     return NextResponse.json(
@@ -55,8 +47,18 @@ export async function POST(request: NextRequest) {
     );
   }
 
-  let token: string | null = null;
-  if (userToken) token = userToken;
+  if (!selectedModel.providers.includes(provider) && provider !== "auto") {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: `The selected model does not support the ${provider} provider.`,
+        openSelectProvider: true,
+      },
+      { status: 400 }
+    );
+  }
+
+  let token = userToken;
   let billTo: string | null = null;
 
   /**
@@ -89,13 +91,18 @@ export async function POST(request: NextRequest) {
     billTo = "huggingface";
   }
 
-  const selectedProvider = await getBestProvider(selectedModel.value, provider)
+  const DEFAULT_PROVIDER = PROVIDERS.novita;
+  const selectedProvider =
+    provider === "auto"
+      ? PROVIDERS[selectedModel.autoProvider as keyof typeof PROVIDERS]
+      : PROVIDERS[provider as keyof typeof PROVIDERS] ?? DEFAULT_PROVIDER;
 
-  let rewrittenPrompt = redesignMarkdown ? `Here 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.` : prompt;
+  const rewrittenPrompt = prompt;
 
-  if (enhancedSettings.isActive) {
-    // rewrittenPrompt = await rewritePrompt(rewrittenPrompt, enhancedSettings, { token, billTo }, selectedModel.value, selectedProvider.provider);
-  }
+  // if (prompt?.length < 240) {
+    
+    //rewrittenPrompt = await callAiRewritePrompt(prompt, { token, billTo });
+  // }
 
   try {
     const encoder = new TextEncoder();
@@ -114,37 +121,33 @@ export async function POST(request: NextRequest) {
       // let completeResponse = "";
       try {
         const client = new InferenceClient(token);
-        
-        const systemPrompt = INITIAL_SYSTEM_PROMPT;
-        
-        const userPrompt = rewrittenPrompt;
-        const estimatedInputTokens = estimateInputTokens(systemPrompt, userPrompt);
-        const dynamicMaxTokens = calculateMaxTokens(selectedProvider, estimatedInputTokens, true);
-        const providerConfig = getProviderSpecificConfig(selectedProvider, dynamicMaxTokens);
-        
         const chatCompletion = client.chatCompletionStream(
           {
             model: selectedModel.value,
-            provider: selectedProvider.provider,
+            provider: selectedProvider.id as any,
             messages: [
               {
                 role: "system",
-                content: systemPrompt,
+                content: INITIAL_SYSTEM_PROMPT,
               },
+              ...(pages?.length > 1 ? [{
+                role: "assistant",
+                content: `Here are the current pages:\n\n${pages.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}\n\nNow, please create a new page based on this code. Also here are the previous prompts:\n\n${previousPrompts.map((p: string) => `- ${p}`).join("\n")}`
+              }] : []),
               {
                 role: "user",
-                content: userPrompt + (enhancedSettings.isActive ? `1. I want to use the following primary color: ${enhancedSettings.primaryColor} (eg: bg-${enhancedSettings.primaryColor}-500).
-2. I want to use the following secondary color: ${enhancedSettings.secondaryColor} (eg: bg-${enhancedSettings.secondaryColor}-500).
-3. I want to use the following theme: ${enhancedSettings.theme} mode.` : "")
+                content: redesignMarkdown
+                  ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown.`
+                  : rewrittenPrompt,
               },
             ],
-            ...providerConfig,
+            max_tokens: selectedProvider.max_tokens,
           },
           billTo ? { billTo } : {}
         );
 
         while (true) {
-          const { done, value } = await chatCompletion.next()
+          const { done, value } = await chatCompletion.next();
           if (done) {
             break;
           }
@@ -154,9 +157,6 @@ export async function POST(request: NextRequest) {
             await writer.write(encoder.encode(chunk));
           }
         }
-        
-        // Explicitly close the writer after successful completion
-        await writer.close();
       } catch (error: any) {
         if (error.message?.includes("exceeded your monthly included credits")) {
           await writer.write(
@@ -168,18 +168,7 @@ export async function POST(request: NextRequest) {
               })
             )
           );
-        } else if (error?.message?.includes("inference provider information")) {
-          await writer.write(
-            encoder.encode(
-              JSON.stringify({
-                ok: false,
-                openSelectProvider: true,
-                message: error.message,
-              })
-            )
-          );
-        }
-        else {
+        } else {
           await writer.write(
             encoder.encode(
               JSON.stringify({
@@ -192,12 +181,7 @@ export async function POST(request: NextRequest) {
           );
         }
       } finally {
-        // Ensure the writer is always closed, even if already closed
-        try {
-          await writer?.close();
-        } catch {
-          // Ignore errors when closing the writer as it might already be closed
-        }
+        await writer?.close();
       }
     })();
 
@@ -216,19 +200,13 @@ export async function POST(request: NextRequest) {
 }
 
 export async function PUT(request: NextRequest) {
-  const user = await isAuthenticated();
-  if (user instanceof NextResponse || !user) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
-
   const authHeaders = await headers();
+  const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, previousPrompts, provider, selectedElementHtml, model, pages, files, repoId: repoIdFromBody, isNew, enhancedSettings } =
+  const { prompt, previousPrompts, provider, selectedElementHtml, model, pages, files, } =
     body;
 
-  let repoId = repoIdFromBody;
-
   if (!prompt || pages.length === 0) {
     return NextResponse.json(
       { ok: false, error: "Missing required fields" },
@@ -246,7 +224,7 @@ export async function PUT(request: NextRequest) {
     );
   }
 
-  let token = user.token as string;
+  let token = userToken;
   let billTo: string | null = null;
 
   /**
@@ -281,112 +259,52 @@ export async function PUT(request: NextRequest) {
 
   const client = new InferenceClient(token);
 
-  const escapeRegExp = (string: string) => {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  };
-
-  const createFlexibleHtmlRegex = (searchBlock: string) => {
-    let searchRegex = escapeRegExp(searchBlock)
-      .replace(/\s+/g, '\\s*')
-      .replace(/>\s*</g, '>\\s*<')
-      .replace(/\s*>/g, '\\s*>');
-    
-    return new RegExp(searchRegex, 'g');
-  };
-
-  const selectedProvider = await getBestProvider(selectedModel.value, provider)
+  const DEFAULT_PROVIDER = PROVIDERS.novita;
+  const selectedProvider =
+    provider === "auto"
+      ? PROVIDERS[selectedModel.autoProvider as keyof typeof PROVIDERS]
+      : PROVIDERS[provider as keyof typeof PROVIDERS] ?? DEFAULT_PROVIDER;
 
   try {
-    const systemPrompt = FOLLOW_UP_SYSTEM_PROMPT + (isNew ? PROMPT_FOR_PROJECT_NAME : "");
-    const userContext = "You are modifying the HTML file based on the user's request.";
-    
-    const getRelevantPages = (pages: Page[], prompt: string, maxPages: number = 2): Page[] => {
-      if (pages.length <= maxPages) return pages;
-      
-      const indexPage = pages.find(p => p.path === '/' || p.path === '/index' || p.path === 'index');
-      const otherPages = pages.filter(p => p !== indexPage);
-      
-      if (selectedElementHtml) {
-        const elementKeywords = selectedElementHtml.toLowerCase().match(/class=["']([^"']*)["']|id=["']([^"']*)["']/g) || [];
-        const relevantPages = otherPages.filter(page => {
-          const pageContent = page.html.toLowerCase();
-          return elementKeywords.some((keyword: string) => pageContent.includes(keyword.toLowerCase()));
-        });
-        
-        return indexPage ? [indexPage, ...relevantPages.slice(0, maxPages - 1)] : relevantPages.slice(0, maxPages);
-      }
-      
-      const keywords = prompt.toLowerCase().split(/\s+/).filter(word => word.length > 3);
-      const scoredPages = otherPages.map(page => {
-        const pageContent = (page.path + ' ' + page.html).toLowerCase();
-        const score = keywords.reduce((acc, keyword) => {
-          return acc + (pageContent.includes(keyword) ? 1 : 0);
-        }, 0);
-        return { page, score };
-      });
-      
-      const topPages = scoredPages
-        .sort((a, b) => b.score - a.score)
-        .slice(0, maxPages - (indexPage ? 1 : 0))
-        .map(item => item.page);
-      
-      return indexPage ? [indexPage, ...topPages] : topPages;
-    };
-
-    const relevantPages = getRelevantPages(pages || [], prompt);
-    const pagesContext = relevantPages
-      .map((p: Page) => `- ${p.path}\n${p.html}`)
-      .join("\n\n");
-    
-    const assistantContext = `${
-      selectedElementHtml
-        ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\` Could be in multiple pages, if so, update all the pages.`
-        : ""
-    }. Current pages (${relevantPages.length}/${pages?.length || 0} shown): ${pagesContext}. ${files?.length > 0 ? `Available images: ${files?.map((f: string) => f).join(', ')}.` : ""}`;
-    
-    const estimatedInputTokens = estimateInputTokens(systemPrompt, prompt, userContext + assistantContext);
-    const dynamicMaxTokens = calculateMaxTokens(selectedProvider, estimatedInputTokens, false);
-    const providerConfig = getProviderSpecificConfig(selectedProvider, dynamicMaxTokens);
-    
-    const chatCompletion = client.chatCompletionStream(
+    const response = await client.chatCompletion(
       {
         model: selectedModel.value,
-        provider: selectedProvider.provider,
+        provider: selectedProvider.id as any,
         messages: [
           {
             role: "system",
-            content: systemPrompt,
+            content: FOLLOW_UP_SYSTEM_PROMPT,
           },
           {
             role: "user",
-            content: userContext,
+            content: previousPrompts
+              ? `Also here are the previous prompts:\n\n${previousPrompts.map((p: string) => `- ${p}`).join("\n")}`
+              : "You are modifying the HTML file based on the user's request.",
           },
           {
             role: "assistant",
-            content: assistantContext,
+
+            content: `${
+              selectedElementHtml
+                ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\``
+                : ""
+            }. Current pages: ${pages?.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}. ${files?.length > 0 ? `Current images: ${files?.map((f: string) => `- ${f}`).join("\n")}.` : ""}`,
           },
           {
             role: "user",
             content: prompt,
           },
         ],
-        ...providerConfig,
+        ...(selectedProvider.id !== "sambanova"
+          ? {
+              max_tokens: selectedProvider.max_tokens,
+            }
+          : {}),
       },
       billTo ? { billTo } : {}
     );
 
-    let chunk = "";
-    while (true) {
-      const { done, value } = await chatCompletion.next();
-      if (done) {
-        break;
-      }
-
-      const deltaContent = value.choices[0]?.delta?.content;
-      if (deltaContent) {
-        chunk += deltaContent;
-      }
-    }
+    const chunk = response.choices[0]?.message?.content;
     if (!chunk) {
       return NextResponse.json(
         { ok: false, message: "No content returned from the model" },
@@ -449,18 +367,15 @@ export async function PUT(request: NextRequest) {
               pageHtml = `${replaceBlock}\n${pageHtml}`;
               updatedLines.push([1, replaceBlock.split("\n").length]);
             } else {
-              const regex = createFlexibleHtmlRegex(searchBlock);
-              const match = regex.exec(pageHtml);
-              
-              if (match) {
-                const matchedText = match[0];
-                const beforeText = pageHtml.substring(0, match.index);
+              const blockPosition = pageHtml.indexOf(searchBlock);
+              if (blockPosition !== -1) {
+                const beforeText = pageHtml.substring(0, blockPosition);
                 const startLineNumber = beforeText.split("\n").length;
                 const replaceLines = replaceBlock.split("\n").length;
                 const endLineNumber = startLineNumber + replaceLines - 1;
 
                 updatedLines.push([startLineNumber, endLineNumber]);
-                pageHtml = pageHtml.replace(matchedText, replaceBlock);
+                pageHtml = pageHtml.replace(searchBlock, replaceBlock);
               }
             }
 
@@ -538,18 +453,15 @@ export async function PUT(request: NextRequest) {
             newHtml = `${replaceBlock}\n${newHtml}`;
             updatedLines.push([1, replaceBlock.split("\n").length]);
           } else {
-            const regex = createFlexibleHtmlRegex(searchBlock);
-            const match = regex.exec(newHtml);
-            
-            if (match) {
-              const matchedText = match[0];
-              const beforeText = newHtml.substring(0, match.index);
+            const blockPosition = newHtml.indexOf(searchBlock);
+            if (blockPosition !== -1) {
+              const beforeText = newHtml.substring(0, blockPosition);
               const startLineNumber = beforeText.split("\n").length;
               const replaceLines = replaceBlock.split("\n").length;
               const endLineNumber = startLineNumber + replaceLines - 1;
 
               updatedLines.push([startLineNumber, endLineNumber]);
-              newHtml = newHtml.replace(matchedText, replaceBlock);
+              newHtml = newHtml.replace(searchBlock, replaceBlock);
             }
           }
 
@@ -563,67 +475,10 @@ export async function PUT(request: NextRequest) {
         }
       }
 
-      const files: File[] = [];
-      updatedPages.forEach((page: Page) => {
-        const file = new File([page.html], page.path, { type: "text/html" });
-        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",
-          name: repoId,
-        },
-        files,
-        commitTitle: prompt,
-        accessToken: user.token as string,
-      });
-
       return NextResponse.json({
         ok: true,
         updatedLines,
         pages: updatedPages,
-        repoId,
-        commit: {
-          ...response.commit,
-          title: prompt,
-        }
       });
     } else {
       return NextResponse.json(
@@ -653,4 +508,3 @@ This project was created with [DeepSite](https://deepsite.hf.co).
     );
   }
 }
-

app/api/auth/login-url/route.ts

@@ -1,23 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-export async function GET(req: NextRequest) {
-  const host = req.headers.get("host") ?? "localhost:3000";
-  
-  let url: string;
-  if (host.includes("localhost")) {
-    url = host;
-  } else if (host.includes("hf.space") || host.includes("/spaces/enzostvs")) {
-    url = "enzostvs-deepsite.hf.space";
-  } else {
-    url = "deepsite.hf.co";
-  }
-  
-  const redirect_uri =
-    `${host.includes("localhost") ? "http://" : "https://"}` +
-    url +
-    "/auth/callback";
-
-  const loginRedirectUrl = `https://huggingface.co/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_ID}&redirect_uri=${redirect_uri}&response_type=code&scope=openid%20profile%20write-repos%20manage-repos%20inference-api&prompt=consent&state=1234567890`;
-  
-  return NextResponse.json({ loginUrl: loginRedirectUrl });
-}

app/api/auth/logout/route.ts

@@ -1,25 +0,0 @@
-import { NextResponse } from "next/server";
-import MY_TOKEN_KEY from "@/lib/get-cookie-name";
-
-export async function POST() {
-  const cookieName = MY_TOKEN_KEY();
-  const isProduction = process.env.NODE_ENV === "production";
-  
-  const response = NextResponse.json(
-    { message: "Logged out successfully" },
-    { status: 200 }
-  );
-  
-  // Clear the HTTP-only cookie
-  const cookieOptions = [
-    `${cookieName}=`,
-    "Max-Age=0",
-    "Path=/",
-    "HttpOnly",
-    ...(isProduction ? ["Secure", "SameSite=None"] : ["SameSite=Lax"])
-  ].join("; ");
-  
-  response.headers.set("Set-Cookie", cookieOptions);
-  
-  return response;
-}

app/api/auth/route.ts

@@ -1,5 +1,4 @@
 import { NextRequest, NextResponse } from "next/server";
-import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 
 export async function POST(req: NextRequest) {
   const body = await req.json();
@@ -71,17 +70,11 @@ export async function POST(req: NextRequest) {
   }
   const user = await userResponse.json();
 
-  const cookieName = MY_TOKEN_KEY();
-  const isProduction = process.env.NODE_ENV === "production";
-  
-  // Create response with user data
-  const nextResponse = NextResponse.json(
+  return NextResponse.json(
     {
       access_token: response.access_token,
       expires_in: response.expires_in,
       user,
-      // Include fallback flag for iframe contexts
-      useLocalStorageFallback: true,
     },
     {
       status: 200,
@@ -90,17 +83,4 @@ export async function POST(req: NextRequest) {
       },
     }
   );
-  
-  // Set HTTP-only cookie with proper attributes for iframe support
-  const cookieOptions = [
-    `${cookieName}=${response.access_token}`,
-    `Max-Age=${response.expires_in || 3600}`, // Default 1 hour if not provided
-    "Path=/",
-    "HttpOnly",
-    ...(isProduction ? ["Secure", "SameSite=None"] : ["SameSite=Lax"])
-  ].join("; ");
-  
-  nextResponse.headers.set("Set-Cookie", cookieOptions);
-  
-  return nextResponse;
 }

app/api/me/projects/[namespace]/[repoId]/commits/[commitId]/promote/route.ts

@@ -1,190 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, listFiles, spaceInfo, uploadFiles, deleteFiles } from "@huggingface/hub";
-
-import { isAuthenticated } from "@/lib/auth";
-import { Page } from "@/types";
-
-export async function POST(
-  req: NextRequest,
-  { params }: { 
-    params: Promise<{ 
-      namespace: string; 
-      repoId: string; 
-      commitId: string; 
-    }> 
-  }
-) {
-  const user = await isAuthenticated();
-
-  if (user instanceof NextResponse || !user) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
-
-  const param = await params;
-  const { namespace, repoId, commitId } = param;
-
-  try {
-    const repo: RepoDesignation = {
-      type: "space",
-      name: `${namespace}/${repoId}`,
-    };
-
-    const space = await spaceInfo({
-      name: `${namespace}/${repoId}`,
-      accessToken: user.token as string,
-      additionalFields: ["author"],
-    });
-
-    if (!space || space.sdk !== "static") {
-      return NextResponse.json(
-        { ok: false, error: "Space is not a static space." },
-        { status: 404 }
-      );
-    }
-    
-    if (space.author !== user.name) {
-      return NextResponse.json(
-        { ok: false, error: "Space does not belong to the authenticated user." },
-        { status: 403 }
-      );
-    }
-
-    // Fetch files from the specific commit
-    const files: File[] = [];
-    const pages: Page[] = [];
-    const allowedExtensions = ["html", "md", "css", "js", "json", "txt"];
-    const commitFilePaths: Set<string> = new Set();
-    
-    // Get all files from the specific commit
-    for await (const fileInfo of listFiles({
-      repo,
-      accessToken: user.token as string,
-      revision: commitId,
-    })) {
-      const fileExtension = fileInfo.path.split('.').pop()?.toLowerCase();
-      
-      if (allowedExtensions.includes(fileExtension || "")) {
-        commitFilePaths.add(fileInfo.path);
-        
-        // Fetch the file content from the specific commit
-        const response = await fetch(
-          `https://huggingface.co/spaces/${namespace}/${repoId}/raw/${commitId}/${fileInfo.path}`
-        );
-        
-        if (response.ok) {
-          const content = await response.text();
-          let mimeType = "text/plain";
-          
-          switch (fileExtension) {
-            case "html":
-              mimeType = "text/html";
-              // Add HTML files to pages array for client-side setPages
-              pages.push({
-                path: fileInfo.path,
-                html: content,
-              });
-              break;
-            case "css":
-              mimeType = "text/css";
-              break;
-            case "js":
-              mimeType = "application/javascript";
-              break;
-            case "json":
-              mimeType = "application/json";
-              break;
-            case "md":
-              mimeType = "text/markdown";
-              break;
-          }
-          
-          const file = new File([content], fileInfo.path, { type: mimeType });
-          files.push(file);
-        }
-      }
-    }
-
-    // Get files currently in main branch to identify files to delete
-    const mainBranchFilePaths: Set<string> = new Set();
-    for await (const fileInfo of listFiles({
-      repo,
-      accessToken: user.token as string,
-      revision: "main",
-    })) {
-      const fileExtension = fileInfo.path.split('.').pop()?.toLowerCase();
-      
-      if (allowedExtensions.includes(fileExtension || "")) {
-        mainBranchFilePaths.add(fileInfo.path);
-      }
-    }
-
-    // Identify files to delete (exist in main but not in commit)
-    const filesToDelete: string[] = [];
-    for (const mainFilePath of mainBranchFilePaths) {
-      if (!commitFilePaths.has(mainFilePath)) {
-        filesToDelete.push(mainFilePath);
-      }
-    }
-
-    if (files.length === 0 && filesToDelete.length === 0) {
-      return NextResponse.json(
-        { ok: false, error: "No files found in the specified commit and no files to delete" },
-        { status: 404 }
-      );
-    }
-
-    // Delete files that exist in main but not in the commit being promoted
-    if (filesToDelete.length > 0) {
-      await deleteFiles({
-        repo,
-        paths: filesToDelete,
-        accessToken: user.token as string,
-        commitTitle: `Removed files from promoting ${commitId.slice(0, 7)}`,
-        commitDescription: `Removed files that don't exist in commit ${commitId}:\n${filesToDelete.map(path => `- ${path}`).join('\n')}`,
-      });
-    }
-
-    // Upload the files to the main branch with a promotion commit message
-    if (files.length > 0) {
-      await uploadFiles({
-        repo,
-        files,
-        accessToken: user.token as string,
-        commitTitle: `Promote version ${commitId.slice(0, 7)} to main`,
-        commitDescription: `Promoted commit ${commitId} to main branch`,
-      });
-    }
-
-    return NextResponse.json(
-      { 
-        ok: true, 
-        message: "Version promoted successfully",
-        promotedCommit: commitId,
-        pages: pages,
-      },
-      { status: 200 }
-    );
-
-  } catch (error: any) {
-    
-    // Handle specific HuggingFace API errors
-    if (error.statusCode === 404) {
-      return NextResponse.json(
-        { ok: false, error: "Commit not found" },
-        { status: 404 }
-      );
-    }
-    
-    if (error.statusCode === 403) {
-      return NextResponse.json(
-        { ok: false, error: "Access denied to repository" },
-        { status: 403 }
-      );
-    }
-
-    return NextResponse.json(
-      { ok: false, error: error.message || "Failed to promote version" },
-      { status: 500 }
-    );
-  }
-}

app/api/me/projects/[namespace]/[repoId]/images/route.ts

@@ -1,10 +1,12 @@
 import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, spaceInfo, uploadFiles } from "@huggingface/hub";
+import { RepoDesignation, uploadFiles } from "@huggingface/hub";
 
 import { isAuthenticated } from "@/lib/auth";
 import Project from "@/models/Project";
 import dbConnect from "@/lib/mongodb";
 
+// No longer need the ImageUpload interface since we're handling FormData with File objects
+
 export async function POST(
   req: NextRequest,
   { params }: { params: Promise<{ namespace: string; repoId: string }> }
@@ -16,26 +18,22 @@ export async function POST(
       return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
     }
 
+    await dbConnect();
     const param = await params;
     const { namespace, repoId } = param;
 
-    const space = await spaceInfo({
-      name: `${namespace}/${repoId}`,
-      accessToken: user.token as string,
-      additionalFields: ["author"],
-    });
-
-    if (!space || space.sdk !== "static") {
-      return NextResponse.json(
-        { ok: false, error: "Space is not a static space." },
-        { status: 404 }
-      );
-    }
+    const project = await Project.findOne({
+      user_id: user.id,
+      space_id: `${namespace}/${repoId}`,
+    }).lean();
     
-    if (space.author !== user.name) {
+    if (!project) {
       return NextResponse.json(
-        { ok: false, error: "Space does not belong to the authenticated user." },
-        { status: 403 }
+        {
+          ok: false,
+          error: "Project not found",
+        },
+        { status: 404 }
       );
     }
 

app/api/me/projects/[namespace]/[repoId]/route.ts

@@ -1,10 +1,12 @@
 import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, spaceInfo, listFiles, deleteRepo, listCommits, downloadFile } from "@huggingface/hub";
+import { RepoDesignation, spaceInfo, uploadFiles, listFiles } from "@huggingface/hub";
 
 import { isAuthenticated } from "@/lib/auth";
-import { Commit, Page } from "@/types";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+import { Page } from "@/types";
 
-export async function DELETE(
+export async function GET(
   req: NextRequest,
   { params }: { params: Promise<{ namespace: string; repoId: string }> }
 ) {
@@ -14,63 +16,23 @@ export async function DELETE(
     return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
 
+  await dbConnect();
   const param = await params;
   const { namespace, repoId } = param;
 
-  try {
-    const space = await spaceInfo({
-      name: `${namespace}/${repoId}`,
-      accessToken: user.token as string,
-      additionalFields: ["author"],
-    });
-    
-    if (!space || space.sdk !== "static") {
-      return NextResponse.json(
-        { ok: false, error: "Space is not a static space." },
-        { status: 404 }
-      );
-    }
-    
-    if (space.author !== user.name) {
-      return NextResponse.json(
-        { ok: false, error: "Space does not belong to the authenticated user." },
-        { status: 403 }
-      );
-    }
-    
-    const repo: RepoDesignation = {
-      type: "space",
-      name: `${namespace}/${repoId}`,
-    };
-    
-    await deleteRepo({
-      repo,
-      accessToken: user.token as string,
-    });
-
-    
-    return NextResponse.json({ ok: true }, { status: 200 });
-  } catch (error: any) {
+  const project = await Project.findOne({
+    user_id: user.id,
+    space_id: `${namespace}/${repoId}`,
+  }).lean();
+  if (!project) {
     return NextResponse.json(
-      { ok: false, error: error.message },
-      { status: 500 }
+      {
+        ok: false,
+        error: "Project not found",
+      },
+      { status: 404 }
     );
   }
-}
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ namespace: string; repoId: string }> }
-) {
-  const user = await isAuthenticated();
-
-  if (user instanceof NextResponse || !user) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
-
-  const param = await params;
-  const { namespace, repoId } = param;
-
   try {
     const space = await spaceInfo({
       name: namespace + "/" + repoId,
@@ -103,49 +65,37 @@ export async function GET(
     };
 
     const htmlFiles: Page[] = [];
-    const files: string[] = [];
+    const images: string[] = [];
 
-    const allowedFilesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif"];
+    const allowedImagesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif"];
     
     for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
       if (fileInfo.path.endsWith(".html")) {
-        const blob = await downloadFile({ repo, accessToken: user.token as string, path: fileInfo.path, raw: true });
-        const html = await blob?.text();
-        if (!html) {
-          continue;
-        }
-        if (fileInfo.path === "index.html") {
-          htmlFiles.unshift({
-            path: fileInfo.path,
-            html,
-          });
-        } else {
+        const res = await fetch(`https://huggingface.co/spaces/${namespace}/${repoId}/raw/main/${fileInfo.path}`);
+        if (res.ok) {
+          const html = await res.text();
+          if (fileInfo.path === "index.html") {
+            htmlFiles.unshift({
+              path: fileInfo.path,
+              html,
+            });
+          } else {
           htmlFiles.push({
             path: fileInfo.path,
-            html,
-          });
+              html,
+            });
+          }
         }
       }
       if (fileInfo.type === "directory" && fileInfo.path === "images") {
         for await (const imageInfo of listFiles({repo, accessToken: user.token as string, path: fileInfo.path})) {
-          if (allowedFilesExtensions.includes(imageInfo.path.split(".").pop() || "")) {
-            files.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${imageInfo.path}`);
+          if (allowedImagesExtensions.includes(imageInfo.path.split(".").pop() || "")) {
+            images.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${imageInfo.path}`);
           }
         }
       }
     }
-    const commits: Commit[] = [];
-    for await (const commit of listCommits({ repo, accessToken: user.token as string })) {
-      if (commit.title.includes("initial commit") || commit.title.includes("image(s)") || commit.title.includes("Removed files from promoting")) {
-        continue;
-      }
-      commits.push({
-        title: commit.title,
-        oid: commit.oid,
-        date: commit.date,
-      });
-    }
-    
+
     if (htmlFiles.length === 0) {
       return NextResponse.json(
         {
@@ -155,17 +105,14 @@ export async function GET(
         { status: 404 }
       );
     }
+
     return NextResponse.json(
       {
         project: {
-          id: space.id,
-          space_id: space.name,
-          private: space.private,
-          _updatedAt: space.updatedAt,
+          ...project,
+          pages: htmlFiles,
+          images,
         },
-        pages: htmlFiles,
-        files,
-        commits,
         ok: true,
       },
       { status: 200 }
@@ -174,6 +121,10 @@ export async function GET(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
     if (error.statusCode === 404) {
+      await Project.deleteOne({
+        user_id: user.id,
+        space_id: `${namespace}/${repoId}`,
+      });
       return NextResponse.json(
         { error: "Space not found", ok: false },
         { status: 404 }
@@ -185,3 +136,141 @@ export async function GET(
     );
   }
 }
+
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  await dbConnect();
+  const param = await params;
+  const { namespace, repoId } = param;
+  const { pages, prompts } = await req.json();
+
+  const project = await Project.findOne({
+    user_id: user.id,
+    space_id: `${namespace}/${repoId}`,
+  }).lean();
+  if (!project) {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Project not found",
+      },
+      { status: 404 }
+    );
+  }
+
+  const repo: RepoDesignation = {
+    type: "space",
+    name: `${namespace}/${repoId}`,
+  };
+
+  const files: File[] = [];
+  const promptsFile = new File([prompts.join("\n")], "prompts.txt", {
+    type: "text/plain",
+  });
+  files.push(promptsFile);
+  pages.forEach((page: Page) => {
+    const file = new File([page.html], page.path, { type: "text/html" });
+    files.push(file);
+  });
+  await uploadFiles({
+    repo,
+    files,
+    accessToken: user.token as string,
+    commitTitle: `${prompts[prompts.length - 1]} - Follow Up Deployment`,
+  });
+
+  await Project.updateOne(
+    { user_id: user.id, space_id: `${namespace}/${repoId}` },
+    {
+      $set: {
+        prompts: [
+          ...prompts,
+        ],
+      },
+    }
+  );
+  return NextResponse.json({ ok: true }, { status: 200 });
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  await dbConnect();
+  const param = await params;
+  const { namespace, repoId } = param;
+
+  const space = await spaceInfo({
+    name: namespace + "/" + repoId,
+    accessToken: user.token as string,
+    additionalFields: ["author"],
+  });
+
+  if (!space || space.sdk !== "static") {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Space is not a static space",
+      },
+      { status: 404 }
+    );
+  }
+  if (space.author !== user.name) {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Space does not belong to the authenticated user",
+      },
+      { status: 403 }
+    );
+  }
+
+  const project = await Project.findOne({
+    user_id: user.id,
+    space_id: `${namespace}/${repoId}`,
+  }).lean();
+  if (project) {
+    // redirect to the project page if it already exists
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Project already exists",
+        redirect: `/projects/${namespace}/${repoId}`,
+      },
+      { status: 400 }
+    );
+  }
+
+  const newProject = new Project({
+    user_id: user.id,
+    space_id: `${namespace}/${repoId}`,
+    prompts: [],
+  });
+
+  await newProject.save();
+  return NextResponse.json(
+    {
+      ok: true,
+      project: {
+        id: newProject._id,
+        space_id: newProject.space_id,
+        prompts: newProject.prompts,
+      },
+    },
+    { status: 201 }
+  );
+}

app/api/me/projects/[namespace]/[repoId]/save/route.ts

@@ -1,64 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { uploadFiles } from "@huggingface/hub";
-
-import { isAuthenticated } from "@/lib/auth";
-import { Page } from "@/types";
-
-export async function PUT(
-  req: NextRequest,
-  { params }: { params: Promise<{ namespace: string; repoId: string }> }
-) {
-  const user = await isAuthenticated();
-  if (user instanceof NextResponse || !user) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
-
-  const param = await params;
-  const { namespace, repoId } = param;
-  const { pages, commitTitle = "Manual changes saved" } = await req.json();
-
-  if (!pages || !Array.isArray(pages) || pages.length === 0) {
-    return NextResponse.json(
-      { ok: false, error: "Pages are required" },
-      { status: 400 }
-    );
-  }
-
-  try {
-    // Prepare files for upload
-    const files: File[] = [];
-    pages.forEach((page: Page) => {
-      const file = new File([page.html], page.path, { type: "text/html" });
-      files.push(file);
-    });
-
-    // Upload files to HuggingFace Hub
-    const response = await uploadFiles({
-      repo: {
-        type: "space",
-        name: `${namespace}/${repoId}`,
-      },
-      files,
-      commitTitle,
-      accessToken: user.token as string,
-    });
-
-    return NextResponse.json({
-      ok: true,
-      pages,
-      commit: {
-        ...response.commit,
-        title: commitTitle,
-      }
-    });
-  } catch (error: any) {
-    console.error("Error saving manual changes:", error);
-    return NextResponse.json(
-      {
-        ok: false,
-        error: error.message || "Failed to save changes",
-      },
-      { status: 500 }
-    );
-  }
-}

app/api/me/projects/route.ts

@@ -1,107 +1,127 @@
 import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, createRepo, listCommits, spaceInfo, uploadFiles } from "@huggingface/hub";
+import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub";
 
 import { isAuthenticated } from "@/lib/auth";
-import { Commit, Page } from "@/types";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
 import { COLORS } from "@/lib/utils";
+import { Page } from "@/types";
 
-export async function POST(
-  req: NextRequest,
-) {
+export async function GET() {
   const user = await isAuthenticated();
+
   if (user instanceof NextResponse || !user) {
     return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
 
-  const { title: titleFromRequest, pages, prompt } = await req.json();
-
-  const title = titleFromRequest ?? "DeepSite Project";
-
-  const formattedTitle = title
-  .toLowerCase()
-  .replace(/[^a-z0-9]+/g, "-")
-  .split("-")
-  .filter(Boolean)
-  .join("-")
-  .slice(0, 96);
-
-  const repo: RepoDesignation = {
-    type: "space",
-    name: `${user.name}/${formattedTitle}`,
-  };
-  const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
-  const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
-  const README = `---
-title: ${title}
+  await dbConnect();
+
+  const projects = await Project.find({
+    user_id: user?.id,
+  })
+    .sort({ _createdAt: -1 })
+    .limit(100)
+    .lean();
+  if (!projects) {
+    return NextResponse.json(
+      {
+        ok: false,
+        projects: [],
+      },
+      { status: 404 }
+    );
+  }
+  return NextResponse.json(
+    {
+      ok: true,
+      projects,
+    },
+    { status: 200 }
+  );
+}
+
+export async function POST(request: NextRequest) {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  const { title, pages, prompts } = await request.json();
+
+  if (!title || !pages || pages.length === 0) {
+    return NextResponse.json(
+      { message: "Title and HTML content are required.", ok: false },
+      { status: 400 }
+    );
+  }
+
+  await dbConnect();
+
+  try {
+    let readme = "";
+
+    const newTitle = title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .split("-")
+      .filter(Boolean)
+      .join("-")
+      .slice(0, 96);
+
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${user.name}/${newTitle}`,
+    };
+
+    const { repoUrl } = await createRepo({
+      repo,
+      accessToken: user.token as string,
+    });
+    const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
+    const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
+    readme = `---
+title: ${newTitle}
+emoji: 🐳
 colorFrom: ${colorFrom}
 colorTo: ${colorTo}
-emoji: 🐳
 sdk: static
 pinned: false
 tags:
-  - deepsite-v3
+  - deepsite
 ---
 
-# Welcome to your new DeepSite project!
-This project was created with [DeepSite](https://deepsite.hf.co).
-`;
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference`;
 
-  const files: File[] = [];
-  const readmeFile = new File([README], "README.md", { type: "text/markdown" });
-  files.push(readmeFile);
-  pages.forEach((page: Page) => {
-    const file = new File([page.html], page.path, { type: "text/html" });
-    files.push(file);
-  });
-
-  try {
-    const { repoUrl} = await createRepo({
-      repo,
-      accessToken: user.token as string,
+    const readmeFile = new File([readme], "README.md", {
+      type: "text/markdown",
+    });
+    const promptsFile = new File([prompts.join("\n")], "prompts.txt", {
+      type: "text/plain",
+    });
+    const files = [readmeFile, promptsFile];
+    pages.forEach((page: Page) => {
+      const file = new File([page.html], page.path, { type: "text/html" });
+      files.push(file);
     });
-    const commitTitle = !prompt || prompt.trim() === "" ? "Redesign my website" : prompt;
     await uploadFiles({
       repo,
       files,
       accessToken: user.token as string,
-      commitTitle
+      commitTitle: `${prompts[prompts.length - 1]} - Initial Deployment`,
     });
-
     const path = repoUrl.split("/").slice(-2).join("/");
-
-    const commits: Commit[] = [];
-    for await (const commit of listCommits({ repo, accessToken: user.token as string })) {
-      if (commit.title.includes("initial commit") || commit.title.includes("image(s)") || commit.title.includes("Promote version")) {
-        continue;
-      }
-      commits.push({
-        title: commit.title,
-        oid: commit.oid,
-        date: commit.date,
-      });
-    }
-
-    const space = await spaceInfo({
-      name: repo.name,
-      accessToken: user.token as string,
+    const project = await Project.create({
+      user_id: user.id,
+      space_id: path,
+      prompts,
     });
-
-    let newProject = {
-      files,
-      pages,
-      commits,
-      project: {
-        id: space.id,
-        space_id: space.name,
-        _updatedAt: space.updatedAt,
-      }
-    }
-    
-    return NextResponse.json({ space: newProject, path, ok: true }, { status: 201 });
+    return NextResponse.json({ project, path, ok: true }, { status: 201 });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (err: any) {
     return NextResponse.json(
       { error: err.message, ok: false },
       { status: 500 }
     );
   }
-}
+}

app/api/me/route.ts

@@ -1,4 +1,3 @@
-import { listSpaces } from "@huggingface/hub";
 import { headers } from "next/headers";
 import { NextResponse } from "next/server";
 
@@ -22,25 +21,5 @@ export async function GET() {
     );
   }
   const user = await userResponse.json();
-  const projects = [];
-  for await (const space of listSpaces({
-    accessToken: token.replace("Bearer ", "") as string,
-    additionalFields: ["author", "cardData"],
-    search: {
-      owner: user.name,
-    }
-  })) {
-    if (
-      space.sdk === "static" &&
-      Array.isArray((space.cardData as { tags?: string[] })?.tags) &&
-      (
-        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite-v3")) ||
-        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite"))
-      )
-    ) {
-      projects.push(space);
-    }
-  }
-
-  return NextResponse.json({ user, projects, errCode: null }, { status: 200 });
+  return NextResponse.json({ user, errCode: null }, { status: 200 });
 }

app/auth/callback/page.tsx

@@ -5,92 +5,67 @@ import { use, useState } from "react";
 import { useMount, useTimeoutFn } from "react-use";
 
 import { Button } from "@/components/ui/button";
-import { AnimatedBlobs } from "@/components/animated-blobs";
-import { useBroadcastChannel } from "@/lib/useBroadcastChannel";
 export default function AuthCallback({
   searchParams,
 }: {
   searchParams: Promise<{ code: string }>;
 }) {
   const [showButton, setShowButton] = useState(false);
-  const [isPopupAuth, setIsPopupAuth] = useState(false);
   const { code } = use(searchParams);
   const { loginFromCode } = useUser();
-  const { postMessage } = useBroadcastChannel("auth", () => {});
 
   useMount(async () => {
     if (code) {
-      const isPopup = window.opener || window.parent !== window;
-      setIsPopupAuth(isPopup);
-
-      if (isPopup) {
-        postMessage({
-          type: "user-oauth",
-          code: code,
-        });
-
-        setTimeout(() => {
-          if (window.opener) {
-            window.close();
-          }
-        }, 1000);
-      } else {
-        await loginFromCode(code);
-      }
+      await loginFromCode(code);
     }
   });
 
-  useTimeoutFn(() => setShowButton(true), 7000);
+  useTimeoutFn(
+    () => setShowButton(true),
+    7000 // Show button after 5 seconds
+  );
 
   return (
-    <div className="h-screen flex flex-col justify-center items-center bg-neutral-950 z-1 relative">
-      <div className="background__noisy" />
-      <div className="relative max-w-4xl py-10 flex items-center justify-center w-full">
-        <div className="max-w-lg mx-auto !rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden ring-[8px] ring-white/20">
-          <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
-            <div className="flex items-center justify-center -space-x-4 mb-3">
-              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                🚀
-              </div>
-              <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
-                👋
-              </div>
-              <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                🙌
-              </div>
+    <div className="h-screen flex flex-col justify-center items-center">
+      <div className="!rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden ring-[8px] ring-white/20">
+        <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+          <div className="flex items-center justify-center -space-x-4 mb-3">
+            <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+              🚀
             </div>
-            <p className="text-xl font-semibold text-neutral-950">
-              {isPopupAuth
-                ? "Authentication Complete!"
-                : "Login In Progress..."}
-            </p>
-            <p className="text-sm text-neutral-500 mt-1.5">
-              {isPopupAuth
-                ? "You can now close this tab and return to the previous page."
-                : "Wait a moment while we log you in with your code."}
+            <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+              👋
+            </div>
+            <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+              🙌
+            </div>
+          </div>
+          <p className="text-xl font-semibold text-neutral-950">
+            Login In Progress...
+          </p>
+          <p className="text-sm text-neutral-500 mt-1.5">
+            Wait a moment while we log you in with your code.
+          </p>
+        </header>
+        <main className="space-y-4 p-6">
+          <div>
+            <p className="text-sm text-neutral-700 mb-4 max-w-xs">
+              If you are not redirected automatically in the next 5 seconds,
+              please click the button below
             </p>
-          </header>
-          <main className="space-y-4 p-6">
-            <div>
-              <p className="text-sm text-neutral-700 mb-4 max-w-xs">
-                If you are not redirected automatically in the next 5 seconds,
-                please click the button below
+            {showButton ? (
+              <Link href="/">
+                <Button variant="black" className="relative">
+                  Go to Home
+                </Button>
+              </Link>
+            ) : (
+              <p className="text-xs text-neutral-500">
+                Please wait, we are logging you in...
               </p>
-              {showButton ? (
-                <Link href="/">
-                  <Button variant="black" className="relative">
-                    Go to Home
-                  </Button>
-                </Link>
-              ) : (
-                <p className="text-xs text-neutral-500">
-                  Please wait, we are logging you in...
-                </p>
-              )}
-            </div>
-          </main>
-        </div>
-        <AnimatedBlobs />
+            )}
+          </div>
+        </main>
       </div>
     </div>
   );

app/layout.tsx

@@ -2,18 +2,15 @@
 import type { Metadata, Viewport } from "next";
 import { Inter, PT_Sans } from "next/font/google";
 import { cookies } from "next/headers";
-import Script from "next/script";
 
+import TanstackProvider from "@/components/providers/tanstack-query-provider";
 import "@/assets/globals.css";
 import { Toaster } from "@/components/ui/sonner";
 import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { apiServer } from "@/lib/api";
-import IframeDetector from "@/components/iframe-detector";
 import AppContext from "@/components/contexts/app-context";
-import TanstackContext from "@/components/contexts/tanstack-query-context";
-import { LoginProvider } from "@/components/contexts/login-context";
-import { ProProvider } from "@/components/contexts/pro-context";
-import { generateSEO, generateStructuredData } from "@/lib/seo";
+import Script from "next/script";
+import IframeDetector from "@/components/iframe-detector";
 
 const inter = Inter({
   variable: "--font-inter-sans",
@@ -27,12 +24,31 @@ const ptSans = PT_Sans({
 });
 
 export const metadata: Metadata = {
-  ...generateSEO({
+  title: "DeepSite | Build with AI ✨",
+  description:
+    "DeepSite is a web development tool that helps you build websites with AI, no code required. Let's deploy your website with DeepSite and enjoy the magic of AI.",
+  openGraph: {
+    title: "DeepSite | Build with AI ✨",
+    description:
+      "DeepSite is a web development tool that helps you build websites with AI, no code required. Let's deploy your website with DeepSite and enjoy the magic of AI.",
+    url: "https://deepsite.hf.co",
+    siteName: "DeepSite",
+    images: [
+      {
+        url: "https://deepsite.hf.co/banner.png",
+        width: 1200,
+        height: 630,
+        alt: "DeepSite Open Graph Image",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
     title: "DeepSite | Build with AI ✨",
     description:
       "DeepSite is a web development tool that helps you build websites with AI, no code required. Let's deploy your website with DeepSite and enjoy the magic of AI.",
-    path: "/",
-  }),
+    images: ["https://deepsite.hf.co/banner.png"],
+  },
   appleWebApp: {
     capable: true,
     title: "DeepSite",
@@ -43,9 +59,6 @@ export const metadata: Metadata = {
     shortcut: "/logo.svg",
     apple: "/logo.svg",
   },
-  verification: {
-    google: process.env.GOOGLE_SITE_VERIFICATION,
-  },
 };
 
 export const viewport: Viewport = {
@@ -57,54 +70,29 @@ export const viewport: Viewport = {
 async function getMe() {
   const cookieStore = await cookies();
   const token = cookieStore.get(MY_TOKEN_KEY())?.value;
-  if (!token) return { user: null, projects: [], errCode: null };
+  if (!token) return { user: null, errCode: null };
   try {
     const res = await apiServer.get("/me", {
       headers: {
         Authorization: `Bearer ${token}`,
       },
     });
-    return { user: res.data.user, projects: res.data.projects, errCode: null };
+    return { user: res.data.user, errCode: null };
   } catch (err: any) {
-    return { user: null, projects: [], errCode: err.status };
+    return { user: null, errCode: err.status };
   }
 }
 
+// if domain isn't deepsite.hf.co or enzostvs-deepsite.hf.space redirect to deepsite.hf.co
+
 export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   const data = await getMe();
-
-  // Generate structured data
-  const structuredData = generateStructuredData("WebApplication", {
-    name: "DeepSite",
-    description: "Build websites with AI, no code required",
-    url: "https://deepsite.hf.co",
-  });
-
-  const organizationData = generateStructuredData("Organization", {
-    name: "DeepSite",
-    url: "https://deepsite.hf.co",
-  });
-
   return (
     <html lang="en">
-      <head>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(structuredData),
-          }}
-        />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(organizationData),
-          }}
-        />
-      </head>
       <Script
         defer
         data-domain="deepsite.hf.co"
@@ -115,13 +103,9 @@ export default async function RootLayout({
       >
         <IframeDetector />
         <Toaster richColors position="bottom-center" />
-        <TanstackContext>
-          <AppContext me={data}>
-            <LoginProvider>
-              <ProProvider>{children}</ProProvider>
-            </LoginProvider>
-          </AppContext>
-        </TanstackContext>
+        <TanstackProvider>
+          <AppContext me={data}>{children}</AppContext>
+        </TanstackProvider>
       </body>
     </html>
   );

app/new/page.tsx

@@ -1,14 +0,0 @@
-import { AppEditor } from "@/components/editor";
-import { Metadata } from "next";
-import { generateSEO } from "@/lib/seo";
-
-export const metadata: Metadata = generateSEO({
-  title: "Create New Project - DeepSite",
-  description:
-    "Start building your next website with AI. Create a new project on DeepSite and experience the power of AI-driven web development.",
-  path: "/new",
-});
-
-export default function NewProjectPage() {
-  return <AppEditor isNew />;
-}

app/projects/[namespace]/[repoId]/page.tsx

@@ -0,0 +1,42 @@
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { apiServer } from "@/lib/api";
+import MY_TOKEN_KEY from "@/lib/get-cookie-name";
+import { AppEditor } from "@/components/editor";
+
+async function getProject(namespace: string, repoId: string) {
+  // TODO replace with a server action
+  const cookieStore = await cookies();
+  const token = cookieStore.get(MY_TOKEN_KEY())?.value;
+  if (!token) return {};
+  try {
+    const { data } = await apiServer.get(
+      `/me/projects/${namespace}/${repoId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    return data.project;
+  } catch {
+    return {};
+  }
+}
+
+export default async function ProjectNamespacePage({
+  params,
+}: {
+  params: Promise<{ namespace: string; repoId: string }>;
+}) {
+  const { namespace, repoId } = await params;
+  const data = await getProject(namespace, repoId);
+  if (!data?.pages) {
+    redirect("/projects");
+  }
+  return (
+    <AppEditor project={data} pages={data.pages} images={data.images ?? []} />
+  );
+}

app/projects/new/page.tsx

@@ -0,0 +1,5 @@
+import { AppEditor } from "@/components/editor";
+
+export default function ProjectsNewPage() {
+  return <AppEditor isNew />;
+}

app/sitemap.ts

@@ -1,28 +0,0 @@
-import { MetadataRoute } from 'next';
-
-export default function sitemap(): MetadataRoute.Sitemap {
-  const baseUrl = 'https://deepsite.hf.co';
-  
-  return [
-    {
-      url: baseUrl,
-      lastModified: new Date(),
-      changeFrequency: 'daily',
-      priority: 1,
-    },
-    {
-      url: `${baseUrl}/new`,
-      lastModified: new Date(),
-      changeFrequency: 'weekly',
-      priority: 0.8,
-    },
-    {
-      url: `${baseUrl}/auth`,
-      lastModified: new Date(),
-      changeFrequency: 'monthly',
-      priority: 0.5,
-    },
-    // Note: Dynamic project routes will be handled by Next.js automatically
-    // but you can add specific high-priority project pages here if needed
-  ];
-}

assets/globals.css

@@ -112,10 +112,6 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
-body {
-  @apply scroll-smooth
-}
-
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -148,224 +144,3 @@ body {
 .matched-line {
   @apply bg-sky-500/30;
 }
-
-/* Fast liquid deformation animations */
-@keyframes liquidBlob1 {
-  0%, 100% {
-    border-radius: 40% 60% 50% 50%;
-    transform: scaleX(1) scaleY(1) rotate(0deg);
-  }
-  12.5% {
-    border-radius: 20% 80% 70% 30%;
-    transform: scaleX(1.6) scaleY(0.4) rotate(25deg);
-  }
-  25% {
-    border-radius: 80% 20% 30% 70%;
-    transform: scaleX(0.5) scaleY(2.1) rotate(-15deg);
-  }
-  37.5% {
-    border-radius: 30% 70% 80% 20%;
-    transform: scaleX(1.8) scaleY(0.6) rotate(40deg);
-  }
-  50% {
-    border-radius: 70% 30% 20% 80%;
-    transform: scaleX(0.4) scaleY(1.9) rotate(-30deg);
-  }
-  62.5% {
-    border-radius: 25% 75% 60% 40%;
-    transform: scaleX(1.5) scaleY(0.7) rotate(55deg);
-  }
-  75% {
-    border-radius: 75% 25% 40% 60%;
-    transform: scaleX(0.6) scaleY(1.7) rotate(-10deg);
-  }
-  87.5% {
-    border-radius: 50% 50% 75% 25%;
-    transform: scaleX(1.3) scaleY(0.8) rotate(35deg);
-  }
-}
-
-@keyframes liquidBlob2 {
-  0%, 100% {
-    border-radius: 60% 40% 50% 50%;
-    transform: scaleX(1) scaleY(1) rotate(12deg);
-  }
-  16% {
-    border-radius: 15% 85% 60% 40%;
-    transform: scaleX(0.3) scaleY(2.3) rotate(50deg);
-  }
-  32% {
-    border-radius: 85% 15% 25% 75%;
-    transform: scaleX(2.0) scaleY(0.5) rotate(-20deg);
-  }
-  48% {
-    border-radius: 30% 70% 85% 15%;
-    transform: scaleX(0.4) scaleY(1.8) rotate(70deg);
-  }
-  64% {
-    border-radius: 70% 30% 15% 85%;
-    transform: scaleX(1.9) scaleY(0.6) rotate(-35deg);
-  }
-  80% {
-    border-radius: 40% 60% 70% 30%;
-    transform: scaleX(0.7) scaleY(1.6) rotate(45deg);
-  }
-}
-
-@keyframes liquidBlob3 {
-  0%, 100% {
-    border-radius: 50% 50% 40% 60%;
-    transform: scaleX(1) scaleY(1) rotate(0deg);
-  }
-  20% {
-    border-radius: 10% 90% 75% 25%;
-    transform: scaleX(2.2) scaleY(0.3) rotate(-45deg);
-  }
-  40% {
-    border-radius: 90% 10% 20% 80%;
-    transform: scaleX(0.4) scaleY(2.5) rotate(60deg);
-  }
-  60% {
-    border-radius: 25% 75% 90% 10%;
-    transform: scaleX(1.7) scaleY(0.5) rotate(-25deg);
-  }
-  80% {
-    border-radius: 75% 25% 10% 90%;
-    transform: scaleX(0.6) scaleY(2.0) rotate(80deg);
-  }
-}
-
-@keyframes liquidBlob4 {
-  0%, 100% {
-    border-radius: 45% 55% 50% 50%;
-    transform: scaleX(1) scaleY(1) rotate(-15deg);
-  }
-  14% {
-    border-radius: 90% 10% 65% 35%;
-    transform: scaleX(0.2) scaleY(2.8) rotate(35deg);
-  }
-  28% {
-    border-radius: 10% 90% 20% 80%;
-    transform: scaleX(2.4) scaleY(0.4) rotate(-50deg);
-  }
-  42% {
-    border-radius: 35% 65% 90% 10%;
-    transform: scaleX(0.3) scaleY(2.1) rotate(70deg);
-  }
-  56% {
-    border-radius: 80% 20% 10% 90%;
-    transform: scaleX(2.0) scaleY(0.5) rotate(-40deg);
-  }
-  70% {
-    border-radius: 20% 80% 55% 45%;
-    transform: scaleX(0.5) scaleY(1.9) rotate(55deg);
-  }
-  84% {
-    border-radius: 65% 35% 80% 20%;
-    transform: scaleX(1.6) scaleY(0.6) rotate(-25deg);
-  }
-}
-
-/* Fast flowing movement animations */
-@keyframes liquidFlow1 {
-  0%, 100% { transform: translate(0, 0); }
-  16% { transform: translate(60px, -40px); }
-  32% { transform: translate(-45px, -70px); }
-  48% { transform: translate(80px, 25px); }
-  64% { transform: translate(-30px, 60px); }
-  80% { transform: translate(50px, -20px); }
-}
-
-@keyframes liquidFlow2 {
-  0%, 100% { transform: translate(0, 0); }
-  20% { transform: translate(-70px, 50px); }
-  40% { transform: translate(90px, -30px); }
-  60% { transform: translate(-40px, -55px); }
-  80% { transform: translate(65px, 35px); }
-}
-
-@keyframes liquidFlow3 {
-  0%, 100% { transform: translate(0, 0); }
-  12% { transform: translate(-50px, -60px); }
-  24% { transform: translate(40px, -20px); }
-  36% { transform: translate(-30px, 70px); }
-  48% { transform: translate(70px, 20px); }
-  60% { transform: translate(-60px, -35px); }
-  72% { transform: translate(35px, 55px); }
-  84% { transform: translate(-25px, -45px); }
-}
-
-@keyframes liquidFlow4 {
-  0%, 100% { transform: translate(0, 0); }
-  14% { transform: translate(50px, 60px); }
-  28% { transform: translate(-80px, -40px); }
-  42% { transform: translate(30px, -90px); }
-  56% { transform: translate(-55px, 45px); }
-  70% { transform: translate(75px, -25px); }
-  84% { transform: translate(-35px, 65px); }
-}
-
-/* Light sweep animation for buttons */
-@keyframes lightSweep {
-  0% {
-    transform: translateX(-150%);
-    opacity: 0;
-  }
-  8% {
-    opacity: 0.3;
-  }
-  25% {
-    opacity: 0.8;
-  }
-  42% {
-    opacity: 0.3;
-  }
-  50% {
-    transform: translateX(150%);
-    opacity: 0;
-  }
-  58% {
-    opacity: 0.3;
-  }
-  75% {
-    opacity: 0.8;
-  }
-  92% {
-    opacity: 0.3;
-  }
-  100% {
-    transform: translateX(-150%);
-    opacity: 0;
-  }
-}
-
-.light-sweep {
-  position: relative;
-  overflow: hidden;
-}
-
-.light-sweep::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 300%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    transparent 20%,
-    rgba(56, 189, 248, 0.1) 35%,
-    rgba(56, 189, 248, 0.2) 45%,
-    rgba(255, 255, 255, 0.2) 50%,
-    rgba(168, 85, 247, 0.2) 55%,
-    rgba(168, 85, 247, 0.1) 65%,
-    transparent 80%,
-    transparent 100%
-  );
-  animation: lightSweep 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  pointer-events: none;
-  z-index: 1;
-  filter: blur(1px);
-}

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "assets/globals.css",
+    "css": "app/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""

components/animated-blobs/index.tsx

@@ -1,34 +0,0 @@
-export function AnimatedBlobs() {
-  return (
-    <div className="absolute inset-0 pointer-events-none -z-[1]">
-      <div
-        className="w-full h-full bg-gradient-to-r from-purple-500 to-pink-500 opacity-10 blur-3xl"
-        style={{
-          animation:
-            "liquidBlob1 4s ease-in-out infinite, liquidFlow1 6s ease-in-out infinite",
-        }}
-      />
-      <div
-        className="w-2/3 h-3/4 bg-gradient-to-r from-blue-500 to-teal-500 opacity-24 blur-3xl absolute -top-20 right-10"
-        style={{
-          animation:
-            "liquidBlob2 5s ease-in-out infinite, liquidFlow2 7s ease-in-out infinite",
-        }}
-      />
-      <div
-        className="w-1/2 h-1/2 bg-gradient-to-r from-amber-500 to-rose-500 opacity-20 blur-3xl absolute bottom-0 left-10"
-        style={{
-          animation:
-            "liquidBlob3 3.5s ease-in-out infinite, liquidFlow3 8s ease-in-out infinite",
-        }}
-      />
-      <div
-        className="w-48 h-48 bg-gradient-to-r from-cyan-500 to-indigo-500 opacity-20 blur-3xl absolute top-1/3 right-1/3"
-        style={{
-          animation:
-            "liquidBlob4 4.5s ease-in-out infinite, liquidFlow4 6.5s ease-in-out infinite",
-        }}
-      />
-    </div>
-  );
-}

components/animated-text/index.tsx

@@ -1,123 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-
-interface AnimatedTextProps {
-  className?: string;
-}
-
-export function AnimatedText({ className = "" }: AnimatedTextProps) {
-  const [displayText, setDisplayText] = useState("");
-  const [currentSuggestionIndex, setCurrentSuggestionIndex] = useState(0);
-  const [isTyping, setIsTyping] = useState(true);
-  const [showCursor, setShowCursor] = useState(true);
-  const [lastTypedIndex, setLastTypedIndex] = useState(-1);
-  const [animationComplete, setAnimationComplete] = useState(false);
-
-  // Randomize suggestions on each component mount
-  const [suggestions] = useState(() => {
-    const baseSuggestions = [
-      "create a stunning portfolio!",
-      "build a tic tac toe game!",
-      "design a website for my restaurant!",
-      "make a sleek landing page!",
-      "build an e-commerce store!",
-      "create a personal blog!",
-      "develop a modern dashboard!",
-      "design a company website!",
-      "build a todo app!",
-      "create an online gallery!",
-      "make a contact form!",
-      "build a weather app!",
-    ];
-
-    // Fisher-Yates shuffle algorithm
-    const shuffled = [...baseSuggestions];
-    for (let i = shuffled.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
-    }
-
-    return shuffled;
-  });
-
-  useEffect(() => {
-    if (animationComplete) return;
-
-    let timeout: NodeJS.Timeout;
-
-    const typeText = () => {
-      const currentSuggestion = suggestions[currentSuggestionIndex];
-
-      if (isTyping) {
-        if (displayText.length < currentSuggestion.length) {
-          setDisplayText(currentSuggestion.slice(0, displayText.length + 1));
-          setLastTypedIndex(displayText.length);
-          timeout = setTimeout(typeText, 80);
-        } else {
-          // Finished typing, wait then start erasing
-          setLastTypedIndex(-1);
-          timeout = setTimeout(() => {
-            setIsTyping(false);
-          }, 2000);
-        }
-      }
-    };
-
-    timeout = setTimeout(typeText, 100);
-    return () => clearTimeout(timeout);
-  }, [
-    displayText,
-    currentSuggestionIndex,
-    isTyping,
-    suggestions,
-    animationComplete,
-  ]);
-
-  // Cursor blinking effect
-  useEffect(() => {
-    if (animationComplete) {
-      setShowCursor(false);
-      return;
-    }
-
-    const cursorInterval = setInterval(() => {
-      setShowCursor((prev) => !prev);
-    }, 600);
-
-    return () => clearInterval(cursorInterval);
-  }, [animationComplete]);
-
-  useEffect(() => {
-    if (lastTypedIndex >= 0) {
-      const timeout = setTimeout(() => {
-        setLastTypedIndex(-1);
-      }, 400);
-
-      return () => clearTimeout(timeout);
-    }
-  }, [lastTypedIndex]);
-
-  return (
-    <p className={`font-mono ${className}`}>
-      Hey DeepSite,&nbsp;
-      {displayText.split("").map((char, index) => (
-        <span
-          key={`${currentSuggestionIndex}-${index}`}
-          className={`transition-colors duration-300 ${
-            index === lastTypedIndex ? "text-neutral-100" : ""
-          }`}
-        >
-          {char}
-        </span>
-      ))}
-      <span
-        className={`${
-          showCursor ? "opacity-100" : "opacity-0"
-        } transition-opacity`}
-      >
-        |
-      </span>
-    </p>
-  );
-}

components/contexts/app-context.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
-import { useMount } from "react-use";
-import { toast } from "sonner";
-import { usePathname, useRouter } from "next/navigation";
 
 import { useUser } from "@/hooks/useUser";
-import { ProjectType, User } from "@/types";
+import { usePathname, useRouter } from "next/navigation";
+import { useMount } from "react-use";
+import { UserContext } from "@/components/contexts/user-context";
+import { User } from "@/types";
+import { toast } from "sonner";
 import { useBroadcastChannel } from "@/lib/useBroadcastChannel";
 
 export default function AppContext({
@@ -15,7 +16,6 @@ export default function AppContext({
   children: React.ReactNode;
   me?: {
     user: User | null;
-    projects: ProjectType[];
     errCode: number | null;
   };
 }) {
@@ -49,5 +49,9 @@ export default function AppContext({
     }
   });
 
-  return children;
+  return (
+    <UserContext value={{ user, loading, logout } as any}>
+      {children}
+    </UserContext>
+  );
 }

components/contexts/login-context.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import React, { createContext, useContext, useState, ReactNode } from "react";
-import { LoginModal } from "@/components/login-modal";
-import { Page } from "@/types";
-
-interface LoginContextType {
-  isOpen: boolean;
-  openLoginModal: (options?: LoginModalOptions) => void;
-  closeLoginModal: () => void;
-}
-
-interface LoginModalOptions {
-  pages?: Page[];
-  title?: string;
-  prompt?: string;
-  description?: string;
-}
-
-const LoginContext = createContext<LoginContextType | undefined>(undefined);
-
-export function LoginProvider({ children }: { children: ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [modalOptions, setModalOptions] = useState<LoginModalOptions>({});
-
-  const openLoginModal = (options: LoginModalOptions = {}) => {
-    setModalOptions(options);
-    setIsOpen(true);
-  };
-
-  const closeLoginModal = () => {
-    setIsOpen(false);
-    setModalOptions({});
-  };
-
-  const value = {
-    isOpen,
-    openLoginModal,
-    closeLoginModal,
-  };
-
-  return (
-    <LoginContext.Provider value={value}>
-      {children}
-      <LoginModal
-        open={isOpen}
-        onClose={setIsOpen}
-        title={modalOptions.title}
-        prompt={modalOptions.prompt}
-        description={modalOptions.description}
-      />
-    </LoginContext.Provider>
-  );
-}
-
-export function useLoginModal() {
-  const context = useContext(LoginContext);
-  if (context === undefined) {
-    throw new Error("useLoginModal must be used within a LoginProvider");
-  }
-  return context;
-}

components/contexts/pro-context.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import React, { createContext, useContext, useState, ReactNode } from "react";
-import { ProModal } from "@/components/pro-modal";
-import { Page } from "@/types";
-import { useEditor } from "@/hooks/useEditor";
-
-interface ProContextType {
-  isOpen: boolean;
-  openProModal: (pages: Page[]) => void;
-  closeProModal: () => void;
-}
-
-const ProContext = createContext<ProContextType | undefined>(undefined);
-
-export function ProProvider({ children }: { children: ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const { pages } = useEditor();
-
-  const openProModal = () => {
-    setIsOpen(true);
-  };
-
-  const closeProModal = () => {
-    setIsOpen(false);
-  };
-
-  const value = {
-    isOpen,
-    openProModal,
-    closeProModal,
-  };
-
-  return (
-    <ProContext.Provider value={value}>
-      {children}
-      <ProModal open={isOpen} onClose={setIsOpen} pages={pages} />
-    </ProContext.Provider>
-  );
-}
-
-export function useProModal() {
-  const context = useContext(ProContext);
-  if (context === undefined) {
-    throw new Error("useProModal must be used within a ProProvider");
-  }
-  return context;
-}

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

@@ -1,97 +0,0 @@
-import { useState } from "react";
-import { useLocalStorage } from "react-use";
-import { ArrowUp, Dice6 } from "lucide-react";
-import { useRouter } from "next/navigation";
-
-import { Button } from "@/components/ui/button";
-import { PromptBuilder } from "./prompt-builder";
-import { EnhancedSettings } from "@/types";
-import { Settings } from "./settings";
-import classNames from "classnames";
-import { PROMPTS_FOR_AI } from "@/lib/prompts";
-
-export const FakeAskAi = () => {
-  const router = useRouter();
-  const [prompt, setPrompt] = useState("");
-  const [openProvider, setOpenProvider] = useState(false);
-  const [enhancedSettings, setEnhancedSettings, removeEnhancedSettings] =
-    useLocalStorage<EnhancedSettings>("deepsite-enhancedSettings", {
-      isActive: true,
-      primaryColor: undefined,
-      secondaryColor: undefined,
-      theme: undefined,
-    });
-  const [, setPromptStorage] = useLocalStorage("prompt", "");
-  const [randomPromptLoading, setRandomPromptLoading] = useState(false);
-
-  const callAi = async () => {
-    setPromptStorage(prompt);
-    router.push("/new");
-  };
-
-  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 max-w-xl mx-auto">
-      <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">
-        <div className="w-full relative flex items-start justify-between pr-4 pt-4">
-          <textarea
-            className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 px-4 pb-4 resize-none"
-            placeholder="Ask DeepSite anything..."
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !e.shiftKey) {
-                callAi();
-              }
-            }}
-          />
-          <Button
-            size="iconXs"
-            variant="outline"
-            className="!rounded-md"
-            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">
-            <PromptBuilder
-              enhancedSettings={enhancedSettings!}
-              setEnhancedSettings={setEnhancedSettings}
-            />
-            <Settings
-              open={openProvider}
-              isFollowUp={false}
-              error=""
-              onClose={setOpenProvider}
-            />
-          </div>
-          <div className="flex items-center justify-end gap-2">
-            <Button
-              size="iconXs"
-              variant="outline"
-              className="!rounded-md"
-              onClick={() => callAi()}
-            >
-              <ArrowUp className="size-4" />
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

components/editor/ask-ai/follow-up-tooltip.tsx

@@ -0,0 +1,36 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Info } from "lucide-react";
+
+export const FollowUpTooltip = () => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Info className="size-3 text-neutral-300 cursor-pointer" />
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="!rounded-2xl !p-0 min-w-xs text-center overflow-hidden"
+      >
+        <header className="bg-neutral-950 px-4 py-3 border-b border-neutral-700/70">
+          <p className="text-base text-neutral-200 font-semibold">
+            ⚡ Faster, Smarter Updates
+          </p>
+        </header>
+        <main className="p-4">
+          <p className="text-neutral-300 text-sm">
+            Using the Diff-Patch system, allow DeepSite to intelligently update
+            your project without rewritting the entire codebase.
+          </p>
+          <p className="text-neutral-500 text-sm mt-2">
+            This means faster updates, less data usage, and a more efficient
+            development process.
+          </p>
+        </main>
+      </PopoverContent>
+    </Popover>
+  );
+};

components/editor/ask-ai/index.tsx

@@ -1,94 +1,150 @@
-import { useRef, useState } from "react";
+"use client";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useMemo, useRef } from "react";
 import classNames from "classnames";
-import { ArrowUp, ChevronDown, CircleStop, Dice6 } from "lucide-react";
-import { useLocalStorage, useUpdateEffect, useMount } from "react-use";
 import { toast } from "sonner";
+import { useLocalStorage, useUpdateEffect } from "react-use";
+import { ArrowUp, ChevronDown, Crosshair } from "lucide-react";
+import { FaStopCircle } from "react-icons/fa";
 
-import { useAi } from "@/hooks/useAi";
-import { useEditor } from "@/hooks/useEditor";
-import { EnhancedSettings, Project } from "@/types";
-import { SelectedFiles } from "@/components/editor/ask-ai/selected-files";
-import { SelectedHtmlElement } from "@/components/editor/ask-ai/selected-html-element";
-import { AiLoading } from "@/components/editor/ask-ai/loading";
+import ProModal from "@/components/pro-modal";
 import { Button } from "@/components/ui/button";
-import { Uploader } from "@/components/editor/ask-ai/uploader";
+import { MODELS } from "@/lib/providers";
+import { HtmlHistory, Page, Project } from "@/types";
+// import { InviteFriends } from "@/components/invite-friends";
+import { Settings } from "@/components/editor/ask-ai/settings";
+import { LoginModal } from "@/components/login-modal";
 import { ReImagine } from "@/components/editor/ask-ai/re-imagine";
-import { Selector } from "@/components/editor/ask-ai/selector";
-import { PromptBuilder } from "@/components/editor/ask-ai/prompt-builder";
-import { useUser } from "@/hooks/useUser";
-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";
+import Loading from "@/components/loading";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
+import { TooltipContent } from "@radix-ui/react-tooltip";
+import { SelectedHtmlElement } from "./selected-html-element";
+import { FollowUpTooltip } from "./follow-up-tooltip";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
+import { useCallAi } from "@/hooks/useCallAi";
+import { SelectedFiles } from "./selected-files";
+import { Uploader } from "./uploader";
 
-export const AskAi = ({
-  project,
+export function AskAI({
   isNew,
+  project,
+  images,
+  currentPage,
+  previousPrompts,
   onScrollToBottom,
+  isAiWorking,
+  setisAiWorking,
+  isEditableModeEnabled = false,
+  pages,
+  htmlHistory,
+  selectedElement,
+  setSelectedElement,
+  selectedFiles,
+  setSelectedFiles,
+  setIsEditableModeEnabled,
+  onNewPrompt,
+  onSuccess,
+  setPages,
+  setCurrentPage,
 }: {
-  project?: Project;
-  files?: string[];
+  project?: Project | null;
+  currentPage: Page;
+  images?: string[];
+  pages: Page[];
+  onScrollToBottom: () => void;
+  previousPrompts: string[];
+  isAiWorking: boolean;
+  onNewPrompt: (prompt: string) => void;
+  htmlHistory?: HtmlHistory[];
+  setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
   isNew?: boolean;
-  onScrollToBottom?: () => void;
-}) => {
-  const { user, projects } = useUser();
-  const { isSameHtml, isUploading, pages, isLoadingProject } = useEditor();
-  const {
-    isAiWorking,
-    isThinking,
-    selectedFiles,
-    setSelectedFiles,
-    selectedElement,
-    setSelectedElement,
-    setIsThinking,
-    callAiNewProject,
-    callAiFollowUp,
-    setModel,
-    selectedModel,
-    audio: hookAudio,
-    cancelRequest,
-  } = useAi(onScrollToBottom);
-  const { openLoginModal } = useLoginModal();
-  const { openProModal } = useProModal();
+  onSuccess: (page: Page[], p: string, n?: number[][]) => void;
+  isEditableModeEnabled: boolean;
+  setIsEditableModeEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedElement?: HTMLElement | null;
+  setSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+  selectedFiles: string[];
+  setSelectedFiles: React.Dispatch<React.SetStateAction<string[]>>;
+  setPages: React.Dispatch<React.SetStateAction<Page[]>>;
+  setCurrentPage: React.Dispatch<React.SetStateAction<string>>;
+}) {
+  const refThink = useRef<HTMLDivElement | null>(null);
+
+  const [open, setOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const [provider, setProvider] = useLocalStorage("provider", "auto");
+  const [model, setModel] = useLocalStorage("model", MODELS[0].value);
   const [openProvider, setOpenProvider] = useState(false);
   const [providerError, setProviderError] = useState("");
-  const refThink = useRef<HTMLDivElement>(null);
-
-  const [enhancedSettings, setEnhancedSettings, removeEnhancedSettings] =
-    useLocalStorage<EnhancedSettings>("deepsite-enhancedSettings", {
-      isActive: false,
-      primaryColor: undefined,
-      secondaryColor: undefined,
-      theme: undefined,
-    });
-  const [promptStorage, , removePromptStorage] = useLocalStorage("prompt", "");
-
-  const [isFollowUp, setIsFollowUp] = useState(true);
-  const [prompt, setPrompt] = useState(
-    promptStorage && promptStorage.trim() !== "" ? promptStorage : ""
-  );
-  const [think, setThink] = useState("");
+  const [openProModal, setOpenProModal] = useState(false);
   const [openThink, setOpenThink] = useState(false);
-  const [randomPromptLoading, setRandomPromptLoading] = useState(false);
+  const [isThinking, setIsThinking] = useState(true);
+  const [think, setThink] = useState("");
+  const [isFollowUp, setIsFollowUp] = useState(true);
+  const [isUploading, setIsUploading] = useState(false);
+  const [files, setFiles] = useState<string[]>(images ?? []);
 
-  useMount(() => {
-    if (promptStorage && promptStorage.trim() !== "") {
-      callAi();
-    }
+  const {
+    callAiNewProject,
+    callAiFollowUp,
+    callAiNewPage,
+    stopController,
+    audio: hookAudio,
+  } = useCallAi({
+    onNewPrompt,
+    onSuccess,
+    onScrollToBottom,
+    setPages,
+    setCurrentPage,
+    currentPage,
+    pages,
+    isAiWorking,
+    setisAiWorking,
   });
 
+  const selectedModel = useMemo(() => {
+    return MODELS.find((m: { value: string }) => m.value === model);
+  }, [model]);
+
   const callAi = async (redesignMarkdown?: string) => {
-    removePromptStorage();
-    if (user && !user.isPro && projects.length >= MAX_FREE_PROJECTS)
-      return openProModal([]);
     if (isAiWorking) return;
     if (!redesignMarkdown && !prompt.trim()) return;
 
     if (isFollowUp && !redesignMarkdown && !isSameHtml) {
-      if (!user) return openLoginModal({ prompt });
-      const result = await callAiFollowUp(prompt, enhancedSettings, isNew);
+      // Use follow-up function for existing projects
+      const selectedElementHtml = selectedElement
+        ? selectedElement.outerHTML
+        : "";
 
+      const result = await callAiFollowUp(
+        prompt,
+        model,
+        provider,
+        previousPrompts,
+        selectedElementHtml,
+        selectedFiles
+      );
+
+      if (result?.error) {
+        handleError(result.error, result.message);
+        return;
+      }
+
+      if (result?.success) {
+        setPrompt("");
+      }
+    } else if (isFollowUp && pages.length > 1 && isSameHtml) {
+      const result = await callAiNewPage(
+        prompt,
+        model,
+        provider,
+        currentPage.path,
+        [
+          ...(previousPrompts ?? []),
+          ...(htmlHistory?.map((h) => h.prompt) ?? []),
+        ]
+      );
       if (result?.error) {
         handleError(result.error, result.message);
         return;
@@ -100,9 +156,13 @@ export const AskAi = ({
     } else {
       const result = await callAiNewProject(
         prompt,
-        enhancedSettings,
+        model,
+        provider,
         redesignMarkdown,
-        !!user
+        handleThink,
+        () => {
+          setIsThinking(false);
+        }
       );
 
       if (result?.error) {
@@ -112,24 +172,30 @@ export const AskAi = ({
 
       if (result?.success) {
         setPrompt("");
-        // if (selectedModel?.isThinker) {
-        //   setModel(MODELS[0].value);
-        // }
+        if (selectedModel?.isThinker) {
+          setModel(MODELS[0].value);
+        }
       }
     }
   };
 
+  const handleThink = (think: string) => {
+    setThink(think);
+    setIsThinking(true);
+    setOpenThink(true);
+  };
+
   const handleError = (error: string, message?: string) => {
     switch (error) {
       case "login_required":
-        openLoginModal();
+        setOpen(true);
         break;
       case "provider_required":
         setOpenProvider(true);
         setProviderError(message || "");
         break;
       case "pro_required":
-        openProModal([]);
+        setOpenProModal(true);
         break;
       case "api_error":
         toast.error(message || "An error occurred");
@@ -148,19 +214,19 @@ export const AskAi = ({
     }
   }, [think]);
 
-  const randomPrompt = () => {
-    setRandomPromptLoading(true);
-    setTimeout(() => {
-      setPrompt(
-        PROMPTS_FOR_AI[Math.floor(Math.random() * PROMPTS_FOR_AI.length)]
-      );
-      setRandomPromptLoading(false);
-    }, 400);
-  };
+  useUpdateEffect(() => {
+    if (!isThinking) {
+      setOpenThink(false);
+    }
+  }, [isThinking]);
+
+  const isSameHtml = useMemo(() => {
+    return isTheSameHtml(currentPage.html);
+  }, [currentPage.html]);
 
   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">
+    <div className="px-3">
+      <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-10 w-full group">
         {think && (
           <div className="w-full border-b border-neutral-700 relative overflow-hidden">
             <header
@@ -202,7 +268,7 @@ export const AskAi = ({
           files={selectedFiles}
           isAiWorking={isAiWorking}
           onDelete={(file) =>
-            setSelectedFiles(selectedFiles.filter((f) => f !== file))
+            setSelectedFiles((prev) => prev.filter((f) => f !== file))
           }
         />
         {selectedElement && (
@@ -215,41 +281,92 @@ export const AskAi = ({
           </div>
         )}
         <div className="w-full relative flex items-center justify-between">
-          {(isAiWorking || isUploading || isThinking || isLoadingProject) && (
+          {(isAiWorking || isUploading) && (
             <div className="absolute bg-neutral-800 top-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-start pt-3.5 justify-between max-lg:text-sm">
-              <AiLoading
-                text={
-                  isLoadingProject
-                    ? "Fetching your project..."
-                    : isUploading
-                    ? "Uploading images..."
-                    : isAiWorking && !isSameHtml
-                    ? "DeepSite is working..."
-                    : "DeepSite is thinking..."
-                }
-              />
+              <div className="flex items-center justify-start gap-2">
+                <Loading overlay={false} className="!size-4 opacity-50" />
+                <p className="text-neutral-400 text-sm">
+                  {isUploading ? (
+                    "Uploading images..."
+                  ) : isAiWorking && !isSameHtml ? (
+                    "AI is working..."
+                  ) : (
+                    <span className="inline-flex">
+                      {[
+                        "D",
+                        "e",
+                        "e",
+                        "p",
+                        "S",
+                        "i",
+                        "t",
+                        "e",
+                        " ",
+                        "i",
+                        "s",
+                        " ",
+                        "T",
+                        "h",
+                        "i",
+                        "n",
+                        "k",
+                        "i",
+                        "n",
+                        "g",
+                        ".",
+                        ".",
+                        ".",
+                        " ",
+                        "W",
+                        "a",
+                        "i",
+                        "t",
+                        " ",
+                        "a",
+                        " ",
+                        "m",
+                        "o",
+                        "m",
+                        "e",
+                        "n",
+                        "t",
+                        ".",
+                        ".",
+                        ".",
+                      ].map((char, index) => (
+                        <span
+                          key={index}
+                          className="bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse"
+                          style={{
+                            animationDelay: `${index * 0.1}s`,
+                            animationDuration: "1.3s",
+                            animationIterationCount: "infinite",
+                          }}
+                        >
+                          {char === " " ? "\u00A0" : char}
+                        </span>
+                      ))}
+                    </span>
+                  )}
+                </p>
+              </div>
               {isAiWorking && (
-                <Button
-                  size="iconXs"
-                  variant="outline"
-                  className="!rounded-md mr-0.5"
-                  onClick={cancelRequest}
+                <div
+                  className="text-xs text-neutral-400 px-1 py-0.5 rounded-md border border-neutral-600 flex items-center justify-center gap-1.5 bg-neutral-800 hover:brightness-110 transition-all duration-200 cursor-pointer"
+                  onClick={stopController}
                 >
-                  <CircleStop className="size-4" />
-                </Button>
+                  <FaStopCircle />
+                  Stop generation
+                </div>
               )}
             </div>
           )}
           <textarea
-            disabled={
-              isAiWorking || isUploading || isThinking || isLoadingProject
-            }
+            disabled={isAiWorking}
             className={classNames(
               "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none",
               {
-                "!pt-2.5":
-                  selectedElement &&
-                  !(isAiWorking || isUploading || isThinking),
+                "!pt-2.5": selectedElement && !isAiWorking,
               }
             )}
             placeholder={
@@ -267,51 +384,112 @@ 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">
-            <PromptBuilder
-              enhancedSettings={enhancedSettings!}
-              setEnhancedSettings={setEnhancedSettings}
+          <div className="flex-1 flex items-center justify-start gap-1.5">
+            <Uploader
+              pages={pages}
+              onLoading={setIsUploading}
+              isLoading={isUploading}
+              onFiles={setFiles}
+              onSelectFile={(file) => {
+                if (selectedFiles.includes(file)) {
+                  setSelectedFiles((prev) => prev.filter((f) => f !== file));
+                } else {
+                  setSelectedFiles((prev) => [...prev, file]);
+                }
+              }}
+              files={files}
+              selectedFiles={selectedFiles}
+              project={project}
             />
+            {isNew && <ReImagine onRedesign={(md) => callAi(md)} />}
+            {!isSameHtml && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="xs"
+                    variant={isEditableModeEnabled ? "default" : "outline"}
+                    onClick={() => {
+                      setIsEditableModeEnabled?.(!isEditableModeEnabled);
+                    }}
+                    className={classNames("h-[28px]", {
+                      "!text-neutral-400 hover:!text-neutral-200 !border-neutral-600 !hover:!border-neutral-500":
+                        !isEditableModeEnabled,
+                    })}
+                  >
+                    <Crosshair className="size-4" />
+                    Edit
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent
+                  align="start"
+                  className="bg-neutral-950 text-xs text-neutral-200 py-1 px-2 rounded-md -translate-y-0.5"
+                >
+                  Select an element on the page to ask DeepSite edit it
+                  directly.
+                </TooltipContent>
+              </Tooltip>
+            )}
+            {/* <InviteFriends /> */}
+          </div>
+          <div className="flex items-center justify-end gap-2">
             <Settings
+              provider={provider as string}
+              model={model as string}
+              onChange={setProvider}
+              onModelChange={setModel}
               open={openProvider}
               error={providerError}
               isFollowUp={!isSameHtml && isFollowUp}
               onClose={setOpenProvider}
             />
-            {!isNew && <Uploader project={project} />}
-            {isNew && <ReImagine onRedesign={(md) => callAi(md)} />}
-            {!isNew && !isSameHtml && <Selector />}
-          </div>
-          <div className="flex items-center justify-end gap-2">
             <Button
               size="iconXs"
-              variant="outline"
-              className="!rounded-md"
-              disabled={
-                isAiWorking || isUploading || isThinking || !prompt.trim()
-              }
+              disabled={isAiWorking || !prompt.trim()}
               onClick={() => callAi()}
             >
               <ArrowUp className="size-4" />
             </Button>
           </div>
         </div>
+        <LoginModal open={open} onClose={() => setOpen(false)} pages={pages} />
+        <ProModal
+          pages={pages}
+          open={openProModal}
+          onClose={() => setOpenProModal(false)}
+        />
+        {pages.length === 1 && (
+          <div className="border border-sky-500/20 bg-sky-500/40 hover:bg-sky-600 transition-all duration-200 text-sky-500 pl-2 pr-4 py-1.5 text-xs rounded-full absolute top-0 -translate-y-[calc(100%+8px)] left-0 max-w-max flex items-center justify-start gap-2">
+            <span className="rounded-full text-[10px] font-semibold bg-white text-neutral-900 px-1.5 py-0.5">
+              NEW
+            </span>
+            <p className="text-sm text-neutral-100">
+              DeepSite can now create multiple pages at once. Try it!
+            </p>
+          </div>
+        )}
+        {!isSameHtml && (
+          <div className="absolute top-0 right-0 -translate-y-[calc(100%+8px)] select-none text-xs text-neutral-400 flex items-center justify-center gap-2 bg-neutral-800 border border-neutral-700 rounded-md p-1 pr-2.5">
+            <label
+              htmlFor="diff-patch-checkbox"
+              className="flex items-center gap-1.5 cursor-pointer"
+            >
+              <Checkbox
+                id="diff-patch-checkbox"
+                checked={isFollowUp}
+                onCheckedChange={(e) => {
+                  if (e === true && !isSameHtml && selectedModel?.isThinker) {
+                    setModel(MODELS[0].value);
+                  }
+                  setIsFollowUp(e === true);
+                }}
+              />
+              Diff-Patch Update
+            </label>
+            <FollowUpTooltip />
+          </div>
+        )}
       </div>
       <audio ref={hookAudio} id="audio" className="hidden">
         <source src="/success.mp3" type="audio/mpeg" />
@@ -319,4 +497,4 @@ export const AskAi = ({
       </audio>
     </div>
   );
-};
+}

components/editor/ask-ai/loading.tsx

@@ -1,68 +0,0 @@
-"use client";
-import Loading from "@/components/loading";
-import { useState, useEffect } from "react";
-import { useInterval } from "react-use";
-
-const TEXTS = [
-  "Teaching pixels to dance with style...",
-  "AI is having a creative breakthrough...",
-  "Channeling digital vibes into pure code...",
-  "Summoning the website spirits...",
-  "Brewing some algorithmic magic...",
-  "Composing a symphony of divs and spans...",
-  "Riding the wave of computational creativity...",
-  "Aligning the stars for perfect design...",
-  "Training circus animals to write CSS...",
-  "Launching ideas into the digital stratosphere...",
-];
-
-export const AiLoading = ({
-  text,
-  className,
-}: {
-  text?: string;
-  className?: string;
-}) => {
-  const [selectedText, setSelectedText] = useState(
-    text ?? TEXTS[0] // Start with first text to avoid hydration issues
-  );
-
-  // Set random text on client-side only to avoid hydration mismatch
-  useEffect(() => {
-    if (!text) {
-      setSelectedText(TEXTS[Math.floor(Math.random() * TEXTS.length)]);
-    }
-  }, [text]);
-
-  useInterval(() => {
-    if (!text) {
-      if (selectedText === TEXTS[TEXTS.length - 1]) {
-        setSelectedText(TEXTS[0]);
-      } else {
-        setSelectedText(TEXTS[TEXTS.indexOf(selectedText) + 1]);
-      }
-    }
-  }, 12000);
-  return (
-    <div className={`flex items-center justify-start gap-2 ${className}`}>
-      <Loading overlay={false} className="!size-5 opacity-50" />
-      <p className="text-neutral-400 text-sm">
-        <span className="inline-flex">
-          {selectedText.split("").map((char, index) => (
-            <span
-              key={index}
-              className="bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse"
-              style={{
-                animationDelay: `${index * 0.1}s`,
-                animationDuration: "1.3s",
-                animationIterationCount: "infinite",
-              }}
-            >
-              {char === " " ? "\u00A0" : char}
-            </span>
-          ))}
-        </span>
-      </p>
-    </div>
-  );
-};

components/editor/ask-ai/prompt-builder/content-modal.tsx

@@ -1,196 +0,0 @@
-import classNames from "classnames";
-import { ChevronRight, RefreshCcw } from "lucide-react";
-import { useState } from "react";
-import { TailwindColors } from "./tailwind-colors";
-import { Switch } from "@/components/ui/switch";
-import { Button } from "@/components/ui/button";
-import { Themes } from "./themes";
-import { EnhancedSettings } from "@/types";
-
-export const ContentModal = ({
-  enhancedSettings,
-  setEnhancedSettings,
-}: {
-  enhancedSettings: EnhancedSettings;
-  setEnhancedSettings: (settings: EnhancedSettings) => void;
-}) => {
-  const [collapsed, setCollapsed] = useState(["colors", "theme"]);
-  return (
-    <main className="overflow-x-hidden max-h-[50dvh] overflow-y-auto">
-      <section className="w-full border-b border-neutral-800/80 px-6 py-3.5 sticky top-0 bg-neutral-900 z-10">
-        <div className="flex items-center justify-between gap-3">
-          <p className="text-base font-semibold text-neutral-200">
-            Allow DeepSite to enhance your prompt
-          </p>
-          <Switch
-            checked={enhancedSettings.isActive}
-            onCheckedChange={() =>
-              setEnhancedSettings({
-                ...enhancedSettings,
-                isActive: !enhancedSettings.isActive,
-              })
-            }
-          />
-        </div>
-        <p className="text-sm text-neutral-500 mt-2">
-          While using DeepSite enhanced prompt, you'll get better results. We'll
-          add more details and features to your request.
-        </p>
-        <div className="text-sm text-sky-500 mt-3 bg-gradient-to-r from-sky-400/15 to-purple-400/15 rounded-md px-3 py-2 border border-white/10">
-          <p className="text-transparent bg-gradient-to-r from-sky-400 to-purple-400 bg-clip-text">
-            You can also use the custom properties below to set specific
-            information.
-          </p>
-        </div>
-      </section>
-      <section className="py-3.5 border-b border-neutral-800/80">
-        <div
-          className={classNames(
-            "flex items-center justify-start gap-3 px-4 cursor-pointer text-neutral-400 hover:text-neutral-200",
-            {
-              "!text-neutral-200": collapsed.includes("colors"),
-            }
-          )}
-          onClick={() =>
-            setCollapsed((prev) => {
-              if (prev.includes("colors")) {
-                return prev.filter((item) => item !== "colors");
-              }
-              return [...prev, "colors"];
-            })
-          }
-        >
-          <ChevronRight className="size-4" />
-          <p className="text-base font-semibold">Colors</p>
-        </div>
-        {collapsed.includes("colors") && (
-          <div className="mt-4 space-y-4">
-            <article className="w-full">
-              <div className="flex items-center justify-start gap-2 px-5">
-                <p className="text-xs font-medium uppercase text-neutral-400">
-                  Primary Color
-                </p>
-                <Button
-                  variant="bordered"
-                  size="xss"
-                  className={`${
-                    enhancedSettings.primaryColor ? "" : "opacity-0"
-                  }`}
-                  onClick={() =>
-                    setEnhancedSettings({
-                      ...enhancedSettings,
-                      primaryColor: undefined,
-                    })
-                  }
-                >
-                  <RefreshCcw className="size-2.5" />
-                  Reset
-                </Button>
-              </div>
-              <div className="text-muted-foreground text-sm mt-4">
-                <TailwindColors
-                  value={enhancedSettings.primaryColor}
-                  onChange={(value) =>
-                    setEnhancedSettings({
-                      ...enhancedSettings,
-                      primaryColor: value,
-                    })
-                  }
-                />
-              </div>
-            </article>
-            <article className="w-full">
-              <div className="flex items-center justify-start gap-2 px-5">
-                <p className="text-xs font-medium uppercase text-neutral-400">
-                  Secondary Color
-                </p>
-                <Button
-                  variant="bordered"
-                  size="xss"
-                  className={`${
-                    enhancedSettings.secondaryColor ? "" : "opacity-0"
-                  }`}
-                  onClick={() =>
-                    setEnhancedSettings({
-                      ...enhancedSettings,
-                      secondaryColor: undefined,
-                    })
-                  }
-                >
-                  <RefreshCcw className="size-2.5" />
-                  Reset
-                </Button>
-              </div>
-              <div className="text-muted-foreground text-sm mt-4">
-                <TailwindColors
-                  value={enhancedSettings.secondaryColor}
-                  onChange={(value) =>
-                    setEnhancedSettings({
-                      ...enhancedSettings,
-                      secondaryColor: value,
-                    })
-                  }
-                />
-              </div>
-            </article>
-          </div>
-        )}
-      </section>
-      <section className="py-3.5 border-b border-neutral-800/80">
-        <div
-          className={classNames(
-            "flex items-center justify-start gap-3 px-4 cursor-pointer text-neutral-400 hover:text-neutral-200",
-            {
-              "!text-neutral-200": collapsed.includes("theme"),
-            }
-          )}
-          onClick={() =>
-            setCollapsed((prev) => {
-              if (prev.includes("theme")) {
-                return prev.filter((item) => item !== "theme");
-              }
-              return [...prev, "theme"];
-            })
-          }
-        >
-          <ChevronRight className="size-4" />
-          <p className="text-base font-semibold">Theme</p>
-        </div>
-        {collapsed.includes("theme") && (
-          <article className="w-full mt-4">
-            <div className="flex items-center justify-start gap-2 px-5">
-              <p className="text-xs font-medium uppercase text-neutral-400">
-                Theme
-              </p>
-              <Button
-                variant="bordered"
-                size="xss"
-                className={`${enhancedSettings.theme ? "" : "opacity-0"}`}
-                onClick={() =>
-                  setEnhancedSettings({
-                    ...enhancedSettings,
-                    theme: undefined,
-                  })
-                }
-              >
-                <RefreshCcw className="size-2.5" />
-                Reset
-              </Button>
-            </div>
-            <div className="text-muted-foreground text-sm mt-4">
-              <Themes
-                value={enhancedSettings.theme}
-                onChange={(value) =>
-                  setEnhancedSettings({
-                    ...enhancedSettings,
-                    theme: value,
-                  })
-                }
-              />
-            </div>
-          </article>
-        )}
-      </section>
-    </main>
-  );
-};

components/editor/ask-ai/prompt-builder/index.tsx

@@ -1,68 +0,0 @@
-import { useState } from "react";
-import { WandSparkles } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { useEditor } from "@/hooks/useEditor";
-import { useAi } from "@/hooks/useAi";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { ContentModal } from "./content-modal";
-import { EnhancedSettings } from "@/types";
-
-export const PromptBuilder = ({
-  enhancedSettings,
-  setEnhancedSettings,
-}: {
-  enhancedSettings: EnhancedSettings;
-  setEnhancedSettings: (settings: EnhancedSettings) => void;
-}) => {
-  const { globalAiLoading } = useAi();
-  const { globalEditorLoading } = useEditor();
-
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <Button
-        size="xs"
-        variant="outline"
-        className="!rounded-md !border-white/10 !bg-gradient-to-r from-sky-400/15 to-purple-400/15 light-sweep hover:brightness-110"
-        disabled={globalAiLoading || globalEditorLoading}
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
-        <WandSparkles className="size-3.5 text-sky-500 relative z-10" />
-        <span className="text-transparent bg-gradient-to-r from-sky-400 to-purple-400 bg-clip-text relative z-10">
-          Enhance
-        </span>
-      </Button>
-      <Dialog open={open} onOpenChange={() => setOpen(false)}>
-        <DialogContent className="sm:max-w-xl !p-0 !rounded-3xl !bg-neutral-900 !border-neutral-800/80 !gap-0">
-          <DialogTitle className="px-6 py-3.5 border-b border-neutral-800">
-            <div className="flex items-center justify-start gap-2 text-neutral-200 text-base font-medium">
-              <WandSparkles className="size-3.5" />
-              <p>Enhance Prompt</p>
-            </div>
-          </DialogTitle>
-          <ContentModal
-            enhancedSettings={enhancedSettings}
-            setEnhancedSettings={setEnhancedSettings}
-          />
-          <DialogFooter className="px-6 py-3.5 border-t border-neutral-800">
-            <Button
-              variant="bordered"
-              size="default"
-              onClick={() => setOpen(false)}
-            >
-              Close
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};

components/editor/ask-ai/prompt-builder/tailwind-colors.tsx

@@ -1,58 +0,0 @@
-import classNames from "classnames";
-import { useRef } from "react";
-
-import { TAILWIND_COLORS } from "@/lib/prompt-builder";
-import { useMount } from "react-use";
-
-export const TailwindColors = ({
-  value,
-  onChange,
-}: {
-  value: string | undefined;
-  onChange: (value: string) => void;
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useMount(() => {
-    if (ref.current) {
-      if (value) {
-        const color = ref.current.querySelector(`[data-color="${value}"]`);
-        if (color) {
-          color.scrollIntoView({ inline: "center" });
-        }
-      }
-    }
-  });
-  return (
-    <div
-      ref={ref}
-      className="flex items-center justify-start gap-3 overflow-x-auto px-5 scrollbar-hide"
-    >
-      {TAILWIND_COLORS.map((color) => (
-        <div
-          key={color}
-          className={classNames(
-            "flex flex-col items-center justify-center p-3 size-16 min-w-16 gap-2 rounded-lg border border-neutral-800 bg-neutral-800/30 hover:brightness-120 cursor-pointer",
-            {
-              "!border-neutral-700 !bg-neutral-800/80 hover:!brightness-100":
-                value === color,
-            }
-          )}
-          data-color={color}
-          onClick={() => onChange(color)}
-        >
-          <div
-            className={`w-4 h-4 min-w-4 min-h-4 rounded-xl ${
-              ["white", "black"].includes(color)
-                ? `bg-${color}`
-                : `bg-${color}-500`
-            }`}
-          />
-          <p className="text-xs capitalize text-neutral-200 truncate">
-            {color}
-          </p>
-        </div>
-      ))}
-    </div>
-  );
-};

components/editor/ask-ai/prompt-builder/themes.tsx

@@ -1,48 +0,0 @@
-import { Theme } from "@/types";
-import classNames from "classnames";
-import { Moon, Sun } from "lucide-react";
-import { useRef } from "react";
-
-export const Themes = ({
-  value,
-  onChange,
-}: {
-  value: Theme;
-  onChange: (value: Theme) => void;
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  return (
-    <div
-      ref={ref}
-      className="flex items-center justify-start gap-3 overflow-x-auto px-5 scrollbar-hide"
-    >
-      <div
-        className={classNames(
-          "flex flex-col items-center justify-center p-3 size-16 min-w-32 gap-2 rounded-lg border border-neutral-800 bg-neutral-800/30 hover:brightness-120 cursor-pointer",
-          {
-            "!border-neutral-700 !bg-neutral-800/80 hover:!brightness-100":
-              value === "light",
-          }
-        )}
-        onClick={() => onChange("light")}
-      >
-        <Sun className="size-4 text-amber-500" />
-        <p className="text-xs capitalize text-neutral-200 truncate">Light</p>
-      </div>
-      <div
-        className={classNames(
-          "flex flex-col items-center justify-center p-3 size-16 min-w-32 gap-2 rounded-lg border border-neutral-800 bg-neutral-800/30 hover:brightness-120 cursor-pointer",
-          {
-            "!border-neutral-700 !bg-neutral-800/80 hover:!brightness-100":
-              value === "dark",
-          }
-        )}
-        onClick={() => onChange("dark")}
-      >
-        <Moon className="size-4 text-indigo-500" />
-        <p className="text-xs capitalize text-neutral-200 truncate">Dark</p>
-      </div>
-    </div>
-  );
-};

components/editor/ask-ai/re-imagine.tsx

@@ -11,8 +11,6 @@ import {
 import { Input } from "@/components/ui/input";
 import Loading from "@/components/loading";
 import { api } from "@/lib/api";
-import { useAi } from "@/hooks/useAi";
-import { useEditor } from "@/hooks/useEditor";
 
 export function ReImagine({
   onRedesign,
@@ -22,8 +20,6 @@ export function ReImagine({
   const [url, setUrl] = useState<string>("");
   const [open, setOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const { globalAiLoading } = useAi();
-  const { globalEditorLoading } = useEditor();
 
   const checkIfUrlIsValid = (url: string) => {
     const urlPattern = new RegExp(
@@ -63,13 +59,11 @@ export function ReImagine({
       <form>
         <PopoverTrigger asChild>
           <Button
-            size="xs"
-            variant={open ? "default" : "outline"}
-            className="!rounded-md"
-            disabled={globalAiLoading || globalEditorLoading}
+            size="iconXs"
+            variant="outline"
+            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
           >
-            <Paintbrush className="size-3.5" />
-            Redesign
+            <Paintbrush className="size-4" />
           </Button>
         </PopoverTrigger>
         <PopoverContent

components/editor/ask-ai/selector.tsx

@@ -1,41 +0,0 @@
-import classNames from "classnames";
-import { Crosshair } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useAi } from "@/hooks/useAi";
-import { useEditor } from "@/hooks/useEditor";
-
-export const Selector = () => {
-  const { globalEditorLoading } = useEditor();
-  const { isEditableModeEnabled, setIsEditableModeEnabled, globalAiLoading } =
-    useAi();
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          size="xs"
-          variant={isEditableModeEnabled ? "default" : "outline"}
-          onClick={() => {
-            setIsEditableModeEnabled?.(!isEditableModeEnabled);
-          }}
-          disabled={globalAiLoading || globalEditorLoading}
-          className="!rounded-md"
-        >
-          <Crosshair className="size-3.5" />
-          Edit
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent
-        align="start"
-        className="bg-neutral-950 text-xs text-neutral-200 py-1 px-2 rounded-md -translate-y-0.5"
-      >
-        Select an element on the page to ask DeepSite edit it directly.
-      </TooltipContent>
-    </Tooltip>
-  );
-};

components/editor/ask-ai/settings.tsx

@@ -1,5 +1,6 @@
-"use client";
 import classNames from "classnames";
+import { PiGearSixFill } from "react-icons/pi";
+import { RiCheckboxCircleFill } from "react-icons/ri";
 
 import {
   Popover,
@@ -17,273 +18,185 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { useMemo, useState, useEffect } from "react";
+import { useMemo } from "react";
 import { useUpdateEffect } from "react-use";
 import Image from "next/image";
-import { Brain, BrainIcon, CheckCheck, ChevronDown } from "lucide-react";
-import { useAi } from "@/hooks/useAi";
-import { getProviders } from "@/lib/get-providers";
-import Loading from "@/components/loading";
 
 export function Settings({
   open,
   onClose,
+  provider,
+  model,
   error,
   isFollowUp = false,
+  onChange,
+  onModelChange,
 }: {
   open: boolean;
+  provider: string;
+  model: string;
   error?: string;
   isFollowUp?: boolean;
   onClose: React.Dispatch<React.SetStateAction<boolean>>;
+  onChange: (provider: string) => void;
+  onModelChange: (model: string) => void;
 }) {
-  const {
-    model,
-    provider,
-    setProvider,
-    setModel,
-    selectedModel,
-    globalAiLoading,
-  } = useAi();
-  const [isMounted, setIsMounted] = useState(false);
-  const [loadingProviders, setLoadingProviders] = useState(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  // const modelAvailableProviders = useMemo(() => {
-  //   const availableProviders = MODELS.find(
-  //     (m: { value: string }) => m.value === model
-  //   )?.providers;
-  //   if (!availableProviders) return Object.keys(PROVIDERS);
-  //   return Object.keys(PROVIDERS).filter((id) =>
-  //     availableProviders.includes(id)
-  //   );
-  // }, [model]);
+  const modelAvailableProviders = useMemo(() => {
+    const availableProviders = MODELS.find(
+      (m: { value: string }) => m.value === model
+    )?.providers;
+    if (!availableProviders) return Object.keys(PROVIDERS);
+    return Object.keys(PROVIDERS).filter((id) =>
+      availableProviders.includes(id)
+    );
+  }, [model]);
 
   useUpdateEffect(() => {
-    if (provider !== "auto" && !providers.includes(provider as string)) {
-      setProvider("auto");
+    if (provider !== "auto" && !modelAvailableProviders.includes(provider)) {
+      onChange("auto");
     }
   }, [model, provider]);
 
-  const formattedModels = useMemo(() => {
-    const lists: ((typeof MODELS)[0] | { isCategory: true; name: string })[] =
-      [];
-    const keys = new Set<string>();
-    MODELS.forEach((model) => {
-      if (!keys.has(model.companyName)) {
-        lists.push({
-          isCategory: true,
-          name: model.companyName,
-          logo: model.logo,
-        });
-        keys.add(model.companyName);
-      }
-      lists.push(model);
-    });
-    return lists;
-  }, [MODELS]);
-
-  const [providers, setProviders] = useState<any[]>([]);
-  const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
-
-  useEffect(() => {
-    const loadProviders = async () => {
-      setLoadingProviders(true);
-      if (!model) {
-        setProviders([]);
-        return;
-      }
-      try {
-        const result = await getProviders(model);
-        setProviders(result);
-      } catch (error) {
-        console.error("Failed to load providers:", error);
-        setProviders([]);
-      } finally {
-        setLoadingProviders(false);
-      }
-    };
-
-    loadProviders();
-  }, [model]);
-
-  const handleImageError = (providerId: string) => {
-    setFailedImages((prev) => new Set([...prev, providerId]));
-  };
-
   return (
-    <Popover open={open} onOpenChange={onClose}>
-      <PopoverTrigger asChild>
-        <Button
-          variant={open ? "default" : "outline"}
-          className="!rounded-md"
-          disabled={globalAiLoading || loadingProviders}
-          size="xs"
+    <div className="">
+      <Popover open={open} onOpenChange={onClose}>
+        <PopoverTrigger asChild>
+          <Button variant="black" size="sm">
+            <PiGearSixFill className="size-4" />
+            Settings
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="!rounded-2xl p-0 !w-96 overflow-hidden !bg-neutral-900"
+          align="center"
         >
-          {/* <Brain className="size-3.5" /> */}
-          {selectedModel?.logo && (
-            <Image
-              src={selectedModel?.logo}
-              alt={selectedModel.label}
-              className={`size-3.5 ${open ? "" : "filter invert"}`}
-              width={20}
-              height={20}
-            />
-          )}
-          <span className="truncate max-w-[120px]">
-            {isMounted
-              ? selectedModel?.label?.split(" ").join("-").toLowerCase()
-              : "..."}
-          </span>
-          <ChevronDown className="size-3.5" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="!rounded-2xl p-0 !w-96 overflow-hidden !bg-neutral-900"
-        align="center"
-      >
-        <header className="flex items-center justify-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
-          Customize Settings
-        </header>
-        <main className="px-4 pt-5 pb-6 space-y-5">
-          {error !== "" && (
-            <p className="text-red-500 text-sm font-medium mb-2 flex items-center justify-between bg-red-500/10 p-2 rounded-md">
-              {error}
-            </p>
-          )}
-          <label className="block">
-            <p className="text-neutral-300 text-sm mb-2.5">Choose a model</p>
-            <Select defaultValue={model} onValueChange={setModel}>
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select a model" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {formattedModels.map((item: any) => {
-                    if ("isCategory" in item) {
-                      return (
-                        <SelectLabel
-                          key={item.name}
-                          className="flex items-center gap-1"
+          <header className="flex items-center justify-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
+            Customize Settings
+          </header>
+          <main className="px-4 pt-5 pb-6 space-y-5">
+            {error !== "" && (
+              <p className="text-red-500 text-sm font-medium mb-2 flex items-center justify-between bg-red-500/10 p-2 rounded-md">
+                {error}
+              </p>
+            )}
+            <label className="block">
+              <p className="text-neutral-300 text-sm mb-2.5">Choose a model</p>
+              <Select defaultValue={model} onValueChange={onModelChange}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select a model" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Models</SelectLabel>
+                    {MODELS.map(
+                      ({
+                        value,
+                        label,
+                        isNew = false,
+                        isThinker = false,
+                      }: {
+                        value: string;
+                        label: string;
+                        isNew?: boolean;
+                        isThinker?: boolean;
+                      }) => (
+                        <SelectItem
+                          key={value}
+                          value={value}
+                          className=""
+                          disabled={isThinker && isFollowUp}
                         >
-                          {item.name}
-                        </SelectLabel>
-                      );
-                    }
-                    const {
-                      value,
-                      label,
-                      isNew = false,
-                      isThinker = false,
-                    } = item;
-                    return (
-                      <SelectItem
-                        key={value}
-                        value={value}
-                        className=""
-                        disabled={isThinker && isFollowUp}
-                      >
-                        {label}
-                        {isNew && (
-                          <span className="text-xs bg-gradient-to-br from-sky-400 to-sky-600 text-white rounded-full px-1.5 py-0.5">
-                            New
-                          </span>
-                        )}
-                      </SelectItem>
-                    );
-                  })}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </label>
-          {/* {isFollowUp && (
-            <div className="bg-amber-500/10 border-amber-500/10 p-3 text-xs text-amber-500 border rounded-lg">
-              Note: You can&apos;t use a Thinker model for follow-up requests.
-              We automatically switch to the default model for you.
-            </div>
-          )} */}
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-neutral-300 text-sm mb-1.5">
-                  Use auto-provider
-                </p>
-                <p className="text-xs text-neutral-400/70">
-                  We&apos;ll automatically select the best provider for you
-                  based on your prompt.
-                </p>
+                          {label}
+                          {isNew && (
+                            <span className="text-xs bg-gradient-to-br from-sky-400 to-sky-600 text-white rounded-full px-1.5 py-0.5">
+                              New
+                            </span>
+                          )}
+                        </SelectItem>
+                      )
+                    )}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </label>
+            {isFollowUp && (
+              <div className="bg-amber-500/10 border-amber-500/10 p-3 text-xs text-amber-500 border rounded-lg">
+                Note: You can&apos;t use a Thinker model for follow-up requests.
+                We automatically switch to the default model for you.
               </div>
-              <div
-                className={classNames(
-                  "bg-neutral-700 rounded-full min-w-10 w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
-                  {
-                    "!bg-sky-500": provider === "auto",
-                  }
-                )}
-                onClick={() => {
-                  const foundModel = MODELS.find(
-                    (m: { value: string }) => m.value === model
-                  );
-                  if (provider === "auto" && foundModel?.autoProvider) {
-                    setProvider(foundModel.autoProvider);
-                  } else {
-                    setProvider("auto");
-                  }
-                }}
-              >
+            )}
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-neutral-300 text-sm mb-1.5">
+                    Use auto-provider
+                  </p>
+                  <p className="text-xs text-neutral-400/70">
+                    We&apos;ll automatically select the best provider for you
+                    based on your prompt.
+                  </p>
+                </div>
                 <div
                   className={classNames(
-                    "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-neutral-200",
+                    "bg-neutral-700 rounded-full min-w-10 w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
                     {
-                      "translate-x-4": provider === "auto",
+                      "!bg-sky-500": provider === "auto",
                     }
                   )}
-                />
+                  onClick={() => {
+                    const foundModel = MODELS.find(
+                      (m: { value: string }) => m.value === model
+                    );
+                    if (provider === "auto" && foundModel?.autoProvider) {
+                      onChange(foundModel.autoProvider);
+                    } else {
+                      onChange("auto");
+                    }
+                  }}
+                >
+                  <div
+                    className={classNames(
+                      "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-neutral-200",
+                      {
+                        "translate-x-4": provider === "auto",
+                      }
+                    )}
+                  />
+                </div>
               </div>
-            </div>
-            <label className="block">
-              <p className="text-neutral-300 text-sm mb-2">
-                Inference Provider
-              </p>
-              <div className="grid grid-cols-2 gap-1.5 relative">
-                {loadingProviders ? (
-                  <Loading overlay={false} />
-                ) : (
-                  providers.map((id: string) => (
+              <label className="block">
+                <p className="text-neutral-300 text-sm mb-2">
+                  Inference Provider
+                </p>
+                <div className="grid grid-cols-2 gap-1.5">
+                  {modelAvailableProviders.map((id: string) => (
                     <Button
                       key={id}
                       variant={id === provider ? "default" : "secondary"}
                       size="sm"
                       onClick={() => {
-                        setProvider(id);
+                        onChange(id);
                       }}
                     >
-                      {failedImages.has(id) ? (
-                        <BrainIcon className="size-4 mr-2" />
-                      ) : (
-                        <Image
-                          src={`/providers/${id}.svg`}
-                          alt={id}
-                          className="size-5 mr-2"
-                          width={20}
-                          height={20}
-                          onError={() => handleImageError(id)}
-                        />
-                      )}
-                      {PROVIDERS?.[id as keyof typeof PROVIDERS]?.name || id}
+                      <Image
+                        src={`/providers/${id}.svg`}
+                        alt={PROVIDERS[id as keyof typeof PROVIDERS].name}
+                        className="size-5 mr-2"
+                        width={20}
+                        height={20}
+                      />
+                      {PROVIDERS[id as keyof typeof PROVIDERS].name}
                       {id === provider && (
-                        <CheckCheck className="ml-2 size-4 text-blue-500" />
+                        <RiCheckboxCircleFill className="ml-2 size-4 text-blue-500" />
                       )}
                     </Button>
-                  ))
-                )}
-              </div>
-            </label>
-          </div>
-        </main>
-      </PopoverContent>
-    </Popover>
+                  ))}
+                </div>
+              </label>
+            </div>
+          </main>
+        </PopoverContent>
+      </Popover>
+    </div>
   );
 }

components/editor/ask-ai/uploader.tsx

@@ -1,12 +1,5 @@
 import { useRef, useState } from "react";
-import {
-  CheckCircle,
-  ImageIcon,
-  Images,
-  Link,
-  Paperclip,
-  Upload,
-} from "lucide-react";
+import { Images, Upload } from "lucide-react";
 import Image from "next/image";
 
 import {
@@ -15,151 +8,196 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
-import { Project } from "@/types";
+import { Page, Project } from "@/types";
 import Loading from "@/components/loading";
+import { RiCheckboxCircleFill } from "react-icons/ri";
 import { useUser } from "@/hooks/useUser";
-import { useEditor } from "@/hooks/useEditor";
-import { useAi } from "@/hooks/useAi";
-import { useLoginModal } from "@/components/contexts/login-context";
+import { LoginModal } from "@/components/login-modal";
+import { DeployButtonContent } from "../deploy-button/content";
 
-export const Uploader = ({ project }: { project: Project | undefined }) => {
+export const Uploader = ({
+  pages,
+  onLoading,
+  isLoading,
+  onFiles,
+  onSelectFile,
+  selectedFiles,
+  files,
+  project,
+}: {
+  pages: Page[];
+  onLoading: (isLoading: boolean) => void;
+  isLoading: boolean;
+  files: string[];
+  onFiles: React.Dispatch<React.SetStateAction<string[]>>;
+  onSelectFile: (file: string) => void;
+  selectedFiles: string[];
+  project?: Project | null;
+}) => {
   const { user } = useUser();
-  const { openLoginModal } = useLoginModal();
-  const { uploadFiles, isUploading, files, globalEditorLoading } = useEditor();
-  const { selectedFiles, setSelectedFiles, globalAiLoading } = useAi();
 
   const [open, setOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  if (!user)
-    return (
-      <Button
-        size="xs"
-        variant="outline"
-        className="!rounded-md"
-        disabled={globalAiLoading || globalEditorLoading}
-        onClick={() => openLoginModal()}
-      >
-        <Paperclip className="size-3.5" />
-        Attach
-      </Button>
+  const uploadFiles = async (files: FileList | null) => {
+    if (!files) return;
+    if (!project) return;
+
+    onLoading(true);
+
+    const images = Array.from(files).filter((file) => {
+      return file.type.startsWith("image/");
+    });
+
+    const data = new FormData();
+    images.forEach((image) => {
+      data.append("images", image);
+    });
+
+    const response = await fetch(
+      `/api/me/projects/${project.space_id}/images`,
+      {
+        method: "POST",
+        body: data,
+      }
     );
+    if (response.ok) {
+      const data = await response.json();
+      onFiles((prev) => [...prev, ...data.uploadedFiles]);
+    }
+    onLoading(false);
+  };
 
-  return (
+  // TODO FIRST PUBLISH YOUR PROJECT TO UPLOAD IMAGES.
+  return user?.id ? (
     <Popover open={open} onOpenChange={setOpen}>
-      <form className="h-[24px]">
+      <form>
         <PopoverTrigger asChild>
           <Button
-            size="xs"
-            variant={open ? "default" : "outline"}
-            className="!rounded-md"
-            disabled={globalAiLoading || globalEditorLoading}
+            size="iconXs"
+            variant="outline"
+            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
           >
-            <Paperclip className="size-3.5" />
-            Attach
+            <Images className="size-4" />
           </Button>
         </PopoverTrigger>
         <PopoverContent
           align="start"
           className="!rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden"
         >
-          <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
-            <div className="flex items-center justify-center -space-x-4 mb-3">
-              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                🎨
-              </div>
-              <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
-                🖼️
-              </div>
-              <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                💻
-              </div>
-            </div>
-            <p className="text-xl font-semibold text-neutral-950">
-              Add Custom Images
-            </p>
-            <p className="text-sm text-neutral-500 mt-1.5">
-              Upload images to your project and use them with DeepSite!
-            </p>
-          </header>
-          <main className="space-y-4 p-5">
-            <div>
-              <p className="text-xs text-left text-neutral-700 mb-2">
-                Uploaded Images
-              </p>
-              {files?.length > 0 ? (
-                <div className="grid grid-cols-4 gap-1 flex-wrap max-h-40 overflow-y-auto">
-                  {files.map((file: string) => (
-                    <div
-                      key={file}
-                      className="select-none relative cursor-pointer bg-white rounded-md border-[2px] border-white hover:shadow-2xl transition-all duration-300"
-                      onClick={() =>
-                        setSelectedFiles(
-                          selectedFiles.includes(file)
-                            ? selectedFiles.filter((f) => f !== file)
-                            : [...selectedFiles, file]
-                        )
-                      }
-                    >
-                      <Image
-                        src={file}
-                        alt="uploaded image"
-                        width={56}
-                        height={56}
-                        className="object-cover w-full rounded-sm aspect-square"
-                      />
-                      {selectedFiles.includes(file) && (
-                        <div className="absolute top-0 right-0 h-full w-full flex items-center justify-center bg-black/50 rounded-md">
-                          <CheckCircle className="size-6 text-neutral-100" />
-                        </div>
-                      )}
-                    </div>
-                  ))}
+          {project?.space_id ? (
+            <>
+              <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+                <div className="flex items-center justify-center -space-x-4 mb-3">
+                  <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                    🎨
+                  </div>
+                  <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+                    🖼️
+                  </div>
+                  <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                    💻
+                  </div>
                 </div>
-              ) : (
-                <p className="text-sm text-muted-foreground font-mono flex flex-col items-center gap-1 pt-2">
-                  <ImageIcon className="size-4" />
-                  No images uploaded yet
+                <p className="text-xl font-semibold text-neutral-950">
+                  Add Custom Images
+                </p>
+                <p className="text-sm text-neutral-500 mt-1.5">
+                  Upload images to your project and use them with DeepSite!
                 </p>
-              )}
-            </div>
-            <div>
-              <p className="text-xs text-left text-neutral-700 mb-2">
-                Or import images from your computer
-              </p>
-              <Button
-                variant="black"
-                onClick={() => fileInputRef.current?.click()}
-                className="relative w-full"
-                disabled={isUploading}
-              >
-                {isUploading ? (
-                  <>
-                    <Loading
-                      overlay={false}
-                      className="ml-2 size-4 animate-spin"
-                    />
-                    Uploading image(s)...
-                  </>
-                ) : (
-                  <>
-                    <Upload className="size-4" />
-                    Upload Images
-                  </>
-                )}
-              </Button>
-              <input
-                ref={fileInputRef}
-                type="file"
-                className="hidden"
-                multiple
-                accept="image/*"
-                onChange={(e) => uploadFiles(e.target.files, project!)}
-              />
-            </div>
-          </main>
+              </header>
+              <main className="space-y-4 p-5">
+                <div>
+                  <p className="text-xs text-left text-neutral-700 mb-2">
+                    Uploaded Images
+                  </p>
+                  <div className="grid grid-cols-4 gap-1 flex-wrap max-h-40 overflow-y-auto">
+                    {files.map((file) => (
+                      <div
+                        key={file}
+                        className="select-none relative cursor-pointer bg-white rounded-md border-[2px] border-white hover:shadow-2xl transition-all duration-300"
+                        onClick={() => onSelectFile(file)}
+                      >
+                        <Image
+                          src={file}
+                          alt="uploaded image"
+                          width={56}
+                          height={56}
+                          className="object-cover w-full rounded-sm aspect-square"
+                        />
+                        {selectedFiles.includes(file) && (
+                          <div className="absolute top-0 right-0 h-full w-full flex items-center justify-center bg-black/50 rounded-md">
+                            <RiCheckboxCircleFill className="size-6 text-neutral-100" />
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div>
+                  <p className="text-xs text-left text-neutral-700 mb-2">
+                    Or import images from your computer
+                  </p>
+                  <Button
+                    variant="black"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="relative w-full"
+                  >
+                    {isLoading ? (
+                      <>
+                        <Loading
+                          overlay={false}
+                          className="ml-2 size-4 animate-spin"
+                        />
+                        Uploading image(s)...
+                      </>
+                    ) : (
+                      <>
+                        <Upload className="size-4" />
+                        Upload Images
+                      </>
+                    )}
+                  </Button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    className="hidden"
+                    multiple
+                    accept="image/*"
+                    onChange={(e) => uploadFiles(e.target.files)}
+                  />
+                </div>
+              </main>
+            </>
+          ) : (
+            <DeployButtonContent
+              pages={pages}
+              prompts={[]}
+              options={{
+                description: "Publish your project first to add custom images.",
+              }}
+            />
+          )}
         </PopoverContent>
       </form>
     </Popover>
+  ) : (
+    <>
+      <Button
+        size="iconXs"
+        variant="outline"
+        className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+        onClick={() => setOpen(true)}
+      >
+        <Images className="size-4" />
+      </Button>
+      <LoginModal
+        open={open}
+        onClose={() => setOpen(false)}
+        pages={pages}
+        title="Log In to add Custom Images"
+        description="Log In through your Hugging Face account to publish your project and increase your monthly free limit."
+      />
+    </>
   );
 };

components/editor/deploy-button/content.tsx

@@ -0,0 +1,111 @@
+import { Rocket } from "lucide-react";
+import Image from "next/image";
+
+import Loading from "@/components/loading";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import SpaceIcon from "@/assets/space.svg";
+import { Page } from "@/types";
+import { api } from "@/lib/api";
+import { toast } from "sonner";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export const DeployButtonContent = ({
+  pages,
+  options,
+  prompts,
+}: {
+  pages: Page[];
+  options?: {
+    title?: string;
+    description?: string;
+  };
+  prompts: string[];
+}) => {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  const [config, setConfig] = useState({
+    title: "",
+  });
+
+  const createSpace = async () => {
+    if (!config.title) {
+      toast.error("Please enter a title for your space.");
+      return;
+    }
+    setLoading(true);
+
+    try {
+      const res = await api.post("/me/projects", {
+        title: config.title,
+        pages,
+        prompts,
+      });
+      if (res.data.ok) {
+        router.push(`/projects/${res.data.path}?deploy=true`);
+      } else {
+        toast.error(res?.data?.error || "Failed to create space");
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+        <div className="flex items-center justify-center -space-x-4 mb-3">
+          <div className="size-9 rounded-full bg-amber-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+            🚀
+          </div>
+          <div className="size-11 rounded-full bg-red-200 shadow-2xl flex items-center justify-center z-2">
+            <Image src={SpaceIcon} alt="Space Icon" className="size-7" />
+          </div>
+          <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+            👻
+          </div>
+        </div>
+        <p className="text-xl font-semibold text-neutral-950">
+          Publish as Space!
+        </p>
+        <p className="text-sm text-neutral-500 mt-1.5">
+          {options?.description ??
+            "Save and Publish your project to a Space on the Hub. Spaces are a way to share your project with the world."}
+        </p>
+      </header>
+      <main className="space-y-4 p-6">
+        <div>
+          <p className="text-sm text-neutral-700 mb-2">
+            Choose a title for your space:
+          </p>
+          <Input
+            type="text"
+            placeholder="My Awesome Website"
+            value={config.title}
+            onChange={(e) => setConfig({ ...config, title: e.target.value })}
+            className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-neutral-700 mb-2">
+            Then, let&apos;s publish it!
+          </p>
+          <Button
+            variant="black"
+            onClick={createSpace}
+            className="relative w-full"
+            disabled={loading}
+          >
+            Publish Space <Rocket className="size-4" />
+            {loading && <Loading className="ml-2 size-4 animate-spin" />}
+          </Button>
+        </div>
+      </main>
+    </>
+  );
+};

components/editor/deploy-button/index.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import { MdSave } from "react-icons/md";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { LoginModal } from "@/components/login-modal";
+import { useUser } from "@/hooks/useUser";
+import { Page } from "@/types";
+import { DeployButtonContent } from "./content";
+
+export function DeployButton({
+  pages,
+  prompts,
+}: {
+  pages: Page[];
+  prompts: string[];
+}) {
+  const { user } = useUser();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex items-center justify-end gap-5">
+      <div className="relative flex items-center justify-end">
+        {user?.id ? (
+          <Popover>
+            <PopoverTrigger asChild>
+              <div>
+                <Button variant="default" className="max-lg:hidden !px-4">
+                  <MdSave className="size-4" />
+                  Publish your Project
+                </Button>
+                <Button variant="default" size="sm" className="lg:hidden">
+                  Publish
+                </Button>
+              </div>
+            </PopoverTrigger>
+            <PopoverContent
+              className="!rounded-2xl !p-0 !bg-white !border-neutral-200 min-w-xs text-center overflow-hidden"
+              align="end"
+            >
+              <DeployButtonContent pages={pages} prompts={prompts} />
+            </PopoverContent>
+          </Popover>
+        ) : (
+          <>
+            <Button
+              variant="default"
+              className="max-lg:hidden !px-4"
+              onClick={() => setOpen(true)}
+            >
+              <MdSave className="size-4" />
+              Publish your Project
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              className="lg:hidden"
+              onClick={() => setOpen(true)}
+            >
+              Publish
+            </Button>
+          </>
+        )}
+        <LoginModal
+          open={open}
+          onClose={() => setOpen(false)}
+          pages={pages}
+          title="Log In to publish your Project"
+          description="Log In through your Hugging Face account to publish your project and increase your monthly free limit."
+        />
+      </div>
+    </div>
+  );
+}

components/editor/footer/index.tsx

@@ -0,0 +1,150 @@
+import classNames from "classnames";
+import { FaMobileAlt } from "react-icons/fa";
+import { HelpCircle, LogIn, RefreshCcw, SparkleIcon } from "lucide-react";
+import { FaLaptopCode } from "react-icons/fa6";
+import { HtmlHistory, Page } from "@/types";
+import { Button } from "@/components/ui/button";
+import { MdAdd } from "react-icons/md";
+import { History } from "@/components/editor/history";
+import { UserMenu } from "@/components/user-menu";
+import { useUser } from "@/hooks/useUser";
+import Link from "next/link";
+import { useLocalStorage } from "react-use";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
+
+const DEVICES = [
+  {
+    name: "desktop",
+    icon: FaLaptopCode,
+  },
+  {
+    name: "mobile",
+    icon: FaMobileAlt,
+  },
+];
+
+export function Footer({
+  pages,
+  isNew = false,
+  htmlHistory,
+  setPages,
+  device,
+  setDevice,
+  iframeRef,
+}: {
+  pages: Page[];
+  isNew?: boolean;
+  htmlHistory?: HtmlHistory[];
+  device: "desktop" | "mobile";
+  setPages: (pages: Page[]) => void;
+  iframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  setDevice: React.Dispatch<React.SetStateAction<"desktop" | "mobile">>;
+}) {
+  const { user, openLoginWindow } = useUser();
+
+  const handleRefreshIframe = () => {
+    if (iframeRef?.current) {
+      const iframe = iframeRef.current;
+      const content = iframe.srcdoc;
+      iframe.srcdoc = "";
+      setTimeout(() => {
+        iframe.srcdoc = content;
+      }, 10);
+    }
+  };
+
+  const [, setStorage] = useLocalStorage("pages");
+  const handleClick = async () => {
+    if (pages && !isTheSameHtml(pages[0].html)) {
+      setStorage(pages);
+    }
+    openLoginWindow();
+  };
+
+  return (
+    <footer className="border-t bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 py-2 flex items-center justify-between sticky bottom-0 z-20">
+      <div className="flex items-center gap-2">
+        {user ? (
+          user?.isLocalUse ? (
+            <>
+              <div className="max-w-max bg-amber-500/10 rounded-full px-3 py-1 text-amber-500 border border-amber-500/20 text-sm font-semibold">
+                Local Usage
+              </div>
+            </>
+          ) : (
+            <UserMenu className="!p-1 !pr-3 !h-auto" />
+          )
+        ) : (
+          <Button size="sm" variant="default" onClick={handleClick}>
+            <LogIn className="text-sm" />
+            Log In
+          </Button>
+        )}
+        {user && !isNew && <p className="text-neutral-700">|</p>}
+        {!isNew && (
+          <Link href="/projects/new">
+            <Button size="sm" variant="secondary">
+              <MdAdd className="text-sm" />
+              New <span className="max-lg:hidden">Project</span>
+            </Button>
+          </Link>
+        )}
+        {htmlHistory && htmlHistory.length > 0 && (
+          <>
+            <p className="text-neutral-700">|</p>
+            <History history={htmlHistory} setPages={setPages} />
+          </>
+        )}
+      </div>
+      <div className="flex justify-end items-center gap-2.5">
+        <a
+          href="https://huggingface.co/spaces/victor/deepsite-gallery"
+          target="_blank"
+        >
+          <Button size="sm" variant="ghost">
+            <SparkleIcon className="size-3.5" />
+            <span className="max-lg:hidden">DeepSite Gallery</span>
+          </Button>
+        </a>
+        <a
+          target="_blank"
+          href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/157"
+        >
+          <Button size="sm" variant="outline">
+            <HelpCircle className="size-3.5" />
+            <span className="max-lg:hidden">Help</span>
+          </Button>
+        </a>
+        <Button size="sm" variant="outline" onClick={handleRefreshIframe}>
+          <RefreshCcw className="size-3.5" />
+          <span className="max-lg:hidden">Refresh Preview</span>
+        </Button>
+        <div className="flex items-center rounded-full p-0.5 bg-neutral-700/70 relative overflow-hidden z-0 max-lg:hidden gap-0.5">
+          <div
+            className={classNames(
+              "absolute left-0.5 top-0.5 rounded-full bg-white size-7 -z-[1] transition-all duration-200",
+              {
+                "translate-x-[calc(100%+2px)]": device === "mobile",
+              }
+            )}
+          />
+          {DEVICES.map((deviceItem) => (
+            <button
+              key={deviceItem.name}
+              className={classNames(
+                "rounded-full text-neutral-300 size-7 flex items-center justify-center cursor-pointer",
+                {
+                  "!text-black": device === deviceItem.name,
+                  "hover:bg-neutral-800": device !== deviceItem.name,
+                }
+              )}
+              onClick={() => setDevice(deviceItem.name as "desktop" | "mobile")}
+            >
+              <deviceItem.icon className="text-sm" />
+            </button>
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+}