update live preview

components/editor/index.tsx

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

components/editor/live-preview/index.tsx

@@ -1,165 +0,0 @@
-"use client";
-
-import {
-  useState,
-  useEffect,
-  useRef,
-  forwardRef,
-  useImperativeHandle,
-} from "react";
-import classNames from "classnames";
-
-import { Button } from "@/components/ui/button";
-import { Maximize, Minimize } from "lucide-react";
-
-interface LivePreviewProps {
-  currentPageData: { path: string; html: string } | undefined;
-  isAiWorking: boolean;
-  defaultHTML: string;
-  className?: string;
-}
-
-export interface LivePreviewRef {
-  reset: () => void;
-}
-
-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);
-
-    const reset = () => {
-      setIsMaximized(false);
-      setDisplayedHtml("");
-      latestHtmlRef.current = "";
-      displayedHtmlRef.current = "";
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-
-    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;
-        }
-        return;
-      }
-
-      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]);
-
-    useEffect(() => {
-      return () => {
-        if (intervalRef.current) {
-          clearInterval(intervalRef.current);
-          intervalRef.current = null;
-        }
-      };
-    }, []);
-
-    if (!displayedHtml) {
-      return 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
-        )}
-      >
-        <div
-          className={classNames(
-            "flex flex-col animate-in fade-in duration-300",
-            isMaximized ? "w-[90dvw] lg: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>
-              {isAiWorking && (
-                <span className="text-xs text-green-600 font-medium animate-pulse">
-                  • Updating
-                </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" />
-                )}
-              </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>
-    );
-  }
-);
-
-LivePreview.displayName = "LivePreview";

components/editor/preview/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState, useEffect, forwardRef } from "react";
+import { useRef, useState, useEffect } from "react";
 import { useUpdateEffect } from "react-use";
 import classNames from "classnames";
 
@@ -12,236 +12,266 @@ import { htmlTagToText } from "@/lib/html-tag-to-text";
 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, 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 = forwardRef<LivePreviewRef, { isNew: boolean }>(
-  ({ isNew }, ref) => {
-    const {
-      project,
-      device,
-      isLoadingProject,
-      currentTab,
-      currentCommit,
-      setCurrentCommit,
-      currentPageData,
-      pages,
-      setPages,
-      setCurrentPage,
-      isSameHtml,
-    } = useEditor();
-    const {
-      isEditableModeEnabled,
-      setSelectedElement,
-      isAiWorking,
-      globalAiLoading,
-    } = useAi();
+export const Preview = ({ isNew }: { isNew: boolean }) => {
+  const {
+    project,
+    device,
+    isLoadingProject,
+    currentTab,
+    currentCommit,
+    setCurrentCommit,
+    currentPageData,
+    pages,
+    setPages,
+    setCurrentPage,
+    isSameHtml,
+  } = 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>("");
+  const [throttledHtml, setThrottledHtml] = useState<string>("");
+  const lastUpdateTimeRef = useRef<number>(0);
 
-    useEffect(() => {
-      if (!isAiWorking && !globalAiLoading && currentPageData?.html) {
-        setStableHtml(currentPageData.html);
-      }
-    }, [isAiWorking, globalAiLoading, currentPageData?.html]);
+  // For new projects, throttle HTML updates to every 3 seconds
+  useEffect(() => {
+    if (isNew && currentPageData?.html) {
+      const now = Date.now();
+      const timeSinceLastUpdate = now - lastUpdateTimeRef.current;
 
-    useEffect(() => {
-      if (
-        currentPageData?.html &&
-        !stableHtml &&
-        !isAiWorking &&
-        !globalAiLoading
-      ) {
-        setStableHtml(currentPageData.html);
+      // If this is the first update or 3 seconds have passed, update immediately
+      if (lastUpdateTimeRef.current === 0 || timeSinceLastUpdate >= 3000) {
+        setThrottledHtml(currentPageData.html);
+        lastUpdateTimeRef.current = now;
+      } else {
+        // Otherwise, schedule an update for when 3 seconds will have passed
+        const timeUntilNextUpdate = 3000 - timeSinceLastUpdate;
+        const timer = setTimeout(() => {
+          setThrottledHtml(currentPageData.html);
+          lastUpdateTimeRef.current = Date.now();
+        }, timeUntilNextUpdate);
+        return () => clearTimeout(timer);
       }
-    }, [currentPageData?.html, stableHtml, isAiWorking, globalAiLoading]);
+    }
+  }, [isNew, 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 (!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]);
 
-      if (iframeRef?.current) {
+  useUpdateEffect(() => {
+    const cleanupListeners = () => {
+      if (iframeRef?.current?.contentDocument) {
         const iframeDocument = iframeRef.current.contentDocument;
-        if (iframeDocument) {
-          cleanupListeners();
+        iframeDocument.removeEventListener("mouseover", handleMouseOver);
+        iframeDocument.removeEventListener("mouseout", handleMouseOut);
+        iframeDocument.removeEventListener("click", handleClick);
+      }
+    };
 
-          if (isEditableModeEnabled) {
-            iframeDocument.addEventListener("mouseover", handleMouseOver);
-            iframeDocument.addEventListener("mouseout", handleMouseOut);
-            iframeDocument.addEventListener("click", handleClick);
-          }
+    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);
         }
       }
+    }
 
-      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;
-              }
-              current = current.parentElement as HTMLElement;
+  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;
             }
-            return null;
-          };
+            current = current.parentElement as HTMLElement;
+          }
+          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" });
-                }
-                return;
+            if (href.includes("#") && !href.includes(".html")) {
+              const targetElement = iframeDocument.querySelector(href);
+              if (targetElement) {
+                targetElement.scrollIntoView({ behavior: "smooth" });
               }
+              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 overflow-hidden": currentTab === "chat",
-            "max-lg:h-full": currentTab === "preview",
-          }
+  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 overflow-hidden": 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"
         )}
-      >
-        <GridPattern
-          x={-1}
-          y={-1}
-          strokeDasharray={"4 2"}
-          className={cn(
-            "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)] opacity-40"
-          )}
-        />
-        {!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>
+      />
+      {!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 ? (
+        <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="Fetching your project..." className="flex-col" />
+            <AnimatedBlobs />
+            <AnimatedBlobs />
           </div>
-        )}
-        {isNew && !isLoadingProject && !globalAiLoading && isSameHtml ? (
+        </div>
+      ) : (
+        <>
           <iframe
+            id="preview-iframe"
+            ref={iframeRef}
             className={classNames(
               "w-full select-none transition-all duration-200 bg-black h-full",
               {
@@ -249,110 +279,80 @@ export const Preview = forwardRef<LivePreviewRef, { isNew: boolean }>(
                   device === "mobile",
               }
             )}
-            srcDoc={defaultHTML}
-          />
-        ) : (isNew && globalAiLoading) || isLoadingProject ? (
-          <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",
-                          }
+            src={
+              currentCommit
+                ? `https://${project?.space_id?.replaceAll(
+                    "/",
+                    "-"
+                  )}--rev-${currentCommit.slice(0, 7)}.static.hf.space`
+                : undefined
+            }
+            srcDoc={
+              !currentCommit
+                ? isNew
+                  ? throttledHtml || defaultHTML
+                  : 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"
                         );
-                      }
-                      // 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
-                          );
-                        });
-                      }
+                      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"
-            />
-            <div
-              className={classNames(
-                "w-full h-full flex items-center justify-center absolute left-0 top-0 bg-black/40 backdrop-blur-lg transition-all duration-200",
-                {
-                  "opacity-0 pointer-events-none": !globalAiLoading,
-                }
-              )}
-            >
-              <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 />
+                : 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"
+          />
+          {!isNew && (
+            <>
+              <div
+                className={classNames(
+                  "w-full h-full flex items-center justify-center absolute left-0 top-0 bg-black/40 backdrop-blur-lg transition-all duration-200",
+                  {
+                    "opacity-0 pointer-events-none": !globalAiLoading,
+                  }
+                )}
+              >
+                <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>
               </div>
-            </div>
-            <HistoryNotification
-              isVisible={!!currentCommit}
-              isPromotingVersion={isPromotingVersion}
-              onPromoteVersion={promoteVersion}
-              onGoBackToCurrent={() => setCurrentCommit(null)}
-            />
-          </>
-        )}
-      </div>
-    );
-  }
-);
-
-Preview.displayName = "Preview";
+              <HistoryNotification
+                isVisible={!!currentCommit}
+                isPromotingVersion={isPromotingVersion}
+                onPromoteVersion={promoteVersion}
+                onGoBackToCurrent={() => setCurrentCommit(null)}
+              />
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

hooks/useAi.ts

@@ -9,10 +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";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
 
-export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefObject<LivePreviewRef | null>) => {
+export const useAi = (onScrollToBottom?: () => void) => {
   const client = useQueryClient();
   const audio = useRef<HTMLAudioElement | null>(null);
   const { setPages, setCurrentPage, setPrompts, prompts, pages, project, setProject, commits, setCommits, setLastSavedPages, isSameHtml } = useEditor();
@@ -121,10 +120,6 @@ export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefO
       });
       if (response.data.ok) {
         setIsAiWorking(false);
-        // Reset live preview when project is created
-        if (livePreviewRef?.current) {
-          livePreviewRef.current.reset();
-        }
         router.replace(`/${response.data.space.project.space_id}`);
         setProject(response.data.space);
         setProjects([...projects, response.data.space]);
@@ -133,9 +128,6 @@ export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefO
       }
     } else {
       setIsAiWorking(false);
-      if (livePreviewRef?.current) {
-        livePreviewRef.current.reset();
-      }
       toast.success("AI responded successfully");
       if (audio.current) audio.current.play();
     }
@@ -479,10 +471,6 @@ export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefO
     }
     setIsAiWorking(false);
     setIsThinking(false);
-    // Reset live preview when request is aborted
-    if (livePreviewRef?.current) {
-      livePreviewRef.current.reset();
-    }
   };
 
   const selectedModel = useMemo(() => {