@subiz/widget-v4 4.1.210 → 4.1.212

package/compiled_src/chatbox/Event.js

@@ -56,10 +56,26 @@ class Event extends _common.Com {
     this.state = {
       pongs: _index.default.get(this.props.event, 'ev.data.message.pongs') || []
     };
+    const _ev = this.props.event.ev;
+    const age = (this.props.store.now ? this.props.store.now() : _index.default.Date.now()) - _ev.created;
+    this.animateSend = !props.isHistory && _ev.type === 'message_sent' && _index.default.get(_ev, 'by.type') === 'user' && _ev.id === _index.default.get(_ev, 'source_event_id') && age >= 0 && age < 2000;
     this.textMessageRef = (0, _preact.createRef)();
     this.fileAttachmentRef = (0, _preact.createRef)();
     this.imageAttachmentRef = (0, _preact.createRef)();
   }
+  componentDidMount() {
+    if (!this.animateSend) return;
+    this.sendAnimationFrame = window.requestAnimationFrame(() => {
+      this.sendAnimationFrame = window.requestAnimationFrame(() => {
+        if (this._isMounted) this.setState({
+          sendEntered: true
+        });
+      });
+    });
+  }
+  componentWillUnmount() {
+    if (this.sendAnimationFrame) window.cancelAnimationFrame(this.sendAnimationFrame);
+  }
   render() {
     var ev = _index.default.get(this.props.event, 'ev', {});
     switch (ev.type) {
@@ -104,6 +120,7 @@ class Event extends _common.Com {
     return !!_index.default.find(pongs, pong => pong.type === 'dislike');
   }
   chooseQuickReply(reply) {
+    if (this.props.isHistory) return;
     let ev = _index.default.get(this.props.event, 'ev', {});
     let message = {
       text: reply.title,
@@ -121,6 +138,7 @@ class Event extends _common.Com {
     this.props.onSend(message);
   }
   choosePostbackBtn(button) {
+    if (this.props.isHistory) return;
     let ev = _index.default.get(this.props.event, 'ev', {});
     let message = {
       text: button.title,
@@ -261,6 +279,17 @@ class Event extends _common.Com {
   }
   renderMessageSent() {
     let ev = this.props.event.ev;
+    if (_index.default.get(ev, 'data.message.deleted')) {
+      let byType = _index.default.get(ev, 'by.type') === 'user' ? 'user' : 'agent';
+      return (0, _preact.h)("div", {
+        class: 'convo-event ' + byType + '-message',
+        "data-ev-id": ev.id
+      }, (0, _preact.h)(_TextMessage.default, {
+        ev: ev,
+        t: this.props.t,
+        store: this.props.store
+      }));
+    }
     let attachments = _index.default.get(ev, 'data.message.attachments');
     let hasForm = _index.default.find(attachments, att => att.type === 'form');
     if (_index.default.isEmptyMessage(_index.default.get(ev, 'data.message'))) return null;
@@ -331,13 +360,13 @@ class Event extends _common.Com {
         t: this.props.t,
         store: this.props.store,
         ev: ev
-      }), (0, _preact.h)(_QuickReplies.default, {
+      }), !this.props.isHistory && (0, _preact.h)(_QuickReplies.default, {
         store: this.props.store,
         ev: ev,
         onSelect: e => this.chooseQuickReply(e)
       }), this.renderReactions(), this.renderAIDevNote())));
     }
-    if (_index.default.get(ev, 'data.message.idempotency_key') === ev.id && this.props.store.now() - ev.created < 900) {
+    if (_index.default.get(ev, 'source_event_id') === ev.id && this.props.store.now() - ev.created < 900) {
       _index.default.setTimeout(() => this.setState({
         refresh: this.state.refresh
       }), 1000);
@@ -345,7 +374,7 @@ class Event extends _common.Com {
     let $dot = (0, _preact.h)("div", {
       class: "sending_dot"
     });
-    if (this.props.store.now() - ev.created < 900 || _index.default.get(ev, 'data.message.idempotency_key') !== ev.id) {
+    if (this.props.store.now() - ev.created < 900 || _index.default.get(ev, 'source_event_id') !== ev.id) {
       $dot = (0, _preact.h)("div", {
         class: "sending_dot sending_dot__hide"
       });
@@ -373,10 +402,11 @@ class Event extends _common.Com {
       class: "convo-event user-message",
       "data-ev-id": ev.id
     }, $sender, (0, _preact.h)("div", {
-      class: "message-user__container"
+      class: 'message-user__container' + (this.animateSend && !this.props.isHistory ? ' message-user__container--send' + (this.state.sendEntered ? '' : ' message-user__container--enter') : '')
     }, $dot, (0, _preact.h)(_TextMessage.default, {
       ref: this.textMessageRef,
       store: this.props.store,
+      t: this.props.t,
       ev: ev,
       refresh: this.state.refresh,
       onLink: this.props.onLink
@@ -412,6 +442,7 @@ class Event extends _common.Com {
     })), $error);
   }
   async onSendReaction(action) {
+    if (this.props.isHistory) return;
     if (this._reacting) return;
     let ev = this.props.event.ev;
     let cid = _index.default.get(ev, 'data.message.conversation_id');
@@ -463,6 +494,7 @@ class Event extends _common.Com {
     this._reacting = false;
   }
   renderReactions() {
+    if (this.props.isHistory) return null;
     if (this.props.store.isAIDevMode()) return null;
     let cid = _index.default.get(this.props.event.ev, 'data.message.conversation_id', '');
     if (cid.startsWith('cslight')) return null;
@@ -550,7 +582,7 @@ class Event extends _common.Com {
     let byid = _index.default.get(ev, 'by.display_id', _index.default.get(ev, 'by.id')) || '';
     if (bytype === 'user') return _index.default.getUserDisplayName(this.props.store.matchUser());
     let acc = this.props.store.matchAccount();
-    if (bytype === 'agent') return _index.default.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
+    if (bytype === 'agent' || _index.default.get(ev, 'by.display_type') === 'agent') return _index.default.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
     if (byid.startsWith('at')) return _index.default.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
     if (bytype === 'bot') {
       let bot = this.props.store.matchBot()[byid];