@hellotext/hellotext 2.1.3 → 2.1.5

package/lib/models/utm.cjs

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UTM = 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; }
+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); }
+let UTM = /*#__PURE__*/function () {
+  function UTM() {
+    _classCallCheck(this, UTM);
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const utmsFromUrl = {
+      source: urlSearchParams.get('utm_source'),
+      medium: urlSearchParams.get('utm_medium'),
+      campaign: urlSearchParams.get('utm_campaign'),
+      term: urlSearchParams.get('utm_term'),
+      content: urlSearchParams.get('utm_content')
+    };
+    if (utmsFromUrl.source && utmsFromUrl.medium) {
+      const cleanUtms = Object.fromEntries(Object.entries(utmsFromUrl).filter(([_, value]) => value));
+      _cookies.Cookies.set('hello_utm', JSON.stringify(cleanUtms));
+    }
+  }
+  _createClass(UTM, [{
+    key: "current",
+    get: function () {
+      try {
+        return JSON.parse(_cookies.Cookies.get('hello_utm')) || {};
+      } catch (e) {
+        return {};
+      }
+    }
+  }]);
+  return UTM;
+}();
+exports.UTM = UTM;

package/lib/models/utm.js

@@ -0,0 +1,38 @@
+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; }
+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 UTM = /*#__PURE__*/function () {
+  function UTM() {
+    _classCallCheck(this, UTM);
+    var urlSearchParams = new URLSearchParams(window.location.search);
+    var utmsFromUrl = {
+      source: urlSearchParams.get('utm_source'),
+      medium: urlSearchParams.get('utm_medium'),
+      campaign: urlSearchParams.get('utm_campaign'),
+      term: urlSearchParams.get('utm_term'),
+      content: urlSearchParams.get('utm_content')
+    };
+    if (utmsFromUrl.source && utmsFromUrl.medium) {
+      var cleanUtms = Object.fromEntries(Object.entries(utmsFromUrl).filter(_ref => {
+        var [_, value] = _ref;
+        return value;
+      }));
+      Cookies.set('hello_utm', JSON.stringify(cleanUtms));
+    }
+  }
+  _createClass(UTM, [{
+    key: "current",
+    get: function get() {
+      try {
+        return JSON.parse(Cookies.get('hello_utm')) || {};
+      } catch (e) {
+        return {};
+      }
+    }
+  }]);
+  return UTM;
+}();
+export { UTM };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "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)
       }
     })

package/src/controllers/webchat_controller.js

@@ -23,6 +23,10 @@ export default class extends Controller {
     disabled: { type: Boolean, default: false },
     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
   }
 
   static classes = ['fadeOut']
@@ -40,12 +44,13 @@ export default class extends Controller {
     'messageTemplate',
     'messagesContainer',
     'title',
-    'onlineStatus',
     'attachmentImage',
     'footer',
     'toolbar',
     'message',
     'unreadCounter',
+    'typingIndicator',
+    'typingIndicatorTemplate',
   ]
 
   initialize() {
@@ -60,9 +65,8 @@ export default class extends Controller {
     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)
 
@@ -81,9 +85,8 @@ export default class extends Controller {
     this.setupFloatingUI({ trigger: this.triggerTarget, 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)
@@ -106,12 +109,94 @@ export default class extends Controller {
     this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent)
     this.messagesContainerTarget.removeEventListener('scroll', this.onScroll)
 
+    // Clean up typing indicator timeouts
+    this.clearTypingIndicator()
+
     this.broadcastChannel.close()
     this.floatingUICleanup()
 
     super.disconnect()
   }
 
+  onTypingStart() {
+    if (this.typingIndicatorVisible) {
+      return this.resetTypingIndicatorTimer()
+    }
+
+    this.showTypingIndicator()
+  }
+
+  showOptimisticTypingIndicator() {
+    if (this.typingIndicatorVisible) return
+
+    this.showTypingIndicator()
+  }
+
+  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)
+  }
+
+  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)
+  }
+
+  clearTypingIndicator() {
+    if (this.hasTypingIndicatorTarget) {
+      this.typingIndicatorTarget.remove()
+    }
+
+    this.typingIndicatorVisible = false
+
+    clearTimeout(this.incomingTypingIndicatorTimeout)
+    clearTimeout(this.optimisticTypingTimeout)
+  }
+
+  onMessageInputChange() {
+    this.resizeInput()
+    clearTimeout(this.typingIndicatorTimeout)
+
+    if (!this.hasSentTypingIndicator) {
+      this.webChatChannel.startTypingIndicator()
+      this.hasSentTypingIndicator = true
+    }
+
+    this.typingIndicatorTimeout = setTimeout(() => {
+      this.hasSentTypingIndicator = false
+    }, 3000)
+  }
+
   onOutboundMessageSent(event) {
     const { data } = event
 
@@ -120,7 +205,13 @@ export default class extends Controller {
         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' })
       },
       'message:failed': data => {
@@ -295,6 +386,7 @@ export default class extends Controller {
       })
     }
 
+    this.clearTypingIndicator()
     this.messagesContainerTarget.appendChild(element)
 
     Hellotext.eventEmitter.dispatch('webchat:message:received', {
@@ -303,7 +395,6 @@ export default class extends Controller {
     })
 
     element.scrollIntoView({ behavior: 'smooth' })
-    this.setOfflineTimeout()
 
     if (this.openValue) {
       this.messagesAPI.markAsSeen(id)
@@ -316,24 +407,20 @@ export default class extends Controller {
     this.unreadCounterTarget.innerText = unreadCount > 99 ? '99+' : unreadCount
   }
 
-  onConversationAssignment(conversation) {
-    const { to: user } = conversation
+  resizeInput() {
+    const maxHeight = 96
 
-    this.titleTarget.innerText = user.name
+    // Temporarily reset height to its natural content size
+    this.inputTarget.style.height = 'auto'
 
-    if (user.online) {
-      this.onlineStatusTarget.style.display = 'flex'
-    } else {
-      this.onlineStatusTarget.style.display = 'none'
-    }
-  }
+    // 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
 
-  onAgentOnline() {
-    this.onlineStatusTarget.style.display = 'flex'
-    this.setOfflineTimeout()
+    this.inputTarget.style.height = `${Math.min(scrollHeight, maxHeight)}px`
   }
 
-  async sendMessage() {
+  async sendMessage(e) {
     const formData = new FormData()
 
     const message = {
@@ -342,6 +429,10 @@ export default class extends Controller {
     }
 
     if (this.inputTarget.value.trim().length === 0 && this.files.length === 0) {
+      if (e && e.target) {
+        e.preventDefault()
+      }
+
       return
     }
 
@@ -381,7 +472,13 @@ export default class extends Controller {
       })
     }
 
-    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' })
 
     this.broadcastChannel.postMessage({
@@ -390,6 +487,7 @@ export default class extends Controller {
     })
 
     this.inputTarget.value = ''
+    this.resizeInput()
     this.files = []
 
     this.attachmentInputTarget.value = ''
@@ -400,9 +498,21 @@ export default class extends Controller {
 
     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,
@@ -422,6 +532,11 @@ export default class extends Controller {
       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 = ''
   }
 
@@ -534,24 +649,12 @@ export default class extends Controller {
     this.inputTarget.focus()
   }
 
-  setOfflineTimeout() {
-    clearTimeout(this.offlineTimeout)
-
-    this.offlineTimeout = setTimeout(() => {
-      this.onlineStatusTarget.style.display = 'none'
-    }, this.fiveMinutes)
-  }
-
   byteToMegabyte(bytes) {
     return Math.ceil(bytes / 1024 / 1024)
   }
 
-  get fiveMinutes() {
-    return 300000
-  }
-
   get middlewares() {
-    return [offset(5), shift({ padding: 24 }), flip()]
+    return [offset(this.offsetValue), shift({ padding: this.paddingValue }), flip()]
   }
 
   get shouldOpenOnMount() {

package/src/core/configuration.js

@@ -14,6 +14,7 @@ import { Webchat } from './configuration/webchat'
  */
 class Configuration {
   static apiRoot = 'https://api.hellotext.com/v1'
+  static actionCableUrl = 'wss://www.hellotext.com/cable'
 
   static autoGenerateSession = true
   static session = null

package/src/hellotext.js

@@ -1,7 +1,7 @@
 import { Configuration, Event } from './core'
 
 import API, { Response } from './api'
-import { Business, FormCollection, Query, Session, Webchat } from './models'
+import { Business, FormCollection, Page, Query, Session, Webchat } from './models'
 
 import { NotInitializedError } from './errors'
 
@@ -23,6 +23,7 @@ class Hellotext {
     Configuration.assign(config)
     Session.initialize()
 
+    this.page = new Page()
     this.business = new Business(business)
     this.forms = new FormCollection()
 
@@ -54,11 +55,13 @@ class Hellotext {
       ...this.headers,
     }
 
+    const pageInstance = params && params.url ? new Page(params.url) : this.page
+
     const body = {
       session: this.session,
       action,
       ...params,
-      url: (params && params.url) || window.location.href,
+      ...pageInstance.trackingData,
     }
 
     delete body.headers

package/src/models/cookies.js

@@ -2,7 +2,7 @@ import Hellotext from '../hellotext'
 
 class Cookies {
   static set(name, value) {
-    if(typeof document !== 'undefined') {
+    if (typeof document !== 'undefined') {
       document.cookie = `${name}=${value}; path=/;`
     }
 
@@ -12,7 +12,7 @@ class Cookies {
   }
 
   static get(name) {
-    if(typeof document !== 'undefined') {
+    if (typeof document !== 'undefined') {
       return document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop()
     } else {
       return undefined

package/src/models/index.js

@@ -2,6 +2,8 @@ export { Business } from './business'
 export { Cookies } from './cookies'
 export { Form } from './form'
 export { FormCollection } from './form_collection'
+export { Page } from './page'
 export { Query } from './query'
 export { Session } from './session'
+export { UTM } from './utm'
 export { Webchat } from './webchat'

package/src/models/page.js

@@ -0,0 +1,65 @@
+import { UTM } from './utm'
+
+class Page {
+  constructor(url = null) {
+    this.utm = new UTM()
+    this._url = url
+  }
+
+  /**
+   * Get the current page URL
+   * @returns {string} The page URL
+   */
+  get url() {
+    return this._url || window.location.href
+  }
+
+  /**
+   * Get the current page title
+   * @returns {string} The page title
+   */
+  get title() {
+    return document.title
+  }
+
+  /**
+   * Get the current page path
+   * @returns {string} The page path
+   */
+  get path() {
+    if (this._url) {
+      try {
+        return new URL(this._url).pathname
+      } catch (e) {
+        return '/'
+      }
+    }
+
+    return window.location.pathname
+  }
+
+  /**
+   * Get current UTM parameters
+   * @returns {Object} The UTM parameters
+   */
+  get utmParams() {
+    return this.utm.current
+  }
+
+  /**
+   * Get page data for tracking
+   * @returns {Object} Object containing page object and utm_params
+   */
+  get trackingData() {
+    return {
+      page: {
+        url: this.url,
+        title: this.title,
+        path: this.path,
+      },
+      utm_params: this.utmParams,
+    }
+  }
+}
+
+export { Page }

package/src/models/query.js

@@ -1,5 +1,3 @@
-import { Cookies } from './cookies'
-
 class Query {
   static get inPreviewMode() {
     return new this().inPreviewMode
@@ -22,7 +20,7 @@ class Query {
   }
 
   get session() {
-    return this.get('session') || Cookies.get('hello_session')
+    return this.get('session')
   }
 
   toHellotextParam(param) {

package/src/models/session.js

@@ -18,7 +18,7 @@ class Session {
   static initialize() {
     this.#query = new Query()
 
-    this.session = Configuration.session || this.#query.session || Cookies.get('hello_session')
+    this.session = this.#query.session || Configuration.session || Cookies.get('hello_session')
 
     if (!this.session && Configuration.autoGenerateSession) {
       this.session = crypto.randomUUID()