@hellotext/hellotext 2.1.2 → 2.1.4

package/lib/controllers/webchat_controller.cjs

@@ -9,6 +9,7 @@ var _stimulus = require("@hotwired/stimulus");
 var _messages = _interopRequireDefault(require("../api/webchat/messages"));
 var _webchat_channel = _interopRequireDefault(require("../channels/webchat_channel"));
 var _hellotext = _interopRequireDefault(require("../hellotext"));
+var _core = require("../core");
 var _webchat = require("../core/configuration/webchat");
 var _logo_builder = require("../builders/logo_builder");
 var _usePopover = require("./mixins/usePopover");
@@ -41,9 +42,8 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.webChatChannel = new _webchat_channel.default(this.idValue, _hellotext.default.session, this.conversationIdValue);
       this.files = [];
       this.onMessageReceived = this.onMessageReceived.bind(this);
-      this.onConversationAssignment = this.onConversationAssignment.bind(this);
-      this.onAgentOnline = this.onAgentOnline.bind(this);
       this.onMessageReaction = this.onMessageReaction.bind(this);
+      this.onTypingStart = this.onTypingStart.bind(this);
       this.onScroll = this.onScroll.bind(this);
       this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this);
       this.broadcastChannel = new BroadcastChannel(`hellotext--webchat--${this.idValue}`);
@@ -60,14 +60,13 @@ let _default = /*#__PURE__*/function (_Controller) {
         popover: this.popoverTarget
       });
       this.webChatChannel.onMessage(this.onMessageReceived);
-      this.webChatChannel.onConversationAssignment(this.onConversationAssignment);
-      this.webChatChannel.onAgentOnline(this.onAgentOnline);
+      this.webChatChannel.onTypingStart(this.onTypingStart);
       this.webChatChannel.onReaction(this.onMessageReaction);
       this.messagesContainerTarget.addEventListener('scroll', this.onScroll);
       if (!_hellotext.default.business.features.white_label) {
         this.toolbarTarget.appendChild(_logo_builder.LogoBuilder.build());
       }
-      if (localStorage.getItem(`hellotext--webchat--${this.idValue}`) === 'opened') {
+      if (this.shouldOpenOnMount) {
         this.openValue = true;
       }
       _hellotext.default.eventEmitter.dispatch('webchat:mounted');
@@ -79,10 +78,85 @@ let _default = /*#__PURE__*/function (_Controller) {
     value: function disconnect() {
       this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent);
       this.messagesContainerTarget.removeEventListener('scroll', this.onScroll);
+
+      // Clean up typing indicator timeouts
+      this.clearTypingIndicator();
       this.broadcastChannel.close();
       this.floatingUICleanup();
       _get(_getPrototypeOf(_default.prototype), "disconnect", this).call(this);
     }
+  }, {
+    key: "onTypingStart",
+    value: function onTypingStart() {
+      if (this.typingIndicatorVisible) {
+        return this.resetTypingIndicatorTimer();
+      }
+      this.showTypingIndicator();
+    }
+  }, {
+    key: "showOptimisticTypingIndicator",
+    value: function showOptimisticTypingIndicator() {
+      if (this.typingIndicatorVisible) return;
+      this.showTypingIndicator();
+    }
+  }, {
+    key: "showTypingIndicator",
+    value: function showTypingIndicator() {
+      this.clearTypingIndicator();
+      this.typingIndicatorVisible = true;
+      const indicator = this.typingIndicatorTemplateTarget.cloneNode(true);
+      indicator.setAttribute('data-hellotext--webchat-target', 'typingIndicator');
+      indicator.style.display = 'flex';
+      this.messagesContainerTarget.appendChild(indicator);
+      requestAnimationFrame(() => {
+        this.messagesContainerTarget.scroll({
+          top: this.messagesContainerTarget.scrollHeight,
+          behavior: 'instant'
+        });
+      });
+      const timeout = this.typingIndicatorKeepAliveValue;
+      this.incomingTypingIndicatorTimeout = setTimeout(() => {
+        this.clearTypingIndicator();
+      }, timeout);
+    }
+  }, {
+    key: "resetTypingIndicatorTimer",
+    value: function resetTypingIndicatorTimer() {
+      if (!this.typingIndicatorVisible) return;
+
+      // Clear existing timeout
+      clearTimeout(this.incomingTypingIndicatorTimeout);
+      clearTimeout(this.optimisticTypingTimeout);
+
+      // Use unified timeout for all typing indicators
+      const timeout = this.typingIndicatorKeepAliveValue;
+      this.incomingTypingIndicatorTimeout = setTimeout(() => {
+        this.clearTypingIndicator();
+      }, timeout);
+    }
+  }, {
+    key: "clearTypingIndicator",
+    value: function clearTypingIndicator() {
+      if (this.hasTypingIndicatorTarget) {
+        this.typingIndicatorTarget.remove();
+      }
+      this.typingIndicatorVisible = false;
+      clearTimeout(this.incomingTypingIndicatorTimeout);
+      clearTimeout(this.optimisticTypingTimeout);
+    }
+  }, {
+    key: "onMessageInputChange",
+    value: function onMessageInputChange() {
+      this.resizeInput();
+      clearTimeout(this.typingIndicatorTimeout);
+      if (!this.hasSentTypingIndicator) {
+        this.webChatChannel.startTypingIndicator();
+        this.hasSentTypingIndicator = true;
+      }
+      this.typingIndicatorTimeout = setTimeout(() => {
+        this.hasSentTypingIndicator = false;
+      }, 3000);
+    }
   }, {
     key: "onOutboundMessageSent",
     value: function onOutboundMessageSent(event) {
@@ -92,7 +166,13 @@ let _default = /*#__PURE__*/function (_Controller) {
       const callbacks = {
         'message:sent': data => {
           const element = new DOMParser().parseFromString(data.element, 'text/html').body.firstElementChild;
-          this.messagesContainerTarget.appendChild(element);
+
+          // Insert message before typing indicator if one exists
+          if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) {
+            this.messagesContainerTarget.insertBefore(element, this.typingIndicatorTarget);
+          } else {
+            this.messagesContainerTarget.appendChild(element);
+          }
           element.scrollIntoView({
             behavior: 'instant'
           });
@@ -164,10 +244,20 @@ let _default = /*#__PURE__*/function (_Controller) {
         this.openValue = false;
       }
     }
+  }, {
+    key: "closePopover",
+    value: function closePopover() {
+      this.popoverTarget.classList.add(...this.fadeOutClasses);
+      setTimeout(() => {
+        this.openValue = false;
+      }, 250);
+    }
   }, {
     key: "onPopoverOpened",
     value: function onPopoverOpened() {
-      this.inputTarget.focus();
+      if (!this.onMobile) {
+        this.inputTarget.focus();
+      }
       if (!this.scrolled) {
         requestAnimationFrame(() => {
           this.messagesContainerTarget.scroll({
@@ -188,9 +278,6 @@ let _default = /*#__PURE__*/function (_Controller) {
     key: "onPopoverClosed",
     value: function onPopoverClosed() {
       _hellotext.default.eventEmitter.dispatch('webchat:closed');
-      setTimeout(() => {
-        this.inputTarget.value = '';
-      });
       localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed');
     }
   }, {
@@ -221,6 +308,7 @@ let _default = /*#__PURE__*/function (_Controller) {
     key: "onMessageReceived",
     value: function onMessageReceived(message) {
       const {
+        id,
         body,
         attachments
       } = message;
@@ -238,6 +326,11 @@ let _default = /*#__PURE__*/function (_Controller) {
           element.querySelector('[data-attachment-container]').appendChild(image);
         });
       }
+
+      // Clear any typing indicator when message is received
+      if (this.typingIndicatorVisible) {
+        this.clearTypingIndicator();
+      }
       this.messagesContainerTarget.appendChild(element);
       _hellotext.default.eventEmitter.dispatch('webchat:message:received', {
         ...message,
@@ -246,40 +339,39 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
-      this.setOfflineTimeout();
-      if (this.openValue) return;
+      if (this.openValue) {
+        this.messagesAPI.markAsSeen(id);
+        return;
+      }
       this.unreadCounterTarget.style.display = 'flex';
       const unreadCount = (parseInt(this.unreadCounterTarget.innerText) || 0) + 1;
       this.unreadCounterTarget.innerText = unreadCount > 99 ? '99+' : unreadCount;
     }
   }, {
-    key: "onConversationAssignment",
-    value: function onConversationAssignment(conversation) {
-      const {
-        to: user
-      } = conversation;
-      this.titleTarget.innerText = user.name;
-      if (user.online) {
-        this.onlineStatusTarget.style.display = 'flex';
-      } else {
-        this.onlineStatusTarget.style.display = 'none';
-      }
-    }
-  }, {
-    key: "onAgentOnline",
-    value: function onAgentOnline() {
-      this.onlineStatusTarget.style.display = 'flex';
-      this.setOfflineTimeout();
+    key: "resizeInput",
+    value: function resizeInput() {
+      const maxHeight = 96;
+
+      // Temporarily reset height to its natural content size
+      this.inputTarget.style.height = 'auto';
+
+      // Set the height to the scrollHeight, which is the minimum height
+      // the element needs to fit its content without a scrollbar.
+      const scrollHeight = this.inputTarget.scrollHeight;
+      this.inputTarget.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
     }
   }, {
     key: "sendMessage",
-    value: async function sendMessage() {
+    value: async function sendMessage(e) {
       const formData = new FormData();
       const message = {
         body: this.inputTarget.value,
         attachments: this.files
       };
       if (this.inputTarget.value.trim().length === 0 && this.files.length === 0) {
+        if (e && e.target) {
+          e.preventDefault();
+        }
         return;
       }
       if (this.inputTarget.value.trim().length > 0) {
@@ -291,6 +383,7 @@ let _default = /*#__PURE__*/function (_Controller) {
         formData.append('message[attachments][]', file);
       });
       formData.append('session', _hellotext.default.session);
+      formData.append('locale', _core.Locale.toString());
       const element = this.messageTemplateTarget.cloneNode(true);
       element.id = `hellotext--webchat--${this.idValue}--message--${Date.now()}`;
       element.classList.add('received');
@@ -307,7 +400,13 @@ let _default = /*#__PURE__*/function (_Controller) {
           element.querySelector('[data-attachment-container]').appendChild(attachment);
         });
       }
-      this.messagesContainerTarget.appendChild(element);
+
+      // Insert message before typing indicator if one exists
+      if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) {
+        this.messagesContainerTarget.insertBefore(element, this.typingIndicatorTarget);
+      } else {
+        this.messagesContainerTarget.appendChild(element);
+      }
       element.scrollIntoView({
         behavior: 'smooth'
       });
@@ -316,6 +415,7 @@ let _default = /*#__PURE__*/function (_Controller) {
         element: element.outerHTML
       });
       this.inputTarget.value = '';
+      this.resizeInput();
       this.files = [];
       this.attachmentInputTarget.value = '';
       this.attachmentContainerTarget.innerHTML = '';
@@ -338,6 +438,14 @@ let _default = /*#__PURE__*/function (_Controller) {
         this.conversationIdValue = data.conversation;
         this.webChatChannel.updateSubscriptionWith(this.conversationIdValue);
       }
+      if (this.typingIndicatorVisible) {
+        this.resetTypingIndicatorTimer();
+      } else {
+        clearTimeout(this.optimisticTypingTimeout);
+        this.optimisticTypingTimeout = setTimeout(() => {
+          this.showOptimisticTypingIndicator();
+        }, this.optimisticTypingIndicatorWaitValue);
+      }
       this.attachmentContainerTarget.style.display = '';
     }
   }, {
@@ -434,30 +542,27 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.inputTarget.selectionStart = this.inputTarget.selectionEnd = start + emoji.length;
       this.inputTarget.focus();
     }
-  }, {
-    key: "setOfflineTimeout",
-    value: function setOfflineTimeout() {
-      clearTimeout(this.offlineTimeout);
-      this.offlineTimeout = setTimeout(() => {
-        this.onlineStatusTarget.style.display = 'none';
-      }, this.fiveMinutes);
-    }
   }, {
     key: "byteToMegabyte",
     value: function byteToMegabyte(bytes) {
       return Math.ceil(bytes / 1024 / 1024);
     }
   }, {
-    key: "fiveMinutes",
+    key: "middlewares",
     get: function () {
-      return 300000;
+      return [(0, _dom.offset)(this.offsetValue), (0, _dom.shift)({
+        padding: this.paddingValue
+      }), (0, _dom.flip)()];
     }
   }, {
-    key: "middlewares",
+    key: "shouldOpenOnMount",
     get: function () {
-      return [(0, _dom.offset)(5), (0, _dom.shift)({
-        padding: 24
-      }), (0, _dom.flip)()];
+      return localStorage.getItem(`hellotext--webchat--${this.idValue}`) === 'opened' && !this.onMobile;
+    }
+  }, {
+    key: "onMobile",
+    get: function () {
+      return window.matchMedia(`(max-width: ${this.fullScreenThresholdValue}px)`).matches;
     }
   }]);
   return _default;
@@ -487,6 +592,28 @@ _default.values = {
   nextPage: {
     type: Number,
     default: undefined
-  }
+  },
+  fullScreenThreshold: {
+    type: Number,
+    default: 1024
+  },
+  typingIndicatorKeepAlive: {
+    type: Number,
+    default: 30000
+  },
+  // 30 seconds
+  offset: {
+    type: Number,
+    default: 24
+  },
+  padding: {
+    type: Number,
+    default: 24
+  },
+  optimisticTypingIndicatorWait: {
+    type: Number,
+    default: 1000
+  } // 1 second
 };
-_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'onlineStatus', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter'];
+_default.classes = ['fadeOut'];
+_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate'];