@subiz/widget-v4 4.1.116 → 4.1.119

package/assets/less/base.less

@@ -1,6 +1,7 @@
 @import 'reboot.less';
 
 @white: #fff;
+@primary: rgb(15, 220, 174);
 @gray-100: #f8f9fa;
 @gray-200: #eeeeee;
 @gray-300: #dee2e6;

package/assets/less/chatbox.less

@@ -8,6 +8,8 @@
 // primary used in string
 @esc-primary-color-esc: '@esc-primary-color-esc';
 
+@primary-color-faded: '@primary_color_faded';
+
 @desktop-chat-button-width: '@desktop_button.width'; //70px;
 @desktop-chat-button-height: '@desktop_button.height'; //70px;
 @desktop-chat-button-background: '@background'; // '@desktop_button.background' ;

package/assets/less/message.less

@@ -9,6 +9,7 @@
 }
 
 .widget-body--events {
+	padding-top: 20px;
 	flex: 1;
 }
 
@@ -105,7 +106,6 @@
 	background-color: @primary-color;
 	.color(@text-color);
 
-
 	padding: 12px 16px 12px 16px;
 	//padding: 12px;
 }
@@ -113,12 +113,11 @@
 .message-text--agent {
 	white-space: pre-wrap;
 	display: inline-block;
-
-	background-color: @gray-200;
+	background: @primary-color-faded;
 	.color(@black);
-
 	padding: 12px 16px 12px 16px;
 }
+
 .message-agent.message-text--agent {
 	max-width: unset;
 	margin-top: 0;
@@ -405,17 +404,16 @@ a.message_error {
 		padding: 10px;
 		display: block;
 		text-align: center;
-		.color(@primary-color);
-		background: @white;
-		border-top: 1px solid @primary-color;
-		border-left: 1px solid @primary-color;
-		border-right: 1px solid @primary-color;
-
-		font-weight: 400;
-		font-size: 16px;
-		width: 85%;
+		.color(@black);
+		border: 1px solid @black;
+		border-radius: 12px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		font-weight: 500;
+		text-decoration: underline;
 		&:hover {
-			text-decoration: underline;
+			.color(@primary-color);
+			border-color: @primary-color;
 		}
 	}
 }
@@ -423,24 +421,31 @@ a.message_error {
 .message_quick_replies {
 	display: flex;
 	flex-wrap: wrap;
+	flex-direction: column;
 }
 
 .message_quick_reply {
 	cursor: pointer;
 	position: relative;
-	padding: 10px 15px;
-	border: 1px solid @primary-color;
-	margin-right: 10px;
-	margin-top: 10px;
-	.color(@primary-color);
-	border-radius: 5px;
+	padding: 10px 18px;
+	margin-top: 8px;
+	.color(@black);
+	border-radius: 12px;
 	user-select: none;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	width: fit-content;
+	overflow: hidden;
+	font-weight: 500;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	border: 1px solid @black;
 	&:hover {
 		background: @primary-color;
 		.color(@text-color);
+		border-color: @primary-color;
 	}
 }
 
@@ -759,15 +764,17 @@ a.product_attachment__title {
 }
 
 .agent-convo-event-inner {
-	width: fit-content;
 	position: relative;
+	display: inline-block;
+	max-width: 100%;
 }
 
 .message-event-actions {
 	position: absolute;
 	bottom: -18px;
 	margin-top: 4px;
-	left: calc(100% - 40px);
+	opacity: 0.7;
+	left: calc(100% - 25px);
 	display: none;
 	border: 1px solid #dee2e6;
 	background-color: white;
@@ -775,6 +782,10 @@ a.product_attachment__title {
 	z-index: 10;
 }
 
+.message-event-actions:hover {
+	opacity: 1;
+}
+
 .agent-convo-event-inner:hover .message-event-actions {
 	display: flex;
 }
@@ -885,6 +896,15 @@ a.product_attachment__title {
 .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');
 }
+
+.inline-time {
+	font-size: 13px;
+	margin-top: 6px;
+	.color(@black);
+	font-weight: 500;
+	opacity: 0.4;
+}

package/assets/less/message_input.less

@@ -8,6 +8,8 @@
 
 .message-input--disabled {
 	background: #F0F0F0;
+	opacity: 0.6;
+	filter: grayscale(1);
 }
 
 textarea[disabled=disabled] {

package/assets/less/order.less

@@ -425,7 +425,7 @@ div.order__card.order__card__active {
 .order_status {
 	text-transform: uppercase;
 	background: black;
-	.color (white);
+	.color(white);
 	display: inline-block;
 	border-radius: 4px;
 	padding: 6px 6px 4px 6px; // better for uppercase

package/assets/less/widget.less

@@ -67,6 +67,7 @@
 
 .convo-list--convo-last-mes {
 	text-overflow: ellipsis;
+	opacity: 0.6;
 	white-space: nowrap;
 	overflow: hidden;
 	font-weight: normal;
@@ -95,16 +96,16 @@
 
 .convo-list--item {
 	cursor: pointer;
-	border-bottom: 1px solid #f0f0f0;
+	border-bottom: 1px solid @primary-color-faded;
 	padding-left: 10px;
 	padding-right: 10px;
 	padding-bottom: 15px;
 	padding-top: 15px;
 	display: flex;
 	flex-direction: row;
-
+	transition: background 0.15s ease;
 	&:hover {
-		background: @gray-100;
+		background: @primary-color-faded;
 	}
 }
 
@@ -112,7 +113,7 @@
 	font-size: 13px;
 	line-height: 20px;
 	.color(@black);
-	opacity: 0.7;
+	opacity: 0.6;
 	min-width: 70px;
 	cursor: pointer;
 }
@@ -148,8 +149,7 @@
 .widget-body--empty-icon {
 	width: 128px;
 	height: 128px;
-	.inline-svg-code(
-		~'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g data-name="Layer 2"><path d="M130.9 366.9a9.9 9.9 0 0 0-2.9 7.1 10.33 10.33 0 0 0 2.9 7.1 9.73 9.73 0 0 0 7.1 2.9 10.33 10.33 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 10.52 10.52 0 0 0-2.9-7.1 9.9 9.9 0 0 0-7.1-2.9 10.33 10.33 0 0 0-7.1 2.9zM483.7 282a183.07 183.07 0 0 0 28.3-98C512 82.5 429.5 0 328 0a183.16 183.16 0 0 0-96 27 10 10 0 0 0 10.5 17.1A162.67 162.67 0 0 1 328 20c90.4 0 164 73.6 164 164a162.73 162.73 0 0 1-27.9 91.5 10.07 10.07 0 0 0 .3 11.6l11 40.9-44-11.8a10 10 0 0 0-8.4 1.5 164.32 164.32 0 0 1-151.8 20.2 138.68 138.68 0 0 0-97.1-97.1 164.31 164.31 0 0 1 14.5-143.2 10 10 0 0 0-17-10.6 184 184 0 0 0-19.9 149.6c-4.5-.4-9.1-.7-13.7-.7C61.9 236 0 297.9 0 374a136.88 136.88 0 0 0 22.9 76.1L12.2 490a10 10 0 0 0 12.3 12.3l40.9-11a137.71 137.71 0 0 0 146.5-.8 10 10 0 0 0-10.7-16.9 118.09 118.09 0 0 1-128.6-1.5 9.73 9.73 0 0 0-8.1-1.3L36 478.5l7.4-27.7a10 10 0 0 0-1.5-8.4 117.95 117.95 0 1 1 207-28 10 10 0 0 0 18.8 6.8 137.72 137.72 0 0 0 8.3-47.3 124.44 124.44 0 0 0-.7-13.7 183.93 183.93 0 0 0 155.3-23.6l56.2 15.1a10 10 0 0 0 12.3-12.3zm-246 162.2a10.52 10.52 0 0 0-7.1 2.9 9.73 9.73 0 0 0-2.9 7.1 10.33 10.33 0 0 0 2.9 7.1 9.73 9.73 0 0 0 7.1 2.9 10.52 10.52 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 9.9 9.9 0 0 0-10-10zM205.3 70.7a10.52 10.52 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 10.14 10.14 0 0 0-2.9-7.1 9.9 9.9 0 0 0-7.1-2.9 10.52 10.52 0 0 0-7.1 2.9 9.9 9.9 0 0 0-2.9 7.1 10.52 10.52 0 0 0 2.9 7.1 9.9 9.9 0 0 0 7.1 2.9zm-19.4 296.2a9.9 9.9 0 0 0-2.9 7.1 10.33 10.33 0 0 0 2.9 7.1 9.73 9.73 0 0 0 7.1 2.9 10.33 10.33 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 10.33 10.33 0 0 0-2.9-7.1 9.9 9.9 0 0 0-7.1-2.9 10.33 10.33 0 0 0-7.1 2.9zm210.8-201.1a9.8 9.8 0 0 0 5.2-1.5l1.3-.8a9.92 9.92 0 0 0 3.3-13.7 10.06 10.06 0 0 0-13.8-3.3l-1.3.8a10 10 0 0 0 5.3 18.5zm-68.1 107.4a58 58 0 0 0 57.9-57.9 7 7 0 0 0-7-7H277.7a7 7 0 0 0-7 7 58 58 0 0 0 57.9 57.9zm-43.5-50.9h87.1l-1 3.7a43.93 43.93 0 0 1-85.2 0zm-25.8-56.5a9.8 9.8 0 0 0 5.2-1.5l1.3-.8a9.92 9.92 0 0 0 3.3-13.7 10.06 10.06 0 0 0-13.8-3.3l-1.3.8a10 10 0 0 0 5.3 18.5zM75.9 366.9A9.9 9.9 0 0 0 73 374a10.33 10.33 0 0 0 2.9 7.1A9.73 9.73 0 0 0 83 384a10.33 10.33 0 0 0 7.1-2.9A9.73 9.73 0 0 0 93 374a10.33 10.33 0 0 0-2.9-7.1A9.9 9.9 0 0 0 83 364a10.33 10.33 0 0 0-7.1 2.9z" fill="#4285f4" data-name="Capa 1"/></g></svg>'
+	.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g data-name="Layer 2"><path d="M130.9 366.9a9.9 9.9 0 0 0-2.9 7.1 10.33 10.33 0 0 0 2.9 7.1 9.73 9.73 0 0 0 7.1 2.9 10.33 10.33 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 10.52 10.52 0 0 0-2.9-7.1 9.9 9.9 0 0 0-7.1-2.9 10.33 10.33 0 0 0-7.1 2.9zM483.7 282a183.07 183.07 0 0 0 28.3-98C512 82.5 429.5 0 328 0a183.16 183.16 0 0 0-96 27 10 10 0 0 0 10.5 17.1A162.67 162.67 0 0 1 328 20c90.4 0 164 73.6 164 164a162.73 162.73 0 0 1-27.9 91.5 10.07 10.07 0 0 0 .3 11.6l11 40.9-44-11.8a10 10 0 0 0-8.4 1.5 164.32 164.32 0 0 1-151.8 20.2 138.68 138.68 0 0 0-97.1-97.1 164.31 164.31 0 0 1 14.5-143.2 10 10 0 0 0-17-10.6 184 184 0 0 0-19.9 149.6c-4.5-.4-9.1-.7-13.7-.7C61.9 236 0 297.9 0 374a136.88 136.88 0 0 0 22.9 76.1L12.2 490a10 10 0 0 0 12.3 12.3l40.9-11a137.71 137.71 0 0 0 146.5-.8 10 10 0 0 0-10.7-16.9 118.09 118.09 0 0 1-128.6-1.5 9.73 9.73 0 0 0-8.1-1.3L36 478.5l7.4-27.7a10 10 0 0 0-1.5-8.4 117.95 117.95 0 1 1 207-28 10 10 0 0 0 18.8 6.8 137.72 137.72 0 0 0 8.3-47.3 124.44 124.44 0 0 0-.7-13.7 183.93 183.93 0 0 0 155.3-23.6l56.2 15.1a10 10 0 0 0 12.3-12.3zm-246 162.2a10.52 10.52 0 0 0-7.1 2.9 9.73 9.73 0 0 0-2.9 7.1 10.33 10.33 0 0 0 2.9 7.1 9.73 9.73 0 0 0 7.1 2.9 10.52 10.52 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 9.9 9.9 0 0 0-10-10zM205.3 70.7a10.52 10.52 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 10.14 10.14 0 0 0-2.9-7.1 9.9 9.9 0 0 0-7.1-2.9 10.52 10.52 0 0 0-7.1 2.9 9.9 9.9 0 0 0-2.9 7.1 10.52 10.52 0 0 0 2.9 7.1 9.9 9.9 0 0 0 7.1 2.9zm-19.4 296.2a9.9 9.9 0 0 0-2.9 7.1 10.33 10.33 0 0 0 2.9 7.1 9.73 9.73 0 0 0 7.1 2.9 10.33 10.33 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 10.33 10.33 0 0 0-2.9-7.1 9.9 9.9 0 0 0-7.1-2.9 10.33 10.33 0 0 0-7.1 2.9zm210.8-201.1a9.8 9.8 0 0 0 5.2-1.5l1.3-.8a9.92 9.92 0 0 0 3.3-13.7 10.06 10.06 0 0 0-13.8-3.3l-1.3.8a10 10 0 0 0 5.3 18.5zm-68.1 107.4a58 58 0 0 0 57.9-57.9 7 7 0 0 0-7-7H277.7a7 7 0 0 0-7 7 58 58 0 0 0 57.9 57.9zm-43.5-50.9h87.1l-1 3.7a43.93 43.93 0 0 1-85.2 0zm-25.8-56.5a9.8 9.8 0 0 0 5.2-1.5l1.3-.8a9.92 9.92 0 0 0 3.3-13.7 10.06 10.06 0 0 0-13.8-3.3l-1.3.8a10 10 0 0 0 5.3 18.5zM75.9 366.9A9.9 9.9 0 0 0 73 374a10.33 10.33 0 0 0 2.9 7.1A9.73 9.73 0 0 0 83 384a10.33 10.33 0 0 0 7.1-2.9A9.73 9.73 0 0 0 93 374a10.33 10.33 0 0 0-2.9-7.1A9.9 9.9 0 0 0 83 364a10.33 10.33 0 0 0-7.1 2.9z" fill="#4285f4" data-name="Capa 1"/></g></svg>'
 	);
 	-webkit-mask-image: @-inline-svg-url;
 	border-radius: 0;
@@ -215,19 +215,19 @@
 	align-items: center;
 	position: @widget-position;
 	margin-bottom: @desktop-chat-button-margin-y;
-	bottom: 0;
-
-	bottom: 0; // variable
-	opacity: 1;
-	transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1);
 
 	width: @widget-width;
 	height: @widget-height;
 
 	bottom: 0; // variable
 	opacity: 1;
-	transition: opacity 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+	transform: translateY(0);
+	transition:
+		transform 0.15s cubic-bezier(1, 0.5, 0.8, 1),
+		opacity 0.2s cubic-bezier(1, 0.5, 0.8, 1),
+		scale 0.15s ease;
 	visibility: visible;
+	overflow: hidden;
 }
 
 .widget-container.widget-container--full {
@@ -238,8 +238,10 @@
 
 .widget-container.widget-container--hide {
 	opacity: 0;
+	transform: translateY(20px);
 	visibility: hidden;
 	transition:
+		transform 0.15s cubic-bezier(1, 0.5, 0.8, 1),
 		opacity 0.1s cubic-bezier(1, 0.5, 0.8, 1),
 		visibility 0.1s cubic-bezier(1, 0.5, 0.8, 1);
 }
@@ -252,18 +254,24 @@
 	height: 40px;
 	.color(@text-color);
 	font-size: 16px;
+	font-weight: 500;
 	line-height: 20px;
 	text-align: center;
 	background: @primary-color;
-	max-width: 270px;
-	width: 70%;
+	// max-width: 270px;
+	width: 100%;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 
+	transition: filter 250ms ease;
+
 	&::after {
 		display: none;
 	}
+	&:hover {
+		filter: brightness(1.1);
+	}
 }
 
 .btn--start-convo:disabled {
@@ -319,8 +327,6 @@
 				opacity: 1;
 			}
 		}
-
-
 	}
 }
 
@@ -385,6 +391,17 @@
 .chat-button {
 	cursor: pointer;
 	position: relative;
+	scale: 1;
+	transition:
+		filter 250ms ease,
+		opacity 0.4s ease,
+		scale 0.125s ease-in-out,
+		transform 0.2s ease-in-out;
+}
+
+.chat-button:hover {
+	filter: brightness(1.1);
+	scale: 1.05;
 }
 
 .chat-button--img {

package/assets/less/widget_header.less

@@ -1,7 +1,7 @@
 .widget-header {
 	z-index: -1;
 	position: relative;
-	// transition: height 0.2s;
+	 transition: height 0.2s;
 	border-radius: 15px 15px 0px 0px;
 	background: @background;
 	.color(@text-color);
@@ -25,7 +25,6 @@
 
 .widget-header--collapsed {
 	height: auto;
-
 }
 
 .widget-header--inner.widget-header--inner--collapsed {
@@ -89,10 +88,10 @@
 		text-align: center;
 		margin-top: 15px;
 		white-space: pre-wrap;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
 	}
 }
 
@@ -115,7 +114,7 @@
 
 	transform: scale(0);
 	animation-duration: 0.05s;
-  animation-name: hide;
+	animation-name: hide;
 }
 
 .widget-header--title-container {
@@ -127,18 +126,18 @@
 	z-index: 1;
 }
 
-.widget-header--button {
-	padding: 3px;
-	border-radius: 5px;
-	position: relative;
-	cursor: pointer;
-}
-
 .widget-header--button-close {
 	display: flex;
 	justify-self: flex-end;
 	align-items: center;
 	align-self: flex-start;
+
+	transition: scale 0.15s ease, filter 0.15s ease;
+	filter: brightness(0.95);
+	&:hover {
+		filter: brightness(1.1);
+		scale: 1.1;
+	}
 }
 
 .widget-header--button-close-icon {
@@ -147,6 +146,7 @@
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center;
+
 	width: 24px;
 	height: 24px;
 	display: block;
@@ -154,19 +154,24 @@
 }
 
 .widget-header--button-back {
-	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jaGV2cm9uLWxlZnQiPjxwb2x5bGluZSBwb2ludHM9IjE1IDE4IDkgMTIgMTUgNiI+PC9wb2x5bGluZT48L3N2Zz4K');
+	background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IndoaXRlIiAgc3Ryb2tlLXdpZHRoPSIyIiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTQgNmwxNiAwIiAvPjxwYXRoIGQ9Ik00IDEybDE2IDAiIC8+PHBhdGggZD0iTTQgMThsMTYgMCIgLz48L3N2Zz4K');
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: 24px 24px;
-	width: 40px;
-	height: 30px;
+	width: 24px;
+	height: 24px;
 	display: block;
-	cursor: pointer;
 	position: relative;
-	margin-left: -9px;
+
 	cursor: pointer;
-	top: 2px;
+	scale: 1;
+	transition: scale 0.15s ease, filter 0.15s ease;
+	filter: brightness(0.95);
+	&:hover {
+		filter: brightness(1.1);
+		scale: 1.1;
+	}
 }
 
 .widget-header--has-convo-unred .widget-header--button-back {
@@ -224,9 +229,9 @@
 	.color(@text-color);
 	max-height: 72px;
 	overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
 }
 
 .social__links {
@@ -244,43 +249,37 @@
 	background-repeat: no-repeat;
 	background-position: center;
 	display: block;
-	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
 }
 
 .social__links-logo--facebook {
-	.inline-svg-code(
-		'<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="15" r="15" fill="#0264FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.2944 29.8252C16.5464 29.9404 15.7803 30 15 30C14.0962 30 13.2109 29.9199 12.3511 29.7666V18.4775H10V14.4287H12.3511V11.8086C12.3511 9.93457 13.2744 7 17.3384 7L21 7.01465V10.9453H18.3433C17.9075 10.9453 17.2947 11.1553 17.2947 12.0488V14.4326H20.989L20.5571 18.4775H17.2944V29.8252Z" fill="white"/></svg>'
+	.inline-svg-code('<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="15" r="15" fill="#0264FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.2944 29.8252C16.5464 29.9404 15.7803 30 15 30C14.0962 30 13.2109 29.9199 12.3511 29.7666V18.4775H10V14.4287H12.3511V11.8086C12.3511 9.93457 13.2744 7 17.3384 7L21 7.01465V10.9453H18.3433C17.9075 10.9453 17.2947 11.1553 17.2947 12.0488V14.4326H20.989L20.5571 18.4775H17.2944V29.8252Z" fill="white"/></svg>'
 	);
 	background-image: @-inline-svg-url;
 }
 
 .social__links-logo--messenger {
-	.inline-svg-code(
-		~'<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30" rx="15" fill="#007FFF"/><rect x="4.28564" y="6" width="21.4286" height="18.8571" fill="white"/><path d="M14.9478 14.5713C14.8228 14.5917 14.6974 14.6104 14.5715 14.6276C14.6974 14.6104 14.8228 14.5917 14.9478 14.5713Z" fill="black"/><path d="M14.7507 14.5713C14.691 14.5823 14.6313 14.5923 14.5715 14.6026C14.6313 14.5923 14.691 14.5823 14.7507 14.5713Z" fill="black"/><path d="M15.0126 14.5713C14.8663 14.5878 14.7192 14.6024 14.5715 14.6148C14.7192 14.6024 14.8663 14.5878 15.0126 14.5713Z" fill="black"/><path d="M14.783 14.5713C14.7128 14.5807 14.642 14.5894 14.5715 14.5976C14.642 14.5894 14.7128 14.5807 14.783 14.5713Z" fill="black"/><path d="M14.7299 14.5713C14.6773 14.5825 14.6244 14.5937 14.5715 14.6045C14.6244 14.5937 14.6773 14.5825 14.7299 14.5713Z" fill="black"/><path d="M14.6992 14.5713C14.6567 14.5834 14.6141 14.5949 14.5715 14.6068C14.6141 14.5949 14.6567 14.5834 14.6992 14.5713Z" fill="black"/><path d="M14.7107 14.5713C14.6645 14.5834 14.618 14.5958 14.5715 14.6075C14.618 14.5958 14.6645 14.5836 14.7107 14.5713Z" fill="black"/><path d="M14.7194 14.5713C14.6704 14.5827 14.621 14.5935 14.5715 14.6045C14.621 14.5935 14.6704 14.5827 14.7194 14.5713Z" fill="black"/><path d="M14.8087 14.5713C14.7297 14.5779 14.6507 14.5839 14.5715 14.5891C14.6507 14.5839 14.7297 14.5779 14.8087 14.5713Z" fill="black"/><path d="M15.0417 14.5713C14.8856 14.5814 14.7288 14.5894 14.5715 14.5946C14.7288 14.5894 14.8856 14.5814 15.0417 14.5713Z" fill="black"/><path d="M14.8206 14.5713C14.7377 14.574 14.6546 14.5761 14.5715 14.5775C14.6546 14.5761 14.7377 14.574 14.8206 14.5713Z" fill="black"/><path d="M14.1547 12.3174L9.29419 17.4636L13.7176 15.0365L16.0288 17.4636L20.8621 12.3174L16.4877 14.7019L14.1547 12.3174Z" fill="#448AFF"/><path d="M15 0C6.717 0 0 6.717 0 15C0 23.283 6.717 30 15 30C23.283 30 30 23.283 30 15C30 6.717 23.283 0 15 0ZM15.1172 23.0294C14.1886 23.0294 13.2923 22.8983 12.4491 22.6554L9.42421 24.375V21.14C7.39815 19.5982 6.10428 17.2501 6.10428 14.6203C6.10428 9.97581 10.1395 6.21094 15.1172 6.21094C20.0951 6.21094 24.1301 9.97581 24.1301 14.6203C24.1301 19.2643 20.0951 23.0294 15.1172 23.0294V23.0294Z" fill="#007FFF"/></svg>'
+	.inline-svg-code(~'<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30" rx="15" fill="#007FFF"/><rect x="4.28564" y="6" width="21.4286" height="18.8571" fill="white"/><path d="M14.9478 14.5713C14.8228 14.5917 14.6974 14.6104 14.5715 14.6276C14.6974 14.6104 14.8228 14.5917 14.9478 14.5713Z" fill="black"/><path d="M14.7507 14.5713C14.691 14.5823 14.6313 14.5923 14.5715 14.6026C14.6313 14.5923 14.691 14.5823 14.7507 14.5713Z" fill="black"/><path d="M15.0126 14.5713C14.8663 14.5878 14.7192 14.6024 14.5715 14.6148C14.7192 14.6024 14.8663 14.5878 15.0126 14.5713Z" fill="black"/><path d="M14.783 14.5713C14.7128 14.5807 14.642 14.5894 14.5715 14.5976C14.642 14.5894 14.7128 14.5807 14.783 14.5713Z" fill="black"/><path d="M14.7299 14.5713C14.6773 14.5825 14.6244 14.5937 14.5715 14.6045C14.6244 14.5937 14.6773 14.5825 14.7299 14.5713Z" fill="black"/><path d="M14.6992 14.5713C14.6567 14.5834 14.6141 14.5949 14.5715 14.6068C14.6141 14.5949 14.6567 14.5834 14.6992 14.5713Z" fill="black"/><path d="M14.7107 14.5713C14.6645 14.5834 14.618 14.5958 14.5715 14.6075C14.618 14.5958 14.6645 14.5836 14.7107 14.5713Z" fill="black"/><path d="M14.7194 14.5713C14.6704 14.5827 14.621 14.5935 14.5715 14.6045C14.621 14.5935 14.6704 14.5827 14.7194 14.5713Z" fill="black"/><path d="M14.8087 14.5713C14.7297 14.5779 14.6507 14.5839 14.5715 14.5891C14.6507 14.5839 14.7297 14.5779 14.8087 14.5713Z" fill="black"/><path d="M15.0417 14.5713C14.8856 14.5814 14.7288 14.5894 14.5715 14.5946C14.7288 14.5894 14.8856 14.5814 15.0417 14.5713Z" fill="black"/><path d="M14.8206 14.5713C14.7377 14.574 14.6546 14.5761 14.5715 14.5775C14.6546 14.5761 14.7377 14.574 14.8206 14.5713Z" fill="black"/><path d="M14.1547 12.3174L9.29419 17.4636L13.7176 15.0365L16.0288 17.4636L20.8621 12.3174L16.4877 14.7019L14.1547 12.3174Z" fill="#448AFF"/><path d="M15 0C6.717 0 0 6.717 0 15C0 23.283 6.717 30 15 30C23.283 30 30 23.283 30 15C30 6.717 23.283 0 15 0ZM15.1172 23.0294C14.1886 23.0294 13.2923 22.8983 12.4491 22.6554L9.42421 24.375V21.14C7.39815 19.5982 6.10428 17.2501 6.10428 14.6203C6.10428 9.97581 10.1395 6.21094 15.1172 6.21094C20.0951 6.21094 24.1301 9.97581 24.1301 14.6203C24.1301 19.2643 20.0951 23.0294 15.1172 23.0294V23.0294Z" fill="#007FFF"/></svg>'
 	);
 	background-image: @-inline-svg-url;
 }
 
 .social__links-logo--email {
-	.inline-svg-code(
-		~'<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.6875 12.9688C21.9375 13.5625 20.3125 14.75 17.875 16.5L17.5625 16.75C17.0625 17.125 16.6875 17.4062 16.375 17.5625C15.875 17.875 15.4062 18 15 18C14.5625 18 14.125 17.875 13.625 17.5938C13.3125 17.4375 12.9375 17.1562 12.4375 16.7812L12.125 16.5C9.59375 14.6875 8 13.5 7.3125 12.9688C7.25 12.9375 7.15625 12.9375 7.09375 12.9688C7.03125 13 7 13.0625 7 13.125V19.5C7 19.9375 7.125 20.2812 7.4375 20.5625C7.71875 20.875 8.0625 21 8.5 21H21.5C21.9062 21 22.25 20.875 22.5625 20.5625C22.8438 20.2812 23 19.9375 23 19.5V13.125C23 13.0625 22.9375 13 22.875 12.9375C22.8125 12.9062 22.75 12.9062 22.6875 12.9688ZM15 17C14.7188 17 14.375 16.875 14 16.625C13.75 16.5 13.4375 16.2812 13.0312 15.9375L12.7188 15.7188C10.1562 13.8438 8.40625 12.5625 7.5 11.8438L7.28125 11.6875C7.09375 11.5625 7 11.3438 7 11.0938V10.5C7 10.0938 7.125 9.75 7.4375 9.4375C7.71875 9.15625 8.0625 9 8.5 9H21.5C21.9062 9 22.25 9.15625 22.5625 9.4375C22.8438 9.75 23 10.0938 23 10.5V11.0938C23 11.3438 22.9062 11.5625 22.7188 11.6875L22.5625 11.8125C21.6562 12.5312 19.9062 13.8438 17.2812 15.7188L16.9688 15.9375C16.5312 16.2812 16.2188 16.5 16 16.625C15.5938 16.875 15.25 17 15 17Z" fill="white"/></svg>'
+	.inline-svg-code(~'<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.6875 12.9688C21.9375 13.5625 20.3125 14.75 17.875 16.5L17.5625 16.75C17.0625 17.125 16.6875 17.4062 16.375 17.5625C15.875 17.875 15.4062 18 15 18C14.5625 18 14.125 17.875 13.625 17.5938C13.3125 17.4375 12.9375 17.1562 12.4375 16.7812L12.125 16.5C9.59375 14.6875 8 13.5 7.3125 12.9688C7.25 12.9375 7.15625 12.9375 7.09375 12.9688C7.03125 13 7 13.0625 7 13.125V19.5C7 19.9375 7.125 20.2812 7.4375 20.5625C7.71875 20.875 8.0625 21 8.5 21H21.5C21.9062 21 22.25 20.875 22.5625 20.5625C22.8438 20.2812 23 19.9375 23 19.5V13.125C23 13.0625 22.9375 13 22.875 12.9375C22.8125 12.9062 22.75 12.9062 22.6875 12.9688ZM15 17C14.7188 17 14.375 16.875 14 16.625C13.75 16.5 13.4375 16.2812 13.0312 15.9375L12.7188 15.7188C10.1562 13.8438 8.40625 12.5625 7.5 11.8438L7.28125 11.6875C7.09375 11.5625 7 11.3438 7 11.0938V10.5C7 10.0938 7.125 9.75 7.4375 9.4375C7.71875 9.15625 8.0625 9 8.5 9H21.5C21.9062 9 22.25 9.15625 22.5625 9.4375C22.8438 9.75 23 10.0938 23 10.5V11.0938C23 11.3438 22.9062 11.5625 22.7188 11.6875L22.5625 11.8125C21.6562 12.5312 19.9062 13.8438 17.2812 15.7188L16.9688 15.9375C16.5312 16.2812 16.2188 16.5 16 16.625C15.5938 16.875 15.25 17 15 17Z" fill="white"/></svg>'
 	);
 	background-image: @-inline-svg-url;
 }
 
 .social__links-logo--zalo {
-	.inline-svg-code(
-		~'<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.9999 14.9385C29.9669 6.68262 23.2639 0 15 0C6.7157 0 0 6.71582 0 15C0 23.2842 6.7157 30 15 30C23.2639 30 29.9669 23.3174 29.9999 15.0615C29.9999 15.041 30 15.0205 30 15C30 14.9795 29.9999 14.959 29.9999 14.9385Z" fill="white"/><path d="M24.5612 17.4695C22.9394 17.4726 21.6242 16.1862 21.6279 14.6005C21.6316 13.0345 22.9474 11.7445 24.5473 11.7383C26.1556 11.732 27.4826 13.0349 27.4786 14.6162C27.4746 16.1926 26.1719 17.4665 24.5612 17.4695ZM22.8416 14.6183C22.8459 15.5573 23.6166 16.3004 24.5777 16.2923C25.5165 16.2845 26.2699 15.5301 26.2673 14.6005C26.2646 13.6712 25.51 12.9317 24.56 12.9277C23.6012 12.9237 22.8373 13.6751 22.8416 14.6183Z" fill="#0068FE"/><path d="M19.5054 10.0762H20.795V17.4217H19.9447C19.7021 17.4217 19.5054 17.225 19.5054 16.9823V10.0762Z" fill="#0068FE"/><path d="M18.5227 11.8907H17.2881V12.2935C16.5767 11.8601 15.8509 11.6775 15.06 11.831C14.2526 11.9876 13.6164 12.4043 13.167 13.0917C12.4538 14.1826 12.5894 15.5904 13.4938 16.5431C14.3504 17.4454 15.8628 17.8178 17.2815 16.9247C17.2835 16.934 17.286 16.9422 17.2881 16.9511V16.9826C17.2881 17.2252 17.4849 17.422 17.7275 17.422H18.5227V11.8907V11.8907ZM15.5853 16.2787C14.6636 16.268 13.8924 15.5006 13.8986 14.6004C13.9048 13.692 14.6716 12.9481 15.602 12.9479C16.5427 12.9477 17.2871 13.6781 17.2882 14.6026C17.2893 15.5333 16.521 16.2896 15.5853 16.2787Z" fill="#0068FE"/><path d="M8.0481 16.2438C9.39854 14.5856 10.6939 12.9885 11.9984 11.3989C12.2464 11.0968 12.3662 10.7671 12.3731 10.3807C12.3761 10.2135 12.3261 10.1646 12.1596 10.165C11.6056 10.1666 6.41195 10.165 6.41195 10.165V11.4709H10.4978C10.4424 11.543 7.83556 14.7218 6.57932 16.2403C6.37112 16.4919 6.26503 16.7645 6.25401 17.0936C6.24628 17.3242 6.28864 17.4139 6.52267 17.4211V17.4217H11.9356C12.1782 17.4217 12.3749 17.225 12.3749 16.9823V16.2487V16.2438H8.0481V16.2438Z" fill="#0068FE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.948 26.1338C6.03613 27.1172 7.26917 27.9424 8.61108 28.5752V26.1338H4.948ZM0.00268555 14.7119C0.0775146 10.7393 1.69666 7.14453 4.28479 4.50293C4.0459 4.98242 3.83435 5.47949 3.64661 5.99121C2.58862 8.87598 2.31299 11.8506 2.69116 14.8916C2.95862 17.042 3.55518 19.0869 4.63391 20.9775C4.8269 21.3154 5.02271 21.6582 5.26489 21.9609C5.76672 22.5879 5.80981 23.2725 5.59888 24.0049C5.4873 24.3926 5.32227 24.75 5.11304 25.082C4.95691 25.3291 4.77612 25.5635 4.57434 25.7842C1.81921 23.1201 0.0819092 19.4102 0.00280762 15.2939C0.000976562 15.1963 0 15.0986 0 15C0 14.9033 0.000854492 14.8076 0.00268555 14.7119Z" fill="#0068FE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24.8226 26.3367C22.191 28.6189 18.7568 29.9998 15 29.9998C11.1449 29.9998 7.62952 28.5457 4.97241 26.156C6.32458 26.1921 7.61877 25.9031 8.86353 25.3464C8.97681 25.2957 9.06262 25.3113 9.16443 25.364C12.2258 26.9646 15.5131 27.5125 18.926 27.3962C20.9574 27.3269 22.9333 27.0046 24.8226 26.3367Z" fill="#015BDF"/></svg>'
+	.inline-svg-code(~'<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.9999 14.9385C29.9669 6.68262 23.2639 0 15 0C6.7157 0 0 6.71582 0 15C0 23.2842 6.7157 30 15 30C23.2639 30 29.9669 23.3174 29.9999 15.0615C29.9999 15.041 30 15.0205 30 15C30 14.9795 29.9999 14.959 29.9999 14.9385Z" fill="white"/><path d="M24.5612 17.4695C22.9394 17.4726 21.6242 16.1862 21.6279 14.6005C21.6316 13.0345 22.9474 11.7445 24.5473 11.7383C26.1556 11.732 27.4826 13.0349 27.4786 14.6162C27.4746 16.1926 26.1719 17.4665 24.5612 17.4695ZM22.8416 14.6183C22.8459 15.5573 23.6166 16.3004 24.5777 16.2923C25.5165 16.2845 26.2699 15.5301 26.2673 14.6005C26.2646 13.6712 25.51 12.9317 24.56 12.9277C23.6012 12.9237 22.8373 13.6751 22.8416 14.6183Z" fill="#0068FE"/><path d="M19.5054 10.0762H20.795V17.4217H19.9447C19.7021 17.4217 19.5054 17.225 19.5054 16.9823V10.0762Z" fill="#0068FE"/><path d="M18.5227 11.8907H17.2881V12.2935C16.5767 11.8601 15.8509 11.6775 15.06 11.831C14.2526 11.9876 13.6164 12.4043 13.167 13.0917C12.4538 14.1826 12.5894 15.5904 13.4938 16.5431C14.3504 17.4454 15.8628 17.8178 17.2815 16.9247C17.2835 16.934 17.286 16.9422 17.2881 16.9511V16.9826C17.2881 17.2252 17.4849 17.422 17.7275 17.422H18.5227V11.8907V11.8907ZM15.5853 16.2787C14.6636 16.268 13.8924 15.5006 13.8986 14.6004C13.9048 13.692 14.6716 12.9481 15.602 12.9479C16.5427 12.9477 17.2871 13.6781 17.2882 14.6026C17.2893 15.5333 16.521 16.2896 15.5853 16.2787Z" fill="#0068FE"/><path d="M8.0481 16.2438C9.39854 14.5856 10.6939 12.9885 11.9984 11.3989C12.2464 11.0968 12.3662 10.7671 12.3731 10.3807C12.3761 10.2135 12.3261 10.1646 12.1596 10.165C11.6056 10.1666 6.41195 10.165 6.41195 10.165V11.4709H10.4978C10.4424 11.543 7.83556 14.7218 6.57932 16.2403C6.37112 16.4919 6.26503 16.7645 6.25401 17.0936C6.24628 17.3242 6.28864 17.4139 6.52267 17.4211V17.4217H11.9356C12.1782 17.4217 12.3749 17.225 12.3749 16.9823V16.2487V16.2438H8.0481V16.2438Z" fill="#0068FE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.948 26.1338C6.03613 27.1172 7.26917 27.9424 8.61108 28.5752V26.1338H4.948ZM0.00268555 14.7119C0.0775146 10.7393 1.69666 7.14453 4.28479 4.50293C4.0459 4.98242 3.83435 5.47949 3.64661 5.99121C2.58862 8.87598 2.31299 11.8506 2.69116 14.8916C2.95862 17.042 3.55518 19.0869 4.63391 20.9775C4.8269 21.3154 5.02271 21.6582 5.26489 21.9609C5.76672 22.5879 5.80981 23.2725 5.59888 24.0049C5.4873 24.3926 5.32227 24.75 5.11304 25.082C4.95691 25.3291 4.77612 25.5635 4.57434 25.7842C1.81921 23.1201 0.0819092 19.4102 0.00280762 15.2939C0.000976562 15.1963 0 15.0986 0 15C0 14.9033 0.000854492 14.8076 0.00268555 14.7119Z" fill="#0068FE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24.8226 26.3367C22.191 28.6189 18.7568 29.9998 15 29.9998C11.1449 29.9998 7.62952 28.5457 4.97241 26.156C6.32458 26.1921 7.61877 25.9031 8.86353 25.3464C8.97681 25.2957 9.06262 25.3113 9.16443 25.364C12.2258 26.9646 15.5131 27.5125 18.926 27.3962C20.9574 27.3269 22.9333 27.0046 24.8226 26.3367Z" fill="#015BDF"/></svg>'
 	);
 	background-image: @-inline-svg-url;
 }
 
 @keyframes hide {
-
-  100% {
-    opacity: 0;
+	100% {
+		opacity: 0;
 		transform: scale(0);
-  }
+	}
 }
 
 .widget-header-expand-container {

package/compiled_src/chatbox/AgentsAvatar.js

@@ -40,7 +40,7 @@ function AgentsAvatar(props) {
     }
   }
   agents = _index.default.filter(agents, ag => !!ag);
-  if (agents.length === 0) {
+  if (agents.length === 0 || props.agent_ids === undefined || _index.default.size(props.agent_ids) === 0) {
     return (0, _preact.h)("div", {
       class: `group-avatar group-avatar--${mode}`
     }, (0, _preact.h)("div", {

package/compiled_src/chatbox/Event.js

@@ -37,9 +37,12 @@ class Event extends _common.Com {
   render() {
     var ev = _index.default.get(this.props.event, 'ev', {});
     switch (ev.type) {
+      case 'conversation_typing':
+        return this.renderTyping();
       case 'conversation_joined':
         break;
       case 'message_sent':
+        if (this.props.event.is_typing) return this.renderTyping();
         return this.renderMessageSent();
       case 'conversation_state_updated':
       case 'conversation_rating_requested':
@@ -151,19 +154,72 @@ class Event extends _common.Com {
       OrderAttachments = (await LoadOrderAttachments()).default;
     });
   }
+  renderTyping() {
+    let innercls = 'agent-convo-event-inner';
+    var html = `
+<html>
+  <head>
+    <style>
+      .typing-container {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        justify-content: center;
+      }
+      .typing-dot {
+        display: inline-block;
+        vertical-align: middle;
+        width: 8px;
+        height: 8px;
+        background: black;
+        border-radius: 50%;
+        animation: typing 0.5s infinite alternate;
+      }
+      .typing-dot:nth-of-type(2) {
+        animation-delay: 0.2s;
+      }
+      .typing-dot:nth-of-type(3) {
+        animation-delay: 0.6s;
+      }
+      @keyframes typing {
+        0% {
+          opacity: 0.9;
+        }
+        100% {
+          opacity: 0.4;
+        }
+      }
+    </style>
+  </head>
+  <body style="padding: 0; margin: 0">
+    <div class="typing-container">
+      <span class="typing-dot"></span>
+      <span class="typing-dot"></span>
+      <span class="typing-dot"></span>
+    </div>
+  </body>
+</html>
+`;
+    let src = 'data:text/html,' + encodeURIComponent(html);
+    return (0, _preact.h)("div", {
+      class: "convo-event agent-message"
+    }, (0, _preact.h)("div", {
+      class: "agent-convo-event-wrapper"
+    }, (0, _preact.h)("div", {
+      class: innercls
+    }, (0, _preact.h)("div", {
+      class: "message-agent message-text--agent",
+      style: "opacity: 0.6 !important"
+    }, (0, _preact.h)("iframe", {
+      src: src,
+      style: "width: 35px !important; height: 20px !important; display: block !important; overflow: hidden !important; padding: 0 !important "
+    })))));
+  }
   renderMessageSent() {
     let ev = this.props.event.ev;
     this.tryLoadOrder(ev);
-    var $time = null;
-    if (this.props.event.show_time) {
-      $time = (0, _preact.h)("div", {
-        class: "convo-event-time"
-      }, (0, _preact.h)(_time.default, {
-        time: ev.created,
-        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;
@@ -172,11 +228,13 @@ class Event extends _common.Com {
       if (this.props.isLast) innercls += ' last';
       return (0, _preact.h)("div", {
         class: "convo-event agent-message"
-      }, $time, $sender, (0, _preact.h)("div", {
+      }, $sender, (0, _preact.h)("div", {
         class: "agent-convo-event-wrapper"
       }, (0, _preact.h)("div", {
         class: innercls
       }, (0, _preact.h)(_TextMessage.default, {
+        showTime: this.props.event.show_time,
+        isLast: this.props.isLast,
         store: this.props.store,
         ev: ev,
         onLink: this.props.onLink
@@ -240,9 +298,6 @@ class Event extends _common.Com {
       });
     }
     let $sender = null;
-    if (this.props.event.mode === 'lead') $sender = (0, _preact.h)("div", {
-      class: "pt-3"
-    });
     let $error = null;
     if (ev._error && ev.type === 'message_sent') {
       let msg = this.props.t('error_send_message');
@@ -259,7 +314,7 @@ class Event extends _common.Com {
     }
     return (0, _preact.h)("div", {
       class: "convo-event user-message"
-    }, $time, $sender, (0, _preact.h)("div", {
+    }, $sender, (0, _preact.h)("div", {
       class: "message-user__container"
     }, $dot, (0, _preact.h)(_TextMessage.default, {
       store: this.props.store,