@subiz/widget-v4 4.1.113 → 4.1.114

package/assets/less/message.less

@@ -13,10 +13,10 @@
 }
 
 .mobile .widget-body--events {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  padding-bottom: 15px;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	padding-bottom: 15px;
 }
 
 .widget-body--events-container.widget-body--events-container__error {
@@ -108,12 +108,15 @@
 
 .message-text--agent {
 	white-space: pre-wrap;
-	margin: 5px 0 0;
 	display: inline-block;
 	background-color: @primary-color;
 	.color(@text-color);
 	padding: 10px 14px 10px 14px;
 }
+.message-agent.message-text--agent {
+	max-width: unset;
+	margin-top: 0;
+}
 
 .message-user__container {
 	display: flex;
@@ -148,13 +151,13 @@
 }
 
 .message-user.message-user-images-container {
-  width: 85%;
-  display: flex;
-  justify-content: flex-end;
+	width: 85%;
+	display: flex;
+	justify-content: flex-end;
 }
 
 .message-user.message-user-audio {
-  flex: 1;
+	flex: 1;
 }
 
 .message-agent {
@@ -741,3 +744,99 @@ a.product_attachment__title {
 	margin-left: 5px;
 	margin-top: -2px;
 }
+
+.agent-convo-event-wrapper {
+	max-width: 85%;
+	margin-top: 5px;
+}
+
+.agent-convo-event-inner {
+	width: fit-content;
+	position: relative;
+}
+
+.message-event-actions {
+	position: absolute;
+	bottom: -18px;
+	left: calc(100% - 40px);
+	display: none;
+	border: 1px solid #dee2e6;
+	background-color: white;
+	border-radius: 4px;
+	z-index: 10;
+}
+
+.agent-convo-event-inner:hover .message-event-actions {
+	display: flex;
+}
+
+.agent-convo-event-inner.last {
+	.message-event-actions {
+		display: flex;
+		position: unset;
+		margin-top: 4px;
+		border: none;
+		padding: 0;
+	}
+
+	.message-event-action-btn {
+		padding: 0;
+		.message-event-action-btn-svg {
+			width: 24px;
+			height: 24px;
+			background-position: 2px 2px;
+			background-size: 20px 20px;
+		}
+	}
+}
+
+.message-event-action-btn {
+	width: 24px;
+	height: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	padding: 2px;
+
+	&:hover {
+		.message-event-action-btn-svg {
+			background-color: #ececec;
+		}
+	}
+
+	&.active:hover {
+		.message-event-action-btn-svg {
+			background-color: #dbfde3;
+		}
+	}
+}
+
+.message-event-action-btn .message-event-action-btn-svg {
+	width: 20px;
+	height: 20px;
+	border-radius: 4px;
+	background-position: 2px 2px;
+	background-size: 16px 16px;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+.message-event-action-btn-svg.like {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWE2MjY4IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3Ryb2tlLXdpZHRoPSIxIj4gPHBhdGggZD0iTTcgMTF2OGExIDEgMCAwIDEgLTEgMWgtMmExIDEgMCAwIDEgLTEgLTF2LTdhMSAxIDAgMCAxIDEgLTFoM2E0IDQgMCAwIDAgNCAtNHYtMWEyIDIgMCAwIDEgNCAwdjVoM2EyIDIgMCAwIDEgMiAybC0xIDVhMiAzIDAgMCAxIC0yIDJoLTdhMyAzIDAgMCAxIC0zIC0zIj48L3BhdGg+IDwvc3ZnPiAK');
+}
+.message-event-action-btn-svg.dislike {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWE2MjY4IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3Ryb2tlLXdpZHRoPSIxIj4gPHBhdGggZD0iTTcgMTN2LThhMSAxIDAgMCAwIC0xIC0xaC0yYTEgMSAwIDAgMCAtMSAxdjdhMSAxIDAgMCAwIDEgMWgzYTQgNCAwIDAgMSA0IDR2MWEyIDIgMCAwIDAgNCAwdi01aDNhMiAyIDAgMCAwIDIgLTJsLTEgLTVhMiAzIDAgMCAwIC0yIC0yaC03YTMgMyAwIDAgMCAtMyAzIj48L3BhdGg+IDwvc3ZnPiAK');
+}
+.message-event-action-btn:hover .message-event-action-btn-svg.like {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBzdHJva2Utd2lkdGg9IjEiPiA8cGF0aCBkPSJNNyAxMXY4YTEgMSAwIDAgMSAtMSAxaC0yYTEgMSAwIDAgMSAtMSAtMXYtN2ExIDEgMCAwIDEgMSAtMWgzYTQgNCAwIDAgMCA0IC00di0xYTIgMiAwIDAgMSA0IDB2NWgzYTIgMiAwIDAgMSAyIDJsLTEgNWEyIDMgMCAwIDEgLTIgMmgtN2EzIDMgMCAwIDEgLTMgLTMiPjwvcGF0aD4gPC9zdmc+IA==');
+}
+.message-event-action-btn:hover .message-event-action-btn-svg.dislike {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBzdHJva2Utd2lkdGg9IjEiPiA8cGF0aCBkPSJNNyAxM3YtOGExIDEgMCAwIDAgLTEgLTFoLTJhMSAxIDAgMCAwIC0xIDF2N2ExIDEgMCAwIDAgMSAxaDNhNCA0IDAgMCAxIDQgNHYxYTIgMiAwIDAgMCA0IDB2LTVoM2EyIDIgMCAwIDAgMiAtMmwtMSAtNWEyIDMgMCAwIDAgLTIgLTJoLTdhMyAzIDAgMCAwIC0zIDMiPjwvcGF0aD4gPC9zdmc+IA==');
+}
+.message-event-action-btn.active .message-event-action-btn-svg.like {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzRDNzU5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3Ryb2tlLXdpZHRoPSIyIj4gPHBhdGggZD0iTTcgMTF2OGExIDEgMCAwIDEgLTEgMWgtMmExIDEgMCAwIDEgLTEgLTF2LTdhMSAxIDAgMCAxIDEgLTFoM2E0IDQgMCAwIDAgNCAtNHYtMWEyIDIgMCAwIDEgNCAwdjVoM2EyIDIgMCAwIDEgMiAybC0xIDVhMiAzIDAgMCAxIC0yIDJoLTdhMyAzIDAgMCAxIC0zIC0zIj48L3BhdGg+IDwvc3ZnPiAK');
+}
+.message-event-action-btn.active .message-event-action-btn-svg.dislike {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzRDNzU5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3Ryb2tlLXdpZHRoPSIyIj4gPHBhdGggZD0iTTcgMTN2LThhMSAxIDAgMCAwIC0xIC0xaC0yYTEgMSAwIDAgMCAtMSAxdjdhMSAxIDAgMCAwIDEgMWgzYTQgNCAwIDAgMSA0IDR2MWEyIDIgMCAwIDAgNCAwdi01aDNhMiAyIDAgMCAwIDIgLTJsLTEgLTVhMiAzIDAgMCAwIC0yIC0yaC03YTMgMyAwIDAgMCAtMyAzIj48L3BhdGg+IDwvc3ZnPiAK');
+}

package/compiled_src/chatbox/Event.js

@@ -28,7 +28,11 @@ const LoadOrderAttachments = () => Promise.resolve().then(() => _interopRequireW
 class Event extends _common.Com {
   constructor(props) {
     super(props);
+    this.props.store.onConvoEvent(this, ev => this.onEvent(ev));
     this.refForm = (0, _preact.createRef)();
+    this.state = {
+      pongs: _index.default.get(this.props.event, 'ev.data.message.pongs') || []
+    };
   }
   render() {
     var ev = _index.default.get(this.props.event, 'ev', {});
@@ -52,6 +56,24 @@ class Event extends _common.Com {
   focus() {
     this.refForm.current && this.refForm.current.focus();
   }
+  onEvent(ev) {
+    if (ev.id !== _index.default.get(this.props.event, 'ev.id')) return;
+    this.setState({
+      pongs: _index.default.get(ev, 'data.message.pongs') || []
+    });
+  }
+  hasLike() {
+    let {
+      pongs
+    } = this.state;
+    return !!_index.default.find(pongs, pong => pong.type === 'like');
+  }
+  hasDislike() {
+    let {
+      pongs
+    } = this.state;
+    return !!_index.default.find(pongs, pong => pong.type === 'dislike');
+  }
   chooseQuickReply(reply) {
     let ev = _index.default.get(this.props.event, 'ev', {});
     let message = {
@@ -145,10 +167,16 @@ class Event extends _common.Com {
     if (_index.default.get(ev, 'by.type') !== 'user') {
       let $sender = null;
       if (this.props.event.mode === 'lead') $sender = this.renderAgentAvatar(ev);
+      let innercls = 'agent-convo-event-inner';
+      if (this.props.isLast) innercls += ' last';
       return (0, _preact.h)("div", {
         class: "convo-event agent-message",
         title: t
-      }, $time, $sender, (0, _preact.h)(_TextMessage.default, {
+      }, $time, $sender, (0, _preact.h)("div", {
+        class: "agent-convo-event-wrapper"
+      }, (0, _preact.h)("div", {
+        class: innercls
+      }, (0, _preact.h)(_TextMessage.default, {
         store: this.props.store,
         ev: ev,
         onLink: this.props.onLink
@@ -196,7 +224,7 @@ class Event extends _common.Com {
         store: this.props.store,
         ev: ev,
         onSelect: e => this.chooseQuickReply(e)
-      }));
+      }), this.renderReactions())));
     }
     if (_index.default.get(ev, 'data.message.idempotency_key') === ev.id && this.props.store.now() - ev.created < 900) {
       _index.default.setTimeout(() => this.setState({
@@ -269,6 +297,70 @@ class Event extends _common.Com {
       ev: ev
     })), $error);
   }
+  async onSendReaction(action) {
+    if (this._reacting) return;
+    let ev = this.props.event.ev;
+    let cid = _index.default.get(ev, 'data.message.conversation_id');
+    ev = {
+      type: 'message_pong',
+      data: {
+        message: {
+          id: ev.id,
+          pongs: [{
+            type: action
+          }],
+          conversion_id: cid
+        }
+      }
+    };
+    let {
+      pongs
+    } = this.state;
+    if (action === 'like') {
+      pongs = pongs.filter(pong => pong.type !== 'dislike');
+      pongs.push({
+        type: 'like'
+      });
+    } else if (action === 'dislike') {
+      pongs = pongs.filter(pong => pong.type !== 'like');
+      pongs.push({
+        type: 'dislike'
+      });
+    } else if (action === 'remove_like') {
+      pongs = pongs.filter(pong => pong.type !== 'like');
+    } else if (action === 'remove_dislike') {
+      pongs = pongs.filter(pong => pong.type !== 'dislike');
+    }
+    this.setState({
+      pongs
+    });
+    this._reacting = true;
+    let res = await this.props.store.sendReaction(cid, ev);
+    this._reacting = false;
+  }
+  renderReactions() {
+    let ev = _index.default.get(this.props.event, 'ev') || {};
+    let pongs = _index.default.get(ev, 'data.message.pongs') || [];
+    let hasLike = this.hasLike();
+    let hasDislike = this.hasDislike();
+    let likecls = 'message-event-action-btn';
+    if (hasLike) likecls += ' active';
+    let dislikecls = 'message-event-action-btn';
+    if (hasDislike) dislikecls += ' active';
+    return (0, _preact.h)("div", {
+      class: "message-event-actions"
+    }, (0, _preact.h)("div", {
+      class: likecls,
+      onClick: () => this.onSendReaction(hasLike ? 'remove_like' : 'like')
+    }, (0, _preact.h)("div", {
+      class: "message-event-action-btn-svg like"
+    })), (0, _preact.h)("div", {
+      class: dislikecls,
+      onClick: () => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')
+    }, (0, _preact.h)("div", {
+      class: "message-event-action-btn-svg dislike"
+    })));
+  }
   renderUpdateConvo(ev) {
     var state = _index.default.get(ev, 'data.conversation.state');
     if (state === 'active') return null;

package/compiled_src/chatbox/Events.js

@@ -52,17 +52,30 @@ class Events extends _common.Com {
       ev: ev
     }));
     processEvents(convo, events);
-    let $events = _index.default.map(events, ev => (0, _preact.h)(_Event.default, {
-      chatbox: this.props.chatbox,
-      onLink: this.props.onLink,
-      store: this.props.store,
-      onFormSubmit: this.props.onFormSubmit,
-      onSend: this.props.onSend,
-      onPostback: this.props.onPostback,
-      event: ev,
-      t: this.props.t,
-      key: ev.ev.id
-    }));
+    let lastAgentMessageSentId = '';
+    for (let i = events.length - 1; i >= 0; i--) {
+      let ev = _index.default.get(events, [i, 'ev']) || {};
+      let bytype = _index.default.get(ev, 'by.type');
+      if (bytype !== 'user' && ev.type === 'message_sent') {
+        lastAgentMessageSentId = ev.id;
+        break;
+      }
+    }
+    let $events = _index.default.map(events, ev => {
+      let isLast = ev.ev.id === lastAgentMessageSentId;
+      return (0, _preact.h)(_Event.default, {
+        isLast: isLast,
+        chatbox: this.props.chatbox,
+        onLink: this.props.onLink,
+        store: this.props.store,
+        onFormSubmit: this.props.onFormSubmit,
+        onSend: this.props.onSend,
+        onPostback: this.props.onPostback,
+        event: ev,
+        t: this.props.t,
+        key: ev.ev.id
+      });
+    });
     let $loading = null;
     let style = 'opacity: 1 !important';
     if (this.state.loading || this.props.creating) {

package/compiled_src/chatbox/ImageAttachments.js

@@ -27,7 +27,7 @@ class ImageAttachment extends _common.Com {
     const MAX_HEIGHT = 240;
     const DEFAULT_MAX_WIDTH = 267;
     let $container = this.containerRef.current;
-    this.frameWidth = $container ? $container.offsetWidth : DEFAULT_MAX_WIDTH;
+    this.frameWidth = $container ? $container.parentNode.parentNode.offsetWidth : DEFAULT_MAX_WIDTH;
     this.frameHeight = MAX_HEIGHT;
     this.setState({
       ready: true

package/compiled_src/store/store.js

@@ -722,7 +722,17 @@ class Store {
       var oldev = this.chain.match(cid, msgid);
       if (!_index.default.get(oldev, 'data.message')) return;
       var pongs = _index.default.get(oldev, 'data.message.pongs', []);
-      pongs = pongs.concat(_index.default.get(ev, 'data.message.pongs', []));
+      let newpongs = _index.default.get(ev, 'data.message.pongs', []) || [];
+      pongs = pongs.concat(newpongs);
+      if (newpongs.length === 1) {
+        let pongtype = newpongs[0].type;
+        if (pongtype === 'like' || pongtype === 'remove_dislike') {
+          pongs = pongs.filter(pong => pong.type !== 'dislike');
+        }
+        if (pongtype === 'dislike' || pongtype === 'remove_like') {
+          pongs = pongs.filter(pong => pong.type !== 'like');
+        }
+      }
       oldev.data.message.pongs = pongs;
       _index.default.map(pongs, pong => {
         if (pong.member_id == user.id && pong.type === 'seen') {
@@ -731,6 +741,7 @@ class Store {
         }
       });
       this.chain.put(cid, oldev.id, _index.default.getMs(oldev.created), oldev);
+      this.pubsub.publish('events', oldev);
     }
     if (ev.type === 'message_sent') {
       let idemkey = _index.default.get(ev, 'data.message.idempotency_key');
@@ -782,6 +793,9 @@ class Store {
   createPostback(cid, postback) {
     return this.api.createPostback(cid, postback);
   }
+  sendReaction(cid, ev) {
+    return this.api.sendConvoEvent(cid, ev);
+  }
   async sendConvoEvent(cid, type, data) {
     await this.readyGate.entry();
     var idempotency = _index.default.randomString(36);