@hellotext/hellotext 2.1.1 → 2.1.2

package/lib/controllers/webchat_controller.cjs

@@ -169,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;
       }
@@ -277,7 +279,14 @@ 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);
       });
@@ -287,7 +296,11 @@ let _default = /*#__PURE__*/function (_Controller) {
       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 => {
@@ -304,6 +317,8 @@ let _default = /*#__PURE__*/function (_Controller) {
       });
       this.inputTarget.value = '';
       this.files = [];
+      this.attachmentInputTarget.value = '';
+      this.attachmentContainerTarget.innerHTML = '';
       this.attachmentContainerTarget.style.display = 'none';
       this.errorMessageContainerTarget.style.display = 'none';
       this.inputTarget.focus();
@@ -334,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;
@@ -347,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();
     }
   }, {
@@ -373,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';
       }
     }
   }, {
@@ -382,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

@@ -173,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;
       }
@@ -281,7 +283,14 @@ 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);
         });
@@ -291,7 +300,11 @@ var _default = /*#__PURE__*/function (_Controller) {
         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 => {
@@ -308,6 +321,8 @@ var _default = /*#__PURE__*/function (_Controller) {
         });
         this.inputTarget.value = '';
         this.files = [];
+        this.attachmentInputTarget.value = '';
+        this.attachmentContainerTarget.innerHTML = '';
         this.attachmentContainerTarget.style.display = 'none';
         this.errorMessageContainerTarget.style.display = 'none';
         this.inputTarget.focus();
@@ -343,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;
@@ -356,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();
     }
   }, {
@@ -382,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';
       }
     }
   }, {
@@ -392,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.1",
+  "version": "2.1.2",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",

package/src/controllers/webchat_controller.js

@@ -209,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
@@ -328,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)
@@ -344,7 +354,12 @@ export default class extends Controller {
     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')
 
@@ -364,6 +379,10 @@ export default class extends Controller {
 
     this.inputTarget.value = ''
     this.files = []
+
+    this.attachmentInputTarget.value = ''
+    this.attachmentContainerTarget.innerHTML = ''
+
     this.attachmentContainerTarget.style.display = 'none'
     this.errorMessageContainerTarget.style.display = 'none'
 
@@ -401,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)) {
@@ -421,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()
   }
 
@@ -448,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'
     }
   }
 
@@ -461,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()