@king-design/vue 3.8.0-beta.1 → 3.8.0-beta.2

package/components/bubble/bubble.d.ts

@@ -4,6 +4,8 @@ export interface BubbleTyping {
     interval?: number;
     step?: number;
     suffix?: boolean;
+    keepPrefix?: boolean;
+    resumeFrom?: string | number | 'content';
 }
 export interface BubbleRenderSlots {
     avatar?: Function;

package/components/bubble/index.spec.js

@@ -772,8 +772,8 @@ describe('Bubble', function () {
       }
     }, _callee19);
   })));
-  it('should render typing suffix only when enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
-    var Demo, _mount20, element, i, enabledSuffix;
+  it('should resume typing from previous rendered content after remount', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var Demo, _mount20, element, text, nextText, i;
     return _regeneratorRuntime.wrap(function _callee20$(_context40) {
       while (1) switch (_context40.prev = _context40.next) {
         case 0:
@@ -791,25 +791,198 @@ describe('Bubble', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        className=\"suffix-enabled\"\n                        content=\"hello\"\n                        typing={{interval: 16, step: 2, suffix: true}}\n                        streaming={true}\n                    />\n                    <Bubble\n                        className=\"suffix-default\"\n                        content=\"hello\"\n                        typing={{interval: 16, step: 2}}\n                        streaming={true}\n                    />\n                </div>\n            ";
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        content=\"hello world\"\n                        streaming={true}\n                        typing={{interval: 16, step: 2, resumeFrom: 'hello'}}\n                    />\n                </div>\n            ";
           _mount20 = mount(Demo), element = _mount20[1];
+          text = element.querySelector('.k-bubble-text').textContent || '';
+          expect(text).to.eql('hello');
+          nextText = text;
+          i = 0;
+        case 7:
+          if (!(i < 6)) {
+            _context40.next = 16;
+            break;
+          }
+          _context40.next = 10;
+          return wait(20);
+        case 10:
+          nextText = element.querySelector('.k-bubble-text').textContent || '';
+          if (!(nextText.length > text.length)) {
+            _context40.next = 13;
+            break;
+          }
+          return _context40.abrupt("break", 16);
+        case 13:
+          i++;
+          _context40.next = 7;
+          break;
+        case 16:
+          expect(_startsWithInstanceProperty(nextText).call(nextText, 'hello')).to.be.true;
+          expect(nextText.length).to.be.greaterThan(text.length);
+        case 18:
+        case "end":
+          return _context40.stop();
+      }
+    }, _callee20);
+  })));
+  it('should support content resume mode without replaying existing content', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var Demo, _mount21, instance, element, text;
+    return _regeneratorRuntime.wrap(function _callee21$(_context42) {
+      while (1) switch (_context42.prev = _context42.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component21) {
+            _inheritsLoose(Demo, _Component21);
+            function Demo() {
+              var _context41;
+              var _this21;
+              for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
+                args[_key21] = arguments[_key21];
+              }
+              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context41 = [this]).call(_context41, args)) || this;
+              _this21.Bubble = Bubble;
+              return _this21;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: 'already rendered'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        content={this.get('content')}\n                        streaming={true}\n                        typing={{interval: 16, step: 2, resumeFrom: 'content'}}\n                    />\n                </div>\n            ";
+          _mount21 = mount(Demo), instance = _mount21[0], element = _mount21[1];
+          expect(element.querySelector('.k-bubble-text').textContent).to.eql('already rendered');
+          instance.set('content', 'already rendered and more');
+          _context42.next = 7;
+          return wait(20);
+        case 7:
+          text = element.querySelector('.k-bubble-text').textContent || '';
+          expect(_startsWithInstanceProperty(text).call(text, 'already rendered')).to.be.true;
+          expect(text.length).to.be.lessThan('already rendered and more'.length);
+        case 10:
+        case "end":
+          return _context42.stop();
+      }
+    }, _callee21);
+  })));
+  it('should restart typing from empty when keepPrefix is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var Demo, _mount22, instance, element, initialText, i, _element$querySelecto, text, _i2, _element$querySelecto2;
+    return _regeneratorRuntime.wrap(function _callee22$(_context44) {
+      while (1) switch (_context44.prev = _context44.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component22) {
+            _inheritsLoose(Demo, _Component22);
+            function Demo() {
+              var _context43;
+              var _this22;
+              for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
+                args[_key22] = arguments[_key22];
+              }
+              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context43 = [this]).call(_context43, args)) || this;
+              _this22.Bubble = Bubble;
+              return _this22;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: 'hello world'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        content={this.get('content')}\n                        streaming={true}\n                        typing={{interval: 16, step: 2, keepPrefix: false}}\n                    />\n                </div>\n            ";
+          _mount22 = mount(Demo), instance = _mount22[0], element = _mount22[1];
+          initialText = '';
+          i = 0;
+        case 5:
+          if (!(i < 12)) {
+            _context44.next = 14;
+            break;
+          }
+          initialText = ((_element$querySelecto = element.querySelector('.k-bubble-text')) == null ? void 0 : _element$querySelecto.textContent) || '';
+          if (!_includesInstanceProperty(initialText).call(initialText, 'hello')) {
+            _context44.next = 9;
+            break;
+          }
+          return _context44.abrupt("break", 14);
+        case 9:
+          _context44.next = 11;
+          return wait(20);
+        case 11:
+          i++;
+          _context44.next = 5;
+          break;
+        case 14:
+          expect(initialText).to.contain('hello');
+          instance.set('content', 'hello there');
+          _context44.next = 18;
+          return wait();
+        case 18:
+          text = '';
+          _i2 = 0;
+        case 20:
+          if (!(_i2 < 6)) {
+            _context44.next = 29;
+            break;
+          }
+          _context44.next = 23;
+          return wait(20);
+        case 23:
+          text = ((_element$querySelecto2 = element.querySelector('.k-bubble-text')) == null ? void 0 : _element$querySelecto2.textContent) || '';
+          if (!text) {
+            _context44.next = 26;
+            break;
+          }
+          return _context44.abrupt("break", 29);
+        case 26:
+          _i2++;
+          _context44.next = 20;
+          break;
+        case 29:
+          expect(text).not.to.contain('hello');
+          expect(text.length).to.be.lessThan('hello'.length);
+        case 31:
+        case "end":
+          return _context44.stop();
+      }
+    }, _callee22);
+  })));
+  it('should render typing suffix only when enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    var Demo, _mount23, element, i, enabledSuffix;
+    return _regeneratorRuntime.wrap(function _callee23$(_context46) {
+      while (1) switch (_context46.prev = _context46.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component23) {
+            _inheritsLoose(Demo, _Component23);
+            function Demo() {
+              var _context45;
+              var _this23;
+              for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
+                args[_key23] = arguments[_key23];
+              }
+              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
+              _this23.Bubble = Bubble;
+              return _this23;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        className=\"suffix-enabled\"\n                        content=\"hello\"\n                        typing={{interval: 16, step: 2, suffix: true}}\n                        streaming={true}\n                    />\n                    <Bubble\n                        className=\"suffix-default\"\n                        content=\"hello\"\n                        typing={{interval: 16, step: 2}}\n                        streaming={true}\n                    />\n                </div>\n            ";
+          _mount23 = mount(Demo), element = _mount23[1];
           i = 0;
         case 4:
           if (!(i < 10)) {
-            _context40.next = 12;
+            _context46.next = 12;
             break;
           }
           if (!element.querySelector('.suffix-enabled .k-bubble-typing-suffix')) {
-            _context40.next = 7;
+            _context46.next = 7;
             break;
           }
-          return _context40.abrupt("break", 12);
+          return _context46.abrupt("break", 12);
         case 7:
-          _context40.next = 9;
+          _context46.next = 9;
           return wait(20);
         case 9:
           i++;
-          _context40.next = 4;
+          _context46.next = 4;
           break;
         case 12:
           enabledSuffix = element.querySelector('.suffix-enabled .k-bubble-typing-suffix');
@@ -817,8 +990,8 @@ describe('Bubble', function () {
           expect(element.querySelector('.suffix-default .k-bubble-typing-suffix')).to.eql(null);
         case 15:
         case "end":
-          return _context40.stop();
+          return _context46.stop();
       }
-    }, _callee20);
+    }, _callee23);
   })));
 });

package/components/bubble/useBubbleDisplay.js

@@ -10,6 +10,7 @@ export function useBubbleDisplay() {
   var previousLoading = !!instance.get('loading');
   var previousStreaming = !!instance.get('streaming');
   var hasPendingCompletion = previousLoading || previousStreaming;
+  var typingTargetKey = '';
   function setDisplayContent(value) {
     if (instance.get('$displayContent') === value) return false;
     instance.set('$displayContent', value);
@@ -24,12 +25,16 @@ export function useBubbleDisplay() {
     if (typing && typeof typing === 'object') {
       return {
         interval: Math.max(typing.interval || 24, 16),
-        step: Math.max(typing.step || 2, 1)
+        step: Math.max(typing.step || 2, 1),
+        keepPrefix: typing.keepPrefix !== false,
+        resumeFrom: typing.resumeFrom
       };
     }
     return {
       interval: 24,
-      step: 2
+      step: 2,
+      keepPrefix: true,
+      resumeFrom: undefined
     };
   }
   function stopTyping() {
@@ -71,18 +76,49 @@ export function useBubbleDisplay() {
   function getDisplayedContent() {
     return instance.get('$displayContent') || '';
   }
+  function getSafeContentPrefix(content, prefix) {
+    if (!prefix) return '';
+    if (_sliceInstanceProperty(content).call(content, 0, prefix.length) === prefix) return prefix;
+    var i = 0;
+    while (i < prefix.length && i < content.length && prefix[i] === content[i]) {
+      i++;
+    }
+    return _sliceInstanceProperty(prefix).call(prefix, 0, i);
+  }
+  function getResumePrefix(content) {
+    var _getTypingOptions = getTypingOptions(),
+      resumeFrom = _getTypingOptions.resumeFrom;
+    if (resumeFrom === undefined || resumeFrom === null) return '';
+    if (resumeFrom === 'content') return content;
+    if (typeof resumeFrom === 'number') return _sliceInstanceProperty(content).call(content, 0, Math.max(0, resumeFrom));
+    return getSafeContentPrefix(content, String(resumeFrom));
+  }
+  function getTypingTargetKey(content) {
+    var _getTypingOptions2 = getTypingOptions(),
+      keepPrefix = _getTypingOptions2.keepPrefix,
+      resumeFrom = _getTypingOptions2.resumeFrom;
+    return (keepPrefix ? '1' : '0') + "\0" + String(resumeFrom) + "\0" + content;
+  }
+  function syncTypingStart(content) {
+    var targetKey = getTypingTargetKey(content);
+    if (targetKey === typingTargetKey) return;
+    typingTargetKey = targetKey;
+    var sharedPrefix = getSharedPrefix(content);
+    if (sharedPrefix !== getDisplayedContent()) {
+      resetTypingComplete();
+      setDisplayContent(sharedPrefix);
+    }
+  }
   // 获取共享前缀
   function getSharedPrefix(content) {
     var displayedContent = getDisplayedContent();
+    if (!displayedContent) return getResumePrefix(content);
+    if (!getTypingOptions().keepPrefix) return '';
     // 避免 startsWith 依赖，兼容旧运行环境。
     if (!displayedContent || _sliceInstanceProperty(content).call(content, 0, displayedContent.length) === displayedContent) {
       return displayedContent;
     }
-    var i = 0;
-    while (i < displayedContent.length && i < content.length && displayedContent[i] === content[i]) {
-      i++;
-    }
-    return _sliceInstanceProperty(displayedContent).call(displayedContent, 0, i);
+    return getSafeContentPrefix(content, displayedContent);
   }
   // 开始打字动画
   function startTyping(immediate) {
@@ -95,8 +131,8 @@ export function useBubbleDisplay() {
       runTyping();
       return;
     }
-    var _getTypingOptions = getTypingOptions(),
-      interval = _getTypingOptions.interval;
+    var _getTypingOptions3 = getTypingOptions(),
+      interval = _getTypingOptions3.interval;
     setTypingActive(true);
     typingTimer = window.setTimeout(function () {
       typingTimer = null;
@@ -111,26 +147,24 @@ export function useBubbleDisplay() {
     if (instance.get('loading')) {
       stopTyping();
       resetTypingComplete();
+      typingTargetKey = '';
       setDisplayContent('');
       return;
     }
     if (!instance.get('typing') || !nextValue) {
       stopTyping();
+      typingTargetKey = '';
       setDisplayContent(nextValue);
       if (!instance.get('streaming') && shouldEmitTypingComplete(nextValue)) {
         triggerTypingComplete(nextValue);
       }
       return;
     }
-    var sharedPrefix = getSharedPrefix(nextValue);
-    if (sharedPrefix !== getDisplayedContent()) {
-      resetTypingComplete();
-      setDisplayContent(sharedPrefix);
-    }
+    syncTypingStart(nextValue);
     var currentValue = getDisplayedContent();
-    var _getTypingOptions2 = getTypingOptions(),
-      interval = _getTypingOptions2.interval,
-      step = _getTypingOptions2.step;
+    var _getTypingOptions4 = getTypingOptions(),
+      interval = _getTypingOptions4.interval,
+      step = _getTypingOptions4.step;
     if (currentValue !== nextValue) {
       var nextLength = Math.min(currentValue.length + step, nextValue.length);
       var renderedContent = _sliceInstanceProperty(nextValue).call(nextValue, 0, nextLength);
@@ -157,6 +191,7 @@ export function useBubbleDisplay() {
     if (instance.get('loading')) {
       stopTyping();
       resetTypingComplete();
+      typingTargetKey = '';
       setDisplayContent('');
       return;
     }
@@ -166,6 +201,7 @@ export function useBubbleDisplay() {
     var streaming = instance.get('streaming');
     if (!nextValue) {
       stopTyping();
+      typingTargetKey = '';
       setDisplayContent(nextValue);
       if (!streaming && shouldEmitTypingComplete(nextValue)) {
         triggerTypingComplete(nextValue);
@@ -174,18 +210,18 @@ export function useBubbleDisplay() {
     }
     if (!typing) {
       stopTyping();
+      typingTargetKey = '';
       setDisplayContent(nextValue);
       if (!streaming && shouldEmitTypingComplete(nextValue)) {
         triggerTypingComplete(nextValue);
       }
       return;
     }
-    var sharedPrefix = getSharedPrefix(nextValue);
-    if (sharedPrefix !== getDisplayedContent()) {
+    var previousDisplayContent = getDisplayedContent();
+    syncTypingStart(nextValue);
+    if (getDisplayedContent() !== previousDisplayContent) {
       // 内容被修订时保留共享前缀，避免流式修正时整段闪烁。
       stopTyping();
-      resetTypingComplete();
-      setDisplayContent(sharedPrefix);
     }
     if (getDisplayedContent() === nextValue) {
       if (!streaming) {
@@ -200,8 +236,10 @@ export function useBubbleDisplay() {
   // 初始化状态和绑定监听器
   function bootstrap() {
     var content = instance.get('content');
+    var nextValue = content === undefined || content === null ? '' : String(content);
     setTypingActive(false);
-    setDisplayContent(!instance.get('loading') && !instance.get('typing') && content !== undefined && content !== null ? String(content) : '');
+    var initialDisplayContent = !instance.get('loading') && nextValue ? instance.get('typing') ? getResumePrefix(nextValue) : nextValue : '';
+    setDisplayContent(initialDisplayContent);
     instance.watch('content', function () {
       return syncDisplayContent();
     }, {

package/components/bubbleList/index.spec.js

@@ -7,6 +7,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import _atInstanceProperty from "@babel/runtime-corejs3/core-js/instance/at";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
 import { Component } from 'intact-vue-next';
 import { dispatchEvent, mount, unmount, wait } from '../../test/utils';
 import { BubbleList } from '.';
@@ -1329,4 +1330,80 @@ describe('BubbleList', function () {
       }
     }, _callee23);
   })));
+  it('should pass typing resume options to rendered bubbles', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+    var Demo, _mount23, element, text, nextText, i;
+    return _regeneratorRuntime.wrap(function _callee24$(_context70) {
+      while (1) switch (_context70.prev = _context70.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component24) {
+            _inheritsLoose(Demo, _Component24);
+            function Demo() {
+              var _context69;
+              var _this24;
+              for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
+                args[_key24] = arguments[_key24];
+              }
+              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context69 = [this]).call(_context69, args)) || this;
+              _this24.BubbleList = BubbleList;
+              return _this24;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                roles: {
+                  ai: {
+                    placement: 'start',
+                    typing: {
+                      interval: 16,
+                      step: 1
+                    }
+                  }
+                },
+                items: [{
+                  key: 1,
+                  role: 'ai',
+                  content: 'hello world',
+                  streaming: true,
+                  typing: {
+                    interval: 16,
+                    step: 2,
+                    resumeFrom: 'hello'
+                  }
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                />\n            ";
+          _mount23 = mount(Demo), element = _mount23[1];
+          text = element.querySelector('.k-bubble-text').textContent || '';
+          expect(text).to.eql('hello');
+          nextText = text;
+          i = 0;
+        case 7:
+          if (!(i < 6)) {
+            _context70.next = 16;
+            break;
+          }
+          _context70.next = 10;
+          return wait(20);
+        case 10:
+          nextText = element.querySelector('.k-bubble-text').textContent || '';
+          if (!(nextText.length > text.length)) {
+            _context70.next = 13;
+            break;
+          }
+          return _context70.abrupt("break", 16);
+        case 13:
+          i++;
+          _context70.next = 7;
+          break;
+        case 16:
+          expect(_startsWithInstanceProperty(nextText).call(nextText, 'hello')).to.be.true;
+          expect(nextText.length).to.be.greaterThan(text.length);
+        case 18:
+        case "end":
+          return _context70.stop();
+      }
+    }, _callee24);
+  })));
 });