@hellotext/hellotext 2.1.3 → 2.1.4

package/lib/controllers/webchat_controller.js

@@ -40,9 +40,8 @@ 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);
       this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this);
       this.broadcastChannel = new BroadcastChannel("hellotext--webchat--".concat(this.idValue));
@@ -59,8 +58,7 @@ var _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.business.features.white_label) {
@@ -78,10 +76,85 @@ var _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;
+      var 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'
+        });
+      });
+      var 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
+      var 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) {
@@ -91,7 +164,13 @@ var _default = /*#__PURE__*/function (_Controller) {
       var callbacks = {
         'message:sent': data => {
           var 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'
           });
@@ -251,6 +330,11 @@ var _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.eventEmitter.dispatch('webchat:message:received', _objectSpread(_objectSpread({}, message), {}, {
         body: element.querySelector('[data-body]').innerText
@@ -258,7 +342,6 @@ var _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
-      this.setOfflineTimeout();
       if (this.openValue) {
         this.messagesAPI.markAsSeen(id);
         return;
@@ -268,34 +351,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) {
@@ -324,7 +404,13 @@ var _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'
         });
@@ -333,6 +419,7 @@ var _default = /*#__PURE__*/function (_Controller) {
           element: element.outerHTML
         });
         this.inputTarget.value = '';
+        this.resizeInput();
         this.files = [];
         this.attachmentInputTarget.value = '';
         this.attachmentContainerTarget.innerHTML = '';
@@ -355,9 +442,17 @@ var _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 = '';
       });
-      function sendMessage() {
+      function sendMessage(_x) {
         return _sendMessage.apply(this, arguments);
       }
       return sendMessage;
@@ -458,29 +553,16 @@ 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() {
-      return [offset(5), shift({
-        padding: 24
+      return [offset(this.offsetValue), shift({
+        padding: this.paddingValue
       }), flip()];
     }
   }, {
@@ -524,8 +606,25 @@ _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'];
 export { _default as default };

package/lib/core/configuration.cjs

@@ -69,6 +69,7 @@ let Configuration = /*#__PURE__*/function () {
 }();
 exports.Configuration = Configuration;
 Configuration.apiRoot = 'https://api.hellotext.com/v1';
+Configuration.actionCableUrl = 'wss://www.hellotext.com/cable';
 Configuration.autoGenerateSession = true;
 Configuration.session = null;
 Configuration.forms = _forms.Forms;

package/lib/core/configuration.js

@@ -64,6 +64,7 @@ var Configuration = /*#__PURE__*/function () {
   return Configuration;
 }();
 Configuration.apiRoot = 'https://api.hellotext.com/v1';
+Configuration.actionCableUrl = 'wss://www.hellotext.com/cable';
 Configuration.autoGenerateSession = true;
 Configuration.session = null;
 Configuration.forms = Forms;

package/lib/models/query.cjs

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Query = void 0;
-var _cookies = require("./cookies");
 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; }
@@ -33,7 +32,7 @@ let Query = /*#__PURE__*/function () {
   }, {
     key: "session",
     get: function () {
-      return this.get('session') || _cookies.Cookies.get('hello_session');
+      return this.get('session');
     }
   }, {
     key: "toHellotextParam",

package/lib/models/query.js

@@ -3,7 +3,6 @@ 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 { Cookies } from './cookies';
 var Query = /*#__PURE__*/function () {
   function Query() {
     _classCallCheck(this, Query);
@@ -27,7 +26,7 @@ var Query = /*#__PURE__*/function () {
   }, {
     key: "session",
     get: function get() {
-      return this.get('session') || Cookies.get('hello_session');
+      return this.get('session');
     }
   }, {
     key: "toHellotextParam",

package/lib/models/session.cjs

@@ -34,7 +34,7 @@ let Session = /*#__PURE__*/function () {
     key: "initialize",
     value: function initialize() {
       _classPrivateFieldLooseBase(this, _query)[_query] = new _query2.Query();
-      this.session = _core.Configuration.session || _classPrivateFieldLooseBase(this, _query)[_query].session || _cookies.Cookies.get('hello_session');
+      this.session = _classPrivateFieldLooseBase(this, _query)[_query].session || _core.Configuration.session || _cookies.Cookies.get('hello_session');
       if (!this.session && _core.Configuration.autoGenerateSession) {
         this.session = crypto.randomUUID();
       }

package/lib/models/session.js

@@ -28,7 +28,7 @@ var Session = /*#__PURE__*/function () {
     key: "initialize",
     value: function initialize() {
       _classPrivateFieldLooseBase(this, _query)[_query] = new Query();
-      this.session = Configuration.session || _classPrivateFieldLooseBase(this, _query)[_query].session || Cookies.get('hello_session');
+      this.session = _classPrivateFieldLooseBase(this, _query)[_query].session || Configuration.session || Cookies.get('hello_session');
       if (!this.session && Configuration.autoGenerateSession) {
         this.session = crypto.randomUUID();
       }

package/package.json

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

package/src/channels/application_channel.js

@@ -1,28 +1,31 @@
+import { Configuration } from '../core'
+
 class ApplicationChannel {
-  static webSocket;
+  static webSocket
 
-  send({ command, identifier }) {
-    const data = {
+  send({ command, identifier, 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))
       })
     }
   }
 
   onMessage(callback) {
-    this.webSocket.addEventListener('message', (event) => {
+    this.webSocket.addEventListener('message', event => {
       const data = JSON.parse(event.data)
       const { type, message } = data
 
       if (this.ignoredEvents.includes(type)) {
-        return;
+        return
       }
 
       callback(message)
@@ -31,7 +34,7 @@ class ApplicationChannel {
 
   get webSocket() {
     if (!ApplicationChannel.webSocket) {
-      return ApplicationChannel.webSocket = new WebSocket("wss://www.hellotext.com/cable")
+      return (ApplicationChannel.webSocket = new WebSocket(Configuration.actionCableUrl))
     }
 
     return ApplicationChannel.webSocket

package/src/channels/webchat_channel.js

@@ -13,18 +13,18 @@ class WebchatChannel extends ApplicationChannel {
 
   subscribe() {
     const params = {
-      channel: "WebchatChannel",
+      channel: 'WebchatChannel',
       id: this.id,
       session: this.session,
       conversation: this.conversation,
     }
 
-    this.send( { command: 'subscribe',  identifier: params })
+    this.send({ command: 'subscribe', identifier: params })
   }
 
   unsubscribe() {
     const params = {
-      channel: "WebchatChannel",
+      channel: 'WebchatChannel',
       id: this.id,
       session: this.session,
       conversation: this.conversation,
@@ -33,32 +33,46 @@ class WebchatChannel extends ApplicationChannel {
     this.send({ command: 'unsubscribe', identifier: params })
   }
 
-  onMessage(callback) {
-    super.onMessage((message) => {
-      if(message.type !== 'message') return
-      callback(message)
-    })
+  startTypingIndicator() {
+    const params = {
+      channel: 'WebchatChannel',
+      id: this.id,
+      session: this.session,
+      conversation: this.conversation,
+    }
+
+    this.send({ command: 'message', identifier: params, data: { action: 'started_typing' } })
   }
 
-  onConversationAssignment(callback) {
-    super.onMessage((message) => {
-      if(message.type === 'conversation.assigned') {
-        callback(message)
-      }
+  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' } })
+  }
+
+  onMessage(callback) {
+    super.onMessage(message => {
+      if (message.type !== 'message') return
+      callback(message)
     })
   }
 
-  onAgentOnline(callback) {
-    super.onMessage((message) => {
-      if(message.type === 'agent_is_online') {
+  onReaction(callback) {
+    super.onMessage(message => {
+      if (message.type === 'reaction.create' || message.type === 'reaction.destroy') {
         callback(message)
       }
     })
   }
 
-  onReaction(callback) {
-    super.onMessage((message) => {
-      if(message.type === 'reaction.create' || message.type === 'reaction.destroy') {
+  onTypingStart(callback) {
+    super.onMessage(message => {
+      if (message.type === 'started_typing') {
         callback(message)
       }
     })