Merge pull request #3 from novitalabs/feat/interaction-optimization

src/components/preview.tsx

@@ -3,7 +3,7 @@
 import { useState, forwardRef, useImperativeHandle, useEffect, useRef } from "react"
 import { DEFAULT_HTML } from "@/lib/constants"
 import { PreviewRef, Version } from "@/lib/types"
-import { MinimizeIcon, MaximizeIcon, DownloadIcon } from "./ui/fullscreen-icons"
+import { MinimizeIcon, MaximizeIcon, DownloadIcon, RefreshIcon } from "./ui/icons"
 import { useModel } from "@/lib/contexts/model-context"
 import { Loader2 } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -27,6 +27,7 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
   const [isPartialGenerating, setIsPartialGenerating] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showAuthError, setShowAuthError] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
   const { selectedModelId } = useModel();
   const renderCount = useRef(0);
   const headUpdated = useRef(false);
@@ -103,6 +104,11 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
     document.body.removeChild(a);
   };
 
+  const refreshPreview = () => {
+    if (!html) return;
+    setRefreshKey(prev => prev + 1);
+  };
+
   const generateCode = async (prompt: string, colors: string[] = [], previousPrompt?: string) => {
     setLoading(true);
     renderCount.current = 0;
@@ -265,6 +271,14 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       )}
       <div className="bg-white text-black h-full overflow-hidden relative isolation-auto">
         <div className="absolute top-3 right-3 flex gap-2 z-[100]">
+          <button
+            onClick={refreshPreview}
+            className="bg-novita-gray/90 text-white p-2 rounded-md shadow-md hover:bg-novita-gray/70 transition-colors flex items-center justify-center"
+            aria-label="Refresh Preview"
+            title="Refresh Preview"
+          >
+            <RefreshIcon />
+          </button>
           <button
             onClick={downloadHtml}
             className="bg-novita-gray/90 text-white p-2 rounded-md shadow-md hover:bg-novita-gray/70 transition-colors flex items-center justify-center"
@@ -283,6 +297,7 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
           </button>
         </div>
         <iframe
+          key={refreshKey}
           className={cn("relative z-10 w-full h-full select-none", {
             "pointer-events-none": loading,
           })}

src/components/ui/{fullscreen-icons.tsx → icons.tsx}

@@ -28,4 +28,15 @@ export function DownloadIcon() {
       <line x1="12" y1="15" x2="12" y2="3"></line>
     </svg>
   )
+}
+
+export function RefreshIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
+      <path d="M21 3v5h-5"></path>
+      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
+      <path d="M3 21v-5h5"></path>
+    </svg>
+  )
 }