Webchat Improvements

__tests__/controllers/webchat_controller_test.js

@@ -333,9 +333,6 @@ describe('WebchatController', () => {
         }
       }
 
-      // Mock the setOfflineTimeout method
-      controller.setOfflineTimeout = jest.fn()
-
       // Mock scrollIntoView
       Element.prototype.scrollIntoView = jest.fn()
 
@@ -463,18 +460,6 @@ describe('WebchatController', () => {
       })
     })
 
-    describe('offline timeout', () => {
-      it('calls setOfflineTimeout after processing message', () => {
-        const message = {
-          body: 'Timeout test message'
-        }
-
-        controller.onMessageReceived(message)
-
-        expect(controller.setOfflineTimeout).toHaveBeenCalled()
-      })
-    })
-
     describe('read status when chat is open', () => {
       beforeEach(() => {
         controller.openValue = true
@@ -758,6 +743,12 @@ describe('WebchatController', () => {
       controller.webChatChannel = mockWebChatChannel
       controller.hasSentTypingIndicator = false
       controller.typingIndicatorTimeout = null
+
+      // Mock inputTarget for resizeInput method
+      controller.inputTarget = {
+        style: {},
+        scrollHeight: 50
+      }
     })
 
     afterEach(() => {

lib/channels/webchat_channel.cjs

@@ -103,24 +103,6 @@ let WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
         callback(message);
       });
     }
-  }, {
-    key: "onConversationAssignment",
-    value: function onConversationAssignment(callback) {
-      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type === 'conversation.assigned') {
-          callback(message);
-        }
-      });
-    }
-  }, {
-    key: "onAgentOnline",
-    value: function onAgentOnline(callback) {
-      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type === 'agent_is_online') {
-          callback(message);
-        }
-      });
-    }
   }, {
     key: "onReaction",
     value: function onReaction(callback) {

lib/channels/webchat_channel.js

@@ -96,24 +96,6 @@ var WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
         callback(message);
       });
     }
-  }, {
-    key: "onConversationAssignment",
-    value: function onConversationAssignment(callback) {
-      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type === 'conversation.assigned') {
-          callback(message);
-        }
-      });
-    }
-  }, {
-    key: "onAgentOnline",
-    value: function onAgentOnline(callback) {
-      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type === 'agent_is_online') {
-          callback(message);
-        }
-      });
-    }
   }, {
     key: "onReaction",
     value: function onReaction(callback) {

lib/controllers/webchat_controller.cjs

@@ -42,8 +42,6 @@ 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);
@@ -62,9 +60,7 @@ let _default = /*#__PURE__*/function (_Controller) {
         popover: this.popoverTarget
       });
       this.webChatChannel.onMessage(this.onMessageReceived);
-      this.webChatChannel.onConversationAssignment(this.onConversationAssignment);
       this.webChatChannel.onTypingStart(this.onTypingStart);
-      this.webChatChannel.onAgentOnline(this.onAgentOnline);
       this.webChatChannel.onReaction(this.onMessageReaction);
       this.messagesContainerTarget.addEventListener('scroll', this.onScroll);
       if (!_hellotext.default.business.features.white_label) {
@@ -109,6 +105,7 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onMessageInputChange",
     value: function onMessageInputChange() {
+      this.resizeInput();
       clearTimeout(this.typingIndicatorTimeout);
       if (!this.hasSentTypingIndicator) {
         this.webChatChannel.startTypingIndicator();
@@ -296,7 +293,6 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
-      this.setOfflineTimeout();
       if (this.openValue) {
         this.messagesAPI.markAsSeen(id);
         return;
@@ -306,33 +302,30 @@ let _default = /*#__PURE__*/function (_Controller) {
       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) {
@@ -370,6 +363,7 @@ let _default = /*#__PURE__*/function (_Controller) {
         element: element.outerHTML
       });
       this.inputTarget.value = '';
+      this.resizeInput();
       this.files = [];
       this.attachmentInputTarget.value = '';
       this.attachmentContainerTarget.innerHTML = '';
@@ -488,24 +482,11 @@ 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",
-    get: function () {
-      return 300000;
-    }
   }, {
     key: "middlewares",
     get: function () {
@@ -570,4 +551,4 @@ _default.values = {
   }
 };
 _default.classes = ['fadeOut'];
-_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'onlineStatus', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate'];
+_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate'];

lib/controllers/webchat_controller.js

@@ -40,8 +40,6 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.webChatChannel = new WebchatChannel(this.idValue, Hellotext.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);
@@ -60,9 +58,7 @@ var _default = /*#__PURE__*/function (_Controller) {
         popover: this.popoverTarget
       });
       this.webChatChannel.onMessage(this.onMessageReceived);
-      this.webChatChannel.onConversationAssignment(this.onConversationAssignment);
       this.webChatChannel.onTypingStart(this.onTypingStart);
-      this.webChatChannel.onAgentOnline(this.onAgentOnline);
       this.webChatChannel.onReaction(this.onMessageReaction);
       this.messagesContainerTarget.addEventListener('scroll', this.onScroll);
       if (!Hellotext.business.features.white_label) {
@@ -107,6 +103,7 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onMessageInputChange",
     value: function onMessageInputChange() {
+      this.resizeInput();
       clearTimeout(this.typingIndicatorTimeout);
       if (!this.hasSentTypingIndicator) {
         this.webChatChannel.startTypingIndicator();
@@ -299,7 +296,6 @@ var _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
-      this.setOfflineTimeout();
       if (this.openValue) {
         this.messagesAPI.markAsSeen(id);
         return;
@@ -309,34 +305,31 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.unreadCounterTarget.innerText = unreadCount > 99 ? '99+' : unreadCount;
     }
   }, {
-    key: "onConversationAssignment",
-    value: function onConversationAssignment(conversation) {
-      var {
-        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() {
+      var 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.
+      var scrollHeight = this.inputTarget.scrollHeight;
+      this.inputTarget.style.height = "".concat(Math.min(scrollHeight, maxHeight), "px");
     }
   }, {
     key: "sendMessage",
     value: function () {
-      var _sendMessage = _asyncToGenerator(function* () {
+      var _sendMessage = _asyncToGenerator(function* (e) {
         var formData = new FormData();
         var 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) {
@@ -374,6 +367,7 @@ var _default = /*#__PURE__*/function (_Controller) {
           element: element.outerHTML
         });
         this.inputTarget.value = '';
+        this.resizeInput();
         this.files = [];
         this.attachmentInputTarget.value = '';
         this.attachmentContainerTarget.innerHTML = '';
@@ -398,7 +392,7 @@ var _default = /*#__PURE__*/function (_Controller) {
         }
         this.attachmentContainerTarget.style.display = '';
       });
-      function sendMessage() {
+      function sendMessage(_x) {
         return _sendMessage.apply(this, arguments);
       }
       return sendMessage;
@@ -499,24 +493,11 @@ var _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",
-    get: function get() {
-      return 300000;
-    }
   }, {
     key: "middlewares",
     get: function get() {
@@ -580,5 +561,5 @@ _default.values = {
   }
 };
 _default.classes = ['fadeOut'];
-_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'onlineStatus', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate'];
+_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate'];
 export { _default as default };

src/channels/webchat_channel.js

@@ -62,22 +62,6 @@ class WebchatChannel extends ApplicationChannel {
     })
   }
 
-  onConversationAssignment(callback) {
-    super.onMessage(message => {
-      if (message.type === 'conversation.assigned') {
-        callback(message)
-      }
-    })
-  }
-
-  onAgentOnline(callback) {
-    super.onMessage(message => {
-      if (message.type === 'agent_is_online') {
-        callback(message)
-      }
-    })
-  }
-
   onReaction(callback) {
     super.onMessage(message => {
       if (message.type === 'reaction.create' || message.type === 'reaction.destroy') {