@hellotext/hellotext 2.1.0 → 2.1.2

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() {
@@ -139,9 +169,11 @@ let _default = /*#__PURE__*/function (_Controller) {
     value: function onPopoverOpened() {
       this.inputTarget.focus();
       if (!this.scrolled) {
-        this.messagesContainerTarget.scroll({
-          top: this.messagesContainerTarget.scrollHeight,
-          behavior: 'instant'
+        requestAnimationFrame(() => {
+          this.messagesContainerTarget.scroll({
+            top: this.messagesContainerTarget.scrollHeight,
+            behavior: 'instant'
+          });
         });
         this.scrolled = true;
       }
@@ -247,16 +279,28 @@ let _default = /*#__PURE__*/function (_Controller) {
         body: this.inputTarget.value,
         attachments: this.files
       };
-      formData.append('message[body]', this.inputTarget.value);
+      if (this.inputTarget.value.trim().length === 0 && this.files.length === 0) {
+        return;
+      }
+      if (this.inputTarget.value.trim().length > 0) {
+        formData.append('message[body]', this.inputTarget.value);
+      } else {
+        delete message.body;
+      }
       this.files.forEach(file => {
         formData.append('message[attachments][]', file);
       });
       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');
-      element.querySelector('[data-body]').innerText = this.inputTarget.value;
+      if (this.inputTarget.value.trim().length > 0) {
+        element.querySelector('[data-body]').innerText = this.inputTarget.value;
+      } else {
+        element.querySelector('[data-message-bubble]').remove();
+      }
       const attachments = this.attachmentContainerTarget.querySelectorAll('img');
       if (attachments.length > 0) {
         attachments.forEach(attachment => {
@@ -267,13 +311,23 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
+      this.broadcastChannel.postMessage({
+        type: 'message:sent',
+        element: element.outerHTML
+      });
       this.inputTarget.value = '';
       this.files = [];
+      this.attachmentInputTarget.value = '';
+      this.attachmentContainerTarget.innerHTML = '';
       this.attachmentContainerTarget.style.display = 'none';
       this.errorMessageContainerTarget.style.display = 'none';
       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();
@@ -295,8 +349,9 @@ let _default = /*#__PURE__*/function (_Controller) {
     key: "onFileInputChange",
     value: function onFileInputChange() {
       this.errorMessageContainerTarget.style.display = 'none';
-      this.files = Array.from(this.attachmentInputTarget.files);
-      const fileMaxSizeTooMuch = this.files.find(file => {
+      const newFiles = Array.from(this.attachmentInputTarget.files);
+      this.attachmentInputTarget.value = '';
+      const fileMaxSizeTooMuch = newFiles.find(file => {
         const type = file.type.split('/')[0];
         if (['image', 'video', 'audio'].includes(type)) {
           return this.mediaValue[type].max_size < file.size;
@@ -308,10 +363,11 @@ let _default = /*#__PURE__*/function (_Controller) {
         const type = fileMaxSizeTooMuch.type.split('/')[0];
         const mediaType = ['image', 'audio', 'video'].includes(type) ? type : 'document';
         this.errorMessageContainerTarget.innerText = this.fileSizeErrorMessageValue.replace('%{limit}', this.byteToMegabyte(this.mediaValue[mediaType].max_size));
-        return;
+        return this.errorMessageContainerTarget.style.display = 'block';
       }
+      this.files = [...this.files, ...newFiles];
       this.errorMessageContainerTarget.innerText = '';
-      this.files.forEach(file => this.createAttachmentElement(file));
+      newFiles.forEach(file => this.createAttachmentElement(file));
       this.inputTarget.focus();
     }
   }, {
@@ -334,6 +390,8 @@ let _default = /*#__PURE__*/function (_Controller) {
         main.style.backgroundColor = '#e5e7eb';
         main.style.padding = '0.25rem';
         element.querySelector('p[data-attachment-name]').innerText = file.name;
+        this.attachmentContainerTarget.appendChild(element);
+        this.attachmentContainerTarget.style.display = 'flex';
       }
     }
   }, {
@@ -343,6 +401,7 @@ let _default = /*#__PURE__*/function (_Controller) {
     }) {
       const attachment = currentTarget.closest("[data-hellotext--webchat-target='attachment']");
       this.files = this.files.filter(file => file.name !== attachment.dataset.name);
+      this.attachmentInputTarget.value = '';
       attachment.remove();
       this.inputTarget.focus();
     }

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 () {
@@ -143,9 +173,11 @@ var _default = /*#__PURE__*/function (_Controller) {
     value: function onPopoverOpened() {
       this.inputTarget.focus();
       if (!this.scrolled) {
-        this.messagesContainerTarget.scroll({
-          top: this.messagesContainerTarget.scrollHeight,
-          behavior: 'instant'
+        requestAnimationFrame(() => {
+          this.messagesContainerTarget.scroll({
+            top: this.messagesContainerTarget.scrollHeight,
+            behavior: 'instant'
+          });
         });
         this.scrolled = true;
       }
@@ -251,16 +283,28 @@ var _default = /*#__PURE__*/function (_Controller) {
           body: this.inputTarget.value,
           attachments: this.files
         };
-        formData.append('message[body]', this.inputTarget.value);
+        if (this.inputTarget.value.trim().length === 0 && this.files.length === 0) {
+          return;
+        }
+        if (this.inputTarget.value.trim().length > 0) {
+          formData.append('message[body]', this.inputTarget.value);
+        } else {
+          delete message.body;
+        }
         this.files.forEach(file => {
           formData.append('message[attachments][]', file);
         });
         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');
-        element.querySelector('[data-body]').innerText = this.inputTarget.value;
+        if (this.inputTarget.value.trim().length > 0) {
+          element.querySelector('[data-body]').innerText = this.inputTarget.value;
+        } else {
+          element.querySelector('[data-message-bubble]').remove();
+        }
         var attachments = this.attachmentContainerTarget.querySelectorAll('img');
         if (attachments.length > 0) {
           attachments.forEach(attachment => {
@@ -271,13 +315,23 @@ var _default = /*#__PURE__*/function (_Controller) {
         element.scrollIntoView({
           behavior: 'smooth'
         });
+        this.broadcastChannel.postMessage({
+          type: 'message:sent',
+          element: element.outerHTML
+        });
         this.inputTarget.value = '';
         this.files = [];
+        this.attachmentInputTarget.value = '';
+        this.attachmentContainerTarget.innerHTML = '';
         this.attachmentContainerTarget.style.display = 'none';
         this.errorMessageContainerTarget.style.display = 'none';
         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();
@@ -304,8 +358,9 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "onFileInputChange",
     value: function onFileInputChange() {
       this.errorMessageContainerTarget.style.display = 'none';
-      this.files = Array.from(this.attachmentInputTarget.files);
-      var fileMaxSizeTooMuch = this.files.find(file => {
+      var newFiles = Array.from(this.attachmentInputTarget.files);
+      this.attachmentInputTarget.value = '';
+      var fileMaxSizeTooMuch = newFiles.find(file => {
         var type = file.type.split('/')[0];
         if (['image', 'video', 'audio'].includes(type)) {
           return this.mediaValue[type].max_size < file.size;
@@ -317,10 +372,11 @@ var _default = /*#__PURE__*/function (_Controller) {
         var type = fileMaxSizeTooMuch.type.split('/')[0];
         var mediaType = ['image', 'audio', 'video'].includes(type) ? type : 'document';
         this.errorMessageContainerTarget.innerText = this.fileSizeErrorMessageValue.replace('%{limit}', this.byteToMegabyte(this.mediaValue[mediaType].max_size));
-        return;
+        return this.errorMessageContainerTarget.style.display = 'block';
       }
+      this.files = [...this.files, ...newFiles];
       this.errorMessageContainerTarget.innerText = '';
-      this.files.forEach(file => this.createAttachmentElement(file));
+      newFiles.forEach(file => this.createAttachmentElement(file));
       this.inputTarget.focus();
     }
   }, {
@@ -343,6 +399,8 @@ var _default = /*#__PURE__*/function (_Controller) {
         main.style.backgroundColor = '#e5e7eb';
         main.style.padding = '0.25rem';
         element.querySelector('p[data-attachment-name]').innerText = file.name;
+        this.attachmentContainerTarget.appendChild(element);
+        this.attachmentContainerTarget.style.display = 'flex';
       }
     }
   }, {
@@ -353,6 +411,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       } = _ref;
       var attachment = currentTarget.closest("[data-hellotext--webchat-target='attachment']");
       this.files = this.files.filter(file => file.name !== attachment.dataset.name);
+      this.attachmentInputTarget.value = '';
       attachment.remove();
       this.inputTarget.focus();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "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 ||
@@ -178,9 +209,11 @@ export default class extends Controller {
     this.inputTarget.focus()
 
     if (!this.scrolled) {
-      this.messagesContainerTarget.scroll({
-        top: this.messagesContainerTarget.scrollHeight,
-        behavior: 'instant',
+      requestAnimationFrame(() => {
+        this.messagesContainerTarget.scroll({
+          top: this.messagesContainerTarget.scrollHeight,
+          behavior: 'instant',
+        })
       })
 
       this.scrolled = true
@@ -297,7 +330,15 @@ export default class extends Controller {
       attachments: this.files,
     }
 
-    formData.append('message[body]', this.inputTarget.value)
+    if (this.inputTarget.value.trim().length === 0 && this.files.length === 0) {
+      return
+    }
+
+    if (this.inputTarget.value.trim().length > 0) {
+      formData.append('message[body]', this.inputTarget.value)
+    } else {
+      delete message.body
+    }
 
     this.files.forEach(file => {
       formData.append('message[attachments][]', file)
@@ -307,11 +348,18 @@ 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')
 
     element.setAttribute('data-hellotext--webchat-target', 'message')
-    element.querySelector('[data-body]').innerText = this.inputTarget.value
+
+    if (this.inputTarget.value.trim().length > 0) {
+      element.querySelector('[data-body]').innerText = this.inputTarget.value
+    } else {
+      element.querySelector('[data-message-bubble]').remove()
+    }
 
     const attachments = this.attachmentContainerTarget.querySelectorAll('img')
 
@@ -324,8 +372,17 @@ 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.attachmentInputTarget.value = ''
+    this.attachmentContainerTarget.innerHTML = ''
+
     this.attachmentContainerTarget.style.display = 'none'
     this.errorMessageContainerTarget.style.display = 'none'
 
@@ -334,6 +391,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')
     }
 
@@ -358,9 +420,10 @@ export default class extends Controller {
   onFileInputChange() {
     this.errorMessageContainerTarget.style.display = 'none'
 
-    this.files = Array.from(this.attachmentInputTarget.files)
+    const newFiles = Array.from(this.attachmentInputTarget.files)
+    this.attachmentInputTarget.value = ''
 
-    const fileMaxSizeTooMuch = this.files.find(file => {
+    const fileMaxSizeTooMuch = newFiles.find(file => {
       const type = file.type.split('/')[0]
 
       if (['image', 'video', 'audio'].includes(type)) {
@@ -378,11 +441,14 @@ export default class extends Controller {
         '%{limit}',
         this.byteToMegabyte(this.mediaValue[mediaType].max_size),
       )
-      return
+
+      return (this.errorMessageContainerTarget.style.display = 'block')
     }
 
+    this.files = [...this.files, ...newFiles]
     this.errorMessageContainerTarget.innerText = ''
-    this.files.forEach(file => this.createAttachmentElement(file))
+
+    newFiles.forEach(file => this.createAttachmentElement(file))
     this.inputTarget.focus()
   }
 
@@ -405,12 +471,16 @@ export default class extends Controller {
       this.attachmentContainerTarget.style.display = 'flex'
     } else {
       const main = element.querySelector('main')
+
       main.style.height = '5rem'
       main.style.borderRadius = '0.375rem'
       main.style.backgroundColor = '#e5e7eb'
       main.style.padding = '0.25rem'
 
       element.querySelector('p[data-attachment-name]').innerText = file.name
+
+      this.attachmentContainerTarget.appendChild(element)
+      this.attachmentContainerTarget.style.display = 'flex'
     }
   }
 
@@ -418,6 +488,7 @@ export default class extends Controller {
     const attachment = currentTarget.closest("[data-hellotext--webchat-target='attachment']")
 
     this.files = this.files.filter(file => file.name !== attachment.dataset.name)
+    this.attachmentInputTarget.value = ''
 
     attachment.remove()
     this.inputTarget.focus()