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

package/components/bubbleList/index.spec.js

@@ -0,0 +1,1268 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+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 { Component } from 'intact-vue-next';
+import { dispatchEvent, mount, unmount, wait } from '../../test/utils';
+import { BubbleList } from '.';
+describe('BubbleList', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('should render items with role defaults and forward bubble footer, extra and bottom slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, element, bubbles, bottoms, footers, extras, texts, firstBubble, firstFooter, firstExtra;
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+              _this.BubbleList = BubbleList;
+              return _this;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                roles: {
+                  ai: {
+                    placement: 'start',
+                    avatar: true,
+                    roleName: 'AI'
+                  },
+                  user: {
+                    placement: 'end',
+                    avatar: true,
+                    roleName: 'Me',
+                    variant: 'outlined'
+                  }
+                },
+                items: [{
+                  key: 1,
+                  role: 'ai',
+                  content: 'hello'
+                }, {
+                  key: 2,
+                  role: 'user',
+                  content: 'world'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 240px;\"\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                >\n                    <b:bottom args=\"scope\">\n                        <span class=\"custom-bubble-bottom\">{scope.item.role}</span>\n                    </b:bottom>\n                    <b:footer args=\"scope\">\n                        <span class=\"custom-bubble-footer\">{scope.item.key}</span>\n                    </b:footer>\n                    <b:extra args=\"scope\">\n                        <span class=\"custom-bubble-extra\">{scope.item.content}</span>\n                    </b:extra>\n                </BubbleList>\n            ";
+          _mount = mount(Demo), element = _mount[1];
+          _context2.next = 5;
+          return wait(50);
+        case 5:
+          bubbles = element.querySelectorAll('.k-bubble');
+          bottoms = element.querySelectorAll('.custom-bubble-bottom');
+          footers = element.querySelectorAll('.custom-bubble-footer');
+          extras = element.querySelectorAll('.custom-bubble-extra');
+          texts = element.querySelectorAll('.k-bubble-text');
+          firstBubble = bubbles[0];
+          firstFooter = firstBubble.querySelector('.custom-bubble-footer');
+          firstExtra = firstBubble.querySelector('.custom-bubble-extra');
+          expect(bubbles.length).to.eql(2);
+          expect(bubbles[0].classList.contains('k-bubble-start')).to.be.true;
+          expect(bubbles[1].classList.contains('k-bubble-end')).to.be.true;
+          expect(bubbles[1].classList.contains('k-bubble-outlined')).to.be.true;
+          expect(texts.length).to.eql(2);
+          expect(texts[0].textContent).to.contain('hello');
+          expect(texts[1].textContent).to.contain('world');
+          expect(bottoms.length).to.eql(2);
+          expect(bottoms[0].textContent).to.eql('ai');
+          expect(bottoms[1].textContent).to.eql('user');
+          expect(footers.length).to.eql(2);
+          expect(footers[0].textContent).to.eql('1');
+          expect(footers[1].textContent).to.eql('2');
+          expect(extras.length).to.eql(2);
+          expect(extras[0].textContent).to.eql('hello');
+          expect(extras[1].textContent).to.eql('world');
+          expect(firstFooter.compareDocumentPosition(firstExtra) & Node.DOCUMENT_POSITION_FOLLOWING).to.not.eql(0);
+        case 30:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee);
+  })));
+  it('should stay at bottom when the last bubble keeps growing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _context5, _context6;
+    var Demo, _mount2, instance, element, scrollBox, nextItems;
+    return _regeneratorRuntime.wrap(function _callee2$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(Demo, _Component2);
+            function Demo() {
+              var _context3;
+              var _this2;
+              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = arguments[_key2];
+              }
+              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+              _this2.listRef = null;
+              _this2.BubbleList = BubbleList;
+              return _this2;
+            }
+            Demo.defaults = function defaults() {
+              var _context4;
+              var items = _mapInstanceProperty(_context4 = _Array$from({
+                length: 12
+              })).call(_context4, function (_, index) {
+                return {
+                  key: index,
+                  role: index % 2 ? 'ai' : 'user',
+                  content: "line " + index
+                };
+              });
+              return {
+                roles: {
+                  ai: {
+                    placement: 'start',
+                    avatar: true,
+                    roleName: 'AI'
+                  },
+                  user: {
+                    placement: 'end',
+                    avatar: true,
+                    roleName: 'Me',
+                    variant: 'outlined'
+                  }
+                },
+                items: items
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 220px;\"\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                />\n            ";
+          _mount2 = mount(Demo), instance = _mount2[0], element = _mount2[1];
+          _context7.next = 5;
+          return wait(80);
+        case 5:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          expect(scrollBox.scrollTop).to.be.greaterThan(0);
+          expect(instance.listRef.isAtBottom()).to.be.true;
+          nextItems = _sliceInstanceProperty(_context5 = instance.get('items')).call(_context5);
+          nextItems[nextItems.length - 1] = _extends({}, nextItems[nextItems.length - 1], {
+            content: _mapInstanceProperty(_context6 = _Array$from({
+              length: 32
+            })).call(_context6, function (_, index) {
+              return "grow " + index;
+            }).join('\n'),
+            typing: true
+          });
+          instance.set('items', nextItems);
+          _context7.next = 13;
+          return wait(120);
+        case 13:
+          expect(instance.listRef.isAtBottom()).to.be.true;
+          expect(scrollBox.scrollHeight - scrollBox.scrollTop - scrollBox.clientHeight).to.be.lessThan(90);
+        case 15:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee2);
+  })));
+  it('should keep short content at the top when list has fixed height', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, element, scrollBox, firstRow, offset;
+    return _regeneratorRuntime.wrap(function _callee3$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
+              var _context8;
+              var _this3;
+              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
+              }
+              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context8 = [this]).call(_context8, args)) || this;
+              _this3.BubbleList = BubbleList;
+              return _this3;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                items: [{
+                  key: 1,
+                  content: 'first'
+                }, {
+                  key: 2,
+                  content: 'second'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 400px;\"\n                    items={this.get('items')}\n                >\n                    <b:item args=\"scope\">\n                        <div class=\"short-row\" style=\"height: 40px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          _mount3 = mount(Demo), element = _mount3[1];
+          _context9.next = 5;
+          return wait(50);
+        case 5:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          firstRow = element.querySelector('.short-row');
+          offset = firstRow.getBoundingClientRect().top - scrollBox.getBoundingClientRect().top;
+          expect(offset).to.be.lessThan(16);
+        case 9:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee3);
+  })));
+  it('should scroll to bottom on mount when initial content overflows', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var Demo, _mount4, element, scrollBox;
+    return _regeneratorRuntime.wrap(function _callee4$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component4) {
+            _inheritsLoose(Demo, _Component4);
+            function Demo() {
+              var _context10;
+              var _this4;
+              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                args[_key4] = arguments[_key4];
+              }
+              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+              _this4.BubbleList = BubbleList;
+              return _this4;
+            }
+            Demo.defaults = function defaults() {
+              var _context11;
+              return {
+                items: _mapInstanceProperty(_context11 = _Array$from({
+                  length: 8
+                })).call(_context11, function (_, index) {
+                  return {
+                    key: index,
+                    content: "initial-" + index
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 160px;\"\n                    items={this.get('items')}\n                >\n                    <b:item args=\"scope\">\n                        <div class=\"initial-row\" style=\"height: 48px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          _mount4 = mount(Demo), element = _mount4[1];
+          _context12.next = 5;
+          return wait(80);
+        case 5:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          expect(scrollBox.scrollTop).to.be.greaterThan(0);
+          expect(scrollBox.scrollHeight - scrollBox.scrollTop - scrollBox.clientHeight).to.be.lessThan(4);
+        case 8:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee4);
+  })));
+  it('should stop sticky scrolling after user scrolls away from the bottom', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _context15, _context16;
+    var Demo, _mount5, instance, element, scrollBox, nextItems;
+    return _regeneratorRuntime.wrap(function _callee5$(_context17) {
+      while (1) switch (_context17.prev = _context17.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component5) {
+            _inheritsLoose(Demo, _Component5);
+            function Demo() {
+              var _context13;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
+              }
+              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+              _this5.listRef = null;
+              _this5.BubbleList = BubbleList;
+              return _this5;
+            }
+            Demo.defaults = function defaults() {
+              var _context14;
+              return {
+                items: _mapInstanceProperty(_context14 = _Array$from({
+                  length: 10
+                })).call(_context14, function (_, index) {
+                  return {
+                    key: index,
+                    content: "row-" + index
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 220px;\"\n                    items={this.get('items')}\n                >\n                    <b:item args=\"scope\">\n                        <div class=\"custom-row\" style=\"height: 48px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          _mount5 = mount(Demo), instance = _mount5[0], element = _mount5[1];
+          _context17.next = 5;
+          return wait(80);
+        case 5:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          scrollBox.scrollTop = 40;
+          dispatchEvent(scrollBox, 'scroll');
+          _context17.next = 10;
+          return wait(30);
+        case 10:
+          expect(instance.listRef.isAtBottom()).to.be.false;
+          nextItems = _sliceInstanceProperty(_context15 = instance.get('items')).call(_context15);
+          nextItems[nextItems.length - 1] = _extends({}, nextItems[nextItems.length - 1], {
+            content: _mapInstanceProperty(_context16 = _Array$from({
+              length: 8
+            })).call(_context16, function (_, index) {
+              return "row-9-" + index;
+            }).join(' ')
+          });
+          instance.set('items', nextItems);
+          _context17.next = 16;
+          return wait(100);
+        case 16:
+          expect(instance.listRef.isAtBottom()).to.be.false;
+          expect(scrollBox.scrollTop).to.be.lessThan(120);
+        case 18:
+        case "end":
+          return _context17.stop();
+      }
+    }, _callee5);
+  })));
+  it('should preserve viewport position when prepending history while reading older messages', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _context20;
+    var Demo, _mount6, instance, element, scrollBox, prevScrollTop;
+    return _regeneratorRuntime.wrap(function _callee6$(_context21) {
+      while (1) switch (_context21.prev = _context21.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component6) {
+            _inheritsLoose(Demo, _Component6);
+            function Demo() {
+              var _context18;
+              var _this6;
+              for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                args[_key6] = arguments[_key6];
+              }
+              _this6 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context18 = [this]).call(_context18, args)) || this;
+              _this6.listRef = null;
+              _this6.BubbleList = BubbleList;
+              return _this6;
+            }
+            Demo.defaults = function defaults() {
+              var _context19;
+              return {
+                items: _mapInstanceProperty(_context19 = _Array$from({
+                  length: 8
+                })).call(_context19, function (_, index) {
+                  return {
+                    key: index,
+                    content: "history-" + index
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 160px;\"\n                    items={this.get('items')}\n                >\n                    <b:item args=\"scope\">\n                        <div class=\"history-row\" style=\"height: 40px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          _mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1];
+          _context21.next = 5;
+          return wait(80);
+        case 5:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          scrollBox.scrollTop = 40;
+          dispatchEvent(scrollBox, 'scroll');
+          _context21.next = 10;
+          return wait(30);
+        case 10:
+          prevScrollTop = scrollBox.scrollTop;
+          instance.set('items', _concatInstanceProperty(_context20 = [{
+            key: -2,
+            content: 'history--2'
+          }, {
+            key: -1,
+            content: 'history--1'
+          }]).call(_context20, instance.get('items')));
+          _context21.next = 14;
+          return wait(120);
+        case 14:
+          expect(scrollBox.scrollTop).to.be.greaterThan(prevScrollTop + 40);
+        case 15:
+        case "end":
+          return _context21.stop();
+      }
+    }, _callee6);
+  })));
+  it('should keep existing item dom nodes stable when prepending history without explicit keys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _context23;
+    var Demo, _mount7, instance, element, initialRows, firstExistingRow, secondExistingRow, currentItems, rowsAfterPrepend;
+    return _regeneratorRuntime.wrap(function _callee7$(_context24) {
+      while (1) switch (_context24.prev = _context24.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component7) {
+            _inheritsLoose(Demo, _Component7);
+            function Demo() {
+              var _context22;
+              var _this7;
+              for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                args[_key7] = arguments[_key7];
+              }
+              _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context22 = [this]).call(_context22, args)) || this;
+              _this7.BubbleList = BubbleList;
+              return _this7;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                items: [{
+                  content: 'row-1'
+                }, {
+                  content: 'row-2'
+                }, {
+                  content: 'row-3'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                >\n                    <b:item args=\"scope\">\n                        <div class=\"fallback-key-row\" style=\"height: 40px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
+          _context24.next = 5;
+          return wait(80);
+        case 5:
+          initialRows = element.querySelectorAll('.fallback-key-row');
+          firstExistingRow = initialRows[0];
+          secondExistingRow = initialRows[1];
+          currentItems = instance.get('items');
+          instance.set('items', _concatInstanceProperty(_context23 = [{
+            content: 'history-a'
+          }, {
+            content: 'history-b'
+          }]).call(_context23, currentItems));
+          _context24.next = 12;
+          return wait(80);
+        case 12:
+          rowsAfterPrepend = element.querySelectorAll('.fallback-key-row');
+          expect(rowsAfterPrepend[2]).to.eql(firstExistingRow);
+          expect(rowsAfterPrepend[3]).to.eql(secondExistingRow);
+          expect(rowsAfterPrepend[2].textContent).to.eql('row-1');
+          expect(rowsAfterPrepend[3].textContent).to.eql('row-2');
+        case 17:
+        case "end":
+          return _context24.stop();
+      }
+    }, _callee7);
+  })));
+  it('should limit the root height when maxHeight is set', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, element, root, scrollBox;
+    return _regeneratorRuntime.wrap(function _callee8$(_context27) {
+      while (1) switch (_context27.prev = _context27.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component8) {
+            _inheritsLoose(Demo, _Component8);
+            function Demo() {
+              var _context25;
+              var _this8;
+              for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+                args[_key8] = arguments[_key8];
+              }
+              _this8 = _Component8.call.apply(_Component8, _concatInstanceProperty(_context25 = [this]).call(_context25, args)) || this;
+              _this8.BubbleList = BubbleList;
+              return _this8;
+            }
+            Demo.defaults = function defaults() {
+              var _context26;
+              return {
+                roles: {
+                  ai: {
+                    placement: 'start',
+                    avatar: true,
+                    roleName: 'AI'
+                  },
+                  user: {
+                    placement: 'end',
+                    avatar: true,
+                    roleName: 'Me',
+                    variant: 'outlined'
+                  }
+                },
+                items: _mapInstanceProperty(_context26 = _Array$from({
+                  length: 12
+                })).call(_context26, function (_, index) {
+                  return {
+                    key: index + 1,
+                    role: index % 2 ? 'user' : 'ai',
+                    content: "row-" + (index + 1)
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"border: 1px solid transparent;\"\n                    maxHeight={180}\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                />\n            ";
+          _mount8 = mount(Demo), element = _mount8[1];
+          _context27.next = 5;
+          return wait(80);
+        case 5:
+          root = element;
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          expect(root.getBoundingClientRect().height).to.be.lessThan(181);
+          expect(scrollBox.scrollHeight).to.be.greaterThan(scrollBox.clientHeight);
+        case 9:
+        case "end":
+          return _context27.stop();
+      }
+    }, _callee8);
+  })));
+  it('should scroll correctly when using a custom item slot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, instance, element, scrollBox, targetRow, scrollBoxRect, targetRect;
+    return _regeneratorRuntime.wrap(function _callee9$(_context30) {
+      while (1) switch (_context30.prev = _context30.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component9) {
+            _inheritsLoose(Demo, _Component9);
+            function Demo() {
+              var _context28;
+              var _this9;
+              for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
+                args[_key9] = arguments[_key9];
+              }
+              _this9 = _Component9.call.apply(_Component9, _concatInstanceProperty(_context28 = [this]).call(_context28, args)) || this;
+              _this9.listRef = null;
+              _this9.BubbleList = BubbleList;
+              return _this9;
+            }
+            Demo.defaults = function defaults() {
+              var _context29;
+              return {
+                items: _mapInstanceProperty(_context29 = _Array$from({
+                  length: 12
+                })).call(_context29, function (_, index) {
+                  return {
+                    key: index + 1,
+                    content: "row-" + (index + 1)
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                >\n                    <b:item args=\"scope\">\n                        <div class=\"custom-item-shell\" style=\"height: 48px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
+          _context30.next = 5;
+          return wait(80);
+        case 5:
+          instance.listRef.scrollToKey(6, 'auto');
+          _context30.next = 8;
+          return wait(30);
+        case 8:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          targetRow = element.querySelectorAll('.custom-item-shell')[5];
+          scrollBoxRect = scrollBox.getBoundingClientRect();
+          targetRect = targetRow.getBoundingClientRect();
+          expect(Math.abs(targetRect.top - scrollBoxRect.top)).to.be.lessThan(4);
+        case 13:
+        case "end":
+          return _context30.stop();
+      }
+    }, _callee9);
+  })));
+  it('should scroll the target item near the top when calling scrollToKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount10, instance, element, scrollBox, targetRow, scrollBoxRect, targetRect;
+    return _regeneratorRuntime.wrap(function _callee10$(_context33) {
+      while (1) switch (_context33.prev = _context33.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component10) {
+            _inheritsLoose(Demo, _Component10);
+            function Demo() {
+              var _context31;
+              var _this10;
+              for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
+                args[_key10] = arguments[_key10];
+              }
+              _this10 = _Component10.call.apply(_Component10, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
+              _this10.listRef = null;
+              _this10.BubbleList = BubbleList;
+              return _this10;
+            }
+            Demo.defaults = function defaults() {
+              var _context32;
+              return {
+                roles: {
+                  ai: {
+                    placement: 'start',
+                    avatar: true,
+                    roleName: 'AI'
+                  },
+                  user: {
+                    placement: 'end',
+                    avatar: true,
+                    roleName: 'Me',
+                    variant: 'outlined'
+                  }
+                },
+                items: _mapInstanceProperty(_context32 = _Array$from({
+                  length: 12
+                })).call(_context32, function (_, index) {
+                  return {
+                    key: index + 1,
+                    role: index % 2 ? 'user' : 'ai',
+                    content: "row-" + (index + 1)
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                />\n            ";
+          _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
+          _context33.next = 5;
+          return wait(80);
+        case 5:
+          instance.listRef.scrollToKey(6, 'auto');
+          _context33.next = 8;
+          return wait(30);
+        case 8:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          targetRow = element.querySelectorAll('.k-bubble-list-item')[5];
+          scrollBoxRect = scrollBox.getBoundingClientRect();
+          targetRect = targetRow.getBoundingClientRect();
+          expect(Math.abs(targetRect.top - scrollBoxRect.top)).to.be.lessThan(4);
+        case 13:
+        case "end":
+          return _context33.stop();
+      }
+    }, _callee10);
+  })));
+  it('should support resolving keys from itemKey function when scrolling to a message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var Demo, _mount11, instance, element, scrollBox, targetRow, scrollBoxRect, targetRect;
+    return _regeneratorRuntime.wrap(function _callee11$(_context36) {
+      while (1) switch (_context36.prev = _context36.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component11) {
+            _inheritsLoose(Demo, _Component11);
+            function Demo() {
+              var _context34;
+              var _this11;
+              for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
+                args[_key11] = arguments[_key11];
+              }
+              _this11 = _Component11.call.apply(_Component11, _concatInstanceProperty(_context34 = [this]).call(_context34, args)) || this;
+              _this11.listRef = null;
+              _this11.BubbleList = BubbleList;
+              return _this11;
+            }
+            Demo.defaults = function defaults() {
+              var _context35;
+              return {
+                roles: {
+                  ai: {
+                    placement: 'start',
+                    avatar: true,
+                    roleName: 'AI'
+                  },
+                  user: {
+                    placement: 'end',
+                    avatar: true,
+                    roleName: 'Me',
+                    variant: 'outlined'
+                  }
+                },
+                items: _mapInstanceProperty(_context35 = _Array$from({
+                  length: 12
+                })).call(_context35, function (_, index) {
+                  return {
+                    id: "msg-" + (index + 1),
+                    role: index % 2 ? 'user' : 'ai',
+                    content: "row-" + (index + 1)
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    itemKey={(item) => item.id}\n                    roles={this.get('roles')}\n                />\n            ";
+          _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
+          _context36.next = 5;
+          return wait(80);
+        case 5:
+          instance.listRef.scrollToKey('msg-6', 'auto');
+          _context36.next = 8;
+          return wait(30);
+        case 8:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          targetRow = element.querySelectorAll('.k-bubble-list-item')[5];
+          scrollBoxRect = scrollBox.getBoundingClientRect();
+          targetRect = targetRow.getBoundingClientRect();
+          expect(Math.abs(targetRect.top - scrollBoxRect.top)).to.be.lessThan(4);
+        case 13:
+        case "end":
+          return _context36.stop();
+      }
+    }, _callee11);
+  })));
+  it('should keep per-item slot updates working when list boundaries change', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var _context38, _context39, _context40;
+    var Demo, _mount12, instance, element;
+    return _regeneratorRuntime.wrap(function _callee12$(_context41) {
+      while (1) switch (_context41.prev = _context41.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component12) {
+            _inheritsLoose(Demo, _Component12);
+            function Demo() {
+              var _context37;
+              var _this12;
+              for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+                args[_key12] = arguments[_key12];
+              }
+              _this12 = _Component12.call.apply(_Component12, _concatInstanceProperty(_context37 = [this]).call(_context37, args)) || this;
+              _this12.BubbleList = BubbleList;
+              return _this12;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                items: [{
+                  key: 1,
+                  content: 'first'
+                }, {
+                  key: 2,
+                  content: 'second'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList items={this.get('items')}>\n                    <b:footer args=\"scope\">\n                        <span class=\"last-flag\">{scope.item.key}:{scope.isLast ? 'last' : 'normal'}</span>\n                    </b:footer>\n                </BubbleList>\n            ";
+          _mount12 = mount(Demo), instance = _mount12[0], element = _mount12[1];
+          _context41.next = 5;
+          return wait(50);
+        case 5:
+          expect(_mapInstanceProperty(_context38 = _Array$from(element.querySelectorAll('.last-flag'))).call(_context38, function (item) {
+            return item.textContent;
+          })).to.eql(['1:normal', '2:last']);
+          instance.set('items', _concatInstanceProperty(_context39 = []).call(_context39, instance.get('items'), [{
+            key: 3,
+            content: 'third'
+          }]));
+          _context41.next = 9;
+          return wait(50);
+        case 9:
+          expect(_mapInstanceProperty(_context40 = _Array$from(element.querySelectorAll('.last-flag'))).call(_context40, function (item) {
+            return item.textContent;
+          })).to.eql(['1:normal', '2:normal', '3:last']);
+        case 10:
+        case "end":
+          return _context41.stop();
+      }
+    }, _callee12);
+  })));
+  it('should trigger loadHistory once when scrolling near the top', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var Demo, _mount13, instance, element, scrollBox;
+    return _regeneratorRuntime.wrap(function _callee13$(_context44) {
+      while (1) switch (_context44.prev = _context44.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component13) {
+            _inheritsLoose(Demo, _Component13);
+            function Demo() {
+              var _context42;
+              var _this13;
+              for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+                args[_key13] = arguments[_key13];
+              }
+              _this13 = _Component13.call.apply(_Component13, _concatInstanceProperty(_context42 = [this]).call(_context42, args)) || this;
+              _this13.BubbleList = BubbleList;
+              return _this13;
+            }
+            Demo.defaults = function defaults() {
+              var _context43;
+              return {
+                count: 0,
+                loadingHistory: false,
+                items: _mapInstanceProperty(_context43 = _Array$from({
+                  length: 10
+                })).call(_context43, function (_, index) {
+                  return {
+                    key: index,
+                    content: "history-" + index
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    hasMoreHistory={true}\n                    loadingHistory={this.get('loadingHistory')}\n                    ev-loadHistory={() => this.set({count: this.get('count') + 1, loadingHistory: true})}\n                >\n                    <b:item args=\"scope\">\n                        <div style=\"height: 44px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          _mount13 = mount(Demo), instance = _mount13[0], element = _mount13[1];
+          _context44.next = 5;
+          return wait(80);
+        case 5:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          scrollBox.scrollTop = 0;
+          dispatchEvent(scrollBox, 'scroll');
+          dispatchEvent(scrollBox, 'scroll');
+          _context44.next = 11;
+          return wait(40);
+        case 11:
+          expect(instance.get('count')).to.eql(1);
+        case 12:
+        case "end":
+          return _context44.stop();
+      }
+    }, _callee13);
+  })));
+  it('should show the default history loading text only while loadingHistory is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Demo, _mount14, instance, element;
+    return _regeneratorRuntime.wrap(function _callee14$(_context46) {
+      while (1) switch (_context46.prev = _context46.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component14) {
+            _inheritsLoose(Demo, _Component14);
+            function Demo() {
+              var _context45;
+              var _this14;
+              for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+                args[_key14] = arguments[_key14];
+              }
+              _this14 = _Component14.call.apply(_Component14, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
+              _this14.BubbleList = BubbleList;
+              return _this14;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                loadingHistory: false,
+                items: [{
+                  key: 1,
+                  content: 'hello'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    loadingHistory={this.get('loadingHistory')}\n                />\n            ";
+          _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
+          _context46.next = 5;
+          return wait(50);
+        case 5:
+          expect(element.querySelector('.k-bubble-list-history')).to.be.null;
+          instance.set('loadingHistory', true);
+          _context46.next = 9;
+          return wait(50);
+        case 9:
+          expect(element.querySelector('.k-bubble-list-history span').textContent).to.eql('加载历史中...');
+          instance.set('loadingHistory', false);
+          _context46.next = 13;
+          return wait(50);
+        case 13:
+          expect(element.querySelector('.k-bubble-list-history')).to.be.null;
+        case 14:
+        case "end":
+          return _context46.stop();
+      }
+    }, _callee14);
+  })));
+  it('should warn only once when items are missing stable keys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var warn, spy, Demo;
+    return _regeneratorRuntime.wrap(function _callee15$(_context48) {
+      while (1) switch (_context48.prev = _context48.next) {
+        case 0:
+          warn = console.warn;
+          spy = sinon.spy();
+          console.warn = spy;
+          Demo = /*#__PURE__*/function (_Component15) {
+            _inheritsLoose(Demo, _Component15);
+            function Demo() {
+              var _context47;
+              var _this15;
+              for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+                args[_key15] = arguments[_key15];
+              }
+              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
+              _this15.BubbleList = BubbleList;
+              return _this15;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                items: [{
+                  content: 'a'
+                }, {
+                  content: 'b'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList items={this.get('items')}>\n                    <b:item args=\"scope\">\n                        <div style=\"height: 40px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          _context48.prev = 5;
+          mount(Demo);
+          _context48.next = 9;
+          return wait(50);
+        case 9:
+          expect(spy.callCount).to.eql(1);
+          expect(spy.args[0][0]).to.contain('stable `key`');
+        case 11:
+          _context48.prev = 11;
+          console.warn = warn;
+          return _context48.finish(11);
+        case 14:
+        case "end":
+          return _context48.stop();
+      }
+    }, _callee15, null, [[5,, 11, 14]]);
+  })));
+  it('should render empty slot only when there are no items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var Demo, _mount15, instance, element;
+    return _regeneratorRuntime.wrap(function _callee16$(_context50) {
+      while (1) switch (_context50.prev = _context50.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component16) {
+            _inheritsLoose(Demo, _Component16);
+            function Demo() {
+              var _context49;
+              var _this16;
+              for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
+                args[_key16] = arguments[_key16];
+              }
+              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context49 = [this]).call(_context49, args)) || this;
+              _this16.BubbleList = BubbleList;
+              return _this16;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                items: []
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                >\n                    <b:empty>\n                        <div class=\"custom-empty\">empty</div>\n                    </b:empty>\n                </BubbleList>\n            ";
+          _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
+          _context50.next = 5;
+          return wait(50);
+        case 5:
+          expect(element.querySelector('.custom-empty').textContent).to.eql('empty');
+          instance.set('items', [{
+            key: 1,
+            content: 'hello'
+          }]);
+          _context50.next = 9;
+          return wait(50);
+        case 9:
+          expect(element.querySelector('.custom-empty')).to.be.null;
+        case 10:
+        case "end":
+          return _context50.stop();
+      }
+    }, _callee16);
+  })));
+  it('should keep custom historyLoading slot visible for final no-more-history text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var Demo, _mount16, element;
+    return _regeneratorRuntime.wrap(function _callee17$(_context52) {
+      while (1) switch (_context52.prev = _context52.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component17) {
+            _inheritsLoose(Demo, _Component17);
+            function Demo() {
+              var _context51;
+              var _this17;
+              for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
+                args[_key17] = arguments[_key17];
+              }
+              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context51 = [this]).call(_context51, args)) || this;
+              _this17.BubbleList = BubbleList;
+              return _this17;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                items: [{
+                  key: 1,
+                  content: 'hello'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    hasMoreHistory={false}\n                    loadingHistory={false}\n                >\n                    <b:historyLoading args=\"scope\">\n                        <div class=\"history-status\">\n                            {scope.loadingHistory ? 'loading' : scope.hasMoreHistory ? 'more' : 'done'}\n                        </div>\n                    </b:historyLoading>\n                </BubbleList>\n            ";
+          _mount16 = mount(Demo), element = _mount16[1];
+          _context52.next = 5;
+          return wait(50);
+        case 5:
+          expect(element.querySelector('.history-status').textContent).to.eql('done');
+        case 6:
+        case "end":
+          return _context52.stop();
+      }
+    }, _callee17);
+  })));
+  it('should not render bubble wrappers for empty scoped slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var Demo, _mount17, element;
+    return _regeneratorRuntime.wrap(function _callee18$(_context54) {
+      while (1) switch (_context54.prev = _context54.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component18) {
+            _inheritsLoose(Demo, _Component18);
+            function Demo() {
+              var _context53;
+              var _this18;
+              for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
+                args[_key18] = arguments[_key18];
+              }
+              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
+              _this18.BubbleList = BubbleList;
+              return _this18;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                roles: {
+                  ai: {
+                    placement: 'start'
+                  }
+                },
+                items: [{
+                  key: 1,
+                  role: 'ai',
+                  content: '生成中',
+                  completed: false
+                }, {
+                  key: 2,
+                  role: 'ai',
+                  content: '已完成',
+                  completed: true
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                >\n                    <b:extra args=\"scope\">\n                        <span v-if={scope.item.completed} class=\"scoped-extra\">\u5DF2\u5B8C\u6210</span>\n                    </b:extra>\n                </BubbleList>\n            ";
+          _mount17 = mount(Demo), element = _mount17[1];
+          _context54.next = 5;
+          return wait(50);
+        case 5:
+          expect(element.querySelectorAll('.k-bubble-extra').length).to.eql(1);
+          expect(element.querySelector('.scoped-extra').textContent).to.eql('已完成');
+        case 7:
+        case "end":
+          return _context54.stop();
+      }
+    }, _callee18);
+  })));
+  it('should not render wrappers for empty outer slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var Demo, _mount18, element;
+    return _regeneratorRuntime.wrap(function _callee19$(_context56) {
+      while (1) switch (_context56.prev = _context56.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component19) {
+            _inheritsLoose(Demo, _Component19);
+            function Demo() {
+              var _context55;
+              var _this19;
+              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+                args[_key19] = arguments[_key19];
+              }
+              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
+              _this19.BubbleList = BubbleList;
+              return _this19;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                items: [{
+                  key: 1,
+                  content: 'hello'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                    loadingHistory={true}\n                >\n                    <b:header>\n                        <span v-if={false} class=\"empty-header\">header</span>\n                    </b:header>\n                    <b:historyLoading>\n                        <span v-if={false} class=\"empty-history\">history</span>\n                    </b:historyLoading>\n                    <b:listFooter>\n                        <span v-if={false} class=\"empty-footer\">footer</span>\n                    </b:listFooter>\n                </BubbleList>\n            ";
+          _mount18 = mount(Demo), element = _mount18[1];
+          _context56.next = 5;
+          return wait(50);
+        case 5:
+          expect(element.querySelector('.k-bubble-list-header')).to.eql(null);
+          expect(element.querySelector('.k-bubble-list-history')).to.eql(null);
+          expect(element.querySelector('.k-bubble-list-footer')).to.eql(null);
+          expect(element.querySelector('.k-bubble')).not.to.eql(null);
+        case 9:
+        case "end":
+          return _context56.stop();
+      }
+    }, _callee19);
+  })));
+  it('should not render empty wrapper when empty slot is empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var Demo, _mount19, element;
+    return _regeneratorRuntime.wrap(function _callee20$(_context58) {
+      while (1) switch (_context58.prev = _context58.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component20) {
+            _inheritsLoose(Demo, _Component20);
+            function Demo() {
+              var _context57;
+              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(_context57 = [this]).call(_context57, args)) || this;
+              _this20.BubbleList = BubbleList;
+              return _this20;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList items={[]}>\n                    <b:empty>\n                        <span v-if={false} class=\"empty-content\">empty</span>\n                    </b:empty>\n                </BubbleList>\n            ";
+          _mount19 = mount(Demo), element = _mount19[1];
+          _context58.next = 5;
+          return wait(50);
+        case 5:
+          expect(element.querySelector('.k-bubble-list-empty')).to.eql(null);
+          expect(element.querySelector('.k-bubble-list-items')).not.to.eql(null);
+        case 7:
+        case "end":
+          return _context58.stop();
+      }
+    }, _callee20);
+  })));
+  it('should emit scroll state events and honor showScrollToBottom=false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var _context61, _context62;
+    var Demo, _mount20, instance, element, scrollBox;
+    return _regeneratorRuntime.wrap(function _callee21$(_context63) {
+      while (1) switch (_context63.prev = _context63.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component21) {
+            _inheritsLoose(Demo, _Component21);
+            function Demo() {
+              var _context59;
+              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(_context59 = [this]).call(_context59, args)) || this;
+              _this21.listRef = null;
+              _this21.BubbleList = BubbleList;
+              return _this21;
+            }
+            Demo.defaults = function defaults() {
+              var _context60;
+              return {
+                scrollCount: 0,
+                bottomStates: [],
+                autoStates: [],
+                items: _mapInstanceProperty(_context60 = _Array$from({
+                  length: 12
+                })).call(_context60, function (_, index) {
+                  return {
+                    key: index,
+                    content: "row-" + index
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    showScrollToBottom={false}\n                    ev-scroll={() => this.set('scrollCount', this.get('scrollCount') + 1)}\n                    ev-scrollBottomChange={(value) => this.set('bottomStates', [...this.get('bottomStates'), value])}\n                    ev-autoScrollChange={(value) => this.set('autoStates', [...this.get('autoStates'), value])}\n                >\n                    <b:item args=\"scope\">\n                        <div style=\"height: 44px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          _mount20 = mount(Demo), instance = _mount20[0], element = _mount20[1];
+          _context63.next = 5;
+          return wait(80);
+        case 5:
+          instance.set({
+            scrollCount: 0,
+            bottomStates: [],
+            autoStates: []
+          });
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          scrollBox.scrollTop = 40;
+          dispatchEvent(scrollBox, 'scroll');
+          dispatchEvent(scrollBox, 'scroll');
+          _context63.next = 12;
+          return wait(40);
+        case 12:
+          _atInstanceProperty(expect(instance.get('scrollCount')).to.be).least(2);
+          expect(instance.get('bottomStates')).to.eql([false]);
+          expect(instance.get('autoStates')).to.eql([false]);
+          expect(element.querySelector('.k-bubble-list-scroll-to-bottom')).to.be.null;
+          instance.listRef.scrollToBottom('auto');
+          _context63.next = 19;
+          return wait(50);
+        case 19:
+          expect(_sliceInstanceProperty(_context61 = instance.get('bottomStates')).call(_context61, -1)[0]).to.eql(true);
+          expect(_sliceInstanceProperty(_context62 = instance.get('autoStates')).call(_context62, -1)[0]).to.eql(true);
+          expect(instance.listRef.isAtBottom()).to.be.true;
+          expect(element.querySelector('.k-bubble-list-scroll-to-bottom')).to.be.null;
+        case 23:
+        case "end":
+          return _context63.stop();
+      }
+    }, _callee21);
+  })));
+  it('should forward typing events to role handlers and component events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var roleTypingPayload, roleTypingCompletePayload, Demo, _mount21, instance;
+    return _regeneratorRuntime.wrap(function _callee22$(_context65) {
+      while (1) switch (_context65.prev = _context65.next) {
+        case 0:
+          roleTypingPayload = null;
+          roleTypingCompletePayload = null;
+          Demo = /*#__PURE__*/function (_Component22) {
+            _inheritsLoose(Demo, _Component22);
+            function Demo() {
+              var _context64;
+              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(_context64 = [this]).call(_context64, args)) || this;
+              _this22.BubbleList = BubbleList;
+              return _this22;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                typingCount: 0,
+                completeCount: 0,
+                completedContent: '',
+                roles: {
+                  ai: {
+                    placement: 'start',
+                    onTyping: function onTyping(renderedContent, currentContent, item, index) {
+                      roleTypingPayload = {
+                        renderedContent: renderedContent,
+                        currentContent: currentContent,
+                        item: item,
+                        index: index
+                      };
+                    },
+                    onTypingComplete: function onTypingComplete(content, item, index) {
+                      roleTypingCompletePayload = {
+                        content: content,
+                        item: item,
+                        index: index
+                      };
+                    }
+                  }
+                },
+                items: [{
+                  key: 1,
+                  role: 'ai',
+                  content: 'abcd',
+                  typing: {
+                    interval: 16,
+                    step: 1
+                  }
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                    ev-typing={() => this.set('typingCount', this.get('typingCount') + 1)}\n                    ev-typingComplete={(item, content) => this.set({\n                        completeCount: this.get('completeCount') + 1,\n                        completedContent: item.key + ':' + content,\n                    })}\n                />\n            ";
+          _mount21 = mount(Demo), instance = _mount21[0];
+          _context65.next = 7;
+          return wait(120);
+        case 7:
+          expect(instance.get('typingCount')).to.be.greaterThan(0);
+          expect(instance.get('completeCount')).to.eql(1);
+          expect(instance.get('completedContent')).to.eql('1:abcd');
+          expect(roleTypingPayload.currentContent).to.eql('abcd');
+          expect(roleTypingPayload.item.key).to.eql(1);
+          expect(roleTypingPayload.index).to.eql(0);
+          expect(roleTypingCompletePayload.content).to.eql('abcd');
+          expect(roleTypingCompletePayload.item.key).to.eql(1);
+          expect(roleTypingCompletePayload.index).to.eql(0);
+        case 16:
+        case "end":
+          return _context65.stop();
+      }
+    }, _callee22);
+  })));
+});