@ray-js/t-agent-ui-ray 0.1.1 → 0.1.3-beta-1

package/dist/MarkdownRender/BlockParser.d.ts

@@ -14,5 +14,12 @@ export declare class BlockParser {
     parse(input: string): MarkdownBlock[];
     private split;
     private parseBlock;
+    private processHtmlForStreaming;
+    private smartCompleteOrTruncateHtml;
+    private tryCompleteIncompleteHtml;
+    private canSafelyCompleteTag;
+    private completeOpenTag;
+    private removeIncompleteHtmlTags;
+    private findLastCompleteTagPosition;
     private lineToPosition;
 }

package/dist/MarkdownRender/BlockParser.js

@@ -13,7 +13,9 @@ import MarkdownIt from 'markdown-it';
 import { full as emoji } from 'markdown-it-emoji';
 import footnote from 'markdown-it-footnote';
 import { generateId } from '@ray-js/t-agent';
-const md = new MarkdownIt();
+const md = new MarkdownIt({
+  html: true // 允许 HTML 标签
+});
 function addClassToTag(MD) {
   // 拦截所有的 token
   MD.core.ruler.push('_add_class_to_tags', state => {
@@ -125,27 +127,6 @@ export class BlockParser {
   }
   parse(input) {
     this.list = this.parseBlock(input);
-    // if (!this.currentInput) {
-    //   // 第一次解析
-    //   this.list = this.parseBlock(input)
-    // } else if (input.length < this.currentInput.length) {
-    //   // 长度有减少，重新开始
-    //   this.list = this.parseBlock(input)
-    // } else if (input === this.currentInput) {
-    //   // 完全相等不需要处理
-    //   return this.list
-    // } else if (input.startsWith(this.currentInput)) {
-    //   // 继续解析
-    //   const last = this.list.pop() // 丢弃掉最后一个 block
-    //   const position = this.lineToPosition(last.map[0], input)
-    //   const delta = input.slice(position)
-    //   const blocks = this.parseBlock(delta)
-    //   this.list = this.list.concat(blocks)
-    // } else {
-    //   // 完全不匹配，重新开始
-    //   this.list = this.parseBlock(input)
-    // }
-
     this.currentInput = input;
     return this.list;
   }
@@ -176,8 +157,11 @@ export class BlockParser {
   }
   parseBlock(input) {
     const _input = input.replace(/\\n/g, '<br>').replace(/\\<br>/g, '<br>').replace(/\\"/g, '"');
+
+    // 在markdown渲染之前先处理HTML完整性，避免不完整HTML被原样输出
+    const processedInput = this.processHtmlForStreaming(_input);
     this.pendingBlocks = [];
-    const html = md.render(_input, {
+    const html = md.render(processedInput, {
       blockParser: this
     });
     if (!this.pendingBlocks.length) {
@@ -230,6 +214,189 @@ export class BlockParser {
     }
     return blocks;
   }
+  processHtmlForStreaming(html) {
+    if (!html || typeof html !== 'string') {
+      return html;
+    }
+
+    // 尝试智能补全不完整的HTML，如果无法补全则安全截断
+    return this.smartCompleteOrTruncateHtml(html);
+  }
+  smartCompleteOrTruncateHtml(html) {
+    // 首先尝试智能补全
+    const completed = this.tryCompleteIncompleteHtml(html);
+    if (completed !== html) {
+      return completed;
+    }
+
+    // 如果无法补全，则进行安全截断
+    return this.removeIncompleteHtmlTags(html);
+  }
+  tryCompleteIncompleteHtml(html) {
+    // 检测末尾的不完整标签
+    const incompleteTagMatch = html.match(/<([a-zA-Z][a-zA-Z0-9]*)[^>]*$/);
+    if (!incompleteTagMatch) {
+      return html; // 没有不完整标签
+    }
+    const [fullMatch, tagName] = incompleteTagMatch;
+    const beforeTag = html.slice(0, incompleteTagMatch.index);
+
+    // 检查这个标签是否是自闭合标签
+
+    if (['img', 'br', 'hr', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'].includes(tagName.toLowerCase())) {
+      // 自闭合标签，尝试补全为自闭合形式
+      return beforeTag + "<".concat(tagName, " />");
+    }
+
+    // 普通标签，检查是否可以安全补全
+    if (this.canSafelyCompleteTag(fullMatch, tagName)) {
+      // 尝试补全开始标签并立即闭合
+      const completedOpenTag = this.completeOpenTag(fullMatch);
+      return beforeTag + completedOpenTag + "</".concat(tagName, ">");
+    }
+
+    // 无法安全补全，返回原内容以便后续截断处理
+    return html;
+  }
+  canSafelyCompleteTag(incompleteTag, tagName) {
+    // 只对常见的、相对安全的标签进行补全
+
+    if (!['div', 'span', 'p', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong', 'em', 'b', 'i', 'u'].includes(tagName.toLowerCase())) {
+      return false;
+    }
+
+    // 检查标签是否看起来是在正常的属性声明中
+    // 如果包含未闭合的引号，可能不安全
+    const quoteCount = (incompleteTag.match(/"/g) || []).length;
+    if (quoteCount % 2 !== 0) {
+      return false; // 有未闭合的引号
+    }
+    return true;
+  }
+  completeOpenTag(incompleteTag) {
+    // 简单的标签补全：如果没有以>结尾，就加上>
+    if (!incompleteTag.endsWith('>')) {
+      return incompleteTag + '>';
+    }
+    return incompleteTag;
+  }
+  removeIncompleteHtmlTags(html) {
+    // 找到最后一个不完整的开始标签
+    const lastOpenTagMatch = html.match(/<[^>]*$/);
+    if (lastOpenTagMatch) {
+      // 移除不完整的开始标签
+      return html.slice(0, lastOpenTagMatch.index);
+    }
+
+    // 检查是否有未闭合的标签
+    const openTags = [];
+    const tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g;
+    let match;
+    let processedHtml = html;
+
+    // 重新构建，确保标签配对
+    while ((match = tagRegex.exec(html)) !== null) {
+      const [fullMatch, tagName] = match;
+      const isClosingTag = fullMatch.startsWith('</');
+      const isSelfClosing = fullMatch.endsWith('/>') || ['img', 'br', 'hr', 'input'].includes(tagName.toLowerCase());
+      if (isSelfClosing) {
+        continue;
+      }
+      if (isClosingTag) {
+        // 移除对应的开始标签
+        const lastOpenIndex = openTags.lastIndexOf(tagName.toLowerCase());
+        if (lastOpenIndex !== -1) {
+          openTags.splice(lastOpenIndex, 1);
+        }
+      } else {
+        // 添加开始标签
+        openTags.push(tagName.toLowerCase());
+      }
+    }
+
+    // 如果有未闭合的标签，检查是否是在流式渲染过程中的正常情况
+    if (openTags.length > 0) {
+      // 检查未闭合的标签是否都是常见的容器标签，可能是流式渲染中的正常状态
+      const commonContainerTags = ['div', 'span', 'p', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong', 'em', 'b', 'i', 'u'];
+      const hasOnlyCommonTags = openTags.every(tag => commonContainerTags.includes(tag));
+      if (hasOnlyCommonTags && openTags.length <= 3) {
+        // 如果只有少量常见的容器标签未闭合，可能是流式渲染中的正常状态
+        // 尝试保留更多内容，只在必要时才截断
+        const lastTagMatch = html.match(/<[^>]*>(?:[^<]*)$/);
+        if (lastTagMatch && lastTagMatch.index !== undefined) {
+          // 检查最后的内容是否看起来完整
+          const afterLastTag = html.slice(lastTagMatch.index + lastTagMatch[0].length);
+          if (afterLastTag.trim().length > 0 && !afterLastTag.includes('<')) {
+            // 最后有完整的文本内容，保留整个HTML
+            return html;
+          }
+        }
+      }
+
+      // 找到最后一个完整标签对的位置
+      const safeEndIndex = this.findLastCompleteTagPosition(html);
+      if (safeEndIndex > 0 && safeEndIndex < html.length) {
+        // 只有在能找到安全截断点时才进行截断
+        processedHtml = html.slice(0, safeEndIndex);
+      } else {
+        // 如果找不到安全截断点，保留原始HTML
+        // 在流式渲染中，不完整的标签可能会在后续的渲染中被补全
+        return html;
+      }
+    }
+    return processedHtml;
+  }
+  findLastCompleteTagPosition(html) {
+    const stack = [];
+    const tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g;
+    let match;
+    let lastCompletePos = 0;
+    while ((match = tagRegex.exec(html)) !== null) {
+      const [fullMatch, tagName] = match;
+      const isClosingTag = fullMatch.startsWith('</');
+      const isSelfClosing = fullMatch.endsWith('/>') || ['img', 'br', 'hr', 'input'].includes(tagName.toLowerCase());
+      if (isSelfClosing) {
+        lastCompletePos = match.index + fullMatch.length;
+        continue;
+      }
+      if (isClosingTag) {
+        // 查找对应的开始标签
+        let found = false;
+        for (let i = stack.length - 1; i >= 0; i--) {
+          if (stack[i].tag === tagName.toLowerCase()) {
+            stack.splice(i, 1);
+            found = true;
+            // 更新最后完整位置到这个闭合标签的结束位置
+            lastCompletePos = match.index + fullMatch.length;
+            break;
+          }
+        }
+        // 如果没有找到匹配的开始标签，可能是流式渲染中的部分内容，保持原有位置
+        if (!found) {
+          // 不更新lastCompletePos，保持之前的完整位置
+        }
+      } else {
+        stack.push({
+          tag: tagName.toLowerCase(),
+          pos: match.index
+        });
+        // 对于开始标签，如果当前没有未闭合的标签，更新完整位置
+        if (stack.length === 1) {
+          // 这是一个新的顶级标签，暂时认为到开始标签结束是安全的
+          // 但不更新lastCompletePos，等待对应的闭合标签
+        }
+      }
+    }
+
+    // 如果栈为空，说明所有标签都已闭合，整个HTML都是完整的
+    if (stack.length === 0) {
+      return html.length;
+    }
+
+    // 如果还有未闭合的标签，但我们有一些完整的内容，返回最后的完整位置
+    // 如果lastCompletePos为0，说明没有找到任何完整的标签对
+    return lastCompletePos;
+  }
   lineToPosition(lineNumber, input) {
     let position = 0;
     if (lineNumber === 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.1.1",
+  "version": "0.1.3-beta-1",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -41,5 +41,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "e97f7ef72e4d5d366b5bf923525ca2e064248ab5"
+  "gitHead": "faf2ae5ea59b9dec9752b1e532acd4898964ea7e"
 }