Upload 11 files

.gitattributes

@@ -0,0 +1,11 @@
+public/bowl1.jpg filter=lfs diff=lfs merge=lfs -text
+public/bowl2.jpg filter=lfs diff=lfs merge=lfs -text
+public/bowl3.jpg filter=lfs diff=lfs merge=lfs -text
+public/local1.jpg filter=lfs diff=lfs merge=lfs -text
+public/local2.jpg filter=lfs diff=lfs merge=lfs -text
+public/local3.jpg filter=lfs diff=lfs merge=lfs -text
+public/portada1.JPG filter=lfs diff=lfs merge=lfs -text
+public/riva_way_negro.png filter=lfs diff=lfs merge=lfs -text
+public/style1.jpg filter=lfs diff=lfs merge=lfs -text
+public/style2.JPG filter=lfs diff=lfs merge=lfs -text
+public/style3.JPG filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,5 +1,5 @@
 ---
-title: DeepSite v3
+title: DeepSite v2
 emoji: 🐳
 colorFrom: blue
 colorTo: blue
@@ -11,11 +11,6 @@ short_description: Generate any application with DeepSeek
 models:
   - deepseek-ai/DeepSeek-V3-0324
   - deepseek-ai/DeepSeek-R1-0528
-  - Qwen/Qwen3-Coder-480B-A35B-Instruct
-  - moonshotai/Kimi-K2-Instruct
-  - moonshotai/Kimi-K2-Instruct-0905
-  - deepseek-ai/DeepSeek-V3.1
-  - deepseek-ai/DeepSeek-V3.1-Terminus
 ---
 
 # DeepSite 🐳
@@ -24,4 +19,4 @@ DeepSite is a coding platform powered by DeepSeek AI, designed to make coding sm
 
 ## 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,193 +1,44 @@
-// import { AskAi } from "@/components/space/ask-ai";
+import { AskAi } from "@/components/space/ask-ai";
 import { redirect } from "next/navigation";
-import { AnimatedText } from "@/components/animated-text";
-import { AnimatedBlobs } from "@/components/animated-blobs";
-
 export default function Home() {
-  redirect("/projects");
+  redirect("/projects/new");
   return (
-    <div className="">
+    <>
       <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-sky-100/10 bg-gradient-to-r from-sky-500/15 to-sky-sky-500/5 text-sm text-sky-300 px-3 py-1 max-w-max mx-auto mb-2">
-          ✨ DeepSite v3 is out!
+        <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-6xl lg:text-8xl font-semibold text-white font-mono max-w-4xl">
+        <h1 className="text-8xl font-semibold text-white font-mono max-w-4xl">
           Code your website with AI in seconds
         </h1>
-        <AnimatedText className="text-xl lg:text-2xl text-neutral-300/80 mt-4 text-center max-w-2xl" />
-        <div className="mt-14 max-w-2xl w-full mx-auto">{/* <AskAi /> */}</div>
-        <AnimatedBlobs />
-      </header>
-
-      <div id="features" className="min-h-screen py-20 px-6 relative">
-        <div className="container mx-auto"></div>
-        <div className="text-center mb-16">
-          <div className="rounded-full border border-neutral-100/10 bg-neutral-100/5 text-sm text-neutral-300 px-3 py-1 max-w-max mx-auto mb-4">
-            🚀 Powerful Features
-          </div>
-          <h2 className="text-4xl lg:text-6xl font-extrabold text-white font-mono mb-4">
-            Everything you need
-          </h2>
-          <p className="text-lg lg:text-xl text-neutral-300/80 max-w-2xl mx-auto">
-            Build, deploy, and scale your websites with cutting-edge features
-          </p>
+        <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>
-
-        {/* Bento Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
-          {/* Multi Pages */}
-          <div
-            className="lg:row-span-2 relative p-8 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-105 hover:rotate-1 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/20"
-            style={{ transformStyle: "preserve-3d" }}
-          >
-            <div className="relative z-10">
-              <div className="text-3xl lg:text-4xl mb-4">📄</div>
-              <h3 className="text-2xl lg:text-3xl font-bold text-white font-mono mb-3">
-                Multi Pages
-              </h3>
-              <p className="text-neutral-300/80 lg:text-lg mb-6">
-                Create complex websites with multiple interconnected pages.
-                Build everything from simple landing pages to full-featured web
-                applications with dynamic routing and navigation.
-              </p>
-              <div className="flex flex-wrap gap-2">
-                <span className="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm">
-                  Dynamic Routing
-                </span>
-                <span className="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm">
-                  Navigation
-                </span>
-                <span className="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-sm">
-                  SEO Ready
-                </span>
-              </div>
-            </div>
-            <div className="absolute -top-20 -right-20 w-40 h-40 bg-gradient-to-r from-purple-500 to-pink-500 opacity-20 blur-3xl rounded-full transition-all duration-700 ease-out group-hover:scale-[4] group-hover:opacity-30" />
-          </div>
-
-          {/* Auto Deploy */}
-          <div
-            className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-110 hover:-translate-y-4 hover:-rotate-3 hover:shadow-2xl hover:shadow-yellow-500/25"
-            style={{ perspective: "1000px", transformStyle: "preserve-3d" }}
-          >
-            <div className="relative z-10">
-              <div className="text-3xl mb-4">⚡</div>
-              <h3 className="text-2xl font-bold text-white font-mono mb-3">
-                Auto Deploy
-              </h3>
-              <p className="text-neutral-300/80 mb-4">
-                Push your changes and watch them go live instantly. No complex
-                CI/CD setup required.
-              </p>
-            </div>
-            <div className="absolute -bottom-10 -right-10 w-32 h-32 bg-gradient-to-r from-yellow-500 to-orange-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
-          </div>
-
-          {/* Free Hosting */}
-          <div className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-105 hover:rotate-2 hover:-translate-y-3 hover:shadow-xl hover:shadow-green-500/20">
-            <div className="relative z-10">
-              <div className="text-3xl mb-4">🌐</div>
-              <h3 className="text-2xl font-bold text-white font-mono mb-3">
-                Free Hosting
-              </h3>
-              <p className="text-neutral-300/80 mb-4">
-                Host your websites for free with global CDN and lightning-fast
-                performance.
-              </p>
-            </div>
-            <div className="absolute -top-10 -left-10 w-32 h-32 bg-gradient-to-r from-green-500 to-emerald-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
-          </div>
-
-          {/* Open Source Models */}
-          <div
-            className="lg:col-span-2 md:col-span-2 relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-600 hover:scale-[1.02] hover:rotate-y-6 hover:-translate-y-1 hover:shadow-2xl hover:shadow-cyan-500/20"
-            style={{ perspective: "1200px", transformStyle: "preserve-3d" }}
-          >
-            <div className="relative z-10">
-              <div className="text-3xl mb-4">🔓</div>
-              <h3 className="text-2xl font-bold text-white font-mono mb-3">
-                Open Source Models
-              </h3>
-              <p className="text-neutral-300/80 mb-4">
-                Powered by cutting-edge open source AI models. Transparent,
-                customizable, and community-driven development.
-              </p>
-              <div className="flex flex-wrap gap-2">
-                <span className="px-3 py-1 bg-cyan-500/20 text-cyan-300 rounded-full text-sm">
-                  Llama
-                </span>
-                <span className="px-3 py-1 bg-indigo-500/20 text-indigo-300 rounded-full text-sm">
-                  Mistral
-                </span>
-                <span className="px-3 py-1 bg-pink-500/20 text-pink-300 rounded-full text-sm">
-                  CodeLlama
-                </span>
-              </div>
-            </div>
-            <div className="absolute -bottom-10 right-10 w-32 h-32 bg-gradient-to-r from-cyan-500 to-indigo-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
-          </div>
-
-          {/* UX Focus */}
-          <div
-            className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-110 hover:rotate-3 hover:-translate-y-2 hover:rotate-x-6 hover:shadow-xl hover:shadow-rose-500/25"
-            style={{ transformStyle: "preserve-3d" }}
-          >
-            <div className="relative z-10">
-              <div className="text-3xl mb-4">✨</div>
-              <h3 className="text-2xl font-bold text-white font-mono mb-3">
-                Perfect UX
-              </h3>
-              <p className="text-neutral-300/80 mb-4">
-                Intuitive interface designed for developers and non-developers
-                alike.
-              </p>
-            </div>
-            <div className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-r from-rose-500 to-pink-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
-          </div>
-
-          {/* Hugging Face Integration */}
-          <div
-            className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-[1.08] hover:-rotate-2 hover:-translate-y-3 hover:rotate-y-8 hover:shadow-xl hover:shadow-amber-500/20"
-            style={{ perspective: "800px" }}
-          >
-            <div className="relative z-10">
-              <div className="text-3xl mb-4">🤗</div>
-              <h3 className="text-2xl font-bold text-white font-mono mb-3">
-                Hugging Face
-              </h3>
-              <p className="text-neutral-300/80 mb-4">
-                Seamless integration with Hugging Face models and datasets for
-                cutting-edge AI capabilities.
-              </p>
-            </div>
-            <div className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-r from-yellow-500 to-amber-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
-          </div>
-
-          {/* Performance */}
-          <div
-            className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-105 hover:rotate-1 hover:-translate-y-4 hover:rotate-x-8 hover:shadow-2xl hover:shadow-blue-500/25"
-            style={{ transformStyle: "preserve-3d" }}
-          >
-            <div className="relative z-10">
-              <div className="text-3xl mb-4">🚀</div>
-              <h3 className="text-2xl font-bold text-white font-mono mb-3">
-                Blazing Fast
-              </h3>
-              <p className="text-neutral-300/80 mb-4">
-                Optimized performance with edge computing and smart caching.
-              </p>
-            </div>
-            <div className="absolute -bottom-10 -right-10 w-32 h-32 bg-gradient-to-r from-blue-500 to-cyan-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
-          </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>
-
-      {/* Background Effects */}
-      <div className="absolute inset-0 pointer-events-none -z-[1]">
-        <div className="w-1/3 h-1/3 bg-gradient-to-r from-purple-500 to-pink-500 opacity-5 blur-3xl absolute top-20 left-10 rounded-full" />
-        <div className="w-1/4 h-1/4 bg-gradient-to-r from-blue-500 to-teal-500 opacity-10 blur-3xl absolute bottom-20 right-20 rounded-full" />
-        <div className="w-1/5 h-1/5 bg-gradient-to-r from-amber-500 to-rose-500 opacity-8 blur-3xl absolute top-1/2 left-1/3 rounded-full" />
+      <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>
-    </div>
+    </>
   );
 }

app/(public)/projects/page.tsx

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

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/api/{ask → ask-ai}/route.ts

@@ -4,27 +4,16 @@ 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,
   INITIAL_SYSTEM_PROMPT,
   MAX_REQUESTS_PER_IP,
-  NEW_PAGE_END,
-  NEW_PAGE_START,
   REPLACE_END,
   SEARCH_START,
-  UPDATE_PAGE_START,
-  UPDATE_PAGE_END,
-  PROMPT_FOR_PROJECT_NAME,
 } from "@/lib/prompts";
 import MY_TOKEN_KEY from "@/lib/get-cookie-name";
-import { Page } from "@/types";
-import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub";
-import { isAuthenticated } from "@/lib/auth";
-import { getBestProvider } from "@/lib/best-provider";
-import { rewritePrompt } from "@/lib/rewrite-prompt";
-import { COLORS } from "@/lib/utils";
 
 const ipAddresses = new Map();
 
@@ -33,7 +22,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, html } = body;
 
   if (!model || (!prompt && !redesignMarkdown)) {
     return NextResponse.json(
@@ -45,7 +34,6 @@ export async function POST(request: NextRequest) {
   const selectedModel = MODELS.find(
     (m) => m.value === model || m.label === model
   );
-
   if (!selectedModel) {
     return NextResponse.json(
       { ok: false, error: "Invalid model selected" },
@@ -97,19 +85,19 @@ export async function POST(request: NextRequest) {
     billTo = "huggingface";
   }
 
-  const selectedProvider = await getBestProvider(selectedModel.value, provider)
-
-  let rewrittenPrompt = prompt;
-
-  if (enhancedSettings.isActive) {
-    rewrittenPrompt = await rewritePrompt(prompt, enhancedSettings, { token, billTo }, selectedModel.value, selectedProvider);
-  }
+  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 {
+    // Create a stream response
     const encoder = new TextEncoder();
     const stream = new TransformStream();
     const writer = stream.writable.getWriter();
 
+    // Start the response
     const response = new NextResponse(stream.readable, {
       headers: {
         "Content-Type": "text/plain; charset=utf-8",
@@ -119,13 +107,13 @@ export async function POST(request: NextRequest) {
     });
 
     (async () => {
-      // let completeResponse = "";
+      let completeResponse = "";
       try {
         const client = new InferenceClient(token);
         const chatCompletion = client.chatCompletionStream(
           {
             model: selectedModel.value,
-            provider: selectedProvider.provider,
+            provider: selectedProvider.id as any,
             messages: [
               {
                 role: "system",
@@ -133,28 +121,61 @@ export async function POST(request: NextRequest) {
               },
               {
                 role: "user",
-                content: `${rewrittenPrompt}${redesignMarkdown ? `\n\nHere is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : ""} : ""}`
+                content: redesignMarkdown
+                  ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown.`
+                  : html
+                  ? `Here is my current HTML code:\n\n\`\`\`html\n${html}\n\`\`\`\n\nNow, please create a new design based on this HTML.`
+                  : prompt,
               },
             ],
-            max_tokens: 65_536,
+            max_tokens: selectedProvider.max_tokens,
           },
           billTo ? { billTo } : {}
         );
 
         while (true) {
-          const { done, value } = await chatCompletion.next()
+          const { done, value } = await chatCompletion.next();
           if (done) {
             break;
           }
 
           const chunk = value.choices[0]?.delta?.content;
           if (chunk) {
-            await writer.write(encoder.encode(chunk));
+            let newChunk = chunk;
+            if (!selectedModel?.isThinker) {
+              if (provider !== "sambanova") {
+                await writer.write(encoder.encode(chunk));
+                completeResponse += chunk;
+
+                if (completeResponse.includes("</html>")) {
+                  break;
+                }
+              } else {
+                if (chunk.includes("</html>")) {
+                  newChunk = newChunk.replace(/<\/html>[\s\S]*/, "</html>");
+                }
+                completeResponse += newChunk;
+                await writer.write(encoder.encode(newChunk));
+                if (newChunk.includes("</html>")) {
+                  break;
+                }
+              }
+            } else {
+              const lastThinkTagIndex =
+                completeResponse.lastIndexOf("</think>");
+              completeResponse += newChunk;
+              await writer.write(encoder.encode(newChunk));
+              if (lastThinkTagIndex !== -1) {
+                const afterLastThinkTag = completeResponse.slice(
+                  lastThinkTagIndex + "</think>".length
+                );
+                if (afterLastThinkTag.includes("</html>")) {
+                  break;
+                }
+              }
+            }
           }
         }
-        
-        // 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(
@@ -166,18 +187,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({
@@ -190,12 +200,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();
       }
     })();
 
@@ -214,20 +219,14 @@ 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, html, previousPrompt, provider, selectedElementHtml, model } =
     body;
 
-  let repoId = repoIdFromBody;
-
-  if (!prompt || pages.length === 0) {
+  if (!prompt || !html) {
     return NextResponse.json(
       { ok: false, error: "Missing required fields" },
       { status: 400 }
@@ -244,7 +243,7 @@ export async function PUT(request: NextRequest) {
     );
   }
 
-  let token = user.token as string;
+  let token = userToken;
   let billTo: string | null = null;
 
   /**
@@ -279,56 +278,45 @@ export async function PUT(request: NextRequest) {
 
   const client = new InferenceClient(token);
 
-  // Helper function to escape regex special characters
-  const escapeRegExp = (string: string) => {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  };
-
-  // Helper function to create flexible HTML regex that handles varying spaces
-  const createFlexibleHtmlRegex = (searchBlock: string) => {
-    let searchRegex = escapeRegExp(searchBlock)
-      .replace(/\s+/g, '\\s*') // Allow any amount of whitespace where there are spaces
-      .replace(/>\s*</g, '>\\s*<') // Allow spaces between HTML tags
-      .replace(/\s*>/g, '\\s*>'); // Allow spaces before closing >
-    
-    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 response = await client.chatCompletion(
       {
         model: selectedModel.value,
-        provider: selectedProvider.provider,
+        provider: selectedProvider.id as any,
         messages: [
           {
             role: "system",
-            content: FOLLOW_UP_SYSTEM_PROMPT + (isNew ? PROMPT_FOR_PROJECT_NAME : ""),
+            content: FOLLOW_UP_SYSTEM_PROMPT,
           },
           {
             role: "user",
-            content: previousPrompts
-              ? `Also here are the previous prompts:\n\n${previousPrompts.map((p: string) => `- ${p}`).join("\n")}`
+            content: previousPrompt
+              ? previousPrompt
               : "You are modifying the HTML file based on the user's request.",
           },
           {
             role: "assistant",
 
-            content: `${
+            content: `The current code is: \n\`\`\`html\n${html}\n\`\`\` ${
               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.`
+                ? `\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,
           },
         ],
-        ...(selectedProvider.provider !== "sambanova"
+        ...(selectedProvider.id !== "sambanova"
           ? {
-              max_tokens: 65_536,
+              max_tokens: selectedProvider.max_tokens,
             }
           : {}),
       },
@@ -345,234 +333,61 @@ export async function PUT(request: NextRequest) {
 
     if (chunk) {
       const updatedLines: number[][] = [];
-      let newHtml = "";
-      const updatedPages = [...(pages || [])];
-
-      const updatePageRegex = new RegExp(`${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${UPDATE_PAGE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
-      let updatePageMatch;
-      
-      while ((updatePageMatch = updatePageRegex.exec(chunk)) !== null) {
-        const [, pagePath, pageContent] = updatePageMatch;
-        
-        const pageIndex = updatedPages.findIndex(p => p.path === pagePath);
-        if (pageIndex !== -1) {
-          let pageHtml = updatedPages[pageIndex].html;
-          
-          let processedContent = pageContent;
-          const htmlMatch = pageContent.match(/```html\s*([\s\S]*?)\s*```/);
-          if (htmlMatch) {
-            processedContent = htmlMatch[1];
-          }
-          let position = 0;
-          let moreBlocks = true;
-
-          while (moreBlocks) {
-            const searchStartIndex = processedContent.indexOf(SEARCH_START, position);
-            if (searchStartIndex === -1) {
-              moreBlocks = false;
-              continue;
-            }
-
-            const dividerIndex = processedContent.indexOf(DIVIDER, searchStartIndex);
-            if (dividerIndex === -1) {
-              moreBlocks = false;
-              continue;
-            }
-
-            const replaceEndIndex = processedContent.indexOf(REPLACE_END, dividerIndex);
-            if (replaceEndIndex === -1) {
-              moreBlocks = false;
-              continue;
-            }
-
-            const searchBlock = processedContent.substring(
-              searchStartIndex + SEARCH_START.length,
-              dividerIndex
-            );
-            const replaceBlock = processedContent.substring(
-              dividerIndex + DIVIDER.length,
-              replaceEndIndex
-            );
-
-            if (searchBlock.trim() === "") {
-              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 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);
-              }
-            }
-
-            position = replaceEndIndex + REPLACE_END.length;
-          }
-
-          updatedPages[pageIndex].html = pageHtml;
-          
-          if (pagePath === '/' || pagePath === '/index' || pagePath === 'index') {
-            newHtml = pageHtml;
-          }
+      let newHtml = html;
+      let position = 0;
+      let moreBlocks = true;
+
+      while (moreBlocks) {
+        const searchStartIndex = chunk.indexOf(SEARCH_START, position);
+        if (searchStartIndex === -1) {
+          moreBlocks = false;
+          continue;
         }
-      }
 
-      const newPageRegex = new RegExp(`${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${NEW_PAGE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
-      let newPageMatch;
-      
-      while ((newPageMatch = newPageRegex.exec(chunk)) !== null) {
-        const [, pagePath, pageContent] = newPageMatch;
-        
-        let pageHtml = pageContent;
-        const htmlMatch = pageContent.match(/```html\s*([\s\S]*?)\s*```/);
-        if (htmlMatch) {
-          pageHtml = htmlMatch[1];
-        }
-        
-        const existingPageIndex = updatedPages.findIndex(p => p.path === pagePath);
-        
-        if (existingPageIndex !== -1) {
-          updatedPages[existingPageIndex] = {
-            path: pagePath,
-            html: pageHtml.trim()
-          };
-        } else {
-          updatedPages.push({
-            path: pagePath,
-            html: pageHtml.trim()
-          });
+        const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
+        if (dividerIndex === -1) {
+          moreBlocks = false;
+          continue;
         }
-      }
-
-      if (updatedPages.length === pages?.length && !chunk.includes(UPDATE_PAGE_START)) {
-        let position = 0;
-        let moreBlocks = true;
-
-        while (moreBlocks) {
-          const searchStartIndex = chunk.indexOf(SEARCH_START, position);
-          if (searchStartIndex === -1) {
-            moreBlocks = false;
-            continue;
-          }
 
-          const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
-          if (dividerIndex === -1) {
-            moreBlocks = false;
-            continue;
-          }
-
-          const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
-          if (replaceEndIndex === -1) {
-            moreBlocks = false;
-            continue;
-          }
+        const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
+        if (replaceEndIndex === -1) {
+          moreBlocks = false;
+          continue;
+        }
 
-          const searchBlock = chunk.substring(
-            searchStartIndex + SEARCH_START.length,
-            dividerIndex
-          );
-          const replaceBlock = chunk.substring(
-            dividerIndex + DIVIDER.length,
-            replaceEndIndex
-          );
+        const searchBlock = chunk.substring(
+          searchStartIndex + SEARCH_START.length,
+          dividerIndex
+        );
+        const replaceBlock = chunk.substring(
+          dividerIndex + DIVIDER.length,
+          replaceEndIndex
+        );
 
-          if (searchBlock.trim() === "") {
-            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 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);
-            }
+        if (searchBlock.trim() === "") {
+          newHtml = `${replaceBlock}\n${newHtml}`;
+          updatedLines.push([1, replaceBlock.split("\n").length]);
+        } else {
+          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(searchBlock, replaceBlock);
           }
-
-          position = replaceEndIndex + REPLACE_END.length;
         }
 
-        // Update the main HTML if it's the index page
-        const mainPageIndex = updatedPages.findIndex(p => p.path === '/' || p.path === '/index' || p.path === 'index');
-        if (mainPageIndex !== -1) {
-          updatedPages[mainPageIndex].html = newHtml;
-        }
+        position = replaceEndIndex + REPLACE_END.length;
       }
 
-      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,
+        html: newHtml,
         updatedLines,
-        pages: updatedPages,
-        repoId,
-        commit: {
-          ...response.commit,
-          title: prompt,
-        }
       });
     } else {
       return NextResponse.json(
@@ -602,4 +417,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,113 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, spaceInfo, uploadFiles } from "@huggingface/hub";
-
-import { isAuthenticated } from "@/lib/auth";
-import Project from "@/models/Project";
-import dbConnect from "@/lib/mongodb";
-
-export async function POST(
-  req: NextRequest,
-  { params }: { params: Promise<{ namespace: string; repoId: string }> }
-) {
-  try {
-    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 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 }
-      );
-    }
-
-    // Parse the FormData to get the images
-    const formData = await req.formData();
-    const imageFiles = formData.getAll("images") as File[];
-
-    if (!imageFiles || imageFiles.length === 0) {
-      return NextResponse.json(
-        {
-          ok: false,
-          error: "At least one image file is required under the 'images' key",
-        },
-        { status: 400 }
-      );
-    }
-
-    const files: File[] = [];
-    for (const file of imageFiles) {
-      if (!(file instanceof File)) {
-        return NextResponse.json(
-          {
-            ok: false,
-            error: "Invalid file format - all items under 'images' key must be files",
-          },
-          { status: 400 }
-        );
-      }
-
-      if (!file.type.startsWith('image/')) {
-        return NextResponse.json(
-          {
-            ok: false,
-            error: `File ${file.name} is not an image`,
-          },
-          { status: 400 }
-        );
-      }
-
-      // Create File object with images/ folder prefix
-      const fileName = `images/${file.name}`;
-      const processedFile = new File([file], fileName, { type: file.type });
-      files.push(processedFile);
-    }
-
-    // Upload files to HuggingFace space
-    const repo: RepoDesignation = {
-      type: "space",
-      name: `${namespace}/${repoId}`,
-    };
-
-    await uploadFiles({
-      repo,
-      files,
-      accessToken: user.token as string,
-      commitTitle: `Upload ${files.length} image(s)`,
-    });
-
-    return NextResponse.json({ 
-      ok: true, 
-      message: `Successfully uploaded ${files.length} image(s) to ${namespace}/${repoId}/images/`,
-      uploadedFiles: files.map((file) => `https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${file.name}`),
-    }, { status: 200 });
-
-  } catch (error) {
-    console.error('Error uploading images:', error);
-    return NextResponse.json(
-      {
-        ok: false,
-        error: "Failed to upload images",
-      },
-      { status: 500 }
-    );
-  }
-}

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, uploadFile } from "@huggingface/hub";
 
 import { isAuthenticated } from "@/lib/auth";
-import { Commit, Page } from "@/types";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+import { getPTag } from "@/lib/utils";
 
-export async function DELETE(
+export async function GET(
   req: NextRequest,
   { params }: { params: Promise<{ namespace: string; repoId: string }> }
 ) {
@@ -14,63 +16,24 @@ 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;
-
+  const space_url = `https://huggingface.co/spaces/${namespace}/${repoId}/raw/main/index.html`;
   try {
     const space = await spaceInfo({
       name: namespace + "/" + repoId,
@@ -97,75 +60,26 @@ export async function GET(
       );
     }
 
-    const repo: RepoDesignation = {
-      type: "space",
-      name: `${namespace}/${repoId}`,
-    };
-
-    const htmlFiles: Page[] = [];
-    const files: string[] = [];
-
-    const allowedFilesExtensions = ["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 {
-          htmlFiles.push({
-            path: fileInfo.path,
-            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}`);
-          }
-        }
-      }
-    }
-    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) {
+    const response = await fetch(space_url);
+    if (!response.ok) {
       return NextResponse.json(
         {
           ok: false,
-          error: "No HTML files found",
+          error: "Failed to fetch space HTML",
         },
         { status: 404 }
       );
     }
+    let html = await response.text();
+    // remove the last p tag including this url https://enzostvs-deepsite.hf.space
+    html = html.replace(getPTag(namespace + "/" + repoId), "");
+
     return NextResponse.json(
       {
         project: {
-          id: space.id,
-          space_id: space.name,
-          private: space.private,
-          _updatedAt: space.updatedAt,
+          ...project,
+          html,
         },
-        pages: htmlFiles,
-        files,
-        commits,
         ok: true,
       },
       { status: 200 }
@@ -174,6 +88,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 +103,135 @@ 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 { html, 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 newHtml = html.replace(/<\/body>/, `${getPTag(repo.name)}</body>`);
+  const file = new File([newHtml], "index.html", { type: "text/html" });
+  await uploadFile({
+    repo,
+    file,
+    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: [
+          ...(project && "prompts" in project ? project.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,126 @@
 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 { COLORS } from "@/lib/utils";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+import { COLORS, getPTag } from "@/lib/utils";
+// import type user
+export async function GET() {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
 
-export async function POST(
-  req: NextRequest,
-) {
+  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 }
+  );
+}
+
+/**
+ * This API route creates a new project in Hugging Face Spaces.
+ * It requires an Authorization header with a valid token and a JSON body with the project details.
+ */
+export async function POST(request: NextRequest) {
   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, html, prompts } = await request.json();
+
+  if (!title || !html) {
+    return NextResponse.json(
+      { message: "Title and HTML content are required.", ok: false },
+      { status: 400 }
+    );
+  }
+
+  await dbConnect();
 
-  const title = titleFromRequest ?? "DeepSite Project";
+  try {
+    let readme = "";
+    let newHtml = html;
 
-  const formattedTitle = title
-  .toLowerCase()
-  .replace(/[^a-z0-9]+/g, "-")
-  .split("-")
-  .filter(Boolean)
-  .join("-")
-  .slice(0, 96);
+    const newTitle = 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}
+    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,
+    newHtml = html.replace(/<\/body>/, `${getPTag(repo.name)}</body>`);
+    const file = new File([newHtml], "index.html", { type: "text/html" });
+    const readmeFile = new File([readme], "README.md", {
+      type: "text/markdown",
     });
-    const commitTitle = !prompt || prompt.trim() === "" ? "Redesign my website" : prompt;
+    const files = [file, readmeFile];
     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,17 +2,14 @@
 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 Script from "next/script";
 
 const inter = Inter({
   variable: "--font-inter-sans",
@@ -72,16 +69,16 @@ 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 };
   }
 }
 
@@ -101,15 +98,10 @@ export default async function RootLayout({
       <body
         className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark h-[100dvh] overflow-hidden`}
       >
-        <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/projects/[namespace]/[repoId]/page.tsx

@@ -1,10 +1,40 @@
+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;
-  return <AppEditor namespace={namespace} repoId={repoId} />;
+  const project = await getProject(namespace, repoId);
+  if (!project?.html) {
+    redirect("/projects");
+  }
+  return <AppEditor project={project} />;
 }

app/projects/new/page.tsx

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

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,61 +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;
-  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}
-        pages={modalOptions.pages}
-        title={modalOptions.title}
-        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/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,162 +1,335 @@
-import { useMemo, useState } from "react";
+"use client";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useRef, useMemo } from "react";
 import classNames from "classnames";
-import {
-  ArrowUp,
-  CircleStop,
-  Pause,
-  Plus,
-  Square,
-  StopCircle,
-} from "lucide-react";
-import { useLocalStorage } 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 { isTheSameHtml } from "@/lib/compare-html-diff";
-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 { 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 { MODELS } from "@/lib/providers";
-import { MAX_FREE_PROJECTS } from "@/lib/utils";
+import { HtmlHistory } 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 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";
 
-export const AskAi = ({
-  project,
-  isNew,
+export function AskAI({
+  html,
+  setHtml,
   onScrollToBottom,
+  isAiWorking,
+  setisAiWorking,
+  isEditableModeEnabled = false,
+  selectedElement,
+  setSelectedElement,
+  setIsEditableModeEnabled,
+  onNewPrompt,
+  onSuccess,
 }: {
-  project?: Project;
-  files?: string[];
-  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();
-  const [openProvider, setOpenProvider] = useState(false);
-  const [providerError, setProviderError] = useState("");
-
-  const [enhancedSettings, setEnhancedSettings, removeEnhancedSettings] =
-    useLocalStorage<EnhancedSettings>("deepsite-enhancedSettings", {
-      isActive: true,
-      primaryColor: undefined,
-      secondaryColor: undefined,
-      theme: undefined,
-    });
+  html: string;
+  setHtml: (html: string) => void;
+  onScrollToBottom: () => void;
+  isAiWorking: boolean;
+  onNewPrompt: (prompt: string) => void;
+  htmlHistory?: HtmlHistory[];
+  setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
+  onSuccess: (h: string, p: string, n?: number[][]) => void;
+  isEditableModeEnabled: boolean;
+  setIsEditableModeEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedElement?: HTMLElement | null;
+  setSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+}) {
+  const refThink = useRef<HTMLDivElement | null>(null);
+  const audio = useRef<HTMLAudioElement | null>(null);
 
-  const [isFollowUp, setIsFollowUp] = useState(true);
+  const [open, setOpen] = useState(false);
   const [prompt, setPrompt] = useState("");
-  const [think, setThink] = useState("");
+  const [hasAsked, setHasAsked] = useState(false);
+  const [previousPrompt, setPreviousPrompt] = 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 [openProModal, setOpenProModal] = useState(false);
+  const [think, setThink] = useState<string | undefined>(undefined);
   const [openThink, setOpenThink] = useState(false);
+  const [isThinking, setIsThinking] = useState(true);
+  const [controller, setController] = useState<AbortController | null>(null);
+  const [isFollowUp, setIsFollowUp] = useState(true);
 
-  const handleThink = (think: string) => {
-    setThink(think);
-    setIsThinking(true);
-    setOpenThink(true);
-  };
+  const selectedModel = useMemo(() => {
+    return MODELS.find((m: { value: string }) => m.value === model);
+  }, [model]);
 
   const callAi = async (redesignMarkdown?: string) => {
-    if (!user) return openLoginModal();
-    if (!user.isPro && projects.length >= MAX_FREE_PROJECTS)
-      return openProModal([]);
     if (isAiWorking) return;
     if (!redesignMarkdown && !prompt.trim()) return;
+    setisAiWorking(true);
+    setProviderError("");
+    setThink("");
+    setOpenThink(false);
+    setIsThinking(true);
 
-    if (isFollowUp && !redesignMarkdown && !isSameHtml) {
-      const result = await callAiFollowUp(prompt, enhancedSettings, isNew);
+    let contentResponse = "";
+    let thinkResponse = "";
+    let lastRenderTime = 0;
 
-      if (result?.error) {
-        handleError(result.error, result.message);
-        return;
-      }
-
-      if (result?.success) {
-        setPrompt("");
-      }
-    } else {
-      const result = await callAiNewProject(
-        prompt,
-        enhancedSettings,
-        redesignMarkdown,
-        handleThink,
-        () => {
-          setIsThinking(false);
+    const abortController = new AbortController();
+    setController(abortController);
+    try {
+      onNewPrompt(prompt);
+      if (isFollowUp && !redesignMarkdown && !isSameHtml) {
+        const selectedElementHtml = selectedElement
+          ? selectedElement.outerHTML
+          : "";
+        const request = await fetch("/api/ask-ai", {
+          method: "PUT",
+          body: JSON.stringify({
+            prompt,
+            provider,
+            previousPrompt,
+            model,
+            html,
+            selectedElementHtml,
+          }),
+          headers: {
+            "Content-Type": "application/json",
+            "x-forwarded-for": window.location.hostname,
+          },
+          signal: abortController.signal,
+        });
+        if (request && request.body) {
+          const res = await request.json();
+          if (!request.ok) {
+            if (res.openLogin) {
+              setOpen(true);
+            } else if (res.openSelectProvider) {
+              setOpenProvider(true);
+              setProviderError(res.message);
+            } else if (res.openProModal) {
+              setOpenProModal(true);
+            } else {
+              toast.error(res.message);
+            }
+            setisAiWorking(false);
+            return;
+          }
+          setHtml(res.html);
+          toast.success("AI responded successfully");
+          setPreviousPrompt(prompt);
+          setPrompt("");
+          setisAiWorking(false);
+          onSuccess(res.html, prompt, res.updatedLines);
+          if (audio.current) audio.current.play();
         }
-      );
+      } else {
+        const request = await fetch("/api/ask-ai", {
+          method: "POST",
+          body: JSON.stringify({
+            prompt,
+            provider,
+            model,
+            html: isSameHtml ? "" : html,
+            redesignMarkdown,
+          }),
+          headers: {
+            "Content-Type": "application/json",
+            "x-forwarded-for": window.location.hostname,
+          },
+          signal: abortController.signal,
+        });
+        if (request && request.body) {
+          const reader = request.body.getReader();
+          const decoder = new TextDecoder("utf-8");
+          const selectedModel = MODELS.find(
+            (m: { value: string }) => m.value === model
+          );
+          let contentThink: string | undefined = undefined;
+          const read = async () => {
+            const { done, value } = await reader.read();
+            if (done) {
+              const isJson =
+                contentResponse.trim().startsWith("{") &&
+                contentResponse.trim().endsWith("}");
+              const jsonResponse = isJson ? JSON.parse(contentResponse) : null;
+              if (jsonResponse && !jsonResponse.ok) {
+                if (jsonResponse.openLogin) {
+                  setOpen(true);
+                } else if (jsonResponse.openSelectProvider) {
+                  setOpenProvider(true);
+                  setProviderError(jsonResponse.message);
+                } else if (jsonResponse.openProModal) {
+                  setOpenProModal(true);
+                } else {
+                  toast.error(jsonResponse.message);
+                }
+                setisAiWorking(false);
+                return;
+              }
 
-      if (result?.error) {
-        handleError(result.error, result.message);
-        return;
-      }
+              toast.success("AI responded successfully");
+              setPreviousPrompt(prompt);
+              setPrompt("");
+              setisAiWorking(false);
+              setHasAsked(true);
+              if (selectedModel?.isThinker) {
+                setModel(MODELS[0].value);
+              }
+              if (audio.current) audio.current.play();
+
+              // Now we have the complete HTML including </html>, so set it to be sure
+              const finalDoc = contentResponse.match(
+                /<!DOCTYPE html>[\s\S]*<\/html>/
+              )?.[0];
+              if (finalDoc) {
+                setHtml(finalDoc);
+              }
+              onSuccess(finalDoc ?? contentResponse, prompt);
+
+              return;
+            }
+
+            const chunk = decoder.decode(value, { stream: true });
+            thinkResponse += chunk;
+            if (selectedModel?.isThinker) {
+              const thinkMatch = thinkResponse.match(/<think>[\s\S]*/)?.[0];
+              if (thinkMatch && !thinkResponse?.includes("</think>")) {
+                if ((contentThink?.length ?? 0) < 3) {
+                  setOpenThink(true);
+                }
+                setThink(thinkMatch.replace("<think>", "").trim());
+                contentThink += chunk;
+                return read();
+              }
+            }
+
+            contentResponse += chunk;
+
+            const newHtml = contentResponse.match(
+              /<!DOCTYPE html>[\s\S]*/
+            )?.[0];
+            if (newHtml) {
+              setIsThinking(false);
+              let partialDoc = newHtml;
+              if (
+                partialDoc.includes("<head>") &&
+                !partialDoc.includes("</head>")
+              ) {
+                partialDoc += "\n</head>";
+              }
+              if (
+                partialDoc.includes("<body") &&
+                !partialDoc.includes("</body>")
+              ) {
+                partialDoc += "\n</body>";
+              }
+              if (!partialDoc.includes("</html>")) {
+                partialDoc += "\n</html>";
+              }
+
+              // Throttle the re-renders to avoid flashing/flicker
+              const now = Date.now();
+              if (now - lastRenderTime > 300) {
+                setHtml(partialDoc);
+                lastRenderTime = now;
+              }
 
-      if (result?.success) {
-        setPrompt("");
-        if (selectedModel?.isThinker) {
-          setModel(MODELS[0].value);
+              if (partialDoc.length > 200) {
+                onScrollToBottom();
+              }
+            }
+            read();
+          };
+
+          read();
         }
       }
+    } catch (error: any) {
+      setisAiWorking(false);
+      toast.error(error.message);
+      if (error.openLogin) {
+        setOpen(true);
+      }
     }
   };
 
-  const handleError = (error: string, message?: string) => {
-    switch (error) {
-      case "login_required":
-        openLoginModal();
-        break;
-      case "provider_required":
-        setOpenProvider(true);
-        setProviderError(message || "");
-        break;
-      case "pro_required":
-        openProModal([]);
-        break;
-      case "api_error":
-        toast.error(message || "An error occurred");
-        break;
-      case "network_error":
-        toast.error(message || "Network error occurred");
-        break;
-      default:
-        toast.error("An unexpected error occurred");
+  const stopController = () => {
+    if (controller) {
+      controller.abort();
+      setController(null);
+      setisAiWorking(false);
+      setThink("");
+      setOpenThink(false);
+      setIsThinking(false);
     }
   };
 
+  useUpdateEffect(() => {
+    if (refThink.current) {
+      refThink.current.scrollTop = refThink.current.scrollHeight;
+    }
+  }, [think]);
+
+  useUpdateEffect(() => {
+    if (!isThinking) {
+      setOpenThink(false);
+    }
+  }, [isThinking]);
+
+  const isSameHtml = useMemo(() => {
+    return isTheSameHtml(html);
+  }, [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">
-        <SelectedFiles
-          files={selectedFiles}
-          isAiWorking={isAiWorking}
-          onDelete={(file) =>
-            setSelectedFiles(selectedFiles.filter((f) => f !== file))
-          }
-        />
+    <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
+              className="flex items-center justify-between px-5 py-2.5 group hover:bg-neutral-600/20 transition-colors duration-200 cursor-pointer"
+              onClick={() => {
+                setOpenThink(!openThink);
+              }}
+            >
+              <p className="text-sm font-medium text-neutral-300 group-hover:text-neutral-200 transition-colors duration-200">
+                {isThinking ? "DeepSite is thinking..." : "DeepSite's plan"}
+              </p>
+              <ChevronDown
+                className={classNames(
+                  "size-4 text-neutral-400 group-hover:text-neutral-300 transition-all duration-200",
+                  {
+                    "rotate-180": openThink,
+                  }
+                )}
+              />
+            </header>
+            <main
+              ref={refThink}
+              className={classNames(
+                "overflow-y-auto transition-all duration-200 ease-in-out",
+                {
+                  "max-h-[0px]": !openThink,
+                  "min-h-[250px] max-h-[250px] border-t border-neutral-700":
+                    openThink,
+                }
+              )}
+            >
+              <p className="text-[13px] text-neutral-400 whitespace-pre-line px-5 pb-4 pt-3">
+                {think}
+              </p>
+            </main>
+          </div>
+        )}
         {selectedElement && (
           <div className="px-4 pt-3">
             <SelectedHtmlElement
@@ -167,47 +340,36 @@ export const AskAi = ({
           </div>
         )}
         <div className="w-full relative flex items-center justify-between">
-          {(isAiWorking || isUploading || isThinking || isLoadingProject) && (
-            <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..."
-                }
-              />
-              {isAiWorking && (
-                <Button
-                  size="iconXs"
-                  variant="outline"
-                  className="!rounded-md mr-0.5"
-                  onClick={cancelRequest}
-                >
-                  <CircleStop className="size-4" />
-                </Button>
-              )}
+          {isAiWorking && (
+            <div className="absolute bg-neutral-800 rounded-lg bottom-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-center justify-between max-lg:text-sm">
+              <div className="flex items-center justify-start gap-2">
+                <Loading overlay={false} className="!size-4" />
+                <p className="text-neutral-400 text-sm">
+                  AI is {isThinking ? "thinking" : "coding"}...{" "}
+                </p>
+              </div>
+              <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}
+              >
+                <FaStopCircle />
+                Stop generation
+              </div>
             </div>
           )}
-          <textarea
-            disabled={
-              isAiWorking || isUploading || isThinking || isLoadingProject
-            }
+          <input
+            type="text"
+            disabled={isAiWorking}
             className={classNames(
-              "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none",
+              "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4",
               {
-                "!pt-2.5":
-                  selectedElement &&
-                  !(isAiWorking || isUploading || isThinking),
+                "!pt-2.5": selectedElement && !isAiWorking,
               }
             )}
             placeholder={
               selectedElement
                 ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
-                : isFollowUp && (!isSameHtml || pages?.length > 1)
+                : hasAsked
                 ? "Ask DeepSite for edits"
                 : "Ask DeepSite anything..."
             }
@@ -220,41 +382,90 @@ export const AskAi = ({
             }}
           />
         </div>
-        <div className="flex items-center justify-between gap-2 px-4 pb-3 mt-2">
-          <div className="flex-1 flex items-center justify-start gap-1.5 flex-wrap">
-            <PromptBuilder
-              enhancedSettings={enhancedSettings!}
-              setEnhancedSettings={setEnhancedSettings}
-            />
+        <div className="flex items-center justify-between gap-2 px-4 pb-3">
+          <div className="flex-1 flex items-center justify-start gap-1.5">
+            <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 && <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)} html={html} />
+        <ProModal
+          html={html}
+          open={openProModal}
+          onClose={() => setOpenProModal(false)}
+        />
+        {!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">
+      <audio ref={audio} id="audio" className="hidden">
         <source src="/success.mp3" type="audio/mpeg" />
         Your browser does not support the audio element.
       </audio>
     </div>
   );
-};
+}

components/editor/ask-ai/loading.tsx

@@ -1,59 +0,0 @@
-import Loading from "@/components/loading";
-import { useState } 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[Math.floor(Math.random() * TEXTS.length)]
-  );
-  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,73 +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 { useLoginModal } from "@/components/contexts/login-context";
-import { useUser } from "@/hooks/useUser";
-import { EnhancedSettings } from "@/types";
-
-export const PromptBuilder = ({
-  enhancedSettings,
-  setEnhancedSettings,
-}: {
-  enhancedSettings: EnhancedSettings;
-  setEnhancedSettings: (settings: EnhancedSettings) => void;
-}) => {
-  const { user } = useUser();
-  const { openLoginModal } = useLoginModal();
-  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={() => {
-          if (!user) return openLoginModal();
-          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,10 +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";
-import { useUser } from "@/hooks/useUser";
-import { useLoginModal } from "@/components/contexts/login-context";
 
 export function ReImagine({
   onRedesign,
@@ -24,10 +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 { user } = useUser();
-  const { openLoginModal } = useLoginModal();
 
   const checkIfUrlIsValid = (url: string) => {
     const urlPattern = new RegExp(
@@ -62,31 +54,16 @@ export function ReImagine({
     setIsLoading(false);
   };
 
-  if (!user)
-    return (
-      <Button
-        size="xs"
-        variant="outline"
-        className="!rounded-md"
-        onClick={() => openLoginModal()}
-      >
-        <Paintbrush className="size-3.5" />
-        Redesign
-      </Button>
-    );
-
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <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/selected-files.tsx

@@ -1,47 +0,0 @@
-import Image from "next/image";
-
-import { Button } from "@/components/ui/button";
-import { Minus } from "lucide-react";
-
-export const SelectedFiles = ({
-  files,
-  isAiWorking,
-  onDelete,
-}: {
-  files: string[];
-  isAiWorking: boolean;
-  onDelete: (file: string) => void;
-}) => {
-  if (files.length === 0) return null;
-  return (
-    <div className="px-4 pt-3">
-      <div className="flex items-center justify-start gap-2">
-        {files.map((file) => (
-          <div
-            key={file}
-            className="flex items-center relative justify-start gap-2 p-1 bg-neutral-700 rounded-md"
-          >
-            <Image
-              src={file}
-              alt="uploaded image"
-              className="size-12 rounded-md object-cover"
-              width={40}
-              height={40}
-            />
-            <Button
-              size="iconXsss"
-              variant="secondary"
-              className={`absolute top-0.5 right-0.5 ${
-                isAiWorking ? "opacity-50 !cursor-not-allowed" : ""
-              }`}
-              disabled={isAiWorking}
-              onClick={() => onDelete(file)}
-            >
-              <Minus className="size-4" />
-            </Button>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};

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,37 +18,29 @@ 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, CheckCheck, ChevronDown } from "lucide-react";
-import { useAi } from "@/hooks/useAi";
 
 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);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
   const modelAvailableProviders = useMemo(() => {
     const availableProviders = MODELS.find(
       (m: { value: string }) => m.value === model
@@ -59,162 +52,153 @@ export function Settings({
   }, [model]);
 
   useUpdateEffect(() => {
-    if (
-      provider !== "auto" &&
-      !modelAvailableProviders.includes(provider as string)
-    ) {
-      setProvider("auto");
+    if (provider !== "auto" && !modelAvailableProviders.includes(provider)) {
+      onChange("auto");
     }
   }, [model, provider]);
 
   return (
-    <Popover open={open} onOpenChange={onClose}>
-      <PopoverTrigger asChild>
-        <Button
-          variant={open ? "default" : "outline"}
-          className="!rounded-md"
-          disabled={globalAiLoading}
-          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" />
-          <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>
-                  <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}
-                      >
-                        {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>
+          <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 DeepSeek model
+              </p>
+              <Select defaultValue={model} onValueChange={onModelChange}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select a DeepSeek model" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>DeepSeek 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}
+                        >
+                          {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",
                     }
                   )}
-                />
-              </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">
-                {modelAvailableProviders.map((id: string) => (
-                  <Button
-                    key={id}
-                    variant={id === provider ? "default" : "secondary"}
-                    size="sm"
-                    onClick={() => {
-                      setProvider(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" />
+                  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",
+                      }
                     )}
-                  </Button>
-                ))}
+                  />
+                </div>
               </div>
-            </label>
-          </div>
-        </main>
-      </PopoverContent>
-    </Popover>
+              <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={() => {
+                        onChange(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 && (
+                        <RiCheckboxCircleFill className="ml-2 size-4 text-blue-500" />
+                      )}
+                    </Button>
+                  ))}
+                </div>
+              </label>
+            </div>
+          </main>
+        </PopoverContent>
+      </Popover>
+    </div>
   );
 }

components/editor/ask-ai/uploader.tsx

@@ -1,165 +0,0 @@
-import { useRef, useState } from "react";
-import {
-  CheckCircle,
-  ImageIcon,
-  Images,
-  Link,
-  Paperclip,
-  Upload,
-} from "lucide-react";
-import Image from "next/image";
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-import { Project } from "@/types";
-import Loading from "@/components/loading";
-import { useUser } from "@/hooks/useUser";
-import { useEditor } from "@/hooks/useEditor";
-import { useAi } from "@/hooks/useAi";
-import { useLoginModal } from "@/components/contexts/login-context";
-
-export const Uploader = ({ project }: { project: Project | undefined }) => {
-  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>
-    );
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <form className="h-[24px]">
-        <PopoverTrigger asChild>
-          <Button
-            size="xs"
-            variant={open ? "default" : "outline"}
-            className="!rounded-md"
-            disabled={globalAiLoading || globalEditorLoading}
-          >
-            <Paperclip className="size-3.5" />
-            Attach
-          </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>
-                  ))}
-                </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>
-              )}
-            </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>
-        </PopoverContent>
-      </form>
-    </Popover>
-  );
-};

components/editor/deploy-button/index.tsx

@@ -0,0 +1,173 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import { toast } from "sonner";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { MdSave } from "react-icons/md";
+import { Rocket } from "lucide-react";
+
+import SpaceIcon from "@/assets/space.svg";
+import Loading from "@/components/loading";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api";
+import { LoginModal } from "@/components/login-modal";
+import { useUser } from "@/hooks/useUser";
+
+export function DeployButton({
+  html,
+  prompts,
+}: {
+  html: string;
+  prompts: string[];
+}) {
+  const router = useRouter();
+  const { user } = useUser();
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = 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,
+        html,
+        prompts,
+      });
+      if (res.data.ok) {
+        router.push(`/projects/${res.data.path}?deploy=true`);
+      } else {
+        toast.error(res?.data?.error || "Failed to create space");
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // TODO add a way to do not allow people to deploy if the html is broken.
+
+  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" />
+                  Deploy your Project
+                </Button>
+                <Button variant="default" size="sm" className="lg:hidden">
+                  Deploy
+                </Button>
+              </div>
+            </PopoverTrigger>
+            <PopoverContent
+              className="!rounded-2xl !p-0 !bg-white !border-neutral-200 min-w-xs text-center overflow-hidden"
+              align="end"
+            >
+              <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">
+                  Deploy as Space!
+                </p>
+                <p className="text-sm text-neutral-500 mt-1.5">
+                  Save and Deploy 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 deploy it!
+                  </p>
+                  <Button
+                    variant="black"
+                    onClick={createSpace}
+                    className="relative w-full"
+                    disabled={loading}
+                  >
+                    Deploy Space <Rocket className="size-4" />
+                    {loading && (
+                      <Loading className="ml-2 size-4 animate-spin" />
+                    )}
+                  </Button>
+                </div>
+              </main>
+            </PopoverContent>
+          </Popover>
+        ) : (
+          <>
+            <Button
+              variant="default"
+              className="max-lg:hidden !px-4"
+              onClick={() => setOpen(true)}
+            >
+              <MdSave className="size-4" />
+              Save your Project
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              className="lg:hidden"
+              onClick={() => setOpen(true)}
+            >
+              Save
+            </Button>
+          </>
+        )}
+        <LoginModal
+          open={open}
+          onClose={() => setOpen(false)}
+          html={html}
+          title="Log In to save your Project"
+          description="Log In through your Hugging Face account to save your project and increase your monthly free limit."
+        />
+      </div>
+    </div>
+  );
+}

components/editor/footer/index.tsx

@@ -0,0 +1,127 @@
+import classNames from "classnames";
+import { FaMobileAlt } from "react-icons/fa";
+import { HelpCircle, RefreshCcw, SparkleIcon } from "lucide-react";
+import { FaLaptopCode } from "react-icons/fa6";
+import { HtmlHistory } 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";
+
+const DEVICES = [
+  {
+    name: "desktop",
+    icon: FaLaptopCode,
+  },
+  {
+    name: "mobile",
+    icon: FaMobileAlt,
+  },
+];
+
+export function Footer({
+  onReset,
+  htmlHistory,
+  setHtml,
+  device,
+  setDevice,
+  iframeRef,
+}: {
+  onReset: () => void;
+  htmlHistory?: HtmlHistory[];
+  device: "desktop" | "mobile";
+  setHtml: (html: string) => void;
+  iframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  setDevice: React.Dispatch<React.SetStateAction<"desktop" | "mobile">>;
+}) {
+  const { user } = useUser();
+
+  const handleRefreshIframe = () => {
+    if (iframeRef?.current) {
+      const iframe = iframeRef.current;
+      const content = iframe.srcdoc;
+      iframe.srcdoc = "";
+      setTimeout(() => {
+        iframe.srcdoc = content;
+      }, 10);
+    }
+  };
+
+  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" />
+          ))}
+        {user && <p className="text-neutral-700">|</p>}
+        <Button size="sm" variant="secondary" onClick={onReset}>
+          <MdAdd className="text-sm" />
+          New <span className="max-lg:hidden">Project</span>
+        </Button>
+        {htmlHistory && htmlHistory.length > 0 && (
+          <>
+            <p className="text-neutral-700">|</p>
+            <History history={htmlHistory} setHtml={setHtml} />
+          </>
+        )}
+      </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>
+  );
+}

components/editor/header/index.tsx

@@ -1,112 +1,69 @@
-import { ArrowRight, HelpCircle, RefreshCcw, Lock } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
+import { ReactNode } from "react";
+import { Eye, MessageCircleCode } from "lucide-react";
 
 import Logo from "@/assets/logo.svg";
+
 import { Button } from "@/components/ui/button";
-import { useUser } from "@/hooks/useUser";
-import { ProTag } from "@/components/pro-modal";
-import { UserMenu } from "@/components/user-menu";
-import { SwitchDevice } from "@/components/editor/switch-devide";
-import { SwitchTab } from "./switch-tab";
-import { History } from "@/components/editor/history";
-import { useEditor } from "@/hooks/useEditor";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import classNames from "classnames";
+import Image from "next/image";
 
-export function Header() {
-  const { project } = useEditor();
-  const { user, openLoginWindow } = useUser();
+const TABS = [
+  {
+    value: "chat",
+    label: "Chat",
+    icon: MessageCircleCode,
+  },
+  {
+    value: "preview",
+    label: "Preview",
+    icon: Eye,
+  },
+];
+
+export function Header({
+  tab,
+  onNewTab,
+  children,
+}: {
+  tab: string;
+  onNewTab: (tab: string) => void;
+  children?: ReactNode;
+}) {
   return (
-    <header className="border-b bg-neutral-950 dark:border-neutral-800 grid grid-cols-3 lg:flex items-center max-lg:gap-3 justify-between z-20">
-      <div className="flex items-center justify-between lg:max-w-[600px] lg:w-full py-2 px-2 lg:px-3 lg:pl-6 gap-3">
+    <header className="border-b bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 lg:px-6 py-2 flex items-center max-lg:gap-3 justify-between lg:grid lg:grid-cols-3 z-20">
+      <div className="flex items-center justify-start gap-3">
         <h1 className="text-neutral-900 dark:text-white text-lg lg:text-xl font-bold flex items-center justify-start">
           <Image
             src={Logo}
             alt="DeepSite Logo"
-            className="size-8 invert-100 dark:invert-0"
+            className="size-6 lg:size-8 mr-2 invert-100 dark:invert-0"
           />
-          <p className="ml-2 flex items-center justify-start max-lg:hidden">
+          <p className="max-md:hidden flex items-center justify-start">
             DeepSite
-            {user?.isPro ? (
-              <ProTag className="ml-2 !text-[10px]" />
-            ) : (
-              <span className="font-mono bg-gradient-to-r from-sky-500/20 to-sky-500/10 text-sky-500 rounded-full text-xs ml-2 px-1.5 py-0.5 border border-sky-500/20">
-                {" "}
-                v3
-              </span>
-            )}
+            <span className="font-mono bg-gradient-to-br from-sky-500 to-emerald-500 text-neutral-950 rounded-full text-xs ml-2 px-1.5 py-0.5">
+              {" "}
+              v2
+            </span>
           </p>
         </h1>
-        <div className="flex items-center justify-end gap-2">
-          <History />
-          <SwitchTab />
-        </div>
-      </div>
-      <div className="lg:hidden flex items-center justify-center whitespace-nowrap">
-        <SwitchTab isMobile />
       </div>
-      <div className="lg:w-full px-2 lg:px-3 py-2 flex items-center justify-end lg:justify-between lg:border-l lg:border-neutral-800">
-        <div className="font-mono text-muted-foreground flex items-center gap-2">
-          <SwitchDevice />
+      <div className="flex items-center justify-start lg:justify-center gap-1 max-lg:pl-3 flex-1 max-lg:border-l max-lg:border-l-neutral-800">
+        {TABS.map((item) => (
           <Button
-            size="xs"
-            variant="bordered"
-            className="max-lg:hidden"
-            onClick={() => {
-              const iframe = document.getElementById(
-                "preview-iframe"
-              ) as HTMLIFrameElement;
-              if (iframe) {
-                iframe.src = iframe.src;
-              }
-            }}
+            key={item.value}
+            variant={tab === item.value ? "secondary" : "ghost"}
+            className={classNames("", {
+              "opacity-60": tab !== item.value,
+            })}
+            size="sm"
+            onClick={() => onNewTab(item.value)}
           >
-            <RefreshCcw className="size-3 mr-0.5" />
-            Refresh Preview
+            <item.icon className="size-4" />
+            <span className="hidden md:inline">{item.label}</span>
           </Button>
-          <Link
-            href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/427"
-            target="_blank"
-            className="max-lg:hidden"
-          >
-            <Button size="xs" variant="bordered">
-              <HelpCircle className="size-3 mr-0.5" />
-              Help
-            </Button>
-          </Link>
-        </div>
-        <div className="flex items-center gap-2">
-          {project?.private && (
-            <Tooltip>
-              <TooltipTrigger>
-                <div className="max-lg:hidden flex items-center gap-1.5 bg-amber-500/10 backdrop-blur-sm px-3 py-1.5 rounded-full border border-amber-500/20 shadow-lg">
-                  <Lock className="w-3 h-3 text-amber-500" />
-                  <span className="text-amber-500 text-xs font-medium tracking-wide">
-                    Private Project
-                  </span>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p className="text-xs">
-                  This project is private. Only you can see it.
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          )}
-          {user ? (
-            <UserMenu className="!pl-1 !pr-3 !py-1 !h-auto" />
-          ) : (
-            <Button size="sm" onClick={openLoginWindow}>
-              Start Vibe Coding
-              <ArrowRight className="size-4" />
-            </Button>
-          )}
-        </div>
+        ))}
       </div>
+      <div className="flex items-center justify-end gap-3">{children}</div>
     </header>
   );
 }

components/editor/header/switch-tab.tsx

@@ -1,58 +0,0 @@
-import {
-  PanelLeftClose,
-  PanelLeftOpen,
-  Eye,
-  MessageCircleCode,
-} from "lucide-react";
-import classNames from "classnames";
-
-import { Button } from "@/components/ui/button";
-import { useEditor } from "@/hooks/useEditor";
-
-const TABS = [
-  {
-    value: "chat",
-    label: "Chat",
-    icon: MessageCircleCode,
-  },
-  {
-    value: "preview",
-    label: "Preview",
-    icon: Eye,
-  },
-];
-
-export const SwitchTab = ({ isMobile = false }: { isMobile?: boolean }) => {
-  const { currentTab, setCurrentTab } = useEditor();
-
-  if (isMobile) {
-    return (
-      <div className="flex items-center justify-center gap-1 bg-neutral-900 rounded-full p-1">
-        {TABS.map((item) => (
-          <Button
-            key={item.value}
-            variant={currentTab === item.value ? "default" : "ghost"}
-            className={classNames("", {
-              "opacity-60": currentTab !== item.value,
-            })}
-            size="sm"
-            onClick={() => setCurrentTab(item.value)}
-          >
-            <item.icon className="size-4" />
-            <span className="inline">{item.label}</span>
-          </Button>
-        ))}
-      </div>
-    );
-  }
-  return (
-    <Button
-      variant="ghost"
-      size="iconXs"
-      className="max-lg:hidden"
-      onClick={() => setCurrentTab(currentTab === "chat" ? "preview" : "chat")}
-    >
-      {currentTab === "chat" ? <PanelLeftClose /> : <PanelLeftOpen />}
-    </Button>
-  );
-};

components/editor/history-notification/index.tsx

@@ -1,119 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import classNames from "classnames";
-import { Button } from "@/components/ui/button";
-import Loading from "@/components/loading";
-import {
-  History,
-  ChevronUp,
-  ChevronDown,
-  MousePointerClick,
-} from "lucide-react";
-
-interface HistoryNotificationProps {
-  /** Whether the historical version notification should be visible */
-  isVisible: boolean;
-  /** Whether the version promotion is in progress */
-  isPromotingVersion: boolean;
-  /** Function to promote the current historical version */
-  onPromoteVersion: () => void;
-  /** Function to go back to the current version */
-  onGoBackToCurrent: () => void;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-export const HistoryNotification = ({
-  isVisible,
-  isPromotingVersion,
-  onPromoteVersion,
-  onGoBackToCurrent,
-  className,
-}: HistoryNotificationProps) => {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
-  if (!isVisible) {
-    return null;
-  }
-
-  return (
-    <div
-      className={classNames(
-        "absolute bottom-4 left-4 z-10 bg-white/95 backdrop-blur-sm border border-neutral-200 rounded-xl shadow-lg transition-all duration-300 ease-in-out",
-        className
-      )}
-    >
-      {isCollapsed ? (
-        // Collapsed state
-        <div className="flex items-center gap-2 p-3">
-          <History className="size-4 text-neutral-600" />
-          <span className="text-xs text-neutral-600 font-medium">
-            Historical Version
-          </span>
-          <Button
-            variant="outline"
-            size="iconXs"
-            className="!rounded-md !border-neutral-200"
-            onClick={() => setIsCollapsed(false)}
-          >
-            <ChevronUp className="text-neutral-400 size-3" />
-          </Button>
-        </div>
-      ) : (
-        // Expanded state
-        <div className="p-4 max-w-sm w-full">
-          <div className="flex items-start gap-3">
-            <History className="size-4 text-neutral-600 translate-y-1.5" />
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center justify-between mb-1">
-                <div className="flex items-center gap-2">
-                  <p className="font-semibold text-sm text-neutral-800">
-                    Historical Version
-                  </p>
-                </div>
-                <Button
-                  variant="outline"
-                  size="iconXs"
-                  className="!rounded-md !border-neutral-200"
-                  onClick={() => setIsCollapsed(true)}
-                >
-                  <ChevronDown className="text-neutral-400 size-3" />
-                </Button>
-              </div>
-              <p className="text-xs text-neutral-600 leading-relaxed mb-3">
-                You're viewing a previous version of this project. Promote this
-                version to make it current and deploy it live.
-              </p>
-              <div className="flex items-center gap-2">
-                <Button
-                  size="xs"
-                  variant="black"
-                  className="!pr-3"
-                  onClick={onPromoteVersion}
-                  disabled={isPromotingVersion}
-                >
-                  {isPromotingVersion ? (
-                    <Loading overlay={false} />
-                  ) : (
-                    <MousePointerClick className="size-3" />
-                  )}
-                  Promote Version
-                </Button>
-                <Button
-                  size="xs"
-                  variant="outline"
-                  className=" !text-neutral-600 !border-neutral-200"
-                  disabled={isPromotingVersion}
-                  onClick={onGoBackToCurrent}
-                >
-                  Go back to current
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

components/editor/history/index.tsx

@@ -1,32 +1,25 @@
 import { History as HistoryIcon } from "lucide-react";
-import { useState } from "react";
-
-import { Commit } from "@/types";
+import { HtmlHistory } from "@/types";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
-import { useEditor } from "@/hooks/useEditor";
-import classNames from "classnames";
-
-export function History() {
-  const { commits, currentCommit, setCurrentCommit, project } = useEditor();
-  const [open, setOpen] = useState(false);
-
-  if (commits.length === 0) return null;
 
+export function History({
+  history,
+  setHtml,
+}: {
+  history: HtmlHistory[];
+  setHtml: (html: string) => void;
+}) {
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover>
       <PopoverTrigger asChild>
-        <Button
-          size="xs"
-          variant={open ? "default" : "outline"}
-          className="!rounded-md max-lg:hidden"
-        >
-          <HistoryIcon className="size-3.5" />
-          {commits?.length} edit{commits?.length !== 1 ? "s" : ""}
+        <Button variant="ghost" size="sm" className="max-lg:hidden">
+          <HistoryIcon className="size-4 text-neutral-300" />
+          {history?.length} edit{history.length !== 1 ? "s" : ""}
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -36,68 +29,39 @@ export function History() {
         <header className="text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
           History
         </header>
-        <main className="space-y-3">
-          {project?.private && (
-            <div className="px-4 pt-3">
-              <p className="text-amber-500 text-xs px-2 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md">
-                As this project is private, you can't see the history of
-                changes.
-              </p>
-            </div>
-          )}
+        <main className="px-4 space-y-3">
           <ul className="max-h-[250px] overflow-y-auto">
-            {commits?.map((item: Commit, index: number) => (
+            {history?.map((item, index) => (
               <li
                 key={index}
-                className={classNames(
-                  "px-4 text-gray-200 py-2 border-b border-gray-800 last:border-0 space-y-1",
-                  {
-                    "bg-blue-500/10":
-                      currentCommit === item.oid ||
-                      (index === 0 && currentCommit === null),
-                  }
-                )}
+                className="text-gray-300 text-xs py-2 border-b border-gray-800 last:border-0 flex items-center justify-between gap-2"
               >
-                <p className="line-clamp-1 text-sm">{item.title}</p>
-                <div className="w-full flex items-center justify-between gap-2">
-                  <p className="text-gray-500 text-[10px]">
-                    {new Date(item.date).toLocaleDateString("en-US", {
+                <div className="">
+                  <span className="line-clamp-1">{item.prompt}</span>
+                  <span className="text-gray-500 text-[10px]">
+                    {new Date(item.createdAt).toLocaleDateString("en-US", {
                       month: "2-digit",
                       day: "2-digit",
                       year: "2-digit",
                     }) +
                       " " +
-                      new Date(item.date).toLocaleTimeString("en-US", {
+                      new Date(item.createdAt).toLocaleTimeString("en-US", {
                         hour: "2-digit",
                         minute: "2-digit",
                         second: "2-digit",
                         hour12: false,
                       })}
-                  </p>
-                  {currentCommit === item.oid ||
-                  (index === 0 && currentCommit === null) ? (
-                    <span className="text-blue-500 bg-blue-500/10 border border-blue-500/20 rounded-full text-[10px] px-2 py-0.5">
-                      Current version
-                    </span>
-                  ) : (
-                    !project?.private && (
-                      <Button
-                        variant="link"
-                        size="xss"
-                        className="text-gray-400 hover:text-gray-200"
-                        onClick={() => {
-                          if (index === 0) {
-                            setCurrentCommit(null);
-                          } else {
-                            setCurrentCommit(item.oid);
-                          }
-                        }}
-                      >
-                        See version
-                      </Button>
-                    )
-                  )}
+                  </span>
                 </div>
+                <Button
+                  variant="sky"
+                  size="xs"
+                  onClick={() => {
+                    setHtml(item.html);
+                  }}
+                >
+                  Select
+                </Button>
               </li>
             ))}
           </ul>

components/editor/index.tsx

@@ -1,154 +1,341 @@
 "use client";
-import { useMemo, useRef, useState, useEffect } from "react";
-import { useCopyToClipboard, useMount } from "react-use";
-import { CopyIcon } from "lucide-react";
+import { useRef, useState } from "react";
 import { toast } from "sonner";
-import classNames from "classnames";
 import { editor } from "monaco-editor";
 import Editor from "@monaco-editor/react";
+import { CopyIcon } from "lucide-react";
+import {
+  useCopyToClipboard,
+  useEvent,
+  useLocalStorage,
+  useMount,
+  useUnmount,
+  useUpdateEffect,
+} from "react-use";
+import classNames from "classnames";
+import { useRouter, useSearchParams } from "next/navigation";
 
-import { useEditor } from "@/hooks/useEditor";
 import { Header } from "@/components/editor/header";
-import { useAi } from "@/hooks/useAi";
+import { Footer } from "@/components/editor/footer";
 import { defaultHTML } from "@/lib/consts";
+import { Preview } from "@/components/editor/preview";
+import { useEditor } from "@/hooks/useEditor";
+import { AskAI } from "@/components/editor/ask-ai";
+import { DeployButton } from "./deploy-button";
+import { Project } from "@/types";
+import { SaveButton } from "./save-button";
+import { LoadProject } from "../my-projects/load-project";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
 
-import { ListPages } from "./pages";
-import { AskAi } from "./ask-ai";
-import { Preview } from "./preview";
-import { SaveChangesPopup } from "./save-changes-popup";
-import Loading from "../loading";
-import { LivePreviewRef } from "./live-preview";
-
-export const AppEditor = ({
-  namespace,
-  repoId,
-  isNew = false,
-}: {
-  namespace?: string;
-  repoId?: string;
-  isNew?: boolean;
-}) => {
-  const {
-    project,
-    setPages,
-    files,
-    currentPageData,
-    currentTab,
-    currentCommit,
-    hasUnsavedChanges,
-    saveChanges,
-    pages,
-  } = useEditor(namespace, repoId);
-  const livePreviewRef = useRef<LivePreviewRef>(null);
-  const { isAiWorking } = useAi(undefined, livePreviewRef);
+export const AppEditor = ({ project }: { project?: Project | null }) => {
+  const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
   const [, copyToClipboard] = useCopyToClipboard();
-  const [showSavePopup, setShowSavePopup] = useState(false);
+  const { html, setHtml, htmlHistory, setHtmlHistory, prompts, setPrompts } =
+    useEditor(project?.html ?? (htmlStorage as string) ?? defaultHTML);
+  // get query params from URL
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const deploy = searchParams.get("deploy") === "true";
 
-  const monacoRef = useRef<any>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const preview = useRef<HTMLDivElement>(null);
   const editor = useRef<HTMLDivElement>(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const resizer = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const monacoRef = useRef<any>(null);
+
+  const [currentTab, setCurrentTab] = useState("chat");
+  const [device, setDevice] = useState<"desktop" | "mobile">("desktop");
+  const [isResizing, setIsResizing] = useState(false);
+  const [isAiWorking, setIsAiWorking] = useState(false);
+  const [isEditableModeEnabled, setIsEditableModeEnabled] = useState(false);
+  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  /**
+   * Resets the layout based on screen size
+   * - For desktop: Sets editor to 1/3 width and preview to 2/3
+   * - For mobile: Removes inline styles to let CSS handle it
+   */
+  const resetLayout = () => {
+    if (!editor.current || !preview.current) return;
+
+    // lg breakpoint is 1024px based on useBreakpoint definition and Tailwind defaults
+    if (window.innerWidth >= 1024) {
+      // Set initial 1/3 - 2/3 sizes for large screens, accounting for resizer width
+      const resizerWidth = resizer.current?.offsetWidth ?? 8; // w-2 = 0.5rem = 8px
+      const availableWidth = window.innerWidth - resizerWidth;
+      const initialEditorWidth = availableWidth / 3; // Editor takes 1/3 of space
+      const initialPreviewWidth = availableWidth - initialEditorWidth; // Preview takes 2/3
+      editor.current.style.width = `${initialEditorWidth}px`;
+      preview.current.style.width = `${initialPreviewWidth}px`;
+    } else {
+      // Remove inline styles for smaller screens, let CSS flex-col handle it
+      editor.current.style.width = "";
+      preview.current.style.width = "";
+    }
+  };
+
+  /**
+   * Handles resizing when the user drags the resizer
+   * Ensures minimum widths are maintained for both panels
+   */
+  const handleResize = (e: MouseEvent) => {
+    if (!editor.current || !preview.current || !resizer.current) return;
+
+    const resizerWidth = resizer.current.offsetWidth;
+    const minWidth = 100; // Minimum width for editor/preview
+    const maxWidth = window.innerWidth - resizerWidth - minWidth;
+
+    const editorWidth = e.clientX;
+    const clampedEditorWidth = Math.max(
+      minWidth,
+      Math.min(editorWidth, maxWidth)
+    );
+    const calculatedPreviewWidth =
+      window.innerWidth - clampedEditorWidth - resizerWidth;
+
+    editor.current.style.width = `${clampedEditorWidth}px`;
+    preview.current.style.width = `${calculatedPreviewWidth}px`;
+  };
+
+  const handleMouseDown = () => {
+    setIsResizing(true);
+    document.addEventListener("mousemove", handleResize);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+
+  const handleMouseUp = () => {
+    setIsResizing(false);
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", handleMouseUp);
+  };
 
   useMount(() => {
-    if (isNew) {
-      setPages([
-        {
-          path: "index.html",
-          html: defaultHTML,
+    if (deploy && project?._id) {
+      toast.success("Your project is deployed! 🎉", {
+        action: {
+          label: "See Project",
+          onClick: () => {
+            window.open(
+              `https://huggingface.co/spaces/${project?.space_id}`,
+              "_blank"
+            );
+          },
         },
-      ]);
+      });
+      router.replace(`/projects/${project?.space_id}`);
+    }
+    if (htmlStorage) {
+      removeHtmlStorage();
+      toast.warning("Previous HTML content restored from local storage.");
+    }
+
+    resetLayout();
+    if (!resizer.current) return;
+    resizer.current.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("resize", resetLayout);
+  });
+  useUnmount(() => {
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", handleMouseUp);
+    if (resizer.current) {
+      resizer.current.removeEventListener("mousedown", handleMouseDown);
+    }
+    window.removeEventListener("resize", resetLayout);
+  });
+
+  // Prevent accidental navigation away when AI is working or content has changed
+  useEvent("beforeunload", (e) => {
+    if (isAiWorking || !isTheSameHtml(html)) {
+      e.preventDefault();
+      return "";
     }
   });
 
-  useEffect(() => {
-    if (hasUnsavedChanges && !isAiWorking) {
-      setShowSavePopup(true);
+  useUpdateEffect(() => {
+    if (currentTab === "chat") {
+      // Reset editor width when switching to reasoning tab
+      resetLayout();
+      // re-add the event listener for resizing
+      if (resizer.current) {
+        resizer.current.addEventListener("mousedown", handleMouseDown);
+      }
     } else {
-      setShowSavePopup(false);
+      if (preview.current) {
+        // Reset preview width when switching to preview tab
+        preview.current.style.width = "100%";
+      }
     }
-  }, [hasUnsavedChanges, isAiWorking]);
+  }, [currentTab]);
+
+  const handleEditorValidation = (markers: editor.IMarker[]) => {
+    console.log("Editor validation markers:", markers);
+  };
 
   return (
-    <section className="h-screen w-full bg-neutral-950 flex flex-col">
-      <Header />
-      <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full relative">
-        <div
-          ref={editor}
-          className={classNames(
-            "bg-neutral-900 relative flex h-full max-h-[calc(100dvh-47px)] w-full flex-col lg:max-w-[600px] transition-all duration-200",
-            {
-              "max-lg:hidden lg:!w-[0px] overflow-hidden":
-                currentTab !== "chat",
-            }
-          )}
-        >
-          <ListPages />
-          <CopyIcon
-            className="size-4 absolute top-14 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
-            onClick={() => {
-              copyToClipboard(currentPageData.html);
-              toast.success("HTML copied to clipboard!");
-            }}
-          />
-          <Editor
-            defaultLanguage="html"
-            theme="vs-dark"
-            loading={<Loading overlay={false} />}
-            className="h-full absolute left-0 top-0 lg:min-w-[600px]"
-            options={{
-              colorDecorators: true,
-              fontLigatures: true,
-              theme: "vs-dark",
-              minimap: { enabled: false },
-              scrollbar: {
-                horizontal: "hidden",
-              },
-              wordWrap: "on",
-              readOnly: !!isAiWorking || !!currentCommit,
-              readOnlyMessage: {
-                value: currentCommit
-                  ? "You can't edit the code, as this is an old version of the project."
-                  : "Wait for DeepSite to finish working...",
-                isTrusted: true,
-              },
-            }}
-            value={currentPageData.html}
-            onChange={(value) => {
-              const newValue = value ?? "";
-              setPages((prev) =>
-                prev.map((page) =>
-                  page.path === currentPageData.path
-                    ? { ...page, html: newValue }
-                    : page
-                )
-              );
-            }}
-            onMount={(editor, monaco) => {
-              editorRef.current = editor;
-              monacoRef.current = monaco;
-            }}
-          />
-          <AskAi
-            project={project}
-            files={files}
-            isNew={isNew}
-            onScrollToBottom={() => {
-              editorRef.current?.revealLine(
-                editorRef.current?.getModel()?.getLineCount() ?? 0
-              );
-            }}
-          />
-        </div>
-        <Preview ref={livePreviewRef} isNew={isNew} />
-      </main>
+    <section className="h-[100dvh] bg-neutral-950 flex flex-col">
+      <Header tab={currentTab} onNewTab={setCurrentTab}>
+        <LoadProject
+          onSuccess={(project: Project) => {
+            router.push(`/projects/${project.space_id}`);
+          }}
+        />
+        {project?._id ? (
+          <SaveButton html={html} prompts={prompts} />
+        ) : (
+          <DeployButton html={html} prompts={prompts} />
+        )}
+      </Header>
+      <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full max-lg:h-[calc(100%-82px)] relative">
+        {currentTab === "chat" && (
+          <>
+            <div
+              ref={editor}
+              className="bg-neutral-900 relative flex-1 overflow-hidden h-full flex flex-col gap-2 pb-3"
+            >
+              <CopyIcon
+                className="size-4 absolute top-2 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
+                onClick={() => {
+                  copyToClipboard(html);
+                  toast.success("HTML copied to clipboard!");
+                }}
+              />
+              <Editor
+                defaultLanguage="html"
+                theme="vs-dark"
+                className={classNames(
+                  "h-full bg-neutral-900 transition-all duration-200 absolute left-0 top-0",
+                  {
+                    "pointer-events-none": isAiWorking,
+                  }
+                )}
+                options={{
+                  colorDecorators: true,
+                  fontLigatures: true,
+                  theme: "vs-dark",
+                  minimap: { enabled: false },
+                  scrollbar: {
+                    horizontal: "hidden",
+                  },
+                  wordWrap: "on",
+                }}
+                value={html}
+                onChange={(value) => {
+                  const newValue = value ?? "";
+                  setHtml(newValue);
+                }}
+                onMount={(editor, monaco) => {
+                  editorRef.current = editor;
+                  monacoRef.current = monaco;
+                }}
+                onValidate={handleEditorValidation}
+              />
+              <AskAI
+                html={html}
+                setHtml={(newHtml: string) => {
+                  setHtml(newHtml);
+                }}
+                htmlHistory={htmlHistory}
+                onSuccess={(
+                  finalHtml: string,
+                  p: string,
+                  updatedLines?: number[][]
+                ) => {
+                  const currentHistory = [...htmlHistory];
+                  currentHistory.unshift({
+                    html: finalHtml,
+                    createdAt: new Date(),
+                    prompt: p,
+                  });
+                  setHtmlHistory(currentHistory);
+                  setSelectedElement(null);
+                  // if xs or sm
+                  if (window.innerWidth <= 1024) {
+                    setCurrentTab("preview");
+                  }
+                  if (updatedLines && updatedLines?.length > 0) {
+                    const decorations = updatedLines.map((line) => ({
+                      range: new monacoRef.current.Range(
+                        line[0],
+                        1,
+                        line[1],
+                        1
+                      ),
+                      options: {
+                        inlineClassName: "matched-line",
+                      },
+                    }));
+                    setTimeout(() => {
+                      editorRef?.current
+                        ?.getModel()
+                        ?.deltaDecorations([], decorations);
 
-      {/* Save Changes Popup */}
-      <SaveChangesPopup
-        isOpen={showSavePopup}
-        onClose={() => setShowSavePopup(false)}
-        onSave={saveChanges}
-        hasUnsavedChanges={hasUnsavedChanges}
-        pages={pages}
-        project={project}
+                      editorRef.current?.revealLine(updatedLines[0][0]);
+                    }, 100);
+                  }
+                }}
+                isAiWorking={isAiWorking}
+                setisAiWorking={setIsAiWorking}
+                onNewPrompt={(prompt: string) => {
+                  setPrompts((prev) => [...prev, prompt]);
+                }}
+                onScrollToBottom={() => {
+                  editorRef.current?.revealLine(
+                    editorRef.current?.getModel()?.getLineCount() ?? 0
+                  );
+                }}
+                isEditableModeEnabled={isEditableModeEnabled}
+                setIsEditableModeEnabled={setIsEditableModeEnabled}
+                selectedElement={selectedElement}
+                setSelectedElement={setSelectedElement}
+              />
+            </div>
+            <div
+              ref={resizer}
+              className="bg-neutral-800 hover:bg-sky-500 active:bg-sky-500 w-1.5 cursor-col-resize h-full max-lg:hidden"
+            />
+          </>
+        )}
+        <Preview
+          html={html}
+          isResizing={isResizing}
+          isAiWorking={isAiWorking}
+          ref={preview}
+          device={device}
+          currentTab={currentTab}
+          isEditableModeEnabled={isEditableModeEnabled}
+          iframeRef={iframeRef}
+          onClickElement={(element) => {
+            setIsEditableModeEnabled(false);
+            setSelectedElement(element);
+            setCurrentTab("chat");
+          }}
+        />
+      </main>
+      <Footer
+        onReset={() => {
+          if (isAiWorking) {
+            toast.warning("Please wait for the AI to finish working.");
+            return;
+          }
+          if (
+            window.confirm("You're about to reset the editor. Are you sure?")
+          ) {
+            setHtml(defaultHTML);
+            removeHtmlStorage();
+            editorRef.current?.revealLine(
+              editorRef.current?.getModel()?.getLineCount() ?? 0
+            );
+          }
+        }}
+        htmlHistory={htmlHistory}
+        setHtml={setHtml}
+        iframeRef={iframeRef}
+        device={device}
+        setDevice={setDevice}
       />
     </section>
   );

components/editor/live-preview/index.tsx

@@ -1,165 +0,0 @@
-"use client";
-
-import {
-  useState,
-  useEffect,
-  useRef,
-  forwardRef,
-  useImperativeHandle,
-} from "react";
-import classNames from "classnames";
-
-import { Button } from "@/components/ui/button";
-import { Maximize, Minimize } from "lucide-react";
-
-interface LivePreviewProps {
-  currentPageData: { path: string; html: string } | undefined;
-  isAiWorking: boolean;
-  defaultHTML: string;
-  className?: string;
-}
-
-export interface LivePreviewRef {
-  reset: () => void;
-}
-
-export const LivePreview = forwardRef<LivePreviewRef, LivePreviewProps>(
-  ({ currentPageData, isAiWorking, defaultHTML, className }, ref) => {
-    const [isMaximized, setIsMaximized] = useState(false);
-    const [displayedHtml, setDisplayedHtml] = useState<string>("");
-    const latestHtmlRef = useRef<string>("");
-    const displayedHtmlRef = useRef<string>("");
-    const intervalRef = useRef<NodeJS.Timeout | null>(null);
-
-    const reset = () => {
-      setIsMaximized(false);
-      setDisplayedHtml("");
-      latestHtmlRef.current = "";
-      displayedHtmlRef.current = "";
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-
-    useImperativeHandle(ref, () => ({
-      reset,
-    }));
-
-    useEffect(() => {
-      displayedHtmlRef.current = displayedHtml;
-    }, [displayedHtml]);
-
-    useEffect(() => {
-      if (currentPageData?.html && currentPageData.html !== defaultHTML) {
-        latestHtmlRef.current = currentPageData.html;
-      }
-    }, [currentPageData?.html, defaultHTML]);
-
-    useEffect(() => {
-      if (!currentPageData?.html || currentPageData.html === defaultHTML) {
-        return;
-      }
-
-      if (!displayedHtml || !isAiWorking) {
-        setDisplayedHtml(currentPageData.html);
-        if (intervalRef.current) {
-          clearInterval(intervalRef.current);
-          intervalRef.current = null;
-        }
-        return;
-      }
-
-      if (isAiWorking && !intervalRef.current) {
-        intervalRef.current = setInterval(() => {
-          if (
-            latestHtmlRef.current &&
-            latestHtmlRef.current !== displayedHtmlRef.current
-          ) {
-            setDisplayedHtml(latestHtmlRef.current);
-          }
-        }, 3000);
-      }
-    }, [currentPageData?.html, defaultHTML, isAiWorking, displayedHtml]);
-
-    useEffect(() => {
-      if (!isAiWorking && intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-        if (latestHtmlRef.current) {
-          setDisplayedHtml(latestHtmlRef.current);
-        }
-      }
-    }, [isAiWorking]);
-
-    useEffect(() => {
-      return () => {
-        if (intervalRef.current) {
-          clearInterval(intervalRef.current);
-          intervalRef.current = null;
-        }
-      };
-    }, []);
-
-    if (!displayedHtml) {
-      return null;
-    }
-
-    return (
-      <div
-        className={classNames(
-          "absolute z-40 bg-white/95 backdrop-blur-sm border border-neutral-200 shadow-lg transition-all duration-500 ease-out transform scale-100 opacity-100 animate-in slide-in-from-bottom-4 zoom-in-95 rounded-xl",
-          {
-            "shadow-green-500/20 shadow-2xl border-green-200": isAiWorking,
-          },
-          className
-        )}
-      >
-        <div
-          className={classNames(
-            "flex flex-col animate-in fade-in duration-300",
-            isMaximized ? "w-[60dvw] h-[80dvh]" : "w-80 h-96"
-          )}
-        >
-          <div className="flex items-center justify-between p-3 border-b border-neutral-200">
-            <div className="flex items-center gap-2">
-              <div className="size-2 bg-green-500 rounded-full animate-pulse shadow-sm shadow-green-500/50"></div>
-              <span className="text-xs font-medium text-neutral-800">
-                Live Preview
-              </span>
-              {isAiWorking && (
-                <span className="text-xs text-green-600 font-medium animate-pulse">
-                  • Updating
-                </span>
-              )}
-            </div>
-            <div className="flex items-center gap-1">
-              <Button
-                variant="outline"
-                size="iconXs"
-                className="!rounded-md !border-neutral-200 hover:bg-neutral-50"
-                onClick={() => setIsMaximized(!isMaximized)}
-              >
-                {isMaximized ? (
-                  <Minimize className="text-neutral-400 size-3" />
-                ) : (
-                  <Maximize className="text-neutral-400 size-3" />
-                )}
-              </Button>
-            </div>
-          </div>
-          <div className="flex-1 bg-black overflow-hidden relative rounded-b-xl">
-            <iframe
-              className="w-full h-full border-0"
-              srcDoc={displayedHtml}
-              sandbox="allow-scripts allow-same-origin"
-              title="Live Preview"
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-LivePreview.displayName = "LivePreview";

components/editor/pages/index.tsx

@@ -1,24 +0,0 @@
-import { Page } from "@/types";
-import { ListPagesItem } from "./page";
-import { useEditor } from "@/hooks/useEditor";
-
-export function ListPages() {
-  const { pages, setPages, currentPage, setCurrentPage } = useEditor();
-  return (
-    <div className="w-full flex items-center justify-start bg-neutral-950 overflow-auto flex-nowrap min-h-[45px]">
-      {pages.map((page: Page, i: number) => (
-        <ListPagesItem
-          key={page.path ?? i}
-          page={page}
-          currentPage={currentPage}
-          onSelectPage={setCurrentPage}
-          onDeletePage={(path) => {
-            setPages(pages.filter((page) => page.path !== path));
-            setCurrentPage("index.html");
-          }}
-          index={i}
-        />
-      ))}
-    </div>
-  );
-}

components/editor/pages/page.tsx

@@ -1,56 +0,0 @@
-import classNames from "classnames";
-import { FileCode, XIcon } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { Page } from "@/types";
-
-export function ListPagesItem({
-  page,
-  currentPage,
-  onSelectPage,
-  onDeletePage,
-  index,
-}: {
-  page: Page;
-  currentPage: string;
-  onSelectPage: (path: string, newPath?: string) => void;
-  onDeletePage: (path: string) => void;
-  index: number;
-}) {
-  return (
-    <div
-      key={index}
-      className={classNames(
-        "pl-6 pr-1 py-3 text-neutral-400 cursor-pointer text-sm hover:bg-neutral-900 flex items-center justify-center gap-1 group text-nowrap border-r border-neutral-800",
-        {
-          "bg-neutral-900 !text-white": currentPage === page.path,
-          "!pr-6": index === 0, // Ensure the first item has padding on the right
-        }
-      )}
-      onClick={() => onSelectPage(page.path)}
-      title={page.path}
-    >
-      <FileCode className="size-4 mr-1" />
-      {page.path}
-      {index > 0 && (
-        <Button
-          size="iconXsss"
-          variant="ghost"
-          className="group-hover:opacity-100 opacity-0 !h-auto"
-          onClick={(e) => {
-            e.stopPropagation();
-            if (
-              window.confirm(
-                "Are you sure you want to delete this page? This action cannot be undone."
-              )
-            ) {
-              onDeletePage(page.path);
-            }
-          }}
-        >
-          <XIcon className="h-3 text-neutral-400 cursor-pointer hover:text-neutral-300" />
-        </Button>
-      )}
-    </div>
-  );
-}

components/editor/preview/index.tsx

@@ -1,358 +1,176 @@
 "use client";
-
-import { useRef, useState, useEffect, forwardRef } from "react";
 import { useUpdateEffect } from "react-use";
+import { useMemo, useState } from "react";
 import classNames from "classnames";
+import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
 import { GridPattern } from "@/components/magic-ui/grid-pattern";
-import { useEditor } from "@/hooks/useEditor";
-import { useAi } from "@/hooks/useAi";
 import { htmlTagToText } from "@/lib/html-tag-to-text";
-import { AnimatedBlobs } from "@/components/animated-blobs";
-import { AiLoading } from "../ask-ai/loading";
-import { defaultHTML } from "@/lib/consts";
-import { Button } from "@/components/ui/button";
-import { LivePreview, LivePreviewRef } from "../live-preview";
-import { HistoryNotification } from "../history-notification";
-import { AlertCircle } from "lucide-react";
-import { api } from "@/lib/api";
-import { toast } from "sonner";
-import Loading from "@/components/loading";
-
-export const Preview = forwardRef<LivePreviewRef, { isNew: boolean }>(
-  ({ isNew }, ref) => {
-    const {
-      project,
-      device,
-      isLoadingProject,
-      currentTab,
-      currentCommit,
-      setCurrentCommit,
-      currentPageData,
-      pages,
-      setPages,
-      setCurrentPage,
-      isSameHtml,
-    } = useEditor();
-    const {
-      isEditableModeEnabled,
-      setSelectedElement,
-      isAiWorking,
-      globalAiLoading,
-    } = useAi();
-
-    const iframeRef = useRef<HTMLIFrameElement>(null);
-
-    const [hoveredElement, setHoveredElement] = useState<{
-      tagName: string;
-      rect: { top: number; left: number; width: number; height: number };
-    } | null>(null);
-    const [isPromotingVersion, setIsPromotingVersion] = useState(false);
-    const [stableHtml, setStableHtml] = useState<string>("");
-
-    useEffect(() => {
-      if (!isAiWorking && !globalAiLoading && currentPageData?.html) {
-        setStableHtml(currentPageData.html);
-      }
-    }, [isAiWorking, globalAiLoading, currentPageData?.html]);
-
-    useEffect(() => {
-      if (
-        currentPageData?.html &&
-        !stableHtml &&
-        !isAiWorking &&
-        !globalAiLoading
-      ) {
-        setStableHtml(currentPageData.html);
-      }
-    }, [currentPageData?.html, stableHtml, isAiWorking, globalAiLoading]);
 
-    useUpdateEffect(() => {
-      const cleanupListeners = () => {
-        if (iframeRef?.current?.contentDocument) {
-          const iframeDocument = iframeRef.current.contentDocument;
-          iframeDocument.removeEventListener("mouseover", handleMouseOver);
-          iframeDocument.removeEventListener("mouseout", handleMouseOut);
-          iframeDocument.removeEventListener("click", handleClick);
-        }
-      };
-
-      if (iframeRef?.current) {
-        const iframeDocument = iframeRef.current.contentDocument;
-        if (iframeDocument) {
-          cleanupListeners();
-
-          if (isEditableModeEnabled) {
-            iframeDocument.addEventListener("mouseover", handleMouseOver);
-            iframeDocument.addEventListener("mouseout", handleMouseOut);
-            iframeDocument.addEventListener("click", handleClick);
-          }
+export const Preview = ({
+  html,
+  isResizing,
+  isAiWorking,
+  ref,
+  device,
+  currentTab,
+  iframeRef,
+  isEditableModeEnabled,
+  onClickElement,
+}: {
+  html: string;
+  isResizing: boolean;
+  isAiWorking: boolean;
+  ref: React.RefObject<HTMLDivElement | null>;
+  iframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  device: "desktop" | "mobile";
+  currentTab: string;
+  isEditableModeEnabled?: boolean;
+  onClickElement?: (element: HTMLElement) => void;
+}) => {
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  // add event listener to the iframe to track hovered elements
+  const handleMouseOver = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (
+          hoveredElement !== targetElement &&
+          targetElement !== iframeDocument.body
+        ) {
+          setHoveredElement(targetElement);
+          targetElement.classList.add("hovered-element");
+        } else {
+          return setHoveredElement(null);
         }
       }
-
-      return cleanupListeners;
-    }, [iframeRef, isEditableModeEnabled]);
-
-    const promoteVersion = async () => {
-      setIsPromotingVersion(true);
-      await api
-        .post(
-          `/me/projects/${project?.space_id}/commits/${currentCommit}/promote`
-        )
-        .then((res) => {
-          if (res.data.ok) {
-            setCurrentCommit(null);
-            setPages(res.data.pages);
-            setCurrentPage(res.data.pages[0].path);
-            toast.success("Version promoted successfully");
-          }
-        })
-        .catch((err) => {
-          toast.error(err.response.data.error);
-        });
-      setIsPromotingVersion(false);
-    };
-
-    const handleMouseOver = (event: MouseEvent) => {
-      if (iframeRef?.current) {
-        const iframeDocument = iframeRef.current.contentDocument;
-        if (iframeDocument) {
-          const targetElement = event.target as HTMLElement;
-          if (
-            hoveredElement?.tagName !== targetElement.tagName ||
-            hoveredElement?.rect.top !==
-              targetElement.getBoundingClientRect().top ||
-            hoveredElement?.rect.left !==
-              targetElement.getBoundingClientRect().left ||
-            hoveredElement?.rect.width !==
-              targetElement.getBoundingClientRect().width ||
-            hoveredElement?.rect.height !==
-              targetElement.getBoundingClientRect().height
-          ) {
-            if (targetElement !== iframeDocument.body) {
-              const rect = targetElement.getBoundingClientRect();
-              setHoveredElement({
-                tagName: targetElement.tagName,
-                rect: {
-                  top: rect.top,
-                  left: rect.left,
-                  width: rect.width,
-                  height: rect.height,
-                },
-              });
-              targetElement.classList.add("hovered-element");
-            } else {
-              return setHoveredElement(null);
-            }
-          }
+    }
+  };
+  const handleMouseOut = () => {
+    setHoveredElement(null);
+  };
+  const handleClick = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (targetElement !== iframeDocument.body) {
+          onClickElement?.(targetElement);
         }
       }
-    };
-    const handleMouseOut = () => {
-      setHoveredElement(null);
-    };
-    const handleClick = (event: MouseEvent) => {
-      if (iframeRef?.current) {
+    }
+  };
+
+  useUpdateEffect(() => {
+    const cleanupListeners = () => {
+      if (iframeRef?.current?.contentDocument) {
         const iframeDocument = iframeRef.current.contentDocument;
-        if (iframeDocument) {
-          const targetElement = event.target as HTMLElement;
-          if (targetElement !== iframeDocument.body) {
-            setSelectedElement(targetElement);
-          }
-        }
+        iframeDocument.removeEventListener("mouseover", handleMouseOver);
+        iframeDocument.removeEventListener("mouseout", handleMouseOut);
+        iframeDocument.removeEventListener("click", handleClick);
       }
     };
 
-    const handleCustomNavigation = (event: MouseEvent) => {
-      if (iframeRef?.current) {
-        const iframeDocument = iframeRef.current.contentDocument;
-        if (iframeDocument) {
-          const findClosestAnchor = (
-            element: HTMLElement
-          ): HTMLAnchorElement | null => {
-            let current = element;
-            while (current && current !== iframeDocument.body) {
-              if (current.tagName === "A") {
-                return current as HTMLAnchorElement;
-              }
-              current = current.parentElement as HTMLElement;
-            }
-            return null;
-          };
-
-          const anchorElement = findClosestAnchor(event.target as HTMLElement);
-          if (anchorElement) {
-            let href = anchorElement.getAttribute("href");
-            if (href) {
-              event.stopPropagation();
-              event.preventDefault();
-
-              if (href.includes("#") && !href.includes(".html")) {
-                const targetElement = iframeDocument.querySelector(href);
-                if (targetElement) {
-                  targetElement.scrollIntoView({ behavior: "smooth" });
-                }
-                return;
-              }
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        // Clean up existing listeners first
+        cleanupListeners();
 
-              href = href.split(".html")[0] + ".html";
-              const isPageExist = pages.some((page) => page.path === href);
-              if (isPageExist) {
-                setCurrentPage(href);
-              }
-            }
-          }
+        if (isEditableModeEnabled) {
+          iframeDocument.addEventListener("mouseover", handleMouseOver);
+          iframeDocument.addEventListener("mouseout", handleMouseOut);
+          iframeDocument.addEventListener("click", handleClick);
         }
       }
-    };
-
-    return (
-      <div
+    }
+
+    // Clean up when component unmounts or dependencies change
+    return cleanupListeners;
+  }, [iframeRef, isEditableModeEnabled]);
+
+  const selectedElement = useMemo(() => {
+    if (!isEditableModeEnabled) return null;
+    if (!hoveredElement) return null;
+    return hoveredElement;
+  }, [hoveredElement, isEditableModeEnabled]);
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        "w-full border-l border-gray-900 h-full relative z-0 flex items-center justify-center",
+        {
+          "lg:p-4": currentTab !== "preview",
+          "max-lg:h-0": currentTab === "chat",
+          "max-lg:h-full": currentTab === "preview",
+        }
+      )}
+      onClick={(e) => {
+        if (isAiWorking) {
+          e.preventDefault();
+          e.stopPropagation();
+          toast.warning("Please wait for the AI to finish working.");
+        }
+      }}
+    >
+      <GridPattern
+        x={-1}
+        y={-1}
+        strokeDasharray={"4 2"}
+        className={cn(
+          "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)]"
+        )}
+      />
+      {!isAiWorking && hoveredElement && selectedElement && (
+        <div
+          className="cursor-pointer absolute bg-sky-500/10 border-[2px] border-dashed border-sky-500 rounded-r-lg rounded-b-lg p-3 z-10 pointer-events-none"
+          style={{
+            top:
+              selectedElement.getBoundingClientRect().top +
+              (currentTab === "preview" ? 0 : 24),
+            left:
+              selectedElement.getBoundingClientRect().left +
+              (currentTab === "preview" ? 0 : 24),
+            width: selectedElement.getBoundingClientRect().width,
+            height: selectedElement.getBoundingClientRect().height,
+          }}
+        >
+          <span className="bg-sky-500 rounded-t-md text-sm text-neutral-100 px-2 py-0.5 -translate-y-7 absolute top-0 left-0">
+            {htmlTagToText(selectedElement.tagName.toLowerCase())}
+          </span>
+        </div>
+      )}
+      <iframe
+        id="preview-iframe"
+        ref={iframeRef}
+        title="output"
         className={classNames(
-          "bg-neutral-900/30 w-full h-[calc(100dvh-57px)] flex flex-col items-center justify-center relative z-1 lg:border-l border-neutral-800",
+          "w-full select-none transition-all duration-200 bg-black h-full",
           {
-            "max-lg:h-0": currentTab === "chat",
-            "max-lg:h-full": currentTab === "preview",
+            "pointer-events-none": isResizing || isAiWorking,
+            "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
+              device === "mobile",
+            "lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:rounded-[24px]":
+              currentTab !== "preview" && device === "desktop",
           }
         )}
-      >
-        <GridPattern
-          x={-1}
-          y={-1}
-          strokeDasharray={"4 2"}
-          className={cn(
-            "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)] opacity-40"
-          )}
-        />
-        {!isAiWorking && hoveredElement && isEditableModeEnabled && (
-          <div
-            className="cursor-pointer absolute bg-sky-500/10 border-[2px] border-dashed border-sky-500 rounded-r-lg rounded-b-lg p-3 z-10 pointer-events-none"
-            style={{
-              top: hoveredElement.rect.top,
-              left: hoveredElement.rect.left,
-              width: hoveredElement.rect.width,
-              height: hoveredElement.rect.height,
-            }}
-          >
-            <span className="bg-sky-500 rounded-t-md text-sm text-neutral-100 px-2 py-0.5 -translate-y-7 absolute top-0 left-0">
-              {htmlTagToText(hoveredElement.tagName.toLowerCase())}
-            </span>
-          </div>
-        )}
-        {isNew && !isLoadingProject && !globalAiLoading && isSameHtml ? (
-          <iframe
-            className={classNames(
-              "w-full select-none transition-all duration-200 bg-black h-full",
-              {
-                "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
-                  device === "mobile",
-              }
-            )}
-            srcDoc={defaultHTML}
-          />
-        ) : (isNew && globalAiLoading) || isLoadingProject ? (
-          <div className="w-full h-full flex items-center justify-center relative">
-            <div className="py-10 w-full relative z-1 max-w-3xl mx-auto text-center">
-              <AiLoading
-                text={isLoadingProject ? "Fetching your project..." : undefined}
-                className="flex-col"
-              />
-              <AnimatedBlobs />
-              <AnimatedBlobs />
-            </div>
-            {!isLoadingProject && (
-              <LivePreview
-                ref={ref}
-                currentPageData={currentPageData}
-                isAiWorking={isAiWorking}
-                defaultHTML={defaultHTML}
-                className="bottom-4 left-4"
-              />
-            )}
-          </div>
-        ) : (
-          <>
-            <iframe
-              id="preview-iframe"
-              ref={iframeRef}
-              className={classNames(
-                "w-full select-none transition-all duration-200 bg-black h-full",
-                {
-                  "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
-                    device === "mobile",
-                }
-              )}
-              src={
-                currentCommit
-                  ? `https://${project?.space_id?.replaceAll(
-                      "/",
-                      "-"
-                    )}--rev-${currentCommit.slice(0, 7)}.static.hf.space`
-                  : undefined
-              }
-              srcDoc={!currentCommit ? stableHtml : undefined}
-              onLoad={
-                !currentCommit
-                  ? () => {
-                      if (iframeRef?.current?.contentWindow?.document?.body) {
-                        iframeRef.current.contentWindow.document.body.scrollIntoView(
-                          {
-                            block: isAiWorking ? "end" : "start",
-                            inline: "nearest",
-                            behavior: isAiWorking ? "instant" : "smooth",
-                          }
-                        );
-                      }
-                      // add event listener to all links in the iframe to handle navigation
-                      if (iframeRef?.current?.contentWindow?.document) {
-                        const links =
-                          iframeRef.current.contentWindow.document.querySelectorAll(
-                            "a"
-                          );
-                        links.forEach((link) => {
-                          link.addEventListener(
-                            "click",
-                            handleCustomNavigation
-                          );
-                        });
-                      }
-                    }
-                  : undefined
-              }
-              sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
-              allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-read; clipboard-write; display-capture; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; serial; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
-            />
-            <div
-              className={classNames(
-                "w-full h-full flex items-center justify-center absolute left-0 top-0 bg-black/40 backdrop-blur-lg transition-all duration-200",
-                {
-                  "opacity-0 pointer-events-none": !globalAiLoading,
-                }
-              )}
-            >
-              <div className="py-10 w-full relative z-1 max-w-3xl mx-auto text-center">
-                <AiLoading
-                  text={
-                    isLoadingProject ? "Fetching your project..." : undefined
-                  }
-                  className="flex-col"
-                />
-                <AnimatedBlobs />
-                <AnimatedBlobs />
-              </div>
-            </div>
-            <HistoryNotification
-              isVisible={!!currentCommit}
-              isPromotingVersion={isPromotingVersion}
-              onPromoteVersion={promoteVersion}
-              onGoBackToCurrent={() => setCurrentCommit(null)}
-            />
-          </>
-        )}
-      </div>
-    );
-  }
-);
-
-Preview.displayName = "Preview";
+        srcDoc={html}
+        onLoad={() => {
+          if (iframeRef?.current?.contentWindow?.document?.body) {
+            iframeRef.current.contentWindow.document.body.scrollIntoView({
+              block: isAiWorking ? "end" : "start",
+              inline: "nearest",
+              behavior: isAiWorking ? "instant" : "smooth",
+            });
+          }
+        }}
+      />
+    </div>
+  );
+};