update multi pages

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" },
@@ -92,12 +98,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",
@@ -107,7 +111,7 @@ export async function POST(request: NextRequest) {
     });
 
     (async () => {
-      let completeResponse = "";
+      // let completeResponse = "";
       try {
         const client = new InferenceClient(token);
         const chatCompletion = client.chatCompletionStream(
@@ -119,12 +123,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,
               },
             ],
@@ -141,39 +147,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) {
@@ -223,7 +197,7 @@ 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, model } =
+  const { prompt, html, previousPrompt, provider, selectedElementHtml, model, pages } =
     body;
 
   if (!prompt || !html) {
@@ -307,7 +281,7 @@ export async function PUT(request: NextRequest) {
               selectedElementHtml
                 ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\``
                 : ""
-            }`,
+            }. Also here are the current pages: ${pages?.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}.`,
           },
           {
             role: "user",
@@ -334,60 +308,170 @@ 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;
-        }
+      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 dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
-        if (dividerIndex === -1) {
-          moreBlocks = false;
-          continue;
+            const replaceEndIndex = processedContent.indexOf(REPLACE_END, dividerIndex);
+            if (replaceEndIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
+
+            const searchBlock = processedContent.substring(
+              searchStartIndex + SEARCH_START.length,
+              dividerIndex
+            );
+            const replaceBlock = processedContent.substring(
+              dividerIndex + DIVIDER.length,
+              replaceEndIndex
+            );
+
+            if (searchBlock.trim() === "") {
+              pageHtml = `${replaceBlock}\n${pageHtml}`;
+              updatedLines.push([1, replaceBlock.split("\n").length]);
+            } else {
+              const blockPosition = pageHtml.indexOf(searchBlock);
+              if (blockPosition !== -1) {
+                const beforeText = pageHtml.substring(0, blockPosition);
+                const startLineNumber = beforeText.split("\n").length;
+                const replaceLines = replaceBlock.split("\n").length;
+                const endLineNumber = startLineNumber + replaceLines - 1;
+
+                updatedLines.push([startLineNumber, endLineNumber]);
+                pageHtml = pageHtml.replace(searchBlock, replaceBlock);
+              }
+            }
+
+            position = replaceEndIndex + REPLACE_END.length;
+          }
+
+          updatedPages[pageIndex].html = pageHtml;
+          
+          if (pagePath === '/' || pagePath === '/index' || pagePath === 'index') {
+            newHtml = pageHtml;
+          }
         }
+      }
 
-        const 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]/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,41 @@ export async function GET(
       );
     }
 
-    const response = await fetch(space_url);
-    if (!response.ok) {
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+
+    const htmlFiles: Page[] = [];
+    
+    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();
+          htmlFiles.push({
+            path: fileInfo.path,
+            html,
+          });
+        }
+      }
+    }
+
+    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,
         },
         ok: true,
       },
@@ -117,7 +132,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 +153,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

@@ -82,6 +82,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<{

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

@@ -32,9 +32,9 @@ 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} />;
 }

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,7 +10,7 @@ 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 { HtmlHistory, Page } from "@/types";
 import { InviteFriends } from "@/components/invite-friends";
 import { Settings } from "@/components/editor/ask-ai/settings";
 import { LoginModal } from "@/components/login-modal";
@@ -22,51 +22,75 @@ 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";
 
 export function AskAI({
-  html,
-  setHtml,
+  currentPage,
+  previousPrompts,
   onScrollToBottom,
   isAiWorking,
   setisAiWorking,
   isEditableModeEnabled = false,
+  pages,
+  htmlHistory,
   selectedElement,
   setSelectedElement,
   setIsEditableModeEnabled,
   onNewPrompt,
   onSuccess,
+  setPages,
+  setCurrentPage,
 }: {
-  html: string;
-  setHtml: (html: string) => void;
+  currentPage: Page;
+  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>>;
+  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 {
+    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]);
@@ -74,203 +98,93 @@ export function AskAI({
   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);
-              if (selectedModel?.isThinker) {
-                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);
+    if (isFollowUp && !redesignMarkdown && !isSameHtml) {
+      // Use follow-up function for existing projects
+      const selectedElementHtml = selectedElement
+        ? selectedElement.outerHTML
+        : "";
 
-              return;
-            }
+      const result = await callAiFollowUp(
+        prompt,
+        previousPrompt,
+        selectedElementHtml
+      );
 
-            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();
-              }
-            }
-
-            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, 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,
+        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");
     }
   };
 
@@ -287,8 +201,8 @@ export function AskAI({
   }, [isThinking]);
 
   const isSameHtml = useMemo(() => {
-    return isTheSameHtml(html);
-  }, [html]);
+    return isTheSameHtml(currentPage.html);
+  }, [currentPage.html]);
 
   return (
     <div className="px-3">
@@ -345,7 +259,8 @@ export function AskAI({
               <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"}...{" "}
+                  {/* AI is {isThinking ? "thinking" : "coding"}...{" "} */}
+                  AI is coding...
                 </p>
               </div>
               <div
@@ -357,11 +272,10 @@ export function AskAI({
               </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,
               }
@@ -369,7 +283,7 @@ export function AskAI({
             placeholder={
               selectedElement
                 ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
-                : hasAsked
+                : isFollowUp && (!isSameHtml || pages?.length > 1)
                 ? "Ask DeepSite for edits"
                 : "Ask DeepSite anything..."
             }
@@ -434,9 +348,9 @@ 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)}
         />
@@ -462,7 +376,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/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 DeepSeek 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 DeepSeek model" />
+                  <SelectValue placeholder="Select a model" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup>
-                    <SelectLabel>DeepSeek models</SelectLabel>
+                    <SelectLabel>Models</SelectLabel>
                     {MODELS.map(
                       ({
                         value,

components/editor/deploy-button/index.tsx

@@ -18,12 +18,13 @@ 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";
 
 export function DeployButton({
-  html,
+  pages,
   prompts,
 }: {
-  html: string;
+  pages: Page[];
   prompts: string[];
 }) {
   const router = useRouter();
@@ -45,7 +46,7 @@ export function DeployButton({
     try {
       const res = await api.post("/me/projects", {
         title: config.title,
-        html,
+        pages,
         prompts,
       });
       if (res.data.ok) {
@@ -60,8 +61,6 @@ export function DeployButton({
     }
   };
 
-  // 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 +70,10 @@ export function DeployButton({
               <div>
                 <Button variant="default" className="max-lg:hidden !px-4">
                   <MdSave className="size-4" />
-                  Deploy your Project
+                  Publish your Project
                 </Button>
                 <Button variant="default" size="sm" className="lg:hidden">
-                  Deploy
+                  Publish
                 </Button>
               </div>
             </PopoverTrigger>
@@ -99,11 +98,11 @@ export function DeployButton({
                   </div>
                 </div>
                 <p className="text-xl font-semibold text-neutral-950">
-                  Deploy as Space!
+                  Publish 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.
+                  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">
@@ -123,7 +122,7 @@ export function DeployButton({
                 </div>
                 <div>
                   <p className="text-sm text-neutral-700 mb-2">
-                    Then, let&apos;s deploy it!
+                    Then, let&apos;s publish it!
                   </p>
                   <Button
                     variant="black"
@@ -131,7 +130,7 @@ export function DeployButton({
                     className="relative w-full"
                     disabled={loading}
                   >
-                    Deploy Space <Rocket className="size-4" />
+                    Publish Space <Rocket className="size-4" />
                     {loading && (
                       <Loading className="ml-2 size-4 animate-spin" />
                     )}
@@ -148,7 +147,7 @@ export function DeployButton({
               onClick={() => setOpen(true)}
             >
               <MdSave className="size-4" />
-              Save your Project
+              Publish your Project
             </Button>
             <Button
               variant="default"
@@ -156,16 +155,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,7 +2,7 @@ import classNames from "classnames";
 import { FaMobileAlt } from "react-icons/fa";
 import { HelpCircle, RefreshCcw, SparkleIcon } from "lucide-react";
 import { FaLaptopCode } from "react-icons/fa6";
-import { HtmlHistory } 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";
@@ -23,7 +23,7 @@ const DEVICES = [
 export function Footer({
   onReset,
   htmlHistory,
-  setHtml,
+  setPages,
   device,
   setDevice,
   iframeRef,
@@ -31,7 +31,7 @@ export function Footer({
   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">>;
 }) {
@@ -69,7 +69,7 @@ export function Footer({
         {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";
@@ -22,16 +22,25 @@ import { Preview } from "@/components/editor/preview";
 import { useEditor } from "@/hooks/useEditor";
 import { AskAI } from "@/components/editor/ask-ai";
 import { DeployButton } from "./deploy-button";
-import { Project } from "@/types";
+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,
+  isNew,
+}: {
+  project?: Project | null;
+  pages?: Page[];
+  isNew?: boolean;
+}) => {
+  const [htmlStorage, , removeHtmlStorage] = useLocalStorage("pages");
   const [, copyToClipboard] = useCopyToClipboard();
-  const { html, setHtml, htmlHistory, setHtmlHistory, prompts, setPrompts } =
-    useEditor(project?.html ?? (htmlStorage as string) ?? defaultHTML);
+  const { htmlHistory, setHtmlHistory, prompts, setPrompts, pages, setPages } =
+    useEditor(initialPages);
   // get query params from URL
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -46,6 +55,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);
@@ -54,11 +64,6 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
     null
   );
 
-  /**
-   * 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;
 
@@ -78,10 +83,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;
 
@@ -149,7 +150,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 "";
     }
@@ -175,6 +176,15 @@ 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}>
@@ -183,10 +193,11 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
             router.push(`/projects/${project.space_id}`);
           }}
         />
+        {/* for these buttons pass the whole pages */}
         {project?._id ? (
-          <SaveButton html={html} prompts={prompts} />
+          <SaveButton pages={pages} prompts={prompts} />
         ) : (
-          <DeployButton html={html} 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">
@@ -196,10 +207,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!");
                 }}
               />
@@ -222,10 +266,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;
@@ -234,19 +285,13 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                 onValidate={handleEditorValidation}
               />
               <AskAI
-                html={html}
-                setHtml={(newHtml: string) => {
-                  setHtml(newHtml);
-                }}
+                currentPage={currentPageData}
                 htmlHistory={htmlHistory}
-                onSuccess={(
-                  finalHtml: string,
-                  p: string,
-                  updatedLines?: number[][]
-                ) => {
+                previousPrompts={project?.prompts ?? []}
+                onSuccess={(newPages, p: string, updatedLines?: number[][]) => {
                   const currentHistory = [...htmlHistory];
                   currentHistory.unshift({
-                    html: finalHtml,
+                    pages: newPages,
                     createdAt: new Date(),
                     prompt: p,
                   });
@@ -277,6 +322,9 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                     }, 100);
                   }
                 }}
+                setPages={setPages}
+                pages={pages}
+                setCurrentPage={setCurrentPage}
                 isAiWorking={isAiWorking}
                 setisAiWorking={setIsAiWorking}
                 onNewPrompt={(prompt: string) => {
@@ -287,6 +335,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                     editorRef.current?.getModel()?.getLineCount() ?? 0
                   );
                 }}
+                isNew={isNew}
                 isEditableModeEnabled={isEditableModeEnabled}
                 setIsEditableModeEnabled={setIsEditableModeEnabled}
                 selectedElement={selectedElement}
@@ -300,11 +349,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}
@@ -324,7 +375,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
           if (
             window.confirm("You're about to reset the editor. Are you sure?")
           ) {
-            setHtml(defaultHTML);
+            // setHtml(defaultHTML);
             removeHtmlStorage();
             editorRef.current?.revealLine(
               editorRef.current?.getModel()?.getLineCount() ?? 0
@@ -332,7 +383,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
           }
         }}
         htmlHistory={htmlHistory}
-        setHtml={setHtml}
+        setPages={setPages}
         iframeRef={iframeRef}
         device={device}
         setDevice={setDevice}

components/editor/pages/index.tsx

@@ -0,0 +1,39 @@
+import { Page } from "@/types";
+import { PlusIcon } from "lucide-react";
+import { ListPagesItem } from "./page";
+
+export function ListPages({
+  pages,
+  currentPage,
+  onSelectPage,
+  onNewPage,
+  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}
+        />
+      ))}
+      <button
+        className="max-h-14 min-h-14 pl-2 pr-4 py-4 text-neutral-400 cursor-pointer text-sm hover:bg-neutral-900 flex items-center justify-center gap-1 text-nowrap"
+        onClick={onNewPage}
+      >
+        <PlusIcon className="h-3" />
+        New Page
+      </button>
+    </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

@@ -7,6 +7,7 @@ import { toast } from "sonner";
 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 +17,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";
@@ -65,6 +70,49 @@ 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 +127,6 @@ export const Preview = ({
     if (iframeRef?.current) {
       const iframeDocument = iframeRef.current.contentDocument;
       if (iframeDocument) {
-        // Clean up existing listeners first
         cleanupListeners();
 
         if (isEditableModeEnabled) {
@@ -90,7 +137,6 @@ export const Preview = ({
       }
     }
 
-    // Clean up when component unmounts or dependencies change
     return cleanupListeners;
   }, [iframeRef, isEditableModeEnabled]);
 
@@ -169,6 +215,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) {
@@ -59,7 +60,7 @@ export function SaveButton({
         onClick={updateSpace}
       >
         <MdSave className="size-4" />
-        Deploy your Project{" "}
+        Publish your Project{" "}
         {loading && <Loading className="ml-2 size-4 animate-spin" />}
       </Button>
       <Button
@@ -68,7 +69,7 @@ export function SaveButton({
         className="lg:hidden relative"
         onClick={updateSpace}
       >
-        Deploy {loading && <Loading className="ml-2 size-4 animate-spin" />}
+        Publish {loading && <Loading className="ml-2 size-4 animate-spin" />}
       </Button>
     </>
   );

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,465 @@
+import { useState, useRef } from "react";
+import { toast } from "sonner";
+import { useLocalStorage } from "react-use";
+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,
+  currentPage,
+  pages,
+  isAiWorking,
+  setisAiWorking,
+}: UseCallAiProps) => {
+  const audio = useRef<HTMLAudioElement | null>(null);
+  const [provider] = useLocalStorage("provider", "auto");
+  const [model] = useLocalStorage("model", MODELS[0].value);
+  const [controller, setController] = useState<AbortController | null>(null);
+
+  const callAiNewProject = async (prompt: string, 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, 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, previousPrompt: string, selectedElementHtml?: 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,
+          html: currentPage?.html,
+          pages,
+          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) {
+            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,73 @@ 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. AVOID CHINESE CHARACTERS IN THE CODE IF NOT ASKED BY THE USER.`;
+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";
+
+export const INITIAL_SYSTEM_PROMPT = `Only use HTML, CSS and Javascript.
+If you want to use ICON make sure to import 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 elaborate as much as you can, to create something unique.
+If you want to use on scroll animation, import AOS. (make sure to add <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> and <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> and <script>AOS.init();</script>)
+Returns the result in a \`\`\`html\`\`\` markdown. If the user doesn't ask for a different pages, do it as a Single page. 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/[email protected]/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+</head>
+<body>
+    <h1>Hello World</h1>
+    <script>AOS.init();</script>
+</body>
+</html>
+\`\`\`
+The first file should be always named index.html. Also, if there are more than 1 page, dont forget to includes the page in a link <a href="page.html">page</a> to be accessible (Dont use onclick to navigate, only href). Can be in a menu, button or whatever you want.
+Avoid Chinese characters in the code if not asked by the user.
+xf`;
+
+
 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.
+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 +84,39 @@ ${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/[email protected]/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+</head>
+<body>
+    <h1>Hello World</h1>
+    <script>AOS.init();</script>
+</body>
+</html>
+\`\`\`
+Also, if there are more than 1 page, dont forget to includes the page in a link <a href="page.html">page</a> to be accessible (Dont use onclick to navigate, only href).
+No need to explain what you did. Just return the expected result.`;

lib/providers.ts

@@ -70,4 +70,12 @@ export const MODELS = [
     providers: ["together", "novita", "groq"],
     autoProvider: "groq",
   },
+  {
+    value: "deepseek-ai/DeepSeek-V3.1",
+    label: "DeepSeek V3.1",
+    providers: ["fireworks-ai", "novita"],
+    isNew: true,
+    isThinker: true,
+    autoProvider: "fireworks-ai",
+  },
 ];

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;
+}