@hellotext/hellotext 2.1.2 → 2.1.4

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/lib/models/query.cjs

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Query = void 0;
-var _cookies = require("./cookies");
 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; }
@@ -33,7 +32,7 @@ let Query = /*#__PURE__*/function () {
   }, {
     key: "session",
     get: function () {
-      return this.get('session') || _cookies.Cookies.get('hello_session');
+      return this.get('session');
     }
   }, {
     key: "toHellotextParam",

package/lib/models/query.js

@@ -3,7 +3,6 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 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); }
-import { Cookies } from './cookies';
 var Query = /*#__PURE__*/function () {
   function Query() {
     _classCallCheck(this, Query);
@@ -27,7 +26,7 @@ var Query = /*#__PURE__*/function () {
   }, {
     key: "session",
     get: function get() {
-      return this.get('session') || Cookies.get('hello_session');
+      return this.get('session');
     }
   }, {
     key: "toHellotextParam",

package/lib/models/session.cjs

@@ -34,7 +34,7 @@ let Session = /*#__PURE__*/function () {
     key: "initialize",
     value: function initialize() {
       _classPrivateFieldLooseBase(this, _query)[_query] = new _query2.Query();
-      this.session = _core.Configuration.session || _classPrivateFieldLooseBase(this, _query)[_query].session || _cookies.Cookies.get('hello_session');
+      this.session = _classPrivateFieldLooseBase(this, _query)[_query].session || _core.Configuration.session || _cookies.Cookies.get('hello_session');
       if (!this.session && _core.Configuration.autoGenerateSession) {
         this.session = crypto.randomUUID();
       }

package/lib/models/session.js

@@ -28,7 +28,7 @@ var Session = /*#__PURE__*/function () {
     key: "initialize",
     value: function initialize() {
       _classPrivateFieldLooseBase(this, _query)[_query] = new Query();
-      this.session = Configuration.session || _classPrivateFieldLooseBase(this, _query)[_query].session || Cookies.get('hello_session');
+      this.session = _classPrivateFieldLooseBase(this, _query)[_query].session || Configuration.session || Cookies.get('hello_session');
       if (!this.session && Configuration.autoGenerateSession) {
         this.session = crypto.randomUUID();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "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/channels/application_channel.js

@@ -1,28 +1,31 @@
+import { Configuration } from '../core'
+
 class ApplicationChannel {
-  static webSocket;
+  static webSocket
 
-  send({ command, identifier }) {
-    const data = {
+  send({ command, identifier, data }) {
+    const payload = {
       command,
-      identifier: JSON.stringify(identifier)
+      identifier: JSON.stringify(identifier),
+      data: JSON.stringify(data || {}),
     }
 
     if (this.webSocket.readyState === WebSocket.OPEN) {
-      this.webSocket.send(JSON.stringify(data))
+      this.webSocket.send(JSON.stringify(payload))
     } else {
       this.webSocket.addEventListener('open', () => {
-        this.webSocket.send(JSON.stringify(data))
+        this.webSocket.send(JSON.stringify(payload))
       })
     }
   }
 
   onMessage(callback) {
-    this.webSocket.addEventListener('message', (event) => {
+    this.webSocket.addEventListener('message', event => {
       const data = JSON.parse(event.data)
       const { type, message } = data
 
       if (this.ignoredEvents.includes(type)) {
-        return;
+        return
       }
 
       callback(message)
@@ -31,7 +34,7 @@ class ApplicationChannel {
 
   get webSocket() {
     if (!ApplicationChannel.webSocket) {
-      return ApplicationChannel.webSocket = new WebSocket("wss://www.hellotext.com/cable")
+      return (ApplicationChannel.webSocket = new WebSocket(Configuration.actionCableUrl))
     }
 
     return ApplicationChannel.webSocket

package/src/channels/webchat_channel.js

@@ -13,18 +13,18 @@ class WebchatChannel extends ApplicationChannel {
 
   subscribe() {
     const params = {
-      channel: "WebchatChannel",
+      channel: 'WebchatChannel',
       id: this.id,
       session: this.session,
       conversation: this.conversation,
     }
 
-    this.send( { command: 'subscribe',  identifier: params })
+    this.send({ command: 'subscribe', identifier: params })
   }
 
   unsubscribe() {
     const params = {
-      channel: "WebchatChannel",
+      channel: 'WebchatChannel',
       id: this.id,
       session: this.session,
       conversation: this.conversation,
@@ -33,32 +33,46 @@ class WebchatChannel extends ApplicationChannel {
     this.send({ command: 'unsubscribe', identifier: params })
   }
 
-  onMessage(callback) {
-    super.onMessage((message) => {
-      if(message.type !== 'message') return
-      callback(message)
-    })
+  startTypingIndicator() {
+    const params = {
+      channel: 'WebchatChannel',
+      id: this.id,
+      session: this.session,
+      conversation: this.conversation,
+    }
+
+    this.send({ command: 'message', identifier: params, data: { action: 'started_typing' } })
   }
 
-  onConversationAssignment(callback) {
-    super.onMessage((message) => {
-      if(message.type === 'conversation.assigned') {
-        callback(message)
-      }
+  stopTypingIndicator() {
+    const params = {
+      channel: 'WebchatChannel',
+      id: this.id,
+      session: this.session,
+      conversation: this.conversation,
+    }
+
+    this.send({ command: 'typing:stop', identifier: params, data: { action: 'stopped_typing' } })
+  }
+
+  onMessage(callback) {
+    super.onMessage(message => {
+      if (message.type !== 'message') return
+      callback(message)
     })
   }
 
-  onAgentOnline(callback) {
-    super.onMessage((message) => {
-      if(message.type === 'agent_is_online') {
+  onReaction(callback) {
+    super.onMessage(message => {
+      if (message.type === 'reaction.create' || message.type === 'reaction.destroy') {
         callback(message)
       }
     })
   }
 
-  onReaction(callback) {
-    super.onMessage((message) => {
-      if(message.type === 'reaction.create' || message.type === 'reaction.destroy') {
+  onTypingStart(callback) {
+    super.onMessage(message => {
+      if (message.type === 'started_typing') {
         callback(message)
       }
     })

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'] }),
     ]
   }
 }