Update README.md

.env.example

@@ -0,0 +1,5 @@
+OAUTH_CLIENT_ID=
+OAUTH_CLIENT_SECRET=
+APP_PORT=5173
+REDIRECT_URI=http://localhost:5173/auth/login
+DEFAULT_HF_TOKEN=

.gitignore

@@ -1,41 +1,26 @@
-# 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
+# Logs
+logs
+*.log
 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
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
+.aider*

Dockerfile

@@ -1,6 +1,9 @@
-FROM node:20-alpine
+# Dockerfile
+# Use an official Node.js runtime as the base image
+FROM node:22.1.0
 USER root
 
+RUN apt-get update
 USER 1000
 WORKDIR /usr/src/app
 # Copy package.json and package-lock.json to the container
@@ -13,7 +16,7 @@ RUN npm install
 RUN npm run build
 
 # Expose the application port (assuming your app runs on port 3000)
-EXPOSE 3000
+EXPOSE 5173
 
 # Start the application
 CMD ["npm", "start"]

README.md

@@ -1,22 +1,13 @@
 ---
-title: DeepSite v2
+title: DeepSite
 emoji: 🐳
 colorFrom: blue
 colorTo: blue
 sdk: docker
 pinned: true
-app_port: 3000
+app_port: 5173
 license: mit
 short_description: Generate any application with DeepSeek
-models:
-  - deepseek-ai/DeepSeek-V3-0324
-  - deepseek-ai/DeepSeek-R1-0528
 ---
 
-# DeepSite 🐳
-
-DeepSite is a coding platform powered by DeepSeek AI, designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
-
-## How to use it locally
-
-Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/(public)/layout.tsx

@@ -1,15 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,18 +0,0 @@
-"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

@@ -1,63 +0,0 @@
-"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/api/ask-ai/route.ts

@@ -1,503 +0,0 @@
-/* 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;
-
-  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.`
-                  : prompt,
-              },
-            ],
-            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, previousPrompt, 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: previousPrompt
-              ? previousPrompt
-              : "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

@@ -1,86 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,273 +0,0 @@
-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[] = [];
-  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: [
-          ...(project && "prompts" in project ? project.prompts : []),
-          ...prompts,
-        ],
-      },
-    }
-  );
-  return NextResponse.json({ ok: true }, { status: 200 });
-}
-
-export async function POST(
-  req: NextRequest,
-  { params }: { params: Promise<{ namespace: string; repoId: string }> }
-) {
-  const user = await isAuthenticated();
-
-  if (user instanceof NextResponse || !user) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
-
-  await dbConnect();
-  const param = await params;
-  const { namespace, repoId } = param;
-
-  const space = await spaceInfo({
-    name: namespace + "/" + repoId,
-    accessToken: user.token as string,
-    additionalFields: ["author"],
-  });
-
-  if (!space || space.sdk !== "static") {
-    return NextResponse.json(
-      {
-        ok: false,
-        error: "Space is not a static space",
-      },
-      { status: 404 }
-    );
-  }
-  if (space.author !== user.name) {
-    return NextResponse.json(
-      {
-        ok: false,
-        error: "Space does not belong to the authenticated user",
-      },
-      { status: 403 }
-    );
-  }
-
-  const project = await Project.findOne({
-    user_id: user.id,
-    space_id: `${namespace}/${repoId}`,
-  }).lean();
-  if (project) {
-    // redirect to the project page if it already exists
-    return NextResponse.json(
-      {
-        ok: false,
-        error: "Project already exists",
-        redirect: `/projects/${namespace}/${repoId}`,
-      },
-      { status: 400 }
-    );
-  }
-
-  const newProject = new Project({
-    user_id: user.id,
-    space_id: `${namespace}/${repoId}`,
-    prompts: [],
-  });
-
-  await newProject.save();
-  return NextResponse.json(
-    {
-      ok: true,
-      project: {
-        id: newProject._id,
-        space_id: newProject.space_id,
-        prompts: newProject.prompts,
-      },
-    },
-    { status: 201 }
-  );
-}

app/api/me/projects/route.ts

@@ -1,124 +0,0 @@
-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 files = [readmeFile];
-    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

@@ -1,25 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,72 +0,0 @@
-"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

@@ -1,28 +0,0 @@
-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

@@ -1,112 +0,0 @@
-/* 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

@@ -1,42 +0,0 @@
-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

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

assets/globals.css

@@ -1,146 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-{
-  "$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

@@ -1,57 +0,0 @@
-/* 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

@@ -1,8 +0,0 @@
-"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

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

components/editor/ask-ai/index.tsx

@@ -1,444 +0,0 @@
-"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({
-  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 [previousPrompt, setPreviousPrompt] = useState("");
-  const [provider, setProvider] = useLocalStorage("provider", "auto");
-  const [model, setModel] = useLocalStorage("model", MODELS[0].value);
-  const [openProvider, setOpenProvider] = useState(false);
-  const [providerError, setProviderError] = useState("");
-  const [openProModal, setOpenProModal] = useState(false);
-  const [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,
-        previousPrompt,
-        selectedElementHtml,
-        selectedFiles
-      );
-
-      if (result?.error) {
-        handleError(result.error, result.message);
-        return;
-      }
-
-      if (result?.success) {
-        setPreviousPrompt(prompt);
-        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) {
-        setPreviousPrompt(prompt);
-        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) {
-        setPreviousPrompt(prompt);
-        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 rounded-lg 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" />
-                <p className="text-neutral-400 text-sm">
-                  {isUploading
-                    ? "Uploading images..."
-                    : `AI is ${isThinking ? "thinking" : "coding"}...`}
-                </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}
-            />
-            <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

@@ -1,146 +0,0 @@
-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

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

components/editor/ask-ai/selected-html-element.tsx

@@ -1,57 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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"
-      >
-        <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

@@ -1,111 +0,0 @@
-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

@@ -1,79 +0,0 @@
-/* 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

@@ -1,128 +0,0 @@
-import classNames from "classnames";
-import { FaMobileAlt } from "react-icons/fa";
-import { HelpCircle, RefreshCcw, SparkleIcon } from "lucide-react";
-import { FaLaptopCode } from "react-icons/fa6";
-import { HtmlHistory, 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";
-
-const DEVICES = [
-  {
-    name: "desktop",
-    icon: FaLaptopCode,
-  },
-  {
-    name: "mobile",
-    icon: FaMobileAlt,
-  },
-];
-
-export function Footer({
-  htmlHistory,
-  setPages,
-  device,
-  setDevice,
-  iframeRef,
-}: {
-  htmlHistory?: HtmlHistory[];
-  device: "desktop" | "mobile";
-  setPages: (pages: Page[]) => void;
-  iframeRef?: React.RefObject<HTMLIFrameElement | null>;
-  setDevice: React.Dispatch<React.SetStateAction<"desktop" | "mobile">>;
-}) {
-  const { user } = useUser();
-
-  const handleRefreshIframe = () => {
-    if (iframeRef?.current) {
-      const iframe = iframeRef.current;
-      const content = iframe.srcdoc;
-      iframe.srcdoc = "";
-      setTimeout(() => {
-        iframe.srcdoc = content;
-      }, 10);
-    }
-  };
-
-  return (
-    <footer className="border-t bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 py-2 flex items-center justify-between sticky bottom-0 z-20">
-      <div className="flex items-center gap-2">
-        {user &&
-          (user?.isLocalUse ? (
-            <>
-              <div className="max-w-max bg-amber-500/10 rounded-full px-3 py-1 text-amber-500 border border-amber-500/20 text-sm font-semibold">
-                Local Usage
-              </div>
-            </>
-          ) : (
-            <UserMenu className="!p-1 !pr-3 !h-auto" />
-          ))}
-        {user && <p className="text-neutral-700">|</p>}
-        <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

@@ -1,69 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,386 +0,0 @@
-"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);
-
-  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={project?.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
-        htmlHistory={htmlHistory}
-        setPages={setPages}
-        iframeRef={iframeRef}
-        device={device}
-        setDevice={setDevice}
-      />
-    </section>
-  );
-};

components/editor/pages/index.tsx

@@ -1,30 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,231 +0,0 @@
-"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

@@ -1,76 +0,0 @@
-/* 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

@@ -1,75 +0,0 @@
-"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

@@ -1,61 +0,0 @@
-"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

@@ -1,85 +0,0 @@
-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/login-modal/index.tsx

@@ -1,62 +0,0 @@
-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>
-  );
-};

components/magic-ui/grid-pattern.tsx

@@ -1,69 +0,0 @@
-import { useId } from "react";
-import { cn } from "@/lib/utils";
-
-interface GridPatternProps extends React.SVGProps<SVGSVGElement> {
-  width?: number;
-  height?: number;
-  x?: number;
-  y?: number;
-  squares?: Array<[x: number, y: number]>;
-  strokeDasharray?: string;
-  className?: string;
-  [key: string]: unknown;
-}
-
-export function GridPattern({
-  width = 40,
-  height = 40,
-  x = -1,
-  y = -1,
-  strokeDasharray = "0",
-  squares,
-  className,
-  ...props
-}: GridPatternProps) {
-  const id = useId();
-
-  return (
-    <svg
-      aria-hidden="true"
-      className={cn(
-        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-neutral-700 -z-[1]",
-        className
-      )}
-      {...props}
-    >
-      <defs>
-        <pattern
-          id={id}
-          width={width}
-          height={height}
-          patternUnits="userSpaceOnUse"
-          x={x}
-          y={y}
-        >
-          <path
-            d={`M.5 ${height}V.5H${width}`}
-            fill="none"
-            strokeDasharray={strokeDasharray}
-          />
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
-      {squares && (
-        <svg x={x} y={y} className="overflow-visible">
-          {squares.map(([x, y]) => (
-            <rect
-              strokeWidth="0"
-              key={`${x}-${y}`}
-              width={width - 1}
-              height={height - 1}
-              x={x * width + 1}
-              y={y * height + 1}
-            />
-          ))}
-        </svg>
-      )}
-    </svg>
-  );
-}

components/my-projects/index.tsx

@@ -1,57 +0,0 @@
-"use client";
-import { Plus } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-
-import { useUser } from "@/hooks/useUser";
-import { Project } from "@/types";
-import { redirect } from "next/navigation";
-import { ProjectCard } from "./project-card";
-import { LoadProject } from "./load-project";
-
-export function MyProjects({
-  projects: initialProjects,
-}: {
-  projects: Project[];
-}) {
-  const { user } = useUser();
-  if (!user) {
-    redirect("/");
-  }
-  const [projects, setProjects] = useState<Project[]>(initialProjects || []);
-  return (
-    <>
-      <section className="max-w-[86rem] py-12 px-4 mx-auto">
-        <header className="flex items-center justify-between max-lg:flex-col gap-4">
-          <div className="text-left">
-            <h1 className="text-3xl font-bold text-white">
-              <span className="capitalize">{user.fullname}</span>&apos;s
-              DeepSite Projects
-            </h1>
-            <p className="text-muted-foreground text-base mt-1 max-w-xl">
-              Create, manage, and explore your DeepSite projects.
-            </p>
-          </div>
-          <LoadProject
-            fullXsBtn
-            onSuccess={(project: Project) => {
-              setProjects((prev) => [...prev, project]);
-            }}
-          />
-        </header>
-        <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-          <Link
-            href="/projects/new"
-            className="bg-neutral-900 rounded-xl h-44 flex items-center justify-center text-neutral-300 border border-neutral-800 hover:brightness-110 transition-all duration-200"
-          >
-            <Plus className="size-5 mr-1.5" />
-            Create Project
-          </Link>
-          {projects.map((project: Project) => (
-            <ProjectCard key={project._id} project={project} />
-          ))}
-        </div>
-      </section>
-    </>
-  );
-}