@hellotext/hellotext 2.4.1 → 2.4.3

package/lib/controllers/message_controller.cjs

@@ -50,13 +50,15 @@ let _default = /*#__PURE__*/function (_Controller) {
       currentTarget
     }) {
       const card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]');
+      const messageElement = currentTarget.closest('[data-controller~="hellotext--message"]');
+      const body = currentTarget.dataset.text || currentTarget.textContent.trim();
       this.dispatch('quickReply', {
         detail: {
           id: this.idValue,
-          product: card.dataset.id,
+          product: card === null || card === void 0 ? void 0 : card.dataset.id,
           buttonId: currentTarget.dataset.id,
-          body: currentTarget.dataset.text,
-          cardElement: card
+          body,
+          cardElement: card || messageElement || currentTarget
         }
       });
     }
@@ -66,22 +68,41 @@ let _default = /*#__PURE__*/function (_Controller) {
       currentTarget
     }) {
       const card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]');
-      const payload = {
+      const {
+        id,
+        reference,
+        source
+      } = card.dataset;
+      const item = {
+        product: id,
+        quantity: 1
+      };
+      _hellotext.default.track('cart.added', {
+        object_parameters: {
+          items: [item]
+        }
+      });
+      _hellotext.default.eventEmitter.dispatch('cart.added', {
         object_parameters: {
           items: [{
-            product: card.dataset.id,
-            quantity: 1
+            ...item,
+            ...(reference && {
+              reference
+            }),
+            ...(source && {
+              source
+            })
           }]
         }
-      };
-      _hellotext.default.track('cart.added', payload);
-      _hellotext.default.eventEmitter.dispatch('cart.added', payload);
+      });
     }
   }, {
     key: "moveToLeft",
     value: function moveToLeft() {
       if (!this.hasCarouselContainerTarget) return;
-      const scrollAmount = this.getScrollAmount();
+      const nextScrollLeft = this.getPreviousPageScrollLeft();
+      const scrollAmount = this.carouselContainerTarget.scrollLeft - nextScrollLeft;
+      if (scrollAmount < 1) return;
       this.carouselContainerTarget.scrollBy({
         left: -scrollAmount,
         behavior: 'smooth'
@@ -91,7 +112,9 @@ let _default = /*#__PURE__*/function (_Controller) {
     key: "moveToRight",
     value: function moveToRight() {
       if (!this.hasCarouselContainerTarget) return;
-      const scrollAmount = this.getScrollAmount();
+      const nextScrollLeft = this.getNextPageScrollLeft();
+      const scrollAmount = nextScrollLeft - this.carouselContainerTarget.scrollLeft;
+      if (scrollAmount < 1) return;
       this.carouselContainerTarget.scrollBy({
         left: scrollAmount,
         behavior: 'smooth'
@@ -100,44 +123,157 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "getScrollAmount",
     value: function getScrollAmount() {
-      // Get the actual card width from DOM
+      return this.getCardScrollAmount();
+    }
+  }, {
+    key: "getCardScrollAmount",
+    value: function getCardScrollAmount() {
       const firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card');
       if (!firstCard) {
         return 280; // Fallback to default desktop card width
       }
 
       const cardWidth = firstCard.offsetWidth;
-      const gap = 16; // gap-x-4 = 1rem = 16px
-
-      return cardWidth + gap;
+      return cardWidth + this.getGap();
+    }
+  }, {
+    key: "getPageScrollAmount",
+    value: function getPageScrollAmount() {
+      const scrollAmount = this.carouselContainerTarget.clientWidth - this.getGap();
+      return scrollAmount > 0 ? scrollAmount : this.getCardScrollAmount();
+    }
+  }, {
+    key: "getNextPageScrollLeft",
+    value: function getNextPageScrollLeft() {
+      const currentScrollLeft = this.getCurrentScrollLeft();
+      const viewportRight = currentScrollLeft + this.carouselContainerTarget.clientWidth;
+      const cardMetrics = this.getCardMetrics();
+      const nextCard = cardMetrics.find(card => card.end > viewportRight + 1);
+      const targetScrollLeft = nextCard ? this.getPageAlignedScrollLeft(nextCard.start) : currentScrollLeft + this.getPageScrollAmount();
+      const fallbackScrollLeft = currentScrollLeft + this.getPageScrollAmount();
+      return this.clampScrollLeft(targetScrollLeft > currentScrollLeft + 1 ? targetScrollLeft : fallbackScrollLeft);
+    }
+  }, {
+    key: "getPreviousPageScrollLeft",
+    value: function getPreviousPageScrollLeft() {
+      const currentScrollLeft = this.getCurrentScrollLeft();
+      if (currentScrollLeft <= 1) return 0;
+      const targetThreshold = Math.max(currentScrollLeft - this.getPageScrollAmount(), 0);
+      if (targetThreshold <= 1) return 0;
+      const cardMetrics = this.getCardMetrics();
+      const previousPageCard = cardMetrics.find(card => card.start >= targetThreshold - 1 && card.start < currentScrollLeft - 1);
+      const previousCard = [...cardMetrics].reverse().find(card => card.start < currentScrollLeft - 1);
+      return this.getPageAlignedScrollLeft((previousPageCard === null || previousPageCard === void 0 ? void 0 : previousPageCard.start) ?? (previousCard === null || previousCard === void 0 ? void 0 : previousCard.start) ?? 0);
+    }
+  }, {
+    key: "getPageAlignedScrollLeft",
+    value: function getPageAlignedScrollLeft(cardStart) {
+      const pageStartOffset = this.getPageStartOffset();
+      if (cardStart <= pageStartOffset + 1) return 0;
+      return this.clampScrollLeft(cardStart - pageStartOffset);
+    }
+  }, {
+    key: "getCardMetrics",
+    value: function getCardMetrics() {
+      return Array.from(this.carouselContainerTarget.querySelectorAll('.message__carousel_card')).map(card => {
+        const start = this.getCardScrollLeft(card);
+        return {
+          start,
+          end: start + card.offsetWidth
+        };
+      });
+    }
+  }, {
+    key: "getCardScrollLeft",
+    value: function getCardScrollLeft(card) {
+      const cardRect = card.getBoundingClientRect();
+      const containerRect = this.carouselContainerTarget.getBoundingClientRect();
+      if (cardRect.left || cardRect.width || containerRect.left || containerRect.width) {
+        return cardRect.left - containerRect.left + this.carouselContainerTarget.scrollLeft;
+      }
+      return card.offsetLeft || 0;
+    }
+  }, {
+    key: "getCurrentScrollLeft",
+    value: function getCurrentScrollLeft() {
+      return this.clampScrollLeft(this.carouselContainerTarget.scrollLeft);
+    }
+  }, {
+    key: "clampScrollLeft",
+    value: function clampScrollLeft(scrollLeft) {
+      const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0);
+      return Math.min(Math.max(scrollLeft, 0), maxScroll);
+    }
+  }, {
+    key: "getGap",
+    value: function getGap() {
+      const styles = window.getComputedStyle(this.carouselContainerTarget);
+      const gap = Number.parseFloat(styles.columnGap || styles.gap);
+      return Number.isFinite(gap) ? gap : 16;
+    }
+  }, {
+    key: "getFadeDistance",
+    value: function getFadeDistance() {
+      return Number.isFinite(this.fadeDistanceValue) ? this.fadeDistanceValue : 64;
+    }
+  }, {
+    key: "getPageStartOffset",
+    value: function getPageStartOffset() {
+      return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0;
     }
   }, {
     key: "updateFades",
     value: function updateFades() {
       if (!this.hasCarouselContainerTarget) return;
-      const scrollLeft = this.carouselContainerTarget.scrollLeft;
-      const maxScroll = this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth;
-
-      // Show left fade if scrolled past start
-      if (scrollLeft > 0) {
-        this.leftFadeTarget.classList.remove('hidden');
-      } else {
-        this.leftFadeTarget.classList.add('hidden');
+      const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0);
+      if (maxScroll <= 1) {
+        this.hideFade(this.leftFadeTarget);
+        this.hideFade(this.rightFadeTarget);
+        return;
       }
-
-      // Show right fade if not at end
-      if (scrollLeft < maxScroll - 1) {
-        // -1 for rounding errors
-        this.rightFadeTarget.classList.remove('hidden');
-      } else {
-        this.rightFadeTarget.classList.add('hidden');
+      const scrollLeft = Math.min(Math.max(this.carouselContainerTarget.scrollLeft, 0), maxScroll);
+      const fadeDistance = this.getFadeDistance();
+      this.setFadeOpacity(this.leftFadeTarget, scrollLeft / fadeDistance);
+      this.setFadeOpacity(this.rightFadeTarget, (maxScroll - scrollLeft) / fadeDistance);
+    }
+  }, {
+    key: "setFadeOpacity",
+    value: function setFadeOpacity(fadeTarget, opacity) {
+      const clampedOpacity = Math.min(Math.max(opacity, 0), 1);
+      if (clampedOpacity <= 0.05) {
+        this.hideFade(fadeTarget);
+        return;
       }
+      fadeTarget.classList.remove('hidden');
+      fadeTarget.removeAttribute('disabled');
+      fadeTarget.removeAttribute('tabindex');
+      fadeTarget.setAttribute('aria-hidden', 'false');
+      fadeTarget.style.opacity = clampedOpacity.toFixed(3);
+      fadeTarget.style.pointerEvents = 'auto';
+    }
+  }, {
+    key: "hideFade",
+    value: function hideFade(fadeTarget) {
+      fadeTarget.style.opacity = '0';
+      fadeTarget.style.pointerEvents = 'none';
+      fadeTarget.setAttribute('aria-hidden', 'true');
+      fadeTarget.setAttribute('tabindex', '-1');
+      if ('disabled' in fadeTarget) fadeTarget.disabled = true;
+      fadeTarget.classList.add('hidden');
     }
   }]);
   return _default;
 }(_stimulus.Controller);
 exports.default = _default;
 _default.values = {
-  id: String
+  fadeDistance: {
+    type: Number,
+    default: 64
+  },
+  id: String,
+  pageStartOffset: {
+    type: Number,
+    default: 0
+  }
 };
 _default.targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard'];

package/lib/controllers/message_controller.js

@@ -1,3 +1,6 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -45,13 +48,15 @@ var _default = /*#__PURE__*/function (_Controller) {
         currentTarget
       } = _ref2;
       var card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]');
+      var messageElement = currentTarget.closest('[data-controller~="hellotext--message"]');
+      var body = currentTarget.dataset.text || currentTarget.textContent.trim();
       this.dispatch('quickReply', {
         detail: {
           id: this.idValue,
-          product: card.dataset.id,
+          product: card === null || card === void 0 ? void 0 : card.dataset.id,
           buttonId: currentTarget.dataset.id,
-          body: currentTarget.dataset.text,
-          cardElement: card
+          body,
+          cardElement: card || messageElement || currentTarget
         }
       });
     }
@@ -62,22 +67,37 @@ var _default = /*#__PURE__*/function (_Controller) {
         currentTarget
       } = _ref3;
       var card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]');
-      var payload = {
+      var {
+        id,
+        reference,
+        source
+      } = card.dataset;
+      var item = {
+        product: id,
+        quantity: 1
+      };
+      Hellotext.track('cart.added', {
         object_parameters: {
-          items: [{
-            product: card.dataset.id,
-            quantity: 1
-          }]
+          items: [item]
         }
-      };
-      Hellotext.track('cart.added', payload);
-      Hellotext.eventEmitter.dispatch('cart.added', payload);
+      });
+      Hellotext.eventEmitter.dispatch('cart.added', {
+        object_parameters: {
+          items: [_objectSpread(_objectSpread(_objectSpread({}, item), reference && {
+            reference
+          }), source && {
+            source
+          })]
+        }
+      });
     }
   }, {
     key: "moveToLeft",
     value: function moveToLeft() {
       if (!this.hasCarouselContainerTarget) return;
-      var scrollAmount = this.getScrollAmount();
+      var nextScrollLeft = this.getPreviousPageScrollLeft();
+      var scrollAmount = this.carouselContainerTarget.scrollLeft - nextScrollLeft;
+      if (scrollAmount < 1) return;
       this.carouselContainerTarget.scrollBy({
         left: -scrollAmount,
         behavior: 'smooth'
@@ -87,7 +107,9 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "moveToRight",
     value: function moveToRight() {
       if (!this.hasCarouselContainerTarget) return;
-      var scrollAmount = this.getScrollAmount();
+      var nextScrollLeft = this.getNextPageScrollLeft();
+      var scrollAmount = nextScrollLeft - this.carouselContainerTarget.scrollLeft;
+      if (scrollAmount < 1) return;
       this.carouselContainerTarget.scrollBy({
         left: scrollAmount,
         behavior: 'smooth'
@@ -96,44 +118,158 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "getScrollAmount",
     value: function getScrollAmount() {
-      // Get the actual card width from DOM
+      return this.getCardScrollAmount();
+    }
+  }, {
+    key: "getCardScrollAmount",
+    value: function getCardScrollAmount() {
       var firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card');
       if (!firstCard) {
         return 280; // Fallback to default desktop card width
       }
 
       var cardWidth = firstCard.offsetWidth;
-      var gap = 16; // gap-x-4 = 1rem = 16px
-
-      return cardWidth + gap;
+      return cardWidth + this.getGap();
+    }
+  }, {
+    key: "getPageScrollAmount",
+    value: function getPageScrollAmount() {
+      var scrollAmount = this.carouselContainerTarget.clientWidth - this.getGap();
+      return scrollAmount > 0 ? scrollAmount : this.getCardScrollAmount();
+    }
+  }, {
+    key: "getNextPageScrollLeft",
+    value: function getNextPageScrollLeft() {
+      var currentScrollLeft = this.getCurrentScrollLeft();
+      var viewportRight = currentScrollLeft + this.carouselContainerTarget.clientWidth;
+      var cardMetrics = this.getCardMetrics();
+      var nextCard = cardMetrics.find(card => card.end > viewportRight + 1);
+      var targetScrollLeft = nextCard ? this.getPageAlignedScrollLeft(nextCard.start) : currentScrollLeft + this.getPageScrollAmount();
+      var fallbackScrollLeft = currentScrollLeft + this.getPageScrollAmount();
+      return this.clampScrollLeft(targetScrollLeft > currentScrollLeft + 1 ? targetScrollLeft : fallbackScrollLeft);
+    }
+  }, {
+    key: "getPreviousPageScrollLeft",
+    value: function getPreviousPageScrollLeft() {
+      var _ref4, _previousPageCard$sta;
+      var currentScrollLeft = this.getCurrentScrollLeft();
+      if (currentScrollLeft <= 1) return 0;
+      var targetThreshold = Math.max(currentScrollLeft - this.getPageScrollAmount(), 0);
+      if (targetThreshold <= 1) return 0;
+      var cardMetrics = this.getCardMetrics();
+      var previousPageCard = cardMetrics.find(card => card.start >= targetThreshold - 1 && card.start < currentScrollLeft - 1);
+      var previousCard = [...cardMetrics].reverse().find(card => card.start < currentScrollLeft - 1);
+      return this.getPageAlignedScrollLeft((_ref4 = (_previousPageCard$sta = previousPageCard === null || previousPageCard === void 0 ? void 0 : previousPageCard.start) !== null && _previousPageCard$sta !== void 0 ? _previousPageCard$sta : previousCard === null || previousCard === void 0 ? void 0 : previousCard.start) !== null && _ref4 !== void 0 ? _ref4 : 0);
+    }
+  }, {
+    key: "getPageAlignedScrollLeft",
+    value: function getPageAlignedScrollLeft(cardStart) {
+      var pageStartOffset = this.getPageStartOffset();
+      if (cardStart <= pageStartOffset + 1) return 0;
+      return this.clampScrollLeft(cardStart - pageStartOffset);
+    }
+  }, {
+    key: "getCardMetrics",
+    value: function getCardMetrics() {
+      return Array.from(this.carouselContainerTarget.querySelectorAll('.message__carousel_card')).map(card => {
+        var start = this.getCardScrollLeft(card);
+        return {
+          start,
+          end: start + card.offsetWidth
+        };
+      });
+    }
+  }, {
+    key: "getCardScrollLeft",
+    value: function getCardScrollLeft(card) {
+      var cardRect = card.getBoundingClientRect();
+      var containerRect = this.carouselContainerTarget.getBoundingClientRect();
+      if (cardRect.left || cardRect.width || containerRect.left || containerRect.width) {
+        return cardRect.left - containerRect.left + this.carouselContainerTarget.scrollLeft;
+      }
+      return card.offsetLeft || 0;
+    }
+  }, {
+    key: "getCurrentScrollLeft",
+    value: function getCurrentScrollLeft() {
+      return this.clampScrollLeft(this.carouselContainerTarget.scrollLeft);
+    }
+  }, {
+    key: "clampScrollLeft",
+    value: function clampScrollLeft(scrollLeft) {
+      var maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0);
+      return Math.min(Math.max(scrollLeft, 0), maxScroll);
+    }
+  }, {
+    key: "getGap",
+    value: function getGap() {
+      var styles = window.getComputedStyle(this.carouselContainerTarget);
+      var gap = Number.parseFloat(styles.columnGap || styles.gap);
+      return Number.isFinite(gap) ? gap : 16;
+    }
+  }, {
+    key: "getFadeDistance",
+    value: function getFadeDistance() {
+      return Number.isFinite(this.fadeDistanceValue) ? this.fadeDistanceValue : 64;
+    }
+  }, {
+    key: "getPageStartOffset",
+    value: function getPageStartOffset() {
+      return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0;
     }
   }, {
     key: "updateFades",
     value: function updateFades() {
       if (!this.hasCarouselContainerTarget) return;
-      var scrollLeft = this.carouselContainerTarget.scrollLeft;
-      var maxScroll = this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth;
-
-      // Show left fade if scrolled past start
-      if (scrollLeft > 0) {
-        this.leftFadeTarget.classList.remove('hidden');
-      } else {
-        this.leftFadeTarget.classList.add('hidden');
+      var maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0);
+      if (maxScroll <= 1) {
+        this.hideFade(this.leftFadeTarget);
+        this.hideFade(this.rightFadeTarget);
+        return;
       }
-
-      // Show right fade if not at end
-      if (scrollLeft < maxScroll - 1) {
-        // -1 for rounding errors
-        this.rightFadeTarget.classList.remove('hidden');
-      } else {
-        this.rightFadeTarget.classList.add('hidden');
+      var scrollLeft = Math.min(Math.max(this.carouselContainerTarget.scrollLeft, 0), maxScroll);
+      var fadeDistance = this.getFadeDistance();
+      this.setFadeOpacity(this.leftFadeTarget, scrollLeft / fadeDistance);
+      this.setFadeOpacity(this.rightFadeTarget, (maxScroll - scrollLeft) / fadeDistance);
+    }
+  }, {
+    key: "setFadeOpacity",
+    value: function setFadeOpacity(fadeTarget, opacity) {
+      var clampedOpacity = Math.min(Math.max(opacity, 0), 1);
+      if (clampedOpacity <= 0.05) {
+        this.hideFade(fadeTarget);
+        return;
       }
+      fadeTarget.classList.remove('hidden');
+      fadeTarget.removeAttribute('disabled');
+      fadeTarget.removeAttribute('tabindex');
+      fadeTarget.setAttribute('aria-hidden', 'false');
+      fadeTarget.style.opacity = clampedOpacity.toFixed(3);
+      fadeTarget.style.pointerEvents = 'auto';
+    }
+  }, {
+    key: "hideFade",
+    value: function hideFade(fadeTarget) {
+      fadeTarget.style.opacity = '0';
+      fadeTarget.style.pointerEvents = 'none';
+      fadeTarget.setAttribute('aria-hidden', 'true');
+      fadeTarget.setAttribute('tabindex', '-1');
+      if ('disabled' in fadeTarget) fadeTarget.disabled = true;
+      fadeTarget.classList.add('hidden');
     }
   }]);
   return _default;
 }(Controller);
 _default.values = {
-  id: String
+  fadeDistance: {
+    type: Number,
+    default: 64
+  },
+  id: String,
+  pageStartOffset: {
+    type: Number,
+    default: 0
+  }
 };
 _default.targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard'];
 export { _default as default };

package/lib/controllers/mixins/usePopover.cjs

@@ -48,6 +48,8 @@ const usePopover = controller => {
     openValueChanged() {
       if (this.disabledValue) return;
       if (this.openValue) {
+        var _this$preparePopoverO;
+        (_this$preparePopoverO = this.preparePopoverOpenAnimation) === null || _this$preparePopoverO === void 0 ? void 0 : _this$preparePopoverO.call(this);
         this.popoverTarget.showPopover();
         this.popoverTarget.setAttribute('aria-expanded', 'true');
         if (this['onPopoverOpened']) {

package/lib/controllers/mixins/usePopover.js

@@ -44,6 +44,8 @@ export var usePopover = controller => {
     openValueChanged() {
       if (this.disabledValue) return;
       if (this.openValue) {
+        var _this$preparePopoverO;
+        (_this$preparePopoverO = this.preparePopoverOpenAnimation) === null || _this$preparePopoverO === void 0 ? void 0 : _this$preparePopoverO.call(this);
         this.popoverTarget.showPopover();
         this.popoverTarget.setAttribute('aria-expanded', 'true');
         if (this['onPopoverOpened']) {

package/lib/controllers/webchat/useTeaser.cjs

@@ -118,7 +118,9 @@ const useTeaser = controller => {
       return messages.some(message => message !== this.messageTemplateTarget);
     },
     teaserSeenKey() {
-      return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen`;
+      const teaserVersion = this.hasTeaserTarget ? this.teaserTarget.dataset.teaserVersion : '';
+      const versionSegment = teaserVersion ? `:${teaserVersion}` : '';
+      return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen${versionSegment}`;
     },
     teaserSeenForSession() {
       try {

package/lib/controllers/webchat/useTeaser.js

@@ -112,7 +112,9 @@ export var useTeaser = controller => {
       return messages.some(message => message !== this.messageTemplateTarget);
     },
     teaserSeenKey() {
-      return "hellotext:webchat:".concat(this.idValue || this.element.id, ":teaser-seen");
+      var teaserVersion = this.hasTeaserTarget ? this.teaserTarget.dataset.teaserVersion : '';
+      var versionSegment = teaserVersion ? ":".concat(teaserVersion) : '';
+      return "hellotext:webchat:".concat(this.idValue || this.element.id, ":teaser-seen").concat(versionSegment);
     },
     teaserSeenForSession() {
       try {