byt-lingxiao-ai 0.2.5 → 0.2.7

package/components/utils/StreamParser.js

@@ -0,0 +1,277 @@
+/**
+ * SSE (Server-Sent Events) 流解析器
+ * 优化点：
+ * 1. 使用状态机模式处理标签解析
+ * 2. 批量更新减少DOM操作
+ * 3. 内存优化：避免频繁字符串拼接
+ * 4. 可配置的更新频率
+ */
+export class StreamParser {
+  constructor(options = {}) {
+    this.options = {
+      updateInterval: 16, // 更新间隔(ms)，默认约60fps
+      batchSize: 100, // 批处理大小
+      debug: false, // 是否开启调试
+      ...options
+    };
+
+    this.reset();
+  }
+
+  /**
+   * 重置解析器状态
+   */
+  reset() {
+    this.buffer = '';
+    this.contentBuffer = []; // 使用数组缓冲，避免频繁字符串拼接
+    this.thinkingBuffer = [];
+    this.inTag = false;
+    this.tagBuffer = '';
+    this.updateTimer = null;
+    this.status = 'output'; // thinking | output
+    this.metrics = {
+      startTime: Date.now(),
+      chunks: 0,
+      events: 0,
+      chars: 0
+    };
+  }
+
+  /**
+   * 处理流数据块
+   * @param {string} chunk - 接收到的数据块
+   * @param {Function} callback - 更新回调函数
+   */
+  processChunk(chunk, callback) {
+    this.metrics.chunks++;
+    this.buffer += chunk;
+
+    // SSE 格式：事件由双换行符分隔
+    const events = this.buffer.split('\n\n');
+    
+    // 保留最后一个可能不完整的事件
+    this.buffer = events.pop() || '';
+
+    // 处理完整的事件
+    for (const event of events) {
+      if (event.trim()) {
+        this.metrics.events++;
+        this.processEvent(event, callback);
+      }
+    }
+  }
+
+  /**
+   * 处理单个SSE事件
+   */
+  processEvent(eventStr, callback) {
+    const lines = eventStr.split('\n');
+    
+    for (const line of lines) {
+      // 解析 data: 行
+      if (line.startsWith('data:')) {
+        const data = line.substring(5).trim();
+        
+        if (data === '[DONE]') {
+          this.flush(callback);
+          return;
+        }
+
+        try {
+          const parsed = JSON.parse(data);
+          const content = parsed?.choices?.[0]?.delta?.content;
+          
+          if (content) {
+            this.metrics.chars += content.length;
+            this.parseContent(content, callback);
+          }
+        } catch (error) {
+          if (this.options.debug) {
+            console.warn('[StreamParser] JSON解析失败:', data);
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * 使用状态机解析内容和标签
+   */
+  parseContent(content, callback) {
+    let i = 0;
+    
+    while (i < content.length) {
+      if (this.inTag) {
+        // 在标签内部，查找标签结束
+        const endIndex = content.indexOf('>', i);
+        
+        if (endIndex !== -1) {
+          // 找到标签结束
+          this.tagBuffer += content.substring(i, endIndex + 1);
+          this.handleTag(this.tagBuffer);
+          this.tagBuffer = '';
+          this.inTag = false;
+          i = endIndex + 1;
+        } else {
+          // 标签未结束，缓存剩余部分
+          this.tagBuffer += content.substring(i);
+          break;
+        }
+      } else {
+        // 不在标签内，查找标签开始
+        const startIndex = content.indexOf('<', i);
+        
+        if (startIndex !== -1) {
+          // 找到标签开始，先处理前面的文本
+          if (startIndex > i) {
+            this.appendText(content.substring(i, startIndex));
+          }
+          
+          // 检查是否是完整标签
+          const endIndex = content.indexOf('>', startIndex);
+          if (endIndex !== -1) {
+            // 完整标签
+            const tag = content.substring(startIndex, endIndex + 1);
+            this.handleTag(tag);
+            i = endIndex + 1;
+          } else {
+            // 不完整标签，标记进入标签状态
+            this.inTag = true;
+            this.tagBuffer = content.substring(startIndex);
+            break;
+          }
+        } else {
+          // 没有标签，全部是文本
+          this.appendText(content.substring(i));
+          break;
+        }
+      }
+    }
+
+    // 定时批量更新
+    this.scheduleUpdate(callback);
+  }
+
+  /**
+   * 处理标签
+   */
+  handleTag(tag) {
+    const tagName = tag.toLowerCase();
+    
+    if (tagName === '<think>') {
+      this.status = 'thinking';
+    } else if (tagName === '</think>') {
+      this.status = 'output';
+    }
+    // 可扩展：支持更多标签类型
+    // else if (tagName.startsWith('<code')) {
+    //   this.status = 'code';
+    // }
+  }
+
+  /**
+   * 添加文本到缓冲区
+   */
+  appendText(text) {
+    if (!text) return;
+    
+    if (this.status === 'thinking') {
+      this.thinkingBuffer.push(text);
+    } else {
+      this.contentBuffer.push(text);
+    }
+  }
+
+  /**
+   * 计划更新（防抖）
+   */
+  scheduleUpdate(callback) {
+    if (this.updateTimer) return;
+
+    this.updateTimer = setTimeout(() => {
+      this.flush(callback);
+      this.updateTimer = null;
+    }, this.options.updateInterval);
+  }
+
+  /**
+   * 立即刷新缓冲区
+   */
+  flush(callback) {
+    if (!callback) return;
+
+    const hasThinking = this.thinkingBuffer.length > 0;
+    const hasContent = this.contentBuffer.length > 0;
+
+    if (!hasThinking && !hasContent) return;
+
+    // 使用 join 比字符串拼接性能更好
+    const result = {
+      thinking: hasThinking ? this.thinkingBuffer.join('') : null,
+      content: hasContent ? this.contentBuffer.join('') : null,
+      status: this.status
+    };
+
+    // 清空缓冲区
+    this.thinkingBuffer = [];
+    this.contentBuffer = [];
+
+    // 回调更新
+    callback(result);
+  }
+
+  /**
+   * 完成解析
+   */
+  finish(callback) {
+    this.flush(callback);
+    
+    if (this.updateTimer) {
+      clearTimeout(this.updateTimer);
+      this.updateTimer = null;
+    }
+
+    if (this.options.debug) {
+      const duration = Date.now() - this.metrics.startTime;
+      console.log('[StreamParser] 解析完成:', {
+        耗时: `${duration}ms`,
+        数据块: this.metrics.chunks,
+        事件数: this.metrics.events,
+        字符数: this.metrics.chars,
+        平均速度: `${(this.metrics.chars / duration * 1000).toFixed(0)} chars/s`
+      });
+    }
+  }
+
+  /**
+   * 销毁解析器
+   */
+  destroy() {
+    if (this.updateTimer) {
+      clearTimeout(this.updateTimer);
+    }
+    this.reset();
+  }
+}
+
+/**
+ * 使用示例：
+ * 
+ * const parser = new StreamParser({ debug: true });
+ * 
+ * // 处理流
+ * for await (const chunk of stream) {
+ *   parser.processChunk(chunk, (result) => {
+ *     if (result.thinking) {
+ *       message.thinking += result.thinking;
+ *     }
+ *     if (result.content) {
+ *       message.content += result.content;
+ *     }
+ *     this.$forceUpdate();
+ *   });
+ * }
+ * 
+ * // 完成
+ * parser.finish();
+ */