Initial DeepSite v2 upload

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20-alpine
+USER root
+
+USER 1000
+WORKDIR /usr/src/app
+# Copy package.json and package-lock.json to the container
+COPY --chown=1000 package.json package-lock.json ./
+
+# Copy the rest of the application files to the container
+COPY --chown=1000 . .
+
+RUN npm install
+RUN npm run build
+
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

app/(public)/layout.tsx

@@ -0,0 +1,15 @@
+import Navigation from "@/components/public/navigation";
+
+export default async function PublicLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="min-h-screen bg-black z-1 relative">
+      <div className="background__noisy" />
+      <Navigation />
+      {children}
+    </div>
+  );
+}

app/(public)/page.tsx

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

app/(public)/projects/page.tsx

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

app/actions/auth.ts

@@ -0,0 +1,18 @@
+"use server";
+
+import { headers } from "next/headers";
+
+export async function getAuth() {
+  const authList = await headers();
+  const host = authList.get("host") ?? "localhost:3000";
+  const url = host.includes("/spaces/enzostvs")
+    ? "enzostvs-deepsite.hf.space"
+    : host;
+  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 loginRedirectUrl;
+}

app/actions/projects.ts

@@ -0,0 +1,63 @@
+"use server";
+
+import { isAuthenticated } from "@/lib/auth";
+import { NextResponse } from "next/server";
+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[];
+}> {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return {
+      ok: false,
+      projects: [],
+    };
+  }
+
+  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: JSON.parse(JSON.stringify(projects)) as ProjectType[],
+  };
+}
+
+export async function getProject(
+  namespace: string,
+  repoId: string
+): Promise<ProjectType | null> {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return null;
+  }
+
+  await dbConnect();
+  const project = await Project.findOne({
+    user_id: user.id,
+    namespace,
+    repoId,
+  }).lean();
+
+  if (!project) {
+    return null;
+  }
+
+  return JSON.parse(JSON.stringify(project)) as ProjectType;
+}

app/actions/rewrite-prompt.ts

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

app/api/ask-ai/route.ts

@@ -0,0 +1,510 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { headers } from "next/headers";
+import { InferenceClient } from "@huggingface/inference";
+
+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,
+} from "@/lib/prompts";
+import MY_TOKEN_KEY from "@/lib/get-cookie-name";
+import { Page } from "@/types";
+
+const ipAddresses = new Map();
+
+export async function POST(request: NextRequest) {
+  const authHeaders = await headers();
+  const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
+
+  const body = await request.json();
+  const { prompt, provider, model, redesignMarkdown, previousPrompts, pages } = body;
+
+  if (!model || (!prompt && !redesignMarkdown)) {
+    return NextResponse.json(
+      { ok: false, error: "Missing required fields" },
+      { status: 400 }
+    );
+  }
+
+  const selectedModel = MODELS.find(
+    (m) => m.value === model || m.label === model
+  );
+
+  if (!selectedModel) {
+    return NextResponse.json(
+      { ok: false, error: "Invalid model selected" },
+      { status: 400 }
+    );
+  }
+
+  if (!selectedModel.providers.includes(provider) && provider !== "auto") {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: `The selected model does not support the ${provider} provider.`,
+        openSelectProvider: true,
+      },
+      { status: 400 }
+    );
+  }
+
+  let token = userToken;
+  let billTo: string | null = null;
+
+  /**
+   * Handle local usage token, this bypass the need for a user token
+   * and allows local testing without authentication.
+   * This is useful for development and testing purposes.
+   */
+  if (process.env.HF_TOKEN && process.env.HF_TOKEN.length > 0) {
+    token = process.env.HF_TOKEN;
+  }
+
+  const ip = authHeaders.get("x-forwarded-for")?.includes(",")
+    ? authHeaders.get("x-forwarded-for")?.split(",")[1].trim()
+    : authHeaders.get("x-forwarded-for");
+
+  if (!token) {
+    ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
+    if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) {
+      return NextResponse.json(
+        {
+          ok: false,
+          openLogin: true,
+          message: "Log In to continue using the service",
+        },
+        { status: 429 }
+      );
+    }
+
+    token = process.env.DEFAULT_HF_TOKEN as string;
+    billTo = "huggingface";
+  }
+
+  const DEFAULT_PROVIDER = PROVIDERS.novita;
+  const selectedProvider =
+    provider === "auto"
+      ? PROVIDERS[selectedModel.autoProvider as keyof typeof PROVIDERS]
+      : PROVIDERS[provider as keyof typeof PROVIDERS] ?? DEFAULT_PROVIDER;
+
+  const rewrittenPrompt = prompt;
+
+  // if (prompt?.length < 240) {
+    
+    //rewrittenPrompt = await callAiRewritePrompt(prompt, { token, billTo });
+  // }
+
+  try {
+    const encoder = new TextEncoder();
+    const stream = new TransformStream();
+    const writer = stream.writable.getWriter();
+
+    const response = new NextResponse(stream.readable, {
+      headers: {
+        "Content-Type": "text/plain; charset=utf-8",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      },
+    });
+
+    (async () => {
+      // let completeResponse = "";
+      try {
+        const client = new InferenceClient(token);
+        const chatCompletion = client.chatCompletionStream(
+          {
+            model: selectedModel.value,
+            provider: selectedProvider.id as any,
+            messages: [
+              {
+                role: "system",
+                content: INITIAL_SYSTEM_PROMPT,
+              },
+              ...(pages?.length > 1 ? [{
+                role: "assistant",
+                content: `Here are the current pages:\n\n${pages.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}\n\nNow, please create a new page based on this code. Also here are the previous prompts:\n\n${previousPrompts.map((p: string) => `- ${p}`).join("\n")}`
+              }] : []),
+              {
+                role: "user",
+                content: redesignMarkdown
+                  ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown.`
+                  : rewrittenPrompt,
+              },
+            ],
+            max_tokens: selectedProvider.max_tokens,
+          },
+          billTo ? { billTo } : {}
+        );
+
+        while (true) {
+          const { done, value } = await chatCompletion.next();
+          if (done) {
+            break;
+          }
+
+          const chunk = value.choices[0]?.delta?.content;
+          if (chunk) {
+            await writer.write(encoder.encode(chunk));
+          }
+        }
+      } catch (error: any) {
+        if (error.message?.includes("exceeded your monthly included credits")) {
+          await writer.write(
+            encoder.encode(
+              JSON.stringify({
+                ok: false,
+                openProModal: true,
+                message: error.message,
+              })
+            )
+          );
+        } else {
+          await writer.write(
+            encoder.encode(
+              JSON.stringify({
+                ok: false,
+                message:
+                  error.message ||
+                  "An error occurred while processing your request.",
+              })
+            )
+          );
+        }
+      } finally {
+        await writer?.close();
+      }
+    })();
+
+    return response;
+  } catch (error: any) {
+    return NextResponse.json(
+      {
+        ok: false,
+        openSelectProvider: true,
+        message:
+          error?.message || "An error occurred while processing your request.",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PUT(request: NextRequest) {
+  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, } =
+    body;
+
+  if (!prompt || pages.length === 0) {
+    return NextResponse.json(
+      { ok: false, error: "Missing required fields" },
+      { status: 400 }
+    );
+  }
+
+  const selectedModel = MODELS.find(
+    (m) => m.value === model || m.label === model
+  );
+  if (!selectedModel) {
+    return NextResponse.json(
+      { ok: false, error: "Invalid model selected" },
+      { status: 400 }
+    );
+  }
+
+  let token = userToken;
+  let billTo: string | null = null;
+
+  /**
+   * Handle local usage token, this bypass the need for a user token
+   * and allows local testing without authentication.
+   * This is useful for development and testing purposes.
+   */
+  if (process.env.HF_TOKEN && process.env.HF_TOKEN.length > 0) {
+    token = process.env.HF_TOKEN;
+  }
+
+  const ip = authHeaders.get("x-forwarded-for")?.includes(",")
+    ? authHeaders.get("x-forwarded-for")?.split(",")[1].trim()
+    : authHeaders.get("x-forwarded-for");
+
+  if (!token) {
+    ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
+    if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) {
+      return NextResponse.json(
+        {
+          ok: false,
+          openLogin: true,
+          message: "Log In to continue using the service",
+        },
+        { status: 429 }
+      );
+    }
+
+    token = process.env.DEFAULT_HF_TOKEN as string;
+    billTo = "huggingface";
+  }
+
+  const client = new InferenceClient(token);
+
+  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.id as any,
+        messages: [
+          {
+            role: "system",
+            content: FOLLOW_UP_SYSTEM_PROMPT,
+          },
+          {
+            role: "user",
+            content: previousPrompts
+              ? `Also here are the previous prompts:\n\n${previousPrompts.map((p: string) => `- ${p}`).join("\n")}`
+              : "You are modifying the HTML file based on the user's request.",
+          },
+          {
+            role: "assistant",
+
+            content: `${
+              selectedElementHtml
+                ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\``
+                : ""
+            }. Current pages: ${pages?.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}. ${files?.length > 0 ? `Current images: ${files?.map((f: string) => `- ${f}`).join("\n")}.` : ""}`,
+          },
+          {
+            role: "user",
+            content: prompt,
+          },
+        ],
+        ...(selectedProvider.id !== "sambanova"
+          ? {
+              max_tokens: selectedProvider.max_tokens,
+            }
+          : {}),
+      },
+      billTo ? { billTo } : {}
+    );
+
+    const chunk = response.choices[0]?.message?.content;
+    if (!chunk) {
+      return NextResponse.json(
+        { ok: false, message: "No content returned from the model" },
+        { status: 400 }
+      );
+    }
+
+    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 blockPosition = pageHtml.indexOf(searchBlock);
+              if (blockPosition !== -1) {
+                const beforeText = pageHtml.substring(0, blockPosition);
+                const startLineNumber = beforeText.split("\n").length;
+                const replaceLines = replaceBlock.split("\n").length;
+                const endLineNumber = startLineNumber + replaceLines - 1;
+
+                updatedLines.push([startLineNumber, endLineNumber]);
+                pageHtml = pageHtml.replace(searchBlock, replaceBlock);
+              }
+            }
+
+            position = replaceEndIndex + REPLACE_END.length;
+          }
+
+          updatedPages[pageIndex].html = pageHtml;
+          
+          if (pagePath === '/' || pagePath === '/index' || pagePath === 'index') {
+            newHtml = pageHtml;
+          }
+        }
+      }
+
+      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()
+          });
+        }
+      }
+
+      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 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 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;
+        }
+      }
+
+      return NextResponse.json({
+        ok: true,
+        updatedLines,
+        pages: updatedPages,
+      });
+    } else {
+      return NextResponse.json(
+        { ok: false, message: "No content returned from the model" },
+        { status: 400 }
+      );
+    }
+  } catch (error: any) {
+    if (error.message?.includes("exceeded your monthly included credits")) {
+      return NextResponse.json(
+        {
+          ok: false,
+          openProModal: true,
+          message: error.message,
+        },
+        { status: 402 }
+      );
+    }
+    return NextResponse.json(
+      {
+        ok: false,
+        openSelectProvider: true,
+        message:
+          error.message || "An error occurred while processing your request.",
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/auth/route.ts

@@ -0,0 +1,86 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+  const body = await req.json();
+  const { code } = body;
+
+  if (!code) {
+    return NextResponse.json(
+      { error: "Code is required" },
+      {
+        status: 400,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  const Authorization = `Basic ${Buffer.from(
+    `${process.env.OAUTH_CLIENT_ID}:${process.env.OAUTH_CLIENT_SECRET}`
+  ).toString("base64")}`;
+
+  const host =
+    req.headers.get("host") ?? req.headers.get("origin") ?? "localhost:3000";
+
+  const url = host.includes("/spaces/enzostvs")
+    ? "enzostvs-deepsite.hf.space"
+    : host;
+  const redirect_uri =
+    `${host.includes("localhost") ? "http://" : "https://"}` +
+    url +
+    "/auth/callback";
+  const request_auth = await fetch("https://huggingface.co/oauth/token", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Authorization,
+    },
+    body: new URLSearchParams({
+      grant_type: "authorization_code",
+      code,
+      redirect_uri,
+    }),
+  });
+
+  const response = await request_auth.json();
+  if (!response.access_token) {
+    return NextResponse.json(
+      { error: "Failed to retrieve access token" },
+      {
+        status: 400,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  const userResponse = await fetch("https://huggingface.co/api/whoami-v2", {
+    headers: {
+      Authorization: `Bearer ${response.access_token}`,
+    },
+  });
+
+  if (!userResponse.ok) {
+    return NextResponse.json(
+      { user: null, errCode: userResponse.status },
+      { status: userResponse.status }
+    );
+  }
+  const user = await userResponse.json();
+
+  return NextResponse.json(
+    {
+      access_token: response.access_token,
+      expires_in: response.expires_in,
+      user,
+    },
+    {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+}

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

@@ -0,0 +1,111 @@
+import { NextRequest, NextResponse } from "next/server";
+import { RepoDesignation, uploadFiles } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+
+// No longer need the ImageUpload interface since we're handling FormData with File objects
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  try {
+    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 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 }
+      );
+    }
+
+    // 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

@@ -0,0 +1,276 @@
+import { NextRequest, NextResponse } from "next/server";
+import { RepoDesignation, spaceInfo, uploadFiles, listFiles } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+import { Page } from "@/types";
+
+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 });
+  }
+
+  await dbConnect();
+  const param = await params;
+  const { namespace, repoId } = param;
+
+  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 }
+    );
+  }
+  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}`,
+    };
+
+    const htmlFiles: Page[] = [];
+    const images: string[] = [];
+
+    const allowedImagesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif"];
+    
+    for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
+      if (fileInfo.path.endsWith(".html")) {
+        const res = await fetch(`https://huggingface.co/spaces/${namespace}/${repoId}/raw/main/${fileInfo.path}`);
+        if (res.ok) {
+          const html = await res.text();
+          if (fileInfo.path === "index.html") {
+            htmlFiles.unshift({
+              path: fileInfo.path,
+              html,
+            });
+          } else {
+          htmlFiles.push({
+            path: fileInfo.path,
+              html,
+            });
+          }
+        }
+      }
+      if (fileInfo.type === "directory" && fileInfo.path === "images") {
+        for await (const imageInfo of listFiles({repo, accessToken: user.token as string, path: fileInfo.path})) {
+          if (allowedImagesExtensions.includes(imageInfo.path.split(".").pop() || "")) {
+            images.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${imageInfo.path}`);
+          }
+        }
+      }
+    }
+
+    if (htmlFiles.length === 0) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "No HTML files found",
+        },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(
+      {
+        project: {
+          ...project,
+          pages: htmlFiles,
+          images,
+        },
+        ok: true,
+      },
+      { status: 200 }
+    );
+
+    // 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 }
+      );
+    }
+    return NextResponse.json(
+      { error: error.message, ok: false },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  await dbConnect();
+  const param = await params;
+  const { namespace, repoId } = param;
+  const { pages, prompts } = await req.json();
+
+  const project = await Project.findOne({
+    user_id: user.id,
+    space_id: `${namespace}/${repoId}`,
+  }).lean();
+  if (!project) {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Project not found",
+      },
+      { status: 404 }
+    );
+  }
+
+  const repo: RepoDesignation = {
+    type: "space",
+    name: `${namespace}/${repoId}`,
+  };
+
+  const files: File[] = [];
+  const promptsFile = new File([prompts.join("\n")], "prompts.txt", {
+    type: "text/plain",
+  });
+  files.push(promptsFile);
+  pages.forEach((page: Page) => {
+    const file = new File([page.html], page.path, { type: "text/html" });
+    files.push(file);
+  });
+  await uploadFiles({
+    repo,
+    files,
+    accessToken: user.token as string,
+    commitTitle: `${prompts[prompts.length - 1]} - Follow Up Deployment`,
+  });
+
+  await Project.updateOne(
+    { user_id: user.id, space_id: `${namespace}/${repoId}` },
+    {
+      $set: {
+        prompts: [
+          ...prompts,
+        ],
+      },
+    }
+  );
+  return NextResponse.json({ ok: true }, { status: 200 });
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  await dbConnect();
+  const param = await params;
+  const { namespace, repoId } = param;
+
+  const space = await spaceInfo({
+    name: namespace + "/" + repoId,
+    accessToken: user.token as string,
+    additionalFields: ["author"],
+  });
+
+  if (!space || space.sdk !== "static") {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Space is not a static space",
+      },
+      { status: 404 }
+    );
+  }
+  if (space.author !== user.name) {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Space does not belong to the authenticated user",
+      },
+      { status: 403 }
+    );
+  }
+
+  const project = await Project.findOne({
+    user_id: user.id,
+    space_id: `${namespace}/${repoId}`,
+  }).lean();
+  if (project) {
+    // redirect to the project page if it already exists
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Project already exists",
+        redirect: `/projects/${namespace}/${repoId}`,
+      },
+      { status: 400 }
+    );
+  }
+
+  const newProject = new Project({
+    user_id: user.id,
+    space_id: `${namespace}/${repoId}`,
+    prompts: [],
+  });
+
+  await newProject.save();
+  return NextResponse.json(
+    {
+      ok: true,
+      project: {
+        id: newProject._id,
+        space_id: newProject.space_id,
+        prompts: newProject.prompts,
+      },
+    },
+    { status: 201 }
+  );
+}

app/api/me/projects/route.ts

@@ -0,0 +1,127 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+import { COLORS } from "@/lib/utils";
+import { Page } from "@/types";
+
+export async function GET() {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  await dbConnect();
+
+  const projects = await Project.find({
+    user_id: user?.id,
+  })
+    .sort({ _createdAt: -1 })
+    .limit(100)
+    .lean();
+  if (!projects) {
+    return NextResponse.json(
+      {
+        ok: false,
+        projects: [],
+      },
+      { status: 404 }
+    );
+  }
+  return NextResponse.json(
+    {
+      ok: true,
+      projects,
+    },
+    { status: 200 }
+  );
+}
+
+export async function POST(request: NextRequest) {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  const { title, pages, prompts } = await request.json();
+
+  if (!title || !pages || pages.length === 0) {
+    return NextResponse.json(
+      { message: "Title and HTML content are required.", ok: false },
+      { status: 400 }
+    );
+  }
+
+  await dbConnect();
+
+  try {
+    let readme = "";
+
+    const newTitle = title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .split("-")
+      .filter(Boolean)
+      .join("-")
+      .slice(0, 96);
+
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${user.name}/${newTitle}`,
+    };
+
+    const { repoUrl } = await createRepo({
+      repo,
+      accessToken: user.token as string,
+    });
+    const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
+    const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
+    readme = `---
+title: ${newTitle}
+emoji: 🐳
+colorFrom: ${colorFrom}
+colorTo: ${colorTo}
+sdk: static
+pinned: false
+tags:
+  - deepsite
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference`;
+
+    const readmeFile = new File([readme], "README.md", {
+      type: "text/markdown",
+    });
+    const promptsFile = new File([prompts.join("\n")], "prompts.txt", {
+      type: "text/plain",
+    });
+    const files = [readmeFile, promptsFile];
+    pages.forEach((page: Page) => {
+      const file = new File([page.html], page.path, { type: "text/html" });
+      files.push(file);
+    });
+    await uploadFiles({
+      repo,
+      files,
+      accessToken: user.token as string,
+      commitTitle: `${prompts[prompts.length - 1]} - Initial Deployment`,
+    });
+    const path = repoUrl.split("/").slice(-2).join("/");
+    const project = await Project.create({
+      user_id: user.id,
+      space_id: path,
+      prompts,
+    });
+    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

@@ -0,0 +1,25 @@
+import { headers } from "next/headers";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const authHeaders = await headers();
+  const token = authHeaders.get("Authorization");
+  if (!token) {
+    return NextResponse.json({ user: null, errCode: 401 }, { status: 401 });
+  }
+
+  const userResponse = await fetch("https://huggingface.co/api/whoami-v2", {
+    headers: {
+      Authorization: `${token}`,
+    },
+  });
+
+  if (!userResponse.ok) {
+    return NextResponse.json(
+      { user: null, errCode: userResponse.status },
+      { status: userResponse.status }
+    );
+  }
+  const user = await userResponse.json();
+  return NextResponse.json({ user, errCode: null }, { status: 200 });
+}

app/api/re-design/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function PUT(request: NextRequest) {
+  const body = await request.json();
+  const { url } = body;
+
+  if (!url) {
+    return NextResponse.json({ error: "URL is required" }, { status: 400 });
+  }
+
+  try {
+    const response = await fetch(
+      `https://r.jina.ai/${encodeURIComponent(url)}`,
+      {
+        method: "POST",
+      }
+    );
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Failed to fetch redesign" },
+        { status: 500 }
+      );
+    }
+    const markdown = await response.text();
+    return NextResponse.json(
+      {
+        ok: true,
+        markdown,
+      },
+      { status: 200 }
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || "An error occurred" },
+      { status: 500 }
+    );
+  }
+}

app/auth/callback/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+import Link from "next/link";
+import { useUser } from "@/hooks/useUser";
+import { use, useState } from "react";
+import { useMount, useTimeoutFn } from "react-use";
+
+import { Button } from "@/components/ui/button";
+export default function AuthCallback({
+  searchParams,
+}: {
+  searchParams: Promise<{ code: string }>;
+}) {
+  const [showButton, setShowButton] = useState(false);
+  const { code } = use(searchParams);
+  const { loginFromCode } = useUser();
+
+  useMount(async () => {
+    if (code) {
+      await loginFromCode(code);
+    }
+  });
+
+  useTimeoutFn(
+    () => setShowButton(true),
+    7000 // Show button after 5 seconds
+  );
+
+  return (
+    <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>
+            <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>
+            {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>
+    </div>
+  );
+}

app/auth/page.tsx

@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+import { Metadata } from "next";
+
+import { getAuth } from "@/app/actions/auth";
+
+export const revalidate = 1;
+
+export const metadata: Metadata = {
+  robots: "noindex, nofollow",
+};
+
+export default async function Auth() {
+  const loginRedirectUrl = await getAuth();
+  if (loginRedirectUrl) {
+    redirect(loginRedirectUrl);
+  }
+
+  return (
+    <div className="p-4">
+      <div className="border bg-red-500/10 border-red-500/20 text-red-500 px-5 py-3 rounded-lg">
+        <h1 className="text-xl font-bold">Error</h1>
+        <p className="text-sm">
+          An error occurred while trying to log in. Please try again later.
+        </p>
+      </div>
+    </div>
+  );
+}

app/layout.tsx

@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Metadata, Viewport } from "next";
+import { Inter, PT_Sans } from "next/font/google";
+import { cookies } from "next/headers";
+
+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 AppContext from "@/components/contexts/app-context";
+import Script from "next/script";
+import IframeDetector from "@/components/iframe-detector";
+
+const inter = Inter({
+  variable: "--font-inter-sans",
+  subsets: ["latin"],
+});
+
+const ptSans = PT_Sans({
+  variable: "--font-ptSans-mono",
+  subsets: ["latin"],
+  weight: ["400", "700"],
+});
+
+export const metadata: Metadata = {
+  title: "DeepSite | Build with AI ✨",
+  description:
+    "DeepSite is a web development tool that helps you build websites with AI, no code required. Let's deploy your website with DeepSite and enjoy the magic of AI.",
+  openGraph: {
+    title: "DeepSite | Build with AI ✨",
+    description:
+      "DeepSite is a web development tool that helps you build websites with AI, no code required. Let's deploy your website with DeepSite and enjoy the magic of AI.",
+    url: "https://deepsite.hf.co",
+    siteName: "DeepSite",
+    images: [
+      {
+        url: "https://deepsite.hf.co/banner.png",
+        width: 1200,
+        height: 630,
+        alt: "DeepSite Open Graph Image",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "DeepSite | Build with AI ✨",
+    description:
+      "DeepSite is a web development tool that helps you build websites with AI, no code required. Let's deploy your website with DeepSite and enjoy the magic of AI.",
+    images: ["https://deepsite.hf.co/banner.png"],
+  },
+  appleWebApp: {
+    capable: true,
+    title: "DeepSite",
+    statusBarStyle: "black-translucent",
+  },
+  icons: {
+    icon: "/logo.svg",
+    shortcut: "/logo.svg",
+    apple: "/logo.svg",
+  },
+};
+
+export const viewport: Viewport = {
+  initialScale: 1,
+  maximumScale: 1,
+  themeColor: "#000000",
+};
+
+async function getMe() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get(MY_TOKEN_KEY())?.value;
+  if (!token) return { user: null, errCode: null };
+  try {
+    const res = await apiServer.get("/me", {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return { user: res.data.user, errCode: null };
+  } catch (err: any) {
+    return { user: null, errCode: err.status };
+  }
+}
+
+// if domain isn't deepsite.hf.co or enzostvs-deepsite.hf.space redirect to deepsite.hf.co
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const data = await getMe();
+  return (
+    <html lang="en">
+      <Script
+        defer
+        data-domain="deepsite.hf.co"
+        src="https://plausible.io/js/script.js"
+      ></Script>
+      <body
+        className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark h-[100dvh] overflow-hidden`}
+      >
+        <IframeDetector />
+        <Toaster richColors position="bottom-center" />
+        <TanstackProvider>
+          <AppContext me={data}>{children}</AppContext>
+        </TanstackProvider>
+      </body>
+    </html>
+  );
+}

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

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

app/projects/new/page.tsx

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

assets/globals.css

@@ -0,0 +1,146 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-inter-sans);
+  --font-mono: var(--font-ptSans-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+}
+
+.background__noisy {
+  @apply bg-blend-normal pointer-events-none opacity-90;
+  background-size: 25ww auto;
+  background-image: url("/background_noisy.webp");
+  @apply fixed w-screen h-screen -z-1 top-0 left-0;
+}
+
+.monaco-editor .margin {
+  @apply !bg-neutral-900;
+}
+.monaco-editor .monaco-editor-background {
+  @apply !bg-neutral-900;
+}
+.monaco-editor .line-numbers {
+  @apply !text-neutral-500;
+}
+
+.matched-line {
+  @apply bg-sky-500/30;
+}

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components/contexts/app-context.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import { useUser } from "@/hooks/useUser";
+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({
+  children,
+  me: initialData,
+}: {
+  children: React.ReactNode;
+  me?: {
+    user: User | null;
+    errCode: number | null;
+  };
+}) {
+  const { loginFromCode, user, logout, loading, errCode } =
+    useUser(initialData);
+  const pathname = usePathname();
+  const router = useRouter();
+
+  useMount(() => {
+    if (!initialData?.user && !user) {
+      if ([401, 403].includes(errCode as number)) {
+        logout();
+      } else if (pathname.includes("/spaces")) {
+        if (errCode) {
+          toast.error("An error occured while trying to log in");
+        }
+        // If we did not manage to log in (probs because api is down), we simply redirect to the home page
+        router.push("/");
+      }
+    }
+  });
+
+  const events: any = {};
+
+  useBroadcastChannel("auth", (message) => {
+    if (pathname.includes("/auth/callback")) return;
+
+    if (!message.code) return;
+    if (message.type === "user-oauth" && message?.code && !events.code) {
+      loginFromCode(message.code);
+    }
+  });
+
+  return (
+    <UserContext value={{ user, loading, logout } as any}>
+      {children}
+    </UserContext>
+  );
+}

components/contexts/user-context.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { createContext } from "react";
+import { User } from "@/types";
+
+export const UserContext = createContext({
+  user: undefined as User | undefined,
+});

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

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

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

@@ -0,0 +1,146 @@
+import { useState } from "react";
+import { Paintbrush } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import Loading from "@/components/loading";
+import { api } from "@/lib/api";
+
+export function ReImagine({
+  onRedesign,
+}: {
+  onRedesign: (md: string) => void;
+}) {
+  const [url, setUrl] = useState<string>("");
+  const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const checkIfUrlIsValid = (url: string) => {
+    const urlPattern = new RegExp(
+      /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/,
+      "i"
+    );
+    return urlPattern.test(url);
+  };
+
+  const handleClick = async () => {
+    if (isLoading) return; // Prevent multiple clicks while loading
+    if (!url) {
+      toast.error("Please enter a URL.");
+      return;
+    }
+    if (!checkIfUrlIsValid(url)) {
+      toast.error("Please enter a valid URL.");
+      return;
+    }
+    setIsLoading(true);
+    const response = await api.put("/re-design", {
+      url: url.trim(),
+    });
+    if (response?.data?.ok) {
+      setOpen(false);
+      setUrl("");
+      onRedesign(response.data.markdown);
+      toast.success("DeepSite is redesigning your site! Let him cook... 🔥");
+    } else {
+      toast.error(response?.data?.error || "Failed to redesign the site.");
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <form>
+        <PopoverTrigger asChild>
+          <Button
+            size="iconXs"
+            variant="outline"
+            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+          >
+            <Paintbrush className="size-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="!rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden"
+        >
+          <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+            <div className="flex items-center justify-center -space-x-4 mb-3">
+              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                🎨
+              </div>
+              <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+                🥳
+              </div>
+              <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                💎
+              </div>
+            </div>
+            <p className="text-xl font-semibold text-neutral-950">
+              Redesign your Site!
+            </p>
+            <p className="text-sm text-neutral-500 mt-1.5">
+              Try our new Redesign feature to give your site a fresh look.
+            </p>
+          </header>
+          <main className="space-y-4 p-6">
+            <div>
+              <p className="text-sm text-neutral-700 mb-2">
+                Enter your website URL to get started:
+              </p>
+              <Input
+                type="text"
+                placeholder="https://example.com"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                onBlur={(e) => {
+                  const inputUrl = e.target.value.trim();
+                  if (!inputUrl) {
+                    setUrl("");
+                    return;
+                  }
+                  if (!checkIfUrlIsValid(inputUrl)) {
+                    toast.error("Please enter a valid URL.");
+                    return;
+                  }
+                  setUrl(inputUrl);
+                }}
+                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 redesign it!
+              </p>
+              <Button
+                variant="black"
+                onClick={handleClick}
+                className="relative w-full"
+              >
+                {isLoading ? (
+                  <>
+                    <Loading
+                      overlay={false}
+                      className="ml-2 size-4 animate-spin"
+                    />
+                    Fetching your site...
+                  </>
+                ) : (
+                  <>
+                    Redesign <Paintbrush className="size-4" />
+                  </>
+                )}
+              </Button>
+            </div>
+          </main>
+        </PopoverContent>
+      </form>
+    </Popover>
+  );
+}

components/editor/ask-ai/selected-files.tsx

@@ -0,0 +1,47 @@
+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/selected-html-element.tsx

@@ -0,0 +1,57 @@
+import classNames from "classnames";
+import { Code, XCircle } from "lucide-react";
+
+import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { htmlTagToText } from "@/lib/html-tag-to-text";
+
+export const SelectedHtmlElement = ({
+  element,
+  isAiWorking = false,
+  onDelete,
+}: {
+  element: HTMLElement | null;
+  isAiWorking: boolean;
+  onDelete?: () => void;
+}) => {
+  if (!element) return null;
+
+  const tagName = element.tagName.toLowerCase();
+  return (
+    <Collapsible
+      className={classNames(
+        "border border-neutral-700 rounded-xl p-1.5 pr-3 max-w-max hover:brightness-110 transition-all duration-200 ease-in-out !cursor-pointer",
+        {
+          "!cursor-pointer": !isAiWorking,
+          "opacity-50 !cursor-not-allowed": isAiWorking,
+        }
+      )}
+      disabled={isAiWorking}
+      onClick={() => {
+        if (!isAiWorking && onDelete) {
+          onDelete();
+        }
+      }}
+    >
+      <CollapsibleTrigger className="flex items-center justify-start gap-2 cursor-pointer">
+        <div className="rounded-lg bg-neutral-700 size-6 flex items-center justify-center">
+          <Code className="text-neutral-300 size-3.5" />
+        </div>
+        <p className="text-sm font-semibold text-neutral-300">
+          {element.textContent?.trim().split(/\s+/)[0]} {htmlTagToText(tagName)}
+        </p>
+        <XCircle className="text-neutral-300 size-4" />
+      </CollapsibleTrigger>
+      {/* <CollapsibleContent className="border-t border-neutral-700 pt-2 mt-2">
+        <div className="text-xs text-neutral-400">
+          <p>
+            <span className="font-semibold">ID:</span> {element.id || "No ID"}
+          </p>
+          <p>
+            <span className="font-semibold">Classes:</span>{" "}
+            {element.className || "No classes"}
+          </p>
+        </div>
+      </CollapsibleContent> */}
+    </Collapsible>
+  );
+};

components/editor/ask-ai/settings.tsx

@@ -0,0 +1,202 @@
+import classNames from "classnames";
+import { PiGearSixFill } from "react-icons/pi";
+import { RiCheckboxCircleFill } from "react-icons/ri";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { PROVIDERS, MODELS } from "@/lib/providers";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useMemo } from "react";
+import { useUpdateEffect } from "react-use";
+import Image from "next/image";
+
+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 modelAvailableProviders = useMemo(() => {
+    const availableProviders = MODELS.find(
+      (m: { value: string }) => m.value === model
+    )?.providers;
+    if (!availableProviders) return Object.keys(PROVIDERS);
+    return Object.keys(PROVIDERS).filter((id) =>
+      availableProviders.includes(id)
+    );
+  }, [model]);
+
+  useUpdateEffect(() => {
+    if (provider !== "auto" && !modelAvailableProviders.includes(provider)) {
+      onChange("auto");
+    }
+  }, [model, provider]);
+
+  return (
+    <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"
+        >
+          <header className="flex items-center justify-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
+            Customize Settings
+          </header>
+          <main className="px-4 pt-5 pb-6 space-y-5">
+            {error !== "" && (
+              <p className="text-red-500 text-sm font-medium mb-2 flex items-center justify-between bg-red-500/10 p-2 rounded-md">
+                {error}
+              </p>
+            )}
+            <label className="block">
+              <p className="text-neutral-300 text-sm mb-2.5">Choose a model</p>
+              <Select defaultValue={model} onValueChange={onModelChange}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select a model" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Models</SelectLabel>
+                    {MODELS.map(
+                      ({
+                        value,
+                        label,
+                        isNew = false,
+                        isThinker = false,
+                      }: {
+                        value: string;
+                        label: string;
+                        isNew?: boolean;
+                        isThinker?: boolean;
+                      }) => (
+                        <SelectItem
+                          key={value}
+                          value={value}
+                          className=""
+                          disabled={isThinker && isFollowUp}
+                        >
+                          {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>
+                </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) {
+                      onChange(foundModel.autoProvider);
+                    } else {
+                      onChange("auto");
+                    }
+                  }}
+                >
+                  <div
+                    className={classNames(
+                      "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-neutral-200",
+                      {
+                        "translate-x-4": provider === "auto",
+                      }
+                    )}
+                  />
+                </div>
+              </div>
+              <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

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

components/editor/deploy-button/content.tsx

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

components/editor/deploy-button/index.tsx

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

components/editor/footer/index.tsx

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

components/editor/header/index.tsx

@@ -0,0 +1,69 @@
+import { ReactNode } from "react";
+import { Eye, MessageCircleCode } from "lucide-react";
+
+import Logo from "@/assets/logo.svg";
+
+import { Button } from "@/components/ui/button";
+import classNames from "classnames";
+import Image from "next/image";
+
+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-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-6 lg:size-8 mr-2 invert-100 dark:invert-0"
+          />
+          <p className="max-md:hidden flex items-center justify-start">
+            DeepSite
+            <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>
+      <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
+            key={item.value}
+            variant={tab === item.value ? "secondary" : "ghost"}
+            className={classNames("", {
+              "opacity-60": tab !== item.value,
+            })}
+            size="sm"
+            onClick={() => onNewTab(item.value)}
+          >
+            <item.icon className="size-4" />
+            <span className="hidden md:inline">{item.label}</span>
+          </Button>
+        ))}
+      </div>
+      <div className="flex items-center justify-end gap-3">{children}</div>
+    </header>
+  );
+}

components/editor/history/index.tsx

@@ -0,0 +1,73 @@
+import { History as HistoryIcon } from "lucide-react";
+import { HtmlHistory, Page } from "@/types";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+
+export function History({
+  history,
+  setPages,
+}: {
+  history: HtmlHistory[];
+  setPages: (pages: Page[]) => void;
+}) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <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
+        className="!rounded-2xl !p-0 overflow-hidden !bg-neutral-900"
+        align="start"
+      >
+        <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="px-4 space-y-3">
+          <ul className="max-h-[250px] overflow-y-auto">
+            {history?.map((item, index) => (
+              <li
+                key={index}
+                className="text-gray-300 text-xs py-2 border-b border-gray-800 last:border-0 flex items-center justify-between gap-2"
+              >
+                <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.createdAt).toLocaleTimeString("en-US", {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                        second: "2-digit",
+                        hour12: false,
+                      })}
+                  </span>
+                </div>
+                <Button
+                  variant="sky"
+                  size="xs"
+                  onClick={() => {
+                    console.log(item);
+                    setPages(item.pages);
+                  }}
+                >
+                  Select
+                </Button>
+              </li>
+            ))}
+          </ul>
+        </main>
+      </PopoverContent>
+    </Popover>
+  );
+}

components/editor/index.tsx

@@ -0,0 +1,392 @@
+"use client";
+import { useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+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 { Header } from "@/components/editor/header";
+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 { Page, 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";
+
+export const AppEditor = ({
+  project,
+  pages: initialPages,
+  images,
+  isNew,
+}: {
+  project?: Project | null;
+  pages?: Page[];
+  images?: string[];
+  isNew?: boolean;
+}) => {
+  const [htmlStorage, , removeHtmlStorage] = useLocalStorage("pages");
+  const [, copyToClipboard] = useCopyToClipboard();
+  const { htmlHistory, setHtmlHistory, prompts, setPrompts, pages, setPages } =
+    useEditor(
+      initialPages,
+      project?.prompts ?? [],
+      typeof htmlStorage === "string" ? htmlStorage : undefined
+    );
+
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const deploy = searchParams.get("deploy") === "true";
+
+  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 [currentPage, setCurrentPage] = useState("index.html");
+  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
+  );
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
+
+  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 = "";
+    }
+  };
+
+  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 (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(currentPageData?.html)) {
+      e.preventDefault();
+      return "";
+    }
+  });
+
+  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 {
+      if (preview.current) {
+        // Reset preview width when switching to preview tab
+        preview.current.style.width = "100%";
+      }
+    }
+  }, [currentTab]);
+
+  const handleEditorValidation = (markers: editor.IMarker[]) => {
+    console.log("Editor validation markers:", markers);
+  };
+
+  const currentPageData = useMemo(() => {
+    return (
+      pages.find((page) => page.path === currentPage) ?? {
+        path: "index.html",
+        html: defaultHTML,
+      }
+    );
+  }, [pages, currentPage]);
+
+  return (
+    <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}`);
+          }}
+        />
+        {/* for these buttons pass the whole pages */}
+        {project?._id ? (
+          <SaveButton pages={pages} prompts={prompts} />
+        ) : (
+          <DeployButton pages={pages} 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"
+            >
+              <ListPages
+                pages={pages}
+                currentPage={currentPage}
+                onSelectPage={(path, newPath) => {
+                  if (newPath) {
+                    setPages((prev) =>
+                      prev.map((page) =>
+                        page.path === path ? { ...page, path: newPath } : page
+                      )
+                    );
+                    setCurrentPage(newPath);
+                  } else {
+                    setCurrentPage(path);
+                  }
+                }}
+                onDeletePage={(path) => {
+                  const newPages = pages.filter((page) => page.path !== path);
+                  setPages(newPages);
+                  if (currentPage === path) {
+                    setCurrentPage(newPages[0]?.path ?? "index.html");
+                  }
+                }}
+                onNewPage={() => {
+                  setPages((prev) => [
+                    ...prev,
+                    {
+                      path: `page-${prev.length + 1}.html`,
+                      html: defaultHTML,
+                    },
+                  ]);
+                  setCurrentPage(`page-${pages.length + 1}.html`);
+                }}
+              />
+              <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"
+                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={currentPageData.html}
+                onChange={(value) => {
+                  const newValue = value ?? "";
+                  // setHtml(newValue);
+                  setPages((prev) =>
+                    prev.map((page) =>
+                      page.path === currentPageData.path
+                        ? { ...page, html: newValue }
+                        : page
+                    )
+                  );
+                }}
+                onMount={(editor, monaco) => {
+                  editorRef.current = editor;
+                  monacoRef.current = monaco;
+                }}
+                onValidate={handleEditorValidation}
+              />
+              <AskAI
+                project={project}
+                images={images}
+                currentPage={currentPageData}
+                htmlHistory={htmlHistory}
+                previousPrompts={prompts}
+                onSuccess={(newPages, p: string) => {
+                  const currentHistory = [...htmlHistory];
+                  currentHistory.unshift({
+                    pages: newPages,
+                    createdAt: new Date(),
+                    prompt: p,
+                  });
+                  setHtmlHistory(currentHistory);
+                  setSelectedElement(null);
+                  setSelectedFiles([]);
+                  // 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);
+
+                  //     editorRef.current?.revealLine(updatedLines[0][0]);
+                  //   }, 100);
+                  // }
+                }}
+                setPages={setPages}
+                pages={pages}
+                setCurrentPage={setCurrentPage}
+                isAiWorking={isAiWorking}
+                setisAiWorking={setIsAiWorking}
+                onNewPrompt={(prompt: string) => {
+                  setPrompts((prev) => [...prev, prompt]);
+                }}
+                onScrollToBottom={() => {
+                  editorRef.current?.revealLine(
+                    editorRef.current?.getModel()?.getLineCount() ?? 0
+                  );
+                }}
+                isNew={isNew}
+                isEditableModeEnabled={isEditableModeEnabled}
+                setIsEditableModeEnabled={setIsEditableModeEnabled}
+                selectedElement={selectedElement}
+                setSelectedElement={setSelectedElement}
+                setSelectedFiles={setSelectedFiles}
+                selectedFiles={selectedFiles}
+              />
+            </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={currentPageData?.html}
+          isResizing={isResizing}
+          isAiWorking={isAiWorking}
+          ref={preview}
+          device={device}
+          pages={pages}
+          setCurrentPage={setCurrentPage}
+          currentTab={currentTab}
+          isEditableModeEnabled={isEditableModeEnabled}
+          iframeRef={iframeRef}
+          onClickElement={(element) => {
+            setIsEditableModeEnabled(false);
+            setSelectedElement(element);
+            setCurrentTab("chat");
+          }}
+        />
+      </main>
+      <Footer
+        pages={pages}
+        htmlHistory={htmlHistory}
+        setPages={setPages}
+        iframeRef={iframeRef}
+        device={device}
+        isNew={isNew}
+        setDevice={setDevice}
+      />
+    </section>
+  );
+};

components/editor/pages/index.tsx

@@ -0,0 +1,30 @@
+import { Page } from "@/types";
+import { ListPagesItem } from "./page";
+
+export function ListPages({
+  pages,
+  currentPage,
+  onSelectPage,
+  onDeletePage,
+}: {
+  pages: Array<Page>;
+  currentPage: string;
+  onSelectPage: (path: string, newPath?: string) => void;
+  onNewPage: () => void;
+  onDeletePage: (path: string) => void;
+}) {
+  return (
+    <div className="w-full flex items-center justify-start bg-neutral-950 overflow-auto flex-nowrap min-h-[44px]">
+      {pages.map((page, i) => (
+        <ListPagesItem
+          key={i}
+          page={page}
+          currentPage={currentPage}
+          onSelectPage={onSelectPage}
+          onDeletePage={onDeletePage}
+          index={i}
+        />
+      ))}
+    </div>
+  );
+}

components/editor/pages/page.tsx

@@ -0,0 +1,82 @@
+import classNames from "classnames";
+import { 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}
+    >
+      {/* {index > 0 && (
+        <Button
+          size="iconXsss"
+          variant="ghost"
+          onClick={(e) => {
+            e.stopPropagation();
+            // open the window modal to edit the name page
+            let newName = window.prompt(
+              "Enter new name for the page:",
+              page.path
+            );
+            if (newName && newName.trim() !== "") {
+              newName = newName.toLowerCase();
+              if (!newName.endsWith(".html")) {
+                newName = newName.replace(/\.[^/.]+$/, "");
+                newName = newName.replace(/\s+/g, "-");
+                newName += ".html";
+              }
+              onSelectPage(page.path, newName);
+            } else {
+              window.alert("Page name cannot be empty.");
+            }
+          }}
+        >
+          <EditIcon className="!h-3.5 text-neutral-400 cursor-pointer hover:text-neutral-300" />
+        </Button>
+      )} */}
+      {page.path}
+      {index > 0 && (
+        <Button
+          size="iconXsss"
+          variant="ghost"
+          className="group-hover:opacity-100 opacity-0"
+          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

@@ -0,0 +1,231 @@
+"use client";
+import { useUpdateEffect } from "react-use";
+import { useMemo, useState } from "react";
+import classNames from "classnames";
+import { toast } from "sonner";
+import { useThrottleFn } from "react-use";
+
+import { cn } from "@/lib/utils";
+import { GridPattern } from "@/components/magic-ui/grid-pattern";
+import { htmlTagToText } from "@/lib/html-tag-to-text";
+import { Page } from "@/types";
+
+export const Preview = ({
+  html,
+  isResizing,
+  isAiWorking,
+  ref,
+  device,
+  currentTab,
+  iframeRef,
+  pages,
+  setCurrentPage,
+  isEditableModeEnabled,
+  onClickElement,
+}: {
+  html: string;
+  isResizing: boolean;
+  isAiWorking: boolean;
+  pages: Page[];
+  setCurrentPage: React.Dispatch<React.SetStateAction<string>>;
+  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
+  );
+
+  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);
+        }
+      }
+    }
+  };
+  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 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;
+            }
+
+            href = href.split(".html")[0] + ".html";
+            const isPageExist = pages.some((page) => page.path === href);
+            if (isPageExist) {
+              setCurrentPage(href);
+            }
+          }
+        }
+      }
+    }
+  };
+
+  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);
+        }
+      }
+    }
+
+    return cleanupListeners;
+  }, [iframeRef, isEditableModeEnabled]);
+
+  const selectedElement = useMemo(() => {
+    if (!isEditableModeEnabled) return null;
+    if (!hoveredElement) return null;
+    return hoveredElement;
+  }, [hoveredElement, isEditableModeEnabled]);
+
+  const throttledHtml = useThrottleFn((html) => html, 1000, [html]);
+
+  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(
+          "w-full select-none transition-all duration-200 bg-black h-full",
+          {
+            "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",
+          }
+        )}
+        srcDoc={isAiWorking ? (throttledHtml as string) : html}
+        onLoad={() => {
+          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);
+            });
+          }
+        }}
+      />
+    </div>
+  );
+};

components/editor/save-button/index.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import { toast } from "sonner";
+import { MdSave } from "react-icons/md";
+import { useParams } from "next/navigation";
+
+import Loading from "@/components/loading";
+import { Button } from "@/components/ui/button";
+import { api } from "@/lib/api";
+import { Page } from "@/types";
+
+export function SaveButton({
+  pages,
+  prompts,
+}: {
+  pages: Page[];
+  prompts: string[];
+}) {
+  // get params from URL
+  const { namespace, repoId } = useParams<{
+    namespace: string;
+    repoId: string;
+  }>();
+  const [loading, setLoading] = useState(false);
+
+  const updateSpace = async () => {
+    setLoading(true);
+
+    try {
+      const res = await api.put(`/me/projects/${namespace}/${repoId}`, {
+        pages,
+        prompts,
+      });
+      if (res.data.ok) {
+        toast.success("Your space is updated! 🎉", {
+          action: {
+            label: "See Space",
+            onClick: () => {
+              window.open(
+                `https://huggingface.co/spaces/${namespace}/${repoId}`,
+                "_blank"
+              );
+            },
+          },
+        });
+      } else {
+        toast.error(res?.data?.error || "Failed to update space");
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <>
+      <Button
+        variant="default"
+        className="max-lg:hidden !px-4 relative"
+        onClick={updateSpace}
+      >
+        <MdSave className="size-4" />
+        Publish your Project{" "}
+        {loading && <Loading className="ml-2 size-4 animate-spin" />}
+      </Button>
+      <Button
+        variant="default"
+        size="sm"
+        className="lg:hidden relative"
+        onClick={updateSpace}
+      >
+        Publish {loading && <Loading className="ml-2 size-4 animate-spin" />}
+      </Button>
+    </>
+  );
+}

components/iframe-detector.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import IframeWarningModal from "./iframe-warning-modal";
+
+export default function IframeDetector() {
+  const [showWarning, setShowWarning] = useState(false);
+
+  useEffect(() => {
+    // Helper function to check if a hostname is from allowed domains
+    const isAllowedDomain = (hostname: string) => {
+      const host = hostname.toLowerCase();
+      return (
+        host.endsWith(".huggingface.co") ||
+        host.endsWith(".hf.co") ||
+        host === "huggingface.co" ||
+        host === "hf.co"
+      );
+    };
+
+    // Check if the current window is in an iframe
+    const isInIframe = () => {
+      try {
+        return window.self !== window.top;
+      } catch {
+        // If we can't access window.top due to cross-origin restrictions,
+        // we're likely in an iframe
+        return true;
+      }
+    };
+
+    // Additional check: compare window location with parent location
+    const isEmbedded = () => {
+      try {
+        return window.location !== window.parent.location;
+      } catch {
+        // Cross-origin iframe
+        return true;
+      }
+    };
+
+    // Check if we're in an iframe from a non-allowed domain
+    const shouldShowWarning = () => {
+      if (!isInIframe() && !isEmbedded()) {
+        return false; // Not in an iframe
+      }
+
+      try {
+        // Try to get the parent's hostname
+        const parentHostname = window.parent.location.hostname;
+        return !isAllowedDomain(parentHostname);
+      } catch {
+        // Cross-origin iframe - try to get referrer instead
+        try {
+          if (document.referrer) {
+            const referrerUrl = new URL(document.referrer);
+            return !isAllowedDomain(referrerUrl.hostname);
+          }
+        } catch {
+          // If we can't determine the parent domain, assume it's not allowed
+        }
+        return true;
+      }
+    };
+
+    if (shouldShowWarning()) {
+      // Show warning modal instead of redirecting immediately
+      setShowWarning(true);
+    }
+  }, []);
+
+  return (
+    <IframeWarningModal isOpen={showWarning} onOpenChange={setShowWarning} />
+  );
+}

components/iframe-warning-modal.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ExternalLink, AlertTriangle } from "lucide-react";
+
+interface IframeWarningModalProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function IframeWarningModal({
+  isOpen,
+}: // onOpenChange,
+IframeWarningModalProps) {
+  const handleVisitSite = () => {
+    window.open("https://deepsite.hf.co", "_blank");
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={() => {}}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-red-500" />
+            <DialogTitle>Unauthorized Embedding</DialogTitle>
+          </div>
+          <DialogDescription className="text-left">
+            You&apos;re viewing DeepSite through an unauthorized iframe. For the
+            best experience and security, please visit the official website
+            directly.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="bg-muted/50 rounded-lg p-4 space-y-2">
+          <p className="text-sm font-medium">Why visit the official site?</p>
+          <ul className="text-sm text-muted-foreground space-y-1">
+            <li>• Better performance and security</li>
+            <li>• Full functionality access</li>
+            <li>• Latest features and updates</li>
+            <li>• Proper authentication support</li>
+          </ul>
+        </div>
+
+        <DialogFooter className="flex-col sm:flex-row gap-2">
+          <Button onClick={handleVisitSite} className="w-full sm:w-auto">
+            <ExternalLink className="mr-2 h-4 w-4" />
+            Visit Deepsite.hf.co
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/invite-friends/index.tsx

@@ -0,0 +1,85 @@
+import { TiUserAdd } from "react-icons/ti";
+import { Link } from "lucide-react";
+import { FaXTwitter } from "react-icons/fa6";
+import { useCopyToClipboard } from "react-use";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export function InviteFriends() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger asChild>
+          <Button
+            size="iconXs"
+            variant="outline"
+            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+          >
+            <TiUserAdd className="size-4" />
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
+          <DialogTitle className="hidden" />
+          <main>
+            <div className="flex items-center justify-start -space-x-4 mb-5">
+              <div className="size-11 rounded-full bg-pink-300 shadow-2xs flex items-center justify-center text-2xl">
+                😎
+              </div>
+              <div className="size-11 rounded-full bg-amber-300 shadow-2xs flex items-center justify-center text-2xl z-2">
+                😇
+              </div>
+              <div className="size-11 rounded-full bg-sky-300 shadow-2xs flex items-center justify-center text-2xl">
+                😜
+              </div>
+            </div>
+            <p className="text-xl font-semibold text-neutral-950 max-w-[200px]">
+              Invite your friends to join us!
+            </p>
+            <p className="text-sm text-neutral-500 mt-2 max-w-sm">
+              Support us and share the love and let them know about our awesome
+              platform.
+            </p>
+            <div className="mt-4 space-x-3.5">
+              <a
+                href="https://x.com/intent/post?url=https://enzostvs-deepsite.hf.space/&text=Checkout%20this%20awesome%20Ai%20Tool!%20Vibe%20coding%20has%20never%20been%20so%20easy✨"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button
+                  variant="lightGray"
+                  size="sm"
+                  className="!text-neutral-700"
+                >
+                  <FaXTwitter className="size-4" />
+                  Share on
+                </Button>
+              </a>
+              <Button
+                variant="lightGray"
+                size="sm"
+                className="!text-neutral-700"
+                onClick={() => {
+                  copyToClipboard("https://enzostvs-deepsite.hf.space/");
+                  toast.success("Invite link copied to clipboard!");
+                }}
+              >
+                <Link className="size-4" />
+                Copy Invite Link
+              </Button>
+            </div>
+          </main>
+        </DialogContent>
+      </form>
+    </Dialog>
+  );
+}

components/loading/index.tsx

@@ -0,0 +1,41 @@
+import classNames from "classnames";
+
+function Loading({
+  overlay = true,
+  className,
+}: {
+  overlay?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={classNames("", {
+        "absolute left-0 top-0 h-full w-full flex items-center justify-center z-20 bg-black/50 rounded-full":
+          overlay,
+      })}
+    >
+      <svg
+        className={`size-5 animate-spin text-white ${className}`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    </div>
+  );
+}
+
+export default Loading;

components/login-modal/index.tsx

@@ -0,0 +1,62 @@
+import { useLocalStorage } from "react-use";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { useUser } from "@/hooks/useUser";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
+import { Page } from "@/types";
+
+export const LoginModal = ({
+  open,
+  pages,
+  onClose,
+  title = "Log In to use DeepSite for free",
+  description = "Log In through your Hugging Face account to continue using DeepSite and increase your monthly free limit.",
+}: {
+  open: boolean;
+  pages?: Page[];
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+  title?: string;
+  description?: string;
+}) => {
+  const { openLoginWindow } = useUser();
+  const [, setStorage] = useLocalStorage("pages");
+  const handleClick = async () => {
+    if (pages && !isTheSameHtml(pages[0].html)) {
+      setStorage(pages);
+    }
+    openLoginWindow();
+    onClose(false);
+  };
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
+        <DialogTitle className="hidden" />
+        <main className="flex flex-col items-start text-left relative pt-2">
+          <div className="flex items-center justify-start -space-x-4 mb-5">
+            <div className="size-14 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
+              💪
+            </div>
+            <div className="size-16 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-4xl z-2">
+              😎
+            </div>
+            <div className="size-14 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
+              🙌
+            </div>
+          </div>
+          <p className="text-2xl font-bold text-neutral-950">{title}</p>
+          <p className="text-neutral-500 text-base mt-2 max-w-sm">
+            {description}
+          </p>
+          <Button
+            variant="black"
+            size="lg"
+            className="w-full !text-base !h-11 mt-8"
+            onClick={handleClick}
+          >
+            Log In to Continue
+          </Button>
+        </main>
+      </DialogContent>
+    </Dialog>
+  );
+};