@hellotext/hellotext 2.1.3 → 2.1.5

package/lib/channels/application_channel.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _core = require("../core");
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -17,17 +18,19 @@ let ApplicationChannel = /*#__PURE__*/function () {
     key: "send",
     value: function send({
       command,
-      identifier
+      identifier,
+      data
     }) {
-      const data = {
+      const payload = {
         command,
-        identifier: JSON.stringify(identifier)
+        identifier: JSON.stringify(identifier),
+        data: JSON.stringify(data || {})
       };
       if (this.webSocket.readyState === WebSocket.OPEN) {
-        this.webSocket.send(JSON.stringify(data));
+        this.webSocket.send(JSON.stringify(payload));
       } else {
         this.webSocket.addEventListener('open', () => {
-          this.webSocket.send(JSON.stringify(data));
+          this.webSocket.send(JSON.stringify(payload));
         });
       }
     }
@@ -50,7 +53,7 @@ let ApplicationChannel = /*#__PURE__*/function () {
     key: "webSocket",
     get: function () {
       if (!ApplicationChannel.webSocket) {
-        return ApplicationChannel.webSocket = new WebSocket("wss://www.hellotext.com/cable");
+        return ApplicationChannel.webSocket = new WebSocket(_core.Configuration.actionCableUrl);
       }
       return ApplicationChannel.webSocket;
     }

package/lib/channels/application_channel.js

@@ -3,6 +3,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { Configuration } from '../core';
 var ApplicationChannel = /*#__PURE__*/function () {
   function ApplicationChannel() {
     _classCallCheck(this, ApplicationChannel);
@@ -12,17 +13,19 @@ var ApplicationChannel = /*#__PURE__*/function () {
     value: function send(_ref) {
       var {
         command,
-        identifier
+        identifier,
+        data
       } = _ref;
-      var data = {
+      var payload = {
         command,
-        identifier: JSON.stringify(identifier)
+        identifier: JSON.stringify(identifier),
+        data: JSON.stringify(data || {})
       };
       if (this.webSocket.readyState === WebSocket.OPEN) {
-        this.webSocket.send(JSON.stringify(data));
+        this.webSocket.send(JSON.stringify(payload));
       } else {
         this.webSocket.addEventListener('open', () => {
-          this.webSocket.send(JSON.stringify(data));
+          this.webSocket.send(JSON.stringify(payload));
         });
       }
     }
@@ -45,7 +48,7 @@ var ApplicationChannel = /*#__PURE__*/function () {
     key: "webSocket",
     get: function get() {
       if (!ApplicationChannel.webSocket) {
-        return ApplicationChannel.webSocket = new WebSocket("wss://www.hellotext.com/cable");
+        return ApplicationChannel.webSocket = new WebSocket(Configuration.actionCableUrl);
       }
       return ApplicationChannel.webSocket;
     }

package/lib/channels/webchat_channel.cjs

@@ -37,7 +37,7 @@ let WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
     key: "subscribe",
     value: function subscribe() {
       const params = {
-        channel: "WebchatChannel",
+        channel: 'WebchatChannel',
         id: this.id,
         session: this.session,
         conversation: this.conversation
@@ -51,7 +51,7 @@ let WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
     key: "unsubscribe",
     value: function unsubscribe() {
       const params = {
-        channel: "WebchatChannel",
+        channel: 'WebchatChannel',
         id: this.id,
         session: this.session,
         conversation: this.conversation
@@ -62,29 +62,45 @@ let WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
       });
     }
   }, {
-    key: "onMessage",
-    value: function onMessage(callback) {
-      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type !== 'message') return;
-        callback(message);
+    key: "startTypingIndicator",
+    value: function startTypingIndicator() {
+      const params = {
+        channel: 'WebchatChannel',
+        id: this.id,
+        session: this.session,
+        conversation: this.conversation
+      };
+      this.send({
+        command: 'message',
+        identifier: params,
+        data: {
+          action: 'started_typing'
+        }
       });
     }
   }, {
-    key: "onConversationAssignment",
-    value: function onConversationAssignment(callback) {
-      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type === 'conversation.assigned') {
-          callback(message);
+    key: "stopTypingIndicator",
+    value: function stopTypingIndicator() {
+      const params = {
+        channel: 'WebchatChannel',
+        id: this.id,
+        session: this.session,
+        conversation: this.conversation
+      };
+      this.send({
+        command: 'typing:stop',
+        identifier: params,
+        data: {
+          action: 'stopped_typing'
         }
       });
     }
   }, {
-    key: "onAgentOnline",
-    value: function onAgentOnline(callback) {
+    key: "onMessage",
+    value: function onMessage(callback) {
       _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type === 'agent_is_online') {
-          callback(message);
-        }
+        if (message.type !== 'message') return;
+        callback(message);
       });
     }
   }, {
@@ -96,6 +112,15 @@ let WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
         }
       });
     }
+  }, {
+    key: "onTypingStart",
+    value: function onTypingStart(callback) {
+      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
+        if (message.type === 'started_typing') {
+          callback(message);
+        }
+      });
+    }
   }, {
     key: "updateSubscriptionWith",
     value: function updateSubscriptionWith(conversation) {

package/lib/channels/webchat_channel.js

@@ -30,7 +30,7 @@ var WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
     key: "subscribe",
     value: function subscribe() {
       var params = {
-        channel: "WebchatChannel",
+        channel: 'WebchatChannel',
         id: this.id,
         session: this.session,
         conversation: this.conversation
@@ -44,7 +44,7 @@ var WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
     key: "unsubscribe",
     value: function unsubscribe() {
       var params = {
-        channel: "WebchatChannel",
+        channel: 'WebchatChannel',
         id: this.id,
         session: this.session,
         conversation: this.conversation
@@ -55,29 +55,45 @@ var WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
       });
     }
   }, {
-    key: "onMessage",
-    value: function onMessage(callback) {
-      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type !== 'message') return;
-        callback(message);
+    key: "startTypingIndicator",
+    value: function startTypingIndicator() {
+      var params = {
+        channel: 'WebchatChannel',
+        id: this.id,
+        session: this.session,
+        conversation: this.conversation
+      };
+      this.send({
+        command: 'message',
+        identifier: params,
+        data: {
+          action: 'started_typing'
+        }
       });
     }
   }, {
-    key: "onConversationAssignment",
-    value: function onConversationAssignment(callback) {
-      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type === 'conversation.assigned') {
-          callback(message);
+    key: "stopTypingIndicator",
+    value: function stopTypingIndicator() {
+      var params = {
+        channel: 'WebchatChannel',
+        id: this.id,
+        session: this.session,
+        conversation: this.conversation
+      };
+      this.send({
+        command: 'typing:stop',
+        identifier: params,
+        data: {
+          action: 'stopped_typing'
         }
       });
     }
   }, {
-    key: "onAgentOnline",
-    value: function onAgentOnline(callback) {
+    key: "onMessage",
+    value: function onMessage(callback) {
       _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
-        if (message.type === 'agent_is_online') {
-          callback(message);
-        }
+        if (message.type !== 'message') return;
+        callback(message);
       });
     }
   }, {
@@ -89,6 +105,15 @@ var WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
         }
       });
     }
+  }, {
+    key: "onTypingStart",
+    value: function onTypingStart(callback) {
+      _get(_getPrototypeOf(WebchatChannel.prototype), "onMessage", this).call(this, message => {
+        if (message.type === 'started_typing') {
+          callback(message);
+        }
+      });
+    }
   }, {
     key: "updateSubscriptionWith",
     value: function updateSubscriptionWith(conversation) {

package/lib/controllers/webchat_controller.cjs

@@ -42,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}`);
@@ -61,8 +60,7 @@ 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) {
@@ -80,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) {
@@ -93,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'
           });
@@ -247,6 +326,7 @@ let _default = /*#__PURE__*/function (_Controller) {
           element.querySelector('[data-attachment-container]').appendChild(image);
         });
       }
+      this.clearTypingIndicator();
       this.messagesContainerTarget.appendChild(element);
       _hellotext.default.eventEmitter.dispatch('webchat:message:received', {
         ...message,
@@ -255,7 +335,6 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
-      this.setOfflineTimeout();
       if (this.openValue) {
         this.messagesAPI.markAsSeen(id);
         return;
@@ -265,33 +344,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) {
@@ -320,7 +396,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'
       });
@@ -329,14 +411,26 @@ let _default = /*#__PURE__*/function (_Controller) {
         element: element.outerHTML
       });
       this.inputTarget.value = '';
+      this.resizeInput();
       this.files = [];
       this.attachmentInputTarget.value = '';
       this.attachmentContainerTarget.innerHTML = '';
       this.attachmentContainerTarget.style.display = 'none';
       this.errorMessageContainerTarget.style.display = 'none';
       this.inputTarget.focus();
+
+      // Set up optimistic typing indicator BEFORE making the API call
+      // This prevents race conditions with server responses
+      if (!this.typingIndicatorVisible) {
+        clearTimeout(this.optimisticTypingTimeout);
+        this.optimisticTypingTimeout = setTimeout(() => {
+          this.showOptimisticTypingIndicator();
+        }, this.optimisticTypingIndicatorWaitValue);
+      }
       const response = await this.messagesAPI.create(formData);
       if (response.failed) {
+        // Clear the optimistic typing indicator on failure
+        clearTimeout(this.optimisticTypingTimeout);
         this.broadcastChannel.postMessage({
           type: 'message:failed',
           id: element.id
@@ -351,6 +445,11 @@ let _default = /*#__PURE__*/function (_Controller) {
         this.conversationIdValue = data.conversation;
         this.webChatChannel.updateSubscriptionWith(this.conversationIdValue);
       }
+
+      // If there's already a typing indicator visible, reset its timer
+      if (this.typingIndicatorVisible) {
+        this.resetTypingIndicatorTimer();
+      }
       this.attachmentContainerTarget.style.display = '';
     }
   }, {
@@ -447,29 +546,16 @@ 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 () {
-      return [(0, _dom.offset)(5), (0, _dom.shift)({
-        padding: 24
+      return [(0, _dom.offset)(this.offsetValue), (0, _dom.shift)({
+        padding: this.paddingValue
       }), (0, _dom.flip)()];
     }
   }, {
@@ -514,7 +600,24 @@ _default.values = {
   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.classes = ['fadeOut'];
-_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'onlineStatus', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter'];
+_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate'];