@hellotext/hellotext 2.4.4 → 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,7 @@ 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
@@ -49,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);
     }
   }, {
@@ -261,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') {
@@ -331,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(() => {
@@ -386,7 +398,7 @@ let _default = /*#__PURE__*/function (_Controller) {
     }
   }, {
     key: "onMessageReceived",
-    value: function onMessageReceived(message) {
+    value: function onMessageReceived(message, options = {}) {
       var _this$hideTeaser;
       const {
         id,
@@ -398,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 => {
@@ -418,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);
@@ -445,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) {
@@ -459,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) || ''
@@ -689,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
@@ -742,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",
@@ -896,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",
@@ -931,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",
@@ -960,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",
@@ -979,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;
     }
   }], [{

package/lib/controllers/webchat_controller.js

@@ -33,6 +33,7 @@ var MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
   hour: 'numeric',
   minute: '2-digit'
 };
+var MOBILE_USER_AGENT_PATTERN = /Android|iPhone|iPad|iPod/i;
 var SCROLL_ISOLATION_EVENT_OPTIONS = {
   capture: true,
   passive: true
@@ -51,13 +52,19 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.webChatChannel = new WebchatChannel(this.idValue, Hellotext.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--".concat(this.idValue));
+      this.webChatChannel.onDisconnect(this.captureCatchUpCursor);
+      this.webChatChannel.onReconnect(this.catchUpMessages);
       _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this);
     }
   }, {
@@ -260,7 +267,12 @@ var _default = /*#__PURE__*/function (_Controller) {
           var div = document.createElement('div');
           div.innerHTML = body;
           var 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') {
@@ -335,7 +347,7 @@ var _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(() => {
@@ -392,6 +404,7 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "onMessageReceived",
     value: function onMessageReceived(message) {
       var _this$hideTeaser;
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var {
         id,
         body,
@@ -402,15 +415,17 @@ var _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);
       }
       var div = document.createElement('div');
       div.innerHTML = body;
       var 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 => {
@@ -422,13 +437,15 @@ var _default = /*#__PURE__*/function (_Controller) {
         });
       }
       this.clearTypingIndicator();
-      this.messagesContainerTarget.appendChild(element);
+      this.insertMessageElement(element);
       Hellotext.eventEmitter.dispatch('webchat:message:received', _objectSpread(_objectSpread({}, 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);
@@ -448,6 +465,76 @@ var _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: function () {
+      var _catchUpMessages = _asyncToGenerator(function* () {
+        var afterId = this.catchUpAfterMessageId;
+        if (!afterId || this.fetchingCatchUpMessages) return;
+        this.fetchingCatchUpMessages = true;
+        try {
+          var response = yield this.messagesAPI.catchUp(afterId);
+          var {
+            messages = []
+          } = yield response.json();
+          messages.forEach(message => this.onMessageReceived(message, {
+            scroll: false
+          }));
+          this.catchUpAfterMessageId = this.lastRenderedMessageId;
+        } finally {
+          this.fetchingCatchUpMessages = false;
+        }
+      });
+      function catchUpMessages() {
+        return _catchUpMessages.apply(this, arguments);
+      }
+      return catchUpMessages;
+    }()
+  }, {
+    key: "lastRenderedMessageId",
+    get: function get() {
+      var _messages;
+      var messages = this.persistedMessageElements;
+      return ((_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.dataset.id) || null;
+    }
+  }, {
+    key: "persistedMessageElements",
+    get: function get() {
+      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) {
+      var nextElement = this.nextMessageElementFor(element);
+      if (nextElement) {
+        this.messagesContainerTarget.insertBefore(element, nextElement);
+      } else {
+        this.messagesContainerTarget.appendChild(element);
+      }
+    }
+  }, {
+    key: "nextMessageElementFor",
+    value: function nextMessageElementFor(element) {
+      var createdAt = Date.parse(element.dataset.createdAt);
+      if (Number.isNaN(createdAt)) return null;
+      return this.persistedMessageElements.find(messageElement => {
+        if (messageElement === element) return false;
+        var messageCreatedAt = Date.parse(messageElement.dataset.createdAt);
+        return !Number.isNaN(messageCreatedAt) && messageCreatedAt > createdAt;
+      });
+    }
   }, {
     key: "updateMessageTeaser",
     value: function updateMessageTeaser(teaser) {
@@ -464,16 +551,22 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "insertCarouselMessage",
     value: function insertCarouselMessage(message) {
       var _element$querySelecto;
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var html = message.html;
+      var createdAt = message.created_at || message.createdAt;
       var 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.eventEmitter.dispatch('webchat:message:received', _objectSpread(_objectSpread({}, message), {}, {
         body: ((_element$querySelecto = element.querySelector('[data-body]')) === null || _element$querySelecto === void 0 ? void 0 : _element$querySelecto.innerText) || ''
       }));
@@ -705,7 +798,7 @@ var _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
@@ -763,12 +856,10 @@ var _default = /*#__PURE__*/function (_Controller) {
       } = event;
       var 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') {
-        var position = this.inputTarget.value.length;
-        this.inputTarget.setSelectionRange(position, position);
-      }
     }
   }, {
     key: "closePopoverFromHeader",
@@ -931,7 +1022,7 @@ var _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",
@@ -967,7 +1058,7 @@ var _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",
@@ -997,7 +1088,23 @@ var _default = /*#__PURE__*/function (_Controller) {
       var 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() {
+      var {
+        moveCursorToEnd = false
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      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') {
+        var position = this.inputTarget.value.length;
+        this.inputTarget.setSelectionRange(position, position);
+      }
+      return true;
     }
   }, {
     key: "byteToMegabyte",
@@ -1016,9 +1123,32 @@ var _default = /*#__PURE__*/function (_Controller) {
     get: function get() {
       return localStorage.getItem("hellotext--webchat--".concat(this.idValue)) === 'opened' && !this.onMobile;
     }
+  }, {
+    key: "shouldAutofocusCompose",
+    get: function get() {
+      return !this.usesVirtualKeyboard;
+    }
+  }, {
+    key: "usesVirtualKeyboard",
+    get: function get() {
+      var _navigator$userAgentD;
+      if (typeof navigator === 'undefined') return false;
+      var userAgent = navigator.userAgent || '';
+      var isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+      var isMobileUserAgent = MOBILE_USER_AGENT_PATTERN.test(userAgent);
+      var 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 get() {
+      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 get() {
+      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
       return window.matchMedia("(max-width: ".concat(this.fullScreenThresholdValue, "px)")).matches;
     }
   }], [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",

package/src/api/webchat/messages.js

@@ -25,6 +25,13 @@ class WebchatMessagesAPI {
     })
   }
 
+  catchUp(afterId) {
+    return this.index({
+      after_id: afterId,
+      session: Hellotext.session,
+    })
+  }
+
   async create(formData) {
     const response = await fetch(this.url, {
       method: 'POST',