@hellotext/hellotext 2.1.2 → 2.1.4

package/src/controllers/webchat_controller.js

@@ -5,6 +5,7 @@ import WebchatMessagesAPI from '../api/webchat/messages'
 import WebchatChannel from '../channels/webchat_channel'
 import Hellotext from '../hellotext'
 
+import { Locale } from '../core'
 import { Webchat as WebchatConfiguration, behaviors } from '../core/configuration/webchat'
 
 import { LogoBuilder } from '../builders/logo_builder'
@@ -21,8 +22,15 @@ export default class extends Controller {
     autoPlacement: { type: Boolean, default: false },
     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']
+
   static targets = [
     'trigger',
     'popover',
@@ -36,12 +44,13 @@ export default class extends Controller {
     'messageTemplate',
     'messagesContainer',
     'title',
-    'onlineStatus',
     'attachmentImage',
     'footer',
     'toolbar',
     'message',
     'unreadCounter',
+    'typingIndicator',
+    'typingIndicatorTemplate',
   ]
 
   initialize() {
@@ -56,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)
 
@@ -77,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)
@@ -88,7 +95,7 @@ export default class extends Controller {
       this.toolbarTarget.appendChild(LogoBuilder.build())
     }
 
-    if (localStorage.getItem(`hellotext--webchat--${this.idValue}`) === 'opened') {
+    if (this.shouldOpenOnMount) {
       this.openValue = true
     }
 
@@ -102,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
 
@@ -116,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 => {
@@ -205,8 +300,18 @@ export default class extends Controller {
     }
   }
 
+  closePopover() {
+    this.popoverTarget.classList.add(...this.fadeOutClasses)
+
+    setTimeout(() => {
+      this.openValue = false
+    }, 250)
+  }
+
   onPopoverOpened() {
-    this.inputTarget.focus()
+    if (!this.onMobile) {
+      this.inputTarget.focus()
+    }
 
     if (!this.scrolled) {
       requestAnimationFrame(() => {
@@ -220,7 +325,6 @@ export default class extends Controller {
     }
 
     Hellotext.eventEmitter.dispatch('webchat:opened')
-
     localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'opened')
 
     if (this.unreadCounterTarget.style.display === 'none') return
@@ -233,11 +337,6 @@ export default class extends Controller {
 
   onPopoverClosed() {
     Hellotext.eventEmitter.dispatch('webchat:closed')
-
-    setTimeout(() => {
-      this.inputTarget.value = ''
-    })
-
     localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed')
   }
 
@@ -266,7 +365,7 @@ export default class extends Controller {
   }
 
   onMessageReceived(message) {
-    const { body, attachments } = message
+    const { id, body, attachments } = message
 
     const div = document.createElement('div')
     div.innerHTML = body
@@ -287,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', {
@@ -295,9 +399,11 @@ export default class extends Controller {
     })
 
     element.scrollIntoView({ behavior: 'smooth' })
-    this.setOfflineTimeout()
 
-    if (this.openValue) return
+    if (this.openValue) {
+      this.messagesAPI.markAsSeen(id)
+      return
+    }
 
     this.unreadCounterTarget.style.display = 'flex'
 
@@ -305,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 = {
@@ -331,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
     }
 
@@ -345,6 +451,7 @@ export default class extends Controller {
     })
 
     formData.append('session', Hellotext.session)
+    formData.append('locale', Locale.toString())
 
     const element = this.messageTemplateTarget.cloneNode(true)
 
@@ -369,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({
@@ -378,6 +491,7 @@ export default class extends Controller {
     })
 
     this.inputTarget.value = ''
+    this.resizeInput()
     this.files = []
 
     this.attachmentInputTarget.value = ''
@@ -410,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 = ''
   }
 
@@ -522,23 +645,21 @@ 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(this.offsetValue), shift({ padding: this.paddingValue }), flip()]
+  }
+
+  get shouldOpenOnMount() {
+    return (
+      localStorage.getItem(`hellotext--webchat--${this.idValue}`) === 'opened' && !this.onMobile
+    )
   }
 
-  get middlewares() {
-    return [offset(5), shift({ padding: 24 }), flip()]
+  get onMobile() {
+    return window.matchMedia(`(max-width: ${this.fullScreenThresholdValue}px)`).matches
   }
 }

package/src/core/configuration/locale.js

@@ -0,0 +1,50 @@
+/**
+ * @class Locale
+ * @classdesc
+ * Handles locale detection and configuration for the Hellotext library.
+ * Provides automatic locale detection from HTML lang attribute, meta tags,
+ * and browser language with fallback to 'en'.
+ */
+class Locale {
+  static _identifier
+
+  /**
+   * Sets the locale identifier explicitly.
+   * @param {string} value - The locale identifier (e.g., 'en', 'es')
+   */
+  static set identifier(value) {
+    this._identifier = value
+  }
+
+  /**
+   * Gets the effective locale identifier.
+   * Falls back to auto-detection if not explicitly set.
+   * @returns {string} The locale identifier
+   */
+  static get identifier() {
+    if (this._identifier) return this._identifier
+    return this.#fromHtmlLangProperty || this.#fromMetaTag || this.#fromBrowserLanguage || 'en'
+  }
+
+  /**
+   * Returns the locale identifier as a string.
+   * @returns {string} The locale identifier
+   */
+  static toString() {
+    return this.identifier
+  }
+
+  static get #fromHtmlLangProperty() {
+    return document?.documentElement?.lang
+  }
+
+  static get #fromMetaTag() {
+    return document?.querySelector('meta[name="locale"]')?.content
+  }
+
+  static get #fromBrowserLanguage() {
+    return navigator?.language?.split('-')[0] // Extract primary language
+  }
+}
+
+export { Locale }

package/src/core/configuration.js

@@ -1,4 +1,5 @@
 import { Forms } from './configuration/forms'
+import { Locale } from './configuration/locale'
 import { Webchat } from './configuration/webchat'
 
 /**
@@ -9,9 +10,11 @@ import { Webchat } from './configuration/webchat'
  * @property {String} [session] - session id
  * @property {Forms} [forms] - form configuration
  * @property {Webchat} [webchat] - webchat configuration
+ * @property {Locale} [locale] - locale configuration
  */
 class Configuration {
   static apiRoot = 'https://api.hellotext.com/v1'
+  static actionCableUrl = 'wss://www.hellotext.com/cable'
 
   static autoGenerateSession = true
   static session = null
@@ -43,6 +46,14 @@ class Configuration {
     return this
   }
 
+  static set locale(locale) {
+    Locale.identifier = locale
+  }
+
+  static get locale() {
+    return Locale.toString()
+  }
+
   static endpoint(path) {
     return `${this.apiRoot}/${path}`
   }

package/src/core/index.js

@@ -1,2 +1,4 @@
-export { default as Event } from './event'
 export { Configuration } from './configuration'
+export { Locale } from './configuration/locale'
+export { Webchat } from './configuration/webchat'
+export { default as Event } from './event'

package/src/locales/en.js

@@ -1,15 +1,15 @@
 export default {
   white_label: {
-    powered_by: 'Powered by',
+    powered_by: 'By',
   },
   errors: {
     parameter_not_unique: 'This value is taken.',
-    blank: 'This field is required.'
+    blank: 'This field is required.',
   },
   forms: {
     phone: 'Click the link sent via SMS to verify your submission.',
     email: 'Click the link sent via email to verify your submission.',
     phone_and_email: 'Click the links sent via SMS and email to verify your submission.',
-    none: 'Your submission has been received.'
-  }
+    none: 'Your submission has been received.',
+  },
 }

package/src/locales/es.js

@@ -1,15 +1,15 @@
 export default {
   white_label: {
-    powered_by: 'Desarrollado por',
+    powered_by: 'Por',
   },
   errors: {
     parameter_not_unique: 'Este valor ya está en uso.',
-    blank: 'Este campo es obligatorio.'
+    blank: 'Este campo es obligatorio.',
   },
   forms: {
     phone: 'Haga clic en el enlace enviado por SMS para verificar su envío.',
     email: 'Haga clic en el enlace enviado por e-mail para verificar su envío.',
     phone_and_email: 'Haga clic en los enlaces enviados por SMS y e-mail para verificar su envío.',
-    none: 'Su envío ha sido recibido.'
-  }
+    none: 'Su envío ha sido recibido.',
+  },
 }

package/src/models/business.js

@@ -30,6 +30,18 @@ class Business {
     return this.data.whitelist !== 'disabled'
   }
 
+  setLocale(locale) {
+    if (!locales[locale]) {
+      return console.warn(`Locale ${locale} not found`)
+    }
+
+    if (!this.data) {
+      this.data = {}
+    }
+
+    this.data.locale = locale
+  }
+
   get locale() {
     return locales[this.data.locale]
   }

package/src/models/form_collection.js

@@ -1,7 +1,7 @@
 import API from '../api/forms'
 import Hellotext from '../hellotext'
 
-import { Configuration } from '../core'
+import { Configuration, Locale } from '../core'
 import { Form } from './form'
 
 import { NotInitializedError } from '../errors'
@@ -84,6 +84,7 @@ class FormCollection {
 
     if (!Hellotext.business.data) {
       Hellotext.business.setData(data.business)
+      Hellotext.business.setLocale(Locale.toString())
     }
 
     if (!Hellotext.business.enabledWhitelist) {

package/src/models/index.js

@@ -1,7 +1,7 @@
 export { Business } from './business'
-export { Form } from './form'
-export { Query } from './query'
 export { Cookies } from './cookies'
+export { Form } from './form'
 export { FormCollection } from './form_collection'
-export { Webchat } from './webchat'
+export { Query } from './query'
 export { Session } from './session'
+export { Webchat } from './webchat'

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()