@hellotext/hellotext 2.1.2 → 2.1.3

package/lib/core/configuration.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Configuration = void 0;
 var _forms = require("./configuration/forms");
+var _locale = require("./configuration/locale");
 var _webchat = require("./configuration/webchat");
 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); } }
@@ -19,6 +20,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
  * @property {String} [session] - session id
  * @property {Forms} [forms] - form configuration
  * @property {Webchat} [webchat] - webchat configuration
+ * @property {Locale} [locale] - locale configuration
  */
 let Configuration = /*#__PURE__*/function () {
   function Configuration() {
@@ -49,6 +51,14 @@ let Configuration = /*#__PURE__*/function () {
       }
       return this;
     }
+  }, {
+    key: "locale",
+    get: function () {
+      return _locale.Locale.toString();
+    },
+    set: function (locale) {
+      _locale.Locale.identifier = locale;
+    }
   }, {
     key: "endpoint",
     value: function endpoint(path) {

package/lib/core/configuration.js

@@ -4,6 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 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 { Forms } from './configuration/forms';
+import { Locale } from './configuration/locale';
 import { Webchat } from './configuration/webchat';
 
 /**
@@ -14,6 +15,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
  */
 var Configuration = /*#__PURE__*/function () {
   function Configuration() {
@@ -45,6 +47,14 @@ var Configuration = /*#__PURE__*/function () {
       }
       return this;
     }
+  }, {
+    key: "locale",
+    get: function get() {
+      return Locale.toString();
+    },
+    set: function set(locale) {
+      Locale.identifier = locale;
+    }
   }, {
     key: "endpoint",
     value: function endpoint(path) {

package/lib/core/index.cjs

@@ -15,6 +15,20 @@ Object.defineProperty(exports, "Event", {
     return _event.default;
   }
 });
-var _event = _interopRequireDefault(require("./event"));
+Object.defineProperty(exports, "Locale", {
+  enumerable: true,
+  get: function () {
+    return _locale.Locale;
+  }
+});
+Object.defineProperty(exports, "Webchat", {
+  enumerable: true,
+  get: function () {
+    return _webchat.Webchat;
+  }
+});
 var _configuration = require("./configuration");
+var _locale = require("./configuration/locale");
+var _webchat = require("./configuration/webchat");
+var _event = _interopRequireDefault(require("./event"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/core/index.js

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

package/lib/locales/en.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = {
   white_label: {
-    powered_by: 'Powered by'
+    powered_by: 'By'
   },
   errors: {
     parameter_not_unique: 'This value is taken.',

package/lib/locales/en.js

@@ -1,6 +1,6 @@
 export default {
   white_label: {
-    powered_by: 'Powered by'
+    powered_by: 'By'
   },
   errors: {
     parameter_not_unique: 'This value is taken.',

package/lib/locales/es.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = {
   white_label: {
-    powered_by: 'Desarrollado por'
+    powered_by: 'Por'
   },
   errors: {
     parameter_not_unique: 'Este valor ya está en uso.',

package/lib/locales/es.js

@@ -1,6 +1,6 @@
 export default {
   white_label: {
-    powered_by: 'Desarrollado por'
+    powered_by: 'Por'
   },
   errors: {
     parameter_not_unique: 'Este valor ya está en uso.',

package/lib/models/business.cjs

@@ -43,6 +43,17 @@ let Business = /*#__PURE__*/function () {
     get: function () {
       return this.data.whitelist !== 'disabled';
     }
+  }, {
+    key: "setLocale",
+    value: function setLocale(locale) {
+      if (!_locales.default[locale]) {
+        return console.warn(`Locale ${locale} not found`);
+      }
+      if (!this.data) {
+        this.data = {};
+      }
+      this.data.locale = locale;
+    }
   }, {
     key: "locale",
     get: function () {

package/lib/models/business.js

@@ -36,6 +36,17 @@ var Business = /*#__PURE__*/function () {
     get: function get() {
       return this.data.whitelist !== 'disabled';
     }
+  }, {
+    key: "setLocale",
+    value: function setLocale(locale) {
+      if (!locales[locale]) {
+        return console.warn("Locale ".concat(locale, " not found"));
+      }
+      if (!this.data) {
+        this.data = {};
+      }
+      this.data.locale = locale;
+    }
   }, {
     key: "locale",
     get: function get() {

package/lib/models/form_collection.cjs

@@ -91,6 +91,7 @@ let FormCollection = /*#__PURE__*/function () {
       if (this.includes(data.id)) return;
       if (!_hellotext.default.business.data) {
         _hellotext.default.business.setData(data.business);
+        _hellotext.default.business.setLocale(_core.Locale.toString());
       }
       if (!_hellotext.default.business.enabledWhitelist) {
         console.warn('No whitelist has been configured. It is advised to whitelist the domain to avoid bots from submitting forms.');

package/lib/models/form_collection.js

@@ -10,7 +10,7 @@ var id = 0;
 function _classPrivateFieldLooseKey(name) { return "__private_" + id++ + "_" + name; }
 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';
 var _formIdsToFetch = /*#__PURE__*/_classPrivateFieldLooseKey("formIdsToFetch");
@@ -92,6 +92,7 @@ var FormCollection = /*#__PURE__*/function () {
       if (this.includes(data.id)) return;
       if (!Hellotext.business.data) {
         Hellotext.business.setData(data.business);
+        Hellotext.business.setLocale(Locale.toString());
       }
       if (!Hellotext.business.enabledWhitelist) {
         console.warn('No whitelist has been configured. It is advised to whitelist the domain to avoid bots from submitting forms.');

package/lib/models/index.cjs

@@ -46,9 +46,9 @@ Object.defineProperty(exports, "Webchat", {
   }
 });
 var _business = require("./business");
-var _form = require("./form");
-var _query = require("./query");
 var _cookies = require("./cookies");
+var _form = require("./form");
 var _form_collection = require("./form_collection");
-var _webchat = require("./webchat");
-var _session = require("./session");
+var _query = require("./query");
+var _session = require("./session");
+var _webchat = require("./webchat");

package/lib/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 { Session } from './session';
+export { Query } from './query';
+export { Session } from './session';
+export { Webchat } from './webchat';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",
@@ -91,6 +91,7 @@
     "url": "https://github.com/hellotext/hellotext.js/issues"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
     "@floating-ui/dom": "^1.7.3",
     "@hotwired/stimulus": "^3.0.0",
     "emoji-mart": "^5.6.0"

package/src/api/forms.js

@@ -1,5 +1,5 @@
+import { Configuration, Locale } from '../core'
 import Hellotext from '../hellotext'
-import { Configuration } from '../core'
 
 import { Response } from './response'
 
@@ -10,7 +10,9 @@ export default class FormsAPI {
 
   static async get(id) {
     const url = new URL(`${this.endpoint}/${id}`)
+
     url.searchParams.append('session', Hellotext.session)
+    url.searchParams.append('locale', Locale.toString())
 
     return fetch(url, {
       method: 'GET',

package/src/api/webchat/messages.js

@@ -1,5 +1,5 @@
-import Hellotext from '../../hellotext'
 import { Configuration } from '../../core'
+import Hellotext from '../../hellotext'
 
 import { Response } from '../response'
 
@@ -31,19 +31,21 @@ class WebchatMessagesAPI {
       headers: {
         Authorization: `Bearer ${Hellotext.business.id}`,
       },
-      body: formData
+      body: formData,
     })
 
     return new Response(response.ok, response)
   }
 
-  markAsSeen() {
-    fetch(this.url + '/seen', {
+  markAsSeen(messageId = null) {
+    const url = messageId ? this.url + `/${messageId}` : this.url + '/seen'
+
+    fetch(url, {
       method: 'PATCH',
       headers: Hellotext.headers,
       body: JSON.stringify({
-        session: Hellotext.session
-      })
+        session: Hellotext.session,
+      }),
     })
   }
 

package/src/api/webchats.js

@@ -1,4 +1,4 @@
-import { Configuration } from '../core'
+import { Configuration, Locale } from '../core'
 import Hellotext from '../hellotext'
 
 class WebchatsAPI {
@@ -10,6 +10,7 @@ class WebchatsAPI {
     const url = new URL(`${this.endpoint}/${id}`)
 
     url.searchParams.append('session', Hellotext.session)
+    url.searchParams.append('locale', Locale.toString())
 
     Object.entries(Configuration.webchat.style).forEach(([key, value]) => {
       url.searchParams.append(`style[${key}]`, value)
@@ -26,6 +27,7 @@ class WebchatsAPI {
 
     if (!Hellotext.business.data) {
       Hellotext.business.setData(data.business)
+      Hellotext.business.setLocale(data.locale)
     }
 
     return new DOMParser().parseFromString(data.html, 'text/html').querySelector('article')

package/src/builders/logo_builder.js

@@ -14,7 +14,7 @@ class LogoBuilder {
     return `
       <div data-logo-container>
         <small>${Hellotext.business.locale.white_label.powered_by}</small>
-        
+
         <a href="${url}" rel="noreferrer" target="_blank">
           <svg data-hello-brand viewBox="0 0 224 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
             <title>Hellotext</title>

package/src/controllers/webchat/emoji_picker_controller.js

@@ -1,23 +1,23 @@
+import { autoPlacement, offset, shift } from '@floating-ui/dom'
 import { Controller } from '@hotwired/stimulus'
-import { computePosition, autoUpdate, shift, autoPlacement, offset } from '@floating-ui/dom'
+
+import en from '@emoji-mart/data/i18n/en.json'
+import es from '@emoji-mart/data/i18n/es.json'
 
 import { Picker } from 'emoji-mart'
 
 import { usePopover } from '../mixins/usePopover'
 
 export default class extends Controller {
-  static targets = [
-    'button',
-    'popover',
-  ]
+  static targets = ['button', 'popover']
 
   static values = {
-    placement: { type: String, default: "bottom-end" },
+    placement: { type: String, default: 'bottom-end' },
     open: { type: Boolean, default: false },
     autoPlacement: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     size: { type: Number, default: 24 },
-    perLine: { type: Number, default: 9 }
+    perLine: { type: Number, default: 9 },
   }
 
   initialize() {
@@ -62,13 +62,7 @@ export default class extends Controller {
       skinTonePosition: 'none',
       emojiSize: this.sizeValue,
       perLine: this.perLineValue,
-      data: async () => {
-        const response = await fetch(
-          'https://cdn.jsdelivr.net/npm/@emoji-mart/data',
-        )
-
-        return response.json()
-      }
+      i18n: Hellotext.business.locale === 'es' ? es : en,
     })
   }
 
@@ -76,7 +70,7 @@ export default class extends Controller {
     return [
       offset(5),
       shift({ padding: 24 }),
-      autoPlacement({ allowedPlacements: ['top', 'bottom' ]}),
+      autoPlacement({ allowedPlacements: ['top', 'bottom'] }),
     ]
   }
 }

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,8 +209,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 +234,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 +246,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 +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
@@ -297,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'
 
@@ -345,6 +356,7 @@ export default class extends Controller {
     })
 
     formData.append('session', Hellotext.session)
+    formData.append('locale', Locale.toString())
 
     const element = this.messageTemplateTarget.cloneNode(true)
 
@@ -541,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'