@hellotext/hellotext 2.1.0 → 2.1.1

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/package.json

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

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