@subiz/widget-v4 4.1.120 → 4.1.122

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: 14px;
+	.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;
@@ -111,6 +112,7 @@
 }
 
 .message-text--agent {
+	line-height: 1.5;
 	white-space: pre-wrap;
 	display: inline-block;
 	background: @primary-color-faded;
@@ -246,7 +248,6 @@ a.message_error {
 	width: 25px;
 	height: 25px;
 	margin-right: 10px;
-	border: 1px solid @gray-300;
 }
 
 .message-sender-name {
@@ -401,7 +402,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 +416,7 @@ a.message_error {
 			.color(@primary-color);
 			border-color: @primary-color;
 		}
+		white-space: nowrap;
 	}
 }
 
@@ -434,12 +436,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 +446,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,7 +123,7 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	margin-left: 10px;
+	margin-left: @spacer2;
 	z-index: 1;
 }
 
@@ -132,7 +133,9 @@
 	align-items: center;
 	align-self: flex-start;
 
-	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);
@@ -166,7 +169,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 +179,9 @@
 	}
 }
 
-.widget-header--has-convo-unred .widget-header--button-back {
-	width: 20px;
-}
-
 .widget-header--wrap-button-back {
 	display: flex;
+	position: relative;
 }
 
 .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

@@ -315,7 +315,7 @@ class Event extends _common.Com {
     }
     let $sender = null;
     if (this.props.event.mode === 'lead') $sender = (0, _preact.h)("div", {
-      class: "pt-2"
+      class: "pt-3"
     });
     let $error = null;
     if (ev._error && ev.type === 'message_sent') {

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

@@ -13,6 +13,7 @@ var _time = _interopRequireDefault(require("./time.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class TextMessage extends _common.Com {
   renderTime() {
+    return null;
     if (!this.props.showTime && !this.props.isLast && !this.props.isFirst) return null;
     return (0, _preact.h)("div", null, (0, _preact.h)(_time.default, {
       class: "inline-time",

package/compiled_src/chatbox/Widget.js

@@ -228,26 +228,25 @@ class Widget extends _common.Com {
       class: cls
     }, $header, $body);
   }
-  async submitPrechatForm(form, formName) {
-    if (this.state.submiting) return;
-    var hasError = false;
-    _index.default.map(this.state.formData, (field, key) => {
+  validateForm(formData) {
+    let newformdata = {};
+    _index.default.map(formData, (field, key) => {
+      field = Object.assign({}, field);
+      field.is_empty_error = false;
       if (field.is_required && (field.value === undefined || field.value === '' || _index.default.size(field.value) === 0 && Array.isArray(field.value))) {
+        field.is_empty_error = true;
         field.error = this.props.t('error_empty');
-        hasError = true;
       } else field.error = '';
       if (key.substr(5) === 'emails') {
         if (field.is_required) {
           if (!_index.default.isEmail(field.value)) {
             field.error = this.props.t('error_email_invalid');
-            hasError = true;
           }
         } else {
           let value = field.value || '';
           if (typeof value !== 'string') value = value + '';
           if (value.trim() && !_index.default.isEmail(field.value)) {
             field.error = this.props.t('error_email_invalid');
-            hasError = true;
           }
         }
       }
@@ -255,19 +254,30 @@ class Widget extends _common.Com {
         if (field.is_required) {
           if (!_index.default.isPhone(field.value)) {
             field.error = this.props.t('error_phone_invalid');
-            hasError = true;
           }
         } else {
           let value = field.value || '';
           if (typeof value !== 'string') value = value + '';
           if (value.trim() && !_index.default.isPhone(field.value)) {
             field.error = this.props.t('error_phone_invalid');
-            hasError = true;
           }
         }
       }
+      newformdata[key] = field;
     });
-    if (hasError) return this.forceUpdate();
+    return newformdata;
+  }
+  async submitPrechatForm(form, formName) {
+    if (this.state.submiting) return;
+    let newData = this.validateForm(this.state.formData);
+    let hasError = _index.default.find(newData, field => !!field.error);
+    if (hasError) {
+      this.setState({
+        formData: newData
+      });
+      this.focusInput();
+      return;
+    }
     let data = _index.default.cloneDeep(this.state.formData);
     let user = _index.default.cloneDeep(this.props.store.matchUser());
     let is_lead = false;
@@ -391,6 +401,7 @@ class Widget extends _common.Com {
     let field = _index.default.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
     field.value = val;
+    field.error = undefined;
     this.setState({
       formData
     });
@@ -517,7 +528,7 @@ class Widget extends _common.Com {
       if (field.type === 'text') {
         if (key == 'question' || _index.default.get(field, 'def.multiple_line')) {
           $field = (0, _preact.h)("textarea", {
-            class: "form-control",
+            class: `form-control ${errclass}`,
             ref: ref => {
               this['form_' + encode(key)] = ref;
             },
@@ -525,8 +536,7 @@ class Widget extends _common.Com {
             value: field.value || '',
             onInput: e => this.onInputChange(key, e.target.value),
             onChange: e => this.onInputChange(key, e.target.value),
-            row: "4",
-            class: "form-control"
+            row: "4"
           });
         } else if (_index.default.get(field, 'def.select') === 'checkbox') {
           $field = this.renderCheckboxField(field);
@@ -628,9 +638,9 @@ class Widget extends _common.Com {
         for: 'form_' + encode(key)
       }, label, field.is_required ? (0, _preact.h)("span", {
         class: "ml-1 red"
-      }, "*") : ''), field.error ? (0, _preact.h)("div", {
+      }, "*") : ''), $field, field.error ? (0, _preact.h)("div", {
         class: "form-control--valid-input--error"
-      }, field.error) : '', $field);
+      }, field.error) : '');
     });
     return (0, _preact.h)("div", {
       class: "pt-2"
@@ -640,6 +650,10 @@ class Widget extends _common.Com {
     let title = this.props.t.i18n(_index.default.get(form, `i18n_title`, {}));
     if (!title) title = _index.default.get(form, 'title', this.props.t('capture_lead_title'));
     title = title.replace('↵', '');
+    let btncls = 'btn--start-convo ';
+    let hasError = _index.default.find(this.state.formData, field => !!field.error);
+    let newData = this.validateForm(this.state.formData);
+    let hasEmptyError = _index.default.find(newData, field => !!field.is_empty_error);
     return (0, _preact.h)("div", {
       class: "widget-body"
     }, (0, _preact.h)(FormMounter, {
@@ -649,21 +663,16 @@ class Widget extends _common.Com {
     }), (0, _preact.h)("div", {
       class: "widget-body--content flex-grow-1 pl-3 pr-3 d-flex flex-column"
     }, (0, _preact.h)("div", {
-      class: "flex-grow-1"
-    }, (0, _preact.h)("div", {
-      class: "form mt-3 pl-3 pr-3 pt-3 pb-3 d-flex flex-column"
-    }, (0, _preact.h)("div", null, title), this.renderFields(form, formName))), (0, _preact.h)("div", {
-      class: "mt-2"
-    }), (0, _preact.h)(_PoweredBy.default, {
-      store: this.props.store,
-      t: this.props.t
-    })), (0, _preact.h)("div", {
-      class: "message-input message-input--preform"
-    }, (0, _preact.h)("button", {
-      class: "btn--start-convo",
+      class: "mt-3 d-flex flex-column"
+    }, (0, _preact.h)("div", null, title), this.renderFields(form, formName)), (0, _preact.h)("div", {
+      style: "min-height: 15px !important; flex: 1 !important; flex-shrink: 0 !important"
+    }), (0, _preact.h)("button", {
+      class: btncls,
       onClick: _ => this.submitPrechatForm(form, formName),
-      disabled: this.state.creating
-    }, submitLabel)));
+      disabled: !!hasEmptyError || !!hasError || this.state.creating
+    }, submitLabel)), (0, _preact.h)("div", {
+      class: "mt-2"
+    }));
   }
   goToConvo(cid) {
     this.props.onGo({
@@ -689,10 +698,10 @@ class Widget extends _common.Com {
       }, (0, _preact.h)(_AgentsAvatar.default, {
         plugin: this.props.plugin,
         store: this.props.store,
-        mode: "member",
+        mode: "secondary",
         class: "d-flex flex-row",
         tooltipPos: "right",
-        agent_ids: agentids
+        agent_ids: [agentids[0]]
       }), this.renderConvoSummary(convo));
     });
     let $body = (0, _preact.h)("div", {
@@ -718,7 +727,9 @@ class Widget extends _common.Com {
       class: "convo-list--title"
     }, this.props.t('conversations')), $body), (0, _preact.h)("div", {
       class: "convo-list--footer"
-    }, (0, _preact.h)("button", {
+    }, (0, _preact.h)(_PoweredBy.default, {
+      store: this.props.store
+    }), (0, _preact.h)("button", {
       class: "btn--start-convo",
       onClick: _ => this.goToConvo('')
     }, (0, _preact.h)("span", null, this.props.t('start_conversation')), (0, _preact.h)("img", {
@@ -728,8 +739,6 @@ class Widget extends _common.Com {
       height: "26"
     })), (0, _preact.h)("div", {
       class: "mt-2"
-    }), (0, _preact.h)(_PoweredBy.default, {
-      store: this.props.store
     })));
   }
   blur() {
@@ -742,17 +751,21 @@ class Widget extends _common.Com {
   focusInput(text) {
     if (this.props.store.isPreview) return;
     if (this.shouldShowForm()) {
-      let firstemptykey = '';
+      let focusfieldkey = '';
       _index.default.map(this.state.formData, (field, key) => {
-        if (field.type !== 'text') return;
-        if (firstemptykey) return;
-        if (!field.value) firstemptykey = key;
+        if (focusfieldkey || field.type !== 'text') return;
+        if (!field.value || field.error) focusfieldkey = key;
       });
+      var $input = this['form_' + encode(focusfieldkey)];
+      if ($input) $input.focus();
       _index.default.setTimeout(() => {
-        var $input = this['form_' + encode(firstemptykey)];
-        if (!$input) return;
-        $input.focus();
-      }, 300);
+        _index.default.map(this.state.formData, (field, key) => {
+          if (focusfieldkey || field.type !== 'text') return;
+          if (!field.value || field.error) focusfieldkey = key;
+        });
+        var $input = this['form_' + encode(focusfieldkey)];
+        if ($input) $input.focus();
+      }, 200);
       return;
     }
     var $input = this.msgInput.current;