@hellotext/hellotext 2.1.3 → 2.1.4

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,11 @@ export default class extends Controller {
       })
     }
 
+    // Clear any typing indicator when message is received
+    if (this.typingIndicatorVisible) {
+      this.clearTypingIndicator()
+    }
+
     this.messagesContainerTarget.appendChild(element)
 
     Hellotext.eventEmitter.dispatch('webchat:message:received', {
@@ -303,7 +399,6 @@ export default class extends Controller {
     })
 
     element.scrollIntoView({ behavior: 'smooth' })
-    this.setOfflineTimeout()
 
     if (this.openValue) {
       this.messagesAPI.markAsSeen(id)
@@ -316,24 +411,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 +433,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 +476,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 +491,7 @@ export default class extends Controller {
     })
 
     this.inputTarget.value = ''
+    this.resizeInput()
     this.files = []
 
     this.attachmentInputTarget.value = ''
@@ -422,6 +524,15 @@ export default class extends Controller {
       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 = ''
   }
 
@@ -534,24 +645,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/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()