some fixes

components/editor/index.tsx

@@ -16,6 +16,7 @@ import { AskAi } from "./ask-ai";
 import { Preview } from "./preview";
 import { SaveChangesPopup } from "./save-changes-popup";
 import Loading from "../loading";
+import { LivePreviewRef } from "./live-preview";
 
 export const AppEditor = ({
   namespace,
@@ -37,7 +38,8 @@ export const AppEditor = ({
     saveChanges,
     pages,
   } = useEditor(namespace, repoId);
-  const { isAiWorking } = useAi();
+  const livePreviewRef = useRef<LivePreviewRef>(null);
+  const { isAiWorking } = useAi(undefined, livePreviewRef);
   const [, copyToClipboard] = useCopyToClipboard();
   const [showSavePopup, setShowSavePopup] = useState(false);
 
@@ -125,7 +127,7 @@ export const AppEditor = ({
             }}
           />
         </div>
-        <Preview isNew={isNew} />
+        <Preview ref={livePreviewRef} isNew={isNew} />
       </main>
 
       {/* Save Changes Popup */}

components/editor/live-preview/index.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 import classNames from "classnames";
 
 import { Button } from "@/components/ui/button";
@@ -13,129 +19,147 @@ interface LivePreviewProps {
   className?: string;
 }
 
-export const LivePreview = ({
-  currentPageData,
-  isAiWorking,
-  defaultHTML,
-  className,
-}: LivePreviewProps) => {
-  const [isMaximized, setIsMaximized] = useState(false);
-  const [displayedHtml, setDisplayedHtml] = useState<string>("");
-  const latestHtmlRef = useRef<string>("");
-  const displayedHtmlRef = useRef<string>("");
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    displayedHtmlRef.current = displayedHtml;
-  }, [displayedHtml]);
-
-  useEffect(() => {
-    if (currentPageData?.html && currentPageData.html !== defaultHTML) {
-      latestHtmlRef.current = currentPageData.html;
-    }
-  }, [currentPageData?.html, defaultHTML]);
+export interface LivePreviewRef {
+  reset: () => void;
+}
 
-  useEffect(() => {
-    if (!currentPageData?.html || currentPageData.html === defaultHTML) {
-      return;
-    }
+export const LivePreview = forwardRef<LivePreviewRef, LivePreviewProps>(
+  ({ currentPageData, isAiWorking, defaultHTML, className }, ref) => {
+    const [isMaximized, setIsMaximized] = useState(false);
+    const [displayedHtml, setDisplayedHtml] = useState<string>("");
+    const latestHtmlRef = useRef<string>("");
+    const displayedHtmlRef = useRef<string>("");
+    const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
-    if (!displayedHtml || !isAiWorking) {
-      setDisplayedHtml(currentPageData.html);
+    const reset = () => {
+      setIsMaximized(false);
+      setDisplayedHtml("");
+      latestHtmlRef.current = "";
+      displayedHtmlRef.current = "";
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
         intervalRef.current = null;
       }
-      return;
-    }
+    };
 
-    if (isAiWorking && !intervalRef.current) {
-      intervalRef.current = setInterval(() => {
-        if (
-          latestHtmlRef.current &&
-          latestHtmlRef.current !== displayedHtmlRef.current
-        ) {
-          setDisplayedHtml(latestHtmlRef.current);
+    useImperativeHandle(ref, () => ({
+      reset,
+    }));
+
+    useEffect(() => {
+      displayedHtmlRef.current = displayedHtml;
+    }, [displayedHtml]);
+
+    useEffect(() => {
+      if (currentPageData?.html && currentPageData.html !== defaultHTML) {
+        latestHtmlRef.current = currentPageData.html;
+      }
+    }, [currentPageData?.html, defaultHTML]);
+
+    useEffect(() => {
+      if (!currentPageData?.html || currentPageData.html === defaultHTML) {
+        return;
+      }
+
+      if (!displayedHtml || !isAiWorking) {
+        setDisplayedHtml(currentPageData.html);
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
         }
-      }, 3000);
-    }
-  }, [currentPageData?.html, defaultHTML, isAiWorking, displayedHtml]);
-
-  useEffect(() => {
-    if (!isAiWorking && intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-      if (latestHtmlRef.current) {
-        setDisplayedHtml(latestHtmlRef.current);
+        return;
       }
-    }
-  }, [isAiWorking]);
 
-  useEffect(() => {
-    return () => {
-      if (intervalRef.current) {
+      if (isAiWorking && !intervalRef.current) {
+        intervalRef.current = setInterval(() => {
+          if (
+            latestHtmlRef.current &&
+            latestHtmlRef.current !== displayedHtmlRef.current
+          ) {
+            setDisplayedHtml(latestHtmlRef.current);
+          }
+        }, 3000);
+      }
+    }, [currentPageData?.html, defaultHTML, isAiWorking, displayedHtml]);
+
+    useEffect(() => {
+      if (!isAiWorking && intervalRef.current) {
         clearInterval(intervalRef.current);
         intervalRef.current = null;
+        if (latestHtmlRef.current) {
+          setDisplayedHtml(latestHtmlRef.current);
+        }
       }
-    };
-  }, []);
+    }, [isAiWorking]);
 
-  if (!displayedHtml) {
-    return null;
-  }
+    useEffect(() => {
+      return () => {
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+      };
+    }, []);
 
-  return (
-    <div
-      className={classNames(
-        "absolute z-40 bg-white/95 backdrop-blur-sm border border-neutral-200 shadow-lg transition-all duration-500 ease-out transform scale-100 opacity-100 animate-in slide-in-from-bottom-4 zoom-in-95 rounded-xl",
-        {
-          "shadow-green-500/20 shadow-2xl border-green-200": isAiWorking,
-        },
-        className
-      )}
-    >
+    if (!displayedHtml) {
+      return null;
+    }
+
+    return (
       <div
         className={classNames(
-          "flex flex-col animate-in fade-in duration-300",
-          isMaximized ? "w-[60dvw] h-[80dvh]" : "w-80 h-96"
+          "absolute z-40 bg-white/95 backdrop-blur-sm border border-neutral-200 shadow-lg transition-all duration-500 ease-out transform scale-100 opacity-100 animate-in slide-in-from-bottom-4 zoom-in-95 rounded-xl",
+          {
+            "shadow-green-500/20 shadow-2xl border-green-200": isAiWorking,
+          },
+          className
         )}
       >
-        <div className="flex items-center justify-between p-3 border-b border-neutral-200">
-          <div className="flex items-center gap-2">
-            <div className="size-2 bg-green-500 rounded-full animate-pulse shadow-sm shadow-green-500/50"></div>
-            <span className="text-xs font-medium text-neutral-800">
-              Live Preview
-            </span>
-            {isAiWorking && (
-              <span className="text-xs text-green-600 font-medium animate-pulse">
-                • Updating
+        <div
+          className={classNames(
+            "flex flex-col animate-in fade-in duration-300",
+            isMaximized ? "w-[60dvw] h-[80dvh]" : "w-80 h-96"
+          )}
+        >
+          <div className="flex items-center justify-between p-3 border-b border-neutral-200">
+            <div className="flex items-center gap-2">
+              <div className="size-2 bg-green-500 rounded-full animate-pulse shadow-sm shadow-green-500/50"></div>
+              <span className="text-xs font-medium text-neutral-800">
+                Live Preview
               </span>
-            )}
-          </div>
-          <div className="flex items-center gap-1">
-            <Button
-              variant="outline"
-              size="iconXs"
-              className="!rounded-md !border-neutral-200 hover:bg-neutral-50"
-              onClick={() => setIsMaximized(!isMaximized)}
-            >
-              {isMaximized ? (
-                <Minimize className="text-neutral-400 size-3" />
-              ) : (
-                <Maximize className="text-neutral-400 size-3" />
+              {isAiWorking && (
+                <span className="text-xs text-green-600 font-medium animate-pulse">
+                  • Updating
+                </span>
               )}
-            </Button>
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="iconXs"
+                className="!rounded-md !border-neutral-200 hover:bg-neutral-50"
+                onClick={() => setIsMaximized(!isMaximized)}
+              >
+                {isMaximized ? (
+                  <Minimize className="text-neutral-400 size-3" />
+                ) : (
+                  <Maximize className="text-neutral-400 size-3" />
+                )}
+              </Button>
+            </div>
+          </div>
+          <div className="flex-1 bg-black overflow-hidden relative rounded-b-xl">
+            <iframe
+              className="w-full h-full border-0"
+              srcDoc={displayedHtml}
+              sandbox="allow-scripts allow-same-origin"
+              title="Live Preview"
+            />
           </div>
-        </div>
-        <div className="flex-1 bg-black overflow-hidden relative rounded-b-xl">
-          <iframe
-            className="w-full h-full border-0"
-            srcDoc={displayedHtml}
-            sandbox="allow-scripts allow-same-origin"
-            title="Live Preview"
-          />
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
+
+LivePreview.displayName = "LivePreview";

components/editor/preview/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, forwardRef } from "react";
 import { useUpdateEffect } from "react-use";
 import classNames from "classnames";
 
@@ -13,266 +13,234 @@ import { AnimatedBlobs } from "@/components/animated-blobs";
 import { AiLoading } from "../ask-ai/loading";
 import { defaultHTML } from "@/lib/consts";
 import { Button } from "@/components/ui/button";
-import { LivePreview } from "../live-preview";
+import { LivePreview, LivePreviewRef } from "../live-preview";
 import { HistoryNotification } from "../history-notification";
 import { AlertCircle } from "lucide-react";
 import { api } from "@/lib/api";
 import { toast } from "sonner";
 import Loading from "@/components/loading";
 
-export const Preview = ({ isNew }: { isNew: boolean }) => {
-  const {
-    project,
-    device,
-    isLoadingProject,
-    currentTab,
-    currentCommit,
-    setCurrentCommit,
-    currentPageData,
-    pages,
-    setPages,
-    setCurrentPage,
-  } = useEditor();
-  const {
-    isEditableModeEnabled,
-    setSelectedElement,
-    isAiWorking,
-    globalAiLoading,
-  } = useAi();
+export const Preview = forwardRef<LivePreviewRef, { isNew: boolean }>(
+  ({ isNew }, ref) => {
+    const {
+      project,
+      device,
+      isLoadingProject,
+      currentTab,
+      currentCommit,
+      setCurrentCommit,
+      currentPageData,
+      pages,
+      setPages,
+      setCurrentPage,
+    } = useEditor();
+    const {
+      isEditableModeEnabled,
+      setSelectedElement,
+      isAiWorking,
+      globalAiLoading,
+    } = useAi();
 
-  const iframeRef = useRef<HTMLIFrameElement>(null);
+    const iframeRef = useRef<HTMLIFrameElement>(null);
 
-  const [hoveredElement, setHoveredElement] = useState<{
-    tagName: string;
-    rect: { top: number; left: number; width: number; height: number };
-  } | null>(null);
-  const [isPromotingVersion, setIsPromotingVersion] = useState(false);
-  const [stableHtml, setStableHtml] = useState<string>("");
+    const [hoveredElement, setHoveredElement] = useState<{
+      tagName: string;
+      rect: { top: number; left: number; width: number; height: number };
+    } | null>(null);
+    const [isPromotingVersion, setIsPromotingVersion] = useState(false);
+    const [stableHtml, setStableHtml] = useState<string>("");
 
-  useEffect(() => {
-    if (!isAiWorking && !globalAiLoading && currentPageData?.html) {
-      setStableHtml(currentPageData.html);
-    }
-  }, [isAiWorking, globalAiLoading, currentPageData?.html]);
-
-  useEffect(() => {
-    if (
-      currentPageData?.html &&
-      !stableHtml &&
-      !isAiWorking &&
-      !globalAiLoading
-    ) {
-      setStableHtml(currentPageData.html);
-    }
-  }, [currentPageData?.html, stableHtml, isAiWorking, globalAiLoading]);
+    useEffect(() => {
+      if (!isAiWorking && !globalAiLoading && currentPageData?.html) {
+        setStableHtml(currentPageData.html);
+      }
+    }, [isAiWorking, globalAiLoading, currentPageData?.html]);
 
-  useUpdateEffect(() => {
-    const cleanupListeners = () => {
-      if (iframeRef?.current?.contentDocument) {
-        const iframeDocument = iframeRef.current.contentDocument;
-        iframeDocument.removeEventListener("mouseover", handleMouseOver);
-        iframeDocument.removeEventListener("mouseout", handleMouseOut);
-        iframeDocument.removeEventListener("click", handleClick);
+    useEffect(() => {
+      if (
+        currentPageData?.html &&
+        !stableHtml &&
+        !isAiWorking &&
+        !globalAiLoading
+      ) {
+        setStableHtml(currentPageData.html);
       }
-    };
+    }, [currentPageData?.html, stableHtml, isAiWorking, globalAiLoading]);
+
+    useUpdateEffect(() => {
+      const cleanupListeners = () => {
+        if (iframeRef?.current?.contentDocument) {
+          const iframeDocument = iframeRef.current.contentDocument;
+          iframeDocument.removeEventListener("mouseover", handleMouseOver);
+          iframeDocument.removeEventListener("mouseout", handleMouseOut);
+          iframeDocument.removeEventListener("click", handleClick);
+        }
+      };
 
-    if (iframeRef?.current) {
-      const iframeDocument = iframeRef.current.contentDocument;
-      if (iframeDocument) {
-        cleanupListeners();
+      if (iframeRef?.current) {
+        const iframeDocument = iframeRef.current.contentDocument;
+        if (iframeDocument) {
+          cleanupListeners();
 
-        if (isEditableModeEnabled) {
-          iframeDocument.addEventListener("mouseover", handleMouseOver);
-          iframeDocument.addEventListener("mouseout", handleMouseOut);
-          iframeDocument.addEventListener("click", handleClick);
+          if (isEditableModeEnabled) {
+            iframeDocument.addEventListener("mouseover", handleMouseOver);
+            iframeDocument.addEventListener("mouseout", handleMouseOut);
+            iframeDocument.addEventListener("click", handleClick);
+          }
         }
       }
-    }
 
-    return cleanupListeners;
-  }, [iframeRef, isEditableModeEnabled]);
+      return cleanupListeners;
+    }, [iframeRef, isEditableModeEnabled]);
 
-  const promoteVersion = async () => {
-    setIsPromotingVersion(true);
-    await api
-      .post(
-        `/me/projects/${project?.space_id}/commits/${currentCommit}/promote`
-      )
-      .then((res) => {
-        if (res.data.ok) {
-          setCurrentCommit(null);
-          setPages(res.data.pages);
-          setCurrentPage(res.data.pages[0].path);
-          toast.success("Version promoted successfully");
-        }
-      })
-      .catch((err) => {
-        toast.error(err.response.data.error);
-      });
-    setIsPromotingVersion(false);
-  };
+    const promoteVersion = async () => {
+      setIsPromotingVersion(true);
+      await api
+        .post(
+          `/me/projects/${project?.space_id}/commits/${currentCommit}/promote`
+        )
+        .then((res) => {
+          if (res.data.ok) {
+            setCurrentCommit(null);
+            setPages(res.data.pages);
+            setCurrentPage(res.data.pages[0].path);
+            toast.success("Version promoted successfully");
+          }
+        })
+        .catch((err) => {
+          toast.error(err.response.data.error);
+        });
+      setIsPromotingVersion(false);
+    };
 
-  const handleMouseOver = (event: MouseEvent) => {
-    if (iframeRef?.current) {
-      const iframeDocument = iframeRef.current.contentDocument;
-      if (iframeDocument) {
-        const targetElement = event.target as HTMLElement;
-        if (
-          hoveredElement?.tagName !== targetElement.tagName ||
-          hoveredElement?.rect.top !==
-            targetElement.getBoundingClientRect().top ||
-          hoveredElement?.rect.left !==
-            targetElement.getBoundingClientRect().left ||
-          hoveredElement?.rect.width !==
-            targetElement.getBoundingClientRect().width ||
-          hoveredElement?.rect.height !==
-            targetElement.getBoundingClientRect().height
-        ) {
-          if (targetElement !== iframeDocument.body) {
-            const rect = targetElement.getBoundingClientRect();
-            setHoveredElement({
-              tagName: targetElement.tagName,
-              rect: {
-                top: rect.top,
-                left: rect.left,
-                width: rect.width,
-                height: rect.height,
-              },
-            });
-            targetElement.classList.add("hovered-element");
-          } else {
-            return setHoveredElement(null);
+    const handleMouseOver = (event: MouseEvent) => {
+      if (iframeRef?.current) {
+        const iframeDocument = iframeRef.current.contentDocument;
+        if (iframeDocument) {
+          const targetElement = event.target as HTMLElement;
+          if (
+            hoveredElement?.tagName !== targetElement.tagName ||
+            hoveredElement?.rect.top !==
+              targetElement.getBoundingClientRect().top ||
+            hoveredElement?.rect.left !==
+              targetElement.getBoundingClientRect().left ||
+            hoveredElement?.rect.width !==
+              targetElement.getBoundingClientRect().width ||
+            hoveredElement?.rect.height !==
+              targetElement.getBoundingClientRect().height
+          ) {
+            if (targetElement !== iframeDocument.body) {
+              const rect = targetElement.getBoundingClientRect();
+              setHoveredElement({
+                tagName: targetElement.tagName,
+                rect: {
+                  top: rect.top,
+                  left: rect.left,
+                  width: rect.width,
+                  height: rect.height,
+                },
+              });
+              targetElement.classList.add("hovered-element");
+            } else {
+              return setHoveredElement(null);
+            }
           }
         }
       }
-    }
-  };
-  const handleMouseOut = () => {
-    setHoveredElement(null);
-  };
-  const handleClick = (event: MouseEvent) => {
-    if (iframeRef?.current) {
-      const iframeDocument = iframeRef.current.contentDocument;
-      if (iframeDocument) {
-        const targetElement = event.target as HTMLElement;
-        if (targetElement !== iframeDocument.body) {
-          setSelectedElement(targetElement);
+    };
+    const handleMouseOut = () => {
+      setHoveredElement(null);
+    };
+    const handleClick = (event: MouseEvent) => {
+      if (iframeRef?.current) {
+        const iframeDocument = iframeRef.current.contentDocument;
+        if (iframeDocument) {
+          const targetElement = event.target as HTMLElement;
+          if (targetElement !== iframeDocument.body) {
+            setSelectedElement(targetElement);
+          }
         }
       }
-    }
-  };
+    };
 
-  const handleCustomNavigation = (event: MouseEvent) => {
-    if (iframeRef?.current) {
-      const iframeDocument = iframeRef.current.contentDocument;
-      if (iframeDocument) {
-        const findClosestAnchor = (
-          element: HTMLElement
-        ): HTMLAnchorElement | null => {
-          let current = element;
-          while (current && current !== iframeDocument.body) {
-            if (current.tagName === "A") {
-              return current as HTMLAnchorElement;
+    const handleCustomNavigation = (event: MouseEvent) => {
+      if (iframeRef?.current) {
+        const iframeDocument = iframeRef.current.contentDocument;
+        if (iframeDocument) {
+          const findClosestAnchor = (
+            element: HTMLElement
+          ): HTMLAnchorElement | null => {
+            let current = element;
+            while (current && current !== iframeDocument.body) {
+              if (current.tagName === "A") {
+                return current as HTMLAnchorElement;
+              }
+              current = current.parentElement as HTMLElement;
             }
-            current = current.parentElement as HTMLElement;
-          }
-          return null;
-        };
+            return null;
+          };
 
-        const anchorElement = findClosestAnchor(event.target as HTMLElement);
-        if (anchorElement) {
-          let href = anchorElement.getAttribute("href");
-          if (href) {
-            event.stopPropagation();
-            event.preventDefault();
+          const anchorElement = findClosestAnchor(event.target as HTMLElement);
+          if (anchorElement) {
+            let href = anchorElement.getAttribute("href");
+            if (href) {
+              event.stopPropagation();
+              event.preventDefault();
 
-            if (href.includes("#") && !href.includes(".html")) {
-              const targetElement = iframeDocument.querySelector(href);
-              if (targetElement) {
-                targetElement.scrollIntoView({ behavior: "smooth" });
+              if (href.includes("#") && !href.includes(".html")) {
+                const targetElement = iframeDocument.querySelector(href);
+                if (targetElement) {
+                  targetElement.scrollIntoView({ behavior: "smooth" });
+                }
+                return;
               }
-              return;
-            }
 
-            href = href.split(".html")[0] + ".html";
-            const isPageExist = pages.some((page) => page.path === href);
-            if (isPageExist) {
-              setCurrentPage(href);
+              href = href.split(".html")[0] + ".html";
+              const isPageExist = pages.some((page) => page.path === href);
+              if (isPageExist) {
+                setCurrentPage(href);
+              }
             }
           }
         }
       }
-    }
-  };
+    };
 
-  return (
-    <div
-      className={classNames(
-        "bg-neutral-900/30 w-full h-[calc(100dvh-57px)] flex flex-col items-center justify-center relative z-1 lg:border-l border-neutral-800",
-        {
-          "max-lg:h-0": currentTab === "chat",
-          "max-lg:h-full": currentTab === "preview",
-        }
-      )}
-    >
-      <GridPattern
-        x={-1}
-        y={-1}
-        strokeDasharray={"4 2"}
-        className={cn(
-          "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)] opacity-40"
+    return (
+      <div
+        className={classNames(
+          "bg-neutral-900/30 w-full h-[calc(100dvh-57px)] flex flex-col items-center justify-center relative z-1 lg:border-l border-neutral-800",
+          {
+            "max-lg:h-0": currentTab === "chat",
+            "max-lg:h-full": currentTab === "preview",
+          }
         )}
-      />
-      {!isAiWorking && hoveredElement && isEditableModeEnabled && (
-        <div
-          className="cursor-pointer absolute bg-sky-500/10 border-[2px] border-dashed border-sky-500 rounded-r-lg rounded-b-lg p-3 z-10 pointer-events-none"
-          style={{
-            top: hoveredElement.rect.top,
-            left: hoveredElement.rect.left,
-            width: hoveredElement.rect.width,
-            height: hoveredElement.rect.height,
-          }}
-        >
-          <span className="bg-sky-500 rounded-t-md text-sm text-neutral-100 px-2 py-0.5 -translate-y-7 absolute top-0 left-0">
-            {htmlTagToText(hoveredElement.tagName.toLowerCase())}
-          </span>
-        </div>
-      )}
-      {isNew && !isLoadingProject ? (
-        <iframe
-          className={classNames(
-            "w-full select-none transition-all duration-200 bg-black h-full",
-            {
-              "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
-                device === "mobile",
-            }
+      >
+        <GridPattern
+          x={-1}
+          y={-1}
+          strokeDasharray={"4 2"}
+          className={cn(
+            "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)] opacity-40"
           )}
-          srcDoc={defaultHTML}
         />
-      ) : isLoadingProject || (globalAiLoading && !stableHtml) ? (
-        <div className="w-full h-full flex items-center justify-center relative">
-          <div className="py-10 w-full relative z-1 max-w-3xl mx-auto text-center">
-            <AiLoading
-              text={isLoadingProject ? "Fetching your project..." : undefined}
-              className="flex-col"
-            />
-            <AnimatedBlobs />
-            <AnimatedBlobs />
+        {!isAiWorking && hoveredElement && isEditableModeEnabled && (
+          <div
+            className="cursor-pointer absolute bg-sky-500/10 border-[2px] border-dashed border-sky-500 rounded-r-lg rounded-b-lg p-3 z-10 pointer-events-none"
+            style={{
+              top: hoveredElement.rect.top,
+              left: hoveredElement.rect.left,
+              width: hoveredElement.rect.width,
+              height: hoveredElement.rect.height,
+            }}
+          >
+            <span className="bg-sky-500 rounded-t-md text-sm text-neutral-100 px-2 py-0.5 -translate-y-7 absolute top-0 left-0">
+              {htmlTagToText(hoveredElement.tagName.toLowerCase())}
+            </span>
           </div>
-          {!isLoadingProject && (
-            <LivePreview
-              currentPageData={currentPageData}
-              isAiWorking={isAiWorking}
-              defaultHTML={defaultHTML}
-              className="bottom-4 left-4"
-            />
-          )}
-        </div>
-      ) : (
-        <>
+        )}
+        {isNew && !isLoadingProject && !globalAiLoading ? (
           <iframe
-            id="preview-iframe"
-            ref={iframeRef}
             className={classNames(
               "w-full select-none transition-all duration-200 bg-black h-full",
               {
@@ -280,51 +248,91 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
                   device === "mobile",
               }
             )}
-            src={
-              currentCommit
-                ? `https://${project?.space_id?.replaceAll(
-                    "/",
-                    "-"
-                  )}--rev-${currentCommit.slice(0, 7)}.static.hf.space`
-                : undefined
-            }
-            srcDoc={!currentCommit ? stableHtml : undefined}
-            onLoad={
-              !currentCommit
-                ? () => {
-                    if (iframeRef?.current?.contentWindow?.document?.body) {
-                      iframeRef.current.contentWindow.document.body.scrollIntoView(
-                        {
-                          block: isAiWorking ? "end" : "start",
-                          inline: "nearest",
-                          behavior: isAiWorking ? "instant" : "smooth",
-                        }
-                      );
-                    }
-                    // add event listener to all links in the iframe to handle navigation
-                    if (iframeRef?.current?.contentWindow?.document) {
-                      const links =
-                        iframeRef.current.contentWindow.document.querySelectorAll(
-                          "a"
+            srcDoc={defaultHTML}
+          />
+        ) : isLoadingProject || globalAiLoading ? (
+          <div className="w-full h-full flex items-center justify-center relative">
+            <div className="py-10 w-full relative z-1 max-w-3xl mx-auto text-center">
+              <AiLoading
+                text={isLoadingProject ? "Fetching your project..." : undefined}
+                className="flex-col"
+              />
+              <AnimatedBlobs />
+              <AnimatedBlobs />
+            </div>
+            {!isLoadingProject && (
+              <LivePreview
+                ref={ref}
+                currentPageData={currentPageData}
+                isAiWorking={isAiWorking}
+                defaultHTML={defaultHTML}
+                className="bottom-4 left-4"
+              />
+            )}
+          </div>
+        ) : (
+          <>
+            <iframe
+              id="preview-iframe"
+              ref={iframeRef}
+              className={classNames(
+                "w-full select-none transition-all duration-200 bg-black h-full",
+                {
+                  "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
+                    device === "mobile",
+                }
+              )}
+              src={
+                currentCommit
+                  ? `https://${project?.space_id?.replaceAll(
+                      "/",
+                      "-"
+                    )}--rev-${currentCommit.slice(0, 7)}.static.hf.space`
+                  : undefined
+              }
+              srcDoc={!currentCommit ? stableHtml : undefined}
+              onLoad={
+                !currentCommit
+                  ? () => {
+                      if (iframeRef?.current?.contentWindow?.document?.body) {
+                        iframeRef.current.contentWindow.document.body.scrollIntoView(
+                          {
+                            block: isAiWorking ? "end" : "start",
+                            inline: "nearest",
+                            behavior: isAiWorking ? "instant" : "smooth",
+                          }
                         );
-                      links.forEach((link) => {
-                        link.addEventListener("click", handleCustomNavigation);
-                      });
+                      }
+                      // add event listener to all links in the iframe to handle navigation
+                      if (iframeRef?.current?.contentWindow?.document) {
+                        const links =
+                          iframeRef.current.contentWindow.document.querySelectorAll(
+                            "a"
+                          );
+                        links.forEach((link) => {
+                          link.addEventListener(
+                            "click",
+                            handleCustomNavigation
+                          );
+                        });
+                      }
                     }
-                  }
-                : undefined
-            }
-            sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
-            allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-read; clipboard-write; display-capture; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; serial; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
-          />
-          <HistoryNotification
-            isVisible={!!currentCommit}
-            isPromotingVersion={isPromotingVersion}
-            onPromoteVersion={promoteVersion}
-            onGoBackToCurrent={() => setCurrentCommit(null)}
-          />
-        </>
-      )}
-    </div>
-  );
-};
+                  : undefined
+              }
+              sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+              allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-read; clipboard-write; display-capture; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; serial; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
+            />
+            <HistoryNotification
+              isVisible={!!currentCommit}
+              isPromotingVersion={isPromotingVersion}
+              onPromoteVersion={promoteVersion}
+              onGoBackToCurrent={() => setCurrentCommit(null)}
+            />
+          </>
+        )}
+      </div>
+    );
+  }
+);
+
+Preview.displayName = "Preview";

components/my-projects/index.tsx

@@ -94,7 +94,7 @@ export function MyProjects() {
           )}
           {projects.map((project: ProjectType) => (
             <ProjectCard
-              key={project.name}
+              key={project.id}
               project={project}
               onDelete={() => onDelete(project)}
             />

hooks/useAi.ts

@@ -9,8 +9,9 @@ import { Page, EnhancedSettings } from "@/types";
 import { api } from "@/lib/api";
 import { useRouter } from "next/navigation";
 import { useUser } from "./useUser";
+import { LivePreviewRef } from "@/components/editor/live-preview";
 
-export const useAi = (onScrollToBottom?: () => void) => {
+export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefObject<LivePreviewRef | null>) => {
   const client = useQueryClient();
   const audio = useRef<HTMLAudioElement | null>(null);
   const { setPages, setCurrentPage, setPrompts, prompts, pages, project, setProject, commits, setCommits, setLastSavedPages } = useEditor();
@@ -111,6 +112,10 @@ export const useAi = (onScrollToBottom?: () => void) => {
     });
     if (response.data.ok) {
       setIsAiWorking(false);
+      // Reset live preview when project is created
+      if (livePreviewRef?.current) {
+        livePreviewRef.current.reset();
+      }
       router.replace(`/projects/${response.data.space.project.space_id}`);
       setProject(response.data.space);
       setProjects([...projects, response.data.space]);
@@ -459,6 +464,10 @@ export const useAi = (onScrollToBottom?: () => void) => {
     }
     setIsAiWorking(false);
     setIsThinking(false);
+    // Reset live preview when request is aborted
+    if (livePreviewRef?.current) {
+      livePreviewRef.current.reset();
+    }
   };
 
   const selectedModel = useMemo(() => {

hooks/useEditor.ts

@@ -308,11 +308,11 @@ export const useEditor = (namespace?: string, repoId?: string) => {
       setHasUnsavedChanges(false);
       setLastSavedPages([]);
       
-      client.invalidateQueries({ queryKey: ["editor.project"] });
-      client.invalidateQueries({ queryKey: ["editor.pages"] });
-      client.invalidateQueries({ queryKey: ["editor.files"] });
-      client.invalidateQueries({ queryKey: ["editor.commits"] });
-      client.invalidateQueries({ queryKey: ["editor.currentPage"] });
+      // client.invalidateQueries({ queryKey: ["editor.project"] });
+      // client.invalidateQueries({ queryKey: ["editor.pages"] });
+      // client.invalidateQueries({ queryKey: ["editor.files"] });
+      // client.invalidateQueries({ queryKey: ["editor.commits"] });
+      // client.invalidateQueries({ queryKey: ["editor.currentPage"] });
       client.invalidateQueries({ queryKey: ["editor.currentCommit"] });
       client.invalidateQueries({ queryKey: ["editor.lastSavedPages"] });
       client.invalidateQueries({ queryKey: ["editor.hasUnsavedChanges"] });