visualknowledge 0.2.1 → 0.2.3

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

@@ -6,67 +6,33 @@
  */
 
 import { html } from 'htm/react';
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { WidgetContainer } from './WidgetContainer.jsx';
 
 export function HtmlWidget({ html: htmlContent, onFullscreen }) {
   const iframeRef = useRef(null);
-  const [iframeReady, setIframeReady] = useState(false);
-  const [status, setStatus] = useState('loading');
 
-  // 初始化 iframe
-  useEffect(() => {
-    setIframeReady(false);
-    setStatus('loading');
-    if (iframeRef.current) {
-      iframeRef.current.src = 'about:blank';
-    }
-  }, []);
-
-  // iframe load 后写入内容
+  // 流式写入：内容到达即写入 iframe
   useEffect(() => {
+    if (!htmlContent) return;
     const iframe = iframeRef.current;
     if (!iframe) return;
-
-    const handler = () => {
-      setIframeReady(true);
-      _writeHtml(iframe, htmlContent);
-      setStatus('done');
-
-      // 调整高度
-      try {
-        const doc = iframe.contentDocument;
-        if (doc && doc.body) {
-          const h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight, 300);
-          iframe.style.height = Math.min(h + 20, 1200) + 'px';
-        }
-      } catch (e) {}
-    };
-
-    iframe.addEventListener('load', handler);
-    return () => iframe.removeEventListener('load', handler);
+    _writeHtml(iframe, htmlContent);
   }, [htmlContent]);
 
-  // 追踪内容变化，定时重新写入（支持流式更新）
-  useEffect(() => {
-    if (!iframeReady || !htmlContent) return;
-    const timer = setTimeout(() => {
-      _writeHtml(iframeRef.current, htmlContent);
-    }, 80);
-    return () => clearTimeout(timer);
-  }, [htmlContent, iframeReady]);
-
   const handleFullscreen = () => {
     if (htmlContent && onFullscreen) {
       onFullscreen(htmlContent);
     }
   };
 
+  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
@@ -85,5 +51,13 @@ function _writeHtml(iframe, content) {
     doc.open();
     doc.write(content);
     doc.close();
-  } catch (e) {}
+
+    // 调整高度
+    try {
+      const h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight, 300);
+      iframe.style.height = Math.min(h + 20, 1200) + 'px';
+    } catch (_) {}
+  } catch (e) {
+    console.warn('[HtmlWidget] write failed:', e);
+  }
 }

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

@@ -6,24 +6,37 @@
  */
 
 import { html } from 'htm/react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { WidgetContainer } from './WidgetContainer.jsx';
 import { renderMermaid, getChartType } from '../../lib/mermaidRenderer.js';
 
+const RENDER_TIMEOUT_MS = 15000;
+
 export function MermaidWidget({ code, onZoom }) {
   const [status, setStatus] = useState('loading'); // 'loading' | 'done' | 'error'
   const [svgContent, setSvgContent] = useState('');
   const [error, setError] = useState(null);
   const [chartType, setChartType] = useState('图表');
+  const timerRef = useRef(null);
 
   useEffect(() => {
     let cancelled = false;
     setStatus('loading');
     setError(null);
+    setSvgContent('');
     setChartType(getChartType(code));
 
+    // 超时保护
+    timerRef.current = setTimeout(() => {
+      if (!cancelled) {
+        setStatus('error');
+        setError('渲染超时（' + (RENDER_TIMEOUT_MS / 1000) + 's），可能是图表过于复杂');
+      }
+    }, RENDER_TIMEOUT_MS);
+
     renderMermaid(code).then(result => {
       if (cancelled) return;
+      if (timerRef.current) clearTimeout(timerRef.current);
       if (result.error) {
         setStatus('error');
         setError(result.error);
@@ -31,9 +44,18 @@ export function MermaidWidget({ code, onZoom }) {
         setStatus('done');
         setSvgContent(result.svg);
       }
+    }).catch(err => {
+      if (cancelled) return;
+      if (timerRef.current) clearTimeout(timerRef.current);
+      console.error('[MermaidWidget] Render failed:', err);
+      setStatus('error');
+      setError(err.message || String(err));
     });
 
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
   }, [code]);
 
   const handleZoom = () => {

package/frontend/src/hooks/useChat.js

@@ -14,32 +14,23 @@ import { StreamProcessor } from '../lib/streamProcessor.js';
 export function useChat() {
   const { state, dispatch } = useAppState();
   const processorRef = useRef(null);
-  const [localMessages, setLocalMessages] = useState([]);
-  const [localStreaming, setLocalStreaming] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  // 从 context 读取消息（context 在流式过程中会增量更新）
+  const messages = state.messages;
 
   /**
    * 发送消息并启动流式接收
    */
   const sendMessage = useCallback(async (text) => {
-    if (!text.trim() || localStreaming) return;
-
-    // 1. 添加用户消息
-    const userMsg = {
-      id: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`,
-      role: 'user',
-      content: text,
-      segments: [{ id: `seg_txt_user_${Date.now()}`, type: 'text', content: text, renderedContent: null, renderStatus: 'done', renderError: null }],
-      status: 'complete',
-      error: null,
-      timestamp: Date.now(),
-    };
+    if (!text.trim() || isStreaming) return;
+
+    // 1. 添加用户消息到 context
     dispatch({ type: ActionTypes.ADD_USER_MESSAGE, content: text });
-    setLocalMessages(prev => [...prev, userMsg]);
 
     // 2. 创建 AI 消息占位
     const assistantId = `msg_ast_${Date.now()}`;
     dispatch({ type: ActionTypes.START_ASSISTANT_MESSAGE, messageId: assistantId });
-    setLocalStreaming(true);
+    setIsStreaming(true);
 
     // 3. 初始化 StreamProcessor
     const processor = new StreamProcessor();
@@ -57,13 +48,13 @@ export function useChat() {
       dispatch({
         type: ActionTypes.FINALIZE_SEGMENTS,
         messageId: assistantId,
-        segments: JSON.parse(JSON.stringify(segments)), // deep clone for React re-render
+        segments: JSON.parse(JSON.stringify(segments)),
       });
     };
 
     try {
-      // 5. 发起 SSE 请求
-      const conversationHistory = [...localMessages, userMsg].map(m => ({
+      // 5. 构建对话历史（从 context 已有消息 + 当前用户消息）
+      const existingMsgs = state.messages.map(m => ({
         role: m.role,
         content: m.content,
       }));
@@ -72,7 +63,7 @@ export function useChat() {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          messages: conversationHistory,
+          messages: [...existingMsgs, { role: 'user', content: text }],
           model: state.currentModel || undefined,
         }),
       });
@@ -109,7 +100,7 @@ export function useChat() {
               messageId: assistantId,
               error: event.message || 'Unknown error',
             });
-            setLocalStreaming(false);
+            setIsStreaming(false);
             return;
           }
         }
@@ -124,21 +115,6 @@ export function useChat() {
       });
       dispatch({ type: 'COMPLETE_STREAM', messageId: assistantId });
 
-      // 更新本地 messages 列表
-      const finalText = finalSegments
-        .filter(s => s.type === 'text')
-        .map(s => s.content)
-        .join('');
-      setLocalMessages(prev => [...prev, {
-        id: assistantId,
-        role: 'assistant',
-        content: finalText,
-        segments: finalSegments,
-        status: 'complete',
-        error: null,
-        timestamp: Date.now(),
-      }]);
-
     } catch (err) {
       console.error('Chat error:', err);
       dispatch({
@@ -148,13 +124,13 @@ export function useChat() {
       });
     }
 
-    setLocalStreaming(false);
+    setIsStreaming(false);
     processorRef.current = null;
-  }, [localStreaming, state.currentModel, localMessages, dispatch]);
+  }, [isStreaming, state.currentModel, state.messages, dispatch]);
 
   return {
-    messages: localMessages,
-    isStreaming: localStreaming,
+    messages,
+    isStreaming,
     sendMessage,
   };
 }

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.1",
+    "version": "0.2.3",
     "description": "Interactive AI Chat with Visualization - one-click launch via npx",
     "bin": {
         "visualknowledge": "./bin/visualknowledge.js"

package/server.py

@@ -76,13 +76,15 @@ def static_files(path):
 
 @app.route('/api/models', methods=['GET'])
 def get_models():
+    all_models = list(dict.fromkeys([
+        MODEL,
+        os.environ.get('ANTHROPIC_DEFAULT_SONNET_MODEL', ''),
+        os.environ.get('ANTHROPIC_DEFAULT_OPUS_MODEL', ''),
+        os.environ.get('ANTHROPIC_DEFAULT_HAIKU_MODEL', ''),
+    ]))
     models = {
         'current': MODEL,
-        'available': [
-            MODEL,
-            os.environ.get('ANTHROPIC_DEFAULT_HAIKU_MODEL', 'GLM-4.5-air'),
-            os.environ.get('ANTHROPIC_DEFAULT_OPUS_MODEL', 'GLM-5.1'),
-        ]
+        'available': [m for m in all_models if m],
     }
     return jsonify(models)