@subiz/widget-v4 4.1.216 → 4.1.217

package/assets/less/message.less

@@ -303,6 +303,89 @@ a.message_error {
 	border: 1px solid @gray-200;
 }
 
+.image-attachment__preview {
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+	margin-top: 5px;
+	border-radius: 7px;
+	overflow: hidden;
+	max-width: 100%;
+
+	.image-attachment__img {
+		display: block;
+		margin: 0;
+	}
+}
+
+.image-attachment__sending {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: wait;
+	background: rgba(0, 0, 0, 0.28);
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: @primary-color;
+		opacity: 0.3;
+	}
+}
+
+.image-attachment__progress {
+	position: relative;
+	width: 96px;
+	max-width: 80%;
+	color: #fff;
+	text-align: center;
+}
+
+.image-attachment__progress-label {
+	display: block;
+	font-size: 13px;
+	font-weight: 600;
+	margin-bottom: 6px;
+	font-variant-numeric: tabular-nums;
+}
+
+.image-attachment__progress-track {
+	display: block;
+	height: 4px;
+	border-radius: 4px;
+	overflow: hidden;
+	background: rgba(255, 255, 255, 0.35);
+}
+
+.image-attachment__progress-fill {
+	display: block;
+	height: 100%;
+	border-radius: inherit;
+	background: #fff;
+}
+
+.file-attachment--sending {
+	cursor: wait;
+
+	.file-attachment--filename { text-decoration: none; }
+}
+
+.file-attachment__progress {
+	display: block;
+	width: 100%;
+	min-width: 120px;
+	max-width: 100%;
+	margin-top: 8px;
+	color: @primary-color;
+	text-align: right;
+
+	.image-attachment__progress-track { background: rgba(0, 0, 0, 0.1); }
+	.image-attachment__progress-fill { background: @primary-color; }
+}
+
 .audio-attachment {
 	width: 100%;
 	margin: 5px 0 0 0;

package/compiled_src/chatbox/AudioAttachments.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AudioAttachments;
+var _UploadProgress = require("./UploadProgress.js");
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _preact = require("preact");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -17,6 +18,10 @@ function AudioAttachments(props) {
   });
   if (audios.length === 0) return null;
   var $audios = _index.default.map(audios, (audio, index) => {
+    if (props.sending) return (0, _preact.h)(_UploadProgress.UploadingFile, {
+      key: index,
+      attachment: audio
+    });
     return (0, _preact.h)("div", {
       key: index,
       class: `audio-attachment audio-attachment--${byType}`

package/compiled_src/chatbox/Event.js

@@ -379,6 +379,9 @@ class Event extends _common.Com {
         class: "sending_dot sending_dot__hide"
       });
     }
+    const hasFile = _index.default.find(attachments, att => att.type === 'file' || att._file);
+    const sendingAttachment = !ev._error && ev.source_event_id === ev.id;
+    if (hasFile) $dot = null;
     let $sender = null;
     if (this.props.event.mode === 'lead' && _index.default.get(ev, 'by.type') !== 'user') $sender = (0, _preact.h)("div", {
       class: "pt-3"
@@ -413,16 +416,20 @@ class Event extends _common.Com {
     }), (0, _preact.h)(_ImageAttachments.default, {
       store: this.props.store,
       ev: ev,
+      sending: sendingAttachment,
       ref: this.imageAttachmentRef
     }), (0, _preact.h)(_AudioAttachments.default, {
       store: this.props.store,
-      ev: ev
+      ev: ev,
+      sending: sendingAttachment
     }), (0, _preact.h)(_VideoAttachments.default, {
       store: this.props.store,
-      ev: ev
+      ev: ev,
+      sending: sendingAttachment
     }), (0, _preact.h)(_FileAttachments.default, {
       store: this.props.store,
       ev: ev,
+      sending: sendingAttachment,
       ref: this.fileAttachmentRef
     }), (0, _preact.h)(_ButtonAttachments.default, {
       store: this.props.store,

package/compiled_src/chatbox/FileAttachments.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _UploadProgress = _interopRequireDefault(require("./UploadProgress.js"));
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
@@ -33,19 +34,24 @@ class FileAttachments extends _common.Com {
     if (files.length === 0) return null;
     let $files = _index.default.map(files, (file, index) => {
       let cls = `file-attachment file-attachment--${byType}`;
+      if (this.props.sending) cls += ' file-attachment--sending';
       if (file._true_idx === this.state.focusedIdx) cls += ` just-focused`;
       return (0, _preact.h)("div", {
         key: index,
-        class: cls
+        class: cls,
+        "aria-busy": !!this.props.sending
       }, (0, _preact.h)("a", {
         class: "file-attachment--link",
-        href: this.props.store.replaceFileUrl(file.url),
+        href: this.props.sending ? undefined : this.props.store.replaceFileUrl(file.url),
         target: "_blank"
       }, (0, _preact.h)("span", {
         class: "file-attachment--download mr-2"
       }), (0, _preact.h)("span", {
         class: "file-attachment--filename"
-      }, file.name)));
+      }, file.name)), this.props.sending && (0, _preact.h)(_UploadProgress.default, {
+        attachment: file,
+        compact: true
+      }));
     });
     return (0, _preact.h)("div", {
       class: `message-${byType}`

package/compiled_src/chatbox/ImageAttachments.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _UploadProgress = _interopRequireDefault(require("./UploadProgress.js"));
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
@@ -95,18 +96,25 @@ class ImageAttachment extends _common.Com {
     if (byType !== 'user') byType = 'agent';
     let cls = `image-attachment image-attachment--${byType}`;
     if (image._true_idx === this.state.focusedIdx) cls += ' just-focused';
+    const $sending = this.props.sending ? (0, _preact.h)("span", {
+      class: "image-attachment__sending"
+    }, (0, _preact.h)(_UploadProgress.default, {
+      attachment: image
+    })) : null;
     if (!image.width || !image.height) {
       return (0, _preact.h)("div", {
         class: cls
       }, (0, _preact.h)("a", {
-        href: this.props.store.replaceFileUrl(image.url),
-        target: "_blank"
+        class: "image-attachment__preview",
+        href: this.props.sending ? undefined : this.props.store.replaceFileUrl(image.url),
+        target: "_blank",
+        "aria-busy": !!this.props.sending
       }, (0, _preact.h)("img", {
         alt: true,
         class: "image-attachment__img",
         src: this.props.store.replaceFileUrl(image.thumbnail_url || image.url),
         onload: e => this.props.onLoad && this.props.onLoad()
-      })));
+      }), $sending));
     }
     let {
       width,
@@ -121,8 +129,10 @@ class ImageAttachment extends _common.Com {
     return (0, _preact.h)("div", {
       class: cls
     }, (0, _preact.h)("a", {
-      href: trueUrl,
-      target: "_blank"
+      class: "image-attachment__preview",
+      href: this.props.sending ? undefined : trueUrl,
+      target: "_blank",
+      "aria-busy": !!this.props.sending
     }, (0, _preact.h)("img", {
       alt: true,
       ref: el => {
@@ -135,7 +145,7 @@ class ImageAttachment extends _common.Com {
       src: url,
       onload: e => this.props.onLoad && this.props.onLoad(),
       onerror: e => this.onErrorImage(index)
-    })));
+    }), $sending));
   }
   render() {
     var attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);

package/compiled_src/chatbox/UploadProgress.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UploadingFile = UploadingFile;
+exports.default = UploadProgress;
+var _preact = require("preact");
+function UploadProgress({
+  attachment,
+  compact = false
+}) {
+  const progress = attachment._upload?.putDone || attachment._upload?.file ? 100 : attachment._upload?.progress ?? 0;
+  return (0, _preact.h)("span", {
+    class: 'image-attachment__progress' + (compact ? ' file-attachment__progress' : '')
+  }, (0, _preact.h)("span", {
+    class: "image-attachment__progress-label"
+  }, progress, "%"), (0, _preact.h)("span", {
+    class: "image-attachment__progress-track",
+    role: "progressbar",
+    "aria-label": attachment.name || 'Uploading file',
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": progress
+  }, (0, _preact.h)("span", {
+    class: "image-attachment__progress-fill",
+    ref: el => {
+      if (el) el.style.setProperty('width', `${progress}%`, 'important');
+    }
+  })));
+}
+function UploadingFile({
+  attachment
+}) {
+  return (0, _preact.h)("div", {
+    class: "file-attachment file-attachment--user file-attachment--sending",
+    "aria-busy": "true"
+  }, (0, _preact.h)("span", {
+    class: "file-attachment--filename"
+  }, attachment.name), (0, _preact.h)(UploadProgress, {
+    attachment: attachment,
+    compact: true
+  }));
+}

package/compiled_src/chatbox/VideoAttachments.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _UploadProgress = require("./UploadProgress.js");
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
@@ -22,6 +23,10 @@ class VideoAttachments extends _common.Com {
     });
     if (videos.length === 0) return null;
     var $videos = _index.default.map(videos, (video, index) => {
+      if (this.props.sending) return (0, _preact.h)(_UploadProgress.UploadingFile, {
+        key: index,
+        attachment: video
+      });
       return (0, _preact.h)("div", {
         key: index,
         class: `video-attachment video-attachment--${byType}`

package/compiled_src/store/api.js

@@ -84,89 +84,88 @@ class _default {
     }));
     _defineProperty(this, "sendTyping", cid => this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/typing`));
     _defineProperty(this, "sendLostFocus", () => this.apireq.post(`/accounts/${this.accid}/focuses/${this.uid}/delete`));
-    _defineProperty(this, "uploadToS3", async file => {
-      let name = file.name.replace(/\s+/g, '_');
-      var {
-        body,
-        error
-      } = await this.apireq.setBaseUrl('https://api5.subiz.com.vn/4.1').setQuery({
-        'account-id': this.accid,
-        description: 'upload\n user-client: web-widget',
-        name: name,
-        presign: true,
-        size: file.size,
-        'content-type': file.type
-      }).post('/files');
-      if (error) return {
-        body,
-        error
-      };
-      let signedurl = body.signed_url;
-      let fileid = body.id;
-      let err = await new Promise(resolve => {
-        const xhr = new _index.default.XMLHttpRequest();
-        xhr.open('PUT', signedurl, true);
-        xhr.setRequestHeader('Content-Type', file.type || '');
-        xhr.onload = function () {
-          if (xhr.status === 200) {
-            resolve();
-          } else {
-            resolve(new Error(`Upload failed: ${xhr.statusText}`));
-          }
-        };
-        xhr.onerror = function () {
-          resolve(new Error('Network error during upload.'));
-        };
-        xhr.send(file);
-      });
-      if (err) return {
-        error: err
-      };
-      var {
-        body,
-        error
-      } = await this.apireq.setBaseUrl('https://api5.subiz.com.vn/4.1').setQuery({
-        'account-id': this.accid
-      }).post(`/files/${fileid}/uploaded`);
-      if (error) return {
-        error
+    _defineProperty(this, "attachmentRequest", () => this.apireq.setBaseUrl(new URL('/4.1', this.ApiURL).href).addQuery('x-account-id', this.accid));
+    _defineProperty(this, "attachmentJSON", async (path, body, method = 'post') => {
+      const result = await this.attachmentRequest()[method](path, body);
+      if (result.error || result.body?.error || result.code < 200 || result.code >= 300) {
+        throw Object.assign(new Error('Attachment request failed'), {
+          code: result.body?.error?.code,
+          response: result
+        });
+      }
+      return result.body;
+    });
+    _defineProperty(this, "uploadAttachment", async (file, state = {}, onProgress = () => {}) => {
+      if (file.size > 25000000) return {
+        error: 'invalid_field_size',
+        body: {
+          code: 'invalid_field_size'
+        }
       };
-      return {
-        url: _index.default.get(body, 'file.url', '')
+      const identity = JSON.stringify([this.accid, this.uid, this.ref, this.mask, this.profile_id, this.tokensession]);
+      if (state.identity && state.identity !== identity) throw new Error('Upload identity changed');
+      state.identity = identity;
+      const checkIdentity = () => {
+        if (identity !== JSON.stringify([this.accid, this.uid, this.ref, this.mask, this.profile_id, this.tokensession])) throw new Error('Upload identity changed');
       };
-    });
-    _defineProperty(this, "uploadToS32", async file => {
-      var {
-        body,
-        error
-      } = await ajax.setBaseUrl('https://api5.subiz.com.vn/4.1').withCredentials(true).setQuery({
-        'account-id': this.accid,
-        description: 'upload\n user-client: web-widget',
-        name: file.name.replace(/\s+/g, '_'),
+      if (state.file) return state.file;
+      if (state.upload && !state.putDone && state.upload.upload_expires_at <= _index.default.Date.now()) {
+        delete state.upload;
+        delete state.key;
+      }
+      if (!state.key) state.key = _index.default.randomString(36);
+      if (!state.metadata) state.metadata = {
+        category: 'attachment',
+        name: file.name,
+        content_type: file.type || 'application/octet-stream',
         size: file.size,
-        type: file.type
-      }).setParser('json').beforeHook((param, done) => {
-        if (this.token_generator) {
-          let user_id = this.profile_id;
-          this.token_generator().then(token => {
-            if (user_id != this.profile_id) return done(true);
-            if (!token) return done(false);
-            if (token == 'error') return done(false);
-            param.request = param.request.addQuery('x-access-token', token);
-            return done(true);
-          });
-          return;
-        }
-        if (this.ref) param.request = param.request.addQuery('x-user-ref', this.ref);else if (this.mask) param.request = param.request.addQuery('x-user-mask', this.mask);
-        return done(true);
-      }).post('/files', file);
-      if (error) return {
-        body,
-        error
+        ttl_seconds: 0
       };
-      return {
-        url: _index.default.get(body, 'file.url')
+      if (!state.upload) {
+        const created = await this.attachmentJSON('/uploads', {
+          ...state.metadata,
+          idempotency_key: state.key
+        });
+        checkIdentity();
+        if (!created.upload?.upload_id || !created.upload.upload_url) throw new Error('Missing upload session');
+        state.upload = created.upload;
+      }
+      if (!state.putDone) {
+        checkIdentity();
+        const report = percent => {
+          if (state.progress === percent) return;
+          state.progress = percent;
+          onProgress(percent);
+        };
+        report(0);
+        await new Promise((resolve, reject) => {
+          const xhr = new _index.default.XMLHttpRequest();
+          xhr.upload.onprogress = event => {
+            if (event.lengthComputable) report(Math.min(100, Math.floor(event.loaded / event.total * 100)));
+          };
+          xhr.open('PUT', state.upload.upload_url, true);
+          xhr.withCredentials = false;
+          Object.entries(state.upload.required_headers || {}).forEach(([key, value]) => xhr.setRequestHeader(key, value));
+          xhr.onload = () => xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new Error(`Upload failed: HTTP ${xhr.status}`));
+          xhr.onerror = () => reject(new Error('Network error during upload'));
+          xhr.onabort = () => reject(new Error('Upload aborted'));
+          xhr.ontimeout = () => reject(new Error('Upload timed out'));
+          xhr.send(file);
+        });
+        report(100);
+        state.putDone = true;
+      }
+      checkIdentity();
+      const finished = await this.attachmentJSON(`/uploads/${encodeURIComponent(state.upload.upload_id)}/finish`);
+      checkIdentity();
+      const f = finished.file;
+      if (!f?.id || !f.url || f.error_code) throw new Error('File is not available');
+      state.file = {
+        url: f.url,
+        v: 'cdn',
+        file_id: f.id
       };
+      return state.file;
     });
     _defineProperty(this, "time", _ => ajax.setBaseUrl(this.ApiURL).withCredentials(true).setParser('json').get('/time'));
     _defineProperty(this, "updateUser", data => this.apireq.post(`/accounts/${this.accid}/users/${this.uid}`, data));

package/compiled_src/store/api_fake.js

@@ -55,7 +55,7 @@ class _default {
     _defineProperty(this, "sendContent", data => OK200);
     _defineProperty(this, "sendLostFocus", data => OK200);
     _defineProperty(this, "sendContentView", data => OK200);
-    _defineProperty(this, "uploadToS3", async file => OK200);
+    _defineProperty(this, "uploadAttachment", async file => OK200);
     _defineProperty(this, "time", _ => Promise.resolve({
       code: 200,
       body: new _index.default.Date().toISOString()

package/compiled_src/store/attachments.js

@@ -8,7 +8,7 @@ async function uploadAttachments(attachments, upload) {
   let error, errorMessage;
   for (const attachment of attachments) {
     try {
-      const result = await upload(attachment._file);
+      const result = await upload(attachment._file, attachment._upload || (attachment._upload = {}));
       if (result.body && result.body.code === 'invalid_field_size') {
         errorMessage = 'cannot_send_too_big_file';
       }
@@ -17,6 +17,10 @@ async function uploadAttachments(attachments, upload) {
         continue;
       }
       attachment.url = result.url;
+      if (result.file_id) {
+        attachment.v = 'cdn';
+        attachment.file_id = result.file_id;
+      }
     } catch (err) {
       error = error || err;
     }

package/compiled_src/store/store.js

@@ -1368,7 +1368,7 @@ class Store {
         if (att.type !== 'file') return;
         if (!att._file) return;
         files.push(att);
-        if (ImageTypes.includes(att._file.type)) {
+        if (!att._upload?.file && ImageTypes.includes(att._file.type)) {
           let {
             width,
             height,
@@ -1382,15 +1382,33 @@ class Store {
     }
     this.onWs(event);
     await this.convoGate.entry();
-    const uploaded = await (0, _attachments.uploadAttachments)(files, file => this.api.uploadToS3(file));
+    const uploaded = await (0, _attachments.uploadAttachments)(files, (file, state) => this.api.uploadAttachment(file, state, () => this.pubsub.publish('events', event)));
     event._error = uploaded.error;
     if (uploaded.errorMessage) event._error_message = uploaded.errorMessage;
     if (event._error) return this.onWs(event);
     if (cid && cid.startsWith('cslight')) return;
+    const outgoing = {
+      ...event,
+      data: {
+        ...event.data
+      }
+    };
+    if (event.data.message) outgoing.data.message = {
+      ...event.data.message,
+      attachments: event.data.message.attachments?.map(att => {
+        const {
+          _file,
+          _upload,
+          ...attachment
+        } = att;
+        return attachment;
+      })
+    };
     let {
       body: ret,
       error
-    } = await this.api.sendConvoEvent(cid, event);
+    } = await this.api.sendConvoEvent(cid, outgoing);
+    error = error || ret?.error;
     if (error) {
       event._error = error;
       this.onWs(event);