@subiz/widget-v4 4.1.114 → 4.1.116

package/assets/less/chatbox.less

@@ -37,7 +37,7 @@
 @font-family-sans-serif: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
 	sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-@font-size-base: 15px; // Assumes the browser default, typically `16px`
+@font-size-base: 16px; // Assumes the browser default, typically `16px`
 
 @text-muted: #6c757d;
 

package/assets/less/message.less

@@ -100,18 +100,24 @@
 .message-text--user {
 	margin: 5px 0 0;
 	display: inline-block;
-	background-color: @gray-200;
-	.color(@black);
-	padding: 10px 14px 10px 14px;
+	font-weight: 500;
+
+	background-color: @primary-color;
+	.color(@text-color);
+
+
+	padding: 12px 16px 12px 16px;
 	//padding: 12px;
 }
 
 .message-text--agent {
 	white-space: pre-wrap;
 	display: inline-block;
-	background-color: @primary-color;
-	.color(@text-color);
-	padding: 10px 14px 10px 14px;
+
+	background-color: @gray-200;
+	.color(@black);
+
+	padding: 12px 16px 12px 16px;
 }
 .message-agent.message-text--agent {
 	max-width: unset;
@@ -142,7 +148,8 @@
 }
 
 .message-user {
-	border-radius: 7px;
+	border-radius: 18px;
+	border-bottom-right-radius: 4px;
 	max-width: 85%;
 	align-self: flex-end;
 	word-break: break-word;
@@ -161,7 +168,8 @@
 }
 
 .message-agent {
-	border-radius: 7px;
+	border-radius: 18px;
+	border-bottom-left-radius: 4px;
 	max-width: 85%;
 	word-break: break-word;
 	position: relative;
@@ -342,7 +350,7 @@ a.message_error {
 	border-radius: 7px;
 	padding: 10px;
 	text-align: center;
-	font-size: 15px;
+	font-size: 16px;
 	&:hover {
 		.color(@text-color);
 	}
@@ -758,6 +766,7 @@ a.product_attachment__title {
 .message-event-actions {
 	position: absolute;
 	bottom: -18px;
+	margin-top: 4px;
 	left: calc(100% - 40px);
 	display: none;
 	border: 1px solid #dee2e6;
@@ -788,10 +797,37 @@ a.product_attachment__title {
 			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 {
-	width: 24px;
 	height: 24px;
 	display: flex;
 	align-items: center;
@@ -800,18 +836,30 @@ a.product_attachment__title {
 	padding: 2px;
 
 	&:hover {
+		background-color: #ececec;
 		.message-event-action-btn-svg {
-			background-color: #ececec;
 		}
 	}
 
 	&.active:hover {
+		background-color: #dbfde3;
 		.message-event-action-btn-svg {
-			background-color: #dbfde3;
 		}
 	}
 }
 
+.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;
@@ -823,20 +871,20 @@ a.product_attachment__title {
 }
 
 .message-event-action-btn-svg.like {
-	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWE2MjY4IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3Ryb2tlLXdpZHRoPSIxIj4gPHBhdGggZD0iTTcgMTF2OGExIDEgMCAwIDEgLTEgMWgtMmExIDEgMCAwIDEgLTEgLTF2LTdhMSAxIDAgMCAxIDEgLTFoM2E0IDQgMCAwIDAgNCAtNHYtMWEyIDIgMCAwIDEgNCAwdjVoM2EyIDIgMCAwIDEgMiAybC0xIDVhMiAzIDAgMCAxIC0yIDJoLTdhMyAzIDAgMCAxIC0zIC0zIj48L3BhdGg+IDwvc3ZnPiAK');
+	background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiM2Yzc1N2QiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdGh1bWItdXAiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik03IDExdjhhMSAxIDAgMCAxIC0xIDFoLTJhMSAxIDAgMCAxIC0xIC0xdi03YTEgMSAwIDAgMSAxIC0xaDNhNCA0IDAgMCAwIDQgLTR2LTFhMiAyIDAgMCAxIDQgMHY1aDNhMiAyIDAgMCAxIDIgMmwtMSA1YTIgMyAwIDAgMSAtMiAyaC03YTMgMyAwIDAgMSAtMyAtMyIgLz48L3N2Zz4K');
 }
 .message-event-action-btn-svg.dislike {
-	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNWE2MjY4IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3Ryb2tlLXdpZHRoPSIxIj4gPHBhdGggZD0iTTcgMTN2LThhMSAxIDAgMCAwIC0xIC0xaC0yYTEgMSAwIDAgMCAtMSAxdjdhMSAxIDAgMCAwIDEgMWgzYTQgNCAwIDAgMSA0IDR2MWEyIDIgMCAwIDAgNCAwdi01aDNhMiAyIDAgMCAwIDIgLTJsLTEgLTVhMiAzIDAgMCAwIC0yIC0yaC03YTMgMyAwIDAgMCAtMyAzIj48L3BhdGg+IDwvc3ZnPiAK');
+	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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBzdHJva2Utd2lkdGg9IjEiPiA8cGF0aCBkPSJNNyAxMXY4YTEgMSAwIDAgMSAtMSAxaC0yYTEgMSAwIDAgMSAtMSAtMXYtN2ExIDEgMCAwIDEgMSAtMWgzYTQgNCAwIDAgMCA0IC00di0xYTIgMiAwIDAgMSA0IDB2NWgzYTIgMiAwIDAgMSAyIDJsLTEgNWEyIDMgMCAwIDEgLTIgMmgtN2EzIDMgMCAwIDEgLTMgLTMiPjwvcGF0aD4gPC9zdmc+IA==');
+	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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBzdHJva2Utd2lkdGg9IjEiPiA8cGF0aCBkPSJNNyAxM3YtOGExIDEgMCAwIDAgLTEgLTFoLTJhMSAxIDAgMCAwIC0xIDF2N2ExIDEgMCAwIDAgMSAxaDNhNCA0IDAgMCAxIDQgNHYxYTIgMiAwIDAgMCA0IDB2LTVoM2EyIDIgMCAwIDAgMiAtMmwtMSAtNWEyIDMgMCAwIDAgLTIgLTJoLTdhMyAzIDAgMCAwIC0zIDMiPjwvcGF0aD4gPC9zdmc+IA==');
+	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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzRDNzU5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3Ryb2tlLXdpZHRoPSIyIj4gPHBhdGggZD0iTTcgMTF2OGExIDEgMCAwIDEgLTEgMWgtMmExIDEgMCAwIDEgLTEgLTF2LTdhMSAxIDAgMCAxIDEgLTFoM2E0IDQgMCAwIDAgNCAtNHYtMWEyIDIgMCAwIDEgNCAwdjVoM2EyIDIgMCAwIDEgMiAybC0xIDVhMiAzIDAgMCAxIC0yIDJoLTdhMyAzIDAgMCAxIC0zIC0zIj48L3BhdGg+IDwvc3ZnPiAK');
+	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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzRDNzU5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3Ryb2tlLXdpZHRoPSIyIj4gPHBhdGggZD0iTTcgMTN2LThhMSAxIDAgMCAwIC0xIC0xaC0yYTEgMSAwIDAgMCAtMSAxdjdhMSAxIDAgMCAwIDEgMWgzYTQgNCAwIDAgMSA0IDR2MWEyIDIgMCAwIDAgNCAwdi01aDNhMiAyIDAgMCAwIDIgLTJsLTEgLTVhMiAzIDAgMCAwIC0yIC0yaC03YTMgMyAwIDAgMCAtMyAzIj48L3BhdGg+IDwvc3ZnPiAK');
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI0ODBfOTUpIj4KPHBhdGggZD0iTTEzIDIxLjAwNzlDMTMuNzY1IDIxLjAwOCAxNC41MDEyIDIwLjcxNTcgMTUuMDU3OSAyMC4xOTFDMTUuNjE0NyAxOS42NjYyIDE1Ljk0OTkgMTguOTQ4NiAxNS45OTUgMTguMTg0OUwxNiAxOC4wMDc5VjE0LjAwNzlIMThDMTguNzM1MSAxNC4wMDggMTkuNDQ0NyAxMy43MzgyIDE5Ljk5NCAxMy4yNDk3QzIwLjU0MzQgMTIuNzYxMiAyMC44OTQyIDEyLjA4OCAyMC45OCAxMS4zNTc5TDIwLjk5NSAxMS4xODQ5TDIxIDExLjAwNzlMMjAuOTggMTAuODExOUwxOS45NzQgNS43Nzk5MkMxOS41OTMgNC4xNTQ5MiAxOC40NzIgMi45ODM5MiAxNy4xNjQgMi45OTk5MkwxNyAzLjAwNzkySDlDOC43NTQ5MSAzLjAwNzk4IDguNTE4MzggMy4wOTgwNCA4LjMzNTMzIDMuMjYxMDFDOC4xNTIyNyAzLjQyMzk3IDguMDM1NDMgMy42NDg0OSA4LjAwNyAzLjg5MTkyTDggNC4wMDc5Mkw4LjAwMSAxMy41NDM5QzguMDAxIDEzLjcxOTUgOC4wNDcyMSAxMy44OTE5IDguMTM0OTggMTQuMDQzOUM4LjIyMjc1IDE0LjE5NTkgOC4zNDg5OCAxNC4zMjIyIDguNTAxIDE0LjQwOTlDOC45MjcyOSAxNC42NTYxIDkuMjg2NCAxNS4wMDM1IDkuNTQ2NjEgMTUuNDIxM0M5LjgwNjgyIDE1LjgzOTIgOS45NjAxMyAxNi4zMTQ3IDkuOTkzIDE2LjgwNTlMMTAgMTcuMDA3OVYxOC4wMDc5QzEwIDE4LjgwMzYgMTAuMzE2MSAxOS41NjY2IDEwLjg3ODcgMjAuMTI5MkMxMS40NDEzIDIwLjY5MTggMTIuMjA0NCAyMS4wMDc5IDEzIDIxLjAwNzlaIiBmaWxsPSIjMzMzMzMzIi8+CjxwYXRoIGQ9Ik01IDE0LjAwODFDNS4yNDQ5MyAxNC4wMDggNS40ODEzNCAxMy45MTgxIDUuNjY0MzcgMTMuNzU1M0M1Ljg0NzQxIDEzLjU5MjYgNS45NjQzNCAxMy4zNjgzIDUuOTkzIDEzLjEyNTFMNiAxMy4wMDgxVjQuMDA4MDZDNS45OTk5NyAzLjc2MzEyIDUuOTEwMDQgMy41MjY3MiA1Ljc0NzI4IDMuMzQzNjhDNS41ODQ1MyAzLjE2MDY1IDUuMzYwMjUgMy4wNDM3MSA1LjExNyAzLjAxNTA2TDUgMy4wMDgwNkg0QzMuNDk1MSAzLjAwNzkzIDMuMDA4ODQgMy4xOTg3OCAyLjYzODgxIDMuNTQyMjlDMi4yNjg3OCAzLjg4NTc5IDIuMDQyMzYgNC4zNTY1NCAyLjAwNSA0Ljg2MDA2TDIgNS4wMTAwNlYxMi4wMTAxQzIuMDAwMDkgMTIuNTE0NSAyLjE5MDc3IDEzLjAwMDIgMi41MzM4NCAxMy4zN0MyLjg3NjkgMTMuNzM5NyAzLjM0NzAyIDEzLjk2NjIgMy44NSAxNC4wMDQxTDQgMTQuMDA5MUw1IDE0LjAwODFaIiBmaWxsPSIjMzMzMzMzIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjQ4MF85NSI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K');
 }

package/assets/less/order.less

@@ -129,7 +129,7 @@
 		margin-top: 0px;
 		background: #f4f4f4;
 		margin-top: 20px;
-		width: 250px;
+		width: 270px;
 		box-shadow: 0 0 0 1px hsl(0deg 0% 69% / 20%), 0 15px 35px 0 rgb(49 49 93 / 8%), 0 5px 15px 0 rgb(0 0 0 / 6%);
 		border-radius: 6px;
 		background-color: #fff;

package/assets/less/widget.less

@@ -255,7 +255,7 @@
 	line-height: 20px;
 	text-align: center;
 	background: @primary-color;
-	max-width: 250px;
+	max-width: 270px;
 	width: 70%;
 	text-overflow: ellipsis;
 	white-space: nowrap;

package/assets/less/widget_header.less

@@ -43,9 +43,9 @@
 	}
 
 	.widget-header--description {
-		font-size: 15px;
+		font-size: 14px;
 		white-space: pre-wrap;
-		opacity: 0.8;
+		opacity: 0.7;
 		flex: 1;
 		.color(@text-color);
 		margin-top: 2.5px;

package/compiled_src/chatbox/Event.js

@@ -163,6 +163,7 @@ 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;
@@ -170,8 +171,7 @@ class Event extends _common.Com {
       let innercls = 'agent-convo-event-inner';
       if (this.props.isLast) innercls += ' last';
       return (0, _preact.h)("div", {
-        class: "convo-event agent-message",
-        title: t
+        class: "convo-event agent-message"
       }, $time, $sender, (0, _preact.h)("div", {
         class: "agent-convo-event-wrapper"
       }, (0, _preact.h)("div", {
@@ -224,7 +224,7 @@ class Event extends _common.Com {
         store: this.props.store,
         ev: ev,
         onSelect: e => this.chooseQuickReply(e)
-      }), this.renderReactions())));
+      }), 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({
@@ -258,8 +258,7 @@ class Event extends _common.Com {
       }));
     }
     return (0, _preact.h)("div", {
-      class: "convo-event user-message",
-      title: t
+      class: "convo-event user-message"
     }, $time, $sender, (0, _preact.h)("div", {
       class: "message-user__container"
     }, $dot, (0, _preact.h)(_TextMessage.default, {
@@ -313,6 +312,16 @@ class Event extends _common.Com {
         }
       }
     };
+    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;
@@ -339,6 +348,7 @@ class Event extends _common.Com {
     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();
@@ -361,6 +371,31 @@ class Event extends _common.Com {
       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/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/TextMessage.js

@@ -21,6 +21,7 @@ class TextMessage extends _common.Com {
     var text = _index.default.get(this.props.ev, 'data.message.text');
     text = _index.default.trim(text);
     if (_index.default.size(text) === 0) return null;
+    let t = new _index.default.Date(_index.default.get(this.props.ev, 'created')).toLocaleString();
     let byType = _index.default.get(this.props.ev, 'by.type');
     if (byType !== 'user') byType = 'agent';
     var tags = _index.default.extractText(text).map(tag => {
@@ -49,26 +50,31 @@ class TextMessage extends _common.Com {
     });
     if (_index.default.size(tags) === 0) return null;
     if (byType === 'agent') return (0, _preact.h)("div", {
-      class: "message-agent message-text--agent"
+      class: "message-agent message-text--agent",
+      title: t
     }, tags);
     return (0, _preact.h)("div", {
-      class: "message-user message-text--user"
+      class: "message-user message-text--user",
+      title: t
     }, tags);
   }
   renderBlock(block) {
     if (isEmptyBlock(block)) return null;
+    let t = new _index.default.Date(_index.default.get(this.props.ev, 'created')).toLocaleString();
     let byType = _index.default.get(this.props.ev, 'by.type');
     if (byType !== 'user') byType = 'agent';
     if (byType === 'agent') {
       return (0, _preact.h)("div", {
-        class: "message-agent message-text--agent"
+        class: "message-agent message-text--agent",
+        title: t
       }, (0, _preact.h)(_block.default, {
         block: block,
         onLink: this.props.onLink
       }));
     }
     return (0, _preact.h)("div", {
-      class: "message-user message-text--user"
+      class: "message-user message-text--user",
+      title: t
     }, (0, _preact.h)(_block.default, {
       block: block,
       onLink: this.props.onLink

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');
@@ -768,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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.114",
+	"version": "4.1.116",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -31,7 +31,7 @@
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.3",
 		"puppeteer": "^24.6.0",
-		"webpack": "^5.98.0",
+		"webpack": "^5.99.1",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.1"

package/src/chatbox/Event.js

@@ -160,6 +160,7 @@ export default class Event extends Com {
 				</div>
 			)
 		}
+		if (this.props.store.isAIDevMode()) $time = null
 
 		let t = new sb.Date(ev.created).toLocaleString()
 		// message of agent
@@ -169,7 +170,7 @@ export default class Event extends Com {
 			let innercls = 'agent-convo-event-inner'
 			if (this.props.isLast) innercls += ' last'
 			return (
-				<div class='convo-event agent-message' title={t}>
+				<div class='convo-event agent-message'>
 					{$time}
 					{$sender}
 					<div class='agent-convo-event-wrapper'>
@@ -203,6 +204,7 @@ export default class Event extends Com {
 							<OrderAttachments t={this.props.t} store={this.props.store} ev={ev} />
 							<QuickReplies store={this.props.store} ev={ev} onSelect={(e) => this.chooseQuickReply(e)} />
 							{this.renderReactions()}
+							{this.renderAIDevNote()}
 						</div>
 					</div>
 				</div>
@@ -236,7 +238,7 @@ export default class Event extends Com {
 		}
 
 		return (
-			<div class='convo-event user-message' title={t}>
+			<div class='convo-event user-message'>
 				{$time}
 				{$sender}
 				<div class='message-user__container'>
@@ -274,6 +276,17 @@ export default class Event extends Com {
 				},
 			},
 		}
+		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')
@@ -293,6 +306,8 @@ export default class Event extends Com {
 	}
 
 	renderReactions() {
+		if (this.props.store.isAIDevMode()) return null
+
 		let ev = sb.get(this.props.event, 'ev') || {}
 		let pongs = sb.get(ev, 'data.message.pongs') || []
 		let hasLike = this.hasLike()
@@ -314,6 +329,32 @@ export default class Event extends Com {
 		)
 	}
 
+	renderAIDevNote() {
+		if (!this.props.isLast) return null
+		if (!this.props.store.isAIDevMode()) return null
+
+		let ev = sb.get(this.props.event, 'ev') || {}
+		let pongs = sb.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 (
+			<div class='message-event-actions'>
+				<div class={likecls} onClick={() => this.onSendReaction(hasLike ? 'remove_like' : 'like')}>
+					<div class='message-event-action-btn-svg like' /> Good
+				</div>
+				<div class={dislikecls} onClick={() => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')}>
+					<div class='message-event-action-btn-svg dislike' /> Bad
+				</div>
+			</div>
+		)
+	}
+
 	renderUpdateConvo(ev) {
 		var state = sb.get(ev, 'data.conversation.state')
 		if (state === 'active') return null

package/src/chatbox/InfoMessage.js

@@ -15,6 +15,7 @@ export default class InfoMessage extends Com {
 	render() {
 		let ev = this.props.ev.ev
 		var $time = null
+
 		if (this.props.ev.show_time) {
 			$time = (
 				<div class='convo-event-time'>
@@ -23,6 +24,8 @@ export default class InfoMessage extends Com {
 			)
 		}
 
+		if (this.props.store.isAIDevMode()) $time = null
+
 		// if (this.ev.type === 'conversation_rating_requested') return <div class="info-message"></div>
 		if (ev.type === 'conversation_rated') {
 			var rating = sb.get(ev, 'data.conversation.ratings.0', {no_rating: true, rating: 0})

package/src/chatbox/PoweredBy.js

@@ -1,8 +1,10 @@
 var logo = require('../../assets/img/subiz-mono.svg')
 import {h} from 'preact'
+
 export default function PoweredBy(props) {
 	// dont render on mobile
 	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}`

package/src/chatbox/TextMessage.js

@@ -16,7 +16,7 @@ export default class TextMessage extends Com {
 		var text = sb.get(this.props.ev, 'data.message.text')
 		text = sb.trim(text)
 		if (sb.size(text) === 0) return null
-
+		let t = new sb.Date(sb.get(this.props.ev, 'created')).toLocaleString()
 		let byType = sb.get(this.props.ev, 'by.type')
 		if (byType !== 'user') byType = 'agent'
 		var tags = sb.extractText(text).map((tag) => {
@@ -44,23 +44,33 @@ export default class TextMessage extends Com {
 		})
 
 		if (sb.size(tags) === 0) return null
-		if (byType === 'agent') return <div class='message-agent message-text--agent'>{tags}</div>
-		return <div class='message-user message-text--user'>{tags}</div>
+		if (byType === 'agent')
+			return (
+				<div class='message-agent message-text--agent' title={t}>
+					{tags}
+				</div>
+			)
+		return (
+			<div class='message-user message-text--user' title={t}>
+				{tags}
+			</div>
+		)
 	}
 
 	renderBlock(block) {
 		if (isEmptyBlock(block)) return null
+		let t = new sb.Date(sb.get(this.props.ev, 'created')).toLocaleString()
 		let byType = sb.get(this.props.ev, 'by.type')
 		if (byType !== 'user') byType = 'agent'
 		if (byType === 'agent') {
 			return (
-				<div class='message-agent message-text--agent'>
+				<div class='message-agent message-text--agent' title={t}>
 					<Block block={block} onLink={this.props.onLink} />
 				</div>
 			)
 		}
 		return (
-			<div class='message-user message-text--user'>
+			<div class='message-user message-text--user' title={t}>
 				<Block block={block} onLink={this.props.onLink} />
 			</div>
 		)

package/src/chatbox/Widget.js

@@ -130,11 +130,13 @@ export default class Widget extends Com {
 		let position = sb.get(accountSetting, 'desktop_button.position') || 'right'
 		if (this.props.store.isMobile()) position = sb.get(accountSetting, 'mobile_button.position', position)
 		let cls = 'widget-container widget-container--' + position
-		if (!this.props.store.isMobile() && sb.get(accountSetting, 'window_mode') === 'full')
+		if ( !this.props.store.isMobile() && sb.get(accountSetting, 'window_mode') === 'full')
 			cls += ' widget-container--full'
 		if (!this.props.isShow) cls += ' widget-container--hide'
-		return (
-			<div class={cls}>
+		let hideheader = sb.get(accountSetting, 'header.hidden', false)
+		var $header
+		if (!hideheader) {
+			$header = (
 				<Header
 					t={this.props.t}
 					plugin={this.props.plugin}
@@ -144,6 +146,11 @@ export default class Widget extends Com {
 					onClose={this.props.onClose}
 					onGotoList={() => this.props.onGo({view: 'list'})}
 				/>
+			)
+		}
+		return (
+			<div class={cls}>
+				{$header}
 				{$body}
 			</div>
 		)

package/src/lib.js

@@ -35,6 +35,10 @@ class Widget {
 		cb()
 	}
 
+	setAIDevMode(mode) {
+		this.store.setAIDevMode(mode)
+	}
+
 	setTrackPageView(val) {
 		this.store.setTrackPageview(val)
 	}

package/src/store/store.js

@@ -210,6 +210,18 @@ export default class Store {
 		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')
@@ -912,6 +924,7 @@ export default class Store {
 	_typing = sb.throttle((convoid) => this.api.sendTyping(convoid), 3000, {trailing: false})
 
 	async startConvo(req) {
+		if (!req) req = {}
 		await this.readyGate.entry()
 		this.convoGate.close()