visualknowledge 0.2.2 → 0.2.3

package/frontend/src/components/widgets/HtmlWidget.jsx

@@ -6,72 +6,18 @@
  */
 
 import { html } from 'htm/react';
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { WidgetContainer } from './WidgetContainer.jsx';
 
-const IFRAME_TIMEOUT_MS = 10000;
-
 export function HtmlWidget({ html: htmlContent, onFullscreen }) {
   const iframeRef = useRef(null);
-  const [status, setStatus] = useState('loading');
-  const timerRef = useRef(null);
-  const stableContentRef = useRef('');
 
-  // 检测内容是否稳定（连续相同内容说明流结束了）
+  // 流式写入：内容到达即写入 iframe
   useEffect(() => {
     if (!htmlContent) return;
-
-    // 内容变化时重置状态
-    if (htmlContent !== stableContentRef.current) {
-      setStatus('loading');
-      if (timerRef.current) clearTimeout(timerRef.current);
-    }
-
-    stableContentRef.current = htmlContent;
-  }, [htmlContent]);
-
-  // iframe 初始化 + 写入内容
-  useEffect(() => {
     const iframe = iframeRef.current;
-    if (!iframe || !htmlContent) return;
-
-    let settled = false;
-
-    const write = () => {
-      _writeHtml(iframe, htmlContent);
-      setStatus('done');
-      settled = true;
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-
-    // 首次加载或 src 变化时等待 load 事件
-    const handler = () => {
-      write();
-    };
-
-    // 超时保护：即使 load 事件没触发也强制写入
-    timerRef.current = setTimeout(() => {
-      if (!settled) {
-        console.warn('[HtmlWidget] iframe load timeout, forcing write');
-        write();
-      }
-    }, IFRAME_TIMEOUT_MS);
-
-    iframe.addEventListener('load', handler);
-
-    // 如果 iframe 已经加载完成，直接写入
-    try {
-      if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {
-        write();
-      }
-    } catch (_) {
-      // cross-origin or not ready yet, wait for load event
-    }
-
-    return () => {
-      iframe.removeEventListener('load', handler);
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
+    if (!iframe) return;
+    _writeHtml(iframe, htmlContent);
   }, [htmlContent]);
 
   const handleFullscreen = () => {
@@ -80,11 +26,13 @@ export function HtmlWidget({ html: htmlContent, onFullscreen }) {
     }
   };
 
+  const hasContent = htmlContent && htmlContent.trim().length > 0;
+
   return html`
     <${WidgetContainer}
       badge="visualize"
-      typeLabel=${status === 'loading' ? '正在生成可视化...' : '交互式可视化'}
-      status=${status}
+      typeLabel=${hasContent ? '交互式可视化' : '正在生成可视化...'}
+      status=${hasContent ? 'done' : 'loading'}
       onZoom=${handleFullscreen}
     >
       <iframe

package/frontend/src/lib/streamProcessor.js

@@ -126,6 +126,14 @@ export class StreamProcessor {
     // 返回 segments 的快照，包含当前活跃段
     const result = [...this._segments];
 
+    // 更新活跃的 codeblock segment，将流式缓冲区内容暴露给组件
+    if (this._phase === 'codeblock') {
+      const lastSeg = result[result.length - 1];
+      if (lastSeg && (lastSeg.type === 'mermaid' || lastSeg.type === 'html' || lastSeg.type === 'svg')) {
+        lastSeg.content = this._buffer;
+      }
+    }
+
     // 如果有活跃的文字段且不在 segments 中，追加它
     if (this._phase === 'text' && this._activeText) {
       // 检查是否已有未完成的 text segment（最后一个 segment 可能是待更新的 text）

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "visualknowledge",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "description": "Interactive AI Chat with Visualization - one-click launch via npx",
     "bin": {
         "visualknowledge": "./bin/visualknowledge.js"