@hellotext/hellotext 1.8.3 → 1.8.5

package/src/core/configuration/webchat.js

@@ -0,0 +1,176 @@
+/**
+ * @typedef {'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'} Placement
+ * @description Valid placements for the webchat.
+ */
+
+/**
+ * @enum {Placement}
+ */
+const placements = {
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right'
+}
+
+
+/**
+ * @typedef {'modal' | 'popover'} Behaviour
+ */
+
+/**
+ * @enum {Behaviour}
+ */
+const behaviors = {
+  MODAL: 'modal',
+  POPOVER: 'popover'
+}
+
+/**
+ * @typedef {Object} Style
+ * @property {string} primaryColor - The primary webchat color (e.g., a hex code or color name).
+ * @property {string} secondaryColor - The secondary webchat color or style (e.g., a hex code or color name).
+ * @property {string} typography - The typography style (e.g., font family).
+ */
+
+
+/**
+ * @class Webchat
+ * @classdesc
+ * Configuration for webchat
+ * @property {String} id - the id of the webchat.
+ * @property {String} container - the container to append the webchat to, defaults to 'body'
+ * @property {Placement} placement - the placement of the webchat within the container, defaults to "bottom-right".
+ * @property {String} classes - additional classes to apply to the webchat popup.
+ * @property {String} triggerClasses - additional classes to apply to the webchat popup trigger.
+ * @property {Behaviour} behaviour - the behaviour of the webchat, defaults to 'popover'.
+ * @property {Style} style - the style of the webchat.
+ */
+
+class Webchat {
+  static _id
+  static _container = 'body'
+  static _placement = 'bottom-right'
+  static _classes = []
+  static _triggerClasses = []
+  static _style = {}
+  static _behaviour = behaviors.POPOVER
+
+  static set container(value) {
+    this._container = value
+  }
+
+  static get container() {
+    return this._container
+  }
+
+  static set placement(value) {
+    if(!Object.values(placements).includes(value)) {
+      throw new Error(`Invalid placement value: ${value}`)
+    }
+
+    this._placement = value
+  }
+
+  static get placement() {
+    return this._placement
+  }
+
+  static set classes(value) {
+    if(!Array.isArray(value) && typeof value !== 'string') {
+      throw new Error('classes must be an array or a string')
+    }
+
+    this._classes = value;
+  }
+
+  static get classes() {
+    if(typeof this._classes === 'string') {
+      return this._classes.split(',').map(c => c.trim())
+    } else {
+      return this._classes;
+    }
+  }
+
+  static set triggerClasses(value) {
+    if(!Array.isArray(value) && typeof value !== 'string') {
+      throw new Error('triggerClasses must be an array or a string')
+    }
+
+    this._triggerClasses = value;
+  }
+
+  static get triggerClasses() {
+    if(typeof this._triggerClasses === 'string') {
+      return this._triggerClasses.split(',').map(c => c.trim())
+    } else {
+      return this._triggerClasses;
+    }
+  }
+
+  static set id(value) {
+    this._id = value
+  }
+
+  static get id() {
+    return this._id
+  }
+
+  static get isSet() {
+    return !!this._id
+  }
+
+  static get style() {
+    return this._style
+  }
+
+  static set style(value) {
+    if(typeof value !== 'object') {
+      throw new Error('Style must be an object')
+    }
+
+    Object.entries(value).forEach(([key, value]) => {
+      if(!['primaryColor', 'secondaryColor', 'typography'].includes(key)) {
+        throw new Error(`Invalid style property: ${key}`)
+      }
+
+      if(key === 'typography') {
+        return
+      }
+
+      if(!this.isHexOrRgba(value)) {
+        throw new Error(`Invalid color value: ${value} for ${key}. Colors must be hex or rgb/a.`)
+      }
+    })
+
+    this._style = value
+  }
+
+  static get behaviour() {
+    return this._behaviour
+  }
+
+  static set behaviour(value) {
+    if(!Object.values(behaviors).includes(value)) {
+      throw new Error(`Invalid behaviour value: ${value}`)
+    }
+
+    this._behaviour = value
+  }
+
+  static assign(props) {
+    if(props) {
+      Object.entries(props).forEach(([key, value]) => {
+        this[key] = value
+      })
+    }
+
+    return this
+  }
+
+  static isHexOrRgba(value) {
+    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value) || /^rgba?\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3},?\s*(0|1|0?\.\d+)?\s*\)$/.test(value);
+  }
+}
+
+export { Webchat, behaviors }

package/src/core/configuration.js

@@ -1,4 +1,5 @@
 import { Forms } from './configuration/forms'
+import { Webchat } from './configuration/webchat'
 
 /**
  * @class Configuration
@@ -7,6 +8,7 @@ import { Forms } from './configuration/forms'
  * @property {Boolean} [autoGenerateSession=true] - whether to auto generate session or not
  * @property {String} [session] - session id
  * @property {Forms} [forms] - form configuration
+ * @property {Webchat} [webchat] - webchat configuration
  */
 class Configuration {
   static apiRoot = 'https://api.hellotext.com/v1'
@@ -15,6 +17,7 @@ class Configuration {
   static session = null
 
   static forms = Forms
+  static webchat = Webchat
 
   /**
    *
@@ -29,6 +32,8 @@ class Configuration {
       Object.entries(props).forEach(([key, value]) => {
         if (key === 'forms') {
           this.forms = Forms.assign(value)
+        } else if(key === 'webChat') {
+          this.webchat = Webchat.assign(value)
         } else {
           this[key] = value
         }

package/src/core/event.js

@@ -1,7 +1,16 @@
 import { InvalidEvent } from '../errors'
 
 export default class Event {
-  static events = ['session-set', 'forms:collected', 'form:completed']
+  static events = [
+    'session-set',
+    'forms:collected',
+    'form:completed',
+    'webchat:mounted',
+    'webchat:opened',
+    'webchat:closed',
+    'webchat:message:sent',
+    'webchat:message:received',
+  ]
 
   static valid(name) {
     return Event.exists(name)

package/src/hellotext.js

@@ -1,7 +1,7 @@
 import { Event, Configuration } from './core'
 
 import API, { Response } from './api'
-import { Business, Query, FormCollection, Session } from './models'
+import { Business, Query, FormCollection, Session, Webchat } from './models'
 
 import { NotInitializedError } from './errors'
 
@@ -13,13 +13,14 @@ class Hellotext {
   static eventEmitter = new Event()
   static forms
   static business
+  static webchat
 
   /**
    * initialize the module.
    * @param business public business id
    * @param { Configuration } config
    */
-  static initialize(business, config) {
+  static async initialize(business, config) {
     Configuration.assign(config)
     Session.initialize()
 
@@ -27,6 +28,10 @@ class Hellotext {
 
     this.business = new Business(business)
     this.forms = new FormCollection()
+
+    if (Configuration.webchat.id) {
+      this.webchat = await Webchat.load(Configuration.webchat.id)
+    }
   }
 
   /**

package/src/index.js

@@ -2,9 +2,14 @@ import { Application } from '@hotwired/stimulus'
 import Hellotext from './hellotext'
 
 import FormController from './controllers/form_controller'
+import WebchatController from './controllers/webchat_controller'
+import WebChatEmojiController from './controllers/webchat/emoji_picker_controller'
 
 const application = Application.start()
+
 application.register('hellotext--form', FormController)
+application.register('hellotext--webchat', WebchatController)
+application.register('hellotext--webchat--emoji', WebChatEmojiController)
 
 import '../styles/index.css'
 

package/src/models/business.js

@@ -34,7 +34,17 @@ class Business {
   fetchPublicData() {
     API.get(this.id)
       .then(response => response.json())
-      .then(data => (this.data = data))
+      .then(data => {
+        this.data = data
+
+        if(typeof document !== 'undefined') {
+          const linkTag = document.createElement('link')
+          linkTag.rel = 'stylesheet'
+          linkTag.href = data.style_url
+
+          document.head.append(linkTag)
+        }
+      })
   }
 }
 

package/src/models/index.js

@@ -3,4 +3,5 @@ export { Form } from './form'
 export { Query } from './query'
 export { Cookies } from './cookies'
 export { FormCollection } from './form_collection'
+export { Webchat } from './webchat'
 export { Session } from './session'

package/src/models/session.js

@@ -1,5 +1,5 @@
-import { Configuration } from '../core';
-import { Cookies, Query } from './index'
+import {Configuration} from '../core';
+import {Cookies, Query} from './index'
 
 class Session {
   static #session
@@ -17,14 +17,16 @@ class Session {
   static initialize() {
     this.#query = new Query()
 
-    if(Configuration.session) {
+    if (Configuration.session) {
       this.session = Configuration.session
     } else if (this.#query.session) {
-      this.session =  this.#query.session
+      this.session = this.#query.session
+    } else if (Cookies.get('hello_session')) {
+      this.session = Cookies.get('hello_session')
     } else if (Configuration.autoGenerateSession) {
       this.session = crypto.randomUUID()
     }
   }
 }
 
-export { Session }
+export {Session}

package/src/models/webchat.js

@@ -0,0 +1,28 @@
+import Hellotext from '../hellotext';
+import { Configuration } from '../core'
+
+import API from '../api';
+
+class Webchat {
+  static async load(id) {
+    return new Webchat({
+      id,
+      html: await API.webchats.get(id),
+    })
+  }
+
+  constructor(data) {
+    this.data = data
+    this.render()
+  }
+
+  render() {
+    this.containerToAppendTo.appendChild(this.data.html)
+  }
+
+  get containerToAppendTo() {
+    return document.querySelector(Configuration.webchat.container)
+  }
+}
+
+export { Webchat }

package/styles/index.css

@@ -1,3 +1,7 @@
+.hidden {
+  display: none;
+}
+
 form[data-hello-form] {
   position: relative;
 

package/webpack.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   mode: 'production',
-  entry: ['whatwg-fetch', '@hotwired/stimulus', './lib/index.js'],
+  entry: ['@hotwired/stimulus', './lib/index.js'],
   output: {
     filename: 'hellotext.js',
   },