feat: #1006 流式会话场景中，增加flowSessionCursor配置项，实现虚拟光标的效果

examples/api.html

@@ -281,6 +281,16 @@ <h2 class="one-api__name">refreshPreviewer()</h2>
       </div>
     </div>
 
+    <div class="one-api">
+      <h2 class="one-api__name">clearFlowSessionCursor()</h2>
+      <p class="one-api__desc">清空流程会话中添加的虚拟光标</p>
+      <div class="one-api__try">
+        <textarea id="setMarkdown" placeholder="输入内容">
+cherryObj.clearFlowSessionCursor();</textarea>
+        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
+      </div>
+    </div>
+
     <br>
     <hr>
 

examples/scripts/ai-chat-demo.js

@@ -7,6 +7,7 @@ var cherryConfig = {
     global: {
       // 开启流式模式 （默认 true）
       flowSessionContext: true,
+      flowSessionCursor: 'default',
     },
     syntax: {
       codeBlock: {

src/Cherry.config.js

@@ -197,6 +197,13 @@ const defaultConfig = {
        * 后续如果有新的需求，可提issue反馈
        */
       flowSessionContext: true,
+      /**
+       * 流式会话时，在最后位置增加一个类似光标的dom
+       * - 'default'：用cherry提供的默认样式
+       * - ''：不增加任何dom
+       * - '<span class="custom-cursor"></span>': 自定义的dom
+       */
+      flowSessionCursor: '',
     },
     // 内置语法配置
     syntax: {

src/Cherry.js

@@ -122,6 +122,9 @@ export default class Cherry extends CherryStatic {
     this.lastMarkdownText = '';
     this.$event = new Event(this.instanceId);
 
+    if (this.options.engine.global.flowSessionCursor === 'default') {
+      this.options.engine.global.flowSessionCursor = '<span class="cherry-flow-session-cursor"></span>';
+    }
     /**
      * @type {import('./Engine').default}
      */
@@ -1086,4 +1089,16 @@ export default class Cherry extends CherryStatic {
     // @ts-ignore
     this.toc.setModelToLocalStorage(targetModel);
   }
+
+  /**
+   * 清空流程会话中添加的虚拟光标
+   */
+  clearFlowSessionCursor() {
+    if (this.options.engine.global.flowSessionCursor) {
+      this.previewer.getDom().innerHTML = this.previewer
+        .getDom()
+        // @ts-ignore
+        .innerHTML.replaceAll(this.options.engine.global.flowSessionCursor, '');
+    }
+  }
 }

src/Engine.js

@@ -266,17 +266,49 @@ export default class Engine {
     });
   }
 
+  /**
+   * 流式输出场景时，在最后增加一个光标占位
+   * @param {string} md 内容
+   * @returns {string}
+   */
+  $setFlowSessionCursorCache(md) {
+    if (this.$cherry.options.engine.global.flowSessionContext && this.$cherry.options.engine.global.flowSessionCursor) {
+      return `${md}CHERRY_FLOW_SESSION_CURSOR`;
+    }
+    return md;
+  }
+
+  /**
+   * 流式输出场景时，把最后的光标占位替换为配置的dom元素，并在一段时间后删除该元素
+   * @param {string} md 内容
+   * @returns {string}
+   */
+  $clearFlowSessionCursorCache(md) {
+    if (this.$cherry.options.engine.global.flowSessionCursor) {
+      if (this.clearCursorTimer) {
+        clearTimeout(this.clearCursorTimer);
+      }
+      this.clearCursorTimer = setTimeout(() => {
+        this.$cherry.clearFlowSessionCursor();
+      }, 2560);
+      return md.replace(/CHERRY_FLOW_SESSION_CURSOR/g, this.$cherry.options.engine.global.flowSessionCursor);
+    }
+    return md;
+  }
+
   /**
    * @param {string} md md字符串
    * @returns {string} 获取html
    */
   makeHtml(md) {
-    let $md = this.$cacheBigData(md);
+    let $md = this.$setFlowSessionCursorCache(md);
+    $md = this.$cacheBigData($md);
     $md = this.$beforeMakeHtml($md);
     $md = this.$dealParagraph($md);
     $md = this.$afterMakeHtml($md);
     this.$fireHookAction($md, 'paragraph', '$cleanCache');
     $md = this.$deCacheBigData($md);
+    $md = this.$clearFlowSessionCursorCache($md);
     return $md;
   }
 

src/sass/cherry.scss

@@ -813,6 +813,24 @@
       background-color: #3582fb;
     }
   }
+
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .cherry-flow-session-cursor {
+    background-color: #3582fb88;
+    padding: 0 2.5px;
+    animation: blink 1s infinite;
+  }
 }
 
 .cherry-color-wrap {

types/cherry.d.ts

@@ -237,6 +237,13 @@ export interface CherryEngineOptions {
        * 后续如果有新的需求，可提issue反馈
        */
     flowSessionContext?: boolean;
+    /**
+     * 流式会话时，在最后位置增加一个类似光标的dom
+     * - 'default'：用cherry提供的默认样式
+     * - ''：不增加任何dom
+     * - '<span class="custom-cursor"></span>': 自定义的dom
+     */
+    flowSessionCursor?: string;
   };
   /** 内置语法配置 */
   syntax?: {