@subiz/widget-v4 4.1.121 → 4.1.123

package/dist/screenshoot.js

@@ -863,7 +863,7 @@ function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 	// the polling loop starts after the first subscribe call finished successfully
 	var polling = function (backoff) {
 		if (dead) return
-		callAPI('get', apiUrl + 'poll?token=' + lastToken + '&account-id=' + accid, undefined, function (body, code) {
+		callAPI('get', apiUrl + 'poll?version=2&token=' + lastToken + '&account-id=' + accid, undefined, function (body, code) {
 			if (dead) return
 			if (retryable(code)) return setTimeout(polling, calcNextBackoff(backoff), backoff + 1)
 			if (code !== 200) {
@@ -899,7 +899,7 @@ function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 						else if (credential.user_mask) query += '&user-mask=' + encodeURIComponent(credential.user_mask)
 						else if (access_token) query += '&access-token=' + access_token
 
-						let fullurl = apiUrl + 'subs' + query + '&account-id=' + encodeURIComponent(accid || credential.account_id)
+						let fullurl = apiUrl + 'subs' + query + '&version=2&account-id=' + encodeURIComponent(accid || credential.account_id)
 						callAPI('post', fullurl, JSON.stringify({events: events}), function (body, code) {
 							if (dead) {
 								out = repeat('dead', events.length)
@@ -3064,7 +3064,7 @@ function replaceCssVariablePlugin(css, setting) {
     green: 238
   };
   let hue = rgbToHsl(parseColor.red, parseColor.green, parseColor.blue)[0];
-  let [r, g, b] = hslToRgb(hue, 0.5, 0.95);
+  let [r, g, b] = hslToRgb(hue, 0.25, 0.95);
   DEFVAL.primary_color_faded = `rgb(${r},${g},${b})`;
   var ret = [];
   for (var i = 0; i < tokens.length; i++) {
@@ -3115,7 +3115,7 @@ function replaceCssVariable(css, setting) {
     green: 238
   };
   let hue = rgbToHsl(parseColor.red, parseColor.green, parseColor.blue)[0];
-  let [r, g, b] = hslToRgb(hue, 0.5, 0.95);
+  let [r, g, b] = hslToRgb(hue, 0.25, 0.95);
   DEFVAL.primary_color_faded = `rgb(${r},${g},${b})`;
   var ret = [];
   for (var i = 0; i < tokens.length; i++) {
@@ -4161,7 +4161,11 @@ function jsonifyTextPlain(param, done) {
       let outuser;
       for (let i = 0; true; i++) {
         outuser = await ajax.setBaseUrl(this.ApiURL).withCredentials(true).addQuery('v', '6').addQuery('x-user-ref', this.ref).setParser('json').get(`/accounts/${this.accid}/users/${this.ref}`);
-        if (outuser.error && util/* default */.A.get(outuser, 'body.error.code', '').indexOf('locked_account') != -1) break;
+        if (util/* default */.A.get(outuser, 'body.error.code', '').indexOf('locked_account') != -1) break;
+        if (util/* default */.A.get(outuser, 'body.error.code', '').indexOf('user_is_banned') != -1) {
+          await util/* default */.A.sleep(120000);
+          continue;
+        }
         if (!util/* default */.A.get(outuser, 'body.id')) {
           let sleeptime = Math.min(2000 + i * 400, 60000);
           await util/* default */.A.sleep(sleeptime);
@@ -5190,7 +5194,7 @@ class Store {
     }, 1000);
   }
   async reconnectWs(accid, userid) {
-    await this.realtime.subscribe([`conversation_state_updated.account.${accid}.user.${userid}`, `conversation_joined.account.${accid}.user.${userid}`, `conversation_typing.account.${accid}.user.${userid}`, `message_sent.account.${accid}.user.${userid}`, `conversation_pending.account.${accid}.user.${userid}`, `user_info_updated.account.${accid}.user.${userid}`, `message_pong.account.${accid}.user.${userid}`, `conversation_rating_requested.account.${accid}.user.${userid}`, `conversation_rated.account.${accid}.user.${userid}`]);
+    await this.realtime.subscribe([`conversation_state_updated.account.${accid}.user.${userid}`, `conversation_joined.account.${accid}.user.${userid}`, `conversation_typing.account.${accid}.user.${userid}`, `message_sent.account.${accid}.user.${userid}`, `message_pong.account.${accid}.user.${userid}`, `conversation_rating_requested.account.${accid}.user.${userid}`, `conversation_rated.account.${accid}.user.${userid}`]);
     await this.readyGate.entry();
     this.disconnect('account');
     return this.reconnect();
@@ -5327,9 +5331,10 @@ class Store {
     if (!ev || !ev.type) return;
     ev.created = util/* default */.A.getMs(ev.created);
     if (ev.type === 'user_info_updated') {
-      let user = util/* default */.A.cloneDeep(this.cache.match('user'));
-      let attrs = util/* default */.A.get(ev, 'data.user.attributes') || [];
-      util/* default */.A.map(attrs, attr => util/* default */.A.setUserAttr(user, attr));
+      return;
+      let user = sb.cloneDeep(this.cache.match('user'));
+      let attrs = sb.get(ev, 'data.user.attributes') || [];
+      sb.map(attrs, attr => sb.setUserAttr(user, attr));
       this._setUser(user);
       return;
     }
@@ -5351,8 +5356,6 @@ class Store {
       }
     }
     if (!convo) return;
-    let channel = util/* default */.A.get(ev, 'touchpoint.channel', '');
-    if (channel && channel != 'subiz') return;
     this.pubsub.publish('events', ev);
     if (ev.type === 'conversation_joined') {
       let members = util/* default */.A.get(ev, 'data.conversation.members', []);
@@ -6334,7 +6337,7 @@ function AgentsAvatar(props) {
   }
   let agentM = props.store.matchAgent('*');
   var agents = util/* default */.A.map(props.agent_ids, id => agentM[id]);
-  if (props.agent_ids === undefined || util/* default */.A.size(props.agent_ids) === 0) {
+  if (props.agent_ids !== undefined && util/* default */.A.size(props.agent_ids) == 0) {
     var agids = util/* default */.A.get(accountSetting, 'header.agent_ids', []);
     agids = util/* default */.A.filter(agids, id => !!agentM[id]);
     if (agids.length !== 0) {
@@ -6344,7 +6347,7 @@ function AgentsAvatar(props) {
     }
   }
   agents = util/* default */.A.filter(agents, ag => !!ag);
-  if (agents.length === 0 || props.agent_ids === undefined || util/* default */.A.size(props.agent_ids) === 0) {
+  if (util/* default */.A.size(agents) === 0) {
     return (0,preact_module.h)("div", {
       class: `group-avatar group-avatar--${mode}`
     }, (0,preact_module.h)("div", {
@@ -6486,12 +6489,6 @@ class Header extends common/* Com */.Mw {
       class: cls,
       style: style
     }, $back, (0,preact_module.h)("div", {
-      class: "mr-2"
-    }), (0,preact_module.h)(AgentsAvatar, {
-      plugin: this.props.plugin,
-      store: this.props.store,
-      mode: "secondary"
-    }), (0,preact_module.h)("div", {
       class: "widget-header--title-container"
     }, (0,preact_module.h)("div", {
       class: "widget-header--title"
@@ -6583,7 +6580,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_module.h)(AgentsAvatar, {
       plugin: this.props.plugin,
       store: this.props.store,
-      mode: "primary"
+      mode: "primary",
+      agent_ids: []
     })), (0,preact_module.h)("div", {
       class: "widget-header--title-container"
     }, (0,preact_module.h)("div", {
@@ -8021,10 +8019,11 @@ var chatbox_time = __webpack_require__(1620);
 
 class TextMessage extends common/* Com */.Mw {
   renderTime() {
+    return null;
     if (!this.props.showTime && !this.props.isLast && !this.props.isFirst) return null;
-    return (0,preact_module.h)("div", null, (0,preact_module.h)(chatbox_time/* default */.A, {
+    return h("div", null, h(Time, {
       class: "inline-time",
-      time: util/* default */.A.get(this.props.ev, 'created', util/* default */.A.Date.now()),
+      time: sb.get(this.props.ev, 'created', sb.Date.now()),
       t: this.props.t
     }));
   }
@@ -8070,8 +8069,10 @@ class TextMessage extends common/* Com */.Mw {
       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_module.h)("div", {
-      class: "message-user message-text--user",
+      class: msgcls,
       title: t
     }, tags);
   }
@@ -8089,8 +8090,10 @@ class TextMessage extends common/* Com */.Mw {
         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_module.h)("div", {
-      class: "message-user message-text--user",
+      class: msgcls,
       title: t
     }, (0,preact_module.h)(chatbox_block/* default */.A, {
       block: block,
@@ -8139,6 +8142,9 @@ class InfoMessage extends common/* Com */.Mw {
   }
 }
 ;// ./src/chatbox/Event.js
+function Event_defineProperty(e, r, t) { return (r = Event_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function Event_toPropertyKey(t) { var i = Event_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function Event_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); }
 
 
 
@@ -8160,6 +8166,13 @@ const LoadOrderAttachments = () => __webpack_require__.e(/* import() */ 127).the
 class Event extends common/* Com */.Mw {
   constructor(props) {
     super(props);
+    Event_defineProperty(this, "resendMessage", () => {
+      let cid = util/* default */.A.convoOfEv(this.props.event.ev);
+      const message = util/* default */.A.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_module/* createRef */._3)();
     this.state = {
@@ -8447,21 +8460,22 @@ class Event extends common/* Com */.Mw {
     }
     let $sender = null;
     if (this.props.event.mode === 'lead') $sender = (0,preact_module.h)("div", {
-      class: "pt-2"
+      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_module.h)("a", {
         class: "message_error",
         src: "javascript:;",
-        onClick: e => this.resendMessage()
+        onClick: this.resendMessage
       }, (0,preact_module.h)("div", {
-        class: "message_error__text"
-      }, msg), (0,preact_module.h)("div", {
         class: "message_error__icon"
-      }));
+      }), "\xA0", (0,preact_module.h)("div", {
+        class: "message_error__text"
+      }, msg));
     }
     return (0,preact_module.h)("div", {
       class: "convo-event user-message"
@@ -8612,13 +8626,6 @@ class Event extends common/* Com */.Mw {
       state
     }));
   }
-  resendMessage() {
-    let cid = util/* default */.A.convoOfEv(this.props.event.ev);
-    const message = util/* default */.A.get(this.props.event, 'ev.data.message');
-    this.props.store.sendConvoEvent(cid, 'message_sent', {
-      message
-    });
-  }
   getSenderName(ev) {
     let bytype = util/* default */.A.get(ev, 'by.type');
     let byid = util/* default */.A.get(ev, 'by.display_id', util/* default */.A.get(ev, 'by.id'));
@@ -8930,7 +8937,7 @@ function processEvents(convo, events) {
     }
     if (visibleEvent(curEvent.ev)) {
       let elapsedSec = util/* default */.A.unixSec(curEvent.ev.created) - util/* default */.A.unixSec(lastEvent.ev.created);
-      if (elapsedSec > 120) curEvent.show_time = true;
+      if (elapsedSec > 300) curEvent.show_time = true;
     }
   }
   if (lastAgentEvent) lastAgentEvent.show_time = true;
@@ -8955,7 +8962,10 @@ function processEvents(convo, events) {
 }
 function visibleEvent(ev) {
   let type = util/* default */.A.get(ev, 'type');
-  return type === 'message_sent' || type === 'conversation_state_updated';
+  if (type === 'message_sent') return true;
+  if (type === 'conversation_state_updated') {
+    return util/* default */.A.get(ev, 'data.conversation.state') == 'ended';
+  }
 }
 function Events_isSummited(form) {
   let fields = util/* default */.A.get(form, 'fields') || [];
@@ -9466,26 +9476,25 @@ class Widget extends common/* Com */.Mw {
       class: cls
     }, $header, $body);
   }
-  async submitPrechatForm(form, formName) {
-    if (this.state.submiting) return;
-    var hasError = false;
-    util/* default */.A.map(this.state.formData, (field, key) => {
+  validateForm(formData) {
+    let newformdata = {};
+    util/* default */.A.map(formData, (field, key) => {
+      field = Object.assign({}, field);
+      field.is_empty_error = false;
       if (field.is_required && (field.value === undefined || field.value === '' || util/* default */.A.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 (!util/* default */.A.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() && !util/* default */.A.isEmail(field.value)) {
             field.error = this.props.t('error_email_invalid');
-            hasError = true;
           }
         }
       }
@@ -9493,19 +9502,30 @@ class Widget extends common/* Com */.Mw {
         if (field.is_required) {
           if (!util/* default */.A.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() && !util/* default */.A.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 = util/* default */.A.find(newData, field => !!field.error);
+    if (hasError) {
+      this.setState({
+        formData: newData
+      });
+      this.focusInput();
+      return;
+    }
     let data = util/* default */.A.cloneDeep(this.state.formData);
     let user = util/* default */.A.cloneDeep(this.props.store.matchUser());
     let is_lead = false;
@@ -9629,6 +9649,7 @@ class Widget extends common/* Com */.Mw {
     let field = util/* default */.A.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
     field.value = val;
+    field.error = undefined;
     this.setState({
       formData
     });
@@ -9755,7 +9776,7 @@ class Widget extends common/* Com */.Mw {
       if (field.type === 'text') {
         if (key == 'question' || util/* default */.A.get(field, 'def.multiple_line')) {
           $field = (0,preact_module.h)("textarea", {
-            class: "form-control",
+            class: `form-control ${errclass}`,
             ref: ref => {
               this['form_' + Widget_encode(key)] = ref;
             },
@@ -9763,8 +9784,7 @@ class Widget extends common/* Com */.Mw {
             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 (util/* default */.A.get(field, 'def.select') === 'checkbox') {
           $field = this.renderCheckboxField(field);
@@ -9865,10 +9885,10 @@ class Widget extends common/* Com */.Mw {
         class: "label",
         for: 'form_' + Widget_encode(key)
       }, label, field.is_required ? (0,preact_module.h)("span", {
-        class: "ml-1 red"
-      }, "*") : ''), field.error ? (0,preact_module.h)("div", {
+        class: "red"
+      }, "*") : ''), $field, field.error ? (0,preact_module.h)("div", {
         class: "form-control--valid-input--error"
-      }, field.error) : '', $field);
+      }, field.error) : '');
     });
     return (0,preact_module.h)("div", {
       class: "pt-2"
@@ -9878,6 +9898,10 @@ class Widget extends common/* Com */.Mw {
     let title = this.props.t.i18n(util/* default */.A.get(form, `i18n_title`, {}));
     if (!title) title = util/* default */.A.get(form, 'title', this.props.t('capture_lead_title'));
     title = title.replace('↵', '');
+    let btncls = 'btn--start-convo ';
+    let hasError = util/* default */.A.find(this.state.formData, field => !!field.error);
+    let newData = this.validateForm(this.state.formData);
+    let hasEmptyError = util/* default */.A.find(newData, field => !!field.is_empty_error);
     return (0,preact_module.h)("div", {
       class: "widget-body"
     }, (0,preact_module.h)(FormMounter, {
@@ -9885,22 +9909,15 @@ class Widget extends common/* Com */.Mw {
       form: form,
       onMount: this.formMounted
     }), (0,preact_module.h)("div", {
-      class: "widget-body--content flex-grow-1 pl-3 pr-3 d-flex flex-column"
-    }, (0,preact_module.h)("div", {
-      class: "flex-grow-1"
+      class: "widget-body--content flex-grow-1 pl-3 pr-3 pb-2 d-flex flex-column"
     }, (0,preact_module.h)("div", {
-      class: "form mt-3 pl-3 pr-3 pt-3 pb-3 d-flex flex-column"
-    }, (0,preact_module.h)("div", null, title), this.renderFields(form, formName))), (0,preact_module.h)("div", {
-      class: "mt-2"
-    }), (0,preact_module.h)(PoweredBy, {
-      store: this.props.store,
-      t: this.props.t
-    })), (0,preact_module.h)("div", {
-      class: "message-input message-input--preform"
-    }, (0,preact_module.h)("button", {
-      class: "btn--start-convo",
+      class: "mt-2 d-flex flex-column"
+    }, (0,preact_module.h)("div", null, title), this.renderFields(form, formName)), (0,preact_module.h)("div", {
+      style: "min-height: 15px !important; flex: 1 !important; flex-shrink: 0 !important"
+    }), (0,preact_module.h)("button", {
+      class: btncls,
       onClick: _ => this.submitPrechatForm(form, formName),
-      disabled: this.state.creating
+      disabled: !!hasEmptyError || !!hasError || this.state.creating
     }, submitLabel)));
   }
   goToConvo(cid) {
@@ -9927,10 +9944,10 @@ class Widget extends common/* Com */.Mw {
       }, (0,preact_module.h)(AgentsAvatar, {
         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_module.h)("div", {
@@ -9956,7 +9973,9 @@ class Widget extends common/* Com */.Mw {
       class: "convo-list--title"
     }, this.props.t('conversations')), $body), (0,preact_module.h)("div", {
       class: "convo-list--footer"
-    }, (0,preact_module.h)("button", {
+    }, (0,preact_module.h)(PoweredBy, {
+      store: this.props.store
+    }), (0,preact_module.h)("button", {
       class: "btn--start-convo",
       onClick: _ => this.goToConvo('')
     }, (0,preact_module.h)("span", null, this.props.t('start_conversation')), (0,preact_module.h)("img", {
@@ -9966,8 +9985,6 @@ class Widget extends common/* Com */.Mw {
       height: "26"
     })), (0,preact_module.h)("div", {
       class: "mt-2"
-    }), (0,preact_module.h)(PoweredBy, {
-      store: this.props.store
     })));
   }
   blur() {
@@ -9980,17 +9997,21 @@ class Widget extends common/* Com */.Mw {
   focusInput(text) {
     if (this.props.store.isPreview) return;
     if (this.shouldShowForm()) {
-      let firstemptykey = '';
+      let focusfieldkey = '';
       util/* default */.A.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_' + Widget_encode(focusfieldkey)];
+      if ($input) $input.focus();
       util/* default */.A.setTimeout(() => {
-        var $input = this['form_' + Widget_encode(firstemptykey)];
-        if (!$input) return;
-        $input.focus();
-      }, 300);
+        util/* default */.A.map(this.state.formData, (field, key) => {
+          if (focusfieldkey || field.type !== 'text') return;
+          if (!field.value || field.error) focusfieldkey = key;
+        });
+        var $input = this['form_' + Widget_encode(focusfieldkey)];
+        if ($input) $input.focus();
+      }, 200);
       return;
     }
     var $input = this.msgInput.current;
@@ -10822,11 +10843,6 @@ function lib_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e
 
 
 
-var $link = document.createElement('link');
-$link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap';
-$link.rel = 'stylesheet';
-document.head.append($link);
-util/* default */.A.preloadWebfonts(['Inter'], [400, 500]);
 class lib_Widget {
   constructor(ApiURL, FileURL, RealtimeURL, inmem, fake) {
     lib_defineProperty(this, "version", () => '4.5');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.121",
+	"version": "4.1.123",
 	"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.1",
-		"webpack": "^5.99.5",
+		"webpack": "^5.99.6",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.1"

package/src/chatbox/AgentsAvatar.js

@@ -27,7 +27,8 @@ export default function AgentsAvatar(props) {
 
 	let agentM = props.store.matchAgent('*')
 	var agents = sb.map(props.agent_ids, (id) => agentM[id])
-	if (props.agent_ids === undefined || sb.size(props.agent_ids) === 0) {
+
+	if (props.agent_ids !== undefined && sb.size(props.agent_ids) == 0) {
 		var agids = sb.get(accountSetting, 'header.agent_ids', [])
 		agids = sb.filter(agids, (id) => !!agentM[id])
 		if (agids.length !== 0) {
@@ -38,7 +39,7 @@ export default function AgentsAvatar(props) {
 	}
 
 	agents = sb.filter(agents, (ag) => !!ag)
-	if (agents.length === 0 || props.agent_ids === undefined || sb.size(props.agent_ids) === 0) {
+	if (sb.size(agents) === 0) {
 		// use account avatar
 		return (
 			<div class={`group-avatar group-avatar--${mode}`}>

package/src/chatbox/Event.js

@@ -302,13 +302,15 @@ export default class Event extends Com {
 		if (this.props.event.mode === 'lead') $sender = <div class='pt-3'></div>
 
 		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 = (
-				<a class='message_error' src='javascript:;' onClick={(e) => this.resendMessage()}>
-					<div class='message_error__text'>{msg}</div>
+				<a class='message_error' src='javascript:;' onClick={this.resendMessage}>
 					<div class='message_error__icon' />
+					&nbsp;
+					<div class='message_error__text'>{msg}</div>
 				</a>
 			)
 		}
@@ -436,7 +438,7 @@ export default class Event extends Com {
 		return <div class='message-system'>{this.props.t('conversation_state_updated', {state})}</div>
 	}
 
-	resendMessage() {
+	resendMessage = () => {
 		let cid = sb.convoOfEv(this.props.event.ev)
 		const message = sb.get(this.props.event, 'ev.data.message')
 		this.props.store.sendConvoEvent(cid, 'message_sent', {message})

package/src/chatbox/Events.js

@@ -306,7 +306,7 @@ function processEvents(convo, events) {
 
 		if (visibleEvent(curEvent.ev)) {
 			let elapsedSec = sb.unixSec(curEvent.ev.created) - sb.unixSec(lastEvent.ev.created)
-			if (elapsedSec > 120) curEvent.show_time = true // 2 mins
+			if (elapsedSec > 300) curEvent.show_time = true // 5 mins
 		}
 	}
 
@@ -340,7 +340,10 @@ function processEvents(convo, events) {
 
 function visibleEvent(ev) {
 	let type = sb.get(ev, 'type')
-	return type === 'message_sent' || type === 'conversation_state_updated'
+	if (type === 'message_sent') return true
+	if (type === 'conversation_state_updated') {
+		return sb.get(ev, 'data.conversation.state') == 'ended'
+	}
 }
 
 function isSummited(form) {

package/src/chatbox/Header.js

@@ -28,6 +28,7 @@ export default class Header extends Com {
 			renderSocial = layout === 'social'
 			renderTeam = !(renderSocial || renderClassic)
 		}
+
 		return (
 			<div class={cls}>
 				{this.renderCollapsedHeader(renderCollapsed || renderClassic, renderClassic)}
@@ -54,8 +55,6 @@ export default class Header extends Com {
 		return (
 			<div class={cls} style={style}>
 				{$back}
-				<div class="mr-2"></div>
-				<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='secondary' />
 				<div class='widget-header--title-container'>
 					<div class='widget-header--title'>{this.getTitle()}</div>
 					<div class='widget-header--description' title={desc}>
@@ -149,7 +148,7 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 					</div>
 					<div class='widget_header__body'>
 						<div class='widget-header--avatar-wrapper'>
-							<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='primary' />
+							<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='primary' agent_ids={[]} />
 						</div>
 						<div class='widget-header--title-container'>
 							<div class='widget-header--description'>{tags}</div>

package/src/chatbox/TextMessage.js

@@ -63,8 +63,10 @@ export default class TextMessage extends Com {
 					{this.renderTime()}
 				</div>
 			)
+		let msgcls = 'message-user message-text--user'
+		if (this.props.ev._error) msgcls += ' message-user--error'
 		return (
-			<div class='message-user message-text--user' title={t}>
+			<div class={msgcls} title={t}>
 				{tags}
 			</div>
 		)
@@ -83,8 +85,10 @@ export default class TextMessage extends Com {
 				</div>
 			)
 		}
+		let msgcls = 'message-user message-text--user'
+		if (this.props.ev._error) msgcls += ' message-user--error'
 		return (
-			<div class='message-user message-text--user' title={t}>
+			<div class={msgcls} title={t}>
 				<Block block={block} onLink={this.props.onLink} />
 			</div>
 		)