visualknowledge 0.2.0 → 0.2.2

package/frontend/src/App.jsx

@@ -5,6 +5,7 @@
  * 顶层聚合所有 Hooks，将数据通过 props 分发给子组件。
  */
 
+import React from 'react';
 import { html } from 'htm/react';
 import { useAppState, ActionTypes } from './context/AppContext.jsx';
 import { TopBar } from './components/TopBar.jsx';

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

@@ -9,52 +9,70 @@ import { html } from 'htm/react';
 import { useState, 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 [iframeReady, setIframeReady] = useState(false);
   const [status, setStatus] = useState('loading');
+  const timerRef = useRef(null);
+  const stableContentRef = useRef('');
 
-  // 初始化 iframe
+  // 检测内容是否稳定（连续相同内容说明流结束了）
   useEffect(() => {
-    setIframeReady(false);
-    setStatus('loading');
-    if (iframeRef.current) {
-      iframeRef.current.src = 'about:blank';
+    if (!htmlContent) return;
+
+    // 内容变化时重置状态
+    if (htmlContent !== stableContentRef.current) {
+      setStatus('loading');
+      if (timerRef.current) clearTimeout(timerRef.current);
     }
-  }, []);
 
-  // iframe load 后写入内容
+    stableContentRef.current = htmlContent;
+  }, [htmlContent]);
+
+  // iframe 初始化 + 写入内容
   useEffect(() => {
     const iframe = iframeRef.current;
-    if (!iframe) return;
+    if (!iframe || !htmlContent) return;
 
-    const handler = () => {
-      setIframeReady(true);
+    let settled = false;
+
+    const write = () => {
       _writeHtml(iframe, htmlContent);
       setStatus('done');
+      settled = true;
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
 
-      // 调整高度
-      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) {}
+    // 首次加载或 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);
-    return () => iframe.removeEventListener('load', handler);
-  }, [htmlContent]);
 
-  // 追踪内容变化，定时重新写入（支持流式更新）
-  useEffect(() => {
-    if (!iframeReady || !htmlContent) return;
-    const timer = setTimeout(() => {
-      _writeHtml(iframeRef.current, htmlContent);
-    }, 80);
-    return () => clearTimeout(timer);
-  }, [htmlContent, iframeReady]);
+    // 如果 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);
+    };
+  }, [htmlContent]);
 
   const handleFullscreen = () => {
     if (htmlContent && onFullscreen) {
@@ -85,5 +103,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/main.js

@@ -9,9 +9,55 @@ import { createRoot } from 'react-dom/client';
 import { App } from './App.jsx';
 import { AppProvider } from './context/AppContext.jsx';
 
+// ====== Error Boundary ======
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error('[ErrorBoundary] React render error:', error, errorInfo);
+    this.setState({ error, errorInfo });
+  }
+  render() {
+    if (this.state.error) {
+      return React.createElement('div', {
+        style: {
+          padding: '24px', color: '#f87171', fontFamily: 'monospace',
+          fontSize: '14px', lineHeight: '1.6', whiteSpace: 'pre-wrap',
+          overflow: 'auto', height: '100vh', background: '#1c1917',
+        }
+      },
+        React.createElement('h2', null, 'React Rendering Error'),
+        React.createElement('p', null, this.state.error.toString()),
+        React.createElement('pre', null, this.state.errorInfo?.componentStack || ''),
+      );
+    }
+    return this.props.children;
+  }
+}
+
+// ====== Bootstrap ======
+
+console.log('[main] Loading app...');
+
 const rootEl = document.getElementById('root');
 if (!rootEl) {
   throw new Error('Root element #root not found in DOM');
 }
 
-createRoot(rootEl).render(React.createElement(AppProvider, null, React.createElement(App)));
+console.log('[main] Root element found, mounting React...');
+
+createRoot(rootEl).render(
+  React.createElement(ErrorBoundary, null,
+    React.createElement(AppProvider, null,
+      React.createElement(App)
+    )
+  )
+);
+
+console.log('[main] App mounted successfully.');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "visualknowledge",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "description": "Interactive AI Chat with Visualization - one-click launch via npx",
     "bin": {
         "visualknowledge": "./bin/visualknowledge.js"
@@ -26,4 +26,4 @@
         "type": "git",
         "url": "https://github.com/user/VisualKnowledge"
     }
-}
+}

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)