add refresh button + confirm modal

src/components/App.tsx

@@ -3,7 +3,7 @@ import { useRef, useState } from "react";
 import Editor from "@monaco-editor/react";
 import classNames from "classnames";
 import { editor } from "monaco-editor";
-import { useMount, useUnmount } from "react-use";
+import { useMount, useUnmount, useEvent } from "react-use";
 import { toast } from "react-toastify";
 
 import Header from "./header/header";
@@ -12,6 +12,7 @@ import { defaultHTML } from "../utils/consts";
 import Tabs from "./tabs/tabs";
 import AskAI from "./ask-ai/ask-ai";
 import { Auth } from "../utils/types";
+import Preview from "./preview/preview";
 
 function App() {
   const preview = useRef<HTMLDivElement>(null);
@@ -55,6 +56,13 @@ function App() {
     document.removeEventListener("mouseup", handleMouseUp);
   };
 
+  useEvent("beforeunload", (e) => {
+    if (isAiWorking || html !== defaultHTML) {
+      e.preventDefault();
+      return "";
+    }
+  });
+
   useMount(() => {
     fetchMe();
     if (!editor.current || !preview.current) return;
@@ -95,7 +103,7 @@ function App() {
             }
           }}
         >
-          <Tabs>{/* <Settings /> */}</Tabs>
+          <Tabs />
           <Editor
             language="html"
             theme="vs-dark"
@@ -131,18 +139,12 @@ function App() {
           ref={resizer}
           className="bg-gray-700 hover:bg-blue-500 w-2 cursor-col-resize h-[calc(100dvh-54px)]"
         />
-        <div
+        <Preview
+          html={html}
+          isResizing={isResizing}
+          isAiWorking={isAiWorking}
           ref={preview}
-          className="w-full border-l border-gray-900 bg-white h-[calc(100dvh-54px)]"
-        >
-          <iframe
-            title="output"
-            className={classNames("w-full h-full select-none", {
-              "pointer-events-none": isResizing || isAiWorking,
-            })}
-            srcDoc={html}
-          />
-        </div>
+        />
       </main>
       <main className="lg:hidden p-5">
         <p className="p-5 bg-red-500/10 text-red-500 rounded-md text-base text-pretty">

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

@@ -21,6 +21,7 @@ function AskAI({
 }) {
   const [open, setOpen] = useState(false);
   const [prompt, setPrompt] = useState("");
+  const [hasAsked, setHasAsked] = useState(false);
 
   const callAi = async () => {
     if (isAiWorking) return;
@@ -57,6 +58,7 @@ function AskAI({
             toast.success("AI responded successfully");
             setPrompt("");
             setisAiWorking(false);
+            setHasAsked(true);
             return;
           }
 
@@ -97,7 +99,9 @@ function AskAI({
           type="text"
           disabled={isAiWorking}
           className="w-full bg-transparent outline-none pl-3 text-white placeholder:text-gray-500 font-code"
-          placeholder="Ask AI anything..."
+          placeholder={
+            hasAsked ? "What do you want to ask AI next?" : "Ask AI anything..."
+          }
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
           onKeyDown={(e) => {

src/components/login/login.tsx

@@ -11,7 +11,7 @@ function Login({ children }: { children?: React.ReactNode }) {
         {children}
         <a href="/api/login">
           <img
-            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-md-dark.svg"
+            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg-dark.svg"
             alt="Sign in with Hugging Face"
             className="mx-auto"
           />

src/components/preview/preview.tsx

@@ -0,0 +1,53 @@
+import classNames from "classnames";
+import { useRef } from "react";
+import { TbReload } from "react-icons/tb";
+
+function Preview({
+  html,
+  isResizing,
+  isAiWorking,
+  ref,
+}: {
+  html: string;
+  isResizing: boolean;
+  isAiWorking: boolean;
+  ref: React.RefObject<HTMLDivElement | null>;
+}) {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  const handleRefreshIframe = () => {
+    if (iframeRef.current) {
+      const iframe = iframeRef.current;
+      const content = iframe.srcdoc;
+      iframe.srcdoc = "";
+      setTimeout(() => {
+        iframe.srcdoc = content;
+      }, 10);
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      className="w-full border-l border-gray-900 bg-white h-[calc(100dvh-54px)] relative"
+    >
+      <iframe
+        ref={iframeRef}
+        title="output"
+        className={classNames("w-full h-full select-none", {
+          "pointer-events-none": isResizing || isAiWorking,
+        })}
+        srcDoc={html}
+      />
+      <button
+        className="bg-gray-900 shadow-md text-white text-sm font-medium absolute bottom-5 right-5 py-2 px-4 rounded-lg flex items-center gap-2 border border-gray-800 hover:brightness-150 transition-all duration-100 cursor-pointer"
+        onClick={handleRefreshIframe}
+      >
+        <TbReload />
+        Refresh Preview
+      </button>
+    </div>
+  );
+}
+
+export default Preview;