@hellotext/hellotext 2.0.9 → 2.1.1

package/index.d.ts

@@ -17,6 +17,7 @@ export interface HellotextConfig {
       secondaryColor?: string
       typography?: string
     }
+    strategy?: 'absolute' | 'fixed'
   }
   session?: string
   autoGenerateSession?: boolean

package/lib/controllers/mixins/usePopover.cjs

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.usePopover = void 0;
 var _dom = require("@floating-ui/dom");
-var _hellotext = _interopRequireDefault(require("../../hellotext"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _core = require("../../core");
 const usePopover = controller => {
   Object.assign(controller, {
     show() {
@@ -25,14 +24,17 @@ const usePopover = controller => {
       this.floatingUICleanup = (0, _dom.autoUpdate)(trigger, popover, () => {
         (0, _dom.computePosition)(trigger, popover, {
           placement: this.placementValue,
-          middleware: this.middlewares
+          middleware: this.middlewares,
+          strategy: _core.Configuration.webchat.strategy
         }).then(({
           x,
-          y
+          y,
+          strategy
         }) => {
           const newStyle = {
             left: `${x}px`,
-            top: `${y}px`
+            top: `${y}px`,
+            position: strategy
           };
           Object.assign(popover.style, newStyle);
         });
@@ -42,13 +44,13 @@ const usePopover = controller => {
       if (this.disabledValue) return;
       if (this.openValue) {
         this.popoverTarget.showPopover();
-        this.popoverTarget.setAttribute("aria-expanded", "true");
+        this.popoverTarget.setAttribute('aria-expanded', 'true');
         if (this['onPopoverOpened']) {
           this.onPopoverOpened();
         }
       } else {
         this.popoverTarget.hidePopover();
-        this.popoverTarget.removeAttribute("aria-expanded");
+        this.popoverTarget.removeAttribute('aria-expanded');
         if (this['onPopoverClosed']) {
           this.onPopoverClosed();
         }

package/lib/controllers/mixins/usePopover.js

@@ -1,5 +1,5 @@
 import { autoUpdate, computePosition } from '@floating-ui/dom';
-import Hellotext from "../../hellotext";
+import { Configuration } from '../../core';
 export var usePopover = controller => {
   Object.assign(controller, {
     show() {
@@ -19,15 +19,18 @@ export var usePopover = controller => {
       this.floatingUICleanup = autoUpdate(trigger, popover, () => {
         computePosition(trigger, popover, {
           placement: this.placementValue,
-          middleware: this.middlewares
+          middleware: this.middlewares,
+          strategy: Configuration.webchat.strategy
         }).then(_ref2 => {
           var {
             x,
-            y
+            y,
+            strategy
           } = _ref2;
           var newStyle = {
             left: "".concat(x, "px"),
-            top: "".concat(y, "px")
+            top: "".concat(y, "px"),
+            position: strategy
           };
           Object.assign(popover.style, newStyle);
         });
@@ -37,13 +40,13 @@ export var usePopover = controller => {
       if (this.disabledValue) return;
       if (this.openValue) {
         this.popoverTarget.showPopover();
-        this.popoverTarget.setAttribute("aria-expanded", "true");
+        this.popoverTarget.setAttribute('aria-expanded', 'true');
         if (this['onPopoverOpened']) {
           this.onPopoverOpened();
         }
       } else {
         this.popoverTarget.hidePopover();
-        this.popoverTarget.removeAttribute("aria-expanded");
+        this.popoverTarget.removeAttribute('aria-expanded');
         if (this['onPopoverClosed']) {
           this.onPopoverClosed();
         }

package/lib/controllers/webchat_controller.cjs

@@ -45,6 +45,8 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.onAgentOnline = this.onAgentOnline.bind(this);
       this.onMessageReaction = this.onMessageReaction.bind(this);
       this.onScroll = this.onScroll.bind(this);
+      this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this);
+      this.broadcastChannel = new BroadcastChannel(`hellotext--webchat--${this.idValue}`);
       _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this);
     }
   }, {
@@ -69,15 +71,43 @@ let _default = /*#__PURE__*/function (_Controller) {
         this.openValue = true;
       }
       _hellotext.default.eventEmitter.dispatch('webchat:mounted');
+      this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent);
       _get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
     }
   }, {
     key: "disconnect",
     value: function disconnect() {
+      this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent);
       this.messagesContainerTarget.removeEventListener('scroll', this.onScroll);
+      this.broadcastChannel.close();
       this.floatingUICleanup();
       _get(_getPrototypeOf(_default.prototype), "disconnect", this).call(this);
     }
+  }, {
+    key: "onOutboundMessageSent",
+    value: function onOutboundMessageSent(event) {
+      const {
+        data
+      } = event;
+      const callbacks = {
+        'message:sent': data => {
+          const element = new DOMParser().parseFromString(data.element, 'text/html').body.firstElementChild;
+          this.messagesContainerTarget.appendChild(element);
+          element.scrollIntoView({
+            behavior: 'instant'
+          });
+        },
+        'message:failed': data => {
+          var _this$messagesContain;
+          (_this$messagesContain = this.messagesContainerTarget.querySelector(`#${data.id}`)) === null || _this$messagesContain === void 0 ? void 0 : _this$messagesContain.classList.add('failed');
+        }
+      };
+      if (callbacks[data.type]) {
+        callbacks[data.type](data);
+      } else {
+        console.log(`Unhandled message event: ${data.type}`);
+      }
+    }
   }, {
     key: "onScroll",
     value: async function onScroll() {
@@ -253,6 +283,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       });
       formData.append('session', _hellotext.default.session);
       const element = this.messageTemplateTarget.cloneNode(true);
+      element.id = `hellotext--webchat--${this.idValue}--message--${Date.now()}`;
       element.classList.add('received');
       element.style.removeProperty('display');
       element.setAttribute('data-hellotext--webchat-target', 'message');
@@ -267,6 +298,10 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
+      this.broadcastChannel.postMessage({
+        type: 'message:sent',
+        element: element.outerHTML
+      });
       this.inputTarget.value = '';
       this.files = [];
       this.attachmentContainerTarget.style.display = 'none';
@@ -274,6 +309,10 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.inputTarget.focus();
       const response = await this.messagesAPI.create(formData);
       if (response.failed) {
+        this.broadcastChannel.postMessage({
+          type: 'message:failed',
+          id: element.id
+        });
         return element.classList.add('failed');
       }
       const data = await response.json();

package/lib/controllers/webchat_controller.js

@@ -43,6 +43,8 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.onAgentOnline = this.onAgentOnline.bind(this);
       this.onMessageReaction = this.onMessageReaction.bind(this);
       this.onScroll = this.onScroll.bind(this);
+      this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this);
+      this.broadcastChannel = new BroadcastChannel("hellotext--webchat--".concat(this.idValue));
       _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this);
     }
   }, {
@@ -67,15 +69,43 @@ var _default = /*#__PURE__*/function (_Controller) {
         this.openValue = true;
       }
       Hellotext.eventEmitter.dispatch('webchat:mounted');
+      this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent);
       _get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
     }
   }, {
     key: "disconnect",
     value: function disconnect() {
+      this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent);
       this.messagesContainerTarget.removeEventListener('scroll', this.onScroll);
+      this.broadcastChannel.close();
       this.floatingUICleanup();
       _get(_getPrototypeOf(_default.prototype), "disconnect", this).call(this);
     }
+  }, {
+    key: "onOutboundMessageSent",
+    value: function onOutboundMessageSent(event) {
+      var {
+        data
+      } = event;
+      var callbacks = {
+        'message:sent': data => {
+          var element = new DOMParser().parseFromString(data.element, 'text/html').body.firstElementChild;
+          this.messagesContainerTarget.appendChild(element);
+          element.scrollIntoView({
+            behavior: 'instant'
+          });
+        },
+        'message:failed': data => {
+          var _this$messagesContain;
+          (_this$messagesContain = this.messagesContainerTarget.querySelector("#".concat(data.id))) === null || _this$messagesContain === void 0 ? void 0 : _this$messagesContain.classList.add('failed');
+        }
+      };
+      if (callbacks[data.type]) {
+        callbacks[data.type](data);
+      } else {
+        console.log("Unhandled message event: ".concat(data.type));
+      }
+    }
   }, {
     key: "onScroll",
     value: function () {
@@ -257,6 +287,7 @@ var _default = /*#__PURE__*/function (_Controller) {
         });
         formData.append('session', Hellotext.session);
         var element = this.messageTemplateTarget.cloneNode(true);
+        element.id = "hellotext--webchat--".concat(this.idValue, "--message--").concat(Date.now());
         element.classList.add('received');
         element.style.removeProperty('display');
         element.setAttribute('data-hellotext--webchat-target', 'message');
@@ -271,6 +302,10 @@ var _default = /*#__PURE__*/function (_Controller) {
         element.scrollIntoView({
           behavior: 'smooth'
         });
+        this.broadcastChannel.postMessage({
+          type: 'message:sent',
+          element: element.outerHTML
+        });
         this.inputTarget.value = '';
         this.files = [];
         this.attachmentContainerTarget.style.display = 'none';
@@ -278,6 +313,10 @@ var _default = /*#__PURE__*/function (_Controller) {
         this.inputTarget.focus();
         var response = yield this.messagesAPI.create(formData);
         if (response.failed) {
+          this.broadcastChannel.postMessage({
+            type: 'message:failed',
+            id: element.id
+          });
           return element.classList.add('failed');
         }
         var data = yield response.json();

package/lib/core/configuration/webchat.cjs

@@ -24,6 +24,20 @@ const placements = {
   BOTTOM_RIGHT: 'bottom-right'
 };
 
+/**
+ * @typedef {'absolute' | 'fixed'} Strategy
+ * @description Valid strategies for the webchat.
+ */
+
+/**
+ * @enum {Strategy}
+ */
+
+const strategies = {
+  ABSOLUTE: 'absolute',
+  FIXED: 'fixed'
+};
+
 /**
  * @typedef {'modal' | 'popover'} Behaviour
  */
@@ -54,6 +68,7 @@ const behaviors = {
  * @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.
+ * @property {Strategy} strategy - the strategy used to position the webchat. Defaults to 'absolute'
  */
 exports.behaviors = behaviors;
 let Webchat = /*#__PURE__*/function () {
@@ -155,6 +170,20 @@ let Webchat = /*#__PURE__*/function () {
       }
       this._behaviour = value;
     }
+  }, {
+    key: "strategy",
+    get: function () {
+      if (this._strategy) {
+        return this._strategy;
+      }
+      return this.container == 'body' ? strategies.FIXED : strategies.ABSOLUTE;
+    },
+    set: function (value) {
+      if (value && !Object.values(strategies).includes(value)) {
+        throw new Error(`Invalid strategy value: ${value}`);
+      }
+      this._strategy = value;
+    }
   }, {
     key: "assign",
     value: function assign(props) {
@@ -180,4 +209,5 @@ Webchat._placement = 'bottom-right';
 Webchat._classes = [];
 Webchat._triggerClasses = [];
 Webchat._style = {};
-Webchat._behaviour = behaviors.POPOVER;
+Webchat._behaviour = behaviors.POPOVER;
+Webchat._strategy = null;

package/lib/core/configuration/webchat.js

@@ -18,6 +18,20 @@ var placements = {
   BOTTOM_RIGHT: 'bottom-right'
 };
 
+/**
+ * @typedef {'absolute' | 'fixed'} Strategy
+ * @description Valid strategies for the webchat.
+ */
+
+/**
+ * @enum {Strategy}
+ */
+
+var strategies = {
+  ABSOLUTE: 'absolute',
+  FIXED: 'fixed'
+};
+
 /**
  * @typedef {'modal' | 'popover'} Behaviour
  */
@@ -48,6 +62,7 @@ var behaviors = {
  * @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.
+ * @property {Strategy} strategy - the strategy used to position the webchat. Defaults to 'absolute'
  */
 var Webchat = /*#__PURE__*/function () {
   function Webchat() {
@@ -149,6 +164,20 @@ var Webchat = /*#__PURE__*/function () {
       }
       this._behaviour = value;
     }
+  }, {
+    key: "strategy",
+    get: function get() {
+      if (this._strategy) {
+        return this._strategy;
+      }
+      return this.container == 'body' ? strategies.FIXED : strategies.ABSOLUTE;
+    },
+    set: function set(value) {
+      if (value && !Object.values(strategies).includes(value)) {
+        throw new Error("Invalid strategy value: ".concat(value));
+      }
+      this._strategy = value;
+    }
   }, {
     key: "assign",
     value: function assign(props) {
@@ -175,4 +204,5 @@ Webchat._classes = [];
 Webchat._triggerClasses = [];
 Webchat._style = {};
 Webchat._behaviour = behaviors.POPOVER;
-export { Webchat, behaviors };
+Webchat._strategy = null;
+export { behaviors, Webchat };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.0.9",
+  "version": "2.1.1",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",

package/src/controllers/mixins/usePopover.js

@@ -1,7 +1,7 @@
 import { autoUpdate, computePosition } from '@floating-ui/dom'
-import Hellotext from "../../hellotext";
+import { Configuration } from '../../core'
 
-export const usePopover = (controller) => {
+export const usePopover = controller => {
   Object.assign(controller, {
     show() {
       this.openValue = true
@@ -17,34 +17,36 @@ export const usePopover = (controller) => {
         computePosition(trigger, popover, {
           placement: this.placementValue,
           middleware: this.middlewares,
-        }).then(({x, y}) => {
+          strategy: Configuration.webchat.strategy,
+        }).then(({ x, y, strategy }) => {
           const newStyle = {
             left: `${x}px`,
-            top: `${y}px`
+            top: `${y}px`,
+            position: strategy,
           }
 
           Object.assign(popover.style, newStyle)
-        });
+        })
       })
     },
     openValueChanged() {
-      if(this.disabledValue) return
+      if (this.disabledValue) return
 
-      if(this.openValue) {
+      if (this.openValue) {
         this.popoverTarget.showPopover()
-        this.popoverTarget.setAttribute("aria-expanded", "true")
+        this.popoverTarget.setAttribute('aria-expanded', 'true')
 
-        if(this['onPopoverOpened']) {
+        if (this['onPopoverOpened']) {
           this.onPopoverOpened()
         }
       } else {
         this.popoverTarget.hidePopover()
-        this.popoverTarget.removeAttribute("aria-expanded")
+        this.popoverTarget.removeAttribute('aria-expanded')
 
-        if(this['onPopoverClosed']) {
+        if (this['onPopoverClosed']) {
           this.onPopoverClosed()
         }
       }
-    }
+    },
   })
 }

package/src/controllers/webchat_controller.js

@@ -62,6 +62,9 @@ export default class extends Controller {
 
     this.onScroll = this.onScroll.bind(this)
 
+    this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this)
+    this.broadcastChannel = new BroadcastChannel(`hellotext--webchat--${this.idValue}`)
+
     super.initialize()
   }
 
@@ -90,16 +93,44 @@ export default class extends Controller {
     }
 
     Hellotext.eventEmitter.dispatch('webchat:mounted')
+    this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent)
+
     super.connect()
   }
 
   disconnect() {
+    this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent)
     this.messagesContainerTarget.removeEventListener('scroll', this.onScroll)
+
+    this.broadcastChannel.close()
     this.floatingUICleanup()
 
     super.disconnect()
   }
 
+  onOutboundMessageSent(event) {
+    const { data } = event
+
+    const callbacks = {
+      'message:sent': data => {
+        const element = new DOMParser().parseFromString(data.element, 'text/html').body
+          .firstElementChild
+
+        this.messagesContainerTarget.appendChild(element)
+        element.scrollIntoView({ behavior: 'instant' })
+      },
+      'message:failed': data => {
+        this.messagesContainerTarget.querySelector(`#${data.id}`)?.classList.add('failed')
+      },
+    }
+
+    if (callbacks[data.type]) {
+      callbacks[data.type](data)
+    } else {
+      console.log(`Unhandled message event: ${data.type}`)
+    }
+  }
+
   async onScroll() {
     if (
       this.messagesContainerTarget.scrollTop > 300 ||
@@ -307,6 +338,8 @@ export default class extends Controller {
 
     const element = this.messageTemplateTarget.cloneNode(true)
 
+    element.id = `hellotext--webchat--${this.idValue}--message--${Date.now()}`
+
     element.classList.add('received')
     element.style.removeProperty('display')
 
@@ -324,6 +357,11 @@ export default class extends Controller {
     this.messagesContainerTarget.appendChild(element)
     element.scrollIntoView({ behavior: 'smooth' })
 
+    this.broadcastChannel.postMessage({
+      type: 'message:sent',
+      element: element.outerHTML,
+    })
+
     this.inputTarget.value = ''
     this.files = []
     this.attachmentContainerTarget.style.display = 'none'
@@ -334,6 +372,11 @@ export default class extends Controller {
     const response = await this.messagesAPI.create(formData)
 
     if (response.failed) {
+      this.broadcastChannel.postMessage({
+        type: 'message:failed',
+        id: element.id,
+      })
+
       return element.classList.add('failed')
     }