visualknowledge 0.1.0 → 0.1.1

package/frontend/src/lib/streamProcessor.js

@@ -0,0 +1,205 @@
+/**
+ * StreamProcessor - 纯函数式流式文本解析器
+ *
+ * 将 SSE 流式文本按代码块边界（```mermaid / ```html / ```svg）拆分为 ContentSegment 列表。
+ * 完全无 DOM 依赖，可在任何环境运行和测试。
+ *
+ * State Machine:
+ *   text ──[检测到 ```lang]──> codeblock ──[检测到 ``` 关闭]──> text
+ */
+
+let _uidCounter = 0;
+function _nextId(prefix = 'seg') {
+  return `${prefix}_${Date.now()}_${++_uidCounter}`;
+}
+
+export class StreamProcessor {
+  constructor() {
+    this.reset();
+  }
+
+  /**
+   * 重置状态机（用于开始处理新一条消息）
+   */
+  reset() {
+    this._phase = 'text';          // 'text' | 'codeblock'
+    this._currentLang = '';         // '' | 'mermaid' | 'html' | 'svg'
+    this._buffer = '';              // 当前阶段累积的文本缓冲区
+    this._tickCount = 0;            // 反引号计数器
+    this._segments = [];            // 已完成的段列表
+    this._activeText = '';          // 当前活跃的文字段内容
+  }
+
+  /**
+   * 输入新的文本块
+   * @param {string} chunk - 从 SSE 接收的新文本片段
+   */
+  feed(chunk) {
+    // 过滤 [VISUALIZE:] 标签
+    chunk = chunk.replace(/^\[VISUALIZE:\s*(yes|no)\]\s*\n?/m, '');
+
+    if (this._phase === 'text') {
+      this._activeText += chunk;
+
+      // 检测代码块起始
+      const hit = this._detectBlockStart(chunk);
+      if (hit) {
+        this._phase = 'codeblock';
+        this._currentLang = hit.lang;
+        this._buffer = '';
+        this._tickCount = 0;
+
+        // 冻结当前文字为 text segment
+        const before = this._activeText.substring(0, hit.absIdx);
+        if (before.trim()) {
+          this._segments.push({
+            id: _nextId('txt'),
+            type: 'text',
+            content: before,
+            renderedContent: null,
+            renderStatus: 'pending',
+            renderError: null,
+          });
+        }
+
+        // 创建新的 codeblock segment 占位（content 将在 codeblock 阶段累积）
+        this._segments.push({
+          id: _nextId(this._currentLang),
+          type: this._currentLang,
+          content: '',
+          renderedContent: null,
+          renderStatus: 'pending',
+          renderError: null,
+        });
+
+        // 重置文字累积
+        this._activeText = '';
+        return;
+      }
+
+      // 仍在 text 阶段，无需特殊处理（调用方会 getSegments）
+      return;
+    }
+
+    // === codeblock 阶段 ===
+    for (let i = 0; i < chunk.length; i++) {
+      const ch = chunk[i];
+      if (ch === '`') {
+        this._tickCount++;
+      } else {
+        if (this._tickCount >= 3) {
+          // 检测到代码块关闭
+          this._phase = 'text';
+          this._tickCount = 0;
+
+          // 更新当前 codeblock segment 的 content
+          const codeSeg = this._segments[this._segments.length - 1];
+          if (codeSeg) {
+            codeSeg.content = this._buffer;
+          }
+
+          this._buffer = '';
+          this._currentLang = '';
+
+          // 开始新的文字累积
+          this._activeText = '';
+          continue; // 跳过当前字符（它是关闭 ``` 的一部分）
+        }
+        if (this._tickCount > 0) {
+          this._buffer += '`'.repeat(this._tickCount);
+          this._tickCount = 0;
+        }
+        this._buffer += ch;
+      }
+    }
+  }
+
+  /**
+   * 获取当前所有已解析的段列表
+   * 包含：
+   * - 已完成冻结的 segments
+   * - 当前活跃的 text 段（如果有的话，作为最后一个 segment 返回）
+   * - 当前活跃的 codeblock 段（如果在 codeblock 阶段）
+   * @returns {Array} ContentSegment[]
+   */
+  getSegments() {
+    // 返回 segments 的快照，包含当前活跃段
+    const result = [...this._segments];
+
+    // 如果有活跃的文字段且不在 segments 中，追加它
+    if (this._phase === 'text' && this._activeText) {
+      // 检查是否已有未完成的 text segment（最后一个 segment 可能是待更新的 text）
+      const lastSeg = result[result.length - 1];
+      if (lastSeg && lastSeg.type === 'text' && lastSeg.renderStatus === 'pending' && !lastSeg.content) {
+        // 更新已有的空 text segment
+        lastSeg.content = this._activeText;
+      } else if (this._activeText.trim()) {
+        result.push({
+          id: _nextId('txt_live'),
+          type: 'text',
+          content: this._activeText,
+          renderedContent: null,
+          renderStatus: 'pending',
+          renderError: null,
+        });
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * 结束流式解析，返回最终段列表
+   * 处理未闭合的 codeblock 等边缘情况
+   * @returns {Array} ContentSegment[]
+   */
+  finalize() {
+    // 如果仍在 codeblock 阶段，强制结束
+    if (this._phase === 'codeblock') {
+      const codeSeg = this._segments[this._segments.length - 1];
+      if (codeSeg) {
+        codeSeg.content = this._buffer;
+      }
+      this._phase = 'text';
+    }
+
+    // 收集最终文字段
+    if (this._activeText.trim()) {
+      // 去重：检查最后是否已有相同内容的 text segment
+      const lastSeg = this._segments[this._segments.length - 1];
+      if (!(lastSeg && lastSeg.type === 'text' && lastSeg.content === this._activeText)) {
+        this._segments.push({
+          id: _nextId('txt_final'),
+          type: 'text',
+          content: this._activeText,
+          renderedContent: null,
+          renderStatus: 'pending',
+          renderError: null,
+        });
+      }
+    }
+
+    return this._segments;
+  }
+
+  /**
+   * 在最新文本中检测代码块起始标记
+   * @param {string} newChunk - 最新接收到的文本块
+   * @returns {{ lang: string, absIdx: number } | null}
+   * @private
+   */
+  _detectBlockStart(newChunk) {
+    const lookback = this._activeText.substring(
+      Math.max(0, this._activeText.length - 30)
+    );
+    for (const lang of ['mermaid', 'html', 'svg']) {
+      const marker = '```' + lang;
+      const idx = lookback.lastIndexOf(marker);
+      if (idx !== -1) {
+        const absIdx = this._activeText.length - lookback.length + idx;
+        return { lang, absIdx };
+      }
+    }
+    return null;
+  }
+}

package/frontend/src/main.js

@@ -0,0 +1,16 @@
+/**
+ * Application Entry Point
+ *
+ * 使用 React 18 createRoot API 挂载根组件。
+ */
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App.jsx';
+
+const rootEl = document.getElementById('root');
+if (!rootEl) {
+  throw new Error('Root element #root not found in DOM');
+}
+
+createRoot(rootEl).render(React.createElement(App));

package/frontend/src/utils/escape.js

@@ -0,0 +1,10 @@
+/**
+ * HTML entity escaping utility
+ */
+export function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

package/frontend/styles/base.css

@@ -0,0 +1,7 @@
+/* Reset & Base Layout */
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%;overflow:hidden}
+body{
+  font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);
+  display:flex;flex-direction:column;
+}

package/frontend/styles/chat-area.css

@@ -0,0 +1,24 @@
+/* Chat Area */
+.chat-area{
+  flex:1;overflow-y:auto;padding:0;display:flex;flex-direction:column;
+  scroll-behavior:smooth;
+}
+.chat-area::-webkit-scrollbar{width:6px}
+.chat-area::-webkit-scrollbar-track{background:transparent}
+.chat-area::-webkit-scrollbar-thumb{background:#ffffff15;border-radius:3px}
+.chat-area::-webkit-scrollbar-thumb:hover{background:#ffffff25}
+
+.messages{max-width:768px;width:100%;margin:0 auto;padding:16px 24px;flex:1}
+
+.welcome{
+  display:flex;flex-direction:column;align-items:center;justify-content:center;
+  height:100%;gap:16px;opacity:0.7;text-align:center;padding:40px;
+}
+.welcome .icon{
+  width:64px;height:64px;border-radius:20px;
+  background:linear-gradient(135deg,#d97706,#f59e0b);
+  display:flex;align-items:center;justify-content:center;
+  font-size:28px;color:#fff;
+}
+.welcome h2{font-size:22px;font-weight:600;color:var(--text-primary)}
+.welcome p{color:var(--text-muted);font-size:14px;line-height:1.6;max-width:400px}

package/frontend/styles/input-area.css

@@ -0,0 +1,37 @@
+/* Input Area */
+.input-area{
+  padding:12px 24px 20px;flex-shrink:0;
+  background:linear-gradient(to top,var(--bg-primary) 60%,transparent);
+}
+.input-wrapper{
+  max-width:768px;margin:0 auto;position:relative;
+  background:var(--bg-input);border:1px solid var(--border-light);
+  border-radius:var(--radius-xl);transition:border-color 0.2s;
+}
+.input-wrapper:focus-within{border-color:var(--accent)}
+.input-wrapper textarea{
+  width:100%;background:none;border:none;color:var(--text-primary);
+  padding:14px 56px 14px 18px;font-size:15px;line-height:1.6;
+  resize:none;outline:none;min-height:24px;max-height:200px;
+  font-family:var(--font-sans);
+}
+.input-wrapper textarea::placeholder{color:var(--text-faint)}
+.send-btn{
+  position:absolute;right:10px;bottom:8px;width:36px;height:36px;
+  border-radius:10px;border:none;cursor:pointer;
+  background:var(--accent);color:#fff;
+  display:flex;align-items:center;justify-content:center;
+  transition:all 0.2s;opacity:0.4;
+}
+.send-btn.active{opacity:1}
+.send-btn:hover{transform:scale(1.05);background:var(--accent-hover)}
+.send-btn svg{width:18px;height:18px}
+
+.typing-indicator{display:flex;align-items:center;gap:4px;padding:4px 0}
+.typing-indicator span{
+  width:6px;height:6px;border-radius:50%;background:var(--text-muted);
+  animation:blink 1.4s infinite;
+}
+.typing-indicator span:nth-child(2){animation-delay:0.2s}
+.typing-indicator span:nth-child(3){animation-delay:0.4s}
+@keyframes blink{0%,60%,100%{opacity:0.3}30%{opacity:1}}

package/frontend/styles/markdown.css

@@ -0,0 +1,50 @@
+/* Markdown Rendering */
+.message.assistant .content strong{color:var(--text-primary);font-weight:600}
+.message.assistant .content em{color:var(--text-secondary);font-style:italic}
+.message.assistant .content code{
+  background:var(--blockquote-bg);border:1px solid var(--border-light);
+  padding:1px 6px;border-radius:4px;font-size:13px;
+  font-family:var(--font-mono);color:var(--color-yellow);
+}
+.message.assistant .content pre{
+  background:var(--code-bg);border:1px solid var(--code-border);
+  border-radius:var(--radius);padding:14px 18px;margin:12px 0;
+  overflow-x:auto;
+}
+.message.assistant .content pre code{
+  background:none;border:none;padding:0;color:var(--text-secondary);font-size:13px;
+}
+.message.assistant .content ul,.message.assistant .content ol{
+  margin:8px 0 8px 24px;
+}
+.message.assistant .content li{margin-bottom:4px;line-height:1.7}
+.message.assistant .content h1,.message.assistant .content h2,.message.assistant .content h3{
+  color:var(--text-primary);font-weight:700;margin:20px 0 8px;
+}
+.message.assistant .content h2{font-size:17px}
+.message.assistant .content h3{font-size:16px}
+.message.assistant .content hr{
+  border:none;border-top:1px solid var(--border-light);margin:16px 0;
+}
+.message.assistant .content blockquote{
+  border-left:3px solid var(--accent);padding:4px 14px;margin:10px 0;
+  color:var(--text-muted);background:var(--blockquote-bg);border-radius:0 8px 8px 0;
+}
+.message.assistant .content table{
+  border-collapse:collapse;margin:12px 0;width:100%;
+}
+.message.assistant .content th,.message.assistant .content td{
+  border:1px solid var(--border-light);padding:8px 12px;text-align:left;
+}
+.message.assistant .content th{
+  background:var(--table-header-bg);font-weight:600;color:var(--text-primary);
+}
+.message.assistant .content tr:nth-child(even){background:var(--table-even-bg)}
+.message.assistant .content a{color:var(--color-blue);text-decoration:none}
+.message.assistant .content a:hover{text-decoration:underline}
+.message.assistant .content img{max-width:100%;border-radius:var(--radius)}
+
+/* KaTeX 数学公式主题适配 */
+.message.assistant .content .katex-display{margin:14px 0;overflow-x:auto}
+.message.assistant .content .katex{color:var(--text-primary);font-size:1em}
+[data-theme="light"] .message.assistant .content .katex{color:#1c1917}

package/frontend/styles/message.css

@@ -0,0 +1,24 @@
+/* Message Bubbles */
+.message{margin-bottom:24px;animation:fadeIn 0.3s ease}
+@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+
+.message.user .bubble{
+  background:var(--bg-user-msg);border:1px solid var(--border-light);
+  border-radius:var(--radius-xl) var(--radius-xl) 4px var(--radius-xl);
+  padding:12px 18px;margin-left:48px;max-width:85%;
+  font-size:15px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
+  color:var(--text-primary);
+}
+.message.assistant .avatar{
+  width:28px;height:28px;border-radius:8px;
+  background:linear-gradient(135deg,#d97706,#f59e0b);
+  display:flex;align-items:center;justify-content:center;
+  font-weight:700;font-size:12px;color:#fff;margin-bottom:8px;
+}
+.message.assistant .content{
+  font-size:15px;line-height:1.8;color:var(--text-primary);
+  padding-left:2px;
+}
+.message.assistant .content p{margin-bottom:12px}
+.message.assistant .content p:last-child{margin-bottom:0}
+.message.assistant .content .text-part{margin-bottom:4px}

package/frontend/styles/top-bar.css

@@ -0,0 +1,32 @@
+/* Top Bar */
+.top-bar{
+  height:48px;display:flex;align-items:center;justify-content:space-between;
+  padding:0 16px;border-bottom:1px solid var(--border-light);flex-shrink:0;
+  background:var(--bg-primary);
+}
+.top-bar .left{display:flex;align-items:center;gap:10px}
+.top-bar .logo{
+  width:28px;height:28px;border-radius:8px;
+  background:linear-gradient(135deg,#d97706,#f59e0b);
+  display:flex;align-items:center;justify-content:center;
+  font-weight:700;font-size:14px;color:#fff;
+}
+.top-bar h1{font-size:15px;font-weight:600;letter-spacing:-0.3px;color:var(--text-primary)}
+.top-bar .model-select{
+  background:var(--bg-tertiary);border:1px solid var(--border-light);
+  color:var(--text-secondary);padding:4px 10px;border-radius:8px;
+  font-size:12px;cursor:pointer;outline:none;
+}
+.top-bar .model-select:hover{border-color:var(--accent)}
+
+.theme-toggle{
+  background:var(--bg-tertiary);border:1px solid var(--border-light);
+  color:var(--text-muted);width:34px;height:34px;border-radius:8px;
+  display:flex;align-items:center;justify-content:center;cursor:pointer;
+  transition:all 0.2s;
+}
+.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
+.theme-toggle .icon-sun{display:none}
+.theme-toggle .icon-moon{display:block}
+[data-theme="light"] .theme-toggle .icon-sun{display:block}
+[data-theme="light"] .theme-toggle .icon-moon{display:none}

package/frontend/styles/variables.css

@@ -0,0 +1,74 @@
+/* CSS Variables & Theme Definitions */
+:root{
+  --bg-primary:#1c1917;
+  --bg-secondary:#1c1917;
+  --bg-tertiary:#292524;
+  --bg-input:#292524;
+  --bg-hover:#3f3a36;
+  --bg-user-msg:#2a2520;
+  --text-primary:#fafaf9;
+  --text-secondary:#d6d3d1;
+  --text-muted:#a8a29e;
+  --text-faint:#78716c;
+  --accent:#d97706;
+  --accent-soft:#d9770620;
+  --accent-hover:#f59e0b;
+  --border:#ffffff0a;
+  --border-light:#ffffff12;
+  --border-medium:#ffffff1a;
+  --radius:12px;
+  --radius-lg:16px;
+  --radius-xl:20px;
+  --shadow:0 4px 24px rgba(0,0,0,0.4);
+  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+  --font-mono:'SF Mono',CaskaydiaCove Nerd Font,'Cascadia Code',Consolas,monospace;
+  --color-amber:#f59e0b;
+  --color-blue:#60a5fa;
+  --color-purple:#a78bfa;
+  --color-green:#4ade80;
+  --color-rose:#fb7185;
+  --color-teal:#2dd4bf;
+  --color-orange:#fb923c;
+  --color-yellow:#fbbf24;
+  --code-bg:#0c0a09;
+  --code-border:#ffffff12;
+  --blockquote-bg:#ffffff03;
+  --table-header-bg:#292524;
+  --table-even-bg:#ffffff03;
+  --widget-bg:#1c1917;
+  --widget-header-bg:#292524;
+}
+[data-theme="light"]{
+  --bg-primary:#fafaf9;
+  --bg-secondary:#fafaf9;
+  --bg-tertiary:#f5f5f4;
+  --bg-input:#f5f5f4;
+  --bg-hover:#e7e5e4;
+  --bg-user-msg:#f0ede8;
+  --text-primary:#1c1917;
+  --text-secondary:#44403c;
+  --text-muted:#78716c;
+  --text-faint:#a8a29e;
+  --accent:#d97706;
+  --accent-soft:#d9770615;
+  --accent-hover:#b45309;
+  --border:#00000008;
+  --border-light:#0000000d;
+  --border-medium:#00000015;
+  --shadow:0 4px 24px rgba(0,0,0,0.08);
+  --color-amber:#d97706;
+  --color-blue:#2563eb;
+  --color-purple:#7c3aed;
+  --color-green:#16a34a;
+  --color-rose:#e11d48;
+  --color-teal:#0d9488;
+  --color-orange:#ea580c;
+  --color-yellow:#ca8a04;
+  --code-bg:#f5f5f4;
+  --code-border:#e7e5e4;
+  --blockquote-bg:#00000003;
+  --table-header-bg:#f5f5f4;
+  --table-even-bg:#00000002;
+  --widget-bg:#ffffff;
+  --widget-header-bg:#f5f5f4;
+}

package/frontend/styles/widget.css

@@ -0,0 +1,62 @@
+/* Widget Containers & Fullscreen Overlay */
+.widget-container{
+  margin:14px 0;border:1px solid var(--border-light);
+  border-radius:var(--radius-lg);overflow:hidden;
+  background:var(--widget-bg);
+}
+.widget-container .widget-header{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:10px 16px;border-bottom:1px solid var(--border);
+  background:var(--widget-header-bg);
+}
+.widget-container .widget-header .left{display:flex;align-items:center;gap:8px}
+.widget-container .widget-header .badge{
+  background:var(--accent-soft);color:var(--accent);
+  padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;
+}
+.widget-container .widget-header .widget-type{font-size:13px;color:var(--text-muted)}
+.widget-container .widget-header .btn{
+  background:none;border:1px solid var(--border-light);color:var(--text-muted);
+  padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;
+  transition:all 0.2s;
+}
+.widget-container .widget-header .btn:hover{border-color:var(--accent);color:var(--accent)}
+.widget-container .widget-body{
+  padding:0;display:flex;justify-content:center;overflow:auto;
+  min-height:100px;
+}
+.widget-container .widget-body svg{max-width:100%;height:auto}
+.widget-container .widget-loading{
+  padding:30px;display:flex;align-items:center;justify-content:center;gap:10px;
+  color:var(--text-muted);font-size:13px;
+}
+.widget-container .widget-loading .spinner{
+  width:18px;height:18px;border:2px solid var(--border-light);
+  border-top-color:var(--accent);border-radius:50%;
+  animation:spin 0.8s linear infinite;
+}
+@keyframes spin{to{transform:rotate(360deg)}}
+.widget-error{
+  padding:16px;color:var(--color-rose);font-size:13px;
+  background:var(--accent-soft);border-radius:var(--radius);margin:10px;
+}
+
+.widget-fullscreen-overlay{
+  position:fixed;inset:0;z-index:1000;background:var(--bg-primary);
+  display:none;flex-direction:column;
+}
+.widget-fullscreen-overlay.active{display:flex}
+.widget-fullscreen-overlay .fs-header{
+  height:48px;display:flex;align-items:center;justify-content:space-between;
+  padding:0 16px;border-bottom:1px solid var(--border-light);flex-shrink:0;
+  background:var(--bg-primary);
+}
+.widget-fullscreen-overlay .fs-header .left{display:flex;align-items:center;gap:8px}
+.widget-fullscreen-overlay .fs-close{
+  background:none;border:1px solid var(--border-light);color:var(--text-muted);
+  padding:4px 14px;border-radius:8px;font-size:13px;cursor:pointer;
+}
+.widget-fullscreen-overlay .fs-close:hover{border-color:var(--accent);color:var(--accent)}
+.widget-fullscreen-overlay iframe{
+  flex:1;width:100%;border:none;
+}

package/package.json

@@ -1 +1,29 @@
-{"name": "visualknowledge", "version": "0.1.0", "description": "Interactive AI Chat with Visualization - one-click launch via npx", "bin": {"visualknowledge": "./bin/visualknowledge.js"}, "files": ["bin/", "index.html", "server.py", "skills/"], "keywords": ["ai", "chat", "visualization", "claude", "mermaid"], "license": "MIT", "engines": {"node": ">=16"}, "repository": {"type": "git", "url": "https://github.com/user/VisualKnowledge"}}
+{
+    "name": "visualknowledge",
+    "version": "0.1.1",
+    "description": "Interactive AI Chat with Visualization - one-click launch via npx",
+    "bin": {
+        "visualknowledge": "./bin/visualknowledge.js"
+    },
+    "files": [
+        "bin/",
+        "frontend/",
+        "server.py",
+        "skills/"
+    ],
+    "keywords": [
+        "ai",
+        "chat",
+        "visualization",
+        "claude",
+        "mermaid"
+    ],
+    "license": "MIT",
+    "engines": {
+        "node": ">=16"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/user/VisualKnowledge"
+    }
+}