Add redesign stuffs

server.js

@@ -219,8 +219,14 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 });
 
 app.post("/api/ask-ai", async (req, res) => {
-  const { prompt, provider, model } = req.body;
-  if (!prompt || !model) {
+  const { prompt, provider, model, redesignMarkdown } = req.body;
+  if (!model) {
+    return res.status(400).send({
+      ok: false,
+      message: "Missing required fields",
+    });
+  }
+  if (!redesignMarkdown && !prompt) {
     return res.status(400).send({
       ok: false,
       message: "Missing required fields",
@@ -310,7 +316,9 @@ app.post("/api/ask-ai", async (req, res) => {
           },
           {
             role: "user",
-            content: prompt,
+            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,
@@ -675,6 +683,43 @@ 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/components/ask-ai/ask-ai-new.tsx

@@ -1,385 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useRef } from "react";
-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 Login from "../login/login";
-import { defaultHTML } from "../../../utils/consts";
-import SuccessSound from "./../../assets/success.mp3";
-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";
-
-function AskAI({
-  html,
-  setHtml,
-  onScrollToBottom,
-  isAiWorking,
-  setisAiWorking,
-  onNewPrompt,
-  onSuccess,
-}: {
-  html: string;
-  setHtml: (html: string) => void;
-  onScrollToBottom: () => void;
-  isAiWorking: boolean;
-  onNewPrompt: (prompt: string) => void;
-  htmlHistory?: HtmlHistory[];
-  setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
-  onSuccess: (h: string, p: string, n?: number[][]) => void;
-}) {
-  const refThink = useRef<HTMLDivElement | 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 audio = new Audio(SuccessSound);
-  audio.volume = 0.5;
-
-  const callAi = async () => {
-    if (isAiWorking || !prompt.trim()) return;
-    setisAiWorking(true);
-    setProviderError("");
-    setThink("");
-    setOpenThink(false);
-    setIsThinking(true);
-
-    let contentResponse = "";
-    let thinkResponse = "";
-    let lastRenderTime = 0;
-
-    const isFollowUp = html !== defaultHTML;
-    const abortController = new AbortController();
-    setController(abortController);
-    try {
-      onNewPrompt(prompt);
-      if (isFollowUp) {
-        const request = await fetch("/api/ask-ai", {
-          method: "PUT",
-          body: JSON.stringify({
-            prompt,
-            provider,
-            previousPrompt,
-            html,
-          }),
-          headers: {
-            "Content-Type": "application/json",
-          },
-          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);
-          audio.play();
-        }
-      } else {
-        const request = await fetch("/api/ask-ai", {
-          method: "POST",
-          body: JSON.stringify({
-            prompt,
-            provider,
-            model,
-          }),
-          headers: {
-            "Content-Type": "application/json",
-          },
-          signal: abortController.signal,
-        });
-        if (request && request.body) {
-          if (!request.ok) {
-            const res = await request.json();
-            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;
-          }
-          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) {
-              toast.success("AI responded successfully");
-              setPreviousPrompt(prompt);
-              setPrompt("");
-              setisAiWorking(false);
-              setHasAsked(true);
-              audio.play();
-
-              // Now we have the complete HTML including </html>, so set it to be sure
-              const finalDoc = contentResponse.match(
-                /<!DOCTYPE html>[\s\S]*<\/html>/
-              )?.[0];
-              if (finalDoc) {
-                setHtml(finalDoc);
-              }
-              onSuccess(finalDoc ?? contentResponse, prompt);
-
-              return;
-            }
-
-            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;
-
-            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>";
-              }
-
-              // Throttle the re-renders to avoid flashing/flicker
-              const now = Date.now();
-              if (now - lastRenderTime > 300) {
-                setHtml(partialDoc);
-                lastRenderTime = now;
-              }
-
-              if (partialDoc.length > 200) {
-                onScrollToBottom();
-              }
-            }
-            read();
-          };
-
-          read();
-        }
-      }
-    } 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);
-    }
-  };
-
-  useUpdateEffect(() => {
-    if (refThink.current) {
-      refThink.current.scrollTop = refThink.current.scrollHeight;
-    }
-  }, [think]);
-
-  useUpdateEffect(() => {
-    if (!isThinking) {
-      setOpenThink(false);
-    }
-  }, [isThinking]);
-
-  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">
-      {think && (
-        <div className="w-full border-b border-neutral-700 relative overflow-hidden">
-          <header
-            className="flex items-center justify-between px-5 py-2.5 group hover:bg-neutral-600/20 transition-colors duration-200 cursor-pointer"
-            onClick={() => {
-              setOpenThink(!openThink);
-            }}
-          >
-            <p className="text-sm font-medium text-neutral-300 group-hover:text-neutral-200 transition-colors duration-200">
-              {isThinking ? "AI is thinking..." : "AI's plan"}
-            </p>
-            <ChevronDown
-              className={classNames(
-                "size-4 text-neutral-400 group-hover:text-neutral-300 transition-all duration-200",
-                {
-                  "rotate-180": openThink,
-                }
-              )}
-            />
-          </header>
-          <main
-            ref={refThink}
-            className={classNames(
-              "overflow-y-auto transition-all duration-200 ease-in-out",
-              {
-                "max-h-[0px]": !openThink,
-                "min-h-[250px] max-h-[250px] border-t border-neutral-700":
-                  openThink,
-              }
-            )}
-          >
-            <p className="text-[13px] text-neutral-400 whitespace-pre-line px-5 pb-4 pt-3">
-              {think}
-            </p>
-          </main>
-        </div>
-      )}
-      <div className="w-full relative flex items-center justify-between">
-        {isAiWorking && (
-          <div className="absolute bg-neutral-800 rounded-lg bottom-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-center justify-between max-lg:text-sm">
-            <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>
-        )}
-        <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..."
-          }
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              callAi();
-            }
-          }}
-        />
-      </div>
-      <div className="flex items-center justify-between gap-2 px-4 pb-3">
-        <div className="flex-1">
-          <InviteFriends />
-        </div>
-        <div className="flex items-center justify-end gap-2">
-          <Settings
-            provider={provider as string}
-            model={model as string}
-            onChange={setProvider}
-            onModelChange={setModel}
-            open={openProvider}
-            error={providerError}
-            onClose={setOpenProvider}
-          />
-          <Button
-            size="iconXs"
-            disabled={isAiWorking || !prompt.trim()}
-            onClick={callAi}
-          >
-            <ArrowUp className="size-4" />
-          </Button>
-        </div>
-      </div>
-      <div
-        className={classNames(
-          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
-          {
-            "opacity-0 pointer-events-none": !open,
-          }
-        )}
-        onClick={() => setOpen(false)}
-      ></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",
-          {
-            "opacity-0 pointer-events-none": !open,
-          }
-        )}
-      >
-        <Login html={html}>
-          <p className="text-gray-500 text-sm mb-3">
-            You reached the limit of free AI usage. Please login to continue.
-          </p>
-        </Login>
-      </div>
-      <ProModal
-        html={html}
-        open={openProModal}
-        onClose={() => setOpenProModal(false)}
-      />
-    </div>
-  );
-}
-
-export default AskAI;

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

@@ -1,11 +1,10 @@
 /* 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 { ChevronDown } from "lucide-react";
+import { ArrowUp, ChevronDown } from "lucide-react";
+import { FaStopCircle } from "react-icons/fa";
 
 import Login from "../login/login";
 import { defaultHTML } from "../../../utils/consts";
@@ -14,7 +13,11 @@ 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 { 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";
 
 function AskAI({
   html,
@@ -30,6 +33,7 @@ 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;
 }) {
@@ -47,12 +51,14 @@ 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 () => {
-    if (isAiWorking || !prompt.trim()) return;
+  const callAi = async (redesignMarkdown?: string) => {
+    if (isAiWorking) return;
+    if (!redesignMarkdown && !prompt.trim()) return;
     setisAiWorking(true);
     setProviderError("");
     setThink("");
@@ -64,9 +70,11 @@ function AskAI({
     let lastRenderTime = 0;
 
     const isFollowUp = html !== defaultHTML;
+    const abortController = new AbortController();
+    setController(abortController);
     try {
       onNewPrompt(prompt);
-      if (isFollowUp) {
+      if (isFollowUp && !redesignMarkdown) {
         const request = await fetch("/api/ask-ai", {
           method: "PUT",
           body: JSON.stringify({
@@ -78,6 +86,7 @@ function AskAI({
           headers: {
             "Content-Type": "application/json",
           },
+          signal: abortController.signal,
         });
         if (request && request.body) {
           const res = await request.json();
@@ -110,10 +119,12 @@ function AskAI({
             prompt,
             provider,
             model,
+            redesignMarkdown,
           }),
           headers: {
             "Content-Type": "application/json",
           },
+          signal: abortController.signal,
         });
         if (request && request.body) {
           if (!request.ok) {
@@ -223,6 +234,17 @@ 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;
@@ -236,7 +258,7 @@ function AskAI({
   }, [isThinking]);
 
   return (
-    <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">
+    <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">
       {think && (
         <div className="w-full border-b border-neutral-700 relative overflow-hidden">
           <header
@@ -274,37 +296,46 @@ function AskAI({
           </main>
         </div>
       )}
-      <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,
-          }
-        )}
-      >
+      <div className="w-full relative flex items-center justify-between">
         {isAiWorking && (
-          <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 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>
         )}
-        <RiSparkling2Fill className="size-5 text-neutral-400 group-focus-within:text-sky-500" />
         <input
           type="text"
           disabled={isAiWorking}
-          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..."}
+          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..."
+          }
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
           onKeyDown={(e) => {
-            if (e.key === "Enter") {
+            if (e.key === "Enter" && !e.shiftKey) {
               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}
@@ -315,12 +346,11 @@ function AskAI({
             onClose={setOpenProvider}
           />
           <Button
-            variant="pink"
-            size="icon"
+            size="iconXs"
             disabled={isAiWorking || !prompt.trim()}
-            onClick={callAi}
+            onClick={() => callAi()}
           >
-            <GrSend className="-translate-x-[1px]" />
+            <ArrowUp className="size-4" />
           </Button>
         </div>
       </div>

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

@@ -92,7 +92,7 @@ function DeployButton({
             </div>
           </PopoverTrigger>
           <PopoverContent
-            className="p-0 overflow-hidden !bg-neutral-900"
+            className="!rounded-2xl 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} edits
+          {history?.length} edit{history.length !== 1 ? "s" : ""}
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="!p-0 overflow-hidden !bg-neutral-900"
+        className="!rounded-2xl !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/load-button/load-button.tsx

@@ -64,7 +64,7 @@ function LoadButton({
           </p>
         </PopoverTrigger>
         <PopoverContent
-          className="p-0 overflow-hidden !bg-neutral-900"
+          className="!rounded-2xl 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/re-imagine/re-imagine.tsx

@@ -0,0 +1,127 @@
+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-5 !bg-white !border-neutral-100 min-w-xs text-center"
+        >
+          <header className="mb-5">
+            <p className="text-xl font-semibold text-neutral-950">
+              Re-Design your Site!
+            </p>
+            <p className="text-sm text-neutral-500 mt-1.5 mb-6">
+              Try our new Re-Design feature to give your site a fresh look.
+            </p>
+            <hr className="bg-neutral-200 max-w-44 mx-auto" />
+          </header>
+          <main className="space-y-4">
+            <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 re-design it!
+              </p>
+              <Button
+                variant="gray"
+                size="sm"
+                onClick={handleClick}
+                className="relative"
+                disabled={isLoading}
+              >
+                Re-Design <Paintbrush className="size-4" />
+                {isLoading && <Loading className="ml-2 size-4 animate-spin" />}
+              </Button>
+            </div>
+          </main>
+        </PopoverContent>
+      </form>
+    </Popover>
+  );
+}

src/components/settings/settings.tsx

@@ -62,7 +62,7 @@ function Settings({
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          className="p-0 !w-96 overflow-hidden !bg-neutral-900"
+          className="!rounded-2xl 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">

src/views/App.tsx

@@ -21,7 +21,7 @@ import { defaultHTML } from "../../utils/consts";
 import DeployButton from "../components/deploy-button/deploy-button";
 import Preview from "../components/preview/preview";
 import Footer from "../components/footer/footer";
-import AskAI from "../components/ask-ai/ask-ai-new";
+import AskAI from "../components/ask-ai/ask-ai";
 
 export default function App() {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");