FREE STORE POS - free

index.html

@@ -11,29 +11,6 @@
     helps you build websites with AI, no code required. Let's deploy your
     website with DeepSite and enjoy the magic of AI."
     />
-    <meta name="theme-color" content="#000000" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <meta name="apple-mobile-web-app-title" content="DeepSite" />
-    <meta name="msapplication-TileColor" content="#000000" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="DeepSite | Build with AI ✨" />
-    <meta
-      name="twitter:description"
-      content="DeepSite is a web development tool that
-    helps you build websites with AI, no code required. Let's deploy your
-    website with DeepSite and enjoy the magic of AI."
-    />
-    <meta name="twitter:image" content="/banner.png" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="DeepSite | Build with AI ✨" />
-    <meta
-      property="og:description"
-      content="DeepSite is a web development tool that
-    helps you build websites with AI, no code required. Let's deploy your
-    website with DeepSite and enjoy the magic of AI."
-    />
-    <meta property="og:image" content="/banner.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

package-lock.json

@@ -9,10 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@huggingface/hub": "^1.1.1",
-        "@huggingface/inference": "^4.0.2",
+        "@huggingface/inference": "^3.6.1",
         "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-avatar": "^1.1.10",
-        "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-popover": "^1.1.14",
         "@radix-ui/react-select": "^2.2.5",
@@ -21,7 +20,6 @@
         "@radix-ui/react-tabs": "^1.1.12",
         "@radix-ui/react-toggle": "^1.1.9",
         "@radix-ui/react-toggle-group": "^1.1.10",
-        "@radix-ui/react-tooltip": "^1.2.7",
         "@tailwindcss/vite": "^4.0.15",
         "@xenova/transformers": "^2.17.2",
         "body-parser": "^1.20.3",
@@ -191,11 +189,10 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
-      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
+      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -920,32 +917,29 @@
       "integrity": "sha512-HK6JTVB/nrgjOnbe77HFSENftfAp67AI4mHMR2x64Os1hvchuTT88M8fKEiyESSvqKFKwW4lQKkHva07p05AXw=="
     },
     "node_modules/@huggingface/inference": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.0.2.tgz",
-      "integrity": "sha512-XuWb8ocH7lA5kSdXrGnqshtRz3ocSBzEzxcp5xeAXLjgM1ocoIHq+RW8/Ti0xq3MeRGQWgUkYPCgDV/xgs8p4g==",
-      "license": "MIT",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-3.6.1.tgz",
+      "integrity": "sha512-EtQlbBqcZycPe+qiTEFI+wNHOMpG0gwNTaZSvYu1juN1p/1dEgqAb2GO31dxLgNev2PzH9d+9nm8GngOsIepJg==",
       "dependencies": {
-        "@huggingface/jinja": "^0.5.0",
-        "@huggingface/tasks": "^0.19.11"
+        "@huggingface/jinja": "^0.3.3",
+        "@huggingface/tasks": "^0.17.8"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@huggingface/jinja": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.5.0.tgz",
-      "integrity": "sha512-Ptc03/jGRiYRoi0bUYKZ14MkDslsBRT24oxmsvUlfYrvQMldrxCevhPnT+hfX8awKTT8/f/0ZBBWldoeAcMHdQ==",
-      "license": "MIT",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.3.3.tgz",
+      "integrity": "sha512-vQQr2JyWvVFba3Lj9es4q9vCl1sAc74fdgnEMoX8qHrXtswap9ge9uO3ONDzQB0cQ0PUyaKY2N6HaVbTBvSXvw==",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@huggingface/tasks": {
-      "version": "0.19.11",
-      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.11.tgz",
-      "integrity": "sha512-oBhSgVlg7Pp643MsH8BiI3OAXIMJNxdSiMtv4mApRZV8dmAz8oasKhg6CVKIplO7vAO7F6dkmMn4bYM64I2A9w==",
-      "license": "MIT"
+      "version": "0.17.9",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.17.9.tgz",
+      "integrity": "sha512-lV6RgCJkqy3p93FFxP9H4SGJmFcHAwr1FO+Zk56q/JWsf7Tdsel1DEo1Xfd3An7ZPWpc2Y9ldRecGo9efDYghg=="
     },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
@@ -1283,42 +1277,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
-      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.7",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -1833,40 +1791,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-tooltip": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.7.tgz",
-      "integrity": "sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.7",
-        "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-visually-hidden": "1.2.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",

package.json

@@ -12,10 +12,9 @@
   },
   "dependencies": {
     "@huggingface/hub": "^1.1.1",
-    "@huggingface/inference": "^4.0.2",
+    "@huggingface/inference": "^3.6.1",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
@@ -24,7 +23,6 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.0.15",
     "@xenova/transformers": "^2.17.2",
     "body-parser": "^1.20.3",

server.js

@@ -204,9 +204,6 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
     await uploadFiles({
       repo,
       files,
-      commitTitle: `${prompts[prompts.length - 1]} - ${
-        prompts.length > 1 ? "Follow Up" : "Initial"
-      } Deployment`,
       accessToken: hf_token,
     });
     return res.status(200).send({ ok: true, path: repo.name });
@@ -219,14 +216,8 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 });
 
 app.post("/api/ask-ai", async (req, res) => {
-  const { prompt, provider, model, redesignMarkdown } = req.body;
-  if (!model) {
-    return res.status(400).send({
-      ok: false,
-      message: "Missing required fields",
-    });
-  }
-  if (!redesignMarkdown && !prompt) {
+  const { prompt, provider, model } = req.body;
+  if (!prompt || !model) {
     return res.status(400).send({
       ok: false,
       message: "Missing required fields",
@@ -254,7 +245,6 @@ app.post("/api/ask-ai", async (req, res) => {
 
   let { hf_token } = req.cookies;
   let token = hf_token;
-  let billTo = null;
 
   if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
     token = process.env.HF_TOKEN;
@@ -278,7 +268,6 @@ app.post("/api/ask-ai", async (req, res) => {
     }
 
     token = process.env.DEFAULT_HF_TOKEN;
-    billTo = "huggingface";
   }
 
   // Set up response headers for streaming
@@ -304,27 +293,23 @@ app.post("/api/ask-ai", async (req, res) => {
       message: `Context is too long. ${selectedProvider.name} allow ${selectedProvider.max_tokens} max tokens.`,
     });
   }
+
   try {
-    const chatCompletion = client.chatCompletionStream(
-      {
-        model: selectedModel.value,
-        provider: selectedProvider.id,
-        messages: [
-          {
-            role: "system",
-            content: initialSystemPrompt,
-          },
-          {
-            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.`
-              : prompt,
-          },
-        ],
-        max_tokens: selectedProvider.max_tokens,
-      },
-      billTo ? { billTo } : {}
-    );
+    const chatCompletion = client.chatCompletionStream({
+      model: selectedModel.value,
+      provider: selectedProvider.id,
+      messages: [
+        {
+          role: "system",
+          content: initialSystemPrompt,
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      max_tokens: selectedProvider.max_tokens,
+    });
 
     while (true) {
       const { done, value } = await chatCompletion.next();
@@ -442,7 +427,6 @@ ${REPLACE_END}
 
   let { hf_token } = req.cookies;
   let token = hf_token;
-  let billTo = null;
 
   if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
     token = process.env.HF_TOKEN;
@@ -466,45 +450,42 @@ ${REPLACE_END}
     }
 
     token = process.env.DEFAULT_HF_TOKEN;
-    billTo = "huggingface";
   }
 
   const client = new InferenceClient(token);
 
   const selectedProvider = PROVIDERS[selectedModel.autoProvider];
+
   try {
-    const response = await client.chatCompletion(
-      {
-        model: selectedModel.value,
-        provider: selectedProvider.id,
-        messages: [
-          {
-            role: "system",
-            content: followUpSystemPrompt,
-          },
-          {
-            role: "user",
-            content: previousPrompt
-              ? previousPrompt
-              : "You are modifying the HTML file based on the user's request.",
-          },
-          {
-            role: "assistant",
-            content: `The current code is: \n\`\`\`html\n${html}\n\`\`\``,
-          },
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        ...(selectedProvider.id !== "sambanova"
-          ? {
-              max_tokens: selectedProvider.max_tokens,
-            }
-          : {}),
-      },
-      billTo ? { billTo } : {}
-    );
+    const response = await client.chatCompletion({
+      model: selectedModel.value,
+      provider: selectedProvider.id,
+      messages: [
+        {
+          role: "system",
+          content: followUpSystemPrompt,
+        },
+        {
+          role: "user",
+          content: previousPrompt
+            ? previousPrompt
+            : "You are modifying the HTML file based on the user's request.",
+        },
+        {
+          role: "assistant",
+          content: `The current code is: \n\`\`\`html\n${html}\n\`\`\``,
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      ...(selectedProvider.id !== "sambanova"
+        ? {
+            max_tokens: selectedProvider.max_tokens,
+          }
+        : {}),
+    });
 
     const chunk = response.choices[0]?.message?.content;
     // TO DO: handle the case where there are multiple SEARCH/REPLACE blocks
@@ -517,8 +498,6 @@ ${REPLACE_END}
 
     if (chunk) {
       let newHtml = html;
-      // array of arrays to hold updated lines (start and end line numbers)
-      const updatedLines = [];
 
       // Find all search/replace blocks in the chunk
       let position = 0;
@@ -557,29 +536,9 @@ ${REPLACE_END}
         if (searchBlock.trim() === "") {
           // Inserting at the beginning
           newHtml = `${replaceBlock}\n${newHtml}`;
-
-          // Track first line as updated
-          updatedLines.push([1, replaceBlock.split("\n").length]);
         } else {
-          // Find the position of the search block in the HTML
-          const blockPosition = newHtml.indexOf(searchBlock);
-          if (blockPosition !== -1) {
-            // Count lines before the search block
-            const beforeText = newHtml.substring(0, blockPosition);
-            const startLineNumber = beforeText.split("\n").length;
-
-            // Count lines in search and replace blocks
-            const replaceLines = replaceBlock.split("\n").length;
-
-            // Calculate end line (start + length of replaced content)
-            const endLineNumber = startLineNumber + replaceLines - 1;
-
-            // Track the line numbers that were updated
-            updatedLines.push([startLineNumber, endLineNumber]);
-
-            // Perform the replacement
-            newHtml = newHtml.replace(searchBlock, replaceBlock);
-          }
+          // Replacing existing code
+          newHtml = newHtml.replace(searchBlock, replaceBlock);
         }
 
         // Move position to after this block to find the next one
@@ -589,7 +548,6 @@ ${REPLACE_END}
       return res.status(200).send({
         ok: true,
         html: newHtml,
-        updatedLines,
       });
     } else {
       return res.status(400).send({
@@ -683,43 +641,6 @@ app.get("/api/remix/:username/:repo", async (req, res) => {
     });
   }
 });
-
-app.post("/api/re-design", async (req, res) => {
-  const { url } = req.body;
-  if (!url) {
-    return res.status(400).send({
-      ok: false,
-      message: "Missing required fields",
-    });
-  }
-
-  // call the api https://r.jina.ai/{url} and return the response
-  try {
-    const response = await fetch(
-      `https://r.jina.ai/${encodeURIComponent(url)}`,
-      {
-        method: "POST",
-      }
-    );
-    if (!response.ok) {
-      return res.status(500).send({
-        ok: false,
-        message: "Failed to fetch redesign",
-      });
-    }
-    // return the html response
-    const markdown = await response.text();
-    return res.status(200).send({
-      ok: true,
-      markdown,
-    });
-  } catch (error) {
-    return res.status(500).send({
-      ok: false,
-      message: error.message,
-    });
-  }
-});
 app.get("*", (_req, res) => {
   res.sendFile(path.join(__dirname, "dist", "index.html"));
 });

src/assets/index.css

@@ -136,7 +136,3 @@
 .monaco-editor .line-numbers {
   @apply !text-neutral-500;
 }
-
-.matched-line {
-  @apply bg-sky-500/30;
-}

src/components/ask-ai/ask-ai.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useRef } from "react";
+import { RiSparkling2Fill } from "react-icons/ri";
+import { GrSend } from "react-icons/gr";
 import classNames from "classnames";
 import { toast } from "sonner";
 import { useLocalStorage, useUpdateEffect } from "react-use";
-import { ArrowUp, ChevronDown } from "lucide-react";
-import { FaStopCircle } from "react-icons/fa";
+import { ChevronDown } from "lucide-react";
 
 import Login from "../login/login";
 import { defaultHTML } from "../../../utils/consts";
@@ -13,11 +14,7 @@ import Settings from "../settings/settings";
 import ProModal from "../pro-modal/pro-modal";
 import { Button } from "../ui/button";
 // @ts-expect-error not needed
-import { MODELS } from "../../../utils/providers";
-import Loading from "../loading/loading";
-import { HtmlHistory } from "../../../utils/types";
-import InviteFriends from "../invite-friends/invite-friends";
-import ReImagine from "../re-imagine/re-imagine";
+import { MODELS } from "./../../../utils/providers";
 
 function AskAI({
   html,
@@ -33,9 +30,8 @@ function AskAI({
   onScrollToBottom: () => void;
   isAiWorking: boolean;
   onNewPrompt: (prompt: string) => void;
-  htmlHistory?: HtmlHistory[];
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
-  onSuccess: (h: string, p: string, n?: number[][]) => void;
+  onSuccess: (h: string, p: string) => void;
 }) {
   const refThink = useRef<HTMLDivElement | null>(null);
 
@@ -51,14 +47,12 @@ function AskAI({
   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 audio = new Audio(SuccessSound);
   audio.volume = 0.5;
 
-  const callAi = async (redesignMarkdown?: string) => {
-    if (isAiWorking) return;
-    if (!redesignMarkdown && !prompt.trim()) return;
+  const callAi = async () => {
+    if (isAiWorking || !prompt.trim()) return;
     setisAiWorking(true);
     setProviderError("");
     setThink("");
@@ -70,11 +64,9 @@ function AskAI({
     let lastRenderTime = 0;
 
     const isFollowUp = html !== defaultHTML;
-    const abortController = new AbortController();
-    setController(abortController);
     try {
       onNewPrompt(prompt);
-      if (isFollowUp && !redesignMarkdown) {
+      if (isFollowUp) {
         const request = await fetch("/api/ask-ai", {
           method: "PUT",
           body: JSON.stringify({
@@ -86,7 +78,6 @@ function AskAI({
           headers: {
             "Content-Type": "application/json",
           },
-          signal: abortController.signal,
         });
         if (request && request.body) {
           const res = await request.json();
@@ -109,7 +100,7 @@ function AskAI({
           setPreviousPrompt(prompt);
           setPrompt("");
           setisAiWorking(false);
-          onSuccess(res.html, prompt, res.updatedLines);
+          onSuccess(res.html, prompt);
           audio.play();
         }
       } else {
@@ -119,12 +110,10 @@ function AskAI({
             prompt,
             provider,
             model,
-            redesignMarkdown,
           }),
           headers: {
             "Content-Type": "application/json",
           },
-          signal: abortController.signal,
         });
         if (request && request.body) {
           if (!request.ok) {
@@ -234,17 +223,6 @@ function AskAI({
     }
   };
 
-  const stopController = () => {
-    if (controller) {
-      controller.abort();
-      setController(null);
-      setisAiWorking(false);
-      setThink("");
-      setOpenThink(false);
-      setIsThinking(false);
-    }
-  };
-
   useUpdateEffect(() => {
     if (refThink.current) {
       refThink.current.scrollTop = refThink.current.scrollHeight;
@@ -257,8 +235,10 @@ function AskAI({
     }
   }, [isThinking]);
 
+  // TODO: auto scroll is not working properly, fix it
+
   return (
-    <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-10 absolute bottom-3 left-3 w-[calc(100%-20px)] group">
+    <div className="bg-neutral-800 border border-neutral-700 rounded-lg ring-[5px] focus-within:ring-sky-500/50 ring-transparent z-10 absolute bottom-3 left-3 w-[calc(100%-20px)] group">
       {think && (
         <div className="w-full border-b border-neutral-700 relative overflow-hidden">
           <header
@@ -268,7 +248,7 @@ function AskAI({
             }}
           >
             <p className="text-sm font-medium text-neutral-300 group-hover:text-neutral-200 transition-colors duration-200">
-              {isThinking ? "DeepSite is thinking..." : "DeepSite's plan"}
+              {isThinking ? "AI is thinking..." : "AI's plan"}
             </p>
             <ChevronDown
               className={classNames(
@@ -296,46 +276,37 @@ function AskAI({
           </main>
         </div>
       )}
-      <div className="w-full relative flex items-center justify-between">
+      <div
+        className={classNames(
+          "w-full relative flex items-center justify-between pl-3.5 p-2 lg:p-2 lg:pl-4",
+          {
+            "animate-pulse": isAiWorking,
+          }
+        )}
+      >
         {isAiWorking && (
-          <div className="absolute bg-neutral-800 rounded-lg bottom-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-center justify-between max-lg:text-sm">
-            <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"}...{" "}
-              </p>
-            </div>
-            <div
-              className="text-xs text-neutral-400 px-1 py-0.5 rounded-md border border-neutral-600 flex items-center justify-center gap-1.5 bg-neutral-800 hover:brightness-110 transition-all duration-200 cursor-pointer"
-              onClick={stopController}
-            >
-              <FaStopCircle />
-              Stop generation
-            </div>
+          <div className="absolute bg-neutral-800 rounded-lg bottom-0 left-11 w-[calc(100%-92px)] h-full z-1 flex items-center justify-start max-lg:text-sm">
+            <p className="text-neutral-400 font-code">
+              AI is {isThinking ? "thinking" : "coding"}...
+            </p>
           </div>
         )}
+        <RiSparkling2Fill className="size-5 text-neutral-400 group-focus-within:text-sky-500" />
         <input
           type="text"
           disabled={isAiWorking}
-          className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4"
-          placeholder={
-            hasAsked ? "Ask DeepSite for edits" : "Ask DeepSite anything..."
-          }
+          className="w-full bg-transparent max-lg:text-sm outline-none px-3 text-white placeholder:text-neutral-400 font-code"
+          placeholder={hasAsked ? "Ask AI for edits" : "Ask AI anything..."}
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
           onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
+            if (e.key === "Enter") {
               callAi();
             }
           }}
         />
-      </div>
-      <div className="flex items-center justify-between gap-2 px-4 pb-3">
-        <div className="flex-1 flex items-center justify-start gap-1.5">
-          <ReImagine onRedesign={(md) => callAi(md)} />
-          <InviteFriends />
-        </div>
         <div className="flex items-center justify-end gap-2">
+          {/* <SpeechPrompt setPrompt={setPrompt} /> */}
           <Settings
             provider={provider as string}
             model={model as string}
@@ -346,11 +317,12 @@ function AskAI({
             onClose={setOpenProvider}
           />
           <Button
-            size="iconXs"
+            variant="pink"
+            size="icon"
             disabled={isAiWorking || !prompt.trim()}
-            onClick={() => callAi()}
+            onClick={callAi}
           >
-            <ArrowUp className="size-4" />
+            <GrSend className="-translate-x-[1px]" />
           </Button>
         </div>
       </div>
@@ -365,7 +337,7 @@ function AskAI({
       ></div>
       <div
         className={classNames(
-          "absolute top-0 -translate-y-[calc(100%+8px)] right-0 z-10 w-80 border border-neutral-800 !bg-neutral-900 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          "absolute top-0 -translate-y-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
           {
             "opacity-0 pointer-events-none": !open,
           }

src/components/deploy-button/deploy-button.tsx

@@ -10,6 +10,20 @@ import LoadButton from "../load-button/load-button";
 import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 
+const MsgToast = ({ url }: { url: string }) => (
+  <div className="w-full flex items-center justify-center gap-3">
+    Your space is live!
+    <button
+      className="bg-black text-sm block text-white rounded-md px-3 py-1.5 hover:bg-gray-900 cursor-pointer"
+      onClick={() => {
+        window.open(url, "_blank");
+      }}
+    >
+      See Space
+    </button>
+  </div>
+);
+
 function DeployButton({
   html,
   auth,
@@ -46,17 +60,11 @@ function DeployButton({
       });
       const response = await request.json();
       if (response.ok) {
-        toast.success("Your space is live! 🎉", {
-          action: {
-            label: "See Space",
-            onClick: () => {
-              window.open(
-                `https://huggingface.co/spaces/${response.path ?? path}`,
-                "_blank"
-              );
-            },
-          },
-        });
+        toast.success(
+          <MsgToast
+            url={`https://huggingface.co/spaces/${response.path ?? path}`}
+          />
+        );
         setPath(response.path);
       } else {
         toast.error(response.message);
@@ -84,7 +92,7 @@ function DeployButton({
             </div>
           </PopoverTrigger>
           <PopoverContent
-            className="!rounded-2xl p-0 overflow-hidden !bg-neutral-900"
+            className="p-0 overflow-hidden !bg-neutral-900"
             align="end"
           >
             {!auth ? (

src/components/history/history.tsx

@@ -13,11 +13,11 @@ export default function History({
     <Popover>
       <PopoverTrigger asChild>
         <Button variant="ghost" size="sm" className="max-lg:hidden">
-          {history?.length} edit{history.length !== 1 ? "s" : ""}
+          {history?.length} edits
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="!rounded-2xl !p-0 overflow-hidden !bg-neutral-900"
+        className="!p-0 overflow-hidden !bg-neutral-900"
         align="start"
       >
         <header className="text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">

src/components/invite-friends/invite-friends.tsx

@@ -1,78 +0,0 @@
-import { TiUserAdd } from "react-icons/ti";
-import { Link } from "lucide-react";
-import { FaXTwitter } from "react-icons/fa6";
-
-import { Button } from "../ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "../ui/dialog";
-import { useCopyToClipboard } from "react-use";
-import { toast } from "sonner";
-export default function InviteFriends() {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, copyToClipboard] = useCopyToClipboard();
-
-  return (
-    <Dialog>
-      <form>
-        <DialogTrigger asChild>
-          <Button
-            size="iconXs"
-            variant="outline"
-            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
-          >
-            <TiUserAdd className="size-4" />
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
-          <main>
-            <div className="flex items-center justify-start -space-x-4 mb-5">
-              <div className="size-11 rounded-full bg-pink-300 shadow-2xs flex items-center justify-center text-2xl">
-                😎
-              </div>
-              <div className="size-11 rounded-full bg-amber-300 shadow-2xs flex items-center justify-center text-2xl z-2">
-                😇
-              </div>
-              <div className="size-11 rounded-full bg-sky-300 shadow-2xs flex items-center justify-center text-2xl">
-                😜
-              </div>
-            </div>
-            <p className="text-xl font-semibold text-neutral-950 max-w-[200px]">
-              Invite your friends to join us!
-            </p>
-            <p className="text-sm text-neutral-500 mt-2 max-w-sm">
-              Support us and share the love and let them know about our awesome
-              platform.
-            </p>
-            <div className="mt-4 space-x-3.5">
-              <a
-                href="https://x.com/intent/post?url=https://enzostvs-deepsite.hf.space/&text=Checkout%20this%20awesome%20Ai%20Tool!%20Vibe%20coding%20has%20never%20been%20so%20easy✨"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Button
-                  variant="ghostWhite"
-                  size="sm"
-                  className="!text-neutral-700"
-                >
-                  <FaXTwitter className="size-4" />
-                  Share on
-                </Button>
-              </a>
-              <Button
-                variant="ghostWhite"
-                size="sm"
-                className="!text-neutral-700"
-                onClick={() => {
-                  copyToClipboard("https://enzostvs-deepsite.hf.space/");
-                  toast.success("Invite link copied to clipboard!");
-                }}
-              >
-                <Link className="size-4" />
-                Copy Invite Link
-              </Button>
-            </div>
-          </main>
-        </DialogContent>
-      </form>
-    </Dialog>
-  );
-}

src/components/load-button/load-button.tsx

@@ -64,7 +64,7 @@ function LoadButton({
           </p>
         </PopoverTrigger>
         <PopoverContent
-          className="!rounded-2xl p-0 overflow-hidden !bg-neutral-900"
+          className="p-0 overflow-hidden !bg-neutral-900"
           align="end"
         >
           <header className="flex items-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">

src/components/loading/loading.tsx

@@ -1,21 +1,8 @@
-import classNames from "classnames";
-
-function Loading({
-  overlay = true,
-  className,
-}: {
-  overlay?: boolean;
-  className?: string;
-}) {
+function Loading() {
   return (
-    <div
-      className={classNames("", {
-        "absolute left-0 top-0 h-full w-full flex items-center justify-center z-20 bg-black/50 rounded-full":
-          overlay,
-      })}
-    >
+    <div className="absolute left-0 top-0 h-full w-full flex items-center justify-center z-20 bg-black/50 rounded-full">
       <svg
-        className={`size-5 animate-spin text-white ${className}`}
+        className="size-5 animate-spin text-white"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"

src/components/pro-modal/pro-modal.tsx

@@ -1,8 +1,6 @@
+import classNames from "classnames";
 import { useLocalStorage } from "react-use";
 import { defaultHTML } from "../../../utils/consts";
-import { Dialog, DialogContent } from "../ui/dialog";
-import { Button } from "../ui/button";
-import { CheckCheck } from "lucide-react";
 
 function ProModal({
   open,
@@ -22,73 +20,51 @@ function ProModal({
   };
 
   return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
-        <main className="flex flex-col items-start text-left relative pt-2">
-          <div className="flex items-center justify-start -space-x-4 mb-5">
-            <div className="size-14 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
-              🚀
-            </div>
-            <div className="size-16 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-4xl z-2">
-              🤩
-            </div>
-            <div className="size-14 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
-              🥳
-            </div>
-          </div>
-          <p className="text-2xl font-bold text-neutral-950">
-            Only 9$ for unlimited access!
+    <>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-40",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => onClose(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-40 w-96 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+      >
+        <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+          <span className="bg-linear-to-br shadow-green-500/10 dark:shadow-green-500/20 inline-block -skew-x-12 border border-gray-200 from-pink-300 via-green-200 to-yellow-200 text-xs font-bold text-black shadow-lg dark:from-pink-500 dark:via-green-500 dark:to-yellow-500 dark:text-black rounded-lg px-2.5 py-0.5 ">
+            PRO
+          </span>
+          Your free inference quota is exhausted
+        </header>
+        <main className="px-4 pt-3 pb-4">
+          <p className="text-gray-950 text-sm font-semibold flex items-center justify-between">
+            Upgrade to a PRO account to activate Inference Providers and
+            continue using DeepSite.
           </p>
-          <p className="text-neutral-500 text-base mt-2 max-w-sm">
-            It seems like you have reached the monthly free limit of DeepSite.
+          <p className="text-sm text-pretty text-gray-500 mt-2">
+            It also unlocks thousands of Space apps powered by ZeroGPU for 3d,
+            audio, music, video and more!
           </p>
-          <hr className="bg-neutral-200 w-full max-w-[150px] my-6" />
-          <p className="text-lg mt-3 text-neutral-900 font-semibold">
-            Upgrade to a <ProTag className="mx-1" /> Account, and unlock:
-          </p>
-          <ul className="mt-3 space-y-1 text-neutral-500">
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              DeepSite unlimited access to all Inference Providers
-            </li>
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              Get highest priority and 8x more quota on Spaces ZeroGPU
-            </li>
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              Activate Dataset Viewer on private datasets
-            </li>
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              Get exclusive early access to new features and updates
-            </li>
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              Get free credits across all Inference Providers
-            </li>
-            <li className="text-sm text-neutral-500 space-x-2 flex items-center justify-start gap-2 mt-3">
-              ... and much more!
-            </li>
-          </ul>
-          <Button
-            variant="gray"
-            size="lg"
-            className="w-full !text-base !h-11 mt-8"
+          <a
+            href="https://huggingface.co/subscribe/pro"
+            target="_blank"
+            className="mt-4 bg-black text-white cursor-pointer rounded-full py-2 px-3 text-sm font-medium w-full block text-center hover:bg-gray-800 transition duration-200 ease-in-out"
             onClick={handleProClick}
           >
             Subscribe to PRO ($9/month)
-          </Button>
+          </a>
         </main>
-      </DialogContent>
-    </Dialog>
+      </div>
+    </>
   );
 }
-const ProTag = ({ className }: { className?: string }) => (
-  <span
-    className={`${className} bg-linear-to-br shadow-green-500/10 dark:shadow-green-500/20 inline-block -skew-x-12 border border-gray-200 from-pink-300 via-green-200 to-yellow-200 text-xs font-bold text-black shadow-lg rounded-md px-2.5 py-0.5`}
-  >
-    PRO
-  </span>
-);
+
 export default ProModal;

src/components/re-imagine/re-imagine.tsx

@@ -1,136 +0,0 @@
-import { useState } from "react";
-import { Paintbrush } from "lucide-react";
-import { toast } from "sonner";
-
-import { Button } from "../ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { Input } from "../ui/input";
-import Loading from "../loading/loading";
-
-export default function ReImagine({
-  onRedesign,
-}: {
-  onRedesign: (md: string) => void;
-}) {
-  const [url, setUrl] = useState<string>("");
-  const [open, setOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const checkIfUrlIsValid = (url: string) => {
-    const urlPattern = new RegExp(
-      /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/,
-      "i"
-    );
-    return urlPattern.test(url);
-  };
-
-  const handleClick = async () => {
-    if (!url) {
-      toast.error("Please enter a URL.");
-      return;
-    }
-    if (!checkIfUrlIsValid(url)) {
-      toast.error("Please enter a valid URL.");
-      return;
-    }
-    // Here you would typically handle the re-design logic
-    setIsLoading(true);
-    const request = await fetch("/api/re-design", {
-      method: "POST",
-      body: JSON.stringify({ url }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    const response = await request.json();
-    if (response.ok) {
-      setOpen(false);
-      setUrl("");
-      onRedesign(response.markdown);
-      toast.success("DeepSite is re-designing your site! Let him cook... 🔥");
-    } else {
-      toast.error(response.message || "Failed to re-design the site.");
-    }
-    setIsLoading(false);
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <form>
-        <PopoverTrigger asChild>
-          <Button
-            size="iconXs"
-            variant="outline"
-            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
-          >
-            <Paintbrush className="size-4" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          className="!rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden"
-        >
-          <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
-            <div className="flex items-center justify-center -space-x-4 mb-3">
-              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                🎨
-              </div>
-              <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
-                🥳
-              </div>
-              <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                💎
-              </div>
-            </div>
-            <p className="text-xl font-semibold text-neutral-950">
-              Redesign your Site!
-            </p>
-            <p className="text-sm text-neutral-500 mt-1.5">
-              Try our new Redesign feature to give your site a fresh look.
-            </p>
-          </header>
-          <main className="space-y-4 p-6">
-            <div>
-              <p className="text-sm text-neutral-700 mb-2">
-                Enter your website URL to get started:
-              </p>
-              <Input
-                type="text"
-                placeholder="https://example.com"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-                onBlur={(e) => {
-                  const inputUrl = e.target.value.trim();
-                  if (!inputUrl) {
-                    setUrl("");
-                    return;
-                  }
-                  if (!checkIfUrlIsValid(inputUrl)) {
-                    toast.error("Please enter a valid URL.");
-                    return;
-                  }
-                  setUrl(inputUrl);
-                }}
-                className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
-              />
-            </div>
-            <div>
-              <p className="text-sm text-neutral-700 mb-2">
-                Then, let's redesign it!
-              </p>
-              <Button
-                variant="gray"
-                onClick={handleClick}
-                className="relative w-full"
-                disabled={isLoading}
-              >
-                Redesign <Paintbrush className="size-4" />
-                {isLoading && <Loading className="ml-2 size-4 animate-spin" />}
-              </Button>
-            </div>
-          </main>
-        </PopoverContent>
-      </form>
-    </Popover>
-  );
-}

src/components/settings/settings.tsx

@@ -56,13 +56,12 @@ function Settings({
     <div className="">
       <Popover open={open} onOpenChange={onClose}>
         <PopoverTrigger asChild>
-          <Button variant="gray" size="sm">
-            <PiGearSixFill className="size-4" />
-            Settings
+          <Button variant="gray" size="icon">
+            <PiGearSixFill className="size-5" />
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          className="!rounded-2xl p-0 !w-96 overflow-hidden !bg-neutral-900"
+          className="p-0 !w-96 overflow-hidden !bg-neutral-900"
           align="center"
         >
           <header className="flex items-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
@@ -106,7 +105,7 @@ function Settings({
                         label: string;
                         isNew?: boolean;
                       }) => (
-                        <SelectItem key={value} value={value} className="">
+                        <SelectItem value={value} className="">
                           {label}
                           {isNew && (
                             <span className="text-xs bg-gradient-to-br from-sky-400 to-sky-600 text-white rounded-full px-1.5 py-0.5">

src/components/ui/button.tsx

@@ -11,7 +11,8 @@ const buttonVariants = cva(
       variant: {
         default:
           "bg-neutral-900 text-neutral-50 shadow-xs hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
-        destructive: "bg-red-600 text-white shadow-xs hover:bg-red-500",
+        destructive:
+          "bg-red-500 text-white shadow-xs hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-500/60 dark:bg-red-900 dark:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40 dark:dark:bg-red-900/60",
         outline:
           "border bg-white shadow-xs hover:bg-neutral-100 hover:text-neutral-900 dark:bg-neutral-200/30 dark:border-neutral-200 dark:hover:bg-neutral-200/50 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:dark:bg-neutral-800/30 dark:dark:border-neutral-800 dark:dark:hover:bg-neutral-800/50",
         secondary:
@@ -21,7 +22,6 @@ const buttonVariants = cva(
         link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
         pink: "bg-sky-500 text-white hover:brightness-110",
         gray: "bg-neutral-900 text-neutral-300 hover:brightness-110",
-        ghostWhite: "bg-neutral-200/60 text-neutral-900 hover:bg-neutral-200",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -29,7 +29,6 @@ const buttonVariants = cva(
         lg: "h-10 rounded-full px-6 has-[>svg]:px-4",
         icon: "size-9",
         iconXs: "size-7",
-        iconXss: "size-6",
         xs: "h-6 text-xs rounded-full pl-2 pr-2 gap-1",
       },
     },

src/components/ui/dialog.tsx

@@ -1,144 +0,0 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-
-import { cn } from "./../../lib/utils";
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 p-6 shadow-lg duration-200 sm:max-w-lg dark:bg-neutral-950 dark:border-neutral-800",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-white focus:ring-neutral-950 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn(
-        "text-neutral-500 text-sm dark:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};

src/components/ui/tooltip.tsx

@@ -1,59 +0,0 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "./../../lib/utils";
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-black text-neutral-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-black fill-black z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/views/App.tsx

@@ -34,8 +34,6 @@ export default function App() {
   const resizer = useRef<HTMLDivElement>(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const monacoRef = useRef<any>(null);
 
   const [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
   const [isAiWorking, setisAiWorking] = useState(false);
@@ -218,31 +216,20 @@ export default function App() {
                   fontLigatures: true,
                   theme: "vs-dark",
                   minimap: { enabled: false },
-                  scrollbar: {
-                    horizontal: "hidden",
-                  },
                 }}
                 value={html}
                 onChange={(value) => {
                   const newValue = value ?? "";
                   setHtml(newValue);
                 }}
-                onMount={(editor, monaco) => {
-                  editorRef.current = editor;
-                  monacoRef.current = monaco;
-                }}
+                onMount={(editor) => (editorRef.current = editor)}
               />
               <AskAI
                 html={html}
                 setHtml={(newHtml: string) => {
                   setHtml(newHtml);
                 }}
-                htmlHistory={htmlHistory}
-                onSuccess={(
-                  finalHtml: string,
-                  p: string,
-                  updatedLines?: number[][]
-                ) => {
+                onSuccess={(finalHtml: string, p: string) => {
                   const currentHistory = [...htmlHistory];
                   currentHistory.unshift({
                     html: finalHtml,
@@ -254,26 +241,6 @@ export default function App() {
                   if (window.innerWidth <= 1024) {
                     setCurrentTab("preview");
                   }
-                  if (updatedLines && updatedLines?.length > 0) {
-                    const decorations = updatedLines.map((line) => ({
-                      range: new monacoRef.current.Range(
-                        line[0],
-                        1,
-                        line[1],
-                        1
-                      ),
-                      options: {
-                        inlineClassName: "matched-line",
-                      },
-                    }));
-                    setTimeout(() => {
-                      editorRef?.current
-                        ?.getModel()
-                        ?.deltaDecorations([], decorations);
-
-                      editorRef.current?.revealLine(updatedLines[0][0]);
-                    }, 100);
-                  }
                 }}
                 isAiWorking={isAiWorking}
                 setisAiWorking={setisAiWorking}

utils/providers.js

@@ -36,19 +36,12 @@ export const MODELS = [
     value: "deepseek-ai/DeepSeek-V3-0324",
     label: "DeepSeek V3 O324",
     providers: ["fireworks-ai", "nebius", "sambanova", "novita", "hyperbolic"],
-    autoProvider: "fireworks-ai",
+    autoProvider: "sambanova",
   },
   {
     value: "deepseek-ai/DeepSeek-R1-0528",
     label: "DeepSeek R1 0528",
-    providers: [
-      "fireworks-ai",
-      "novita",
-      "hyperbolic",
-      "nebius",
-      "together",
-      "sambanova",
-    ],
+    providers: ["fireworks-ai", "novita", "hyperbolic", "nebius", "together"],
     autoProvider: "novita",
     isNew: true,
     isThinker: true,