@hellotext/hellotext 2.1.1 → 2.1.3

package/lib/core/configuration/locale.cjs

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Locale = void 0;
+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); }
+function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) { throw new TypeError("attempted to use private field on non-instance"); } return receiver; }
+var id = 0;
+function _classPrivateFieldLooseKey(name) { return "__private_" + id++ + "_" + name; }
+var _fromHtmlLangProperty = /*#__PURE__*/_classPrivateFieldLooseKey("fromHtmlLangProperty");
+var _fromMetaTag = /*#__PURE__*/_classPrivateFieldLooseKey("fromMetaTag");
+var _fromBrowserLanguage = /*#__PURE__*/_classPrivateFieldLooseKey("fromBrowserLanguage");
+/**
+ * @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'.
+ */
+let Locale = /*#__PURE__*/function () {
+  function Locale() {
+    _classCallCheck(this, Locale);
+  }
+  _createClass(Locale, null, [{
+    key: "identifier",
+    get:
+    /**
+     * Gets the effective locale identifier.
+     * Falls back to auto-detection if not explicitly set.
+     * @returns {string} The locale identifier
+     */
+    function () {
+      if (this._identifier) return this._identifier;
+      return _classPrivateFieldLooseBase(this, _fromHtmlLangProperty)[_fromHtmlLangProperty] || _classPrivateFieldLooseBase(this, _fromMetaTag)[_fromMetaTag] || _classPrivateFieldLooseBase(this, _fromBrowserLanguage)[_fromBrowserLanguage] || 'en';
+    }
+
+    /**
+     * Returns the locale identifier as a string.
+     * @returns {string} The locale identifier
+     */,
+    set:
+    /**
+     * Sets the locale identifier explicitly.
+     * @param {string} value - The locale identifier (e.g., 'en', 'es')
+     */
+    function (value) {
+      this._identifier = value;
+    }
+  }, {
+    key: "toString",
+    value: function toString() {
+      return this.identifier;
+    }
+  }]);
+  return Locale;
+}();
+exports.Locale = Locale;
+function _get_fromHtmlLangProperty() {
+  var _document, _document$documentEle;
+  return (_document = document) === null || _document === void 0 ? void 0 : (_document$documentEle = _document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.lang;
+}
+function _get_fromMetaTag() {
+  var _document2, _document2$querySelec;
+  return (_document2 = document) === null || _document2 === void 0 ? void 0 : (_document2$querySelec = _document2.querySelector('meta[name="locale"]')) === null || _document2$querySelec === void 0 ? void 0 : _document2$querySelec.content;
+}
+function _get_fromBrowserLanguage() {
+  var _navigator, _navigator$language;
+  return (_navigator = navigator) === null || _navigator === void 0 ? void 0 : (_navigator$language = _navigator.language) === null || _navigator$language === void 0 ? void 0 : _navigator$language.split('-')[0]; // Extract primary language
+}
+Object.defineProperty(Locale, _fromBrowserLanguage, {
+  get: _get_fromBrowserLanguage,
+  set: void 0
+});
+Object.defineProperty(Locale, _fromMetaTag, {
+  get: _get_fromMetaTag,
+  set: void 0
+});
+Object.defineProperty(Locale, _fromHtmlLangProperty, {
+  get: _get_fromHtmlLangProperty,
+  set: void 0
+});
+Locale._identifier = void 0;

package/lib/core/configuration/locale.js

@@ -0,0 +1,81 @@
+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); }
+function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) { throw new TypeError("attempted to use private field on non-instance"); } return receiver; }
+var id = 0;
+function _classPrivateFieldLooseKey(name) { return "__private_" + id++ + "_" + name; }
+var _fromHtmlLangProperty = /*#__PURE__*/_classPrivateFieldLooseKey("fromHtmlLangProperty");
+var _fromMetaTag = /*#__PURE__*/_classPrivateFieldLooseKey("fromMetaTag");
+var _fromBrowserLanguage = /*#__PURE__*/_classPrivateFieldLooseKey("fromBrowserLanguage");
+/**
+ * @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'.
+ */
+var Locale = /*#__PURE__*/function () {
+  function Locale() {
+    _classCallCheck(this, Locale);
+  }
+  _createClass(Locale, null, [{
+    key: "identifier",
+    get:
+    /**
+     * Gets the effective locale identifier.
+     * Falls back to auto-detection if not explicitly set.
+     * @returns {string} The locale identifier
+     */
+    function get() {
+      if (this._identifier) return this._identifier;
+      return _classPrivateFieldLooseBase(this, _fromHtmlLangProperty)[_fromHtmlLangProperty] || _classPrivateFieldLooseBase(this, _fromMetaTag)[_fromMetaTag] || _classPrivateFieldLooseBase(this, _fromBrowserLanguage)[_fromBrowserLanguage] || 'en';
+    }
+
+    /**
+     * Returns the locale identifier as a string.
+     * @returns {string} The locale identifier
+     */,
+    set:
+    /**
+     * Sets the locale identifier explicitly.
+     * @param {string} value - The locale identifier (e.g., 'en', 'es')
+     */
+    function set(value) {
+      this._identifier = value;
+    }
+  }, {
+    key: "toString",
+    value: function toString() {
+      return this.identifier;
+    }
+  }]);
+  return Locale;
+}();
+function _get_fromHtmlLangProperty() {
+  var _document, _document$documentEle;
+  return (_document = document) === null || _document === void 0 ? void 0 : (_document$documentEle = _document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.lang;
+}
+function _get_fromMetaTag() {
+  var _document2, _document2$querySelec;
+  return (_document2 = document) === null || _document2 === void 0 ? void 0 : (_document2$querySelec = _document2.querySelector('meta[name="locale"]')) === null || _document2$querySelec === void 0 ? void 0 : _document2$querySelec.content;
+}
+function _get_fromBrowserLanguage() {
+  var _navigator, _navigator$language;
+  return (_navigator = navigator) === null || _navigator === void 0 ? void 0 : (_navigator$language = _navigator.language) === null || _navigator$language === void 0 ? void 0 : _navigator$language.split('-')[0]; // Extract primary language
+}
+Object.defineProperty(Locale, _fromBrowserLanguage, {
+  get: _get_fromBrowserLanguage,
+  set: void 0
+});
+Object.defineProperty(Locale, _fromMetaTag, {
+  get: _get_fromMetaTag,
+  set: void 0
+});
+Object.defineProperty(Locale, _fromHtmlLangProperty, {
+  get: _get_fromHtmlLangProperty,
+  set: void 0
+});
+Locale._identifier = void 0;
+export { Locale };

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.1",
+  "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'] }),
     ]
   }
 }