Update Dockerfile

.env.example

@@ -1,4 +0,0 @@
-AUTH_HUGGINGFACE_ID=
-AUTH_HUGGINGFACE_SECRET=
-NEXTAUTH_URL=http://localhost:3001
-AUTH_SECRET=

.gitattributes

@@ -1 +0,0 @@
-public/banner.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -31,7 +31,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env
+.env*
 
 # vercel
 .vercel

Dockerfile

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

README.md

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

actions/mentions.ts

@@ -1,31 +0,0 @@
-"use client";
-
-import { File } from "@/lib/type";
-
-export const searchMentions = async (query: string) => {
-  const promises = [searchModels(query), searchDatasets(query)];
-  const results = await Promise.all(promises);
-  return { models: results[0], datasets: results[1] };
-};
-
-const searchModels = async (query: string) => {
-  const response = await fetch(
-    `https://huggingface.co/api/quicksearch?q=${query}&type=model&limit=3`
-  );
-  const data = await response.json();
-  return data?.models ?? [];
-};
-
-const searchDatasets = async (query: string) => {
-  const response = await fetch(
-    `https://huggingface.co/api/quicksearch?q=${query}&type=dataset&limit=3`
-  );
-  const data = await response.json();
-  return data?.datasets ?? [];
-};
-
-export const searchFilesMentions = async (query: string, files: File[]) => {
-  if (!query) return files;
-  const lowerQuery = query.toLowerCase();
-  return files.filter((file) => file.path.toLowerCase().includes(lowerQuery));
-};

actions/projects.ts

@@ -1,175 +0,0 @@
-"use server";
-import {
-  downloadFile,
-  listCommits,
-  listFiles,
-  listSpaces,
-  RepoDesignation,
-  SpaceEntry,
-  spaceInfo,
-} from "@huggingface/hub";
-
-import { auth } from "@/lib/auth";
-import { Commit, File } from "@/lib/type";
-
-export interface ProjectWithCommits extends SpaceEntry {
-  commits?: Commit[];
-  medias?: string[];
-}
-
-const IGNORED_PATHS = ["README.md", ".gitignore", ".gitattributes"];
-const IGNORED_FORMATS = [
-  ".png",
-  ".jpg",
-  ".jpeg",
-  ".gif",
-  ".svg",
-  ".webp",
-  ".mp4",
-  ".mp3",
-  ".wav",
-];
-
-export const getProjects = async () => {
-  const projects: SpaceEntry[] = [];
-  const session = await auth();
-  if (!session?.user) {
-    return projects;
-  }
-  const token = session.accessToken;
-  for await (const space of listSpaces({
-    accessToken: token,
-    additionalFields: ["author", "cardData"],
-    search: {
-      owner: "enzostvs",
-    },
-  })) {
-    if (
-      space.sdk === "static" &&
-      Array.isArray((space.cardData as { tags?: string[] })?.tags) &&
-      (space.cardData as { tags?: string[] })?.tags?.some((tag) =>
-        tag.includes("deepsite")
-      )
-    ) {
-      projects.push(space);
-    }
-  }
-  return projects;
-};
-export const getProject = async (id: string, commitId?: string) => {
-  const session = await auth();
-  if (!session?.user) {
-    return null;
-  }
-  const token = session.accessToken;
-  try {
-    const project: ProjectWithCommits | null = await spaceInfo({
-      name: id,
-      accessToken: token,
-      additionalFields: ["author", "cardData"],
-    });
-    const repo: RepoDesignation = {
-      type: "space",
-      name: id,
-    };
-    const files: File[] = [];
-    const medias: string[] = [];
-    const params = { repo, accessToken: token };
-    if (commitId) {
-      Object.assign(params, { revision: commitId });
-    }
-    for await (const fileInfo of listFiles(params)) {
-      if (IGNORED_PATHS.includes(fileInfo.path)) continue;
-      if (IGNORED_FORMATS.some((format) => fileInfo.path.endsWith(format))) {
-        medias.push(
-          `https://huggingface.co/spaces/${id}/resolve/main/${fileInfo.path}`
-        );
-        continue;
-      }
-
-      if (fileInfo.type === "directory") {
-        for await (const subFile of listFiles({
-          repo,
-          accessToken: token,
-          path: fileInfo.path,
-        })) {
-          if (IGNORED_FORMATS.some((format) => subFile.path.endsWith(format))) {
-            medias.push(
-              `https://huggingface.co/spaces/${id}/resolve/main/${subFile.path}`
-            );
-          }
-          const blob = await downloadFile({
-            repo,
-            accessToken: token,
-            path: subFile.path,
-            raw: true,
-            ...(commitId ? { revision: commitId } : {}),
-          }).catch((_) => {
-            return null;
-          });
-          if (!blob) {
-            continue;
-          }
-          const html = await blob?.text();
-          if (!html) {
-            continue;
-          }
-          files[subFile.path === "index.html" ? "unshift" : "push"]({
-            path: subFile.path,
-            content: html,
-          });
-        }
-      } else {
-        const blob = await downloadFile({
-          repo,
-          accessToken: token,
-          path: fileInfo.path,
-          raw: true,
-          ...(commitId ? { revision: commitId } : {}),
-        }).catch((_) => {
-          return null;
-        });
-        if (!blob) {
-          continue;
-        }
-        const html = await blob?.text();
-        if (!html) {
-          continue;
-        }
-        files[fileInfo.path === "index.html" ? "unshift" : "push"]({
-          path: fileInfo.path,
-          content: html,
-        });
-      }
-    }
-    const commits: Commit[] = [];
-    const commitIterator = listCommits({ repo, accessToken: token });
-    for await (const commit of commitIterator) {
-      if (
-        commit.title?.toLowerCase() === "initial commit" ||
-        commit.title
-          ?.toLowerCase()
-          ?.includes("upload media files through deepsite")
-      )
-        continue;
-      commits.push({
-        title: commit.title,
-        oid: commit.oid,
-        date: commit.date,
-      });
-      if (commits.length >= 20) {
-        break;
-      }
-    }
-
-    project.commits = commits;
-    project.medias = medias;
-
-    return { project, files };
-  } catch (error) {
-    return {
-      project: null,
-      files: [],
-    };
-  }
-};

app/(public)/layout.tsx

@@ -1,12 +1,13 @@
-import { Navigation } from "@/components/public/navigation";
+import Navigation from "@/components/public/navigation";
 
-export default function PublicLayout({
+export default async function PublicLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <div className="min-h-screen font-sans">
+    <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

@@ -1,21 +1,5 @@
-import { AnimatedDotsBackground } from "@/components/public/animated-dots-background";
-import { HeroHeader } from "@/components/public/hero-header";
-import { UserProjects } from "@/components/projects/user-projects";
-import { AskAiLanding } from "@/components/ask-ai/ask-ai-landing";
+import { MyProjects } from "@/components/my-projects";
 
-export default async function Homepage() {
-  return (
-    <>
-      <section className="container mx-auto relative z-10">
-        <HeroHeader />
-        <div className="absolute inset-0 -z-10">
-          <AnimatedDotsBackground />
-        </div>
-        <div className="max-w-xl mx-auto px-6">
-          <AskAiLanding />
-        </div>
-      </section>
-      <UserProjects />
-    </>
-  );
+export default async function HomePage() {
+  return <MyProjects />;
 }

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

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

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

@@ -1,32 +0,0 @@
-import { getProject } from "@/actions/projects";
-import { AppEditor } from "@/components/editor";
-import { auth } from "@/lib/auth";
-import { notFound, redirect } from "next/navigation";
-
-export default async function ProjectPage({
-  params,
-  searchParams,
-}: {
-  params: Promise<{ owner: string; repoId: string }>;
-  searchParams: Promise<{ commit?: string }>;
-}) {
-  const session = await auth();
-
-  if (!session) {
-    redirect("/deepsite/api/auth/signin");
-  }
-
-  const { owner, repoId } = await params;
-  const { commit } = await searchParams;
-  const datas = await getProject(`${owner}/${repoId}`, commit);
-  if (!datas?.project) {
-    return notFound();
-  }
-  return (
-    <AppEditor
-      project={datas.project}
-      files={datas.files ?? []}
-      isHistoryView={!!commit}
-    />
-  );
-}

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,47 @@
+"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: [],
+    };
+  }
+
+  const projects = [];
+  for await (const space of listSpaces({
+    accessToken: user.token as string,
+    additionalFields: ["author", "cardData"],
+    search: {
+      owner: user.name,
+    }
+  })) {
+    if (
+      !space.private &&
+      space.sdk === "static" &&
+      Array.isArray((space.cardData as { tags?: string[] })?.tags) &&
+      (
+        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite-v3")) ||
+        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite"))
+      )
+    ) {
+      projects.push(space);
+    }
+  }
+
+  return {
+    ok: true,
+    projects,
+  };
+}

app/api/ask/route.ts

@@ -1,37 +1,101 @@
+/* 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 { FOLLOW_UP_SYSTEM_PROMPT, INITIAL_SYSTEM_PROMPT } from "@/lib/prompts";
-import { auth } from "@/lib/auth";
-import { File, Message } from "@/lib/type";
-import { DEFAULT_MODEL, MODELS } from "@/lib/providers";
+import { MODELS } from "@/lib/providers";
+import {
+  DIVIDER,
+  FOLLOW_UP_SYSTEM_PROMPT,
+  INITIAL_SYSTEM_PROMPT,
+  MAX_REQUESTS_PER_IP,
+  NEW_PAGE_END,
+  NEW_PAGE_START,
+  REPLACE_END,
+  SEARCH_START,
+  UPDATE_PAGE_START,
+  UPDATE_PAGE_END,
+  PROMPT_FOR_PROJECT_NAME,
+} from "@/lib/prompts";
+import { calculateMaxTokens, estimateInputTokens, getProviderSpecificConfig } from "@/lib/max-tokens";
+import MY_TOKEN_KEY from "@/lib/get-cookie-name";
+import { Page } from "@/types";
+import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub";
+import { isAuthenticated } from "@/lib/auth";
+import { getBestProvider } from "@/lib/best-provider";
+// import { rewritePrompt } from "@/lib/rewrite-prompt";
+import { COLORS } from "@/lib/utils";
+import { templates } from "@/lib/templates";
 
-export async function POST(request: Request) {
-  const session = await auth();
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-  const token = session.accessToken;
+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,
-    previousMessages = [],
-    files = [],
-    provider,
-    model,
-    redesignMd,
-    medias,
-  } = body;
-
-  if (!prompt) {
-    return NextResponse.json({ error: "Prompt is required" }, { status: 400 });
+  const { prompt, provider, model, redesignMarkdown, enhancedSettings, pages } = body;
+
+  if (!model || (!prompt && !redesignMarkdown)) {
+    return NextResponse.json(
+      { ok: false, error: "Missing required fields" },
+      { status: 400 }
+    );
+  }
+
+  const selectedModel = MODELS.find(
+    (m) => m.value === model || m.label === model
+  );
+
+  if (!selectedModel) {
+    return NextResponse.json(
+      { ok: false, error: "Invalid model selected" },
+      { status: 400 }
+    );
   }
-  if (!model || !MODELS.find((m: (typeof MODELS)[0]) => m.value === model)) {
-    return NextResponse.json({ error: "Model is required" }, { status: 400 });
+
+  let token: string | null = null;
+  if (userToken) 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 client = new InferenceClient(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 = redesignMarkdown ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : prompt;
+
+  if (enhancedSettings.isActive) {
+    // rewrittenPrompt = await rewritePrompt(rewrittenPrompt, enhancedSettings, { token, billTo }, selectedModel.value, selectedProvider.provider);
+  }
 
   try {
     const encoder = new TextEncoder();
@@ -45,138 +109,641 @@ export async function POST(request: Request) {
         Connection: "keep-alive",
       },
     });
-    (async () => {
-      let hasRetried = false;
-      let currentModel = model;
 
-      const tryGeneration = async (): Promise<void> => {
-        try {
-          const chatCompletion = client.chatCompletionStream({
-            model: currentModel + (provider !== "auto" ? `:${provider}` : ""),
+    (async () => {
+      // let completeResponse = "";
+      try {
+        const client = new InferenceClient(token);
+        
+        const systemPrompt = INITIAL_SYSTEM_PROMPT;
+        
+        const userPrompt = rewrittenPrompt;
+        const estimatedInputTokens = estimateInputTokens(systemPrompt, userPrompt);
+        const dynamicMaxTokens = calculateMaxTokens(selectedProvider, estimatedInputTokens, true);
+        const providerConfig = getProviderSpecificConfig(selectedProvider, dynamicMaxTokens);
+        
+        const chatCompletion = client.chatCompletionStream(
+          {
+            model: selectedModel.value,
+            provider: selectedProvider.provider,
             messages: [
               {
                 role: "system",
-                content:
-                  files.length > 0
-                    ? FOLLOW_UP_SYSTEM_PROMPT
-                    : INITIAL_SYSTEM_PROMPT,
+                content: systemPrompt,
               },
-              ...previousMessages.map((message: Message) => ({
-                role: message.role,
-                content: message.content,
-              })),
-              ...(files?.length > 0
-                ? [
-                    {
-                      role: "user",
-                      content: `Here are the files that the user has provider:${files
-                        .map(
-                          (file: File) =>
-                            `File: ${file.path}\nContent: ${file.content}`
-                        )
-                        .join("\n")}\n\n${prompt}`,
-                    },
-                  ]
-                : []),
               {
                 role: "user",
-                content: `${
-                  redesignMd?.url &&
-                  `Redesign the following website ${redesignMd.url}, try to use the same images and content, but you can still improve it if needed. Do the best version possibile. Here is the markdown:\n ${redesignMd.md} \n\n`
-                }${prompt} ${
-                  medias && medias.length > 0
-                    ? `\nHere is the list of my media files: ${medias.join(
-                        ", "
-                      )}\n`
-                    : ""
-                }`,
+                content: userPrompt + (enhancedSettings.isActive ? `1. I want to use the following primary color: ${enhancedSettings.primaryColor} (eg: bg-${enhancedSettings.primaryColor}-500).
+2. I want to use the following secondary color: ${enhancedSettings.secondaryColor} (eg: bg-${enhancedSettings.secondaryColor}-500).
+3. I want to use the following theme: ${enhancedSettings.theme} mode.` : "")
               },
             ],
-            stream: true,
-            max_tokens: 16_000,
-          });
-          while (true) {
-            const { done, value } = await chatCompletion.next();
-            if (done) {
-              break;
-            }
+            ...providerConfig,
+          },
+          billTo ? { billTo } : {}
+        );
 
-            const chunk = value.choices[0]?.delta?.content;
-            if (chunk) {
-              await writer.write(encoder.encode(chunk));
-            }
+        while (true) {
+          const { done, value } = await chatCompletion.next()
+          if (done) {
+            break;
           }
 
-          await writer.close();
-        } catch (error) {
-          const errorMessage =
-            error instanceof Error
-              ? error.message
-              : "An error occurred while processing your request";
-
-          if (
-            !hasRetried &&
-            errorMessage?.includes(
-              "Failed to perform inference: Model not found"
+          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,
+              })
             )
-          ) {
-            hasRetried = true;
-            if (model === DEFAULT_MODEL) {
-              const availableFallbackModels = MODELS.filter(
-                (m) => m.value !== model
-              );
-              const randomIndex = Math.floor(
-                Math.random() * availableFallbackModels.length
-              );
-              currentModel = availableFallbackModels[randomIndex];
-            } else {
-              currentModel = DEFAULT_MODEL;
-            }
-            const switchMessage = `\n\n_Note: The selected model was not available. Switched to \`${currentModel}\`._\n\n`;
-            await writer.write(encoder.encode(switchMessage));
+          );
+        } 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: repoIdFromBody, isNew, enhancedSettings } =
+    body;
+
+  let repoId = repoIdFromBody;
+
+  if (!prompt || pages.length === 0) {
+    return NextResponse.json(
+      { ok: false, error: "Missing required fields" },
+      { status: 400 }
+    );
+  }
+
+  const selectedModel = MODELS.find(
+    (m) => m.value === model || m.label === model
+  );
+  if (!selectedModel) {
+    return NextResponse.json(
+      { ok: false, error: "Invalid model selected" },
+      { status: 400 }
+    );
+  }
+
+  let token = user.token as string;
+  let billTo: string | null = null;
 
-            return tryGeneration();
+  /**
+   * 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 escapeRegExp = (string: string) => {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  };
+
+  const normalizeHtml = (html: string): string => {
+    return html
+      // Normalize whitespace within tags
+      .replace(/\s+/g, ' ')
+      // Remove spaces before closing >
+      .replace(/\s+>/g, '>')
+      // Remove spaces before />
+      .replace(/\s+\/>/g, '/>')
+      // Normalize spaces around = in attributes
+      .replace(/\s*=\s*/g, '=')
+      // Normalize quotes (convert single to double)
+      .replace(/='([^']*)'/g, '="$1"')
+      // Remove trailing spaces in opening/closing tags
+      .replace(/<([^>]*?)\s+>/g, '<$1>')
+      // Normalize self-closing tags
+      .replace(/\/\s*>/g, '/>')
+      .trim();
+  };
+
+  const createFlexibleHtmlRegex = (searchBlock: string) => {
+    // Normalize both the search block for comparison
+    const normalizedSearch = normalizeHtml(searchBlock);
+    
+    // Escape regex special characters
+    let searchRegex = escapeRegExp(normalizedSearch)
+      // Make whitespace flexible (but only between elements, not within tags)
+      .replace(/>\s*</g, '>\\s*<')
+      // Make line breaks and spaces around content flexible
+      .replace(/>\s*([^<]+)\s*</g, '>\\s*$1\\s*<');
+    
+    return new RegExp(searchRegex, 'g');
+  };
+
+  const selectedProvider = await getBestProvider(selectedModel.value, provider)
+
+  try {
+    const systemPrompt = FOLLOW_UP_SYSTEM_PROMPT + (isNew ? PROMPT_FOR_PROJECT_NAME : "");
+    const userContext = "You are modifying the HTML file based on the user's request.";
+    
+    const getRelevantPages = (pages: Page[], prompt: string, maxPages: number = 2): Page[] => {
+      if (pages.length <= maxPages) return pages;
+      
+      const indexPage = pages.find(p => p.path === '/' || p.path === '/index' || p.path === 'index');
+      const otherPages = pages.filter(p => p !== indexPage);
+      
+      if (selectedElementHtml) {
+        const elementKeywords = selectedElementHtml.toLowerCase().match(/class=["']([^"']*)["']|id=["']([^"']*)["']/g) || [];
+        const relevantPages = otherPages.filter(page => {
+          const pageContent = page.html.toLowerCase();
+          return elementKeywords.some((keyword: string) => pageContent.includes(keyword.toLowerCase()));
+        });
+        
+        return indexPage ? [indexPage, ...relevantPages.slice(0, maxPages - 1)] : relevantPages.slice(0, maxPages);
+      }
+      
+      const keywords = prompt.toLowerCase().split(/\s+/).filter(word => word.length > 3);
+      const scoredPages = otherPages.map(page => {
+        const pageContent = (page.path + ' ' + page.html).toLowerCase();
+        const score = keywords.reduce((acc, keyword) => {
+          return acc + (pageContent.includes(keyword) ? 1 : 0);
+        }, 0);
+        return { page, score };
+      });
+      
+      const topPages = scoredPages
+        .sort((a, b) => b.score - a.score)
+        .slice(0, maxPages - (indexPage ? 1 : 0))
+        .map(item => item.page);
+      
+      return indexPage ? [indexPage, ...topPages] : topPages;
+    };
+
+    const relevantPages = getRelevantPages(pages || [], prompt);
+    const pagesContext = relevantPages
+      .map((p: Page) => `- ${p.path}\n${p.html}`)
+      .join("\n\n");
+    
+    const assistantContext = `${
+      selectedElementHtml
+        ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\` Could be in multiple pages, if so, update all the pages.`
+        : ""
+    }. Current pages (${relevantPages.length}/${pages?.length || 0} shown): ${pagesContext}. ${files?.length > 0 ? `Available images: ${files?.map((f: string) => f).join(', ')}.` : ""}`;
+    
+    const estimatedInputTokens = estimateInputTokens(systemPrompt, prompt, userContext + assistantContext);
+    const dynamicMaxTokens = calculateMaxTokens(selectedProvider, estimatedInputTokens, false);
+    const providerConfig = getProviderSpecificConfig(selectedProvider, dynamicMaxTokens);
+    
+    const chatCompletion = client.chatCompletionStream(
+      {
+        model: selectedModel.value,
+        provider: selectedProvider.provider,
+        messages: [
+          {
+            role: "system",
+            content: systemPrompt,
+          },
+          {
+            role: "user",
+            content: userContext,
+          },
+          {
+            role: "assistant",
+            content: assistantContext,
+          },
+          {
+            role: "user",
+            content: prompt,
+          },
+        ],
+        ...providerConfig,
+      },
+      billTo ? { billTo } : {}
+    );
+
+    let chunk = "";
+    while (true) {
+      const { done, value } = await chatCompletion.next();
+      if (done) {
+        break;
+      }
+
+      const deltaContent = value.choices[0]?.delta?.content;
+      if (deltaContent) {
+        chunk += deltaContent;
+      }
+    }
+    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;
+            }
 
-          try {
-            let errorPayload = "";
-            if (
-              errorMessage?.includes("exceeded your monthly included credits")
-            ) {
-              errorPayload = JSON.stringify({
-                messageError: errorMessage,
-                showProMessage: true,
-                isError: true,
-              });
+            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 {
-              errorPayload = JSON.stringify({
-                messageError: errorMessage,
-                isError: true,
-              });
+              const regex = createFlexibleHtmlRegex(searchBlock);
+              
+              // Normalize the pageHtml for matching
+              const normalizedPageHtml = normalizeHtml(pageHtml);
+              const match = regex.exec(normalizedPageHtml);
+              
+              if (match) {
+                // Find the original match in the non-normalized HTML
+                const normalizedSearch = normalizeHtml(searchBlock);
+                const originalMatchIndex = pageHtml.indexOf(searchBlock);
+                
+                if (originalMatchIndex !== -1) {
+                  const beforeText = pageHtml.substring(0, originalMatchIndex);
+                  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);
+                } else {
+                  // Fallback: try to find similar pattern in the original HTML
+                  const flexibleRegex = new RegExp(
+                    escapeRegExp(searchBlock)
+                      .replace(/\s+/g, '\\s+')
+                      .replace(/\s*=\s*/g, '\\s*=\\s*')
+                      .replace(/'\s*([^']*)\s*'/g, "'\\s*$1\\s*'")
+                      .replace(/"\s*([^"]*)\s*"/g, '"\\s*$1\\s*"')
+                      .replace(/\s*>/g, '\\s*>')
+                      .replace(/\s*\/>/g, '\\s*/>'),
+                    'g'
+                  );
+                  
+                  const flexibleMatch = flexibleRegex.exec(pageHtml);
+                  if (flexibleMatch) {
+                    const matchedText = flexibleMatch[0];
+                    const beforeText = pageHtml.substring(0, flexibleMatch.index);
+                    const startLineNumber = beforeText.split("\n").length;
+                    const replaceLines = replaceBlock.split("\n").length;
+                    const endLineNumber = startLineNumber + replaceLines - 1;
+
+                    updatedLines.push([startLineNumber, endLineNumber]);
+                    pageHtml = pageHtml.replace(matchedText, replaceBlock);
+                  }
+                }
+              }
             }
-            await writer.write(encoder.encode(`\n\n__ERROR__:${errorPayload}`));
-            await writer.close();
-          } catch (closeError) {
-            console.error("Failed to send error message:", closeError);
-            try {
-              await writer.abort(error);
-            } catch (abortError) {
-              console.error("Failed to abort writer:", abortError);
+
+            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 regex = createFlexibleHtmlRegex(searchBlock);
+            
+            // Get the main page HTML (first page or index page)
+            const mainPage = updatedPages.find(p => p.path === '/' || p.path === '/index' || p.path === 'index') || updatedPages[0];
+            if (!mainPage) continue;
+            
+            newHtml = mainPage.html;
+            
+            // Normalize the newHtml for matching  
+            const normalizedNewHtml = normalizeHtml(newHtml);
+            const match = regex.exec(normalizedNewHtml);
+            
+            if (match) {
+              // Find the original match in the non-normalized HTML
+              const originalMatchIndex = newHtml.indexOf(searchBlock);
+              
+              if (originalMatchIndex !== -1) {
+                const beforeText = newHtml.substring(0, originalMatchIndex);
+                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);
+              } else {
+                // Fallback: try to find similar pattern in the original HTML
+                const flexibleRegex = new RegExp(
+                  escapeRegExp(searchBlock)
+                    .replace(/\s+/g, '\\s+')
+                    .replace(/\s*=\s*/g, '\\s*=\\s*')
+                    .replace(/'\s*([^']*)\s*'/g, "'\\s*$1\\s*'")
+                    .replace(/"\s*([^"]*)\s*"/g, '"\\s*$1\\s*"')
+                    .replace(/\s*>/g, '\\s*>')
+                    .replace(/\s*\/>/g, '\\s*/>'),
+                  'g'
+                );
+                
+                const flexibleMatch = flexibleRegex.exec(newHtml);
+                if (flexibleMatch) {
+                  const matchedText = flexibleMatch[0];
+                  const beforeText = newHtml.substring(0, flexibleMatch.index);
+                  const startLineNumber = beforeText.split("\n").length;
+                  const replaceLines = replaceBlock.split("\n").length;
+                  const endLineNumber = startLineNumber + replaceLines - 1;
+
+                  updatedLines.push([startLineNumber, endLineNumber]);
+                  newHtml = newHtml.replace(matchedText, replaceBlock);
+                }
+              }
             }
           }
+
+          position = replaceEndIndex + REPLACE_END.length;
         }
-      };
 
-      await tryGeneration();
-    })();
+        // Update the main HTML if it's the index page
+        const mainPageIndex = updatedPages.findIndex(p => p.path === '/' || p.path === '/index' || p.path === 'index');
+        if (mainPageIndex !== -1) {
+          updatedPages[mainPageIndex].html = newHtml;
+        }
+      }
 
-    return response;
-  } catch (error) {
+      const files: File[] = [];
+      updatedPages.forEach((page: Page) => {
+        const file = new File([page.html], page.path, { type: "text/html" });
+        files.push(file);
+      });
+
+      if (isNew) {
+        const projectName = chunk.match(/<<<<<<< PROJECT_NAME_START ([\s\S]*?) >>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
+        const formattedTitle = projectName?.toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .split("-")
+          .filter(Boolean)
+          .join("-")
+          .slice(0, 96);
+        const repo: RepoDesignation = {
+          type: "space",
+          name: `${user.name}/${formattedTitle}`,
+        };
+        const { repoUrl} = await createRepo({
+          repo,
+          accessToken: user.token as string,
+        });
+        repoId = repoUrl.split("/").slice(-2).join("/");
+        const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
+        const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
+        const README = `---
+title: ${projectName}
+colorFrom: ${colorFrom}
+colorTo: ${colorTo}
+emoji: 🐳
+sdk: static
+pinned: false
+tags:
+  - deepsite-v3
+---
+
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+      `;
+        files.push(new File([README], "README.md", { type: "text/markdown" }));
+      }
+
+      const response = await uploadFiles({
+        repo: {
+          type: "space",
+          name: repoId,
+        },
+        files,
+        commitTitle: prompt,
+        accessToken: user.token as string,
+      });
+
+      return NextResponse.json({
+        ok: true,
+        updatedLines,
+        pages: updatedPages,
+        repoId,
+        commit: {
+          ...response.commit,
+          title: prompt,
+        }
+      });
+    } else {
+      return NextResponse.json(
+        { 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(
       {
-        error: error instanceof Error ? error.message : "Internal Server Error",
+        ok: false,
+        openSelectProvider: true,
+        message:
+          error.message || "An error occurred while processing your request.",
       },
       { status: 500 }
     );
   }
 }
+

app/api/auth/[...nextauth]/route.ts

@@ -1,6 +0,0 @@
-import NextAuth from "next-auth";
-import { authOptions } from "@/lib/auth";
-
-const handler = NextAuth(authOptions);
-
-export { handler as GET, handler as POST };

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

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

app/api/auth/logout/route.ts

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

app/api/auth/route.ts

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

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

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

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

@@ -0,0 +1,113 @@
+import { NextRequest, NextResponse } from "next/server";
+import { RepoDesignation, spaceInfo, uploadFiles } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  try {
+    const user = await isAuthenticated();
+
+    if (user instanceof NextResponse || !user) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const param = await params;
+    const { namespace, repoId } = param;
+
+    const space = await spaceInfo({
+      name: `${namespace}/${repoId}`,
+      accessToken: user.token as string,
+      additionalFields: ["author"],
+    });
+
+    if (!space || space.sdk !== "static") {
+      return NextResponse.json(
+        { ok: false, error: "Space is not a static space." },
+        { status: 404 }
+      );
+    }
+    
+    if (space.author !== user.name) {
+      return NextResponse.json(
+        { ok: false, error: "Space does not belong to the authenticated user." },
+        { status: 403 }
+      );
+    }
+
+    // Parse the FormData to get the images
+    const formData = await req.formData();
+    const imageFiles = formData.getAll("images") as File[];
+
+    if (!imageFiles || imageFiles.length === 0) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "At least one image file is required under the 'images' key",
+        },
+        { status: 400 }
+      );
+    }
+
+    const files: File[] = [];
+    for (const file of imageFiles) {
+      if (!(file instanceof File)) {
+        return NextResponse.json(
+          {
+            ok: false,
+            error: "Invalid file format - all items under 'images' key must be files",
+          },
+          { status: 400 }
+        );
+      }
+
+      if (!file.type.startsWith('image/')) {
+        return NextResponse.json(
+          {
+            ok: false,
+            error: `File ${file.name} is not an image`,
+          },
+          { status: 400 }
+        );
+      }
+
+      // Create File object with images/ folder prefix
+      const fileName = `images/${file.name}`;
+      const processedFile = new File([file], fileName, { type: file.type });
+      files.push(processedFile);
+    }
+
+    // Upload files to HuggingFace space
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+
+    await uploadFiles({
+      repo,
+      files,
+      accessToken: user.token as string,
+      commitTitle: `Upload ${files.length} image(s)`,
+    });
+
+    return NextResponse.json({ 
+      ok: true, 
+      message: `Successfully uploaded ${files.length} image(s) to ${namespace}/${repoId}/images/`,
+      uploadedFiles: files.map((file) => `https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${file.name}`),
+    }, { status: 200 });
+
+  } catch (error) {
+    console.error('Error uploading images:', error);
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Failed to upload images",
+      },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,187 @@
+import { NextRequest, NextResponse } from "next/server";
+import { RepoDesignation, spaceInfo, listFiles, deleteRepo, listCommits, downloadFile } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+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 });
+  }
+
+  const param = await params;
+  const { namespace, repoId } = param;
+
+  try {
+    const space = await spaceInfo({
+      name: `${namespace}/${repoId}`,
+      accessToken: user.token as string,
+      additionalFields: ["author"],
+    });
+    
+    if (!space || space.sdk !== "static") {
+      return NextResponse.json(
+        { ok: false, error: "Space is not a static space." },
+        { status: 404 }
+      );
+    }
+    
+    if (space.author !== user.name) {
+      return NextResponse.json(
+        { ok: false, error: "Space does not belong to the authenticated user." },
+        { status: 403 }
+      );
+    }
+    
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+    
+    await deleteRepo({
+      repo,
+      accessToken: user.token as string,
+    });
+
+    
+    return NextResponse.json({ ok: true }, { status: 200 });
+  } catch (error: any) {
+    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 });
+  }
+
+  const param = await params;
+  const { namespace, repoId } = param;
+
+  try {
+    const space = await spaceInfo({
+      name: namespace + "/" + repoId,
+      accessToken: user.token as string,
+      additionalFields: ["author"],
+    });
+
+    if (!space || space.sdk !== "static") {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "Space is not a static space",
+        },
+        { status: 404 }
+      );
+    }
+    if (space.author !== user.name) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "Space does not belong to the authenticated user",
+        },
+        { status: 403 }
+      );
+    }
+
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+
+    const htmlFiles: Page[] = [];
+    const files: string[] = [];
+
+    const allowedFilesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif"];
+    
+    for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
+      if (fileInfo.path.endsWith(".html")) {
+        const blob = await downloadFile({ repo, accessToken: user.token as string, path: fileInfo.path, raw: true });
+        const html = await blob?.text();
+        if (!html) {
+          continue;
+        }
+        if (fileInfo.path === "index.html") {
+          htmlFiles.unshift({
+            path: fileInfo.path,
+            html,
+          });
+        } else {
+          htmlFiles.push({
+            path: fileInfo.path,
+            html,
+          });
+        }
+      }
+      if (fileInfo.type === "directory" && fileInfo.path === "images") {
+        for await (const imageInfo of listFiles({repo, accessToken: user.token as string, path: fileInfo.path})) {
+          if (allowedFilesExtensions.includes(imageInfo.path.split(".").pop() || "")) {
+            files.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${imageInfo.path}`);
+          }
+        }
+      }
+    }
+    const commits: Commit[] = [];
+    for await (const commit of listCommits({ repo, accessToken: user.token as string })) {
+      if (commit.title.includes("initial commit") || commit.title.includes("image(s)") || commit.title.includes("Removed files from promoting")) {
+        continue;
+      }
+      commits.push({
+        title: commit.title,
+        oid: commit.oid,
+        date: commit.date,
+      });
+    }
+    
+    if (htmlFiles.length === 0) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "No HTML files found",
+        },
+        { status: 404 }
+      );
+    }
+    return NextResponse.json(
+      {
+        project: {
+          id: space.id,
+          space_id: space.name,
+          private: space.private,
+          _updatedAt: space.updatedAt,
+        },
+        pages: htmlFiles,
+        files,
+        commits,
+        ok: true,
+      },
+      { status: 200 }
+    );
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error: any) {
+    if (error.statusCode === 404) {
+      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/[namespace]/[repoId]/save/route.ts

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

app/api/me/projects/route.ts

@@ -0,0 +1,107 @@
+import { NextRequest, NextResponse } from "next/server";
+import { RepoDesignation, createRepo, listCommits, spaceInfo, uploadFiles } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+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 });
+  }
+
+  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,
+    });
+    const commitTitle = !prompt || prompt.trim() === "" ? "Redesign my website" : prompt;
+    await uploadFiles({
+      repo,
+      files,
+      accessToken: user.token as string,
+      commitTitle
+    });
+
+    const path = repoUrl.split("/").slice(-2).join("/");
+
+    const commits: Commit[] = [];
+    for await (const commit of listCommits({ repo, accessToken: user.token as string })) {
+      if (commit.title.includes("initial commit") || commit.title.includes("image(s)") || commit.title.includes("Promote version")) {
+        continue;
+      }
+      commits.push({
+        title: commit.title,
+        oid: commit.oid,
+        date: commit.date,
+      });
+    }
+
+    const space = await spaceInfo({
+      name: repo.name,
+      accessToken: user.token as string,
+    });
+
+    let newProject = {
+      files,
+      pages,
+      commits,
+      project: {
+        id: space.id,
+        space_id: space.name,
+        _updatedAt: space.updatedAt,
+      }
+    }
+    
+    return NextResponse.json({ space: newProject, path, ok: true }, { status: 201 });
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: err.message, ok: false },
+      { status: 500 }
+    );
+  }
+}

app/api/me/route.ts

@@ -0,0 +1,46 @@
+import { listSpaces } from "@huggingface/hub";
+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();
+  const projects = [];
+  for await (const space of listSpaces({
+    accessToken: token.replace("Bearer ", "") as string,
+    additionalFields: ["author", "cardData"],
+    search: {
+      owner: user.name,
+    }
+  })) {
+    if (
+      space.sdk === "static" &&
+      Array.isArray((space.cardData as { tags?: string[] })?.tags) &&
+      (
+        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite-v3")) ||
+        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite"))
+      )
+    ) {
+      projects.push(space);
+    }
+  }
+
+  return NextResponse.json({ user, projects, errCode: null }, { status: 200 });
+}

app/api/projects/[repoId]/[commitId]/route.ts

@@ -1,49 +0,0 @@
-import { auth } from "@/lib/auth";
-import { createBranch, RepoDesignation } from "@huggingface/hub";
-import { format } from "date-fns";
-import { NextResponse } from "next/server";
-
-export async function POST(
-  request: Request,
-  { params }: { params: Promise<{ repoId: string; commitId: string }> }
-) {
-  const { repoId, commitId }: { repoId: string; commitId: string } =
-    await params;
-  const session = await auth();
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-  const token = session.accessToken;
-
-  const repo: RepoDesignation = {
-    type: "space",
-    name: session.user?.username + "/" + repoId,
-  };
-
-  const commitTitle = `🔖 ${format(new Date(), "dd/MM")} - ${format(
-    new Date(),
-    "HH:mm"
-  )} - Set commit ${commitId} as default.`;
-
-  await fetch(
-    `https://huggingface.co/api/spaces/${session.user?.username}/${repoId}/branch/main`,
-    {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${token}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        startingPoint: commitId,
-        overwrite: true,
-      }),
-    }
-  ).catch((error) => {
-    return NextResponse.json(
-      { error: error ?? "Failed to create branch" },
-      { status: 500 }
-    );
-  });
-
-  return NextResponse.json({ success: true }, { status: 200 });
-}

app/api/projects/[repoId]/medias/route.ts

@@ -1,87 +0,0 @@
-import { auth } from "@/lib/auth";
-import { RepoDesignation, uploadFiles } from "@huggingface/hub";
-import { NextResponse } from "next/server";
-
-export async function POST(
-  request: Request,
-  { params }: { params: Promise<{ repoId: string }> }
-) {
-  const { repoId }: { repoId: string } = await params;
-  const session = await auth();
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-  const token = session.accessToken;
-
-  const repo: RepoDesignation = {
-    type: "space",
-    name: session.user?.username + "/" + repoId,
-  };
-
-  const formData = await request.formData();
-  const newMedias = formData.getAll("images") as File[];
-
-  const filesToUpload: File[] = [];
-
-  if (!newMedias || newMedias.length === 0) {
-    return NextResponse.json(
-      {
-        ok: false,
-        error: "At least one media file is required under the 'images' key",
-      },
-      { status: 400 }
-    );
-  }
-
-  try {
-    for (const media of newMedias) {
-      const isImage = media.type.startsWith("image/");
-      const isVideo = media.type.startsWith("video/");
-      const isAudio = media.type.startsWith("audio/");
-
-      const folderPath = isImage
-        ? "images/"
-        : isVideo
-        ? "videos/"
-        : isAudio
-        ? "audios/"
-        : null;
-
-      if (!folderPath) {
-        return NextResponse.json(
-          { ok: false, error: "Unsupported media type: " + media.type },
-          { status: 400 }
-        );
-      }
-
-      const mediaName = `${folderPath}${media.name}`;
-      const processedFile = new File([media], mediaName, { type: media.type });
-      filesToUpload.push(processedFile);
-    }
-
-    await uploadFiles({
-      repo,
-      files: filesToUpload,
-      accessToken: token,
-      commitTitle: `📁 Upload media files through DeepSite`,
-    });
-
-    return NextResponse.json(
-      {
-        success: true,
-        medias: filesToUpload.map(
-          (file) =>
-            `https://huggingface.co/spaces/${session.user?.username}/${repoId}/resolve/main/${file.name}`
-        ),
-      },
-      { status: 200 }
-    );
-  } catch (error) {
-    return NextResponse.json(
-      { ok: false, error: error ?? "Failed to upload media files" },
-      { status: 500 }
-    );
-  }
-
-  return NextResponse.json({ success: true }, { status: 200 });
-}

app/api/projects/[repoId]/rename/route.ts

@@ -1,76 +0,0 @@
-import { auth } from "@/lib/auth";
-import { downloadFile, RepoDesignation, uploadFile } from "@huggingface/hub";
-import { format } from "date-fns";
-import { NextResponse } from "next/server";
-
-export async function PUT(
-  request: Request,
-  { params }: { params: Promise<{ repoId: string }> }
-) {
-  const { repoId }: { repoId: string } = await params;
-  const session = await auth();
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-  const token = session.accessToken;
-
-  const body = await request.json();
-  const { newTitle } = body;
-
-  if (!newTitle) {
-    return NextResponse.json(
-      { error: "newTitle is required" },
-      { status: 400 }
-    );
-  }
-
-  const repo: RepoDesignation = {
-    type: "space",
-    name: session.user?.username + "/" + repoId,
-  };
-
-  const blob = await downloadFile({
-    repo,
-    accessToken: token,
-    path: "README.md",
-    raw: true,
-  }).catch((_) => {
-    return null;
-  });
-
-  if (!blob) {
-    return NextResponse.json(
-      { error: "Could not fetch README.md" },
-      { status: 500 }
-    );
-  }
-
-  const readmeFile = await blob?.text();
-  if (!readmeFile) {
-    return NextResponse.json(
-      { error: "Could not read README.md content" },
-      { status: 500 }
-    );
-  }
-  const updatedReadmeFile = readmeFile.replace(
-    /^title:\s*(.*)$/m,
-    `title: ${newTitle}`
-  );
-
-  await uploadFile({
-    repo,
-    accessToken: token,
-    file: new File([updatedReadmeFile], "README.md", { type: "text/markdown" }),
-    commitTitle: `🐳 ${format(new Date(), "dd/MM")} - ${format(
-      new Date(),
-      "HH:mm"
-    )} - Rename project to "${newTitle}"`,
-  });
-
-  return NextResponse.json(
-    {
-      success: true,
-    },
-    { status: 200 }
-  );
-}

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

@@ -1,97 +0,0 @@
-import { auth } from "@/lib/auth";
-import { RepoDesignation, deleteRepo, uploadFiles } from "@huggingface/hub";
-import { format } from "date-fns";
-import { NextResponse } from "next/server";
-
-export async function PUT(
-  request: Request,
-  { params }: { params: Promise<{ repoId: string }> }
-) {
-  const { repoId }: { repoId: string } = await params;
-  const session = await auth();
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-  const token = session.accessToken;
-
-  const body = await request.json();
-  const { files, prompt, isManualChanges } = body;
-
-  if (!files) {
-    return NextResponse.json({ error: "Files are required" }, { status: 400 });
-  }
-
-  if (!prompt) {
-    return NextResponse.json({ error: "Prompt is required" }, { status: 400 });
-  }
-
-  const repo: RepoDesignation = {
-    type: "space",
-    name: session.user?.username + "/" + repoId,
-  };
-
-  const filesToUpload: File[] = [];
-  for (const file of files) {
-    let mimeType = "text/x-python";
-    if (file.path.endsWith(".txt")) {
-      mimeType = "text/plain";
-    } else if (file.path.endsWith(".md")) {
-      mimeType = "text/markdown";
-    } else if (file.path.endsWith(".json")) {
-      mimeType = "application/json";
-    }
-    filesToUpload.push(new File([file.content], file.path, { type: mimeType }));
-  }
-  const baseTitle = isManualChanges
-    ? ""
-    : `🐳 ${format(new Date(), "dd/MM")} - ${format(new Date(), "HH:mm")} - `;
-  const commitTitle = baseTitle + (prompt ?? "Follow-up DeepSite commit");
-  const response = await uploadFiles({
-    repo,
-    files: filesToUpload,
-    accessToken: token,
-    commitTitle,
-  });
-
-  return NextResponse.json(
-    {
-      success: true,
-      commit: {
-        oid: response.commit,
-        title: commitTitle,
-        date: new Date(),
-      },
-    },
-    { status: 200 }
-  );
-}
-
-export async function DELETE(
-  request: Request,
-  { params }: { params: Promise<{ repoId: string }> }
-) {
-  const { repoId }: { repoId: string } = await params;
-  const session = await auth();
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-  const token = session.accessToken;
-
-  const repo: RepoDesignation = {
-    type: "space",
-    name: session.user?.username + "/" + repoId,
-  };
-
-  try {
-    await deleteRepo({
-      repo,
-      accessToken: token as string,
-    });
-
-    return NextResponse.json({ success: true }, { status: 200 });
-  } catch (error) {
-    const errMsg =
-      error instanceof Error ? error.message : "Failed to delete project";
-    return NextResponse.json({ error: errMsg }, { status: 500 });
-  }
-}

app/api/projects/route.ts

@@ -1,108 +0,0 @@
-import { NextResponse } from "next/server";
-import { RepoDesignation, createRepo, uploadFiles } from "@huggingface/hub";
-
-import { auth } from "@/lib/auth";
-import {
-  COLORS,
-  EMOJIS_FOR_SPACE,
-  injectDeepSiteBadge,
-  isIndexPage,
-} from "@/lib/utils";
-
-export async function POST(request: Request) {
-  const session = await auth();
-  if (!session) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-  const token = session.accessToken;
-
-  const body = await request.json();
-  const { projectTitle, files, prompt } = body;
-
-  if (!files) {
-    return NextResponse.json(
-      { error: "Project title and files are required" },
-      { status: 400 }
-    );
-  }
-
-  const title =
-    projectTitle || projectTitle !== "" ? projectTitle : "DeepSite Project";
-
-  let formattedTitle = title
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "-")
-    .split("-")
-    .filter(Boolean)
-    .join("-")
-    .slice(0, 75);
-
-  formattedTitle =
-    formattedTitle + "-" + Math.random().toString(36).substring(2, 7);
-
-  const repo: RepoDesignation = {
-    type: "space",
-    name: session.user?.username + "/" + formattedTitle,
-  };
-
-  const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
-  const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
-  const emoji =
-    EMOJIS_FOR_SPACE[Math.floor(Math.random() * EMOJIS_FOR_SPACE.length)];
-  const README = `---
-title: ${projectTitle}
-colorFrom: ${colorFrom}
-colorTo: ${colorTo}
-sdk: static
-emoji: ${emoji}
-tags:
-  - deepsite-v4
----
-
-# ${title}
-
-This project has been created with [DeepSite](https://huggingface.co/deepsite) AI Vibe Coding.
-`;
-
-  const filesToUpload: File[] = [
-    new File([README], "README.md", { type: "text/markdown" }),
-  ];
-  for (const file of files) {
-    let mimeType = "text/html";
-    if (file.path.endsWith(".css")) {
-      mimeType = "text/css";
-    } else if (file.path.endsWith(".js")) {
-      mimeType = "text/javascript";
-    }
-    const content =
-      mimeType === "text/html" && isIndexPage(file.path)
-        ? injectDeepSiteBadge(file.content)
-        : file.content;
-
-    filesToUpload.push(new File([content], file.path, { type: mimeType }));
-  }
-
-  try {
-    const { repoUrl } = await createRepo({
-      accessToken: token as string,
-      repo: repo,
-      sdk: "static",
-    });
-
-    const commitTitle = prompt ?? "Initial DeepSite commit";
-    await uploadFiles({
-      repo,
-      files: filesToUpload,
-      accessToken: token as string,
-      commitTitle,
-    });
-
-    const path = repoUrl.split("/").slice(-2).join("/");
-
-    return NextResponse.json({ repoUrl: path }, { status: 200 });
-  } catch (error) {
-    const errMsg =
-      error instanceof Error ? error.message : "Failed to upload files";
-    return NextResponse.json({ error: errMsg }, { 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/api/redesign/route.ts

@@ -1,73 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { NextRequest, NextResponse } from "next/server";
-
-const FETCH_TIMEOUT = 30_000;
-export const maxDuration = 60;
-
-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 controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT);
-
-    try {
-      const response = await fetch(
-        `https://r.jina.ai/${encodeURIComponent(url)}`,
-        {
-          method: "POST",
-          signal: controller.signal,
-        }
-      );
-
-      clearTimeout(timeoutId);
-
-      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 }
-      );
-    } catch (fetchError: any) {
-      clearTimeout(timeoutId);
-
-      if (fetchError.name === "AbortError") {
-        return NextResponse.json(
-          {
-            error:
-              "Request timeout: The external service took too long to respond. Please try again.",
-          },
-          { status: 504 }
-        );
-      }
-      throw fetchError;
-    }
-  } catch (error: any) {
-    if (error.name === "AbortError" || error.message?.includes("timeout")) {
-      return NextResponse.json(
-        {
-          error:
-            "Request timeout: The external service took too long to respond. Please try again.",
-        },
-        { status: 504 }
-      );
-    }
-    return NextResponse.json(
-      { error: error.message || "An error occurred" },
-      { status: 500 }
-    );
-  }
-}

app/auth/callback/page.tsx

@@ -0,0 +1,97 @@
+"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";
+import { useBroadcastChannel } from "@/lib/useBroadcastChannel";
+export default function AuthCallback({
+  searchParams,
+}: {
+  searchParams: Promise<{ code: string }>;
+}) {
+  const [showButton, setShowButton] = useState(false);
+  const [isPopupAuth, setIsPopupAuth] = useState(false);
+  const { code } = use(searchParams);
+  const { loginFromCode } = useUser();
+  const { postMessage } = useBroadcastChannel("auth", () => {});
+
+  useMount(async () => {
+    if (code) {
+      const isPopup = window.opener || window.parent !== window;
+      setIsPopupAuth(isPopup);
+
+      if (isPopup) {
+        postMessage({
+          type: "user-oauth",
+          code: code,
+        });
+
+        setTimeout(() => {
+          if (window.opener) {
+            window.close();
+          }
+        }, 1000);
+      } else {
+        await loginFromCode(code);
+      }
+    }
+  });
+
+  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">
+              {isPopupAuth
+                ? "Authentication Complete!"
+                : "Login In Progress..."}
+            </p>
+            <p className="text-sm text-neutral-500 mt-1.5">
+              {isPopupAuth
+                ? "You can now close this tab and return to the previous page."
+                : "Wait a moment while we log you in with your code."}
+            </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/layout.tsx

@@ -1,24 +1,29 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Metadata, Viewport } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import { NextStepProvider } from "nextstepjs";
+import { Inter, PT_Sans } from "next/font/google";
+import { cookies } from "next/headers";
 import Script from "next/script";
 
-import "@/app/globals.css";
-import { ThemeProvider } from "@/components/providers/theme";
-import { AuthProvider } from "@/components/providers/session";
+import "@/assets/globals.css";
 import { Toaster } from "@/components/ui/sonner";
-import { ReactQueryProvider } from "@/components/providers/react-query";
+import MY_TOKEN_KEY from "@/lib/get-cookie-name";
+import { apiServer } from "@/lib/api";
+import IframeDetector from "@/components/iframe-detector";
+import AppContext from "@/components/contexts/app-context";
+import TanstackContext from "@/components/contexts/tanstack-query-context";
+import { LoginProvider } from "@/components/contexts/login-context";
+import { ProProvider } from "@/components/contexts/pro-context";
 import { generateSEO, generateStructuredData } from "@/lib/seo";
-import { NotAuthorizedDomain } from "@/components/not-authorized";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+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 = {
@@ -34,9 +39,9 @@ export const metadata: Metadata = {
     statusBarStyle: "black-translucent",
   },
   icons: {
-    icon: "/deepsite/logo.svg",
-    shortcut: "/deepsite/logo.svg",
-    apple: "/deepsite/logo.svg",
+    icon: "/logo.svg",
+    shortcut: "/logo.svg",
+    apple: "/logo.svg",
   },
   verification: {
     google: process.env.GOOGLE_SITE_VERIFICATION,
@@ -46,29 +51,47 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   initialScale: 1,
   maximumScale: 1,
-  themeColor: "#4f46e5",
+  themeColor: "#000000",
 };
 
+async function getMe() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get(MY_TOKEN_KEY())?.value;
+  if (!token) return { user: null, projects: [], errCode: null };
+  try {
+    const res = await apiServer.get("/me", {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return { user: res.data.user, projects: res.data.projects, errCode: null };
+  } catch (err: any) {
+    return { user: null, projects: [], errCode: err.status };
+  }
+}
+
 export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const data = await getMe();
+
+  // Generate structured data
   const structuredData = generateStructuredData("WebApplication", {
     name: "DeepSite",
     description: "Build websites with AI, no code required",
-    url: "https://huggingface.co/deepsite",
+    url: "https://deepsite.hf.co",
   });
+
   const organizationData = generateStructuredData("Organization", {
     name: "DeepSite",
-    url: "https://huggingface.co/deepsite",
+    url: "https://deepsite.hf.co",
   });
 
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+    <html lang="en">
+      <head>
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{
@@ -81,27 +104,24 @@ export default async function RootLayout({
             __html: JSON.stringify(organizationData),
           }}
         />
-        <Script
-          defer
-          data-domain="deepsite.hf.co"
-          src="https://plausible.io/js/script.js"
-        />
-        <Toaster richColors />
-        <AuthProvider>
-          <ReactQueryProvider>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="dark"
-              enableSystem
-              disableTransitionOnChange
-            >
-              <NextStepProvider>
-                {children}
-                <NotAuthorizedDomain />
-              </NextStepProvider>
-            </ThemeProvider>
-          </ReactQueryProvider>
-        </AuthProvider>
+      </head>
+      <Script
+        defer
+        data-domain="deepsite.hf.co"
+        src="https://plausible.io/js/script.js"
+      ></Script>
+      <body
+        className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark h-[100dvh] overflow-hidden`}
+      >
+        <IframeDetector />
+        <Toaster richColors position="bottom-center" />
+        <TanstackContext>
+          <AppContext me={data}>
+            <LoginProvider>
+              <ProProvider>{children}</ProProvider>
+            </LoginProvider>
+          </AppContext>
+        </TanstackContext>
       </body>
     </html>
   );

app/new/page.tsx

@@ -1,18 +1,14 @@
 import { AppEditor } from "@/components/editor";
-import { auth } from "@/lib/auth";
-import { redirect } from "next/navigation";
+import { Metadata } from "next";
+import { generateSEO } from "@/lib/seo";
 
-export default async function NewProjectPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ prompt: string }>;
-}) {
-  const session = await auth();
+export const metadata: Metadata = generateSEO({
+  title: "Create New Project - DeepSite",
+  description:
+    "Start building your next website with AI. Create a new project on DeepSite and experience the power of AI-driven web development.",
+  path: "/new",
+});
 
-  if (!session) {
-    redirect("/deepsite/api/auth/signin");
-  }
-
-  const { prompt } = await searchParams;
-  return <AppEditor isNew={true} initialPrompt={prompt} />;
+export default function NewProjectPage() {
+  return <AppEditor isNew />;
 }

app/not-found.tsx

@@ -1,17 +0,0 @@
-import { NotFoundButtons } from "@/components/not-found/buttons";
-import { Navigation } from "@/components/public/navigation";
-
-export default function NotFound() {
-  return (
-    <div className="min-h-screen font-sans">
-      <Navigation />
-      <div className="px-6 py-16 max-w-5xl mx-auto text-center">
-        <h1 className="text-5xl font-bold mb-5">Oh no! Page not found.</h1>
-        <p className="text-lg text-muted-foreground mb-8">
-          The page you are looking for does not exist.
-        </p>
-        <NotFoundButtons />
-      </div>
-    </div>
-  );
-}

app/sitemap.ts

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

{app → assets}/globals.css

@@ -6,8 +6,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --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);
@@ -44,7 +44,7 @@
 }
 
 :root {
-  --radius: 0.65rem;
+  --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -68,7 +68,6 @@
   --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);
-  --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -113,6 +112,10 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+body {
+  @apply scroll-smooth
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -120,49 +123,249 @@
   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-background!;
+  @apply !bg-neutral-900;
 }
 .monaco-editor .monaco-editor-background {
-  @apply bg-background!;
+  @apply !bg-neutral-900;
 }
-.monaco-editor .decorationsOverviewRuler {
-  @apply opacity-0!;
+.monaco-editor .line-numbers {
+  @apply !text-neutral-500;
 }
-.monaco-editor .view-line {
-  /* @apply bg-primary/50!; */
+
+.matched-line {
+  @apply bg-sky-500/30;
 }
-.monaco-editor .scroll-decoration {
-  @apply opacity-0!;
+
+/* 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);
+  }
 }
-.monaco-editor .cursors-layer .cursor {
-  @apply bg-primary!;
+
+@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);
+  }
 }
 
-.content-placeholder::before {
-  content: attr(data-placeholder);
-  position: absolute;
-  pointer-events: none;
-  opacity: 0.5;
-  @apply top-5 left-6;
+@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); }
 }
 
-.sp-layout
-  .sp-file-explorer
-  .sp-file-explorer-list
-  .sp-explorer[data-active="true"] {
-  @apply text-indigo-500!;
+@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); }
 }
 
-.sp-layout
-  .sp-stack
-  .sp-tabs
-  .sp-tab-container[aria-selected="true"]
-  .sp-tab-button {
-  @apply text-indigo-500!;
+/* 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;
 }
-.sp-layout .sp-stack .sp-tabs .sp-tab-container:has(button:focus) {
-  @apply outline-none! border-none!;
+
+.light-sweep::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 300%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    transparent 20%,
+    rgba(56, 189, 248, 0.1) 35%,
+    rgba(56, 189, 248, 0.2) 45%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(168, 85, 247, 0.2) 55%,
+    rgba(168, 85, 247, 0.1) 65%,
+    transparent 80%,
+    transparent 100%
+  );
+  animation: lightSweep 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  pointer-events: none;
+  z-index: 1;
+  filter: blur(1px);
 }

components.json

@@ -5,12 +5,11 @@
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "app/globals.css",
-    "baseColor": "zinc",
+    "css": "assets/globals.css",
+    "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
-  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -18,5 +17,5 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {}
-}
+  "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/ask-ai/ask-ai-landing.tsx

@@ -1,75 +0,0 @@
-"use client";
-import { ArrowUp } from "lucide-react";
-import { useState } from "react";
-import { useLocalStorage, useMount } from "react-use";
-import { useRouter } from "next/navigation";
-
-import { Button } from "@/components/ui/button";
-import { ProviderType } from "@/lib/type";
-import { Models } from "./models";
-import { DEFAULT_MODEL } from "@/lib/providers";
-import { cn } from "@/lib/utils";
-
-export function AskAiLanding({ className }: { className?: string }) {
-  const [model = DEFAULT_MODEL, setModel] = useLocalStorage<string>(
-    "deepsite-model",
-    DEFAULT_MODEL
-  );
-  const [provider, setProvider] = useLocalStorage<ProviderType>(
-    "deepsite-provider",
-    "auto" as ProviderType
-  );
-  const router = useRouter();
-  const [prompt, setPrompt] = useState<string>("");
-  const [mounted, setMounted] = useState<boolean>(false);
-
-  useMount(() => {
-    setMounted(true);
-  });
-
-  return (
-    <div
-      className={cn(
-        "dark:bg-[#222222] bg-accent border border-border-muted rounded-xl p-3 block relative",
-        className
-      )}
-    >
-      <textarea
-        id="prompt-input"
-        className="w-full h-full resize-none outline-none text-primary text-sm"
-        placeholder="Ask me anything..."
-        value={prompt}
-        onChange={(e) => setPrompt(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            router.push(`/new?prompt=${prompt}`);
-          }
-        }}
-      />
-      <footer className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          {mounted && (
-            <Models
-              model={model}
-              setModel={setModel}
-              provider={provider as ProviderType}
-              setProvider={setProvider}
-            />
-          )}
-        </div>
-        <div>
-          <Button
-            size="icon-sm"
-            className="rounded-full!"
-            onClick={() => {
-              router.push(`/new?prompt=${prompt}`);
-            }}
-          >
-            <ArrowUp />
-          </Button>
-        </div>
-      </footer>
-    </div>
-  );
-}

components/ask-ai/ask-ai.tsx

@@ -1,211 +0,0 @@
-"use client";
-import { ArrowUp, Paintbrush, X } from "lucide-react";
-import { FaHand } from "react-icons/fa6";
-import { useRef, useState } from "react";
-import { HiStop } from "react-icons/hi2";
-import { useLocalStorage, useMount, useUpdateEffect } from "react-use";
-import { useRouter } from "next/navigation";
-import { useNextStep } from "nextstepjs";
-
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { useGeneration } from "./useGeneration";
-import { File, MobileTabType, ProviderType } from "@/lib/type";
-import { Models } from "./models";
-import { DEFAULT_MODEL, MODELS } from "@/lib/providers";
-import { Redesign } from "./redesign";
-import { Uploader } from "./uploader";
-import { InputMentions } from "./input-mentions";
-
-export function AskAI({
-  initialPrompt,
-  className,
-  onToggleMobileTab,
-  files,
-  medias,
-  tourHasBeenShown,
-  isNew = false,
-  isHistoryView,
-  projectName = "new",
-}: {
-  initialPrompt?: string;
-  className?: string;
-  files?: File[] | null;
-  medias?: string[] | null;
-  tourHasBeenShown?: boolean;
-  onToggleMobileTab?: (tab: MobileTabType) => void;
-  isNew?: boolean;
-  isHistoryView?: boolean;
-  projectName?: string;
-}) {
-  const contentEditableRef = useRef<HTMLDivElement | null>(null);
-  const [model = DEFAULT_MODEL, setModel] = useLocalStorage<string>(
-    "deepsite-model",
-    DEFAULT_MODEL
-  );
-  const [provider, setProvider] = useLocalStorage<ProviderType>(
-    "deepsite-provider",
-    "auto" as ProviderType
-  );
-
-  const [prompt, setPrompt] = useState(initialPrompt ?? "");
-  const [redesignMd, setRedesignMd] = useState<{
-    md: string;
-    url: string;
-  } | null>(null);
-  const [selectedMedias, setSelectedMedias] = useState<string[]>([]);
-  const [startTour, setStartTour] = useState<boolean>(false);
-
-  const router = useRouter();
-  const { callAi, isLoading, stopGeneration, audio } =
-    useGeneration(projectName);
-  const { startNextStep } = useNextStep();
-
-  const onComplete = () => {
-    onToggleMobileTab?.("right-sidebar");
-  };
-
-  useMount(() => {
-    if (initialPrompt && initialPrompt.trim() !== "" && isNew) {
-      setTimeout(() => {
-        if (isHistoryView) return;
-        callAi(
-          {
-            prompt: initialPrompt,
-            model,
-            onComplete,
-            provider,
-          },
-          setModel
-        );
-        router.replace("/new");
-      }, 200);
-    }
-  });
-
-  const onSubmit = () => {
-    if (isHistoryView) return;
-    if (contentEditableRef.current) {
-      contentEditableRef.current.innerHTML = "";
-    }
-    callAi(
-      {
-        prompt,
-        model,
-        onComplete,
-        provider,
-        redesignMd,
-        medias: selectedMedias ?? [],
-      },
-      setModel
-    );
-    if (selectedMedias.length > 0) setSelectedMedias([]);
-    if (redesignMd) setRedesignMd(null);
-  };
-
-  return (
-    <div
-      id="tour-ask-ai-section"
-      className={cn(
-        "dark:bg-[#222222] bg-accent border border-border-muted rounded-xl p-2.5 block relative",
-        className
-      )}
-    >
-      <InputMentions
-        ref={contentEditableRef}
-        files={files}
-        prompt={prompt}
-        setPrompt={setPrompt}
-        redesignMdUrl={redesignMd?.url?.replace(/(^\w+:|^)\/\//, "")}
-        onSubmit={onSubmit}
-      />
-      <footer className="flex items-center justify-between mt-0">
-        <div className="flex items-center gap-1.5">
-          {!tourHasBeenShown && (
-            <div className="relative z-1">
-              <Button
-                variant="indigo"
-                size="icon-xs"
-                className="rounded-full!"
-                onClick={() => {
-                  setStartTour(true);
-                  startNextStep("onboarding");
-                }}
-              >
-                <FaHand className="size-3" />
-              </Button>
-              {!startTour && (
-                <div className="animate-ping h-full rounded-full bg-indigo-500 w-full top-0 left-0 absolute -z-1" />
-              )}
-            </div>
-          )}
-          {!isNew && (
-            <Uploader
-              medias={medias}
-              selected={selectedMedias}
-              setSelected={setSelectedMedias}
-            />
-          )}
-          <Models
-            model={model}
-            setModel={setModel}
-            provider={provider as ProviderType}
-            setProvider={setProvider}
-          />
-          {!files ||
-            (files?.length === 0 &&
-              (redesignMd ? (
-                <Button
-                  size="xs"
-                  variant="indigo"
-                  className="rounded-full! px-2.5!"
-                  onClick={() => setRedesignMd(null)}
-                >
-                  <Paintbrush className="size-3" />
-                  {redesignMd.url?.replace(/(^\w+:|^)\/\//, "")}
-                  <X className="size-3.5" onClick={() => setRedesignMd(null)} />
-                </Button>
-              ) : (
-                <Redesign
-                  onRedesign={(md, url) => {
-                    setRedesignMd({
-                      md,
-                      url,
-                    });
-                  }}
-                />
-              )))}
-        </div>
-        <div>
-          {isLoading ? (
-            <Button
-              size="icon-sm"
-              className="rounded-full!"
-              variant="bordered"
-              onClick={stopGeneration}
-            >
-              <HiStop />
-            </Button>
-          ) : (
-            <Button
-              size="icon-sm"
-              className="rounded-full!"
-              disabled={
-                isHistoryView ||
-                isLoading ||
-                (prompt.trim() === "" && !redesignMd)
-              }
-              onClick={onSubmit}
-            >
-              <ArrowUp />
-            </Button>
-          )}
-        </div>
-      </footer>
-      <audio ref={audio} id="audio" className="hidden">
-        <source src="/ding.mp3" type="audio/mpeg" />
-        Your browser does not support the audio element.
-      </audio>
-    </div>
-  );
-}

components/ask-ai/context.tsx

@@ -1,123 +0,0 @@
-import { AtSign, Braces, FileCode, FileText, X } from "lucide-react";
-import { useMemo, useState } from "react";
-import { useQueryClient } from "@tanstack/react-query";
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-import { File } from "@/lib/type";
-import { cn } from "@/lib/utils";
-
-export const Context = ({
-  files,
-  setFiles,
-}: {
-  files: File[];
-  setFiles: (files: File[]) => void;
-}) => {
-  const queryClient = useQueryClient();
-  const [open, setOpen] = useState(false);
-
-  const getFileIcon = (filePath: string, size = "size-3.5") => {
-    if (filePath.endsWith(".css")) {
-      return <Braces className={size} />;
-    } else if (filePath.endsWith(".js")) {
-      return <FileCode className={size} />;
-    } else if (filePath.endsWith(".json")) {
-      return <Braces className={size} />;
-    } else {
-      return <FileText className={size} />;
-    }
-  };
-
-  const getFiles = () => queryClient.getQueryData<File[]>(["files"]) ?? [];
-
-  return (
-    <div className="flex items-center justify-start gap-1 flex-wrap">
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button size="xxs" variant={open ? "default" : "bordered"}>
-            <AtSign className="size-3" />
-            Add Context...
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          className="translate-x-6 space-y-4 min-w-fit rounded-2xl! p-0!"
-        >
-          <main className="p-4">
-            <p className="text-xs text-muted-foreground mb-2.5">
-              Select a file to send as context
-            </p>
-            <div className="max-h-[200px] overflow-y-auto space-y-0.5">
-              {getFiles().length === 0 ? (
-                <div className="text-xs text-muted-foreground">
-                  No files available
-                </div>
-              ) : (
-                <>
-                  <button
-                    onClick={() => {
-                      setFiles([]);
-                      setOpen(false);
-                    }}
-                    className={`cursor-pointer w-full px-2 py-1.5 text-xs text-left rounded-md  hover:bg-accent hover:text-accent-foreground transition-colors ${
-                      files.length === 0
-                        ? "bg-linear-to-r from-indigo-500/20 to-indigo-500/5 text-primary font-medium"
-                        : "text-muted-foreground"
-                    }`}
-                  >
-                    All files (default)
-                  </button>
-                  {getFiles()?.map((page) => (
-                    <button
-                      key={page.path}
-                      onClick={() => {
-                        if (files.some((f) => f.path === page.path))
-                          setFiles(files.filter((f) => f.path !== page.path));
-                        else setFiles(files ? [...files, page] : [page]);
-                        setOpen(false);
-                      }}
-                      className={`cursor-pointer w-full px-2 py-1.5 text-xs text-left rounded-md hover:bg-accent hover:text-accent-foreground transition-colors flex items-center gap-1.5 ${
-                        files?.some((f) => f.path === page.path)
-                          ? "bg-linear-to-r from-indigo-500/20 to-indigo-500/5 text-primary font-medium"
-                          : "text-muted-foreground"
-                      }`}
-                    >
-                      <span className="shrink-0">
-                        {getFileIcon(page.path, "size-3")}
-                      </span>
-                      <span className="truncate flex-1">{page.path}</span>
-                    </button>
-                  ))}
-                </>
-              )}
-            </div>
-          </main>
-        </PopoverContent>
-      </Popover>
-      {files?.map((file) => (
-        <Button
-          key={file.path}
-          size="xxs"
-          variant="bordered"
-          className="cursor-default!"
-        >
-          {getFileIcon(file.path, "size-3")}
-          {file.path}
-          <span
-            className="opacity-50 hover:opacity-80 cursor-pointer"
-            onClick={() => {
-              setFiles(files.filter((f) => f.path !== file.path));
-            }}
-          >
-            <X className="size-3.5 opacity-50 hover:opacity-80 shrink-0" />
-          </span>
-        </Button>
-      ))}
-    </div>
-  );
-};

components/ask-ai/input-mentions.tsx

@@ -1,314 +0,0 @@
-import { useRef, useState, useEffect, RefObject } from "react";
-import { useClickAway } from "react-use";
-import { useQueryClient } from "@tanstack/react-query";
-
-import { searchFilesMentions } from "@/actions/mentions";
-import { File } from "@/lib/type";
-import { Braces, FileCode, FileText } from "lucide-react";
-
-export function InputMentions({
-  ref,
-  prompt,
-  files,
-  setPrompt,
-  redesignMdUrl,
-  onSubmit,
-}: {
-  ref: RefObject<HTMLDivElement | null>;
-  prompt: string;
-  files?: File[] | null;
-  redesignMdUrl?: string;
-  setPrompt: (prompt: string) => void;
-  onSubmit: () => void;
-}) {
-  const queryClient = useQueryClient();
-  const [showMentionDropdown, setShowMentionDropdown] = useState(false);
-  const [, setMentionSearch] = useState("");
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const [results, setResults] = useState<File[]>([]);
-
-  useClickAway(dropdownRef, () => {
-    setShowMentionDropdown(false);
-  });
-
-  const getTextContent = (element: HTMLElement): string => {
-    let text = "";
-    const childNodes = element.childNodes;
-
-    for (let i = 0; i < childNodes.length; i++) {
-      const node = childNodes[i];
-      if (node.nodeType === Node.TEXT_NODE) {
-        text += node.textContent || "";
-      } else if (node.nodeType === Node.ELEMENT_NODE) {
-        const el = node as HTMLElement;
-        if (el.classList.contains("mention-chip")) {
-          text += el.getAttribute("data-mention-id") || "";
-        } else {
-          text += el.textContent || "";
-        }
-      }
-    }
-    return text + "\u0020";
-  };
-
-  const extractPromptWithIds = (): string => {
-    if (!ref.current) return "";
-
-    let text = "";
-    const childNodes = ref.current.childNodes;
-
-    for (let i = 0; i < childNodes.length; i++) {
-      const node = childNodes[i];
-      if (node.nodeType === Node.TEXT_NODE) {
-        text += node.textContent || "";
-      } else if (node.nodeType === Node.ELEMENT_NODE) {
-        const el = node as HTMLElement;
-        if (el.classList.contains("mention-chip")) {
-          text += el.getAttribute("data-mention-id") || "";
-        } else {
-          text += el.textContent || "";
-        }
-      }
-    }
-    return text;
-  };
-
-  const shouldDetectMention = (): {
-    detect: boolean;
-    textBeforeCursor: string;
-  } => {
-    const selection = window.getSelection();
-    if (!selection || !ref.current) {
-      return { detect: false, textBeforeCursor: "" };
-    }
-
-    const range = selection.getRangeAt(0);
-    const node = range.startContainer;
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const element = node as HTMLElement;
-      if (element.classList?.contains("mention-chip")) {
-        return { detect: false, textBeforeCursor: "" };
-      }
-    }
-
-    if (node.parentElement?.classList?.contains("mention-chip")) {
-      return { detect: false, textBeforeCursor: "" };
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-      const textContent = node.textContent || "";
-      const cursorOffset = range.startOffset;
-      const textBeforeCursor = textContent.substring(0, cursorOffset);
-
-      const lastAtIndex = textBeforeCursor.lastIndexOf("@");
-      if (lastAtIndex !== -1) {
-        const textAfterAt = textBeforeCursor.substring(lastAtIndex + 1);
-        if (!textAfterAt.includes(" ")) {
-          return { detect: true, textBeforeCursor: textAfterAt };
-        }
-      }
-    }
-
-    return { detect: false, textBeforeCursor: "" };
-  };
-
-  const handleInput = async () => {
-    if (!ref.current) return;
-    const text = getTextContent(ref.current);
-    if (text.trim() === "") {
-      ref.current.innerHTML = "";
-    }
-    setPrompt(text);
-
-    const { detect, textBeforeCursor } = shouldDetectMention();
-
-    if (detect && files && files?.length > 0) {
-      setMentionSearch(textBeforeCursor);
-      setShowMentionDropdown(true);
-      const files = queryClient.getQueryData<File[]>(["files"]) ?? [];
-      const results = await searchFilesMentions(textBeforeCursor, files);
-      setResults(results);
-    } else {
-      setShowMentionDropdown(false);
-    }
-  };
-
-  const createMentionChipElement = (mentionId: string): HTMLSpanElement => {
-    const mentionChip = document.createElement("span");
-
-    const baseClasses =
-      "mention-chip inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium";
-    const typeClasses =
-      "bg-indigo-500/10 text-indigo-500 dark:bg-indigo-500/20 dark:text-indigo-400";
-
-    mentionChip.className = `${baseClasses} ${typeClasses}`;
-    mentionChip.contentEditable = "false";
-    mentionChip.setAttribute("data-mention-id", `file:/${mentionId}`);
-    mentionChip.textContent = `@${mentionId}`;
-
-    return mentionChip;
-  };
-
-  const insertMention = (mentionId: string) => {
-    if (!ref.current) return;
-
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) return;
-
-    const range = selection.getRangeAt(0);
-    const textNode = range.startContainer;
-
-    if (textNode.nodeType !== Node.TEXT_NODE) return;
-
-    const textContent = textNode.textContent || "";
-    const cursorOffset = range.startOffset;
-
-    const textBeforeCursor = textContent.substring(0, cursorOffset);
-    const lastAtIndex = textBeforeCursor.lastIndexOf("@");
-
-    if (lastAtIndex !== -1) {
-      const mentionChip = createMentionChipElement(mentionId);
-
-      const beforeText = textContent.substring(0, lastAtIndex);
-      const afterText = textContent.substring(cursorOffset);
-      const parent = textNode.parentNode;
-      if (!parent) return;
-
-      const beforeNode = beforeText
-        ? document.createTextNode(beforeText)
-        : null;
-      const spaceNode = document.createTextNode("\u0020");
-      const afterNode = afterText ? document.createTextNode(afterText) : null;
-
-      if (beforeNode) {
-        parent.insertBefore(beforeNode, textNode);
-      }
-      parent.insertBefore(mentionChip, textNode);
-      parent.insertBefore(spaceNode, textNode);
-      if (afterNode) {
-        parent.insertBefore(afterNode, textNode);
-      }
-
-      parent.removeChild(textNode);
-
-      const newRange = document.createRange();
-      if (afterNode) {
-        newRange.setStart(afterNode, 0);
-      } else {
-        newRange.setStartAfter(spaceNode);
-      }
-      newRange.collapse(true);
-      selection.removeAllRanges();
-      selection.addRange(newRange);
-
-      const newText = getTextContent(ref.current);
-      setPrompt(newText);
-      setShowMentionDropdown(false);
-      setMentionSearch("");
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (!prompt || prompt.trim() === "") return;
-
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      const promptWithIds = extractPromptWithIds();
-      setPrompt(promptWithIds);
-      onSubmit();
-
-      if (ref.current) {
-        ref.current.innerHTML = "";
-      }
-      setPrompt("");
-      setShowMentionDropdown(false);
-    } else if (e.key === "Escape") {
-      setShowMentionDropdown(false);
-    }
-  };
-
-  useEffect(() => {
-    if (ref.current && prompt === "" && ref.current.innerHTML !== "") {
-      ref.current.innerHTML = "";
-    }
-  }, [prompt]);
-
-  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    const text = e.clipboardData.getData("text/plain");
-    document.execCommand("insertText", false, text);
-  };
-
-  return (
-    <div className="relative">
-      <div
-        id="prompt-input"
-        ref={ref}
-        contentEditable
-        className="pb-2 min-h-10 max-h-[130px] overflow-y-auto w-full h-full resize-none outline-none text-primary text-sm bg-transparent empty:before:block empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground empty:before:pointer-events-none"
-        data-placeholder={
-          redesignMdUrl
-            ? `I'll redesign ${redesignMdUrl}, want to add something?`
-            : files && files.length > 0
-            ? "Ask me anything. Type @ to mention a file..."
-            : "Ask me anything..."
-        }
-        onInput={handleInput}
-        onKeyDown={handleKeyDown}
-        onPaste={handlePaste}
-        suppressContentEditableWarning
-      ></div>
-      {showMentionDropdown && (
-        <div
-          ref={dropdownRef}
-          className="absolute bottom-full mb-2 left-0 z-50 bg-background border border-border rounded-lg shadow-lg min-w-[250px] animate-in fade-in slide-in-from-bottom-2 duration-200"
-        >
-          <div className="text-xs text-muted-foreground/60 px-2 py-2">
-            {results?.length > 0 && (
-              <ul>
-                {results.map((file) => (
-                  <MentionResult
-                    key={file.path}
-                    file={file}
-                    onSelect={() => insertMention(file.path)}
-                  />
-                ))}
-              </ul>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export const getFileIcon = (filePath: string, size = "size-3.5") => {
-  if (filePath.endsWith(".css")) {
-    return <Braces className={size} />;
-  } else if (filePath.endsWith(".js")) {
-    return <FileCode className={size} />;
-  } else if (filePath.endsWith(".json")) {
-    return <Braces className={size} />;
-  } else {
-    return <FileText className={size} />;
-  }
-};
-
-function MentionResult({
-  file,
-  onSelect,
-}: {
-  file: File;
-  onSelect: () => void;
-}) {
-  return (
-    <li
-      className="flex items-center justify-start gap-2 transition-all duration-200 hover:bg-linear-to-r from-indigo-500/40 to-indigo-500/5 text-primary font-medium rounded-lg px-2 py-2 cursor-pointer select-none"
-      onClick={onSelect}
-    >
-      {getFileIcon(file.path, "size-3")}
-      {file.path}
-    </li>
-  );
-}

components/ask-ai/models.tsx

@@ -1,211 +0,0 @@
-import {
-  BrainIcon,
-  ChevronDown,
-  DollarSign,
-  StarsIcon,
-  Zap,
-} from "lucide-react";
-import { useMemo, useState } from "react";
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { ProviderType } from "@/lib/type";
-import { MODELS } from "@/lib/providers";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-export function Models({
-  model,
-  setModel,
-  provider,
-  setProvider,
-}: {
-  model: string;
-  setModel: (model: string) => void;
-  provider: ProviderType;
-  setProvider: (provider: ProviderType) => void;
-}) {
-  const [open, setOpen] = useState(false);
-
-  const formattedModels = useMemo(() => {
-    const lists: ((typeof MODELS)[0] | { isCategory: true; name: string })[] =
-      [];
-    const keys = new Set<string>();
-    MODELS.forEach((model) => {
-      if (!keys.has(model.companyName)) {
-        lists.push({
-          isCategory: true,
-          name: model.companyName,
-          logo: model.logo,
-        });
-        keys.add(model.companyName);
-      }
-      lists.push(model);
-    });
-    return lists;
-  }, []);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          id="tour-model-section"
-          variant={open ? "default" : "bordered"}
-          size="xs"
-          className="flex items-center gap-1 rounded-full! px-2.5!"
-        >
-          <span className="max-w-48 truncate">
-            {model.split("/").pop()?.toLowerCase()}
-          </span>
-          <ChevronDown className="size-3" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="translate-x-6 rounded-2xl! p-0! bg-accent! border-border-muted! min-w-fit text-center overflow-hidden">
-        <header className="bg-linear-to-b from-indigo-500/25 dark:from-indigo-500/40 to-accent p-6">
-          <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-yellow-200 shadow-2xl flex items-center justify-center text-2xl z-2">
-              🧠
-            </div>
-            <div className="size-9 rounded-full bg-green-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-              🤖
-            </div>
-          </div>
-          <p className="text-xl font-semibold text-primary">
-            Choose your AI model
-          </p>
-          <p className="text-sm text-muted-foreground mt-1.5">
-            Select the AI model that best fits your needs.
-          </p>
-        </header>
-        <main className="space-y-4 px-6 pb-6">
-          <div>
-            <Select defaultValue={model} onValueChange={setModel}>
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select a model" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {formattedModels.map(
-                    (
-                      item:
-                        | (typeof MODELS)[0]
-                        | { isCategory: true; name: string }
-                    ) => {
-                      if ("isCategory" in item) {
-                        return (
-                          <SelectLabel
-                            key={item.name}
-                            className="flex items-center gap-1"
-                          >
-                            {item.name}
-                          </SelectLabel>
-                        );
-                      }
-                      const {
-                        value,
-                        label,
-                        isNew = false,
-                        isBestSeller = false,
-                      } = item;
-                      return (
-                        <SelectItem key={value} value={value} className="">
-                          {value.split("/").pop() || label}
-                          {isNew && (
-                            <span className="text-xs bg-indigo-500 dark:bg-indigo-500/20 text-primary-foreground dark:text-indigo-500 rounded-full px-1.5 py-0.5">
-                              New
-                            </span>
-                          )}
-                          {isBestSeller && (
-                            <StarsIcon className="size-3.5 text-yellow-500 fill-yellow-500" />
-                          )}
-                        </SelectItem>
-                      );
-                    }
-                  )}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-          <div>
-            <p className="text-sm text-muted-foreground mb-2">Provider mode:</p>
-            <div
-              role="radiogroup"
-              aria-label="Provider mode"
-              className="flex w-fit items-center gap-1.5"
-            >
-              {(
-                [
-                  { value: "cheapest", icon: DollarSign, color: "emerald" },
-                  {
-                    value: "auto",
-                    icon: BrainIcon,
-                    color: "indigo",
-                    name: "Smartest",
-                  },
-                  { value: "fastest", icon: Zap, color: "amber" },
-                ] as const
-              ).map(
-                ({
-                  value,
-                  icon: Icon,
-                  color,
-                  name,
-                }: {
-                  value: string;
-                  icon: React.ElementType;
-                  color: string;
-                  name?: string;
-                }) => (
-                  <div
-                    key={value}
-                    role="radio"
-                    aria-checked={provider === value}
-                    tabIndex={0}
-                    onClick={() => setProvider(value)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        setProvider(value);
-                      }
-                    }}
-                    className={cn(
-                      "inline-flex items-center gap-1.5 h-7 px-2.5 text-xs font-medium border border-border rounded-md cursor-pointer transition-colors select-none",
-                      "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                      provider === value && [
-                        "bg-transparent",
-                        color === "emerald" &&
-                          "[&_svg]:fill-emerald-500 [&_svg]:stroke-emerald-500 bg-emerald-500/10! border-emerald-500/10! text-emerald-500!",
-                        color === "indigo" &&
-                          "[&_svg]:fill-indigo-500 [&_svg]:stroke-indigo-500 bg-indigo-500/10! border-indigo-500/10! text-indigo-500!",
-                        color === "amber" &&
-                          "[&_svg]:fill-amber-500 [&_svg]:stroke-amber-500 bg-amber-500/10! border-amber-500/10! text-amber-500!",
-                      ]
-                    )}
-                  >
-                    <Icon className="size-3.5" />
-                    {name ?? value.charAt(0).toUpperCase() + value.slice(1)}
-                  </div>
-                )
-              )}
-            </div>
-          </div>
-        </main>
-      </PopoverContent>
-    </Popover>
-  );
-}