@subiz/widget-v4 4.1.121 → 4.1.123

package/assets/less/avatar.less

@@ -24,18 +24,6 @@
 	border-radius: 35px;
 }
 
-.group-avatar--member {
-	align-self: center;
-	width: 65px;
-}
-
-.group-avatar--member .avatar {
-	position: relative;
-	width: 35px;
-	height: 35px;
-	border-radius: 35px;
-}
-
 .group-avatar--primary .group-avatar--agent-middle {
 	width: 50px;
 	height: 50px;
@@ -70,20 +58,3 @@
 	z-index: 1;
 	margin-left: -15px;
 }
-
-.group-avatar--member .group-avatar--agent-left {
-	border: 2px solid @white;
-	z-index: 3;
-}
-
-.group-avatar--member .group-avatar--agent-middle {
-	border: 2px solid @white;
-	z-index: 2;
-	margin-left: -20px;
-}
-
-.group-avatar--member .group-avatar--agent-right {
-	border: 2px solid @white;
-	z-index: 1;
-	margin-left: -20px;
-}

package/assets/less/chatbox.less

@@ -31,13 +31,13 @@
 @widget-position: '@widget_position';
 
 @spacer: 15px;
-@spacer1: @spacer * 0.25; // 3.75px
-@spacer2: @spacer * 0.5; // 7.5px
-@spacer3: @spacer; // 15px;
-@spacer4: @spacer * 1.5; // 22.5px
+@spacer1: @spacer * 0.5; // 3.75px
+@spacer2: @spacer * 1; // 7.5px
+@spacer3: @spacer * 1.5; // 15px;
+@spacer4: @spacer * 2; // 22.5px
 
-@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-family-sans-serif: -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: 16px; // Assumes the browser default, typically `16px`
 
@@ -155,7 +155,6 @@ body div#sbz92 {
 	.ml-1 {
 		margin-left: @spacer1;
 	}
-
 	.pl-2 {
 		padding-left: @spacer2;
 	}
@@ -168,7 +167,6 @@ body div#sbz92 {
 	.mt-1 {
 		margin-top: @spacer1;
 	}
-
 	.mt-2 {
 		margin-top: @spacer2;
 	}
@@ -178,7 +176,6 @@ body div#sbz92 {
 	.mr-2 {
 		margin-right: @spacer2;
 	}
-
 	.pt-3 {
 		padding-top: @spacer3;
 	}
@@ -245,7 +242,7 @@ body div#sbz92 {
 		justify-content: center;
 		display: flex;
 		flex-direction: column;
-		background: white
+		background: white;
 	}
 
 	@import 'avatar.less';

package/assets/less/form.less

@@ -38,6 +38,8 @@ input.form-control[disabled] {
 
 .form-control--valid-input--error {
 	.color(@red);
+	font-size: 14px;
+	padding-top: 5px;
 }
 
 input[type='text'].form-control.input--error,
@@ -45,7 +47,8 @@ input[type='number'].form-control.input--error,
 input[type='date'].form-control.input--error,
 textarea.form-control.input--error,
 select.form-control.input--error {
-	border: 1px solid red;
+	border: 1px solid @red;
+	background: #dd41500f;
 }
 
 input[type='text'].form-control,
@@ -55,12 +58,16 @@ textarea.form-control,
 select.form-control {
 	width: 100%;
 
-	border: 1px solid #d8d8d8;
-	border-radius: 5px;
-
-	padding: 8px;
+	border: 1px solid @gray-400;
+	border-radius: 8px;
+	transition: all 100ms ease;
+	padding: 10px 12px;
 	&:hover {
-		border: 1px solid #888;
+		border: 1px solid @gray-600;
+	}
+
+	&.input--error:hover {
+		border: 1px solid @red;
 	}
 }
 
@@ -76,11 +83,21 @@ select.form-control:focus {
 	border: 1px solid @primary-color;
 }
 
+input[type='text'].form-control.input--error:focus,
+input[type='number'].form-control.input--error:focus,
+input[type='date'].form-control.input--error:focus,
+textarea.form-control.input--error:focus,
+select.form-control.input--error:focus {
+	border: 1px solid @red;
+}
+
 .label {
 	display: block;
-	margin-bottom: 3px;
-	margin-top: 10px;
-	opacity: 0.7;
+	padding-bottom: 6px;
+	margin-top: 8px;
+	.color(@gray-600);
+	font-size: 14px;
+	font-weight: 500;
 }
 
 .form--btn-submit {

package/assets/less/message.less

@@ -4,8 +4,8 @@
 	display: flex;
 	flex-direction: column;
 	flex: 1;
-	padding-left: 15px;
-	padding-right: 15px;
+	padding-left: @spacer3;
+	padding-right: @spacer3;
 }
 
 .widget-body--events {
@@ -99,6 +99,7 @@
 }
 
 .message-text--user {
+	line-height: 1.5;
 	margin: 5px 0 0;
 	display: inline-block;
 	font-weight: 500;
@@ -110,7 +111,12 @@
 	//padding: 12px;
 }
 
+.message-text--user.message-user--error {
+	background-color: @red;
+}
+
 .message-text--agent {
+	line-height: 1.5;
 	white-space: pre-wrap;
 	display: inline-block;
 	background: @primary-color-faded;
@@ -176,11 +182,14 @@
 
 a.message_error {
 	.color(@red);
+	opacity: 0.8;
 	display: block;
 	text-align: end;
 	font-size: 13px;
+	margin-top: 5px;
 	margin-bottom: 10px;
 	&:hover {
+		opacity: 1;
 		.color(@red);
 	}
 }
@@ -246,7 +255,6 @@ a.message_error {
 	width: 25px;
 	height: 25px;
 	margin-right: 10px;
-	border: 1px solid @gray-300;
 }
 
 .message-sender-name {
@@ -401,7 +409,7 @@ a.message_error {
 .agent-message {
 	.url-button-attachment {
 		text-decoration: none;
-		padding: 10px;
+		padding: 10px 18px;
 		display: block;
 		text-align: center;
 		.color(@black);
@@ -415,6 +423,7 @@ a.message_error {
 			.color(@primary-color);
 			border-color: @primary-color;
 		}
+		white-space: nowrap;
 	}
 }
 
@@ -434,12 +443,9 @@ a.message_error {
 	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 {
@@ -447,6 +453,7 @@ a.message_error {
 		.color(@text-color);
 		border-color: @primary-color;
 	}
+	transition: all 100ms ease;
 }
 
 .generic-attachment-container {

package/assets/less/message_input.less

@@ -3,7 +3,7 @@
 	border-top: 1px solid #e3e3e3;
 	display: flex;
 	flex-direction: row;
-	padding: 15px;
+	padding: @spacer2 @spacer3;
 }
 
 .message-input--disabled {
@@ -83,8 +83,7 @@ textarea[disabled=disabled] {
 
 .message-input--preform {
 	justify-content: center;
-	padding-top: 10px;
-	padding-bottom: 10px;
+	padding: @spacer2 @spacer3;
 }
 
 .btn--preform {

package/assets/less/widget.less

@@ -19,12 +19,11 @@
 }
 
 .convo-list--title {
-	font-size: 18px;
-	line-height: 20px;
+	font-weight: 500;
 	.color(@black);
 	background: @white;
 	border-bottom: 1px solid #f0f0f0;
-	padding: @spacer3;
+	padding: @spacer2;
 }
 
 .convo-list--container {
@@ -44,8 +43,6 @@
 }
 
 .convo-list--convo-last-info {
-	font-size: 15px;
-	line-height: 20px;
 	overflow: hidden;
 	white-space: nowrap;
 	justify-content: center;
@@ -88,19 +85,15 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
-	font-weight: 500;
 	flex: 1;
-	margin-right: 20px;
+	margin-right: 16px;
 	cursor: pointer;
 }
 
 .convo-list--item {
 	cursor: pointer;
 	border-bottom: 1px solid @primary-color-faded;
-	padding-left: 10px;
-	padding-right: 10px;
-	padding-bottom: 15px;
-	padding-top: 15px;
+	padding: @spacer2;
 	display: flex;
 	flex-direction: row;
 	transition: background 0.15s ease;
@@ -248,6 +241,7 @@
 
 .btn--start-convo {
 	border-radius: 7px;
+	flex-shrink: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;

package/assets/less/widget_header.less

@@ -1,25 +1,26 @@
 .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);
 	width: 100%;
 
 	.widget-header--total-unread-convo {
-		display: none;
-		margin: 0 10px 10px 0;
+		font-size: 13px;
+		font-weight: 500;
 		background: #ef000d;
-		font-weight: 400;
 		display: flex;
-		border-radius: 5px;
+		border-radius: 50%;
 		justify-content: center;
+		align-items: center;
 		width: 20px;
 		height: 20px;
+		position: absolute;
 		cursor: pointer;
-		position: relative;
-		top: 5px;
+		right: -8px;
+		top: -4px;
 	}
 }
 
@@ -29,7 +30,7 @@
 
 .widget-header--inner.widget-header--inner--collapsed {
 	height: auto;
-	padding: 15px;
+	padding: @spacer2 @spacer3;
 	position: relative;
 
 	.widget-header--title {
@@ -58,7 +59,7 @@
 
 .widget-header--inner.widget-header--inner--expanded {
 	height: 224px;
-	padding: 15px;
+	padding: @spacer2 @spacer3;
 
 	.widget-header--top-wrapper {
 		display: flex;
@@ -122,19 +123,23 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	margin-left: 10px;
 	z-index: 1;
 }
 
 .widget-header--button-close {
 	display: flex;
+	border-radius: 6px;
 	justify-self: flex-end;
 	align-items: center;
 	align-self: flex-start;
-
-	transition: scale 0.15s ease, filter 0.15s ease;
+	opacity: 0.6;
+	transition:
+		opacity 0.15s ease,
+		scale 0.15s ease,
+		filter 0.15s ease;
 	filter: brightness(0.95);
 	&:hover {
+		opacity: 1;
 		filter: brightness(1.1);
 		scale: 1.1;
 	}
@@ -146,7 +151,6 @@
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center;
-
 	width: 24px;
 	height: 24px;
 	display: block;
@@ -166,7 +170,9 @@
 
 	cursor: pointer;
 	scale: 1;
-	transition: scale 0.15s ease, filter 0.15s ease;
+	transition:
+		scale 0.15s ease,
+		filter 0.15s ease;
 	filter: brightness(0.95);
 	&:hover {
 		filter: brightness(1.1);
@@ -174,12 +180,10 @@
 	}
 }
 
-.widget-header--has-convo-unred .widget-header--button-back {
-	width: 20px;
-}
-
 .widget-header--wrap-button-back {
 	display: flex;
+	position: relative;
+	margin-right: @spacer1;
 }
 
 .fade-enter-active,

package/compiled_src/chatbox/AgentsAvatar.js

@@ -30,7 +30,7 @@ function AgentsAvatar(props) {
   }
   let agentM = props.store.matchAgent('*');
   var agents = _index.default.map(props.agent_ids, id => agentM[id]);
-  if (props.agent_ids === undefined || _index.default.size(props.agent_ids) === 0) {
+  if (props.agent_ids !== undefined && _index.default.size(props.agent_ids) == 0) {
     var agids = _index.default.get(accountSetting, 'header.agent_ids', []);
     agids = _index.default.filter(agids, id => !!agentM[id]);
     if (agids.length !== 0) {
@@ -40,7 +40,7 @@ function AgentsAvatar(props) {
     }
   }
   agents = _index.default.filter(agents, ag => !!ag);
-  if (agents.length === 0 || props.agent_ids === undefined || _index.default.size(props.agent_ids) === 0) {
+  if (_index.default.size(agents) === 0) {
     return (0, _preact.h)("div", {
       class: `group-avatar group-avatar--${mode}`
     }, (0, _preact.h)("div", {

package/compiled_src/chatbox/Event.js

@@ -21,6 +21,9 @@ var _time = _interopRequireDefault(require("./time.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 let OrderAttachments = false;
@@ -28,6 +31,13 @@ const LoadOrderAttachments = () => Promise.resolve().then(() => _interopRequireW
 class Event extends _common.Com {
   constructor(props) {
     super(props);
+    _defineProperty(this, "resendMessage", () => {
+      let cid = _index.default.convoOfEv(this.props.event.ev);
+      const message = _index.default.get(this.props.event, 'ev.data.message');
+      this.props.store.sendConvoEvent(cid, 'message_sent', {
+        message
+      });
+    });
     this.props.store.onConvoEvent(this, ev => this.onEvent(ev));
     this.refForm = (0, _preact.createRef)();
     this.state = {
@@ -318,18 +328,19 @@ class Event extends _common.Com {
       class: "pt-3"
     });
     let $error = null;
+    if (ev._error) $dot = null;
     if (ev._error && ev.type === 'message_sent') {
       let msg = this.props.t('error_send_message');
       if (ev._error_message) msg = this.props.t(ev._error_message);
       $error = (0, _preact.h)("a", {
         class: "message_error",
         src: "javascript:;",
-        onClick: e => this.resendMessage()
+        onClick: this.resendMessage
       }, (0, _preact.h)("div", {
-        class: "message_error__text"
-      }, msg), (0, _preact.h)("div", {
         class: "message_error__icon"
-      }));
+      }), "\xA0", (0, _preact.h)("div", {
+        class: "message_error__text"
+      }, msg));
     }
     return (0, _preact.h)("div", {
       class: "convo-event user-message"
@@ -480,13 +491,6 @@ class Event extends _common.Com {
       state
     }));
   }
-  resendMessage() {
-    let cid = _index.default.convoOfEv(this.props.event.ev);
-    const message = _index.default.get(this.props.event, 'ev.data.message');
-    this.props.store.sendConvoEvent(cid, 'message_sent', {
-      message
-    });
-  }
   getSenderName(ev) {
     let bytype = _index.default.get(ev, 'by.type');
     let byid = _index.default.get(ev, 'by.display_id', _index.default.get(ev, 'by.id'));

package/compiled_src/chatbox/Events.js

@@ -301,7 +301,7 @@ function processEvents(convo, events) {
     }
     if (visibleEvent(curEvent.ev)) {
       let elapsedSec = _index.default.unixSec(curEvent.ev.created) - _index.default.unixSec(lastEvent.ev.created);
-      if (elapsedSec > 120) curEvent.show_time = true;
+      if (elapsedSec > 300) curEvent.show_time = true;
     }
   }
   if (lastAgentEvent) lastAgentEvent.show_time = true;
@@ -326,7 +326,10 @@ function processEvents(convo, events) {
 }
 function visibleEvent(ev) {
   let type = _index.default.get(ev, 'type');
-  return type === 'message_sent' || type === 'conversation_state_updated';
+  if (type === 'message_sent') return true;
+  if (type === 'conversation_state_updated') {
+    return _index.default.get(ev, 'data.conversation.state') == 'ended';
+  }
 }
 function isSummited(form) {
   let fields = _index.default.get(form, 'fields') || [];

package/compiled_src/chatbox/Header.js

@@ -50,12 +50,6 @@ class Header extends _common.Com {
       class: cls,
       style: style
     }, $back, (0, _preact.h)("div", {
-      class: "mr-2"
-    }), (0, _preact.h)(_AgentsAvatar.default, {
-      plugin: this.props.plugin,
-      store: this.props.store,
-      mode: "secondary"
-    }), (0, _preact.h)("div", {
       class: "widget-header--title-container"
     }, (0, _preact.h)("div", {
       class: "widget-header--title"
@@ -147,7 +141,8 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
     }, (0, _preact.h)(_AgentsAvatar.default, {
       plugin: this.props.plugin,
       store: this.props.store,
-      mode: "primary"
+      mode: "primary",
+      agent_ids: []
     })), (0, _preact.h)("div", {
       class: "widget-header--title-container"
     }, (0, _preact.h)("div", {

package/compiled_src/chatbox/TextMessage.js

@@ -63,8 +63,10 @@ class TextMessage extends _common.Com {
       class: "message-agent message-text--agent",
       title: t
     }, tags, this.renderTime());
+    let msgcls = 'message-user message-text--user';
+    if (this.props.ev._error) msgcls += ' message-user--error';
     return (0, _preact.h)("div", {
-      class: "message-user message-text--user",
+      class: msgcls,
       title: t
     }, tags);
   }
@@ -82,8 +84,10 @@ class TextMessage extends _common.Com {
         onLink: this.props.onLink
       }), this.renderTime());
     }
+    let msgcls = 'message-user message-text--user';
+    if (this.props.ev._error) msgcls += ' message-user--error';
     return (0, _preact.h)("div", {
-      class: "message-user message-text--user",
+      class: msgcls,
       title: t
     }, (0, _preact.h)(_block.default, {
       block: block,