@hellotext/hellotext 2.1.1 → 2.1.3

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,11 @@ 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 },
   }
 
+  static classes = ['fadeOut']
+
   static targets = [
     'trigger',
     'popover',
@@ -88,7 +92,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
     }
 
@@ -205,20 +209,31 @@ 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) {
-      this.messagesContainerTarget.scroll({
-        top: this.messagesContainerTarget.scrollHeight,
-        behavior: 'instant',
+      requestAnimationFrame(() => {
+        this.messagesContainerTarget.scroll({
+          top: this.messagesContainerTarget.scrollHeight,
+          behavior: 'instant',
+        })
       })
 
       this.scrolled = true
     }
 
     Hellotext.eventEmitter.dispatch('webchat:opened')
-
     localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'opened')
 
     if (this.unreadCounterTarget.style.display === 'none') return
@@ -231,11 +246,6 @@ export default class extends Controller {
 
   onPopoverClosed() {
     Hellotext.eventEmitter.dispatch('webchat:closed')
-
-    setTimeout(() => {
-      this.inputTarget.value = ''
-    })
-
     localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed')
   }
 
@@ -264,7 +274,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
@@ -295,7 +305,10 @@ 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'
 
@@ -328,13 +341,22 @@ export default class extends Controller {
       attachments: this.files,
     }
 
-    formData.append('message[body]', this.inputTarget.value)
+    if (this.inputTarget.value.trim().length === 0 && this.files.length === 0) {
+      return
+    }
+
+    if (this.inputTarget.value.trim().length > 0) {
+      formData.append('message[body]', this.inputTarget.value)
+    } else {
+      delete message.body
+    }
 
     this.files.forEach(file => {
       formData.append('message[attachments][]', file)
     })
 
     formData.append('session', Hellotext.session)
+    formData.append('locale', Locale.toString())
 
     const element = this.messageTemplateTarget.cloneNode(true)
 
@@ -344,7 +366,12 @@ export default class extends Controller {
     element.style.removeProperty('display')
 
     element.setAttribute('data-hellotext--webchat-target', 'message')
-    element.querySelector('[data-body]').innerText = this.inputTarget.value
+
+    if (this.inputTarget.value.trim().length > 0) {
+      element.querySelector('[data-body]').innerText = this.inputTarget.value
+    } else {
+      element.querySelector('[data-message-bubble]').remove()
+    }
 
     const attachments = this.attachmentContainerTarget.querySelectorAll('img')
 
@@ -364,6 +391,10 @@ export default class extends Controller {
 
     this.inputTarget.value = ''
     this.files = []
+
+    this.attachmentInputTarget.value = ''
+    this.attachmentContainerTarget.innerHTML = ''
+
     this.attachmentContainerTarget.style.display = 'none'
     this.errorMessageContainerTarget.style.display = 'none'
 
@@ -401,9 +432,10 @@ export default class extends Controller {
   onFileInputChange() {
     this.errorMessageContainerTarget.style.display = 'none'
 
-    this.files = Array.from(this.attachmentInputTarget.files)
+    const newFiles = Array.from(this.attachmentInputTarget.files)
+    this.attachmentInputTarget.value = ''
 
-    const fileMaxSizeTooMuch = this.files.find(file => {
+    const fileMaxSizeTooMuch = newFiles.find(file => {
       const type = file.type.split('/')[0]
 
       if (['image', 'video', 'audio'].includes(type)) {
@@ -421,11 +453,14 @@ export default class extends Controller {
         '%{limit}',
         this.byteToMegabyte(this.mediaValue[mediaType].max_size),
       )
-      return
+
+      return (this.errorMessageContainerTarget.style.display = 'block')
     }
 
+    this.files = [...this.files, ...newFiles]
     this.errorMessageContainerTarget.innerText = ''
-    this.files.forEach(file => this.createAttachmentElement(file))
+
+    newFiles.forEach(file => this.createAttachmentElement(file))
     this.inputTarget.focus()
   }
 
@@ -448,12 +483,16 @@ export default class extends Controller {
       this.attachmentContainerTarget.style.display = 'flex'
     } else {
       const main = element.querySelector('main')
+
       main.style.height = '5rem'
       main.style.borderRadius = '0.375rem'
       main.style.backgroundColor = '#e5e7eb'
       main.style.padding = '0.25rem'
 
       element.querySelector('p[data-attachment-name]').innerText = file.name
+
+      this.attachmentContainerTarget.appendChild(element)
+      this.attachmentContainerTarget.style.display = 'flex'
     }
   }
 
@@ -461,6 +500,7 @@ export default class extends Controller {
     const attachment = currentTarget.closest("[data-hellotext--webchat-target='attachment']")
 
     this.files = this.files.filter(file => file.name !== attachment.dataset.name)
+    this.attachmentInputTarget.value = ''
 
     attachment.remove()
     this.inputTarget.focus()
@@ -513,4 +553,14 @@ export default class extends Controller {
   get middlewares() {
     return [offset(5), shift({ padding: 24 }), flip()]
   }
+
+  get shouldOpenOnMount() {
+    return (
+      localStorage.getItem(`hellotext--webchat--${this.idValue}`) === 'opened' && !this.onMobile
+    )
+  }
+
+  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,6 +10,7 @@ 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'
@@ -43,6 +45,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'