Function HtmlPreview

src/components/chat/HtmlPreview.tsx:49–211

({ code, title, onSendPrompt })

}

export const HtmlPreview: React.FC<HtmlPreviewProps> = ({ code, title, onSendPrompt }) => {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [expanded, setExpanded] = useState(false);
  const [showSource, setShowSource] = useState(false);
  const [copied, setCopied] = useState(false);
  const [iframeHeight, setIframeHeight] = useState(200);
  const theme = useUIStore((s) => s.theme);

  // Debounced srcdoc — only rebuild after code stops changing for 400ms
  // This prevents iframe reload on every streaming token
  const [debouncedCode, setDebouncedCode] = useState(code);
  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    if (debounceTimer.current) clearTimeout(debounceTimer.current);
    debounceTimer.current = setTimeout(() => {
      setDebouncedCode(code);
    }, 400);
    return () => { if (debounceTimer.current) clearTimeout(debounceTimer.current); };
  }, [code]);

  const srcdoc = React.useMemo(() => buildSrcdoc(debouncedCode, theme), [debouncedCode, theme]);

  // Measure iframe content height directly via contentDocument (same-origin allowed by sandbox)
  const pollTimers = useRef<ReturnType<typeof setTimeout>[]>([]);

  const measureHeight = useCallback(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;
    try {
      const doc = iframe.contentDocument;
      if (!doc?.body) return;
      // Wrap all body content in a measuring div to get exact height
      const h = doc.body.scrollHeight;
      if (h > 20) {
        setIframeHeight(h);
      }
    } catch {}
  }, []);

  // Poll height after load and at intervals to catch async renders (Chart.js etc)
  const startPolling = useCallback(() => {
    pollTimers.current.forEach(clearTimeout);
    pollTimers.current = [];
    [0, 100, 300, 600, 1000, 2000, 4000].forEach((delay) => {
      pollTimers.current.push(setTimeout(measureHeight, delay));
    });
  }, [measureHeight]);

  // Re-poll when debounced code changes (iframe reloads)
  useEffect(() => {
    startPolling();
    return () => pollTimers.current.forEach(clearTimeout);
  }, [debouncedCode, startPolling]);

  // Re-measure on window resize so iframe adapts when user resizes the app
  useEffect(() => {
    let resizeRaf = 0;