Add a way to stop the generation and get back to the previous version

package-lock.json

@@ -20,6 +20,7 @@
         "@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",
@@ -1791,6 +1792,40 @@
         }
       }
     },
+    "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

@@ -23,6 +23,7 @@
     "@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",

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

@@ -0,0 +1,463 @@
+/* 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, ImagePlus, X } 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 { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { HtmlHistory } from "../../../utils/types";
+
+function AskAI({
+  html,
+  setHtml,
+  onScrollToBottom,
+  isAiWorking,
+  setisAiWorking,
+  htmlHistory,
+  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 uploadInputRef = useRef<HTMLInputElement | 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 [files, setFiles] = useState<File[]>([]);
+  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);
+      if (htmlHistory && htmlHistory?.length > 0) {
+        const lastHtml = htmlHistory[htmlHistory.length - 1].html;
+        setHtml(lastHtml);
+        toast.info("AI generation stopped, reverted to last HTML");
+      } else {
+        setHtml(defaultHTML);
+        toast.info("AI generation stopped");
+      }
+    }
+  };
+
+  const handleUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const filesList = event.target.files;
+    if (filesList && filesList.length > 0) {
+      // add files to the state to show them in the UI
+      const newFiles = Array.from(filesList);
+      setFiles((prevFiles) => [...prevFiles, ...newFiles]);
+      // clear the input value to allow re-uploading the same file
+      event.target.value = "";
+    }
+  };
+
+  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">
+      {files.length > 0 && (
+        <div className="w-full absolute top-0 left-0 -translate-y-full pb-4 flex items-center justify-start gap-4">
+          {files.map((file, index) => (
+            <div
+              key={index}
+              className="flex items-center justify-between bg-neutral-700/50 rounded-lg w-20 aspect-square relative"
+              style={{
+                backgroundImage: `url(${URL.createObjectURL(file)})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+              }}
+            >
+              <Button
+                size="iconXss"
+                className="absolute -top-2 -right-2 ring-[3px] ring-neutral-900"
+                onClick={() => {
+                  setFiles((prevFiles) =>
+                    prevFiles.filter((f) => f.name !== file.name)
+                  );
+                }}
+              >
+                <X className="size-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+      {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">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size="iconXs"
+                variant="outline"
+                className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+                // onClick={() => {
+                //   if (uploadInputRef.current) {
+                //     uploadInputRef.current.click();
+                //   }
+                // }}
+              >
+                <ImagePlus className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                Attach files <span className="italic">(coming soon)</span>
+              </p>
+            </TooltipContent>
+          </Tooltip>
+          <input
+            ref={uploadInputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={handleUploadFile}
+            className="hidden"
+            id="file-upload"
+          />
+        </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/loading/loading.tsx

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

src/components/settings/settings.tsx

@@ -56,8 +56,9 @@ function Settings({
     <div className="">
       <Popover open={open} onOpenChange={onClose}>
         <PopoverTrigger asChild>
-          <Button variant="gray" size="icon">
-            <PiGearSixFill className="size-5" />
+          <Button variant="gray" size="sm">
+            <PiGearSixFill className="size-4" />
+            Settings
           </Button>
         </PopoverTrigger>
         <PopoverContent

src/components/ui/button.tsx

@@ -11,8 +11,7 @@ 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-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",
+        destructive: "bg-red-600 text-white shadow-xs hover:bg-red-500",
         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:
@@ -29,6 +28,7 @@ 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/tooltip.tsx

@@ -0,0 +1,59 @@
+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

@@ -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";
+import AskAI from "../components/ask-ai/ask-ai-new";
 
 export default function App() {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
@@ -218,6 +218,9 @@ export default function App() {
                   fontLigatures: true,
                   theme: "vs-dark",
                   minimap: { enabled: false },
+                  scrollbar: {
+                    horizontal: "hidden",
+                  },
                 }}
                 value={html}
                 onChange={(value) => {
@@ -234,6 +237,7 @@ export default function App() {
                 setHtml={(newHtml: string) => {
                   setHtml(newHtml);
                 }}
+                htmlHistory={htmlHistory}
                 onSuccess={(
                   finalHtml: string,
                   p: string,