feat: 增加表格和加粗斜体语法对流式输出场景的适配

Tencent · May 27, 2024 · ebc8338 · ebc8338
1 parent 88873c2
commit ebc8338
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 5 deletions.
diff --git a/examples/ai_chat.html b/examples/ai_chat.html
@@ -13,8 +13,6 @@
  margin-right: auto;
  padding: 0;
  width: 70%;
- min-width: 800px;
- height: 100%;
  }
  .one-msg {
  margin-top: 50px;
@@ -38,9 +36,11 @@
  }
  .chat-one-msg {
  display: inline-block;
+ max-width: 600px;
  }
  .buttons {
  margin-top: 50px;
+ margin-bottom: 100px;
  }
  .button {
  display: inline-block;
@@ -78,7 +78,7 @@
  </div>
  <div class="buttons">
  <div class="button j-button">
- 获取消息（<span class="j-button-tips"></span>）
+ 获取消息（剩余<span class="j-button-tips"></span>条消息）
  </div>
  <div class="status">
  <input class="j-status-input status-input" type="checkbox" checked>开启流式适配

diff --git a/examples/scripts/ai-chat-demo.js b/examples/scripts/ai-chat-demo.js
@@ -14,6 +14,12 @@ var cherryConfig = {
  },
  header: {
  anchorStyle: 'none',
+ },
+ table: {
+ selfClosing: false,
+ },
+ fontEmphasis: {
+ selfClosing: false,
  }
  }
  },
@@ -24,8 +30,12 @@ var cherryConfig = {
 };
 
 const msgList = [
- '在流式输出的情况下，文字会一个一个的输出到页面上\n在输出代码块时，cherry会自动补全代码块：\n```\nalert("hello world");\nalert("hello world");\n```\n代码块输出结束了。',
- '在输出无序列表的时候，cherry会自动修复无序列表的内容，是内容在输出时不会命中标题语法：\n- 无序列表第一行\n- 无序列表第二行\n- 无序列表第三行\n\n无序列表结束了。\n用短横线命中标题\n--\n标题结束了。',
+ '在流式输出的情况下cherry提供了更快的渲染频率（最快每**10ms渲染一次**）\n在关闭流式输出时，cherry的渲染频率为最快**50ms渲染一次**。',
+ '在流式输出的情况下输出**加粗文字时，cherry会自动补全加粗文字**。\n在流式输出的情况下输出*斜体文字时，cherry会自动补全斜体文字*。',
+ '在流式输出的情况下，文字会一个一个的输出到页面上\n在输出**代码块**时，cherry会自动补全代码块：\n```\nalert("hello world");\nalert("hello world");\n```\n代码块输出结束了。',
+ '在流式输出的情况下输出**无序列表**的时候，cherry会自动修复无序列表的内容，使内容在输出时不会命中标题语法：\n- 无序列表第一行\n- 无序列表第二行\n- 无序列表第三行\n\n无序列表结束了。\n用短横线命中标题\n--\n标题结束了。',
+ '在流式输出的情况下输出**表格**时，在输出第一行表格内容后，cherry自动补全表格的第二行：\n|项目（居中对齐）|价格（右对齐）|数量（左对齐）|\n|:-:|-:|:-|\n|计算机|￥1600|5|\n|手机机|￥12|50|\n表格输出结束了。',
+ '输出比较丰富的富媒体内容：\n## 字体样式\n\n**说明**\n\n- 使用`*(或_)` 和 `**(或__)` 表示*斜体*和 **粗体**\n- 使用 `/` 表示 /下划线/ ,使用`~~` 表示~~删除线~~\n- 使用`^(或^^)`表示^上标^或^^下标^^\n- 使用 ! 号+数字 表示字体 !24 大! !12 小! [^专有语法提醒]\n- 使用两个(三个)!号+RGB 颜色 表示!!#ff0000 字体颜色!!(!!!#f9cb9c 背景颜色!!!)[^专有语法提醒]\n\n**示例**\n\n```markdown\n[!!#ff0000 红色超链接!!](http://www.qq.com)\n[!!#ffffff !!!#000000 黑底白字超链接!!!!!](http://www.qq.com)\n[新窗口打开](http://www.qq.com){target=_blank}\n鞋子 !32 特大号!\n大头 ^`儿子`^ 和小头 ^^`爸爸`^^\n爱在~~西元前~~**当下**\n```\n\n**效果**\n[!!#ff0000 红色超链接!!](http://www.qq.com)\n[!!#ffffff !!!#000000 黑底白字超链接!!!!!](http://www.qq.com)\n[新窗口打开](http://www.qq.com){target=_blank}\n鞋子 !32 特大号!\n大头 ^`儿子`^ 和小头 ^^`爸爸`^^\n爱在~~西元前~~**当下**\n\n---\n\n## 标题设置\n\n**说明**\n\n- 在文字下方加 === 可使上一行文字变成一级标题\n- 在文字下方加 --- 可使上一行文字变成二级标题\n- 在行首加井号（#）表示不同级别的标题，例如：# H1, ##H2, ###H3\n\n---\n## 信息面板\n\n**说明**\n使用连续三个冒号`:::`和关键字（`[primary | info | warning | danger | success]`）来声明\n\n```markdown\n:::primary // [primary | info | warning | danger | success] 标题\n内容\n:::\n```\n\n**效果**\n:::p 标题\n内容\n:::\n:::success\n内容\n:::\n\n---\n\n## 手风琴\n\n**说明**\n使用连续三个加号`+++`和关键字（`[ + | - ]`）来声明，关键字`+`表示默认收起，关键字`-`表示默认展开\n\n```markdown\n+++ 点击展开更多\n内容\n++- 默认展开\n内容\n++ 默认收起\n内容\n+++\n```\n\n**效果**\n+++ 点击展开更多\n内容\n++- 默认展开\n内容\n++ 默认收起\n内容\n+++',
 ];
 
 const dialog = document.querySelector('.j-dialog');

diff --git a/src/Cherry.config.js b/src/Cherry.config.js
@@ -154,6 +154,7 @@ const defaultConfig = {
  },
  table: {
  enableChart: false,
+ selfClosing: false, // 自动闭合，为true时，当输入第一行table内容时，cherry会自动按表格进行解析
  // chartRenderEngine: EChartsTableEngine,
  // externals: ['echarts'],
  },
@@ -203,6 +204,7 @@ const defaultConfig = {
  * __hello__ ====> <strong>hello</strong>
  */
  allowWhitespace: false,
+ selfClosing: false, // 自动闭合，为true时，当输入**XXX时，会自动在末尾追加**
  },
  strikethrough: {
  /**

diff --git a/src/Engine.js b/src/Engine.js
@@ -104,6 +104,37 @@ export default class Engine {
  $str = $str.replace(/\$/g, '~D');
  $str = $str.replace(/\r\n/g, '\n'); // DOS to Unix
  $str = $str.replace(/\r/g, '\n'); // Mac to Unix
+ if (
+ // @ts-ignore
+ this.$cherry.options.engine.syntax.fontEmphasis.selfClosing ||
+ this.$cherry.options.engine.global.flowSessionContext
+ ) {
+ // 自动补全最后一行的加粗、斜体语法
+ if (/(^|\n)[^\n]*\*{1,3}[^\n]+$/.test($str) && $str.match(/(^|\n)([^\n]+)$/)) {
+ const lastLineStr = $str.match(/(^|\n)([^\n]+)$/)[2].split(/(\*{1,3})/g);
+ const emphasis = [];
+ for (let i = 0; i < lastLineStr.length; i++) {
+ if (/\*{1,3}/.test(lastLineStr[i])) {
+ const current = lastLineStr[i];
+ if (emphasis.length <= 0) {
+ emphasis.push(current);
+ } else {
+ if (emphasis[emphasis.length - 1] === current) {
+ emphasis.pop();
+ } else {
+ emphasis.push(current);
+ }
+ }
+ }
+ }
+ if (emphasis.length === 1) {
+ $str = $str.replace(/(\*{1,3})(\s*)([^*\n]+?)$/, '$1$2$3$2$1');
+ }
+ if (emphasis.length === 2) {
+ $str = $str.replace(/(\*{1,3})(\s*)([^*\n]+?)\*{0,2}$/, '$1$2$3$2$1');
+ }
+ }
+ }
  // 避免正则性能问题，如/.+\n/.test(' '.repeat(99999)), 回溯次数过多
  // 参考文章：http://www.alloyteam.com/2019/07/13574/
  if ($str[$str.length - 1] !== '\n') {

diff --git a/src/core/hooks/Table.js b/src/core/hooks/Table.js
@@ -26,11 +26,13 @@ export default class Table extends ParagraphBase {
  super({ needCache: true });
  const {
  enableChart,
+ selfClosing,
  chartRenderEngine: ChartRenderEngine,
  externals: requiredPackages,
  chartEngineOptions = {},
  } = config;
  this.chartRenderEngine = null;
+ this.selfClosing = selfClosing;
  if (enableChart === true) {
  try {
  this.chartRenderEngine = new ChartRenderEngine({
@@ -223,6 +225,11 @@ export default class Table extends ParagraphBase {
 
  makeHtml(str, sentenceMakeFunc) {
  let $str = str;
+ if (this.$engine.$cherry.options.engine.global.flowSessionContext || this.selfClosing) {
+ if (/(^|^[^|][^\n]*\n|\n\n|\n[^|][^\n]*\n)\s*\|[^\n]+\n{0,1}[|:-\s]*\n*$/.test($str)) {
+ $str = `${$str.replace(/\n[|:-\s]*\n*$/, '')}\n|-|`;
+ }
+ }
  // strict fenced mode
  if (this.test($str, TABLE_STRICT)) {
  $str = $str.replace(this.RULE[TABLE_STRICT].reg, (match, leading) => {