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

package/components/bubble/index.spec.js

@@ -75,13 +75,17 @@ describe('Bubble', function () {
           Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble shape=\"corner\" placement=\"start\" content=\"left\" />\n                    <Bubble shape=\"corner\" placement=\"end\" content=\"right\" />\n                    <Bubble shape=\"corner\" placement=\"middle\" content=\"center\" />\n                </div>\n            ";
           _mount2 = mount(Demo), element = _mount2[1];
           contents = element.querySelectorAll('.k-bubble-content');
-          expect(getComputedStyle(contents[0]).borderBottomLeftRadius).to.eql('0px');
-          expect(getComputedStyle(contents[0]).borderBottomRightRadius).not.to.eql('0px');
-          expect(getComputedStyle(contents[1]).borderBottomRightRadius).to.eql('0px');
-          expect(getComputedStyle(contents[1]).borderBottomLeftRadius).not.to.eql('0px');
+          expect(getComputedStyle(contents[0]).borderTopLeftRadius).to.eql('0px');
+          expect(getComputedStyle(contents[0]).borderTopRightRadius).not.to.eql('0px');
+          expect(getComputedStyle(contents[0]).borderBottomLeftRadius).not.to.eql('0px');
+          expect(getComputedStyle(contents[1]).borderTopRightRadius).to.eql('0px');
+          expect(getComputedStyle(contents[1]).borderTopLeftRadius).not.to.eql('0px');
+          expect(getComputedStyle(contents[1]).borderBottomRightRadius).not.to.eql('0px');
+          expect(getComputedStyle(contents[2]).borderTopLeftRadius).to.eql('0px');
+          expect(getComputedStyle(contents[2]).borderTopRightRadius).to.eql('0px');
           expect(getComputedStyle(contents[2]).borderBottomLeftRadius).not.to.eql('0px');
           expect(getComputedStyle(contents[2]).borderBottomRightRadius).not.to.eql('0px');
-        case 10:
+        case 14:
         case "end":
           return _context4.stop();
       }
@@ -768,4 +772,226 @@ describe('Bubble', function () {
       }
     }, _callee19);
   })));
+  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:
+          Demo = /*#__PURE__*/function (_Component20) {
+            _inheritsLoose(Demo, _Component20);
+            function Demo() {
+              var _context39;
+              var _this20;
+              for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
+                args[_key20] = arguments[_key20];
+              }
+              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context39 = [this]).call(_context39, args)) || this;
+              _this20.Bubble = Bubble;
+              return _this20;
+            }
+            return Demo;
+          }(Component);
+          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)) {
+            _context46.next = 12;
+            break;
+          }
+          if (!element.querySelector('.suffix-enabled .k-bubble-typing-suffix')) {
+            _context46.next = 7;
+            break;
+          }
+          return _context46.abrupt("break", 12);
+        case 7:
+          _context46.next = 9;
+          return wait(20);
+        case 9:
+          i++;
+          _context46.next = 4;
+          break;
+        case 12:
+          enabledSuffix = element.querySelector('.suffix-enabled .k-bubble-typing-suffix');
+          expect(enabledSuffix.querySelectorAll('span').length).to.eql(3);
+          expect(element.querySelector('.suffix-default .k-bubble-typing-suffix')).to.eql(null);
+        case 15:
+        case "end":
+          return _context46.stop();
+      }
+    }, _callee23);
+  })));
 });

package/components/bubble/styles.js

@@ -49,5 +49,5 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("display:flex;flex-direction:column;align-items:flex-start;width:100%;.", k, "-bubble-main{display:flex;flex-direction:column;gap:8px;min-width:0;align-items:flex-start;}.", k, "-bubble-meta{display:flex;align-items:center;gap:8px;min-width:0;}.", k, "-bubble-header{color:", bubble.roleNameColor, ";font-size:14px;font-weight:500;min-width:0;text-align:left;}.", k, "-bubble-content{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%;padding:", bubble.padding, ";box-sizing:border-box;line-height:1.6;word-break:break-word;overflow-wrap:anywhere;transition:background ", theme.transition.small, ",border-color ", theme.transition.small, ";}.", k, "-bubble-content>*{min-width:0;max-width:100%;}.", k, "-bubble-attachments{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:100%;}.", k, "-bubble-before-content{min-width:0;width:100%;}.", k, "-bubble-text{white-space:pre-wrap;}.", k, "-bubble-loading{display:inline-flex;align-items:center;gap:8px;color:", bubble.loadingTextColor, ";min-height:20px;}.", k, "-bubble-loading-dot{width:", bubble.loadingDotSize, ";height:", bubble.loadingDotSize, ";border-radius:50%;background:", bubble.loadingDotColor, ";display:inline-block;animation:", k, "-bubble-loading-bounce 1s ease-in-out infinite;box-shadow:0 0 0 1px ", setAlpha(theme.color.primary, 0.04), ";}.", k, "-bubble-loading-dot:nth-of-type(2){animation-delay:0.14s;}.", k, "-bubble-loading-dot:nth-of-type(3){animation-delay:0.28s;}.", k, "-bubble-footer{display:flex;align-items:center;gap:4px;}.", k, "-bubble-extra{color:", bubble.extraColor, ";font-size:12px;line-height:1.5;}.", k, "-bubble-avatar{width:", bubble.avatarSize, ";height:", bubble.avatarSize, ";flex:0 0 ", bubble.avatarSize, ";border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:", bubble.avatarBg, ";color:", bubble.avatarColor, ";font-size:", bubble.avatarFontSize, ";font-weight:600;}.", k, "-bubble-avatar-image{width:100%;height:100%;object-fit:cover;display:block;}.", k, "-bubble-markdown{color:inherit;overflow-x:auto;}.", k, "-bubble-markdown>:first-child{margin-top:0;}.", k, "-bubble-markdown>:last-child{margin-bottom:0;}.", k, "-bubble-markdown [data-kpc-bubble-markdown-tail]{display:inline;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;}.", k, "-bubble-markdown p,.", k, "-bubble-markdown ul,.", k, "-bubble-markdown ol,.", k, "-bubble-markdown blockquote,.", k, "-bubble-markdown pre,.", k, "-bubble-markdown table,.", k, "-bubble-markdown hr,.", k, "-bubble-markdown h1,.", k, "-bubble-markdown h2,.", k, "-bubble-markdown h3,.", k, "-bubble-markdown h4,.", k, "-bubble-markdown h5,.", k, "-bubble-markdown h6{margin:0 0 10px;}.", k, "-bubble-markdown ul,.", k, "-bubble-markdown ol{padding-left:20px;list-style-position:outside;}.", k, "-bubble-markdown ul{list-style-type:disc;}.", k, "-bubble-markdown ul ul{list-style-type:circle;}.", k, "-bubble-markdown ul ul ul{list-style-type:square;}.", k, "-bubble-markdown ol{list-style-type:decimal;}.", k, "-bubble-markdown ol ol{list-style-type:lower-alpha;}.", k, "-bubble-markdown li{margin:6px 0;}.", k, "-bubble-markdown li>p{margin:6px 0 0;}.", k, "-bubble-markdown h1,.", k, "-bubble-markdown h2,.", k, "-bubble-markdown h3,.", k, "-bubble-markdown h4,.", k, "-bubble-markdown h5,.", k, "-bubble-markdown h6{color:", bubble.markdownHeadingColor, ";font-weight:600;line-height:1.35;}.", k, "-bubble-markdown h1{font-size:22px;}.", k, "-bubble-markdown h2{font-size:18px;}.", k, "-bubble-markdown h3{font-size:16px;}.", k, "-bubble-markdown h4{font-size:14px;}.", k, "-bubble-markdown h5,.", k, "-bubble-markdown h6{font-size:13px;}.", k, "-bubble-markdown a{color:", bubble.markdownLinkColor, ";text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}.", k, "-bubble-markdown a:hover{opacity:0.88;}.", k, "-bubble-markdown code{display:inline-block;padding:0 6px;border-radius:4px;background:", bubble.markdownCodeBg, ";color:", bubble.markdownCodeColor, ";font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:12px;white-space:break-spaces;}.", k, "-bubble-markdown strong,.", k, "-bubble-markdown b{font-weight:600;}.", k, "-bubble-markdown img{display:block;max-width:100%;height:auto;margin:12px 0;border-radius:12px;}.", k, "-bubble-markdown hr{height:1px;border:0;background:", bubble.markdownBorderColor, ";}.", k, "-bubble-markdown pre{padding:0px;overflow:auto;background:", bubble.markdownPreBg, ";color:", bubble.markdownPreColor, ";border:1px solid ", setAlpha('#ffffff', 0.06), ";}.", k, "-bubble-markdown pre code{display:block;padding:4px;background:transparent;color:inherit;white-space:pre;word-break:normal;overflow-wrap:normal;}.", k, "-bubble-markdown .hljs{background:transparent;color:inherit;}.", k, "-bubble-markdown .hljs-comment,.", k, "-bubble-markdown .hljs-quote{color:#8fa1b3;}.", k, "-bubble-markdown .hljs-keyword,.", k, "-bubble-markdown .hljs-selector-tag,.", k, "-bubble-markdown .hljs-literal,.", k, "-bubble-markdown .hljs-section,.", k, "-bubble-markdown .hljs-link{color:#ffb86c;}.", k, "-bubble-markdown .hljs-string,.", k, "-bubble-markdown .hljs-title,.", k, "-bubble-markdown .hljs-name,.", k, "-bubble-markdown .hljs-type,.", k, "-bubble-markdown .hljs-attribute,.", k, "-bubble-markdown .hljs-symbol,.", k, "-bubble-markdown .hljs-bullet,.", k, "-bubble-markdown .hljs-addition{color:#7ee787;}.", k, "-bubble-markdown .hljs-number,.", k, "-bubble-markdown .hljs-built_in,.", k, "-bubble-markdown .hljs-builtin-name,.", k, "-bubble-markdown .hljs-variable,.", k, "-bubble-markdown .hljs-template-variable{color:#79c0ff;}.", k, "-bubble-markdown .hljs-deletion{color:#ff7b72;}.", k, "-bubble-markdown table{width:100%;border-collapse:collapse;border-spacing:0;border:1px solid ", bubble.markdownBorderColor, ";border-radius:10px;overflow:hidden;font-size:12px;background:transparent;}.", k, "-bubble-markdown th,.", k, "-bubble-markdown td{padding:8px 12px;border:1px solid ", bubble.markdownBorderColor, ";text-align:left;vertical-align:top;}.", k, "-bubble-markdown th{font-weight:600;background:", bubble.markdownTableHeadBg, ";}.", k, "-bubble-markdown blockquote{padding-left:12px;border-left:3px solid ", setAlpha(theme.color.text, 0.16), ";background:", bubble.markdownBlockquoteBg, ";border-radius:0 10px 10px 0;padding:8px 12px;opacity:0.96;}.", k, "-bubble-markdown blockquote>:last-child{margin-bottom:0;}&.", k, "-bubble-start{align-items:flex-start;}&.", k, "-bubble-start .", k, "-bubble-main{align-items:flex-start;}&.", k, "-bubble-end{align-items:flex-end;}&.", k, "-bubble-end .", k, "-bubble-main{align-items:flex-end;}&.", k, "-bubble-end .", k, "-bubble-meta{flex-direction:row-reverse;justify-content:flex-end;}&.", k, "-bubble-end .", k, "-bubble-header{text-align:right;}&.", k, "-bubble-middle{align-items:center;}&.", k, "-bubble-middle .", k, "-bubble-main{align-items:center;}&.", k, "-bubble-middle .", k, "-bubble-meta{justify-content:center;}&.", k, "-bubble-middle .", k, "-bubble-header{text-align:center;}&.", k, "-bubble-filled .", k, "-bubble-content{background:", bubble.filledBg, ";color:", bubble.filledColor, ";border:", bubble.filledBorder, ";}&.", k, "-bubble-outlined .", k, "-bubble-content{background:", bubble.outlinedBg, ";color:", bubble.outlinedColor, ";border:", bubble.outlinedBorder, ";}&.", k, "-bubble-plain .", k, "-bubble-content{background:", bubble.plainBg, ";color:", bubble.plainColor, ";border:", bubble.plainBorder, ";padding:0;}&.", k, "-bubble-round .", k, "-bubble-content{border-radius:", bubble.roundBorderRadius, ";}&.", k, "-bubble-corner.", k, "-bubble-start .", k, "-bubble-content{border-radius:", bubble.borderRadius, " ", bubble.borderRadius, " ", bubble.borderRadius, " 0;}&.", k, "-bubble-corner.", k, "-bubble-end .", k, "-bubble-content{border-radius:", bubble.borderRadius, " ", bubble.borderRadius, " 0 ", bubble.borderRadius, ";}&.", k, "-bubble-corner.", k, "-bubble-middle .", k, "-bubble-content{border-radius:", bubble.borderRadius, ";}&.", k, "-bubble-square .", k, "-bubble-content{border-radius:", bubble.borderRadius, ";}@keyframes ", k, "-bubble-loading-bounce{0%,80%,100%{transform:translateY(0) scale(0.9);opacity:0.45;}40%{transform:translateY(-5px) scale(1);opacity:1;}}");
+  return /*#__PURE__*/css("display:flex;flex-direction:column;align-items:flex-start;width:100%;.", k, "-bubble-main{display:flex;flex-direction:column;gap:8px;min-width:0;align-items:flex-start;}.", k, "-bubble-meta{display:flex;align-items:center;gap:8px;min-width:0;}.", k, "-bubble-header{color:", bubble.roleNameColor, ";font-size:14px;font-weight:500;min-width:0;text-align:left;}.", k, "-bubble-content{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%;padding:", bubble.padding, ";box-sizing:border-box;line-height:1.6;word-break:break-word;overflow-wrap:anywhere;transition:background ", theme.transition.small, ",border-color ", theme.transition.small, ";}.", k, "-bubble-content>*{min-width:0;max-width:100%;}.", k, "-bubble-attachments{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:100%;}.", k, "-bubble-before-content{min-width:0;width:100%;}.", k, "-bubble-text{white-space:pre-wrap;}.", k, "-bubble-typing-suffix{display:inline-flex;align-items:center;gap:4px;width:26px;height:6px;line-height:0;}.", k, "-bubble-typing-suffix span{width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at center, #F8F9FA 0%, #D0D5D9 100%);animation:", k, "-bubble-typing-suffix-pulse 1.2s ease-in-out infinite;}.", k, "-bubble-typing-suffix span:nth-child(2){animation-delay:0.16s;}.", k, "-bubble-typing-suffix span:nth-child(3){animation-delay:0.32s;}.", k, "-bubble-loading{display:inline-flex;align-items:center;gap:8px;color:", bubble.loadingTextColor, ";min-height:20px;}.", k, "-bubble-loading-dot{width:", bubble.loadingDotSize, ";height:", bubble.loadingDotSize, ";border-radius:50%;background:", bubble.loadingDotColor, ";display:inline-block;animation:", k, "-bubble-loading-bounce 1s ease-in-out infinite;box-shadow:0 0 0 1px ", setAlpha(theme.color.primary, 0.04), ";}.", k, "-bubble-loading-dot:nth-of-type(2){animation-delay:0.14s;}.", k, "-bubble-loading-dot:nth-of-type(3){animation-delay:0.28s;}.", k, "-bubble-footer{display:flex;align-items:center;gap:4px;}.", k, "-bubble-extra{color:", bubble.extraColor, ";font-size:12px;line-height:1.5;}.", k, "-bubble-avatar{width:", bubble.avatarSize, ";height:", bubble.avatarSize, ";flex:0 0 ", bubble.avatarSize, ";border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:", bubble.avatarBg, ";color:", bubble.avatarColor, ";font-size:", bubble.avatarFontSize, ";font-weight:600;}.", k, "-bubble-avatar-image{width:100%;height:100%;object-fit:cover;display:block;}.", k, "-bubble-markdown{color:inherit;overflow-x:auto;}.", k, "-bubble-markdown>:first-child{margin-top:0;}.", k, "-bubble-markdown>:last-child{margin-bottom:0;}.", k, "-bubble-markdown [data-kpc-bubble-markdown-tail]{display:inline;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;}.", k, "-bubble-markdown p,.", k, "-bubble-markdown ul,.", k, "-bubble-markdown ol,.", k, "-bubble-markdown blockquote,.", k, "-bubble-markdown pre,.", k, "-bubble-markdown table,.", k, "-bubble-markdown hr,.", k, "-bubble-markdown h1,.", k, "-bubble-markdown h2,.", k, "-bubble-markdown h3,.", k, "-bubble-markdown h4,.", k, "-bubble-markdown h5,.", k, "-bubble-markdown h6{margin:0 0 10px;}.", k, "-bubble-markdown ul,.", k, "-bubble-markdown ol{padding-left:20px;list-style-position:outside;}.", k, "-bubble-markdown ul{list-style-type:disc;}.", k, "-bubble-markdown ul ul{list-style-type:circle;}.", k, "-bubble-markdown ul ul ul{list-style-type:square;}.", k, "-bubble-markdown ol{list-style-type:decimal;}.", k, "-bubble-markdown ol ol{list-style-type:lower-alpha;}.", k, "-bubble-markdown li{margin:6px 0;}.", k, "-bubble-markdown li>p{margin:6px 0 0;}.", k, "-bubble-markdown h1,.", k, "-bubble-markdown h2,.", k, "-bubble-markdown h3,.", k, "-bubble-markdown h4,.", k, "-bubble-markdown h5,.", k, "-bubble-markdown h6{color:", bubble.markdownHeadingColor, ";font-weight:600;line-height:1.35;}.", k, "-bubble-markdown h1{font-size:22px;}.", k, "-bubble-markdown h2{font-size:18px;}.", k, "-bubble-markdown h3{font-size:16px;}.", k, "-bubble-markdown h4{font-size:14px;}.", k, "-bubble-markdown h5,.", k, "-bubble-markdown h6{font-size:13px;}.", k, "-bubble-markdown a{color:", bubble.markdownLinkColor, ";text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}.", k, "-bubble-markdown a:hover{opacity:0.88;}.", k, "-bubble-markdown code{display:inline-block;padding:0 6px;border-radius:4px;background:", bubble.markdownCodeBg, ";color:", bubble.markdownCodeColor, ";font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:12px;white-space:break-spaces;}.", k, "-bubble-markdown strong,.", k, "-bubble-markdown b{font-weight:600;}.", k, "-bubble-markdown img{display:block;max-width:100%;height:auto;margin:12px 0;border-radius:12px;}.", k, "-bubble-markdown hr{height:1px;border:0;background:", bubble.markdownBorderColor, ";}.", k, "-bubble-markdown pre{padding:0px;overflow:auto;background:", bubble.markdownPreBg, ";color:", bubble.markdownPreColor, ";border:1px solid ", setAlpha('#ffffff', 0.06), ";}.", k, "-bubble-markdown pre code{display:block;padding:4px;background:transparent;color:inherit;white-space:pre;word-break:normal;overflow-wrap:normal;}.", k, "-bubble-markdown .hljs{background:transparent;color:inherit;}.", k, "-bubble-markdown .hljs-comment,.", k, "-bubble-markdown .hljs-quote{color:#8fa1b3;}.", k, "-bubble-markdown .hljs-keyword,.", k, "-bubble-markdown .hljs-selector-tag,.", k, "-bubble-markdown .hljs-literal,.", k, "-bubble-markdown .hljs-section,.", k, "-bubble-markdown .hljs-link{color:#ffb86c;}.", k, "-bubble-markdown .hljs-string,.", k, "-bubble-markdown .hljs-title,.", k, "-bubble-markdown .hljs-name,.", k, "-bubble-markdown .hljs-type,.", k, "-bubble-markdown .hljs-attribute,.", k, "-bubble-markdown .hljs-symbol,.", k, "-bubble-markdown .hljs-bullet,.", k, "-bubble-markdown .hljs-addition{color:#7ee787;}.", k, "-bubble-markdown .hljs-number,.", k, "-bubble-markdown .hljs-built_in,.", k, "-bubble-markdown .hljs-builtin-name,.", k, "-bubble-markdown .hljs-variable,.", k, "-bubble-markdown .hljs-template-variable{color:#79c0ff;}.", k, "-bubble-markdown .hljs-deletion{color:#ff7b72;}.", k, "-bubble-markdown table{width:100%;border-collapse:collapse;border-spacing:0;border:1px solid ", bubble.markdownBorderColor, ";border-radius:10px;overflow:hidden;font-size:12px;background:transparent;}.", k, "-bubble-markdown th,.", k, "-bubble-markdown td{padding:8px 12px;border:1px solid ", bubble.markdownBorderColor, ";text-align:left;vertical-align:top;}.", k, "-bubble-markdown th{font-weight:600;background:", bubble.markdownTableHeadBg, ";}.", k, "-bubble-markdown blockquote{padding-left:12px;border-left:3px solid ", setAlpha(theme.color.text, 0.16), ";background:", bubble.markdownBlockquoteBg, ";border-radius:0 10px 10px 0;padding:8px 12px;opacity:0.96;}.", k, "-bubble-markdown blockquote>:last-child{margin-bottom:0;}&.", k, "-bubble-start{align-items:flex-start;}&.", k, "-bubble-start .", k, "-bubble-main{align-items:flex-start;}&.", k, "-bubble-end{align-items:flex-end;}&.", k, "-bubble-end .", k, "-bubble-main{align-items:flex-end;}&.", k, "-bubble-end .", k, "-bubble-meta{flex-direction:row-reverse;justify-content:flex-end;}&.", k, "-bubble-end .", k, "-bubble-header{text-align:right;}&.", k, "-bubble-middle{align-items:center;}&.", k, "-bubble-middle .", k, "-bubble-main{align-items:center;}&.", k, "-bubble-middle .", k, "-bubble-meta{justify-content:center;}&.", k, "-bubble-middle .", k, "-bubble-header{text-align:center;}&.", k, "-bubble-filled .", k, "-bubble-content{background:", bubble.filledBg, ";color:", bubble.filledColor, ";border:", bubble.filledBorder, ";}&.", k, "-bubble-outlined .", k, "-bubble-content{background:", bubble.outlinedBg, ";color:", bubble.outlinedColor, ";border:", bubble.outlinedBorder, ";}&.", k, "-bubble-plain .", k, "-bubble-content{background:", bubble.plainBg, ";color:", bubble.plainColor, ";border:", bubble.plainBorder, ";padding:0;}&.", k, "-bubble-round .", k, "-bubble-content{border-radius:", bubble.roundBorderRadius, ";}&.", k, "-bubble-corner.", k, "-bubble-start .", k, "-bubble-content{border-radius:0 ", bubble.borderRadius, " ", bubble.borderRadius, " ", bubble.borderRadius, ";}&.", k, "-bubble-corner.", k, "-bubble-end .", k, "-bubble-content{border-radius:", bubble.borderRadius, " 0 ", bubble.borderRadius, " ", bubble.borderRadius, ";}&.", k, "-bubble-corner.", k, "-bubble-middle .", k, "-bubble-content{border-radius:0 0 ", bubble.borderRadius, " ", bubble.borderRadius, ";}&.", k, "-bubble-square .", k, "-bubble-content{border-radius:", bubble.borderRadius, ";}@keyframes ", k, "-bubble-loading-bounce{0%,80%,100%{transform:translateY(0) scale(0.9);opacity:0.45;}40%{transform:translateY(-5px) scale(1);opacity:1;}}@keyframes ", k, "-bubble-typing-suffix-pulse{0%,80%,100%{background:radial-gradient(circle at center, #F8F9FA 0%, #D0D5D9 100%);transform:translateY(0);}40%{background:radial-gradient(circle at center, ", setAlpha(theme.color.primary, 0.45), " 0%, ", theme.color.primary, " 100%);transform:translateY(-1px);}}");
 });

package/components/bubble/useBubbleDisplay.d.ts

@@ -7,6 +7,7 @@ export declare function useBubbleDisplay(): {
     shouldShowContentBlock: () => boolean;
     shouldShowLoadingShell: () => boolean;
     getDisplayedContent: () => string;
+    shouldShowTypingSuffix: () => boolean;
     isTypingActive: () => boolean;
     getBubbleStyle: () => {
         maxWidth: string;

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();
     }, {
@@ -252,6 +290,13 @@ export function useBubbleDisplay() {
   function isTypingActive() {
     return !!instance.get('$typingActive');
   }
+  function shouldShowTypingSuffix() {
+    var typing = instance.get('typing');
+    if (!typing) return false;
+    if (typeof typing === 'boolean') return false;
+    if (typing.suffix !== true) return false;
+    return !instance.get('loading') && (isTypingActive() || !!instance.get('streaming'));
+  }
   function getBubbleStyle() {
     var maxWidthString = instance.get('maxWidthString');
     if (!maxWidthString) return;
@@ -290,6 +335,7 @@ export function useBubbleDisplay() {
     shouldShowContentBlock: shouldShowContentBlock,
     shouldShowLoadingShell: shouldShowLoadingShell,
     getDisplayedContent: getDisplayedContent,
+    shouldShowTypingSuffix: shouldShowTypingSuffix,
     isTypingActive: isTypingActive,
     getBubbleStyle: getBubbleStyle,
     getRoleNameText: getRoleNameText,

package/components/bubbleList/bubbleList.vdt.js

@@ -8,6 +8,7 @@ import { Icon } from '../icon';
 import { isInvalid, isNumber, noop } from 'intact-shared';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
+    _$cn2,
     _this = this;
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -27,6 +28,7 @@ export default function ($props, $blocks, $__proto__) {
     shouldShowScrollToBottom = _this$bubbleList.shouldShowScrollToBottom,
     getDefaultHistoryLoadingText = _this$bubbleList.getDefaultHistoryLoadingText,
     onScrollToBottomClick = _this$bubbleList.onScrollToBottomClick;
+  var hasScrollbar = this.get('$hasScrollbar');
   var _this$get = this.get(),
     className = _this$get.className,
     style = _this$get.style,
@@ -116,7 +118,7 @@ export default function ($props, $blocks, $__proto__) {
       'list': this,
       'slotRenderers': getSlotRenderers($value, $key)
     }), 2, null, null, getItemKey($value, $key), getItemRef($value, $key));
-  }, $this), 8, _$cn(k + "-bubble-list-items"))], 0, _$cn(k + "-bubble-list-scroll-content"), null, null, scrollContentRef), 2, _$cn(k + "-bubble-list-scroll"), {
+  }, $this), 8, _$cn(k + "-bubble-list-items"))], 0, _$cn(k + "-bubble-list-scroll-content"), null, null, scrollContentRef), 2, _$cn((_$cn2 = {}, _$cn2[k + "-bubble-list-scroll"] = true, _$cn2[k + "-bubble-list-scroll-has-scrollbar"] = hasScrollbar, _$cn2)), {
     'ev-scroll': handleScroll
   }, null, scrollBoxRef), hasListFooterSlot ? _$ce(2, 'div', listFooterSlot, 0, _$cn(k + "-bubble-list-footer")) : undefined, shouldShowScrollToBottom() ? _$ce(2, 'div', $blocks.scrollToBottom ? (_$blocks['scrollToBottom'] = function ($super) {
     return null;