Merge remote-tracking branch 'upstream/main'

app/api/ask-ai/route.ts

@@ -10,10 +10,15 @@ import {
   FOLLOW_UP_SYSTEM_PROMPT,
   INITIAL_SYSTEM_PROMPT,
   MAX_REQUESTS_PER_IP,
+  NEW_PAGE_END,
+  NEW_PAGE_START,
   REPLACE_END,
   SEARCH_START,
+  UPDATE_PAGE_START,
+  UPDATE_PAGE_END,
 } from "@/lib/prompts";
 import MY_TOKEN_KEY from "@/lib/get-cookie-name";
+import { Page } from "@/types";
 
 const ipAddresses = new Map();
 
@@ -22,7 +27,7 @@ export async function POST(request: NextRequest) {
   const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, provider, model, redesignMarkdown, html } = body;
+  const { prompt, provider, model, redesignMarkdown, previousPrompts, pages } = body;
 
   if (!model || (!prompt && !redesignMarkdown)) {
     return NextResponse.json(
@@ -34,6 +39,7 @@ export async function POST(request: NextRequest) {
   const selectedModel = MODELS.find(
     (m) => m.value === model || m.label === model
   );
+
   if (!selectedModel) {
     return NextResponse.json(
       { ok: false, error: "Invalid model selected" },
@@ -91,12 +97,10 @@ export async function POST(request: NextRequest) {
       : PROVIDERS[provider as keyof typeof PROVIDERS] ?? DEFAULT_PROVIDER;
 
   try {
-    // Create a stream response
     const encoder = new TextEncoder();
     const stream = new TransformStream();
     const writer = stream.writable.getWriter();
 
-    // Start the response
     const response = new NextResponse(stream.readable, {
       headers: {
         "Content-Type": "text/plain; charset=utf-8",
@@ -106,7 +110,7 @@ export async function POST(request: NextRequest) {
     });
 
     (async () => {
-      let completeResponse = "";
+      // let completeResponse = "";
       try {
         const client = new InferenceClient(token);
         const chatCompletion = client.chatCompletionStream(
@@ -118,12 +122,14 @@ export async function POST(request: NextRequest) {
                 role: "system",
                 content: INITIAL_SYSTEM_PROMPT,
               },
+              ...(pages?.length > 1 ? [{
+                role: "assistant",
+                content: `Here are the current pages:\n\n${pages.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}\n\nNow, please create a new page based on this code. Also here are the previous prompts:\n\n${previousPrompts.map((p: string) => `- ${p}`).join("\n")}`
+              }] : []),
               {
                 role: "user",
                 content: redesignMarkdown
                   ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown.`
-                  : html
-                  ? `Here is my current HTML code:\n\n\`\`\`html\n${html}\n\`\`\`\n\nNow, please create a new design based on this HTML.`
                   : prompt,
               },
             ],
@@ -140,39 +146,7 @@ export async function POST(request: NextRequest) {
 
           const chunk = value.choices[0]?.delta?.content;
           if (chunk) {
-            let newChunk = chunk;
-            if (!selectedModel?.isThinker) {
-              if (provider !== "sambanova") {
-                await writer.write(encoder.encode(chunk));
-                completeResponse += chunk;
-
-                if (completeResponse.includes("</html>")) {
-                  break;
-                }
-              } else {
-                if (chunk.includes("</html>")) {
-                  newChunk = newChunk.replace(/<\/html>[\s\S]*/, "</html>");
-                }
-                completeResponse += newChunk;
-                await writer.write(encoder.encode(newChunk));
-                if (newChunk.includes("</html>")) {
-                  break;
-                }
-              }
-            } else {
-              const lastThinkTagIndex =
-                completeResponse.lastIndexOf("</think>");
-              completeResponse += newChunk;
-              await writer.write(encoder.encode(newChunk));
-              if (lastThinkTagIndex !== -1) {
-                const afterLastThinkTag = completeResponse.slice(
-                  lastThinkTagIndex + "</think>".length
-                );
-                if (afterLastThinkTag.includes("</html>")) {
-                  break;
-                }
-              }
-            }
+            await writer.write(encoder.encode(chunk));
           }
         }
       } catch (error: any) {
@@ -222,16 +196,25 @@ export async function PUT(request: NextRequest) {
   const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, html, previousPrompt, provider, selectedElementHtml } = body;
+  const { prompt, previousPrompt, provider, selectedElementHtml, model, pages, files } =
+    body;
 
-  if (!prompt || !html) {
+  if (!prompt || pages.length === 0) {
     return NextResponse.json(
       { ok: false, error: "Missing required fields" },
       { status: 400 }
     );
   }
 
-  const selectedModel = MODELS[0];
+  const selectedModel = MODELS.find(
+    (m) => m.value === model || m.label === model
+  );
+  if (!selectedModel) {
+    return NextResponse.json(
+      { ok: false, error: "Invalid model selected" },
+      { status: 400 }
+    );
+  }
 
   let token = userToken;
   const billTo: string | null = null;
@@ -292,11 +275,11 @@ export async function PUT(request: NextRequest) {
           {
             role: "assistant",
 
-            content: `The current code is: \n\`\`\`html\n${html}\n\`\`\` ${
+            content: `${
               selectedElementHtml
                 ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\``
                 : ""
-            }`,
+            }. Current pages: ${pages?.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}. ${files?.length > 0 ? `Current images: ${files?.map((f: string) => `- ${f}`).join("\n")}.` : ""}`,
           },
           {
             role: "user",
@@ -322,61 +305,171 @@ export async function PUT(request: NextRequest) {
 
     if (chunk) {
       const updatedLines: number[][] = [];
-      let newHtml = html;
-      let position = 0;
-      let moreBlocks = true;
-
-      while (moreBlocks) {
-        const searchStartIndex = chunk.indexOf(SEARCH_START, position);
-        if (searchStartIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
+      let newHtml = "";
+      const updatedPages = [...(pages || [])];
+
+      const updatePageRegex = new RegExp(`${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${UPDATE_PAGE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
+      let updatePageMatch;
+      
+      while ((updatePageMatch = updatePageRegex.exec(chunk)) !== null) {
+        const [, pagePath, pageContent] = updatePageMatch;
+        
+        const pageIndex = updatedPages.findIndex(p => p.path === pagePath);
+        if (pageIndex !== -1) {
+          let pageHtml = updatedPages[pageIndex].html;
+          
+          let processedContent = pageContent;
+          const htmlMatch = pageContent.match(/```html\s*([\s\S]*?)\s*```/);
+          if (htmlMatch) {
+            processedContent = htmlMatch[1];
+          }
+          let position = 0;
+          let moreBlocks = true;
+
+          while (moreBlocks) {
+            const searchStartIndex = processedContent.indexOf(SEARCH_START, position);
+            if (searchStartIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
+
+            const dividerIndex = processedContent.indexOf(DIVIDER, searchStartIndex);
+            if (dividerIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
+
+            const replaceEndIndex = processedContent.indexOf(REPLACE_END, dividerIndex);
+            if (replaceEndIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
 
-        const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
-        if (dividerIndex === -1) {
-          moreBlocks = false;
-          continue;
+            const searchBlock = processedContent.substring(
+              searchStartIndex + SEARCH_START.length,
+              dividerIndex
+            );
+            const replaceBlock = processedContent.substring(
+              dividerIndex + DIVIDER.length,
+              replaceEndIndex
+            );
+
+            if (searchBlock.trim() === "") {
+              pageHtml = `${replaceBlock}\n${pageHtml}`;
+              updatedLines.push([1, replaceBlock.split("\n").length]);
+            } else {
+              const blockPosition = pageHtml.indexOf(searchBlock);
+              if (blockPosition !== -1) {
+                const beforeText = pageHtml.substring(0, blockPosition);
+                const startLineNumber = beforeText.split("\n").length;
+                const replaceLines = replaceBlock.split("\n").length;
+                const endLineNumber = startLineNumber + replaceLines - 1;
+
+                updatedLines.push([startLineNumber, endLineNumber]);
+                pageHtml = pageHtml.replace(searchBlock, replaceBlock);
+              }
+            }
+
+            position = replaceEndIndex + REPLACE_END.length;
+          }
+
+          updatedPages[pageIndex].html = pageHtml;
+          
+          if (pagePath === '/' || pagePath === '/index' || pagePath === 'index') {
+            newHtml = pageHtml;
+          }
         }
+      }
 
-        const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
-        if (replaceEndIndex === -1) {
-          moreBlocks = false;
-          continue;
+      const newPageRegex = new RegExp(`${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${NEW_PAGE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_PAGE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
+      let newPageMatch;
+      
+      while ((newPageMatch = newPageRegex.exec(chunk)) !== null) {
+        const [, pagePath, pageContent] = newPageMatch;
+        
+        let pageHtml = pageContent;
+        const htmlMatch = pageContent.match(/```html\s*([\s\S]*?)\s*```/);
+        if (htmlMatch) {
+          pageHtml = htmlMatch[1];
+        }
+        
+        const existingPageIndex = updatedPages.findIndex(p => p.path === pagePath);
+        
+        if (existingPageIndex !== -1) {
+          updatedPages[existingPageIndex] = {
+            path: pagePath,
+            html: pageHtml.trim()
+          };
+        } else {
+          updatedPages.push({
+            path: pagePath,
+            html: pageHtml.trim()
+          });
         }
+      }
 
-        const searchBlock = chunk.substring(
-          searchStartIndex + SEARCH_START.length,
-          dividerIndex
-        );
-        const replaceBlock = chunk.substring(
-          dividerIndex + DIVIDER.length,
-          replaceEndIndex
-        );
+      if (updatedPages.length === pages?.length && !chunk.includes(UPDATE_PAGE_START)) {
+        let position = 0;
+        let moreBlocks = true;
 
-        if (searchBlock.trim() === "") {
-          newHtml = `${replaceBlock}\n${newHtml}`;
-          updatedLines.push([1, replaceBlock.split("\n").length]);
-        } else {
-          const blockPosition = newHtml.indexOf(searchBlock);
-          if (blockPosition !== -1) {
-            const beforeText = newHtml.substring(0, blockPosition);
-            const startLineNumber = beforeText.split("\n").length;
-            const replaceLines = replaceBlock.split("\n").length;
-            const endLineNumber = startLineNumber + replaceLines - 1;
-
-            updatedLines.push([startLineNumber, endLineNumber]);
-            newHtml = newHtml.replace(searchBlock, replaceBlock);
+        while (moreBlocks) {
+          const searchStartIndex = chunk.indexOf(SEARCH_START, position);
+          if (searchStartIndex === -1) {
+            moreBlocks = false;
+            continue;
           }
+
+          const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
+          if (dividerIndex === -1) {
+            moreBlocks = false;
+            continue;
+          }
+
+          const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
+          if (replaceEndIndex === -1) {
+            moreBlocks = false;
+            continue;
+          }
+
+          const searchBlock = chunk.substring(
+            searchStartIndex + SEARCH_START.length,
+            dividerIndex
+          );
+          const replaceBlock = chunk.substring(
+            dividerIndex + DIVIDER.length,
+            replaceEndIndex
+          );
+
+          if (searchBlock.trim() === "") {
+            newHtml = `${replaceBlock}\n${newHtml}`;
+            updatedLines.push([1, replaceBlock.split("\n").length]);
+          } else {
+            const blockPosition = newHtml.indexOf(searchBlock);
+            if (blockPosition !== -1) {
+              const beforeText = newHtml.substring(0, blockPosition);
+              const startLineNumber = beforeText.split("\n").length;
+              const replaceLines = replaceBlock.split("\n").length;
+              const endLineNumber = startLineNumber + replaceLines - 1;
+
+              updatedLines.push([startLineNumber, endLineNumber]);
+              newHtml = newHtml.replace(searchBlock, replaceBlock);
+            }
+          }
+
+          position = replaceEndIndex + REPLACE_END.length;
         }
 
-        position = replaceEndIndex + REPLACE_END.length;
+        // Update the main HTML if it's the index page
+        const mainPageIndex = updatedPages.findIndex(p => p.path === '/' || p.path === '/index' || p.path === 'index');
+        if (mainPageIndex !== -1) {
+          updatedPages[mainPageIndex].html = newHtml;
+        }
       }
 
       return NextResponse.json({
         ok: true,
-        html: newHtml,
         updatedLines,
+        pages: updatedPages,
       });
     } else {
       return NextResponse.json(

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

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

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

@@ -1,10 +1,10 @@
 import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, spaceInfo, uploadFile } from "@huggingface/hub";
+import { RepoDesignation, spaceInfo, uploadFiles, listFiles } from "@huggingface/hub";
 
 import { isAuthenticated } from "@/lib/auth";
 import Project from "@/models/Project";
 import dbConnect from "@/lib/mongodb";
-import { getPTag } from "@/lib/utils";
+import { Page } from "@/types";
 
 export async function GET(
   req: NextRequest,
@@ -33,7 +33,6 @@ export async function GET(
       { status: 404 }
     );
   }
-  const space_url = `https://huggingface.co/spaces/${namespace}/${repoId}/raw/main/index.html`;
   try {
     const space = await spaceInfo({
       name: namespace + "/" + repoId,
@@ -60,25 +59,59 @@ export async function GET(
       );
     }
 
-    const response = await fetch(space_url);
-    if (!response.ok) {
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+
+    const htmlFiles: Page[] = [];
+    const images: string[] = [];
+
+    const allowedImagesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif"];
+    
+    for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
+      if (fileInfo.path.endsWith(".html")) {
+        const res = await fetch(`https://huggingface.co/spaces/${namespace}/${repoId}/raw/main/${fileInfo.path}`);
+        if (res.ok) {
+          const html = await res.text();
+          if (fileInfo.path === "index.html") {
+            htmlFiles.unshift({
+              path: fileInfo.path,
+              html,
+            });
+          } else {
+          htmlFiles.push({
+            path: fileInfo.path,
+              html,
+            });
+          }
+        }
+      }
+      if (fileInfo.type === "directory" && fileInfo.path === "images") {
+        for await (const imageInfo of listFiles({repo, accessToken: user.token as string, path: fileInfo.path})) {
+          if (allowedImagesExtensions.includes(imageInfo.path.split(".").pop() || "")) {
+            images.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${imageInfo.path}`);
+          }
+        }
+      }
+    }
+
+    if (htmlFiles.length === 0) {
       return NextResponse.json(
         {
           ok: false,
-          error: "Failed to fetch space HTML",
+          error: "No HTML files found",
         },
         { status: 404 }
       );
     }
-    let html = await response.text();
-    // remove the last p tag including this url https://enzostvs-deepsite.hf.space
-    html = html.replace(getPTag(namespace + "/" + repoId), "");
 
     return NextResponse.json(
       {
         project: {
           ...project,
-          html,
+          pages: htmlFiles,
+          images,
         },
         ok: true,
       },
@@ -117,7 +150,7 @@ export async function PUT(
   await dbConnect();
   const param = await params;
   const { namespace, repoId } = param;
-  const { html, prompts } = await req.json();
+  const { pages, prompts } = await req.json();
 
   const project = await Project.findOne({
     user_id: user.id,
@@ -138,11 +171,14 @@ export async function PUT(
     name: `${namespace}/${repoId}`,
   };
 
-  const newHtml = html.replace(/<\/body>/, `${getPTag(repo.name)}</body>`);
-  const file = new File([newHtml], "index.html", { type: "text/html" });
-  await uploadFile({
+  const files: File[] = [];
+  pages.forEach((page: Page) => {
+    const file = new File([page.html], page.path, { type: "text/html" });
+    files.push(file);
+  });
+  await uploadFiles({
     repo,
-    file,
+    files,
     accessToken: user.token as string,
     commitTitle: `${prompts[prompts.length - 1]} - Follow Up Deployment`,
   });

app/api/me/projects/route.ts

@@ -4,8 +4,9 @@ import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub";
 import { isAuthenticated } from "@/lib/auth";
 import Project from "@/models/Project";
 import dbConnect from "@/lib/mongodb";
-import { COLORS, getPTag } from "@/lib/utils";
-// import type user
+import { COLORS } from "@/lib/utils";
+import { Page } from "@/types";
+
 export async function GET() {
   const user = await isAuthenticated();
 
@@ -39,10 +40,6 @@ export async function GET() {
   );
 }
 
-/**
- * This API route creates a new project in Hugging Face Spaces.
- * It requires an Authorization header with a valid token and a JSON body with the project details.
- */
 export async function POST(request: NextRequest) {
   const user = await isAuthenticated();
 
@@ -50,9 +47,9 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
 
-  const { title, html, prompts } = await request.json();
+  const { title, pages, prompts } = await request.json();
 
-  if (!title || !html) {
+  if (!title || !pages || pages.length === 0) {
     return NextResponse.json(
       { message: "Title and HTML content are required.", ok: false },
       { status: 400 }
@@ -63,7 +60,6 @@ export async function POST(request: NextRequest) {
 
   try {
     let readme = "";
-    let newHtml = html;
 
     const newTitle = title
       .toLowerCase()
@@ -97,12 +93,14 @@ tags:
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference`;
 
-    newHtml = html.replace(/<\/body>/, `${getPTag(repo.name)}</body>`);
-    const file = new File([newHtml], "index.html", { type: "text/html" });
     const readmeFile = new File([readme], "README.md", {
       type: "text/markdown",
     });
-    const files = [file, readmeFile];
+    const files = [readmeFile];
+    pages.forEach((page: Page) => {
+      const file = new File([page.html], page.path, { type: "text/html" });
+      files.push(file);
+    });
     await uploadFiles({
       repo,
       files,

app/layout.tsx

@@ -9,6 +9,8 @@ import { Toaster } from "@/components/ui/sonner";
 import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { apiServer } from "@/lib/api";
 import AppContext from "@/components/contexts/app-context";
+import Script from "next/script";
+import IframeDetector from "@/components/iframe-detector";
 
 const inter = Inter({
   variable: "--font-inter-sans",
@@ -47,6 +49,8 @@ async function getMe() {
   }
 }
 
+// if domain isn't deepsite.hf.co or enzostvs-deepsite.hf.space redirect to deepsite.hf.co
+
 export default async function RootLayout({
   children,
 }: Readonly<{
@@ -55,9 +59,15 @@ export default async function RootLayout({
   const data = await getMe();
   return (
     <html lang="en">
+      <Script
+        defer
+        data-domain="deepsite.hf.co"
+        src="https://plausible.io/js/script.js"
+      ></Script>
       <body
         className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark h-[100dvh] overflow-hidden`}
       >
+        <IframeDetector />
         <Toaster richColors position="bottom-center" />
         <TanstackProvider>
           <AppContext me={data}>{children}</AppContext>

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

@@ -32,9 +32,11 @@ export default async function ProjectNamespacePage({
   params: Promise<{ namespace: string; repoId: string }>;
 }) {
   const { namespace, repoId } = await params;
-  const project = await getProject(namespace, repoId);
-  if (!project?.html) {
+  const data = await getProject(namespace, repoId);
+  if (!data?.pages) {
     redirect("/projects");
   }
-  return <AppEditor project={project} />;
+  return (
+    <AppEditor project={data} pages={data.pages} images={data.images ?? []} />
+  );
 }

app/projects/new/page.tsx

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

components/editor/ask-ai/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useRef, useMemo } from "react";
+import { useState, useMemo, useRef } from "react";
 import classNames from "classnames";
 import { toast } from "sonner";
 import { useLocalStorage, useUpdateEffect } from "react-use";
@@ -10,8 +10,8 @@ import { FaStopCircle } from "react-icons/fa";
 import ProModal from "@/components/pro-modal";
 import { Button } from "@/components/ui/button";
 import { MODELS } from "@/lib/providers";
-import { HtmlHistory } from "@/types";
-import { InviteFriends } from "@/components/invite-friends";
+import { HtmlHistory, Page, Project } from "@/types";
+// import { InviteFriends } from "@/components/invite-friends";
 import { Settings } from "@/components/editor/ask-ai/settings";
 import { LoginModal } from "@/components/login-modal";
 import { ReImagine } from "@/components/editor/ask-ai/re-imagine";
@@ -22,249 +22,192 @@ import { TooltipContent } from "@radix-ui/react-tooltip";
 import { SelectedHtmlElement } from "./selected-html-element";
 import { FollowUpTooltip } from "./follow-up-tooltip";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
+import { useCallAi } from "@/hooks/useCallAi";
+import { SelectedFiles } from "./selected-files";
+import { Uploader } from "./uploader";
 
 export function AskAI({
-  html,
-  setHtml,
+  project,
+  images,
+  currentPage,
+  previousPrompts,
   onScrollToBottom,
   isAiWorking,
   setisAiWorking,
   isEditableModeEnabled = false,
+  pages,
+  htmlHistory,
   selectedElement,
   setSelectedElement,
+  selectedFiles,
+  setSelectedFiles,
   setIsEditableModeEnabled,
   onNewPrompt,
   onSuccess,
+  setPages,
+  setCurrentPage,
 }: {
-  html: string;
-  setHtml: (html: string) => void;
+  project?: Project | null;
+  currentPage: Page;
+  images?: string[];
+  pages: Page[];
   onScrollToBottom: () => void;
+  previousPrompts: string[];
   isAiWorking: boolean;
   onNewPrompt: (prompt: string) => void;
   htmlHistory?: HtmlHistory[];
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
-  onSuccess: (h: string, p: string, n?: number[][]) => void;
+  isNew?: boolean;
+  onSuccess: (page: Page[], p: string, n?: number[][]) => void;
   isEditableModeEnabled: boolean;
   setIsEditableModeEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   selectedElement?: HTMLElement | null;
   setSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+  selectedFiles: string[];
+  setSelectedFiles: React.Dispatch<React.SetStateAction<string[]>>;
+  setPages: React.Dispatch<React.SetStateAction<Page[]>>;
+  setCurrentPage: React.Dispatch<React.SetStateAction<string>>;
 }) {
   const refThink = useRef<HTMLDivElement | null>(null);
-  const audio = useRef<HTMLAudioElement | null>(null);
 
   const [open, setOpen] = useState(false);
   const [prompt, setPrompt] = useState("");
-  const [hasAsked, setHasAsked] = useState(false);
   const [previousPrompt, setPreviousPrompt] = useState("");
   const [provider, setProvider] = useLocalStorage("provider", "auto");
   const [model, setModel] = useLocalStorage("model", MODELS[0].value);
   const [openProvider, setOpenProvider] = useState(false);
   const [providerError, setProviderError] = useState("");
   const [openProModal, setOpenProModal] = useState(false);
-  const [think, setThink] = useState<string | undefined>(undefined);
   const [openThink, setOpenThink] = useState(false);
   const [isThinking, setIsThinking] = useState(true);
-  const [controller, setController] = useState<AbortController | null>(null);
+  const [think, setThink] = useState("");
   const [isFollowUp, setIsFollowUp] = useState(true);
+  const [isUploading, setIsUploading] = useState(false);
+  const [files, setFiles] = useState<string[]>(images ?? []);
+
+  const {
+    callAiNewProject,
+    callAiFollowUp,
+    callAiNewPage,
+    stopController,
+    audio: hookAudio,
+  } = useCallAi({
+    onNewPrompt,
+    onSuccess,
+    onScrollToBottom,
+    setPages,
+    setCurrentPage,
+    currentPage,
+    pages,
+    isAiWorking,
+    setisAiWorking,
+  });
+
+  const selectedModel = useMemo(() => {
+    return MODELS.find((m: { value: string }) => m.value === model);
+  }, [model]);
 
   const callAi = async (redesignMarkdown?: string) => {
     if (isAiWorking) return;
     if (!redesignMarkdown && !prompt.trim()) return;
-    setisAiWorking(true);
-    setProviderError("");
-    setThink("");
-    setOpenThink(false);
-    setIsThinking(true);
-
-    let contentResponse = "";
-    let thinkResponse = "";
-    let lastRenderTime = 0;
-
-    const abortController = new AbortController();
-    setController(abortController);
-    try {
-      onNewPrompt(prompt);
-      if (isFollowUp && !redesignMarkdown && !isSameHtml) {
-        const selectedElementHtml = selectedElement
-          ? selectedElement.outerHTML
-          : "";
-        const request = await fetch("/api/ask-ai", {
-          method: "PUT",
-          body: JSON.stringify({
-            prompt,
-            provider,
-            previousPrompt,
-            model,
-            html,
-            selectedElementHtml,
-          }),
-          headers: {
-            "Content-Type": "application/json",
-            "x-forwarded-for": window.location.hostname,
-          },
-          signal: abortController.signal,
-        });
-        if (request && request.body) {
-          const res = await request.json();
-          if (!request.ok) {
-            if (res.openLogin) {
-              setOpen(true);
-            } else if (res.openSelectProvider) {
-              setOpenProvider(true);
-              setProviderError(res.message);
-            } else if (res.openProModal) {
-              setOpenProModal(true);
-            } else {
-              toast.error(res.message);
-            }
-            setisAiWorking(false);
-            return;
-          }
-          setHtml(res.html);
-          toast.success("AI responded successfully");
-          setPreviousPrompt(prompt);
-          setPrompt("");
-          setisAiWorking(false);
-          onSuccess(res.html, prompt, res.updatedLines);
-          if (audio.current) audio.current.play();
-        }
-      } else {
-        const request = await fetch("/api/ask-ai", {
-          method: "POST",
-          body: JSON.stringify({
-            prompt,
-            provider,
-            model,
-            html: isSameHtml ? "" : html,
-            redesignMarkdown,
-          }),
-          headers: {
-            "Content-Type": "application/json",
-            "x-forwarded-for": window.location.hostname,
-          },
-          signal: abortController.signal,
-        });
-        if (request && request.body) {
-          const reader = request.body.getReader();
-          const decoder = new TextDecoder("utf-8");
-          const selectedModel = MODELS.find(
-            (m: { value: string }) => m.value === model
-          );
-          let contentThink: string | undefined = undefined;
-          const read = async () => {
-            const { done, value } = await reader.read();
-            if (done) {
-              const isJson =
-                contentResponse.trim().startsWith("{") &&
-                contentResponse.trim().endsWith("}");
-              const jsonResponse = isJson ? JSON.parse(contentResponse) : null;
-              if (jsonResponse && !jsonResponse.ok) {
-                if (jsonResponse.openLogin) {
-                  setOpen(true);
-                } else if (jsonResponse.openSelectProvider) {
-                  setOpenProvider(true);
-                  setProviderError(jsonResponse.message);
-                } else if (jsonResponse.openProModal) {
-                  setOpenProModal(true);
-                } else {
-                  toast.error(jsonResponse.message);
-                }
-                setisAiWorking(false);
-                return;
-              }
-
-              toast.success("AI responded successfully");
-              setPreviousPrompt(prompt);
-              setPrompt("");
-              setisAiWorking(false);
-              setHasAsked(true);
-              setModel(MODELS[0].value);
-              if (audio.current) audio.current.play();
 
-              // Now we have the complete HTML including </html>, so set it to be sure
-              const finalDoc = contentResponse.match(
-                /<!DOCTYPE html>[\s\S]*<\/html>/
-              )?.[0];
-              if (finalDoc) {
-                setHtml(finalDoc);
-              }
-              onSuccess(finalDoc ?? contentResponse, prompt);
-
-              return;
-            }
+    if (isFollowUp && !redesignMarkdown && !isSameHtml) {
+      // Use follow-up function for existing projects
+      const selectedElementHtml = selectedElement
+        ? selectedElement.outerHTML
+        : "";
 
-            const chunk = decoder.decode(value, { stream: true });
-            thinkResponse += chunk;
-            if (selectedModel?.isThinker) {
-              const thinkMatch = thinkResponse.match(/<think>[\s\S]*/)?.[0];
-              if (thinkMatch && !thinkResponse?.includes("</think>")) {
-                if ((contentThink?.length ?? 0) < 3) {
-                  setOpenThink(true);
-                }
-                setThink(thinkMatch.replace("<think>", "").trim());
-                contentThink += chunk;
-                return read();
-              }
-            }
+      const result = await callAiFollowUp(
+        prompt,
+        model,
+        provider,
+        previousPrompt,
+        selectedElementHtml,
+        selectedFiles
+      );
 
-            contentResponse += chunk;
+      if (result?.error) {
+        handleError(result.error, result.message);
+        return;
+      }
 
-            const newHtml = contentResponse.match(
-              /<!DOCTYPE html>[\s\S]*/
-            )?.[0];
-            if (newHtml) {
-              setIsThinking(false);
-              let partialDoc = newHtml;
-              if (
-                partialDoc.includes("<head>") &&
-                !partialDoc.includes("</head>")
-              ) {
-                partialDoc += "\n</head>";
-              }
-              if (
-                partialDoc.includes("<body") &&
-                !partialDoc.includes("</body>")
-              ) {
-                partialDoc += "\n</body>";
-              }
-              if (!partialDoc.includes("</html>")) {
-                partialDoc += "\n</html>";
-              }
+      if (result?.success) {
+        setPreviousPrompt(prompt);
+        setPrompt("");
+      }
+    } else if (isFollowUp && pages.length > 1 && isSameHtml) {
+      const result = await callAiNewPage(
+        prompt,
+        model,
+        provider,
+        currentPage.path,
+        [
+          ...(previousPrompts ?? []),
+          ...(htmlHistory?.map((h) => h.prompt) ?? []),
+        ]
+      );
+      if (result?.error) {
+        handleError(result.error, result.message);
+        return;
+      }
 
-              // Throttle the re-renders to avoid flashing/flicker
-              const now = Date.now();
-              if (now - lastRenderTime > 300) {
-                setHtml(partialDoc);
-                lastRenderTime = now;
-              }
+      if (result?.success) {
+        setPreviousPrompt(prompt);
+        setPrompt("");
+      }
+    } else {
+      const result = await callAiNewProject(
+        prompt,
+        model,
+        provider,
+        redesignMarkdown,
+        handleThink,
+        () => {
+          setIsThinking(false);
+        }
+      );
 
-              if (partialDoc.length > 200) {
-                onScrollToBottom();
-              }
-            }
-            read();
-          };
+      if (result?.error) {
+        handleError(result.error, result.message);
+        return;
+      }
 
-          read();
+      if (result?.success) {
+        setPreviousPrompt(prompt);
+        setPrompt("");
+        if (selectedModel?.isThinker) {
+          setModel(MODELS[0].value);
         }
       }
-    } catch (error: any) {
-      setisAiWorking(false);
-      toast.error(error.message);
-      if (error.openLogin) {
-        setOpen(true);
-      }
     }
   };
 
-  const stopController = () => {
-    if (controller) {
-      controller.abort();
-      setController(null);
-      setisAiWorking(false);
-      setThink("");
-      setOpenThink(false);
-      setIsThinking(false);
+  const handleThink = (think: string) => {
+    setThink(think);
+    setIsThinking(true);
+    setOpenThink(true);
+  };
+
+  const handleError = (error: string, message?: string) => {
+    switch (error) {
+      case "login_required":
+        setOpen(true);
+        break;
+      case "provider_required":
+        setOpenProvider(true);
+        setProviderError(message || "");
+        break;
+      case "pro_required":
+        setOpenProModal(true);
+        break;
+      case "api_error":
+        toast.error(message || "An error occurred");
+        break;
+      case "network_error":
+        toast.error(message || "Network error occurred");
+        break;
+      default:
+        toast.error("An unexpected error occurred");
     }
   };
 
@@ -281,8 +224,8 @@ export function AskAI({
   }, [isThinking]);
 
   const isSameHtml = useMemo(() => {
-    return isTheSameHtml(html);
-  }, [html]);
+    return isTheSameHtml(currentPage.html);
+  }, [currentPage.html]);
 
   return (
     <div className="px-3">
@@ -324,6 +267,13 @@ export function AskAI({
             </main>
           </div>
         )}
+        <SelectedFiles
+          files={selectedFiles}
+          isAiWorking={isAiWorking}
+          onDelete={(file) =>
+            setSelectedFiles((prev) => prev.filter((f) => f !== file))
+          }
+        />
         {selectedElement && (
           <div className="px-4 pt-3">
             <SelectedHtmlElement
@@ -334,38 +284,41 @@ export function AskAI({
           </div>
         )}
         <div className="w-full relative flex items-center justify-between">
-          {isAiWorking && (
-            <div className="absolute bg-neutral-800 rounded-lg bottom-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-center justify-between max-lg:text-sm">
+          {(isAiWorking || isUploading) && (
+            <div className="absolute bg-neutral-800 rounded-lg top-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-start pt-3.5 justify-between max-lg:text-sm">
               <div className="flex items-center justify-start gap-2">
                 <Loading overlay={false} className="!size-4" />
                 <p className="text-neutral-400 text-sm">
-                  AI is {isThinking ? "thinking" : "coding"}...{" "}
+                  {isUploading
+                    ? "Uploading images..."
+                    : `AI is ${isThinking ? "thinking" : "coding"}...`}
                 </p>
               </div>
-              <div
-                className="text-xs text-neutral-400 px-1 py-0.5 rounded-md border border-neutral-600 flex items-center justify-center gap-1.5 bg-neutral-800 hover:brightness-110 transition-all duration-200 cursor-pointer"
-                onClick={stopController}
-              >
-                <FaStopCircle />
-                Stop generation
-              </div>
+              {isAiWorking && (
+                <div
+                  className="text-xs text-neutral-400 px-1 py-0.5 rounded-md border border-neutral-600 flex items-center justify-center gap-1.5 bg-neutral-800 hover:brightness-110 transition-all duration-200 cursor-pointer"
+                  onClick={stopController}
+                >
+                  <FaStopCircle />
+                  Stop generation
+                </div>
+              )}
             </div>
           )}
-          <input
-            type="text"
+          <textarea
             disabled={isAiWorking}
             className={classNames(
-              "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4",
+              "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none",
               {
                 "!pt-2.5": selectedElement && !isAiWorking,
               }
             )}
             placeholder={
               selectedElement
-                ? `Ask KAICoder about ${selectedElement.tagName.toLowerCase()}...`
-                : hasAsked
-                ? "Ask KAICoder for edits"
-                : "Ask KAICoder anything..."
+                ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
+                : isFollowUp && (!isSameHtml || pages?.length > 1)
+                ? "Ask DeepSite for edits"
+                : "Ask DeepSite anything..."
             }
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
@@ -376,8 +329,24 @@ export function AskAI({
             }}
           />
         </div>
-        <div className="flex items-center justify-between gap-2 px-4 pb-3">
+        <div className="flex items-center justify-between gap-2 px-4 pb-3 mt-2">
           <div className="flex-1 flex items-center justify-start gap-1.5">
+            <Uploader
+              pages={pages}
+              onLoading={setIsUploading}
+              isLoading={isUploading}
+              onFiles={setFiles}
+              onSelectFile={(file) => {
+                if (selectedFiles.includes(file)) {
+                  setSelectedFiles((prev) => prev.filter((f) => f !== file));
+                } else {
+                  setSelectedFiles((prev) => [...prev, file]);
+                }
+              }}
+              files={files}
+              selectedFiles={selectedFiles}
+              project={project}
+            />
             <ReImagine onRedesign={(md) => callAi(md)} />
             {!isSameHtml && (
               <Tooltip>
@@ -406,7 +375,7 @@ export function AskAI({
                 </TooltipContent>
               </Tooltip>
             )}
-            <InviteFriends />
+            {/* <InviteFriends /> */}
           </div>
           <div className="flex items-center justify-end gap-2">
             <Settings
@@ -428,12 +397,22 @@ export function AskAI({
             </Button>
           </div>
         </div>
-        <LoginModal open={open} onClose={() => setOpen(false)} html={html} />
+        <LoginModal open={open} onClose={() => setOpen(false)} pages={pages} />
         <ProModal
-          html={html}
+          pages={pages}
           open={openProModal}
           onClose={() => setOpenProModal(false)}
         />
+        {pages.length === 1 && (
+          <div className="border border-sky-500/20 bg-sky-500/40 hover:bg-sky-600 transition-all duration-200 text-sky-500 pl-2 pr-4 py-1.5 text-xs rounded-full absolute top-0 -translate-y-[calc(100%+8px)] left-0 max-w-max flex items-center justify-start gap-2">
+            <span className="rounded-full text-[10px] font-semibold bg-white text-neutral-900 px-1.5 py-0.5">
+              NEW
+            </span>
+            <p className="text-sm text-neutral-100">
+              DeepSite can now create multiple pages at once. Try it!
+            </p>
+          </div>
+        )}
         {!isSameHtml && (
           <div className="absolute top-0 right-0 -translate-y-[calc(100%+8px)] select-none text-xs text-neutral-400 flex items-center justify-center gap-2 bg-neutral-800 border border-neutral-700 rounded-md p-1 pr-2.5">
             <label
@@ -444,7 +423,7 @@ export function AskAI({
                 id="diff-patch-checkbox"
                 checked={isFollowUp}
                 onCheckedChange={(e) => {
-                  if (e === true && !isSameHtml) {
+                  if (e === true && !isSameHtml && selectedModel?.isThinker) {
                     setModel(MODELS[0].value);
                   }
                   setIsFollowUp(e === true);
@@ -456,7 +435,7 @@ export function AskAI({
           </div>
         )}
       </div>
-      <audio ref={audio} id="audio" className="hidden">
+      <audio ref={hookAudio} id="audio" className="hidden">
         <source src="/success.mp3" type="audio/mpeg" />
         Your browser does not support the audio element.
       </audio>

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

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

components/editor/ask-ai/settings.tsx

@@ -80,16 +80,14 @@ export function Settings({
               </p>
             )}
             <label className="block">
-              <p className="text-neutral-300 text-sm mb-2.5">
-                Choose a KAICoder model
-              </p>
+              <p className="text-neutral-300 text-sm mb-2.5">Choose a model</p>
               <Select defaultValue={model} onValueChange={onModelChange}>
                 <SelectTrigger className="w-full">
-                  <SelectValue placeholder="Select a KAICoder model" />
+                  <SelectValue placeholder="Select a model" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup>
-                    <SelectLabel>KAICoder models</SelectLabel>
+                    <SelectLabel>Models</SelectLabel>
                     {MODELS.map(
                       ({
                         value,

components/editor/ask-ai/uploader.tsx

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

components/editor/deploy-button/content.tsx

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

components/editor/deploy-button/index.tsx

@@ -1,67 +1,28 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
-import { toast } from "sonner";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
 import { MdSave } from "react-icons/md";
-import { Rocket } from "lucide-react";
 
-import SpaceIcon from "@/assets/space.svg";
-import Loading from "@/components/loading";
 import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { api } from "@/lib/api";
 import { LoginModal } from "@/components/login-modal";
 import { useUser } from "@/hooks/useUser";
+import { Page } from "@/types";
+import { DeployButtonContent } from "./content";
 
 export function DeployButton({
-  html,
+  pages,
   prompts,
 }: {
-  html: string;
+  pages: Page[];
   prompts: string[];
 }) {
-  const router = useRouter();
   const { user } = useUser();
-  const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
 
-  const [config, setConfig] = useState({
-    title: "",
-  });
-
-  const createSpace = async () => {
-    if (!config.title) {
-      toast.error("Please enter a title for your space.");
-      return;
-    }
-    setLoading(true);
-
-    try {
-      const res = await api.post("/me/projects", {
-        title: config.title,
-        html,
-        prompts,
-      });
-      if (res.data.ok) {
-        router.push(`/projects/${res.data.path}?deploy=true`);
-      } else {
-        toast.error(res?.data?.error || "Failed to create space");
-      }
-    } catch (err: any) {
-      toast.error(err.response?.data?.error || err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // TODO add a way to do not allow people to deploy if the html is broken.
-
   return (
     <div className="flex items-center justify-end gap-5">
       <div className="relative flex items-center justify-end">
@@ -71,10 +32,10 @@ export function DeployButton({
               <div>
                 <Button variant="default" className="max-lg:hidden !px-4">
                   <MdSave className="size-4" />
-                  Save your Project
+                  Publish your Project
                 </Button>
                 <Button variant="default" size="sm" className="lg:hidden">
-                  Deploy
+                  Publish
                 </Button>
               </div>
             </PopoverTrigger>
@@ -82,62 +43,7 @@ export function DeployButton({
               className="!rounded-2xl !p-0 !bg-white !border-neutral-200 min-w-xs text-center overflow-hidden"
               align="end"
             >
-              <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
-                <div className="flex items-center justify-center -space-x-4 mb-3">
-                  <div className="size-9 rounded-full bg-amber-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                    🚀
-                  </div>
-                  <div className="size-11 rounded-full bg-red-200 shadow-2xl flex items-center justify-center z-2">
-                    <Image
-                      src={SpaceIcon}
-                      alt="Space Icon"
-                      className="size-7"
-                    />
-                  </div>
-                  <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                    👻
-                  </div>
-                </div>
-                <p className="text-xl font-semibold text-neutral-950">
-                  Deploy as Space!
-                </p>
-                <p className="text-sm text-neutral-500 mt-1.5">
-                  Save and Deploy your project to a Space on the Hub. Spaces are
-                  a way to share your project with the world.
-                </p>
-              </header>
-              <main className="space-y-4 p-6">
-                <div>
-                  <p className="text-sm text-neutral-700 mb-2">
-                    Choose a title for your space:
-                  </p>
-                  <Input
-                    type="text"
-                    placeholder="My Awesome Website"
-                    value={config.title}
-                    onChange={(e) =>
-                      setConfig({ ...config, title: e.target.value })
-                    }
-                    className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
-                  />
-                </div>
-                <div>
-                  <p className="text-sm text-neutral-700 mb-2">
-                    Then, let&apos;s deploy it!
-                  </p>
-                  <Button
-                    variant="black"
-                    onClick={createSpace}
-                    className="relative w-full"
-                    disabled={loading}
-                  >
-                    Deploy Space <Rocket className="size-4" />
-                    {loading && (
-                      <Loading className="ml-2 size-4 animate-spin" />
-                    )}
-                  </Button>
-                </div>
-              </main>
+              <DeployButtonContent pages={pages} prompts={prompts} />
             </PopoverContent>
           </Popover>
         ) : (
@@ -148,7 +54,7 @@ export function DeployButton({
               onClick={() => setOpen(true)}
             >
               <MdSave className="size-4" />
-              Save your Project
+              Publish your Project
             </Button>
             <Button
               variant="default"
@@ -156,16 +62,16 @@ export function DeployButton({
               className="lg:hidden"
               onClick={() => setOpen(true)}
             >
-              Save
+              Publish
             </Button>
           </>
         )}
         <LoginModal
           open={open}
           onClose={() => setOpen(false)}
-          html={html}
-          title="Log In to save your Project"
-          description="Log In through your Hugging Face account to save your project and increase your monthly free limit."
+          pages={pages}
+          title="Log In to publish your Project"
+          description="Log In through your Hugging Face account to publish your project and increase your monthly free limit."
         />
       </div>
     </div>

components/editor/footer/index.tsx

@@ -2,12 +2,13 @@ import classNames from "classnames";
 import { FaMobileAlt } from "react-icons/fa";
 import { RefreshCcw } from "lucide-react";
 import { FaLaptopCode } from "react-icons/fa6";
-import { HtmlHistory } from "@/types";
+import { HtmlHistory, Page } from "@/types";
 import { Button } from "@/components/ui/button";
 import { MdAdd } from "react-icons/md";
 import { History } from "@/components/editor/history";
 import { UserMenu } from "@/components/user-menu";
 import { useUser } from "@/hooks/useUser";
+import Link from "next/link";
 
 const DEVICES = [
   {
@@ -21,17 +22,15 @@ const DEVICES = [
 ];
 
 export function Footer({
-  onReset,
   htmlHistory,
-  setHtml,
+  setPages,
   device,
   setDevice,
   iframeRef,
 }: {
-  onReset: () => void;
   htmlHistory?: HtmlHistory[];
   device: "desktop" | "mobile";
-  setHtml: (html: string) => void;
+  setPages: (pages: Page[]) => void;
   iframeRef?: React.RefObject<HTMLIFrameElement | null>;
   setDevice: React.Dispatch<React.SetStateAction<"desktop" | "mobile">>;
 }) {
@@ -62,14 +61,16 @@ export function Footer({
             <UserMenu className="!p-1 !pr-3 !h-auto" />
           ))}
         {user && <p className="text-neutral-700">|</p>}
-        <Button size="sm" variant="secondary" onClick={onReset}>
-          <MdAdd className="text-sm" />
-          New <span className="max-lg:hidden">Project</span>
-        </Button>
+        <Link href="/projects/new">
+          <Button size="sm" variant="secondary">
+            <MdAdd className="text-sm" />
+            New <span className="max-lg:hidden">Project</span>
+          </Button>
+        </Link>
         {htmlHistory && htmlHistory.length > 0 && (
           <>
             <p className="text-neutral-700">|</p>
-            <History history={htmlHistory} setHtml={setHtml} />
+            <History history={htmlHistory} setPages={setPages} />
           </>
         )}
       </div>

components/editor/history/index.tsx

@@ -1,5 +1,5 @@
 import { History as HistoryIcon } from "lucide-react";
-import { HtmlHistory } from "@/types";
+import { HtmlHistory, Page } from "@/types";
 import {
   Popover,
   PopoverContent,
@@ -9,10 +9,10 @@ import { Button } from "@/components/ui/button";
 
 export function History({
   history,
-  setHtml,
+  setPages,
 }: {
   history: HtmlHistory[];
-  setHtml: (html: string) => void;
+  setPages: (pages: Page[]) => void;
 }) {
   return (
     <Popover>
@@ -57,7 +57,8 @@ export function History({
                   variant="sky"
                   size="xs"
                   onClick={() => {
-                    setHtml(item.html);
+                    console.log(item);
+                    setPages(item.pages);
                   }}
                 >
                   Select

components/editor/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { editor } from "monaco-editor";
 import Editor from "@monaco-editor/react";
@@ -21,15 +21,29 @@ import { defaultHTML } from "@/lib/consts";
 import { Preview } from "@/components/editor/preview";
 import { useEditor } from "@/hooks/useEditor";
 import { AskAI } from "@/components/editor/ask-ai";
-import { Project } from "@/types";
+import { DeployButton } from "./deploy-button";
+import { Page, Project } from "@/types";
+import { SaveButton } from "./save-button";
+import { LoadProject } from "../my-projects/load-project";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
+import { ListPages } from "./pages";
 
-export const AppEditor = ({ project }: { project?: Project | null }) => {
-  const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
+export const AppEditor = ({
+  project,
+  pages: initialPages,
+  images,
+  isNew,
+}: {
+  project?: Project | null;
+  pages?: Page[];
+  images?: string[];
+  isNew?: boolean;
+}) => {
+  const [htmlStorage, , removeHtmlStorage] = useLocalStorage("pages");
   const [, copyToClipboard] = useCopyToClipboard();
-  const { html, setHtml, htmlHistory, setHtmlHistory, setPrompts } =
-    useEditor(project?.html ?? (htmlStorage as string) ?? defaultHTML);
-  // get query params from URL
+  const { htmlHistory, setHtmlHistory, prompts, setPrompts, pages, setPages } =
+    useEditor(initialPages);
+
   const searchParams = useSearchParams();
   const router = useRouter();
   const deploy = searchParams.get("deploy") === "true";
@@ -43,6 +57,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
   const monacoRef = useRef<any>(null);
 
   const [currentTab, setCurrentTab] = useState("chat");
+  const [currentPage, setCurrentPage] = useState("index.html");
   const [device, setDevice] = useState<"desktop" | "mobile">("desktop");
   const [isResizing, setIsResizing] = useState(false);
   const [isAiWorking, setIsAiWorking] = useState(false);
@@ -50,12 +65,8 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
   const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
     null
   );
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
 
-  /**
-   * Resets the layout based on screen size
-   * - For desktop: Sets editor to 1/3 width and preview to 2/3
-   * - For mobile: Removes inline styles to let CSS handle it
-   */
   const resetLayout = () => {
     if (!editor.current || !preview.current) return;
 
@@ -75,10 +86,6 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
     }
   };
 
-  /**
-   * Handles resizing when the user drags the resizer
-   * Ensures minimum widths are maintained for both panels
-   */
   const handleResize = (e: MouseEvent) => {
     if (!editor.current || !preview.current || !resizer.current) return;
 
@@ -146,7 +153,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
 
   // Prevent accidental navigation away when AI is working or content has changed
   useEvent("beforeunload", (e) => {
-    if (isAiWorking || !isTheSameHtml(html)) {
+    if (isAiWorking || !isTheSameHtml(currentPageData?.html)) {
       e.preventDefault();
       return "";
     }
@@ -172,9 +179,29 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
     console.log("Editor validation markers:", markers);
   };
 
+  const currentPageData = useMemo(() => {
+    return (
+      pages.find((page) => page.path === currentPage) ?? {
+        path: "index.html",
+        html: defaultHTML,
+      }
+    );
+  }, [pages, currentPage]);
+
   return (
     <section className="h-[100dvh] bg-neutral-950 flex flex-col">
       <Header tab={currentTab} onNewTab={setCurrentTab}>
+        <LoadProject
+          onSuccess={(project: Project) => {
+            router.push(`/projects/${project.space_id}`);
+          }}
+        />
+        {/* for these buttons pass the whole pages */}
+        {project?._id ? (
+          <SaveButton pages={pages} prompts={prompts} />
+        ) : (
+          <DeployButton pages={pages} prompts={prompts} />
+        )}
       </Header>
       <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full max-lg:h-[calc(100%-82px)] relative">
         {currentTab === "chat" && (
@@ -183,10 +210,43 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
               ref={editor}
               className="bg-neutral-900 relative flex-1 overflow-hidden h-full flex flex-col gap-2 pb-3"
             >
+              <ListPages
+                pages={pages}
+                currentPage={currentPage}
+                onSelectPage={(path, newPath) => {
+                  if (newPath) {
+                    setPages((prev) =>
+                      prev.map((page) =>
+                        page.path === path ? { ...page, path: newPath } : page
+                      )
+                    );
+                    setCurrentPage(newPath);
+                  } else {
+                    setCurrentPage(path);
+                  }
+                }}
+                onDeletePage={(path) => {
+                  const newPages = pages.filter((page) => page.path !== path);
+                  setPages(newPages);
+                  if (currentPage === path) {
+                    setCurrentPage(newPages[0]?.path ?? "index.html");
+                  }
+                }}
+                onNewPage={() => {
+                  setPages((prev) => [
+                    ...prev,
+                    {
+                      path: `page-${prev.length + 1}.html`,
+                      html: defaultHTML,
+                    },
+                  ]);
+                  setCurrentPage(`page-${pages.length + 1}.html`);
+                }}
+              />
               <CopyIcon
-                className="size-4 absolute top-2 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
+                className="size-4 absolute top-14 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
                 onClick={() => {
-                  copyToClipboard(html);
+                  copyToClipboard(currentPageData.html);
                   toast.success("HTML copied to clipboard!");
                 }}
               />
@@ -209,10 +269,17 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                   },
                   wordWrap: "on",
                 }}
-                value={html}
+                value={currentPageData.html}
                 onChange={(value) => {
                   const newValue = value ?? "";
-                  setHtml(newValue);
+                  // setHtml(newValue);
+                  setPages((prev) =>
+                    prev.map((page) =>
+                      page.path === currentPageData.path
+                        ? { ...page, html: newValue }
+                        : page
+                    )
+                  );
                 }}
                 onMount={(editor, monaco) => {
                   editorRef.current = editor;
@@ -221,49 +288,49 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                 onValidate={handleEditorValidation}
               />
               <AskAI
-                html={html}
-                setHtml={(newHtml: string) => {
-                  setHtml(newHtml);
-                }}
+                project={project}
+                images={images}
+                currentPage={currentPageData}
                 htmlHistory={htmlHistory}
-                onSuccess={(
-                  finalHtml: string,
-                  p: string,
-                  updatedLines?: number[][]
-                ) => {
+                previousPrompts={project?.prompts ?? []}
+                onSuccess={(newPages, p: string) => {
                   const currentHistory = [...htmlHistory];
                   currentHistory.unshift({
-                    html: finalHtml,
+                    pages: newPages,
                     createdAt: new Date(),
                     prompt: p,
                   });
                   setHtmlHistory(currentHistory);
                   setSelectedElement(null);
+                  setSelectedFiles([]);
                   // if xs or sm
                   if (window.innerWidth <= 1024) {
                     setCurrentTab("preview");
                   }
-                  if (updatedLines && updatedLines?.length > 0) {
-                    const decorations = updatedLines.map((line) => ({
-                      range: new monacoRef.current.Range(
-                        line[0],
-                        1,
-                        line[1],
-                        1
-                      ),
-                      options: {
-                        inlineClassName: "matched-line",
-                      },
-                    }));
-                    setTimeout(() => {
-                      editorRef?.current
-                        ?.getModel()
-                        ?.deltaDecorations([], decorations);
+                  // if (updatedLines && updatedLines?.length > 0) {
+                  //   const decorations = updatedLines.map((line) => ({
+                  //     range: new monacoRef.current.Range(
+                  //       line[0],
+                  //       1,
+                  //       line[1],
+                  //       1
+                  //     ),
+                  //     options: {
+                  //       inlineClassName: "matched-line",
+                  //     },
+                  //   }));
+                  //   setTimeout(() => {
+                  //     editorRef?.current
+                  //       ?.getModel()
+                  //       ?.deltaDecorations([], decorations);
 
-                      editorRef.current?.revealLine(updatedLines[0][0]);
-                    }, 100);
-                  }
+                  //     editorRef.current?.revealLine(updatedLines[0][0]);
+                  //   }, 100);
+                  // }
                 }}
+                setPages={setPages}
+                pages={pages}
+                setCurrentPage={setCurrentPage}
                 isAiWorking={isAiWorking}
                 setisAiWorking={setIsAiWorking}
                 onNewPrompt={(prompt: string) => {
@@ -274,10 +341,13 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                     editorRef.current?.getModel()?.getLineCount() ?? 0
                   );
                 }}
+                isNew={isNew}
                 isEditableModeEnabled={isEditableModeEnabled}
                 setIsEditableModeEnabled={setIsEditableModeEnabled}
                 selectedElement={selectedElement}
                 setSelectedElement={setSelectedElement}
+                setSelectedFiles={setSelectedFiles}
+                selectedFiles={selectedFiles}
               />
             </div>
             <div
@@ -287,11 +357,13 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
           </>
         )}
         <Preview
-          html={html}
+          html={currentPageData?.html}
           isResizing={isResizing}
           isAiWorking={isAiWorking}
           ref={preview}
           device={device}
+          pages={pages}
+          setCurrentPage={setCurrentPage}
           currentTab={currentTab}
           isEditableModeEnabled={isEditableModeEnabled}
           iframeRef={iframeRef}
@@ -303,23 +375,8 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
         />
       </main>
       <Footer
-        onReset={() => {
-          if (isAiWorking) {
-            toast.warning("Please wait for the AI to finish working.");
-            return;
-          }
-          if (
-            window.confirm("You're about to reset the editor. Are you sure?")
-          ) {
-            setHtml(defaultHTML);
-            removeHtmlStorage();
-            editorRef.current?.revealLine(
-              editorRef.current?.getModel()?.getLineCount() ?? 0
-            );
-          }
-        }}
         htmlHistory={htmlHistory}
-        setHtml={setHtml}
+        setPages={setPages}
         iframeRef={iframeRef}
         device={device}
         setDevice={setDevice}

components/editor/pages/index.tsx

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

components/editor/pages/page.tsx

@@ -0,0 +1,82 @@
+import classNames from "classnames";
+import { XIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Page } from "@/types";
+
+export function ListPagesItem({
+  page,
+  currentPage,
+  onSelectPage,
+  onDeletePage,
+  index,
+}: {
+  page: Page;
+  currentPage: string;
+  onSelectPage: (path: string, newPath?: string) => void;
+  onDeletePage: (path: string) => void;
+  index: number;
+}) {
+  return (
+    <div
+      key={index}
+      className={classNames(
+        "pl-6 pr-1 py-3 text-neutral-400 cursor-pointer text-sm hover:bg-neutral-900 flex items-center justify-center gap-1 group text-nowrap border-r border-neutral-800",
+        {
+          "bg-neutral-900 !text-white": currentPage === page.path,
+          "!pr-6": index === 0, // Ensure the first item has padding on the right
+        }
+      )}
+      onClick={() => onSelectPage(page.path)}
+      title={page.path}
+    >
+      {/* {index > 0 && (
+        <Button
+          size="iconXsss"
+          variant="ghost"
+          onClick={(e) => {
+            e.stopPropagation();
+            // open the window modal to edit the name page
+            let newName = window.prompt(
+              "Enter new name for the page:",
+              page.path
+            );
+            if (newName && newName.trim() !== "") {
+              newName = newName.toLowerCase();
+              if (!newName.endsWith(".html")) {
+                newName = newName.replace(/\.[^/.]+$/, "");
+                newName = newName.replace(/\s+/g, "-");
+                newName += ".html";
+              }
+              onSelectPage(page.path, newName);
+            } else {
+              window.alert("Page name cannot be empty.");
+            }
+          }}
+        >
+          <EditIcon className="!h-3.5 text-neutral-400 cursor-pointer hover:text-neutral-300" />
+        </Button>
+      )} */}
+      {page.path}
+      {index > 0 && (
+        <Button
+          size="iconXsss"
+          variant="ghost"
+          className="group-hover:opacity-100 opacity-0"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (
+              window.confirm(
+                "Are you sure you want to delete this page? This action cannot be undone."
+              )
+            ) {
+              onDeletePage(page.path);
+            }
+          }}
+        >
+          <XIcon className="h-3 text-neutral-400 cursor-pointer hover:text-neutral-300" />
+        </Button>
+      )}
+    </div>
+  );
+}

components/editor/preview/index.tsx

@@ -3,10 +3,12 @@ import { useUpdateEffect } from "react-use";
 import { useMemo, useState } from "react";
 import classNames from "classnames";
 import { toast } from "sonner";
+import { useThrottleFn } from "react-use";
 
 import { cn } from "@/lib/utils";
 import { GridPattern } from "@/components/magic-ui/grid-pattern";
 import { htmlTagToText } from "@/lib/html-tag-to-text";
+import { Page } from "@/types";
 
 export const Preview = ({
   html,
@@ -16,12 +18,16 @@ export const Preview = ({
   device,
   currentTab,
   iframeRef,
+  pages,
+  setCurrentPage,
   isEditableModeEnabled,
   onClickElement,
 }: {
   html: string;
   isResizing: boolean;
   isAiWorking: boolean;
+  pages: Page[];
+  setCurrentPage: React.Dispatch<React.SetStateAction<string>>;
   ref: React.RefObject<HTMLDivElement | null>;
   iframeRef?: React.RefObject<HTMLIFrameElement | null>;
   device: "desktop" | "mobile";
@@ -33,7 +39,6 @@ export const Preview = ({
     null
   );
 
-  // add event listener to the iframe to track hovered elements
   const handleMouseOver = (event: MouseEvent) => {
     if (iframeRef?.current) {
       const iframeDocument = iframeRef.current.contentDocument;
@@ -65,6 +70,48 @@ export const Preview = ({
       }
     }
   };
+  const handleCustomNavigation = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const findClosestAnchor = (
+          element: HTMLElement
+        ): HTMLAnchorElement | null => {
+          let current = element;
+          while (current && current !== iframeDocument.body) {
+            if (current.tagName === "A") {
+              return current as HTMLAnchorElement;
+            }
+            current = current.parentElement as HTMLElement;
+          }
+          return null;
+        };
+
+        const anchorElement = findClosestAnchor(event.target as HTMLElement);
+        if (anchorElement) {
+          let href = anchorElement.getAttribute("href");
+          if (href) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            if (href.includes("#") && !href.includes(".html")) {
+              const targetElement = iframeDocument.querySelector(href);
+              if (targetElement) {
+                targetElement.scrollIntoView({ behavior: "smooth" });
+              }
+              return;
+            }
+
+            href = href.split(".html")[0] + ".html";
+            const isPageExist = pages.some((page) => page.path === href);
+            if (isPageExist) {
+              setCurrentPage(href);
+            }
+          }
+        }
+      }
+    }
+  };
 
   useUpdateEffect(() => {
     const cleanupListeners = () => {
@@ -79,7 +126,6 @@ export const Preview = ({
     if (iframeRef?.current) {
       const iframeDocument = iframeRef.current.contentDocument;
       if (iframeDocument) {
-        // Clean up existing listeners first
         cleanupListeners();
 
         if (isEditableModeEnabled) {
@@ -90,7 +136,6 @@ export const Preview = ({
       }
     }
 
-    // Clean up when component unmounts or dependencies change
     return cleanupListeners;
   }, [iframeRef, isEditableModeEnabled]);
 
@@ -100,6 +145,8 @@ export const Preview = ({
     return hoveredElement;
   }, [hoveredElement, isEditableModeEnabled]);
 
+  const throttledHtml = useThrottleFn((html) => html, 1000, [html]);
+
   return (
     <div
       ref={ref}
@@ -160,7 +207,7 @@ export const Preview = ({
               currentTab !== "preview" && device === "desktop",
           }
         )}
-        srcDoc={html}
+        srcDoc={isAiWorking ? (throttledHtml as string) : html}
         onLoad={() => {
           if (iframeRef?.current?.contentWindow?.document?.body) {
             iframeRef.current.contentWindow.document.body.scrollIntoView({
@@ -169,6 +216,14 @@ export const Preview = ({
               behavior: isAiWorking ? "instant" : "smooth",
             });
           }
+          // add event listener to all links in the iframe to handle navigation
+          if (iframeRef?.current?.contentWindow?.document) {
+            const links =
+              iframeRef.current.contentWindow.document.querySelectorAll("a");
+            links.forEach((link) => {
+              link.addEventListener("click", handleCustomNavigation);
+            });
+          }
         }}
       />
     </div>

components/editor/save-button/index.tsx

@@ -7,12 +7,13 @@ import { useParams } from "next/navigation";
 import Loading from "@/components/loading";
 import { Button } from "@/components/ui/button";
 import { api } from "@/lib/api";
+import { Page } from "@/types";
 
 export function SaveButton({
-  html,
+  pages,
   prompts,
 }: {
-  html: string;
+  pages: Page[];
   prompts: string[];
 }) {
   // get params from URL
@@ -27,7 +28,7 @@ export function SaveButton({
 
     try {
       const res = await api.put(`/me/projects/${namespace}/${repoId}`, {
-        html,
+        pages,
         prompts,
       });
       if (res.data.ok) {
@@ -51,7 +52,6 @@ export function SaveButton({
       setLoading(false);
     }
   };
-
   return (
     <>
       <Button
@@ -60,7 +60,7 @@ export function SaveButton({
         onClick={updateSpace}
       >
         <MdSave className="size-4" />
-        Save your Project{" "}
+        Publish your Project{" "}
         {loading && <Loading className="ml-2 size-4 animate-spin" />}
       </Button>
       <Button
@@ -69,7 +69,7 @@ export function SaveButton({
         className="lg:hidden relative"
         onClick={updateSpace}
       >
-        Save {loading && <Loading className="ml-2 size-4 animate-spin" />}
+        Publish {loading && <Loading className="ml-2 size-4 animate-spin" />}
       </Button>
     </>
   );

components/iframe-detector.tsx

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

components/iframe-warning-modal.tsx

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

components/login-modal/index.tsx

@@ -3,25 +3,26 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { useUser } from "@/hooks/useUser";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
+import { Page } from "@/types";
 
 export const LoginModal = ({
   open,
-  html,
+  pages,
   onClose,
   title = "Log In to use DeepSite for free",
   description = "Log In through your Hugging Face account to continue using DeepSite and increase your monthly free limit.",
 }: {
   open: boolean;
-  html?: string;
+  pages?: Page[];
   onClose: React.Dispatch<React.SetStateAction<boolean>>;
   title?: string;
   description?: string;
 }) => {
   const { openLoginWindow } = useUser();
-  const [, setStorage] = useLocalStorage("html_content");
+  const [, setStorage] = useLocalStorage("pages");
   const handleClick = async () => {
-    if (html && !isTheSameHtml(html)) {
-      setStorage(html);
+    if (pages && !isTheSameHtml(pages[0].html)) {
+      setStorage(pages);
     }
     openLoginWindow();
     onClose(false);

components/pro-modal/index.tsx

@@ -3,20 +3,21 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { CheckCheck } from "lucide-react";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
+import { Page } from "@/types";
 
 export const ProModal = ({
   open,
-  html,
+  pages,
   onClose,
 }: {
   open: boolean;
-  html: string;
+  pages: Page[];
   onClose: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const [, setStorage] = useLocalStorage("html_content");
+  const [, setStorage] = useLocalStorage("pages");
   const handleProClick = () => {
-    if (!isTheSameHtml(html)) {
-      setStorage(html);
+    if (pages && !isTheSameHtml(pages?.[0].html)) {
+      setStorage(pages);
     }
     window.open("https://huggingface.co/subscribe/pro?from=DeepSite", "_blank");
     onClose(false);

components/ui/button.tsx

@@ -33,6 +33,7 @@ const buttonVariants = cva(
         icon: "size-9",
         iconXs: "size-7",
         iconXss: "size-6",
+        iconXsss: "size-5",
         xs: "h-6 text-xs rounded-full pl-2 pr-2 gap-1",
       },
     },

hooks/useCallAi.ts

@@ -0,0 +1,461 @@
+import { useState, useRef } from "react";
+import { toast } from "sonner";
+import { MODELS } from "@/lib/providers";
+import { Page } from "@/types";
+
+interface UseCallAiProps {
+  onNewPrompt: (prompt: string) => void;
+  onSuccess: (page: Page[], p: string, n?: number[][]) => void;
+  onScrollToBottom: () => void;
+  setPages: React.Dispatch<React.SetStateAction<Page[]>>;
+  setCurrentPage: React.Dispatch<React.SetStateAction<string>>;
+  currentPage: Page;
+  pages: Page[];
+  isAiWorking: boolean;
+  setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const useCallAi = ({
+  onNewPrompt,
+  onSuccess,
+  onScrollToBottom,
+  setPages,
+  setCurrentPage,
+  pages,
+  isAiWorking,
+  setisAiWorking,
+}: UseCallAiProps) => {
+  const audio = useRef<HTMLAudioElement | null>(null);
+  const [controller, setController] = useState<AbortController | null>(null);
+
+  const callAiNewProject = async (prompt: string, model: string | undefined, provider: string | undefined, redesignMarkdown?: string, handleThink?: (think: string) => void, onFinishThink?: () => void) => {
+    if (isAiWorking) return;
+    if (!redesignMarkdown && !prompt.trim()) return;
+    
+    setisAiWorking(true);
+    
+    const abortController = new AbortController();
+    setController(abortController);
+    
+    try {
+      onNewPrompt(prompt);
+      
+      const request = await fetch("/api/ask-ai", {
+        method: "POST",
+        body: JSON.stringify({
+          prompt,
+          provider,
+          model,
+          redesignMarkdown,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+          "x-forwarded-for": window.location.hostname,
+        },
+        signal: abortController.signal,
+      });
+
+      if (request && request.body) {
+        const reader = request.body.getReader();
+        const decoder = new TextDecoder("utf-8");
+        const selectedModel = MODELS.find(
+          (m: { value: string }) => m.value === model
+        );
+        let contentResponse = "";
+
+        const read = async () => {
+          const { done, value } = await reader.read();
+          if (done) {
+            const isJson =
+              contentResponse.trim().startsWith("{") &&
+              contentResponse.trim().endsWith("}");
+            const jsonResponse = isJson ? JSON.parse(contentResponse) : null;
+            
+            if (jsonResponse && !jsonResponse.ok) {
+              if (jsonResponse.openLogin) {
+                // Handle login required
+                return { error: "login_required" };
+              } else if (jsonResponse.openSelectProvider) {
+                // Handle provider selection required
+                return { error: "provider_required", message: jsonResponse.message };
+              } else if (jsonResponse.openProModal) {
+                // Handle pro modal required
+                return { error: "pro_required" };
+              } else {
+                toast.error(jsonResponse.message);
+                setisAiWorking(false);
+                return { error: "api_error", message: jsonResponse.message };
+              }
+            }
+
+            toast.success("AI responded successfully");
+            setisAiWorking(false);
+            
+            if (audio.current) audio.current.play();
+
+            const newPages = formatPages(contentResponse);
+            onSuccess(newPages, prompt);
+
+            return { success: true, pages: newPages };
+          }
+
+          const chunk = decoder.decode(value, { stream: true });
+          contentResponse += chunk;
+          
+          if (selectedModel?.isThinker) {
+            const thinkMatch = contentResponse.match(/<think>[\s\S]*/)?.[0];
+            if (thinkMatch && !contentResponse?.includes("</think>")) {
+              handleThink?.(thinkMatch.replace("<think>", "").trim());
+              return read();
+            }
+          }
+
+          if (contentResponse.includes("</think>")) {
+            onFinishThink?.();
+          }
+
+          formatPages(contentResponse);
+          return read();
+        };
+
+        return await read();
+      }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      setisAiWorking(false);
+      toast.error(error.message);
+      if (error.openLogin) {
+        return { error: "login_required" };
+      }
+      return { error: "network_error", message: error.message };
+    }
+  };
+
+  const callAiNewPage = async (prompt: string, model: string | undefined, provider: string | undefined, currentPagePath: string, previousPrompts?: string[]) => {
+    if (isAiWorking) return;
+    if (!prompt.trim()) return;
+    
+    setisAiWorking(true);
+    
+    const abortController = new AbortController();
+    setController(abortController);
+    
+    try {
+      onNewPrompt(prompt);
+      
+      const request = await fetch("/api/ask-ai", {
+        method: "POST",
+        body: JSON.stringify({
+          prompt,
+          provider,
+          model,
+          pages,
+          previousPrompts,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+          "x-forwarded-for": window.location.hostname,
+        },
+        signal: abortController.signal,
+      });
+
+      if (request && request.body) {
+        const reader = request.body.getReader();
+        const decoder = new TextDecoder("utf-8");
+        const selectedModel = MODELS.find(
+          (m: { value: string }) => m.value === model
+        );
+        let contentResponse = "";
+
+        const read = async () => {
+          const { done, value } = await reader.read();
+          if (done) {
+            const isJson =
+              contentResponse.trim().startsWith("{") &&
+              contentResponse.trim().endsWith("}");
+            const jsonResponse = isJson ? JSON.parse(contentResponse) : null;
+            
+            if (jsonResponse && !jsonResponse.ok) {
+              if (jsonResponse.openLogin) {
+                // Handle login required
+                return { error: "login_required" };
+              } else if (jsonResponse.openSelectProvider) {
+                // Handle provider selection required
+                return { error: "provider_required", message: jsonResponse.message };
+              } else if (jsonResponse.openProModal) {
+                // Handle pro modal required
+                return { error: "pro_required" };
+              } else {
+                toast.error(jsonResponse.message);
+                setisAiWorking(false);
+                return { error: "api_error", message: jsonResponse.message };
+              }
+            }
+
+            toast.success("AI responded successfully");
+            setisAiWorking(false);
+            
+            if (selectedModel?.isThinker) {
+              // Reset to default model if using thinker model
+              // Note: You might want to add a callback for this
+            }
+            
+            if (audio.current) audio.current.play();
+
+            const newPage = formatPage(contentResponse, currentPagePath);
+            if (!newPage) { return { error: "api_error", message: "Failed to format page" } }
+            onSuccess([...pages, newPage], prompt);
+
+            return { success: true, pages: [...pages, newPage] };
+          }
+
+          const chunk = decoder.decode(value, { stream: true });
+          contentResponse += chunk;
+          
+          if (selectedModel?.isThinker) {
+            const thinkMatch = contentResponse.match(/<think>[\s\S]*/)?.[0];
+            if (thinkMatch && !contentResponse?.includes("</think>")) {
+              // contentThink += chunk;
+              return read();
+            }
+          }
+
+          formatPage(contentResponse, currentPagePath);
+          return read();
+        };
+
+        return await read();
+      }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      setisAiWorking(false);
+      toast.error(error.message);
+      if (error.openLogin) {
+        return { error: "login_required" };
+      }
+      return { error: "network_error", message: error.message };
+    }
+  };
+
+  const callAiFollowUp = async (prompt: string, model: string | undefined, provider: string | undefined, previousPrompt: string, selectedElementHtml?: string, files?: string[]) => {
+    if (isAiWorking) return;
+    if (!prompt.trim()) return;
+    
+    setisAiWorking(true);
+    
+    const abortController = new AbortController();
+    setController(abortController);
+    
+    try {
+      onNewPrompt(prompt);
+      
+      const request = await fetch("/api/ask-ai", {
+        method: "PUT",
+        body: JSON.stringify({
+          prompt,
+          provider,
+          previousPrompt,
+          model,
+          pages,
+          selectedElementHtml,
+          files,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+          "x-forwarded-for": window.location.hostname,
+        },
+        signal: abortController.signal,
+      });
+
+      if (request && request.body) {
+        const res = await request.json();
+        
+        if (!request.ok) {
+          if (res.openLogin) {
+            setisAiWorking(false);
+            return { error: "login_required" };
+          } else if (res.openSelectProvider) {
+            setisAiWorking(false);
+            return { error: "provider_required", message: res.message };
+          } else if (res.openProModal) {
+            setisAiWorking(false);
+            return { error: "pro_required" };
+          } else {
+            toast.error(res.message);
+            setisAiWorking(false);
+            return { error: "api_error", message: res.message };
+          }
+        }
+
+        toast.success("AI responded successfully");
+        setisAiWorking(false);
+
+        setPages(res.pages);
+        onSuccess(res.pages, prompt, res.updatedLines);
+        
+        if (audio.current) audio.current.play();
+
+        return { success: true, html: res.html, updatedLines: res.updatedLines };
+      }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      setisAiWorking(false);
+      toast.error(error.message);
+      if (error.openLogin) {
+        return { error: "login_required" };
+      }
+      return { error: "network_error", message: error.message };
+    }
+  };
+
+  // Stop the current AI generation
+  const stopController = () => {
+    if (controller) {
+      controller.abort();
+      setController(null);
+      setisAiWorking(false);
+    }
+  };
+
+  const formatPages = (content: string) => {
+    const pages: Page[] = [];
+    if (!content.match(/<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/)) {
+      return pages;
+    }
+
+    const cleanedContent = content.replace(
+      /[\s\S]*?<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/,
+      "<<<<<<< START_TITLE $1 >>>>>>> END_TITLE"
+    );
+    const htmlChunks = cleanedContent.split(
+      /<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/
+    );
+    const processedChunks = new Set<number>();
+
+    htmlChunks.forEach((chunk, index) => {
+      if (processedChunks.has(index) || !chunk?.trim()) {
+        return;
+      }
+      const htmlContent = extractHtmlContent(htmlChunks[index + 1]);
+
+      if (htmlContent) {
+        const page: Page = {
+          path: chunk.trim(),
+          html: htmlContent,
+        };
+        pages.push(page);
+
+        if (htmlContent.length > 200) {
+          onScrollToBottom();
+        }
+
+        processedChunks.add(index);
+        processedChunks.add(index + 1);
+      }
+    });
+    if (pages.length > 0) {
+      setPages(pages);
+      const lastPagePath = pages[pages.length - 1]?.path;
+      setCurrentPage(lastPagePath || "index.html");
+    }
+
+    return pages;
+  };
+
+  const formatPage = (content: string, currentPagePath: string) => {
+    if (!content.match(/<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/)) {
+      return null;
+    }
+
+    const cleanedContent = content.replace(
+      /[\s\S]*?<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/,
+      "<<<<<<< START_TITLE $1 >>>>>>> END_TITLE"
+    );
+
+    const htmlChunks = cleanedContent.split(
+      /<<<<<<< START_TITLE (.*?) >>>>>>> END_TITLE/
+    )?.filter(Boolean);
+
+    const pagePath = htmlChunks[0]?.trim() || "";
+    const htmlContent = extractHtmlContent(htmlChunks[1]);
+
+    if (!pagePath || !htmlContent) {
+      return null;
+    }
+
+    const page: Page = {
+      path: pagePath,
+      html: htmlContent,
+    };
+
+    setPages(prevPages => {
+      const existingPageIndex = prevPages.findIndex(p => p.path === currentPagePath || p.path === pagePath);
+      
+      if (existingPageIndex !== -1) {
+        const updatedPages = [...prevPages];
+        updatedPages[existingPageIndex] = page;
+        return updatedPages;
+      } else {
+        return [...prevPages, page];
+      }
+    });
+
+    setCurrentPage(pagePath);
+
+    if (htmlContent.length > 200) {
+      onScrollToBottom();
+    }
+
+    return page;
+  };
+
+  // Helper function to extract and clean HTML content
+  const extractHtmlContent = (chunk: string): string => {
+    if (!chunk) return "";
+
+    // Extract HTML content
+    const htmlMatch = chunk.trim().match(/<!DOCTYPE html>[\s\S]*/);
+    if (!htmlMatch) return "";
+
+    let htmlContent = htmlMatch[0];
+
+    // Ensure proper HTML structure
+    htmlContent = ensureCompleteHtml(htmlContent);
+
+    // Remove markdown code blocks if present
+    htmlContent = htmlContent.replace(/```/g, "");
+
+    return htmlContent;
+  };
+
+  // Helper function to ensure HTML has complete structure
+  const ensureCompleteHtml = (html: string): string => {
+    let completeHtml = html;
+
+    // Add missing head closing tag
+    if (completeHtml.includes("<head>") && !completeHtml.includes("</head>")) {
+      completeHtml += "\n</head>";
+    }
+
+    // Add missing body closing tag
+    if (completeHtml.includes("<body") && !completeHtml.includes("</body>")) {
+      completeHtml += "\n</body>";
+    }
+
+    // Add missing html closing tag
+    if (!completeHtml.includes("</html>")) {
+      completeHtml += "\n</html>";
+    }
+
+    return completeHtml;
+  };
+
+  return {
+    callAiNewProject,
+    callAiFollowUp,
+    callAiNewPage,
+    stopController,
+    controller,
+    audio,
+  };
+};

hooks/useEditor.ts

@@ -1,12 +1,18 @@
-import { HtmlHistory } from "@/types";
+import { defaultHTML } from "@/lib/consts";
+import { HtmlHistory, Page } from "@/types";
 import { useState } from "react";
 
-export const useEditor = (defaultHtml: string) => {
+export const useEditor = (initialPages?: Page[]) => {
   /**
    * State to manage the HTML content of the editor.
    * This will be the main content that users edit.
    */
-  const [html, setHtml] = useState(defaultHtml);
+  const [pages, setPages] = useState<Array<Page>>(initialPages ??[
+    {
+      path: "index.html",
+      html: defaultHTML,
+    },
+  ]);
   /**
    * State to manage the history of HTML edits.
    * This will store previous versions of the HTML content along with metadata. (not saved to DB)
@@ -19,12 +25,13 @@ export const useEditor = (defaultHtml: string) => {
    */
   const [prompts, setPrompts] = useState<string[]>([]);
 
+
   return {
-    html,
-    setHtml,
     htmlHistory,
     setHtmlHistory,
     prompts,
+    pages,
+    setPages,
     setPrompts,
   };
 };

lib/prompts.ts

@@ -2,24 +2,81 @@ export const SEARCH_START = "<<<<<<< SEARCH";
 export const DIVIDER = "=======";
 export const REPLACE_END = ">>>>>>> REPLACE";
 export const MAX_REQUESTS_PER_IP = 2;
-export const INITIAL_SYSTEM_PROMPT = `ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. MAKE IT RESPONSIVE USING TAILWINDCSS. Use as much as you can TailwindCSS for the CSS, if you can't do something with TailwindCSS, then use custom CSS (make sure to import <script src="https://cdn.tailwindcss.com"></script> in the head). Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE`;
-export const FOLLOW_UP_SYSTEM_PROMPT = `You are an expert web developer modifying an existing HTML file.
-The user wants to apply changes based on their request.
-You MUST output ONLY the changes required using the following SEARCH/REPLACE block format. Do NOT output the entire file.
-Explain the changes briefly *before* the blocks if necessary, but the code changes THEMSELVES MUST be within the blocks.
-Format Rules:
-1. Start with ${SEARCH_START}
-2. Provide the exact lines from the current code that need to be replaced.
-3. Use ${DIVIDER} to separate the search block from the replacement.
-4. Provide the new lines that should replace the original lines.
-5. End with ${REPLACE_END}
-6. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
-7. To insert code, use an empty SEARCH block (only ${SEARCH_START} and ${DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
-8. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only ${DIVIDER} and ${REPLACE_END} on their lines).
-9. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace.
+export const TITLE_PAGE_START = "<<<<<<< START_TITLE ";
+export const TITLE_PAGE_END = " >>>>>>> END_TITLE";
+export const NEW_PAGE_START = "<<<<<<< NEW_PAGE_START ";
+export const NEW_PAGE_END = " >>>>>>> NEW_PAGE_END";
+export const UPDATE_PAGE_START = "<<<<<<< UPDATE_PAGE_START ";
+export const UPDATE_PAGE_END = " >>>>>>> UPDATE_PAGE_END";
+
+// TODO REVIEW LINK. MAYBE GO BACK TO SANDPACK.
+// FIX PREVIEW LINK NOT WORKING ONCE THE SITE IS DEPLOYED.
+
+export const INITIAL_SYSTEM_PROMPT = `You are an expert UI/UX and Front-End Developer.
+You create website in a way a designer would, using ONLY HTML, CSS and Javascript.
+Try to create the best UI possible. Important: Make the website responsive by using TailwindCSS. Use it as much as you can, if you can't use it, use custom css (make sure to import tailwind with <script src="https://cdn.tailwindcss.com"></script> in the head).
+Also try to elaborate as much as you can, to create something unique, with a great design.
+If you want to use ICONS import Feather Icons (Make sure to add <script src="https://unpkg.com/feather-icons"></script> and <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> in the head., and <script>feather.replace();</script> in the body. Ex : <i data-feather="user"></i>).
+If you want to use animations you can use: Animejs.com (Make sure to add <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> and <script>const { animate } = anime;</script> in the head.), AOS.com (Make sure to add <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> and <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> and <script>AOS.init();</script>).
+You can create multiple pages website at once (following the format rules below) or a Single Page Application. If the user doesn't ask for a specific version, you have to determine the best version for the user, depending on the request. (Try to avoid the Single Page Application if the user asks for multiple pages.)
+No need to explain what you did. Just return the expected result. AVOID Chinese characters in the code if not asked by the user.
+Return the results in a \`\`\`html\`\`\` markdown. Format the results like:
+1. Start with ${TITLE_PAGE_START}.
+2. Add the name of the page without special character, such as spaces or punctuation, using the .html format only, right after the start tag.
+3. Close the start tag with the ${TITLE_PAGE_END}.
+4. Start the HTML response with the triple backticks, like \`\`\`html.
+5. Insert the following html there.
+6. Close with the triple backticks, like \`\`\`.
+7. Retry if another pages.
+Example Code:
+${TITLE_PAGE_START}index.html${TITLE_PAGE_END}
+\`\`\`html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Index</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body>
+    <h1>Hello World</h1>
+    <script>AOS.init();</script>
+    <script>const { animate } = anime;</script>
+    <script>feather.replace();</script>
+</body>
+</html>
+\`\`\`
+IMPORTANT: The first file should be always named index.html.`
+
+export const FOLLOW_UP_SYSTEM_PROMPT = `You are an expert UI/UX and Front-End Developer modifying an existing HTML files.
+The user wants to apply changes and probably add new features/pages to the website, based on their request.
+You MUST output ONLY the changes required using the following UPDATE_PAGE_START and SEARCH/REPLACE format. Do NOT output the entire file.
+If it's a new page, you MUST applied the following NEW_PAGE_START and UPDATE_PAGE_END format.
+Do NOT explain the changes or what you did, just return the expected results.
+Update Format Rules:
+1. Start with ${UPDATE_PAGE_START}
+2. Provide the name of the page you are modifying.
+3. Close the start tag with the ${UPDATE_PAGE_END}.
+4. Start with ${SEARCH_START}
+5. Provide the exact lines from the current code that need to be replaced.
+6. Use ${DIVIDER} to separate the search block from the replacement.
+7. Provide the new lines that should replace the original lines.
+8. End with ${REPLACE_END}
+9. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
+10. To insert code, use an empty SEARCH block (only ${SEARCH_START} and ${DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
+11. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only ${DIVIDER} and ${REPLACE_END} on their lines).
+12. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace.
 Example Modifying Code:
 \`\`\`
 Some explanation...
+${UPDATE_PAGE_START}index.html${UPDATE_PAGE_END}
 ${SEARCH_START}
     <h1>Old Title</h1>
 ${DIVIDER}
@@ -35,8 +92,44 @@ ${REPLACE_END}
 Example Deleting Code:
 \`\`\`
 Removing the paragraph...
+${TITLE_PAGE_START}index.html${TITLE_PAGE_END}
 ${SEARCH_START}
   <p>This paragraph will be deleted.</p>
 ${DIVIDER}
 ${REPLACE_END}
-\`\`\``;
+\`\`\`
+The user can also ask to add a new page, in this case you should return the new page in the following format:
+1. Start with ${NEW_PAGE_START}.
+2. Add the name of the page without special character, such as spaces or punctuation, using the .html format only, right after the start tag.
+3. Close the start tag with the ${NEW_PAGE_END}.
+4. Start the HTML response with the triple backticks, like \`\`\`html.
+5. Insert the following html there.
+6. Close with the triple backticks, like \`\`\`.
+7. Retry if another pages.
+Example Code:
+${NEW_PAGE_START}index.html${NEW_PAGE_END}
+\`\`\`html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Index</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body>
+    <h1>Hello World</h1>
+    <script>AOS.init();</script>
+    <script>const { animate } = anime;</script>
+    <script>feather.replace();</script>
+</body>
+</html>
+\`\`\`
+IMPORTANT: While creating a new page, UPDATE ALL THE OTHERS (using the UPDATE_PAGE_START and SEARCH/REPLACE format) pages to add or replace the link to the new page, otherwise the user will not be able to navigate to the new page. (Dont use onclick to navigate, only href)
+No need to explain what you did. Just return the expected result.`

lib/providers.ts

@@ -29,6 +29,11 @@ export const PROVIDERS = {
     max_tokens: 128_000,
     id: "together",
   },
+  groq: {
+    name: "Groq",
+    max_tokens: 16_384,
+    id: "groq",
+  },
 };
 
 export const MODELS = [
@@ -50,7 +55,26 @@ export const MODELS = [
       "sambanova",
     ],
     autoProvider: "novita",
-    isNew: true,
     isThinker: true,
   },
+  {
+    value: "Qwen/Qwen3-Coder-480B-A35B-Instruct",
+    label: "Qwen3 Coder 480B A35B Instruct",
+    providers: ["novita", "hyperbolic"],
+    autoProvider: "novita",
+    isNew: true,
+  },
+  {
+    value: "moonshotai/Kimi-K2-Instruct",
+    label: "Kimi K2 Instruct",
+    providers: ["together", "novita", "groq"],
+    autoProvider: "groq",
+  },
+  {
+    value: "deepseek-ai/DeepSeek-V3.1",
+    label: "DeepSeek V3.1",
+    providers: ["fireworks-ai", "novita"],
+    isNew: true,
+    autoProvider: "fireworks-ai",
+  },
 ];

next.config.ts

@@ -24,6 +24,9 @@ const nextConfig: NextConfig = {
 
     return config;
   },
+  images: {
+    remotePatterns: [new URL('https://huggingface.co/**')],
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -8,6 +8,7 @@
       "name": "deepsite-v2",
       "version": "0.1.0",
       "dependencies": {
+        "@codesandbox/sandpack-react": "^2.20.0",
         "@huggingface/hub": "^2.2.0",
         "@huggingface/inference": "^4.0.3",
         "@monaco-editor/react": "^4.7.0-rc.0",
@@ -97,6 +98,182 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.18.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz",
+      "integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.1.tgz",
+      "integrity": "sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+      "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.1.7"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
+      "integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.11.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
+      "integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.8.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.5.tgz",
+      "integrity": "sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
+      "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.38.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.1.tgz",
+      "integrity": "sha512-RmTOkE7hRU3OVREqFVITWHz6ocgBjv08GoePscAakgVQfciA3SGCEk7mb9IzwW61cKKmlTpHXG6DUE5Ubx+MGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.5.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@codesandbox/nodebox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@codesandbox/nodebox/-/nodebox-0.1.8.tgz",
+      "integrity": "sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==",
+      "license": "SEE LICENSE IN ./LICENSE",
+      "dependencies": {
+        "outvariant": "^1.4.0",
+        "strict-event-emitter": "^0.4.3"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-client": {
+      "version": "2.19.8",
+      "resolved": "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.19.8.tgz",
+      "integrity": "sha512-CMV4nr1zgKzVpx4I3FYvGRM5YT0VaQhALMW9vy4wZRhEyWAtJITQIqZzrTGWqB1JvV7V72dVEUCUPLfYz5hgJQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@codesandbox/nodebox": "0.1.8",
+        "buffer": "^6.0.3",
+        "dequal": "^2.0.2",
+        "mime-db": "^1.52.0",
+        "outvariant": "1.4.0",
+        "static-browser-server": "1.0.3"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-react": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-2.20.0.tgz",
+      "integrity": "sha512-takd1YpW/PMQ6KPQfvseWLHWklJovGY8QYj8MtWnskGKbjOGJ6uZfyZbcJ6aCFLQMpNyjTqz9AKNbvhCOZ1TUQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.4.0",
+        "@codemirror/commands": "^6.1.3",
+        "@codemirror/lang-css": "^6.0.1",
+        "@codemirror/lang-html": "^6.4.0",
+        "@codemirror/lang-javascript": "^6.1.2",
+        "@codemirror/language": "^6.3.2",
+        "@codemirror/state": "^6.2.0",
+        "@codemirror/view": "^6.7.1",
+        "@codesandbox/sandpack-client": "^2.19.8",
+        "@lezer/highlight": "^1.1.3",
+        "@react-hook/intersection-observer": "^3.1.1",
+        "@stitches/core": "^1.2.6",
+        "anser": "^2.1.1",
+        "clean-set": "^1.1.2",
+        "dequal": "^2.0.2",
+        "escape-carriage": "^1.3.1",
+        "lz-string": "^1.4.4",
+        "react-devtools-inline": "4.4.0",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19",
+        "react-dom": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-react/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "license": "MIT"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
@@ -876,6 +1053,69 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lezer/common": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
+      "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.0.tgz",
+      "integrity": "sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.1.tgz",
+      "integrity": "sha512-ATOImjeVJuvgm3JQ/bpo2Tmv55HSScE2MTPnKRMRIPx2cLhHGyX2VnqpHhtIV1tVzIjZDbcWQm+NCTF40ggZVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
     "node_modules/@monaco-editor/loader": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
@@ -1110,6 +1350,12 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@open-draft/deferred-promise": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
+      "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -2055,6 +2301,28 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@react-hook/intersection-observer": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-hook/intersection-observer/-/intersection-observer-3.1.2.tgz",
+      "integrity": "sha512-mWU3BMkmmzyYMSuhO9wu3eJVP21N8TcgYm9bZnTrMwuM818bEk+0NRM3hP+c/TqA9Ln5C7qE53p1H0QMtzYdvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-hook/passive-layout-effect": "^1.2.0",
+        "intersection-observer": "^0.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/passive-layout-effect": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz",
+      "integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2069,6 +2337,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@stitches/core": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz",
+      "integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==",
+      "license": "MIT"
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -3341,6 +3615,12 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/anser": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/anser/-/anser-2.3.2.tgz",
+      "integrity": "sha512-PMqBCBvrOVDRqLGooQb+z+t1Q0PiPyurUQeZRR5uHBOVZcW8B04KMmnT12USnhpNX2wCPagWzLVppQMUG3u0Dw==",
+      "license": "MIT"
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3620,6 +3900,26 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -3695,6 +3995,30 @@
         "node": ">=16.20.1"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -3847,6 +4171,12 @@
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
       "license": "MIT"
     },
+    "node_modules/clean-set": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/clean-set/-/clean-set-1.1.2.tgz",
+      "integrity": "sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -3940,6 +4270,12 @@
         "toggle-selection": "^1.0.6"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3982,6 +4318,19 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/d": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
+      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+      "license": "ISC",
+      "dependencies": {
+        "es5-ext": "^0.10.64",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -4121,6 +4470,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -4150,6 +4508,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4393,6 +4763,46 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es5-ext": {
+      "version": "0.10.64",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
+      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+      "hasInstallScript": true,
+      "license": "ISC",
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "esniff": "^2.0.1",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "license": "MIT",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
+      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+      "license": "ISC",
+      "dependencies": {
+        "d": "^1.0.2",
+        "ext": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -4404,6 +4814,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-carriage": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/escape-carriage/-/escape-carriage-1.3.1.tgz",
+      "integrity": "sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==",
+      "license": "MIT"
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4775,6 +5191,21 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esniff": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
+      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+      "license": "ISC",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.62",
+        "event-emitter": "^0.3.5",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/espree": {
       "version": "10.3.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
@@ -4834,6 +5265,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "license": "MIT",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -4845,6 +5286,15 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "license": "ISC",
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5351,6 +5801,26 @@
       "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -5409,6 +5879,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intersection-observer": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.10.0.tgz",
+      "integrity": "sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==",
+      "license": "W3C-20150513"
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -6340,6 +6816,15 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -6726,6 +7211,12 @@
         "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
+      "license": "ISC"
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -6902,6 +7393,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/outvariant": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz",
+      "integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==",
+      "license": "MIT"
+    },
     "node_modules/own-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
@@ -7120,6 +7617,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-devtools-inline": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz",
+      "integrity": "sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es6-symbol": "^3"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
@@ -7858,6 +8364,18 @@
       "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
       "license": "MIT"
     },
+    "node_modules/static-browser-server": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/static-browser-server/-/static-browser-server-1.0.3.tgz",
+      "integrity": "sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@open-draft/deferred-promise": "^2.1.0",
+        "dotenv": "^16.0.3",
+        "mime-db": "^1.52.0",
+        "outvariant": "^1.3.0"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -7880,6 +8398,12 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/strict-event-emitter": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz",
+      "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -8015,6 +8539,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
+      "license": "MIT"
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -8362,6 +8892,12 @@
         "url": "https://github.com/sponsors/Wombosvideo"
       }
     },
+    "node_modules/type": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
+      "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -8645,6 +9181,12 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@codesandbox/sandpack-react": "^2.20.0",
     "@huggingface/hub": "^2.2.0",
     "@huggingface/inference": "^4.0.3",
     "@monaco-editor/react": "^4.7.0-rc.0",

types/index.ts

@@ -9,7 +9,7 @@ export interface User {
 }
 
 export interface HtmlHistory {
-  html: string;
+  pages: Page[];
   createdAt: Date;
   prompt: string;
 }
@@ -24,3 +24,8 @@ export interface Project {
   _updatedAt?: Date;
   _createdAt?: Date;
 }
+
+export interface Page {
+  path: string;
+  html: string;
+}