@hellotext/hellotext 2.4.2 → 2.4.4

package/lib/controllers/webchat_controller.cjs

@@ -30,6 +30,15 @@ function _possibleConstructorReturn(self, call) { if (call && (typeof call === "
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+const POPOVER_ANIMATION_DURATION = 120;
+const MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
+  hour: 'numeric',
+  minute: '2-digit'
+};
+const SCROLL_ISOLATION_EVENT_OPTIONS = {
+  capture: true,
+  passive: true
+};
 let _default = /*#__PURE__*/function (_Controller) {
   _inherits(_default, _Controller);
   var _super = _createSuper(_default);
@@ -49,6 +58,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.onTypingStart = this.onTypingStart.bind(this);
       this.onScroll = this.onScroll.bind(this);
       this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this);
+      this.closePopoverOnEscape = this.closePopoverOnEscape.bind(this);
       this.broadcastChannel = new BroadcastChannel(`hellotext--webchat--${this.idValue}`);
       _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this);
     }
@@ -72,15 +82,20 @@ let _default = /*#__PURE__*/function (_Controller) {
       }
       this.setupTeaser();
       this.setupOpeningSequence();
+      this.localizeMessageTimestamps();
       this.webChatChannel.onMessage(this.onMessageReceived);
       this.webChatChannel.onTypingStart(this.onTypingStart);
       this.webChatChannel.onReaction(this.onMessageReaction);
+      this.setupMessagesContainerScrollIsolation();
       this.messagesContainerTarget.addEventListener('scroll', this.onScroll);
+      this.messagesContainerTarget.addEventListener('wheel', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
+      this.messagesContainerTarget.addEventListener('touchmove', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
       if (this.shouldOpenOnMount) {
         this.openValue = true;
       }
       _hellotext.default.eventEmitter.dispatch('webchat:mounted');
       this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent);
+      window.addEventListener('keydown', this.closePopoverOnEscape, true);
       this.scheduleBehaviourOpen();
       _get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
     }
@@ -88,10 +103,14 @@ let _default = /*#__PURE__*/function (_Controller) {
     key: "disconnect",
     value: function disconnect() {
       this.cancelBehaviourOpen();
+      this.clearPopoverOpenAnimation();
       this.teardownTeaser();
       this.teardownOpeningSequence();
       this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent);
       this.messagesContainerTarget.removeEventListener('scroll', this.onScroll);
+      this.messagesContainerTarget.removeEventListener('wheel', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
+      this.messagesContainerTarget.removeEventListener('touchmove', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
+      window.removeEventListener('keydown', this.closePopoverOnEscape, true);
 
       // Clean up typing indicator timeouts
       this.clearTypingIndicator();
@@ -99,6 +118,21 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.floatingUICleanup();
       _get(_getPrototypeOf(_default.prototype), "disconnect", this).call(this);
     }
+  }, {
+    key: "setupMessagesContainerScrollIsolation",
+    value: function setupMessagesContainerScrollIsolation() {
+      this.messagesContainerTarget.style.overscrollBehavior = 'contain';
+      this.messagesContainerTarget.style.webkitOverflowScrolling = 'touch';
+      this.messagesContainerTarget.style.touchAction = 'pan-y';
+      this.messagesContainerTarget.setAttribute('data-lenis-prevent', '');
+      this.messagesContainerTarget.setAttribute('data-lenis-prevent-wheel', '');
+      this.messagesContainerTarget.setAttribute('data-lenis-prevent-touch', '');
+    }
+  }, {
+    key: "stopHostScrollPropagation",
+    value: function stopHostScrollPropagation(event) {
+      event.stopPropagation();
+    }
   }, {
     key: "onTypingStart",
     value: function onTypingStart() {
@@ -180,6 +214,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       const callbacks = {
         'message:sent': data => {
           const element = new DOMParser().parseFromString(data.element, 'text/html').body.firstElementChild;
+          this.localizeMessageTimestamps(element);
 
           // Insert message before typing indicator if one exists
           if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) {
@@ -192,8 +227,8 @@ let _default = /*#__PURE__*/function (_Controller) {
           });
         },
         'message:failed': data => {
-          var _this$messagesContain;
-          (_this$messagesContain = this.messagesContainerTarget.querySelector(`#${data.id}`)) === null || _this$messagesContain === void 0 ? void 0 : _this$messagesContain.classList.add('failed');
+          const element = this.messagesContainerTarget.querySelector(`#${data.id}`);
+          this.markMessageFailed(element, data.reason);
         }
       };
       if (callbacks[data.type]) {
@@ -222,6 +257,7 @@ let _default = /*#__PURE__*/function (_Controller) {
           body,
           attachments
         } = message;
+        const createdAt = message.created_at || message.createdAt;
         const div = document.createElement('div');
         div.innerHTML = body;
         const element = this.messageTemplateTarget.cloneNode(true);
@@ -244,6 +280,7 @@ let _default = /*#__PURE__*/function (_Controller) {
           });
         }
         element.setAttribute('data-body', body);
+        this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt);
         this.messagesContainerTarget.prepend(element);
       });
       this.messagesContainerTarget.scroll({
@@ -262,10 +299,30 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "closePopover",
     value: function closePopover() {
-      this.popoverTarget.classList.add(...this.fadeOutClasses);
-      setTimeout(() => {
-        this.openValue = false;
-      }, 250);
+      this.clearPopoverOpenAnimation();
+      this.popoverTarget.classList.remove(...this.fadeOutClasses);
+      this.openValue = false;
+    }
+  }, {
+    key: "preparePopoverOpenAnimation",
+    value: function preparePopoverOpenAnimation() {
+      this.clearPopoverOpenAnimation();
+      this.popoverTarget.classList.remove(...this.fadeOutClasses);
+      this.popoverTarget.classList.add('hellotext--webchat-popover-opening');
+      this.popoverOpenAnimationTimeout = setTimeout(() => {
+        this.popoverTarget.classList.remove('hellotext--webchat-popover-opening');
+        this.popoverOpenAnimationTimeout = null;
+      }, POPOVER_ANIMATION_DURATION);
+    }
+  }, {
+    key: "clearPopoverOpenAnimation",
+    value: function clearPopoverOpenAnimation() {
+      var _this$popoverTarget;
+      if (this.popoverOpenAnimationTimeout) {
+        clearTimeout(this.popoverOpenAnimationTimeout);
+        this.popoverOpenAnimationTimeout = null;
+      }
+      (_this$popoverTarget = this.popoverTarget) === null || _this$popoverTarget === void 0 ? void 0 : _this$popoverTarget.classList.remove('hellotext--webchat-popover-opening');
     }
   }, {
     key: "onPopoverOpened",
@@ -299,6 +356,7 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onPopoverClosed",
     value: function onPopoverClosed() {
+      this.clearPopoverOpenAnimation();
       _hellotext.default.eventEmitter.dispatch('webchat:closed');
       localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed');
     }
@@ -336,6 +394,7 @@ let _default = /*#__PURE__*/function (_Controller) {
         attachments,
         teaser
       } = message;
+      const createdAt = message.created_at || message.createdAt;
       if (!this.claimMessageId(id)) return;
       (_this$hideTeaser = this.hideTeaser) === null || _this$hideTeaser === void 0 ? void 0 : _this$hideTeaser.call(this);
       if (message.carousel) {
@@ -348,6 +407,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.querySelector('[data-body]').innerHTML = div.innerHTML;
       element.setAttribute('data-id', id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt);
       if (attachments) {
         attachments.forEach(attachmentUrl => {
           var _this$messageAttachme2;
@@ -405,6 +465,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       const element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
       element.setAttribute('data-id', message.id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.localizeMessageTimestamps(element);
       this.clearTypingIndicator();
       this.messagesContainerTarget.appendChild(element);
       element.scrollIntoView({
@@ -449,14 +510,14 @@ let _default = /*#__PURE__*/function (_Controller) {
       (_this$dismissTeaserFo2 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo2 === void 0 ? void 0 : _this$dismissTeaserFo2.call(this);
       const formData = new FormData();
       formData.append('message[body]', body);
-      formData.append('message[replied_to]', id);
-      formData.append('message[product]', product);
-      formData.append('message[button]', buttonId);
+      if (id) formData.append('message[replied_to]', id);
+      if (product) formData.append('message[product]', product);
+      if (buttonId) formData.append('message[button]', buttonId);
       formData.append('session', _hellotext.default.session);
       formData.append('locale', _core.Locale.toString());
       this.appendOpeningSequenceMessageIds(formData);
       const element = this.buildMessageElement();
-      const attachment = (_cardElement$querySel = cardElement.querySelector('img')) === null || _cardElement$querySel === void 0 ? void 0 : _cardElement$querySel.cloneNode(true);
+      const attachment = cardElement === null || cardElement === void 0 ? void 0 : (_cardElement$querySel = cardElement.querySelector('img')) === null || _cardElement$querySel === void 0 ? void 0 : _cardElement$querySel.cloneNode(true);
       element.querySelector('[data-body]').innerText = body;
       if (attachment) {
         var _this$messageAttachme3;
@@ -480,17 +541,14 @@ let _default = /*#__PURE__*/function (_Controller) {
       if (response.failed) {
         // Clear the optimistic typing indicator on failure
         clearTimeout(this.optimisticTypingTimeout);
-        this.broadcastChannel.postMessage({
-          type: 'message:failed',
-          id: element.id
-        });
-        return element.classList.add('failed');
+        return this.markMessageFailedFromResponse(response, element);
       }
       const data = await response.json();
       this.dispatch('set:id', {
         target: element,
         detail: data.id
       });
+      this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt);
       this.clearRevealedOpeningSequenceMessageIds();
       const message = {
         id: data.id,
@@ -545,14 +603,11 @@ let _default = /*#__PURE__*/function (_Controller) {
       const response = await this.messagesAPI.create(formData);
       if (response.failed) {
         clearTimeout(this.optimisticTypingTimeout);
-        this.broadcastChannel.postMessage({
-          type: 'message:failed',
-          id: element.id
-        });
-        return element.classList.add('failed');
+        return this.markMessageFailedFromResponse(response, element);
       }
       const data = await response.json();
       element.setAttribute('data-id', data.id);
+      this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt);
       this.clearRevealedOpeningSequenceMessageIds();
       _hellotext.default.eventEmitter.dispatch('webchat:message:sent', {
         id: data.id,
@@ -648,15 +703,12 @@ let _default = /*#__PURE__*/function (_Controller) {
       if (response.failed) {
         // Clear the optimistic typing indicator on failure
         clearTimeout(this.optimisticTypingTimeout);
-        this.broadcastChannel.postMessage({
-          type: 'message:failed',
-          id: element.id
-        });
-        return element.classList.add('failed');
+        return this.markMessageFailedFromResponse(response, element);
       }
       const data = await response.json();
       element.setAttribute('data-id', data.id);
       message.id = data.id;
+      this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt);
       this.clearRevealedOpeningSequenceMessageIds();
       _hellotext.default.eventEmitter.dispatch('webchat:message:sent', message);
       if (data.conversation !== this.conversationIdValue) {
@@ -679,8 +731,131 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.style.removeProperty('display');
       element.setAttribute('data-controller', 'hellotext--message');
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), new Date());
       return element;
     }
+  }, {
+    key: "focusCompose",
+    value: function focusCompose(event) {
+      const {
+        target
+      } = event;
+      const ignoredSelector = ['button', 'a', 'input', 'textarea', 'select', 'label', '[role="button"]', 'em-emoji-picker', '[data-hellotext--webchat--emoji-target~="popover"]', '[data-controller~="hellotext--webchat--emoji"]'].join(', ');
+      if (!this.hasInputTarget || target.closest(ignoredSelector)) return;
+      event.preventDefault();
+      this.inputTarget.focus();
+      if (typeof this.inputTarget.selectionStart === 'number') {
+        const position = this.inputTarget.value.length;
+        this.inputTarget.setSelectionRange(position, position);
+      }
+    }
+  }, {
+    key: "closePopoverFromHeader",
+    value: function closePopoverFromHeader(event) {
+      const {
+        target
+      } = event;
+      if (target.closest('.hellotext--webchat-header-channel-button, .hellotext--webchat-close-button')) return;
+      event.preventDefault();
+      this.closePopover();
+    }
+  }, {
+    key: "closePopoverOnEscape",
+    value: function closePopoverOnEscape(event) {
+      var _this$triggerTarget, _this$triggerTarget$f;
+      if (event.key !== 'Escape' || !this.openValue) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.closePopover();
+      (_this$triggerTarget = this.triggerTarget) === null || _this$triggerTarget === void 0 ? void 0 : (_this$triggerTarget$f = _this$triggerTarget.focus) === null || _this$triggerTarget$f === void 0 ? void 0 : _this$triggerTarget$f.call(_this$triggerTarget);
+    }
+  }, {
+    key: "markMessageFailedFromResponse",
+    value: async function markMessageFailedFromResponse(response, element) {
+      const reason = await this.messageFailureReason(response);
+      this.markMessageFailed(element, reason);
+      this.broadcastChannel.postMessage({
+        type: 'message:failed',
+        id: element.id,
+        reason
+      });
+    }
+  }, {
+    key: "markMessageFailed",
+    value: function markMessageFailed(element, reason) {
+      if (!element) return;
+      element.classList.add('failed');
+      if (!reason) return;
+      const timestamp = element.querySelector('[data-message-timestamp]');
+      if (timestamp) {
+        timestamp.textContent = reason;
+      }
+    }
+  }, {
+    key: "localizeMessageTimestamps",
+    value: function localizeMessageTimestamps(root = this.element) {
+      var _root$matches, _root$querySelectorAl;
+      if (!root) return;
+      const timestamps = (_root$matches = root.matches) !== null && _root$matches !== void 0 && _root$matches.call(root, 'time[datetime][data-message-timestamp]') ? [root] : Array.from(((_root$querySelectorAl = root.querySelectorAll) === null || _root$querySelectorAl === void 0 ? void 0 : _root$querySelectorAl.call(root, 'time[datetime][data-message-timestamp]')) || []);
+      timestamps.forEach(timestamp => this.localizeMessageTimestamp(timestamp));
+    }
+  }, {
+    key: "localizeMessageTimestamp",
+    value: function localizeMessageTimestamp(timestamp, value = timestamp === null || timestamp === void 0 ? void 0 : timestamp.getAttribute('datetime')) {
+      if (!timestamp || !value) return;
+      const date = value instanceof Date ? value : new Date(value);
+      if (Number.isNaN(date.getTime())) return;
+      timestamp.setAttribute('datetime', date.toISOString());
+      timestamp.textContent = this.formatMessageTimestamp(date);
+    }
+  }, {
+    key: "formatMessageTimestamp",
+    value: function formatMessageTimestamp(date) {
+      return this.constructor.messageTimestampFormatterFor(_core.Locale.toString()).format(date);
+    }
+  }, {
+    key: "messageFailureReason",
+    value: async function messageFailureReason(response) {
+      const nativeResponse = (response === null || response === void 0 ? void 0 : response.data) || (response === null || response === void 0 ? void 0 : response.response);
+      const fallback = (nativeResponse === null || nativeResponse === void 0 ? void 0 : nativeResponse.statusText) || 'Message failed';
+      try {
+        var _jsonResponse$json;
+        const jsonResponse = nativeResponse !== null && nativeResponse !== void 0 && nativeResponse.clone ? nativeResponse.clone() : nativeResponse;
+        const payload = await (jsonResponse === null || jsonResponse === void 0 ? void 0 : (_jsonResponse$json = jsonResponse.json) === null || _jsonResponse$json === void 0 ? void 0 : _jsonResponse$json.call(jsonResponse));
+        const reason = this.messageFailureReasonFromPayload(payload);
+        if (reason) return reason;
+      } catch (_) {
+        // Fall through to text parsing/fallback. Some stores strip content-type or
+        // return non-JSON failures, so the timestamp still needs a useful reason.
+      }
+      try {
+        var _textResponse$text;
+        const textResponse = nativeResponse !== null && nativeResponse !== void 0 && nativeResponse.clone ? nativeResponse.clone() : nativeResponse;
+        const text = await (textResponse === null || textResponse === void 0 ? void 0 : (_textResponse$text = textResponse.text) === null || _textResponse$text === void 0 ? void 0 : _textResponse$text.call(textResponse));
+        return this.messageFailureReasonFromText(text) || fallback;
+      } catch (_) {
+        return fallback;
+      }
+    }
+  }, {
+    key: "messageFailureReasonFromText",
+    value: function messageFailureReasonFromText(text) {
+      if (typeof text !== 'string') return null;
+      const value = text.trim();
+      if (!value || value.startsWith('<')) return null;
+      try {
+        return this.messageFailureReasonFromPayload(JSON.parse(value)) || value;
+      } catch (_) {
+        return value;
+      }
+    }
+  }, {
+    key: "messageFailureReasonFromPayload",
+    value: function messageFailureReasonFromPayload(payload) {
+      var _payload$error, _payload$errors, _payload$errors2, _payload$errors2$, _payload$errors3, _payload$errors3$;
+      if (!payload) return null;
+      return [(_payload$error = payload.error) === null || _payload$error === void 0 ? void 0 : _payload$error.message, payload.message, (_payload$errors = payload.errors) === null || _payload$errors === void 0 ? void 0 : _payload$errors.message, (_payload$errors2 = payload.errors) === null || _payload$errors2 === void 0 ? void 0 : (_payload$errors2$ = _payload$errors2[0]) === null || _payload$errors2$ === void 0 ? void 0 : _payload$errors2$.message, (_payload$errors3 = payload.errors) === null || _payload$errors3 === void 0 ? void 0 : (_payload$errors3$ = _payload$errors3[0]) === null || _payload$errors3$ === void 0 ? void 0 : _payload$errors3$.description].find(reason => typeof reason === 'string' && reason.trim().length > 0);
+    }
   }, {
     key: "messageAttachmentsContainer",
     value: function messageAttachmentsContainer(element) {
@@ -809,10 +984,29 @@ let _default = /*#__PURE__*/function (_Controller) {
     get: function () {
       return window.matchMedia(`(max-width: ${this.fullScreenThresholdValue}px)`).matches;
     }
+  }], [{
+    key: "messageTimestampFormatterFor",
+    value: function messageTimestampFormatterFor(locale) {
+      const key = locale || 'default';
+      if (!this.messageTimestampFormatters[key]) {
+        this.messageTimestampFormatters[key] = this.buildMessageTimestampFormatter(locale);
+      }
+      return this.messageTimestampFormatters[key];
+    }
+  }, {
+    key: "buildMessageTimestampFormatter",
+    value: function buildMessageTimestampFormatter(locale) {
+      try {
+        return new Intl.DateTimeFormat(locale || undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS);
+      } catch (_) {
+        return new Intl.DateTimeFormat(undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS);
+      }
+    }
   }]);
   return _default;
 }(_stimulus.Controller);
 exports.default = _default;
+_default.messageTimestampFormatters = {};
 _default.values = {
   id: String,
   conversationId: String,