@subiz/widget-v4 4.1.113 → 4.1.115

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,139 @@ 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;
+	margin-top: 4px;
+	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.message-event-action-btn__dev {
+		.color(@gray-600);
+		padding-right: 10px;
+		border-radius: 5px;
+		.message-event-action-btn-svg {
+			width: 24px;
+			height: 24px;
+			background-position: 2px 2px;
+			background-size: 20px 20px;
+		}
+	}
+
+	.message-event-action-btn.message-event-action-btn__dev:hover {
+		.color(@black);
+	}
+
+	.message-event-action-btn.message-event-action-btn__dev.message-event-action-btn_like.active {
+		.color(#34c759);
+	}
+
+	.message-event-action-btn.message-event-action-btn__dev.message-event-action-btn_like.active {
+		.color(#34c759);
+	}
+}
+
+.message-event-action-btn.message-event-action-btn__dev:hover {
+	background-color: unset;
+}
+
+.message-event-action-btn {
+	height: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	padding: 2px;
+
+	&:hover {
+		background-color: #ececec;
+		.message-event-action-btn-svg {
+		}
+	}
+
+	&.active:hover {
+		background-color: #dbfde3;
+		.message-event-action-btn-svg {
+		}
+	}
+}
+
+.message-event-action-btn.message-event-action-btn__dev {
+	padding: 0px;
+
+	&:hover {
+		background-color: unset;
+	}
+
+	&.active:hover {
+		background-color: unset;
+	}
+}
+
+.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,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiM2Yzc1N2QiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdGh1bWItdXAiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik03IDExdjhhMSAxIDAgMCAxIC0xIDFoLTJhMSAxIDAgMCAxIC0xIC0xdi03YTEgMSAwIDAgMSAxIC0xaDNhNCA0IDAgMCAwIDQgLTR2LTFhMiAyIDAgMCAxIDQgMHY1aDNhMiAyIDAgMCAxIDIgMmwtMSA1YTIgMyAwIDAgMSAtMiAyaC03YTMgMyAwIDAgMSAtMyAtMyIgLz48L3N2Zz4K');
+}
+.message-event-action-btn-svg.dislike {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiM2Yzc1N2QiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdGh1bWItZG93biI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTcgMTN2LThhMSAxIDAgMCAwIC0xIC0xaC0yYTEgMSAwIDAgMCAtMSAxdjdhMSAxIDAgMCAwIDEgMWgzYTQgNCAwIDAgMSA0IDR2MWEyIDIgMCAwIDAgNCAwdi01aDNhMiAyIDAgMCAwIDIgLTJsLTEgLTVhMiAzIDAgMCAwIC0yIC0yaC03YTMgMyAwIDAgMCAtMyAzIiAvPjwvc3ZnPgo=');
+}
+.message-event-action-btn:hover .message-event-action-btn-svg.like {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImJsYWNrIiAgc3Ryb2tlLXdpZHRoPSIyIiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXRodW1iLXVwIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNyAxMXY4YTEgMSAwIDAgMSAtMSAxaC0yYTEgMSAwIDAgMSAtMSAtMXYtN2ExIDEgMCAwIDEgMSAtMWgzYTQgNCAwIDAgMCA0IC00di0xYTIgMiAwIDAgMSA0IDB2NWgzYTIgMiAwIDAgMSAyIDJsLTEgNWEyIDMgMCAwIDEgLTIgMmgtN2EzIDMgMCAwIDEgLTMgLTMiIC8+PC9zdmc+Cg==');
+}
+.message-event-action-btn:hover .message-event-action-btn-svg.dislike {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImJsYWNrIiAgc3Ryb2tlLXdpZHRoPSIyIiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXRodW1iLWRvd24iPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik03IDEzdi04YTEgMSAwIDAgMCAtMSAtMWgtMmExIDEgMCAwIDAgLTEgMXY3YTEgMSAwIDAgMCAxIDFoM2E0IDQgMCAwIDEgNCA0djFhMiAyIDAgMCAwIDQgMHYtNWgzYTIgMiAwIDAgMCAyIC0ybC0xIC01YTIgMyAwIDAgMCAtMiAtMmgtN2EzIDMgMCAwIDAgLTMgMyIgLz48L3N2Zz4K');
+}
+.message-event-action-btn.active .message-event-action-btn-svg.like {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9IiMzNEM3NTkiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItZmlsbGVkIGljb24tdGFibGVyLXRodW1iLXVwIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTMgM2EzIDMgMCAwIDEgMi45OTUgMi44MjRsLjAwNSAuMTc2djRoMmEzIDMgMCAwIDEgMi45OCAyLjY1bC4wMTUgLjE3NGwuMDA1IC4xNzZsLS4wMiAuMTk2bC0xLjAwNiA1LjAzMmMtLjM4MSAxLjYyNiAtMS41MDIgMi43OTYgLTIuODEgMi43OGwtLjE2NCAtLjAwOGgtOGExIDEgMCAwIDEgLS45OTMgLS44ODNsLS4wMDcgLS4xMTdsLjAwMSAtOS41MzZhMSAxIDAgMCAxIC41IC0uODY1YTIuOTk4IDIuOTk4IDAgMCAwIDEuNDkyIC0yLjM5N2wuMDA3IC0uMjAydi0xYTMgMyAwIDAgMSAzIC0zeiIgLz48cGF0aCBkPSJNNSAxMGExIDEgMCAwIDEgLjk5MyAuODgzbC4wMDcgLjExN3Y5YTEgMSAwIDAgMSAtLjg4MyAuOTkzbC0uMTE3IC4wMDdoLTFhMiAyIDAgMCAxIC0xLjk5NSAtMS44NWwtLjAwNSAtLjE1di03YTIgMiAwIDAgMSAxLjg1IC0xLjk5NWwuMTUgLS4wMDVoMXoiIC8+PC9zdmc+Cg==');
+}
+.message-event-action-btn.active .message-event-action-btn-svg.dislike {
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI0ODBfOTUpIj4KPHBhdGggZD0iTTEzIDIxLjAwNzlDMTMuNzY1IDIxLjAwOCAxNC41MDEyIDIwLjcxNTcgMTUuMDU3OSAyMC4xOTFDMTUuNjE0NyAxOS42NjYyIDE1Ljk0OTkgMTguOTQ4NiAxNS45OTUgMTguMTg0OUwxNiAxOC4wMDc5VjE0LjAwNzlIMThDMTguNzM1MSAxNC4wMDggMTkuNDQ0NyAxMy43MzgyIDE5Ljk5NCAxMy4yNDk3QzIwLjU0MzQgMTIuNzYxMiAyMC44OTQyIDEyLjA4OCAyMC45OCAxMS4zNTc5TDIwLjk5NSAxMS4xODQ5TDIxIDExLjAwNzlMMjAuOTggMTAuODExOUwxOS45NzQgNS43Nzk5MkMxOS41OTMgNC4xNTQ5MiAxOC40NzIgMi45ODM5MiAxNy4xNjQgMi45OTk5MkwxNyAzLjAwNzkySDlDOC43NTQ5MSAzLjAwNzk4IDguNTE4MzggMy4wOTgwNCA4LjMzNTMzIDMuMjYxMDFDOC4xNTIyNyAzLjQyMzk3IDguMDM1NDMgMy42NDg0OSA4LjAwNyAzLjg5MTkyTDggNC4wMDc5Mkw4LjAwMSAxMy41NDM5QzguMDAxIDEzLjcxOTUgOC4wNDcyMSAxMy44OTE5IDguMTM0OTggMTQuMDQzOUM4LjIyMjc1IDE0LjE5NTkgOC4zNDg5OCAxNC4zMjIyIDguNTAxIDE0LjQwOTlDOC45MjcyOSAxNC42NTYxIDkuMjg2NCAxNS4wMDM1IDkuNTQ2NjEgMTUuNDIxM0M5LjgwNjgyIDE1LjgzOTIgOS45NjAxMyAxNi4zMTQ3IDkuOTkzIDE2LjgwNTlMMTAgMTcuMDA3OVYxOC4wMDc5QzEwIDE4LjgwMzYgMTAuMzE2MSAxOS41NjY2IDEwLjg3ODcgMjAuMTI5MkMxMS40NDEzIDIwLjY5MTggMTIuMjA0NCAyMS4wMDc5IDEzIDIxLjAwNzlaIiBmaWxsPSIjMzMzMzMzIi8+CjxwYXRoIGQ9Ik01IDE0LjAwODFDNS4yNDQ5MyAxNC4wMDggNS40ODEzNCAxMy45MTgxIDUuNjY0MzcgMTMuNzU1M0M1Ljg0NzQxIDEzLjU5MjYgNS45NjQzNCAxMy4zNjgzIDUuOTkzIDEzLjEyNTFMNiAxMy4wMDgxVjQuMDA4MDZDNS45OTk5NyAzLjc2MzEyIDUuOTEwMDQgMy41MjY3MiA1Ljc0NzI4IDMuMzQzNjhDNS41ODQ1MyAzLjE2MDY1IDUuMzYwMjUgMy4wNDM3MSA1LjExNyAzLjAxNTA2TDUgMy4wMDgwNkg0QzMuNDk1MSAzLjAwNzkzIDMuMDA4ODQgMy4xOTg3OCAyLjYzODgxIDMuNTQyMjlDMi4yNjg3OCAzLjg4NTc5IDIuMDQyMzYgNC4zNTY1NCAyLjAwNSA0Ljg2MDA2TDIgNS4wMTAwNlYxMi4wMTAxQzIuMDAwMDkgMTIuNTE0NSAyLjE5MDc3IDEzLjAwMDIgMi41MzM4NCAxMy4zN0MyLjg3NjkgMTMuNzM5NyAzLjM0NzAyIDEzLjk2NjIgMy44NSAxNC4wMDQxTDQgMTQuMDA5MUw1IDE0LjAwODFaIiBmaWxsPSIjMzMzMzMzIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjQ4MF85NSI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K');
+}

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 = {
@@ -141,14 +163,21 @@ class Event extends _common.Com {
         t: this.props.t
       }));
     }
+    if (this.props.store.isAIDevMode()) $time = null;
     let t = new _index.default.Date(ev.created).toLocaleString();
     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 +225,7 @@ class Event extends _common.Com {
         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) {
       _index.default.setTimeout(() => this.setState({
@@ -269,6 +298,106 @@ 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
+        }
+      }
+    };
+    if (action == 'dislike' && this.props.store.isAIDevMode()) {
+      this.props.store.emitConvoEvent({
+        type: 'bad_feedbacked',
+        data: {
+          event: ev,
+          id: ev.id,
+          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() {
+    if (this.props.store.isAIDevMode()) return null;
+    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"
+    })));
+  }
+  renderAIDevNote() {
+    if (!this.props.isLast) return null;
+    if (!this.props.store.isAIDevMode()) return null;
+    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 message-event-action-btn__dev message-event-action-btn_like';
+    if (hasLike) likecls += ' active';
+    let dislikecls = 'message-event-action-btn message-event-action-btn__dev message-event-action-btn_dislike';
+    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"
+    }), " Good"), (0, _preact.h)("div", {
+      class: dislikecls,
+      onClick: () => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')
+    }, (0, _preact.h)("div", {
+      class: "message-event-action-btn-svg dislike"
+    }), " Bad"));
+  }
   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/chatbox/InfoMessage.js

@@ -27,6 +27,7 @@ class InfoMessage extends _common.Com {
         t: this.props.t
       }));
     }
+    if (this.props.store.isAIDevMode()) $time = null;
     if (ev.type === 'conversation_rated') {
       var rating = _index.default.get(ev, 'data.conversation.ratings.0', {
         no_rating: true,

package/compiled_src/chatbox/PoweredBy.js

@@ -8,6 +8,7 @@ var _preact = require("preact");
 var logo = require('../../assets/img/subiz-mono.svg');
 function PoweredBy(props) {
   if (props.store.isMobile()) return null;
+  if (props.store.isAIDevMode()) return null;
   let user = props.store.matchUser() || {};
   var link = `https://subiz.com.vn/?utm_source=${window.location.host || `id-${user.account_id}`}&utm_medium=widget&utm_campaign=widget_referral`;
   return (0, _preact.h)("div", {

package/compiled_src/chatbox/Widget.js

@@ -201,19 +201,24 @@ class Widget extends _common.Com {
     let cls = 'widget-container widget-container--' + position;
     if (!this.props.store.isMobile() && _index.default.get(accountSetting, 'window_mode') === 'full') cls += ' widget-container--full';
     if (!this.props.isShow) cls += ' widget-container--hide';
+    let hideheader = _index.default.get(accountSetting, 'header.hidden', false);
+    var $header;
+    if (!hideheader) {
+      $header = (0, _preact.h)(_Header.default, {
+        t: this.props.t,
+        plugin: this.props.plugin,
+        store: this.props.store,
+        cid: this.props.cid,
+        view: this.props.view,
+        onClose: this.props.onClose,
+        onGotoList: () => this.props.onGo({
+          view: 'list'
+        })
+      });
+    }
     return (0, _preact.h)("div", {
       class: cls
-    }, (0, _preact.h)(_Header.default, {
-      t: this.props.t,
-      plugin: this.props.plugin,
-      store: this.props.store,
-      cid: this.props.cid,
-      view: this.props.view,
-      onClose: this.props.onClose,
-      onGotoList: () => this.props.onGo({
-        view: 'list'
-      })
-    }), $body);
+    }, $header, $body);
   }
   async submitPrechatForm(form, formName) {
     if (this.state.submiting) return;

package/compiled_src/lib.js

@@ -46,6 +46,9 @@ class Widget {
     await this.store.readyGate.entry();
     cb();
   }
+  setAIDevMode(mode) {
+    this.store.setAIDevMode(mode);
+  }
   setTrackPageView(val) {
     this.store.setTrackPageview(val);
   }

package/compiled_src/store/store.js

@@ -334,6 +334,15 @@ class Store {
   highlight(pluginid, ref) {
     this.pubsub.publish('highlight', pluginid, ref);
   }
+  emitConvoEvent(ev) {
+    this.pubsub.publish('events', ev);
+  }
+  setAIDevMode(mode) {
+    this.ai_dev_mode = mode;
+  }
+  isAIDevMode() {
+    return this.ai_dev_mode;
+  }
   overrideDeviceType(type) {
     this.forceDevice = type;
     this.pubsub.publish('account');
@@ -722,7 +731,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 +750,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');
@@ -757,6 +777,7 @@ class Store {
     this._typing(cid);
   }
   async startConvo(req) {
+    if (!req) req = {};
     await this.readyGate.entry();
     this.convoGate.close();
     if (!req.source) req.source = document.location.href;
@@ -782,6 +803,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);