@hellotext/hellotext 2.4.3 → 2.4.5

package/lib/controllers/webchat_controller.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _dom = require("@floating-ui/dom");
 var _stimulus = require("@hotwired/stimulus");
-var _messages = _interopRequireDefault(require("../api/webchat/messages"));
+var _messages2 = _interopRequireDefault(require("../api/webchat/messages"));
 var _webchat_channel = _interopRequireDefault(require("../channels/webchat_channel"));
 var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _core = require("../core");
@@ -35,6 +35,11 @@ const MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
   hour: 'numeric',
   minute: '2-digit'
 };
+const MOBILE_USER_AGENT_PATTERN = /Android|iPhone|iPad|iPod/i;
+const SCROLL_ISOLATION_EVENT_OPTIONS = {
+  capture: true,
+  passive: true
+};
 let _default = /*#__PURE__*/function (_Controller) {
   _inherits(_default, _Controller);
   var _super = _createSuper(_default);
@@ -45,17 +50,23 @@ let _default = /*#__PURE__*/function (_Controller) {
   _createClass(_default, [{
     key: "initialize",
     value: function initialize() {
-      this.messagesAPI = new _messages.default(this.idValue);
+      this.messagesAPI = new _messages2.default(this.idValue);
       this.webChatChannel = new _webchat_channel.default(this.idValue, _hellotext.default.session, this.conversationIdValue);
       this.files = [];
       this.messageIds = new Set();
+      this.catchUpAfterMessageId = null;
+      this.fetchingCatchUpMessages = false;
       this.onMessageReceived = this.onMessageReceived.bind(this);
       this.onMessageReaction = this.onMessageReaction.bind(this);
       this.onTypingStart = this.onTypingStart.bind(this);
+      this.captureCatchUpCursor = this.captureCatchUpCursor.bind(this);
+      this.catchUpMessages = this.catchUpMessages.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}`);
+      this.webChatChannel.onDisconnect(this.captureCatchUpCursor);
+      this.webChatChannel.onReconnect(this.catchUpMessages);
       _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this);
     }
   }, {
@@ -82,7 +93,10 @@ let _default = /*#__PURE__*/function (_Controller) {
       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;
       }
@@ -101,6 +115,8 @@ let _default = /*#__PURE__*/function (_Controller) {
       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
@@ -109,6 +125,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() {
@@ -237,7 +268,12 @@ let _default = /*#__PURE__*/function (_Controller) {
         const div = document.createElement('div');
         div.innerHTML = body;
         const element = this.messageTemplateTarget.cloneNode(true);
+        element.classList.add('hellotext--webchat-message');
         element.setAttribute('data-hellotext--webchat-target', 'message');
+        element.setAttribute('data-id', message.id);
+        if (createdAt) {
+          element.setAttribute('data-created-at', createdAt);
+        }
         element.style.removeProperty('display');
         element.querySelector('[data-body]').innerHTML = div.innerHTML;
         if (message.state === 'received') {
@@ -307,7 +343,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.popoverTarget.classList.remove(...this.fadeOutClasses);
       (_this$dismissTeaserFo = this.dismissTeaserForSession) === null || _this$dismissTeaserFo === void 0 ? void 0 : _this$dismissTeaserFo.call(this);
       if (!this.onMobile) {
-        this.inputTarget.focus();
+        this.focusComposeInput();
       }
       if (!this.scrolled) {
         requestAnimationFrame(() => {
@@ -362,7 +398,7 @@ let _default = /*#__PURE__*/function (_Controller) {
     }
   }, {
     key: "onMessageReceived",
-    value: function onMessageReceived(message) {
+    value: function onMessageReceived(message, options = {}) {
       var _this$hideTeaser;
       const {
         id,
@@ -374,15 +410,17 @@ let _default = /*#__PURE__*/function (_Controller) {
       if (!this.claimMessageId(id)) return;
       (_this$hideTeaser = this.hideTeaser) === null || _this$hideTeaser === void 0 ? void 0 : _this$hideTeaser.call(this);
       if (message.carousel) {
-        return this.insertCarouselMessage(message);
+        return this.insertCarouselMessage(message, options);
       }
       const div = document.createElement('div');
       div.innerHTML = body;
       const element = this.messageTemplateTarget.cloneNode(true);
+      element.classList.add('hellotext--webchat-message');
       element.style.display = 'flex';
       element.querySelector('[data-body]').innerHTML = div.innerHTML;
       element.setAttribute('data-id', id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.setMessageCreatedAt(element, createdAt);
       this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt);
       if (attachments) {
         attachments.forEach(attachmentUrl => {
@@ -394,14 +432,16 @@ let _default = /*#__PURE__*/function (_Controller) {
         });
       }
       this.clearTypingIndicator();
-      this.messagesContainerTarget.appendChild(element);
+      this.insertMessageElement(element);
       _hellotext.default.eventEmitter.dispatch('webchat:message:received', {
         ...message,
         body: element.querySelector('[data-body]').innerText
       });
-      element.scrollIntoView({
-        behavior: 'smooth'
-      });
+      if (options.scroll !== false) {
+        element.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }
       this.updateMessageTeaser(teaser);
       if (this.openValue) {
         this.messagesAPI.markAsSeen(id);
@@ -421,6 +461,70 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.messageIds.add(id);
       return !messageTargets.some(element => element.dataset.id === id);
     }
+  }, {
+    key: "captureCatchUpCursor",
+    value: function captureCatchUpCursor() {
+      this.catchUpAfterMessageId = this.lastRenderedMessageId;
+    }
+  }, {
+    key: "catchUpMessages",
+    value: async function catchUpMessages() {
+      const afterId = this.catchUpAfterMessageId;
+      if (!afterId || this.fetchingCatchUpMessages) return;
+      this.fetchingCatchUpMessages = true;
+      try {
+        const response = await this.messagesAPI.catchUp(afterId);
+        const {
+          messages = []
+        } = await response.json();
+        messages.forEach(message => this.onMessageReceived(message, {
+          scroll: false
+        }));
+        this.catchUpAfterMessageId = this.lastRenderedMessageId;
+      } finally {
+        this.fetchingCatchUpMessages = false;
+      }
+    }
+  }, {
+    key: "lastRenderedMessageId",
+    get: function () {
+      var _messages;
+      const messages = this.persistedMessageElements;
+      return ((_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.dataset.id) || null;
+    }
+  }, {
+    key: "persistedMessageElements",
+    get: function () {
+      return Array.from(this.messagesContainerTarget.querySelectorAll('.hellotext--webchat-message[data-id]'));
+    }
+  }, {
+    key: "setMessageCreatedAt",
+    value: function setMessageCreatedAt(element, createdAt) {
+      if (createdAt) {
+        element.setAttribute('data-created-at', createdAt);
+      }
+    }
+  }, {
+    key: "insertMessageElement",
+    value: function insertMessageElement(element) {
+      const nextElement = this.nextMessageElementFor(element);
+      if (nextElement) {
+        this.messagesContainerTarget.insertBefore(element, nextElement);
+      } else {
+        this.messagesContainerTarget.appendChild(element);
+      }
+    }
+  }, {
+    key: "nextMessageElementFor",
+    value: function nextMessageElementFor(element) {
+      const createdAt = Date.parse(element.dataset.createdAt);
+      if (Number.isNaN(createdAt)) return null;
+      return this.persistedMessageElements.find(messageElement => {
+        if (messageElement === element) return false;
+        const messageCreatedAt = Date.parse(messageElement.dataset.createdAt);
+        return !Number.isNaN(messageCreatedAt) && messageCreatedAt > createdAt;
+      });
+    }
   }, {
     key: "updateMessageTeaser",
     value: function updateMessageTeaser(teaser) {
@@ -435,18 +539,23 @@ let _default = /*#__PURE__*/function (_Controller) {
     }
   }, {
     key: "insertCarouselMessage",
-    value: function insertCarouselMessage(message) {
+    value: function insertCarouselMessage(message, options = {}) {
       var _element$querySelecto;
       const html = message.html;
+      const createdAt = message.created_at || message.createdAt;
       const element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
+      element.classList.add('hellotext--webchat-message');
       element.setAttribute('data-id', message.id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.setMessageCreatedAt(element, createdAt);
       this.localizeMessageTimestamps(element);
       this.clearTypingIndicator();
-      this.messagesContainerTarget.appendChild(element);
-      element.scrollIntoView({
-        behavior: 'smooth'
-      });
+      this.insertMessageElement(element);
+      if (options.scroll !== false) {
+        element.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }
       _hellotext.default.eventEmitter.dispatch('webchat:message:received', {
         ...message,
         body: ((_element$querySelecto = element.querySelector('[data-body]')) === null || _element$querySelecto === void 0 ? void 0 : _element$querySelecto.innerText) || ''
@@ -665,7 +774,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.attachmentContainerTarget.innerHTML = '';
       this.attachmentContainerTarget.style.display = 'none';
       this.errorMessageContainerTarget.style.display = 'none';
-      this.inputTarget.focus();
+      this.focusComposeInput();
 
       // Set up optimistic typing indicator BEFORE making the API call
       // This prevents race conditions with server responses
@@ -718,12 +827,10 @@ let _default = /*#__PURE__*/function (_Controller) {
       } = 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;
+      if (!this.focusComposeInput({
+        moveCursorToEnd: true
+      })) 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",
@@ -872,7 +979,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.files = [...this.files, ...newFiles];
       this.errorMessageContainerTarget.innerText = '';
       newFiles.forEach(file => this.createAttachmentElement(file));
-      this.inputTarget.focus();
+      this.focusComposeInput();
     }
   }, {
     key: "createAttachmentElement",
@@ -907,7 +1014,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.files = this.files.filter(file => file.name !== attachment.dataset.name);
       this.attachmentInputTarget.value = '';
       attachment.remove();
-      this.inputTarget.focus();
+      this.focusComposeInput();
     }
   }, {
     key: "attachmentTargetDisconnected",
@@ -936,7 +1043,22 @@ let _default = /*#__PURE__*/function (_Controller) {
       const end = this.inputTarget.selectionEnd;
       this.inputTarget.value = value.slice(0, start) + emoji + value.slice(end);
       this.inputTarget.selectionStart = this.inputTarget.selectionEnd = start + emoji.length;
+      this.focusComposeInput();
+    }
+  }, {
+    key: "focusComposeInput",
+    value: function focusComposeInput({
+      moveCursorToEnd = false
+    } = {}) {
+      if (!this.shouldAutofocusCompose) return false;
+      if (this.hasInputTarget === false) return false;
+      if (this.hasInputTarget === undefined && !this.inputTarget) return false;
       this.inputTarget.focus();
+      if (moveCursorToEnd && typeof this.inputTarget.selectionStart === 'number') {
+        const position = this.inputTarget.value.length;
+        this.inputTarget.setSelectionRange(position, position);
+      }
+      return true;
     }
   }, {
     key: "byteToMegabyte",
@@ -955,9 +1077,32 @@ let _default = /*#__PURE__*/function (_Controller) {
     get: function () {
       return localStorage.getItem(`hellotext--webchat--${this.idValue}`) === 'opened' && !this.onMobile;
     }
+  }, {
+    key: "shouldAutofocusCompose",
+    get: function () {
+      return !this.usesVirtualKeyboard;
+    }
+  }, {
+    key: "usesVirtualKeyboard",
+    get: function () {
+      var _navigator$userAgentD;
+      if (typeof navigator === 'undefined') return false;
+      const userAgent = navigator.userAgent || '';
+      const isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+      const isMobileUserAgent = MOBILE_USER_AGENT_PATTERN.test(userAgent);
+      const isUserAgentDataMobile = ((_navigator$userAgentD = navigator.userAgentData) === null || _navigator$userAgentD === void 0 ? void 0 : _navigator$userAgentD.mobile) === true;
+      return isMobileUserAgent || isIPadOS || isUserAgentDataMobile || this.hasTouchOnlyPointer;
+    }
+  }, {
+    key: "hasTouchOnlyPointer",
+    get: function () {
+      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
+      return window.matchMedia('(pointer: coarse)').matches && window.matchMedia('(hover: none)').matches;
+    }
   }, {
     key: "onMobile",
     get: function () {
+      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
       return window.matchMedia(`(max-width: ${this.fullScreenThresholdValue}px)`).matches;
     }
   }], [{