new prompts + fix preview

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

@@ -71,10 +71,17 @@ export async function GET(
         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,
-          });
+              html,
+            });
+          }
         }
       }
     }

components/editor/index.tsx

@@ -41,7 +41,7 @@ export const AppEditor = ({
   const [, copyToClipboard] = useCopyToClipboard();
   const { htmlHistory, setHtmlHistory, prompts, setPrompts, pages, setPages } =
     useEditor(initialPages);
-  // get query params from URL
+
   const searchParams = useSearchParams();
   const router = useRouter();
   const deploy = searchParams.get("deploy") === "true";

components/editor/preview/index.tsx

@@ -88,7 +88,6 @@ export const Preview = ({
         };
 
         const anchorElement = findClosestAnchor(event.target as HTMLElement);
-
         if (anchorElement) {
           let href = anchorElement.getAttribute("href");
           if (href) {
@@ -208,7 +207,7 @@ export const Preview = ({
               currentTab !== "preview" && device === "desktop",
           }
         )}
-        srcDoc={throttledHtml as string}
+        srcDoc={isAiWorking ? (throttledHtml as string) : html}
         onLoad={() => {
           if (iframeRef?.current?.contentWindow?.document?.body) {
             iframeRef.current.contentWindow.document.body.scrollIntoView({

lib/prompts.ts

@@ -9,15 +9,17 @@ 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 HugeIcons (Make sure to add <link rel="stylesheet" href="https://cdn.hugeicons.com/font/hgi-stroke-rounded.css" /> in the head., ex: <i class="hgi hgi-stroke hgi-user" />).
+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 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.
-If the user ask for a multiple pages, make sure to add links to the other pages, (Dont use onclick to navigate, only href)
-No need to explain what you did. Just return the expected result. Avoid Chinese characters in the code if not asked by the user.
+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.
@@ -39,62 +41,26 @@ ${TITLE_PAGE_START}index.html${TITLE_PAGE_END}
     <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>
-    <link rel="stylesheet" href="https://cdn.hugeicons.com/font/hgi-stroke-rounded.css" />
+    <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 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/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>)
-// 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/aos@2.3.1/dist/aos.css" rel="stylesheet">
-//     <script src="https://unpkg.com/aos@2.3.1/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.
-// `;
-
-
-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:
+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}.
@@ -153,12 +119,17 @@ ${NEW_PAGE_START}index.html${NEW_PAGE_END}
     <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 other 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.`;
+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.`