initial

app/(public)/layout.tsx

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

app/(public)/page.tsx

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

app/(public)/projects/page.tsx

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

app/actions/auth.ts

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

app/actions/projects.ts

@@ -0,0 +1,79 @@
+"use server";
+
+import { isAuthenticated } from "@/lib/auth";
+import { NextResponse } from "next/server";
+import { listSpaces } from "@huggingface/hub";
+import { ProjectType } from "@/types";
+
+export async function getProjects(): Promise<{
+  ok: boolean;
+  projects: ProjectType[];
+  isEmpty?: boolean;
+}> {
+  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: true,
+  //     isEmpty: true,
+  //     projects: [],
+  //   };
+  // }
+
+  // const mappedProjects = []
+
+  // for (const project of projects) {
+  //   const space = await spaceInfo({
+  //     name: project.space_id,
+  //     accessToken: user.token as string,
+  //     additionalFields: ["author", "cardData"],
+  //   });
+  //   if (!space.private) {
+  //     mappedProjects.push({
+  //       ...project,
+  //       name: space.name,
+  //       cardData: space.cardData,
+  //     });
+  //   }
+  // }
+  const projects = [];
+  // get user spaces from Hugging Face
+  for await (const space of listSpaces({
+    accessToken: user.token as string,
+    additionalFields: ["author", "cardData"],
+    search: {
+      owner: user.name,
+    }
+  })) {
+    if (
+      !space.private &&
+      space.sdk === "static" &&
+      Array.isArray((space.cardData as { tags?: string[] })?.tags) &&
+      (
+        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite-v3")) ||
+        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite"))
+      )
+    ) {
+      projects.push(space);
+    }
+  }
+
+  return {
+    ok: true,
+    projects,
+  };
+}

app/api/ask/route.ts

@@ -0,0 +1,541 @@
+/* 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";
+import { uploadFiles } from "@huggingface/hub";
+import { isAuthenticated } from "@/lib/auth";
+import { getBestProvider } from "@/lib/best-provider";
+import { rewritePrompt } from "@/lib/rewrite-prompt";
+
+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, enhancedSettings } = 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 selectedProvider = await getBestProvider(selectedModel.value, provider)
+
+  let rewrittenPrompt = prompt;
+
+  if (enhancedSettings.isActive) {
+    rewrittenPrompt = await rewritePrompt(prompt, enhancedSettings, { token, billTo }, selectedModel.value, selectedProvider);
+  }
+
+  console.log(rewrittenPrompt);
+
+  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,
+            messages: [
+              {
+                role: "system",
+                content: INITIAL_SYSTEM_PROMPT,
+              },
+              {
+                role: "user",
+                content: `${rewritePrompt}${redesignMarkdown ? `\n\nHere is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : ""}`
+              },
+            ],
+            max_tokens: selectedProvider.max_tokens,
+          },
+          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));
+          }
+        }
+        
+        // Explicitly close the writer after successful completion
+        await writer.close();
+      } catch (error: any) {
+        if (error.message?.includes("exceeded your monthly included credits")) {
+          await writer.write(
+            encoder.encode(
+              JSON.stringify({
+                ok: false,
+                openProModal: true,
+                message: error.message,
+              })
+            )
+          );
+        } else if (error?.message?.includes("inference provider information")) {
+          await writer.write(
+            encoder.encode(
+              JSON.stringify({
+                ok: false,
+                openSelectProvider: 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 {
+        // Ensure the writer is always closed, even if already closed
+        try {
+          await writer?.close();
+        } catch {
+          // Ignore errors when closing the writer as it might already be closed
+        }
+      }
+    })();
+
+    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 user = await isAuthenticated();
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  const authHeaders = await headers();
+
+  const body = await request.json();
+  const { prompt, previousPrompts, provider, selectedElementHtml, model, pages, files, repoId } =
+    body;
+
+  if (!prompt || pages.length === 0 || !repoId) {
+    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 = user.token as string;
+  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 selectedProvider = await getBestProvider(selectedModel.value, provider)
+
+  try {
+    const response = await client.chatCompletion(
+      {
+        model: selectedModel.value,
+        provider: selectedProvider,
+        messages: [
+          {
+            role: "system",
+            content: FOLLOW_UP_SYSTEM_PROMPT,
+          },
+          {
+            role: "user",
+            content: previousPrompts
+              ? `Also here are the previous prompts:\n\n${previousPrompts.map((p: string) => `- ${p}`).join("\n")}`
+              : "You are modifying the HTML file based on the user's request.",
+          },
+          {
+            role: "assistant",
+
+            content: `${
+              selectedElementHtml
+                ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\``
+                : ""
+            }. Current pages: ${pages?.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}. ${files?.length > 0 ? `Current images: ${files?.map((f: string) => `- ${f}`).join("\n")}.` : ""}`,
+          },
+          {
+            role: "user",
+            content: prompt,
+          },
+        ],
+        ...(selectedProvider.id !== "sambanova"
+          ? {
+              max_tokens: selectedProvider.max_tokens,
+            }
+          : {}),
+      },
+      billTo ? { billTo } : {}
+    );
+
+    const chunk = response.choices[0]?.message?.content;
+    if (!chunk) {
+      return NextResponse.json(
+        { ok: false, message: "No content returned from the model" },
+        { status: 400 }
+      );
+    }
+
+    if (chunk) {
+      const updatedLines: number[][] = [];
+      let newHtml = "";
+      const updatedPages = [...(pages || [])];
+
+      const updatePageRegex = new RegExp(`${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${UPDATE_PAGE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
+      let updatePageMatch;
+      
+      while ((updatePageMatch = updatePageRegex.exec(chunk)) !== null) {
+        const [, pagePath, pageContent] = updatePageMatch;
+        
+        const pageIndex = updatedPages.findIndex(p => p.path === pagePath);
+        if (pageIndex !== -1) {
+          let pageHtml = updatedPages[pageIndex].html;
+          
+          let processedContent = pageContent;
+          const htmlMatch = pageContent.match(/```html\s*([\s\S]*?)\s*```/);
+          if (htmlMatch) {
+            processedContent = htmlMatch[1];
+          }
+          let position = 0;
+          let moreBlocks = true;
+
+          while (moreBlocks) {
+            const searchStartIndex = processedContent.indexOf(SEARCH_START, position);
+            if (searchStartIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
+
+            const dividerIndex = processedContent.indexOf(DIVIDER, searchStartIndex);
+            if (dividerIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
+
+            const replaceEndIndex = processedContent.indexOf(REPLACE_END, dividerIndex);
+            if (replaceEndIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
+
+            const searchBlock = processedContent.substring(
+              searchStartIndex + SEARCH_START.length,
+              dividerIndex
+            );
+            const replaceBlock = processedContent.substring(
+              dividerIndex + DIVIDER.length,
+              replaceEndIndex
+            );
+
+            if (searchBlock.trim() === "") {
+              pageHtml = `${replaceBlock}\n${pageHtml}`;
+              updatedLines.push([1, replaceBlock.split("\n").length]);
+            } else {
+              const blockPosition = pageHtml.indexOf(searchBlock);
+              if (blockPosition !== -1) {
+                const beforeText = pageHtml.substring(0, blockPosition);
+                const startLineNumber = beforeText.split("\n").length;
+                const replaceLines = replaceBlock.split("\n").length;
+                const endLineNumber = startLineNumber + replaceLines - 1;
+
+                updatedLines.push([startLineNumber, endLineNumber]);
+                pageHtml = pageHtml.replace(searchBlock, replaceBlock);
+              }
+            }
+
+            position = replaceEndIndex + REPLACE_END.length;
+          }
+
+          updatedPages[pageIndex].html = pageHtml;
+          
+          if (pagePath === '/' || pagePath === '/index' || pagePath === 'index') {
+            newHtml = pageHtml;
+          }
+        }
+      }
+
+      const newPageRegex = new RegExp(`${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${NEW_PAGE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
+      let newPageMatch;
+      
+      while ((newPageMatch = newPageRegex.exec(chunk)) !== null) {
+        const [, pagePath, pageContent] = newPageMatch;
+        
+        let pageHtml = pageContent;
+        const htmlMatch = pageContent.match(/```html\s*([\s\S]*?)\s*```/);
+        if (htmlMatch) {
+          pageHtml = htmlMatch[1];
+        }
+        
+        const existingPageIndex = updatedPages.findIndex(p => p.path === pagePath);
+        
+        if (existingPageIndex !== -1) {
+          updatedPages[existingPageIndex] = {
+            path: pagePath,
+            html: pageHtml.trim()
+          };
+        } else {
+          updatedPages.push({
+            path: pagePath,
+            html: pageHtml.trim()
+          });
+        }
+      }
+
+      if (updatedPages.length === pages?.length && !chunk.includes(UPDATE_PAGE_START)) {
+        let position = 0;
+        let moreBlocks = true;
+
+        while (moreBlocks) {
+          const searchStartIndex = chunk.indexOf(SEARCH_START, position);
+          if (searchStartIndex === -1) {
+            moreBlocks = false;
+            continue;
+          }
+
+          const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
+          if (dividerIndex === -1) {
+            moreBlocks = false;
+            continue;
+          }
+
+          const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
+          if (replaceEndIndex === -1) {
+            moreBlocks = false;
+            continue;
+          }
+
+          const searchBlock = chunk.substring(
+            searchStartIndex + SEARCH_START.length,
+            dividerIndex
+          );
+          const replaceBlock = chunk.substring(
+            dividerIndex + DIVIDER.length,
+            replaceEndIndex
+          );
+
+          if (searchBlock.trim() === "") {
+            newHtml = `${replaceBlock}\n${newHtml}`;
+            updatedLines.push([1, replaceBlock.split("\n").length]);
+          } else {
+            const blockPosition = newHtml.indexOf(searchBlock);
+            if (blockPosition !== -1) {
+              const beforeText = newHtml.substring(0, blockPosition);
+              const startLineNumber = beforeText.split("\n").length;
+              const replaceLines = replaceBlock.split("\n").length;
+              const endLineNumber = startLineNumber + replaceLines - 1;
+
+              updatedLines.push([startLineNumber, endLineNumber]);
+              newHtml = newHtml.replace(searchBlock, replaceBlock);
+            }
+          }
+
+          position = replaceEndIndex + REPLACE_END.length;
+        }
+
+        // Update the main HTML if it's the index page
+        const mainPageIndex = updatedPages.findIndex(p => p.path === '/' || p.path === '/index' || p.path === 'index');
+        if (mainPageIndex !== -1) {
+          updatedPages[mainPageIndex].html = newHtml;
+        }
+      }
+
+      const files: File[] = [];
+      updatedPages.forEach((page: Page) => {
+        const file = new File([page.html], page.path, { type: "text/html" });
+        files.push(file);
+      });
+
+      uploadFiles({
+        repo: {
+          type: "space",
+          name: repoId,
+        },
+        files,
+        commitTitle: prompt,
+        accessToken: user.token as string,
+      });
+
+      return NextResponse.json({
+        ok: true,
+        updatedLines,
+        pages: updatedPages,
+      });
+    } else {
+      return NextResponse.json(
+        { ok: false, message: "No content returned from the model" },
+        { status: 400 }
+      );
+    }
+  } catch (error: any) {
+    if (error.message?.includes("exceeded your monthly included credits")) {
+      return NextResponse.json(
+        {
+          ok: false,
+          openProModal: true,
+          message: error.message,
+        },
+        { status: 402 }
+      );
+    }
+    return NextResponse.json(
+      {
+        ok: false,
+        openSelectProvider: true,
+        message:
+          error.message || "An error occurred while processing your request.",
+      },
+      { status: 500 }
+    );
+  }
+}
+

app/api/auth/route.ts

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

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

@@ -0,0 +1,141 @@
+import { NextRequest, NextResponse } from "next/server";
+import { RepoDesignation, listFiles, uploadFiles } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+
+export async function POST(
+  req: NextRequest,
+  { params }: { 
+    params: Promise<{ 
+      namespace: string; 
+      repoId: string; 
+      commitId: 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, commitId } = 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 repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+
+    // Fetch files from the specific commit
+    const files: File[] = [];
+    const allowedExtensions = ["html", "md", "css", "js", "json", "txt"];
+    
+    // Get all files from the specific commit
+    for await (const fileInfo of listFiles({
+      repo,
+      accessToken: user.token as string,
+      revision: commitId,
+    })) {
+      const fileExtension = fileInfo.path.split('.').pop()?.toLowerCase();
+      
+      if (allowedExtensions.includes(fileExtension || "")) {
+        // Fetch the file content from the specific commit
+        const response = await fetch(
+          `https://huggingface.co/spaces/${namespace}/${repoId}/raw/${commitId}/${fileInfo.path}`
+        );
+        
+        if (response.ok) {
+          const content = await response.text();
+          let mimeType = "text/plain";
+          
+          switch (fileExtension) {
+            case "html":
+              mimeType = "text/html";
+              break;
+            case "css":
+              mimeType = "text/css";
+              break;
+            case "js":
+              mimeType = "application/javascript";
+              break;
+            case "json":
+              mimeType = "application/json";
+              break;
+            case "md":
+              mimeType = "text/markdown";
+              break;
+          }
+          
+          const file = new File([content], fileInfo.path, { type: mimeType });
+          files.push(file);
+        }
+      }
+    }
+
+    if (files.length === 0) {
+      return NextResponse.json(
+        { ok: false, error: "No files found in the specified commit" },
+        { status: 404 }
+      );
+    }
+
+    // Upload the files to the main branch with a promotion commit message
+    await uploadFiles({
+      repo,
+      files,
+      accessToken: user.token as string,
+      commitTitle: `Promote version ${commitId.slice(0, 7)} to main`,
+      commitDescription: `Promoted commit ${commitId} to main branch`,
+    });
+
+    return NextResponse.json(
+      { 
+        ok: true, 
+        message: "Version promoted successfully",
+        promotedCommit: commitId,
+        filesPromoted: files.length
+      },
+      { status: 200 }
+    );
+
+  } catch (error: any) {
+    console.error("Error promoting version:", error);
+    
+    // Handle specific HuggingFace API errors
+    if (error.statusCode === 404) {
+      return NextResponse.json(
+        { ok: false, error: "Commit not found" },
+        { status: 404 }
+      );
+    }
+    
+    if (error.statusCode === 403) {
+      return NextResponse.json(
+        { ok: false, error: "Access denied to repository" },
+        { status: 403 }
+      );
+    }
+
+    return NextResponse.json(
+      { ok: false, error: error.message || "Failed to promote version" },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,109 @@
+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";
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  try {
+    const user = await isAuthenticated();
+
+    if (user instanceof NextResponse || !user) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    await dbConnect();
+    const param = await params;
+    const { namespace, repoId } = param;
+
+    const project = await Project.findOne({
+      user_id: user.id,
+      space_id: `${namespace}/${repoId}`,
+    }).lean();
+    
+    if (!project) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "Project not found",
+        },
+        { status: 404 }
+      );
+    }
+
+    // Parse the FormData to get the images
+    const formData = await req.formData();
+    const imageFiles = formData.getAll("images") as File[];
+
+    if (!imageFiles || imageFiles.length === 0) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "At least one image file is required under the 'images' key",
+        },
+        { status: 400 }
+      );
+    }
+
+    const files: File[] = [];
+    for (const file of imageFiles) {
+      if (!(file instanceof File)) {
+        return NextResponse.json(
+          {
+            ok: false,
+            error: "Invalid file format - all items under 'images' key must be files",
+          },
+          { status: 400 }
+        );
+      }
+
+      if (!file.type.startsWith('image/')) {
+        return NextResponse.json(
+          {
+            ok: false,
+            error: `File ${file.name} is not an image`,
+          },
+          { status: 400 }
+        );
+      }
+
+      // Create File object with images/ folder prefix
+      const fileName = `images/${file.name}`;
+      const processedFile = new File([file], fileName, { type: file.type });
+      files.push(processedFile);
+    }
+
+    // Upload files to HuggingFace space
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+
+    await uploadFiles({
+      repo,
+      files,
+      accessToken: user.token as string,
+      commitTitle: `Upload ${files.length} image(s)`,
+    });
+
+    return NextResponse.json({ 
+      ok: true, 
+      message: `Successfully uploaded ${files.length} image(s) to ${namespace}/${repoId}/images/`,
+      uploadedFiles: files.map((file) => `https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${file.name}`),
+    }, { status: 200 });
+
+  } catch (error) {
+    console.error('Error uploading images:', error);
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Failed to upload images",
+      },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,235 @@
+import { NextRequest, NextResponse } from "next/server";
+import { RepoDesignation, spaceInfo, uploadFiles, listFiles, deleteRepo, listCommits } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+import { Commit, Page } from "@/types";
+
+export async function DELETE(
+  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 }
+      );
+    }
+
+    if (space.private) {
+      return NextResponse.json(
+        { ok: false, error: "Your space must be public to access it." },
+        { status: 403 }
+      );
+    }
+    
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+    
+    await deleteRepo({
+      repo,
+      accessToken: user.token as string,
+    });
+    
+    await Project.deleteOne({
+      user_id: user.id,
+      space_id: `${namespace}/${repoId}`,
+    });
+    
+    return NextResponse.json({ ok: true }, { status: 200 });
+  } catch (error: any) {
+    return NextResponse.json(
+      { ok: false, error: error.message },
+      { status: 500 }
+    );
+  }
+}
+
+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 }
+      );
+    }
+    if (space.private) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "Space must be public to access it",
+        },
+        { status: 403 }
+      );
+    }
+
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+
+    const htmlFiles: Page[] = [];
+    const files: string[] = [];
+
+    const allowedFilesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif"];
+    
+    for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
+      if (fileInfo.path.endsWith(".html")) {
+        const 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 (allowedFilesExtensions.includes(imageInfo.path.split(".").pop() || "")) {
+            files.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${imageInfo.path}`);
+          }
+        }
+      }
+    }
+    const commits: Commit[] = [];
+    for await (const commit of listCommits({ repo, accessToken: user.token as string })) {
+      if (commit.title.includes("initial commit") || commit.title.includes("image(s)") || commit.title.includes("Promote version")) {
+        continue;
+      }
+      commits.push({
+        title: commit.title,
+        oid: commit.oid,
+        date: commit.date,
+      });
+    }
+    
+    if (htmlFiles.length === 0) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "No HTML files found",
+        },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(
+      {
+        project,
+        pages: htmlFiles,
+        files,
+        commits,
+        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 }
+    );
+  }
+}

app/api/me/projects/route.ts

@@ -0,0 +1,104 @@
+import { NextRequest, NextResponse } from "next/server";
+import { RepoDesignation, createRepo, listCommits, uploadFiles } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+import { Commit, Page } from "@/types";
+import { COLORS } from "@/lib/utils";
+
+export async function POST(
+  req: NextRequest,
+) {
+  const user = await isAuthenticated();
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  await dbConnect();
+  const { title: titleFromRequest, pages, prompt } = await req.json();
+
+  const title = titleFromRequest ?? "DeepSite Project";
+
+  const formattedTitle = title
+  .toLowerCase()
+  .replace(/[^a-z0-9]+/g, "-")
+  .split("-")
+  .filter(Boolean)
+  .join("-")
+  .slice(0, 96);
+
+  const repo: RepoDesignation = {
+    type: "space",
+    name: `${user.name}/${formattedTitle}`,
+  };
+  const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
+  const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
+  const README = `---
+title: ${title}
+colorFrom: ${colorFrom}
+colorTo: ${colorTo}
+emoji: 🐳
+sdk: static
+pinned: false
+tags:
+  - deepsite-v3
+---
+
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+`;
+
+  const files: File[] = [];
+  const readmeFile = new File([README], "README.md", { type: "text/markdown" });
+  files.push(readmeFile);
+  pages.forEach((page: Page) => {
+    const file = new File([page.html], page.path, { type: "text/html" });
+    files.push(file);
+  });
+
+  try {
+    const { repoUrl } = await createRepo({
+      repo,
+      accessToken: user.token as string,
+    });
+    await uploadFiles({
+      repo,
+      files,
+      accessToken: user.token as string,
+      commitTitle: prompt ?? "Redesign my website"
+    });
+
+    const path = repoUrl.split("/").slice(-2).join("/");
+    const project = await Project.create({
+      user_id: user.id,
+      space_id: path,
+    });
+
+    const commits: Commit[] = [];
+    for await (const commit of listCommits({ repo, accessToken: user.token as string })) {
+      if (commit.title.includes("initial commit") || commit.title.includes("image(s)") || commit.title.includes("Promote version")) {
+        continue;
+      }
+      commits.push({
+        title: commit.title,
+        oid: commit.oid,
+        date: commit.date,
+      });
+    }
+
+    let newProject = {
+      files,
+      pages,
+      commits,
+      project,
+    }
+    
+    return NextResponse.json({ space: newProject, path, ok: true }, { status: 201 });
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: err.message, ok: false },
+      { status: 500 }
+    );
+  }
+}

app/api/me/route.ts

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

app/api/proxy/route.ts

@@ -0,0 +1,246 @@
+import { NextRequest, NextResponse } from "next/server";
+import { isAuthenticated } from "@/lib/auth";
+
+export async function GET(req: NextRequest) {
+  const user: any = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  const { searchParams } = new URL(req.url);
+  const spaceId = searchParams.get('spaceId');
+  const commitId = searchParams.get('commitId');
+  const path = searchParams.get('path') || '/';
+  
+  if (!spaceId) {
+    return NextResponse.json({ error: "spaceId parameter required" }, { status: 400 });
+  }
+
+  try {
+    const spaceDomain = `${spaceId.replace("/", "-")}${commitId !== null? `--rev-${commitId.slice(0, 7)}` : ""}.static.hf.space`;
+    const targetUrl = `https://${spaceDomain}${path}`;
+        
+    const response = await fetch(targetUrl, {
+      headers: {
+        'User-Agent': req.headers.get('user-agent') || '',
+      },
+    });
+
+    if (!response.ok) {
+      console.error('Failed to fetch from HF space:', response.status, response.statusText);
+      return NextResponse.json({ 
+        error: "Failed to fetch content", 
+        details: `${response.status} ${response.statusText}`,
+        targetUrl 
+      }, { status: response.status });
+    }
+
+    let content = await response.text();
+    const contentType = response.headers.get('content-type') || 'text/html';
+
+    // Rewrite relative URLs to go through the proxy
+    if (contentType.includes('text/html')) {
+      const baseUrl = `https://${spaceDomain}`;
+      
+      // Fix relative URLs in href attributes
+      content = content.replace(/href="([^"]+)"/g, (match, url) => {
+        if (url.startsWith('/') && !url.startsWith('//')) {
+          // Relative URL starting with /
+          return `href="${baseUrl}${url}"`;
+        } else if (!url.includes('://') && !url.startsWith('#') && !url.startsWith('mailto:') && !url.startsWith('tel:')) {
+          // Relative URL not starting with /
+          return `href="${baseUrl}/${url}"`;
+        }
+        return match;
+      });
+      
+      // Fix relative URLs in src attributes
+      content = content.replace(/src="([^"]+)"/g, (match, url) => {
+        if (url.startsWith('/') && !url.startsWith('//')) {
+          return `src="${baseUrl}${url}"`;
+        } else if (!url.includes('://')) {
+          return `src="${baseUrl}/${url}"`;
+        }
+        return match;
+      });
+      
+      // Add base tag to ensure relative URLs work correctly
+      const baseTag = `<base href="${baseUrl}/">`;
+      if (content.includes('<head>')) {
+        content = content.replace('<head>', `<head>${baseTag}`);
+      } else if (content.includes('<html>')) {
+        content = content.replace('<html>', `<html><head>${baseTag}</head>`);
+      } else {
+        content = `<head>${baseTag}</head>` + content;
+      }
+    }
+
+    const injectedScript = `
+      <script>        
+        // Add event listeners and communicate with parent
+        document.addEventListener('DOMContentLoaded', function() {
+          console.log('DOM loaded, setting up communication');
+          let hoveredElement = null;
+          let isEditModeEnabled = false;
+          
+          document.addEventListener('mouseover', function(event) {
+            if (event.target !== document.body && event.target !== document.documentElement) {
+              hoveredElement = event.target;
+              console.log('Element hovered:', event.target.tagName, 'Edit mode:', isEditModeEnabled);
+              
+              const rect = event.target.getBoundingClientRect();
+              const message = {
+                type: 'ELEMENT_HOVERED',
+                data: {
+                  tagName: event.target.tagName,
+                  rect: {
+                    top: rect.top,
+                    left: rect.left,
+                    width: rect.width,
+                    height: rect.height
+                  },
+                  element: event.target.outerHTML.substring(0, 200)
+                }
+              };
+              console.log('Sending message to parent:', message);
+              parent.postMessage(message, '*');
+            }
+          });
+          
+          document.addEventListener('mouseout', function(event) {
+            hoveredElement = null;
+            
+            parent.postMessage({
+              type: 'ELEMENT_MOUSE_OUT'
+            }, '*');
+          });
+          
+          // Handle clicks - prevent default only in edit mode
+          document.addEventListener('click', function(event) {
+            // Only prevent default if edit mode is enabled
+            if (isEditModeEnabled) {
+              event.preventDefault();
+              event.stopPropagation();
+              
+              const rect = event.target.getBoundingClientRect();
+              parent.postMessage({
+                type: 'ELEMENT_CLICKED',
+                data: {
+                  tagName: event.target.tagName,
+                  rect: {
+                    top: rect.top,
+                    left: rect.left,
+                    width: rect.width,
+                    height: rect.height
+                  },
+                  element: event.target.outerHTML.substring(0, 200)
+                }
+              }, '*');
+            } else {
+              // In non-edit mode, handle link clicks to maintain proxy context
+              const link = event.target.closest('a');
+              if (link && link.href) {
+                event.preventDefault();
+                
+                const url = new URL(link.href);
+                
+                // If it's an external link (different domain than the space), open in new tab
+                if (url.hostname !== '${spaceDomain}') {
+                  window.open(link.href, '_blank');
+                } else {
+                  // For internal links within the space, navigate through the proxy
+                  // Extract the path and query parameters from the original link
+                  const targetPath = url.pathname + url.search + url.hash;
+                  
+                  // Get current proxy URL parameters
+                  const currentUrl = new URL(window.location.href);
+                  const spaceId = currentUrl.searchParams.get('spaceId') || '';
+                  const commitId = currentUrl.searchParams.get('commitId') || '';
+                  
+                  // Construct new proxy URL with the target path
+                  const proxyUrl = '/api/proxy/?' + 
+                    'spaceId=' + encodeURIComponent(spaceId) +
+                    (commitId ? '&commitId=' + encodeURIComponent(commitId) : '') +
+                    '&path=' + encodeURIComponent(targetPath);
+                  
+                  // Navigate to the new URL through the parent window
+                  parent.postMessage({
+                    type: 'NAVIGATE_TO_PROXY',
+                    data: {
+                      proxyUrl: proxyUrl,
+                      targetPath: targetPath
+                    }
+                  }, '*');
+                }
+              }
+            }
+          });
+          
+          // Prevent form submissions when in edit mode
+          document.addEventListener('submit', function(event) {
+            if (isEditModeEnabled) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          });
+          
+          // Prevent other navigation events when in edit mode
+          document.addEventListener('keydown', function(event) {
+            if (isEditModeEnabled && event.key === 'Enter' && (event.target.tagName === 'A' || event.target.tagName === 'BUTTON')) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          });
+          
+          // Listen for messages from parent
+          window.addEventListener('message', function(event) {
+            console.log('Iframe received message from parent:', event.data);
+            if (event.data.type === 'ENABLE_EDIT_MODE') {
+              console.log('Enabling edit mode');
+              isEditModeEnabled = true;
+              document.body.style.userSelect = 'none';
+              document.body.style.pointerEvents = 'auto';
+            } else if (event.data.type === 'DISABLE_EDIT_MODE') {
+              console.log('Disabling edit mode');
+              isEditModeEnabled = false;
+              document.body.style.userSelect = '';
+              document.body.style.pointerEvents = '';
+            }
+          });
+          
+          // Notify parent that script is ready
+          parent.postMessage({
+            type: 'PROXY_SCRIPT_READY'
+          }, '*');
+        });
+      </script>
+    `;
+    
+    let modifiedContent;
+    if (content.includes('</body>')) {
+      modifiedContent = content.replace(
+        /<\/body>/i,
+        `${injectedScript}</body>`
+      );
+    } else {
+      modifiedContent = content + injectedScript;
+    }
+    
+    return new NextResponse(modifiedContent, {
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+        'X-Frame-Options': 'SAMEORIGIN',
+      },
+    });
+
+  } catch (error) {
+    console.error('Proxy error:', error);
+    return NextResponse.json({ 
+      error: "Proxy request failed", 
+      details: error instanceof Error ? error.message : String(error),
+      spaceId 
+    }, { status: 500 });
+  }
+}

app/api/re-design/route.ts

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

app/auth/callback/page.tsx

@@ -0,0 +1,74 @@
+"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";
+import { AnimatedBlobs } from "@/components/animated-blobs";
+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);
+
+  return (
+    <div className="h-screen flex flex-col justify-center items-center bg-neutral-950 z-1 relative">
+      <div className="background__noisy" />
+      <div className="relative max-w-4xl py-10 flex items-center justify-center w-full">
+        <div className="max-w-lg mx-auto !rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden ring-[8px] ring-white/20">
+          <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+            <div className="flex items-center justify-center -space-x-4 mb-3">
+              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                🚀
+              </div>
+              <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+                👋
+              </div>
+              <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                🙌
+              </div>
+            </div>
+            <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>
+        <AnimatedBlobs />
+      </div>
+    </div>
+  );
+}

app/auth/page.tsx

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

app/globals.css

@@ -1,26 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

app/layout.tsx

@@ -1,33 +1,115 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+/* 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 Script from "next/script";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+import "@/assets/globals.css";
+import { Toaster } from "@/components/ui/sonner";
+import MY_TOKEN_KEY from "@/lib/get-cookie-name";
+import { apiServer } from "@/lib/api";
+import IframeDetector from "@/components/iframe-detector";
+import AppContext from "@/components/contexts/app-context";
+import TanstackContext from "@/components/contexts/tanstack-query-context";
+import { LoginProvider } from "@/components/contexts/login-context";
+import { ProProvider } from "@/components/contexts/pro-context";
+
+const inter = Inter({
+  variable: "--font-inter-sans",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const ptSans = PT_Sans({
+  variable: "--font-ptSans-mono",
   subsets: ["latin"],
+  weight: ["400", "700"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  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",
 };
 
-export default function RootLayout({
+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 };
+  }
+}
+
+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={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark h-[100dvh] overflow-hidden`}
       >
-        {children}
+        <IframeDetector />
+        <Toaster richColors position="bottom-center" />
+        <TanstackContext>
+          <AppContext me={data}>
+            <LoginProvider>
+              <ProProvider>{children}</ProProvider>
+            </LoginProvider>
+          </AppContext>
+        </TanstackContext>
       </body>
     </html>
   );

app/page.tsx

@@ -1,103 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}

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

@@ -0,0 +1,10 @@
+import { AppEditor } from "@/components/editor";
+
+export default async function ProjectNamespacePage({
+  params,
+}: {
+  params: Promise<{ namespace: string; repoId: string }>;
+}) {
+  const { namespace, repoId } = await params;
+  return <AppEditor namespace={namespace} repoId={repoId} />;
+}

app/projects/new/page.tsx

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

assets/globals.css

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

components.json

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

components/animated-blobs/index.tsx

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

components/animated-text/index.tsx

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

components/contexts/app-context.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+import { useMount } from "react-use";
+import { toast } from "sonner";
+import { usePathname, useRouter } from "next/navigation";
+
+import { useUser } from "@/hooks/useUser";
+import { User } from "@/types";
+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 children;
+}

components/contexts/login-context.tsx

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

components/contexts/pro-context.tsx

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

components/contexts/tanstack-query-context.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useState } from "react";
+
+export default function TanstackContext({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Create QueryClient instance only once using useState with a function
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000, // 1 minute
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}

components/contexts/user-context.tsx

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

components/editor/ask-ai/index.tsx

@@ -0,0 +1,259 @@
+import { useMemo, useState } from "react";
+import classNames from "classnames";
+import {
+  ArrowUp,
+  CircleStop,
+  Pause,
+  Plus,
+  Square,
+  StopCircle,
+} from "lucide-react";
+import { useLocalStorage } from "react-use";
+import { toast } from "sonner";
+
+import { useAi } from "@/hooks/useAi";
+import { useEditor } from "@/hooks/useEditor";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
+import { EnhancedSettings, Project } from "@/types";
+import { SelectedFiles } from "@/components/editor/ask-ai/selected-files";
+import { SelectedHtmlElement } from "@/components/editor/ask-ai/selected-html-element";
+import { AiLoading } from "@/components/editor/ask-ai/loading";
+import { Button } from "@/components/ui/button";
+import { Uploader } from "@/components/editor/ask-ai/uploader";
+import { ReImagine } from "@/components/editor/ask-ai/re-imagine";
+import { Selector } from "@/components/editor/ask-ai/selector";
+import { PromptBuilder } from "@/components/editor/ask-ai/prompt-builder";
+import { useUser } from "@/hooks/useUser";
+import { useLoginModal } from "@/components/contexts/login-context";
+import { Settings } from "./settings";
+import { useProModal } from "@/components/contexts/pro-context";
+import { MODELS } from "@/lib/providers";
+
+export const AskAi = ({
+  project,
+  isNew,
+  onScrollToBottom,
+}: {
+  project?: Project;
+  files?: string[];
+  isNew?: boolean;
+  onScrollToBottom?: () => void;
+}) => {
+  const { user } = useUser();
+  const { currentPageData, isUploading, pages, isLoadingProject } = useEditor();
+  const {
+    isAiWorking,
+    isThinking,
+    selectedFiles,
+    setSelectedFiles,
+    selectedElement,
+    setSelectedElement,
+    setIsThinking,
+    callAiNewProject,
+    callAiFollowUp,
+    setModel,
+    selectedModel,
+    audio: hookAudio,
+    cancelRequest,
+  } = useAi(onScrollToBottom);
+  const { openLoginModal } = useLoginModal();
+  const { openProModal } = useProModal();
+  const [openProvider, setOpenProvider] = useState(false);
+  const [providerError, setProviderError] = useState("");
+
+  const [enhancedSettings, setEnhancedSettings, removeEnhancedSettings] =
+    useLocalStorage<EnhancedSettings>("deepsite-enhancedSettings", {
+      isActive: true,
+      primaryColor: undefined,
+      secondaryColor: undefined,
+      theme: undefined,
+    });
+
+  const [isFollowUp, setIsFollowUp] = useState(true);
+  const [prompt, setPrompt] = useState("");
+  const [think, setThink] = useState("");
+  const [openThink, setOpenThink] = useState(false);
+
+  const isSameHtml = useMemo(() => {
+    return isTheSameHtml(currentPageData.html);
+  }, [currentPageData.html]);
+
+  const handleThink = (think: string) => {
+    setThink(think);
+    setIsThinking(true);
+    setOpenThink(true);
+  };
+
+  const callAi = async (redesignMarkdown?: string) => {
+    if (!user) return openLoginModal();
+    if (isAiWorking) return;
+    if (!redesignMarkdown && !prompt.trim()) return;
+
+    if (isFollowUp && !redesignMarkdown && !isSameHtml) {
+      const result = await callAiFollowUp(prompt, enhancedSettings);
+
+      if (result?.error) {
+        handleError(result.error, result.message);
+        return;
+      }
+
+      if (result?.success) {
+        setPrompt("");
+      }
+    } else {
+      const result = await callAiNewProject(
+        prompt,
+        enhancedSettings,
+        redesignMarkdown,
+        handleThink,
+        () => {
+          setIsThinking(false);
+        }
+      );
+
+      if (result?.error) {
+        handleError(result.error, result.message);
+        return;
+      }
+
+      if (result?.success) {
+        setPrompt("");
+        if (selectedModel?.isThinker) {
+          setModel(MODELS[0].value);
+        }
+      }
+    }
+  };
+
+  const handleError = (error: string, message?: string) => {
+    switch (error) {
+      case "login_required":
+        openLoginModal();
+        break;
+      case "provider_required":
+        setOpenProvider(true);
+        setProviderError(message || "");
+        break;
+      case "pro_required":
+        openProModal([]);
+        break;
+      case "api_error":
+        toast.error(message || "An error occurred");
+        break;
+      case "network_error":
+        toast.error(message || "Network error occurred");
+        break;
+      default:
+        toast.error("An unexpected error occurred");
+    }
+  };
+
+  return (
+    <div className="p-3 w-full">
+      <div className="relative bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-20 w-full group">
+        <SelectedFiles
+          files={selectedFiles}
+          isAiWorking={isAiWorking}
+          onDelete={(file) =>
+            setSelectedFiles(selectedFiles.filter((f) => f !== file))
+          }
+        />
+        {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 || isThinking) && (
+            <div className="absolute bg-neutral-800 top-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-start pt-3.5 justify-between max-lg:text-sm">
+              <AiLoading
+                text={
+                  isUploading
+                    ? "Uploading images..."
+                    : isAiWorking && !isSameHtml
+                    ? "DeepSite is working..."
+                    : "DeepSite is thinking..."
+                }
+              />
+              {isAiWorking && (
+                <Button
+                  size="iconXs"
+                  variant="outline"
+                  className="!rounded-md mr-0.5"
+                  onClick={cancelRequest}
+                >
+                  <CircleStop className="size-4" />
+                </Button>
+              )}
+            </div>
+          )}
+          <textarea
+            disabled={
+              isAiWorking || isUploading || isThinking || isLoadingProject
+            }
+            className={classNames(
+              "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none",
+              {
+                "!pt-2.5":
+                  selectedElement &&
+                  !(isAiWorking || isUploading || isThinking),
+              }
+            )}
+            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">
+            <PromptBuilder
+              enhancedSettings={enhancedSettings!}
+              setEnhancedSettings={setEnhancedSettings}
+            />
+            <Settings
+              open={openProvider}
+              error={providerError}
+              isFollowUp={!isSameHtml && isFollowUp}
+              onClose={setOpenProvider}
+            />
+            {!isNew && <Uploader project={project} />}
+            {isNew && <ReImagine onRedesign={(md) => callAi(md)} />}
+            {!isNew && <Selector />}
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Button
+              size="iconXs"
+              variant="outline"
+              className="!rounded-md"
+              disabled={
+                isAiWorking || isUploading || isThinking || !prompt.trim()
+              }
+              onClick={() => callAi()}
+            >
+              <ArrowUp className="size-4" />
+            </Button>
+          </div>
+        </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/loading.tsx

@@ -0,0 +1,32 @@
+import Loading from "@/components/loading";
+
+export const AiLoading = ({
+  text = "Ai is working...",
+  className,
+}: {
+  text?: string;
+  className?: string;
+}) => {
+  return (
+    <div className={`flex items-center justify-start gap-2 ${className}`}>
+      <Loading overlay={false} className="!size-4 opacity-50" />
+      <p className="text-neutral-400 text-sm">
+        <span className="inline-flex">
+          {text.split("").map((char, index) => (
+            <span
+              key={index}
+              className="bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse"
+              style={{
+                animationDelay: `${index * 0.1}s`,
+                animationDuration: "1.3s",
+                animationIterationCount: "infinite",
+              }}
+            >
+              {char === " " ? "\u00A0" : char}
+            </span>
+          ))}
+        </span>
+      </p>
+    </div>
+  );
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,169 @@
+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";
+import { useAi } from "@/hooks/useAi";
+import { useEditor } from "@/hooks/useEditor";
+import { useUser } from "@/hooks/useUser";
+import { useLoginModal } from "@/components/contexts/login-context";
+
+export function ReImagine({
+  onRedesign,
+}: {
+  onRedesign: (md: string) => void;
+}) {
+  const [url, setUrl] = useState<string>("");
+  const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const { globalAiLoading } = useAi();
+  const { globalEditorLoading } = useEditor();
+  const { user } = useUser();
+  const { openLoginModal } = useLoginModal();
+
+  const checkIfUrlIsValid = (url: string) => {
+    const urlPattern = new RegExp(
+      /^(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);
+  };
+
+  if (!user)
+    return (
+      <Button
+        size="xs"
+        variant="outline"
+        className="!rounded-md"
+        onClick={() => openLoginModal()}
+      >
+        <Paintbrush className="size-3.5" />
+        Redesign
+      </Button>
+    );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <form>
+        <PopoverTrigger asChild>
+          <Button
+            size="xs"
+            variant={open ? "default" : "outline"}
+            className="!rounded-md"
+            disabled={globalAiLoading || globalEditorLoading}
+          >
+            <Paintbrush className="size-3.5" />
+            Redesign
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="!rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden"
+        >
+          <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+            <div className="flex items-center justify-center -space-x-4 mb-3">
+              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                🎨
+              </div>
+              <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+                🥳
+              </div>
+              <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                💎
+              </div>
+            </div>
+            <p className="text-xl font-semibold text-neutral-950">
+              Redesign your Site!
+            </p>
+            <p className="text-sm text-neutral-500 mt-1.5">
+              Try our new Redesign feature to give your site a fresh look.
+            </p>
+          </header>
+          <main className="space-y-4 p-6">
+            <div>
+              <p className="text-sm text-neutral-700 mb-2">
+                Enter your website URL to get started:
+              </p>
+              <Input
+                type="text"
+                placeholder="https://example.com"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                onBlur={(e) => {
+                  const inputUrl = e.target.value.trim();
+                  if (!inputUrl) {
+                    setUrl("");
+                    return;
+                  }
+                  if (!checkIfUrlIsValid(inputUrl)) {
+                    toast.error("Please enter a valid URL.");
+                    return;
+                  }
+                  setUrl(inputUrl);
+                }}
+                className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
+              />
+            </div>
+            <div>
+              <p className="text-sm text-neutral-700 mb-2">
+                Then, let&apos;s redesign it!
+              </p>
+              <Button
+                variant="black"
+                onClick={handleClick}
+                className="relative w-full"
+              >
+                {isLoading ? (
+                  <>
+                    <Loading
+                      overlay={false}
+                      className="ml-2 size-4 animate-spin"
+                    />
+                    Fetching your site...
+                  </>
+                ) : (
+                  <>
+                    Redesign <Paintbrush className="size-4" />
+                  </>
+                )}
+              </Button>
+            </div>
+          </main>
+        </PopoverContent>
+      </form>
+    </Popover>
+  );
+}

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

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

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

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

components/editor/ask-ai/selector.tsx

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

components/editor/ask-ai/settings.tsx

@@ -0,0 +1,220 @@
+"use client";
+import classNames from "classnames";
+
+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, useState, useEffect } from "react";
+import { useUpdateEffect } from "react-use";
+import Image from "next/image";
+import { Brain, CheckCheck, ChevronDown } from "lucide-react";
+import { useAi } from "@/hooks/useAi";
+
+export function Settings({
+  open,
+  onClose,
+  error,
+  isFollowUp = false,
+}: {
+  open: boolean;
+  error?: string;
+  isFollowUp?: boolean;
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const {
+    model,
+    provider,
+    setProvider,
+    setModel,
+    selectedModel,
+    globalAiLoading,
+  } = useAi();
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const modelAvailableProviders = useMemo(() => {
+    const availableProviders = MODELS.find(
+      (m: { value: string }) => m.value === model
+    )?.providers;
+    if (!availableProviders) return Object.keys(PROVIDERS);
+    return Object.keys(PROVIDERS).filter((id) =>
+      availableProviders.includes(id)
+    );
+  }, [model]);
+
+  useUpdateEffect(() => {
+    if (
+      provider !== "auto" &&
+      !modelAvailableProviders.includes(provider as string)
+    ) {
+      setProvider("auto");
+    }
+  }, [model, provider]);
+
+  return (
+    <Popover open={open} onOpenChange={onClose}>
+      <PopoverTrigger asChild>
+        <Button
+          variant={open ? "default" : "outline"}
+          className="!rounded-md"
+          disabled={globalAiLoading}
+          size="xs"
+        >
+          <Brain className="size-3.5" />
+          <span className="truncate max-w-[120px]">
+            {isMounted
+              ? selectedModel?.label?.split(" ").join("-").toLowerCase()
+              : "..."}
+          </span>
+          <ChevronDown className="size-3.5" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="!rounded-2xl p-0 !w-96 overflow-hidden !bg-neutral-900"
+        align="center"
+      >
+        <header className="flex items-center justify-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
+          Customize Settings
+        </header>
+        <main className="px-4 pt-5 pb-6 space-y-5">
+          {error !== "" && (
+            <p className="text-red-500 text-sm font-medium mb-2 flex items-center justify-between bg-red-500/10 p-2 rounded-md">
+              {error}
+            </p>
+          )}
+          <label className="block">
+            <p className="text-neutral-300 text-sm mb-2.5">Choose a model</p>
+            <Select defaultValue={model} onValueChange={setModel}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a model" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Models</SelectLabel>
+                  {MODELS.map(
+                    ({
+                      value,
+                      label,
+                      isNew = false,
+                      isThinker = false,
+                    }: {
+                      value: string;
+                      label: string;
+                      isNew?: boolean;
+                      isThinker?: boolean;
+                    }) => (
+                      <SelectItem
+                        key={value}
+                        value={value}
+                        className=""
+                        disabled={isThinker && isFollowUp}
+                      >
+                        {label}
+                        {isNew && (
+                          <span className="text-xs bg-gradient-to-br from-sky-400 to-sky-600 text-white rounded-full px-1.5 py-0.5">
+                            New
+                          </span>
+                        )}
+                      </SelectItem>
+                    )
+                  )}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </label>
+          {isFollowUp && (
+            <div className="bg-amber-500/10 border-amber-500/10 p-3 text-xs text-amber-500 border rounded-lg">
+              Note: You can&apos;t use a Thinker model for follow-up requests.
+              We automatically switch to the default model for you.
+            </div>
+          )}
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-neutral-300 text-sm mb-1.5">
+                  Use auto-provider
+                </p>
+                <p className="text-xs text-neutral-400/70">
+                  We&apos;ll automatically select the best provider for you
+                  based on your prompt.
+                </p>
+              </div>
+              <div
+                className={classNames(
+                  "bg-neutral-700 rounded-full min-w-10 w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
+                  {
+                    "!bg-sky-500": provider === "auto",
+                  }
+                )}
+                onClick={() => {
+                  const foundModel = MODELS.find(
+                    (m: { value: string }) => m.value === model
+                  );
+                  if (provider === "auto" && foundModel?.autoProvider) {
+                    setProvider(foundModel.autoProvider);
+                  } else {
+                    setProvider("auto");
+                  }
+                }}
+              >
+                <div
+                  className={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={() => {
+                      setProvider(id);
+                    }}
+                  >
+                    <Image
+                      src={`/providers/${id}.svg`}
+                      alt={PROVIDERS[id as keyof typeof PROVIDERS].name}
+                      className="size-5 mr-2"
+                      width={20}
+                      height={20}
+                    />
+                    {PROVIDERS[id as keyof typeof PROVIDERS].name}
+                    {id === provider && (
+                      <CheckCheck className="ml-2 size-4 text-blue-500" />
+                    )}
+                  </Button>
+                ))}
+              </div>
+            </label>
+          </div>
+        </main>
+      </PopoverContent>
+    </Popover>
+  );
+}

components/editor/ask-ai/uploader.tsx

@@ -0,0 +1,165 @@
+import { useRef, useState } from "react";
+import {
+  CheckCircle,
+  ImageIcon,
+  Images,
+  Link,
+  Paperclip,
+  Upload,
+} from "lucide-react";
+import Image from "next/image";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Project } from "@/types";
+import Loading from "@/components/loading";
+import { useUser } from "@/hooks/useUser";
+import { useEditor } from "@/hooks/useEditor";
+import { useAi } from "@/hooks/useAi";
+import { useLoginModal } from "@/components/contexts/login-context";
+
+export const Uploader = ({ project }: { project: Project | undefined }) => {
+  const { user } = useUser();
+  const { openLoginModal } = useLoginModal();
+  const { uploadFiles, isUploading, files, globalEditorLoading } = useEditor();
+  const { selectedFiles, setSelectedFiles, globalAiLoading } = useAi();
+
+  const [open, setOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  if (!user)
+    return (
+      <Button
+        size="xs"
+        variant="outline"
+        className="!rounded-md"
+        disabled={globalAiLoading || globalEditorLoading}
+        onClick={() => openLoginModal()}
+      >
+        <Paperclip className="size-3.5" />
+        Attach
+      </Button>
+    );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <form className="h-[24px]">
+        <PopoverTrigger asChild>
+          <Button
+            size="xs"
+            variant={open ? "default" : "outline"}
+            className="!rounded-md"
+            disabled={globalAiLoading || globalEditorLoading}
+          >
+            <Paperclip className="size-3.5" />
+            Attach
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="!rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden"
+        >
+          <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+            <div className="flex items-center justify-center -space-x-4 mb-3">
+              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                🎨
+              </div>
+              <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+                🖼️
+              </div>
+              <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                💻
+              </div>
+            </div>
+            <p className="text-xl font-semibold text-neutral-950">
+              Add Custom Images
+            </p>
+            <p className="text-sm text-neutral-500 mt-1.5">
+              Upload images to your project and use them with DeepSite!
+            </p>
+          </header>
+          <main className="space-y-4 p-5">
+            <div>
+              <p className="text-xs text-left text-neutral-700 mb-2">
+                Uploaded Images
+              </p>
+              {files?.length > 0 ? (
+                <div className="grid grid-cols-4 gap-1 flex-wrap max-h-40 overflow-y-auto">
+                  {files.map((file: string) => (
+                    <div
+                      key={file}
+                      className="select-none relative cursor-pointer bg-white rounded-md border-[2px] border-white hover:shadow-2xl transition-all duration-300"
+                      onClick={() =>
+                        setSelectedFiles(
+                          selectedFiles.includes(file)
+                            ? selectedFiles.filter((f) => f !== file)
+                            : [...selectedFiles, file]
+                        )
+                      }
+                    >
+                      <Image
+                        src={file}
+                        alt="uploaded image"
+                        width={56}
+                        height={56}
+                        className="object-cover w-full rounded-sm aspect-square"
+                      />
+                      {selectedFiles.includes(file) && (
+                        <div className="absolute top-0 right-0 h-full w-full flex items-center justify-center bg-black/50 rounded-md">
+                          <CheckCircle className="size-6 text-neutral-100" />
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground font-mono flex flex-col items-center gap-1 pt-2">
+                  <ImageIcon className="size-4" />
+                  No images uploaded yet
+                </p>
+              )}
+            </div>
+            <div>
+              <p className="text-xs text-left text-neutral-700 mb-2">
+                Or import images from your computer
+              </p>
+              <Button
+                variant="black"
+                onClick={() => fileInputRef.current?.click()}
+                className="relative w-full"
+                disabled={isUploading}
+              >
+                {isUploading ? (
+                  <>
+                    <Loading
+                      overlay={false}
+                      className="ml-2 size-4 animate-spin"
+                    />
+                    Uploading image(s)...
+                  </>
+                ) : (
+                  <>
+                    <Upload className="size-4" />
+                    Upload Images
+                  </>
+                )}
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                multiple
+                accept="image/*"
+                onChange={(e) => uploadFiles(e.target.files, project!)}
+              />
+            </div>
+          </main>
+        </PopoverContent>
+      </form>
+    </Popover>
+  );
+};

components/editor/header/index.tsx

@@ -0,0 +1,86 @@
+import { ArrowRight, HelpCircle, RefreshCcw } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+import Logo from "@/assets/logo.svg";
+import { Button } from "@/components/ui/button";
+import { useUser } from "@/hooks/useUser";
+import { ProTag } from "@/components/pro-modal";
+import { UserMenu } from "@/components/user-menu";
+import { SwitchDevice } from "@/components/editor/switch-devide";
+import { SwitchTab } from "./switch-tab";
+import { History } from "@/components/editor/history";
+
+export function Header() {
+  const { user, openLoginWindow } = useUser();
+  return (
+    <header className="border-b bg-neutral-950 dark:border-neutral-800 grid grid-cols-3 lg:flex items-center max-lg:gap-3 justify-between z-20">
+      <div className="flex items-center justify-between lg:max-w-[600px] lg:w-full py-2 px-2 lg:px-3 lg:pl-6 gap-3">
+        <h1 className="text-neutral-900 dark:text-white text-lg lg:text-xl font-bold flex items-center justify-start">
+          <Image
+            src={Logo}
+            alt="DeepSite Logo"
+            className="size-8 invert-100 dark:invert-0"
+          />
+          <p className="ml-2 flex items-center justify-start max-lg:hidden">
+            DeepSite
+            {user?.isPro ? (
+              <ProTag className="ml-2 !text-[10px]" />
+            ) : (
+              <span className="font-mono bg-gradient-to-r from-sky-500/20 to-sky-500/10 text-sky-500 rounded-full text-xs ml-2 px-1.5 py-0.5 border border-sky-500/20">
+                {" "}
+                v3
+              </span>
+            )}
+          </p>
+        </h1>
+        <div className="flex items-center justify-end gap-2">
+          <History />
+          <SwitchTab />
+        </div>
+      </div>
+      <div className="lg:hidden flex items-center justify-center whitespace-nowrap">
+        <SwitchTab isMobile />
+      </div>
+      <div className="lg:w-full px-2 lg:px-3 py-2 flex items-center justify-end lg:justify-between lg:border-l lg:border-neutral-800">
+        <div className="font-mono text-muted-foreground flex items-center gap-2">
+          <SwitchDevice />
+          <Button
+            size="xs"
+            variant="bordered"
+            className="max-lg:hidden"
+            onClick={() => {
+              const iframe = document.getElementById(
+                "preview-iframe"
+              ) as HTMLIFrameElement;
+              if (iframe) {
+                iframe.src = iframe.src;
+              }
+            }}
+          >
+            <RefreshCcw className="size-3 mr-0.5" />
+            Refresh Preview
+          </Button>
+          <Link
+            href="https://huggingface.co/enzostvs/deepsite"
+            target="_blank"
+            className="max-lg:hidden"
+          >
+            <Button size="xs" variant="bordered">
+              <HelpCircle className="size-3 mr-0.5" />
+              Help
+            </Button>
+          </Link>
+        </div>
+        {user ? (
+          <UserMenu className="!pl-1 !pr-3 !py-1 !h-auto" />
+        ) : (
+          <Button size="sm" onClick={openLoginWindow}>
+            Access to my Account
+            <ArrowRight className="size-4" />
+          </Button>
+        )}
+      </div>
+    </header>
+  );
+}

components/editor/header/switch-tab.tsx

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

components/editor/history/index.tsx

@@ -0,0 +1,91 @@
+import { History as HistoryIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Commit } from "@/types";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { useEditor } from "@/hooks/useEditor";
+import classNames from "classnames";
+
+export function History() {
+  const { commits, currentCommit, setCurrentCommit } = useEditor();
+  const [open, setOpen] = useState(false);
+
+  if (commits.length === 0) return null;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          size="xs"
+          variant={open ? "default" : "outline"}
+          className="!rounded-md max-lg:hidden"
+        >
+          <HistoryIcon className="size-3.5" />
+          {commits?.length} edit{commits?.length !== 1 ? "s" : ""}
+        </Button>
+      </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="space-y-3">
+          <ul className="max-h-[250px] overflow-y-auto">
+            {commits?.map((item: Commit, index: number) => (
+              <li
+                key={index}
+                className={classNames(
+                  "px-4 text-gray-200 py-2 border-b border-gray-800 last:border-0 space-y-1",
+                  {
+                    "bg-blue-500/10": currentCommit === item.oid,
+                  }
+                )}
+              >
+                <p className="line-clamp-1 text-sm">{item.title}</p>
+                <div className="w-full flex items-center justify-between gap-2">
+                  <p className="text-gray-500 text-[10px]">
+                    {new Date(item.date).toLocaleDateString("en-US", {
+                      month: "2-digit",
+                      day: "2-digit",
+                      year: "2-digit",
+                    }) +
+                      " " +
+                      new Date(item.date).toLocaleTimeString("en-US", {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                        second: "2-digit",
+                        hour12: false,
+                      })}
+                  </p>
+                  {currentCommit !== item.oid ? (
+                    <Button
+                      variant="link"
+                      size="xss"
+                      className="text-gray-400 hover:text-gray-200"
+                      onClick={() => {
+                        setCurrentCommit(item.oid);
+                      }}
+                    >
+                      See version
+                    </Button>
+                  ) : (
+                    <span className="text-blue-500 bg-blue-500/10 border border-blue-500/20 rounded-full text-[10px] px-2 py-0.5">
+                      Current version
+                    </span>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </main>
+      </PopoverContent>
+    </Popover>
+  );
+}

components/editor/index.tsx

@@ -0,0 +1,106 @@
+"use client";
+import { useMemo, useRef, useState } from "react";
+import { useCopyToClipboard } from "react-use";
+import { CopyIcon } from "lucide-react";
+import { toast } from "sonner";
+import classNames from "classnames";
+import { editor } from "monaco-editor";
+import Editor from "@monaco-editor/react";
+
+import { useEditor } from "@/hooks/useEditor";
+import { Header } from "@/components/editor/header";
+import { useAi } from "@/hooks/useAi";
+
+import { ListPages } from "./pages";
+import { AskAi } from "./ask-ai";
+import { Preview } from "./preview";
+import Loading from "../loading";
+
+export const AppEditor = ({
+  namespace,
+  repoId,
+  isNew = false,
+}: {
+  namespace?: string;
+  repoId?: string;
+  isNew?: boolean;
+}) => {
+  const { project, setPages, files, currentPageData, currentTab } = useEditor(
+    namespace,
+    repoId
+  );
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  const monacoRef = useRef<any>(null);
+  const editor = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+
+  return (
+    <section className="h-screen w-full bg-neutral-950 flex flex-col">
+      <Header />
+      <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full relative">
+        <div
+          ref={editor}
+          className={classNames(
+            "bg-neutral-900 relative flex h-full max-h-[calc(100dvh-47px)] w-full flex-col lg:max-w-[600px] transition-all duration-200",
+            {
+              "max-lg:hidden lg:!w-[0px] overflow-hidden":
+                currentTab !== "chat",
+            }
+          )}
+        >
+          <ListPages />
+          <CopyIcon
+            className="size-4 absolute top-14 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
+            onClick={() => {
+              copyToClipboard(currentPageData.html);
+              toast.success("HTML copied to clipboard!");
+            }}
+          />
+          <Editor
+            defaultLanguage="html"
+            theme="vs-dark"
+            loading={<Loading overlay={false} />}
+            className="h-full absolute left-0 top-0 lg:min-w-[600px]"
+            options={{
+              colorDecorators: true,
+              fontLigatures: true,
+              theme: "vs-dark",
+              minimap: { enabled: false },
+              scrollbar: {
+                horizontal: "hidden",
+              },
+              wordWrap: "on",
+            }}
+            value={currentPageData.html}
+            onChange={(value) => {
+              const newValue = value ?? "";
+              setPages((prev) =>
+                prev.map((page) =>
+                  page.path === currentPageData.path
+                    ? { ...page, html: newValue }
+                    : page
+                )
+              );
+            }}
+            onMount={(editor, monaco) => {
+              editorRef.current = editor;
+              monacoRef.current = monaco;
+            }}
+          />
+          <AskAi
+            project={project}
+            files={files}
+            isNew={isNew}
+            onScrollToBottom={() => {
+              editorRef.current?.revealLine(
+                editorRef.current?.getModel()?.getLineCount() ?? 0
+              );
+            }}
+          />
+        </div>
+        <Preview isNew={isNew} />
+      </main>
+    </section>
+  );
+};

components/editor/pages/index.tsx

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

components/editor/pages/page.tsx

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