@subiz/widget-v4 4.1.143 → 4.1.145

package/dist/HASH

@@ -1 +1 @@
-19680dc0775
+196d399136f

package/dist/screenshoot.js

@@ -691,13 +691,11 @@ var {xhrsend, parseJSON, Pubsub} = __webpack_require__(7695)
 function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 	callAPI = callAPI || xhrsend // allow hook
 	credential = credential || {}
-
 	var lastToken = ''
 	if (!accid) accid = ''
-
 	var is_dead = false // tell if the connection is dead
 	var is_polling_stuck = false // tell if we've having trouble doing /poll
-	var is_sub_stuck = false // tell if we've having trouble doing /subscribe
+	var is_sub_stuck = true // tell if we've having trouble doing /subscribe
 
 	// The long polling loop runs sequentially, with each poll starting immediately
 	// after the previous one completes. If an error occurs, the loop will pause
@@ -706,7 +704,7 @@ function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 	// The first loop begins after the first subscription call completes successfully
 	var polling = function (backoff) {
 		if (is_dead) return
-		callAPI('get', apiUrl + 'poll?token=' + lastToken + '&account-id=' + accid, undefined, function (body, code) {
+		callAPI('get', apiUrl + 'poll?token=' + lastToken + '&v=5&account-id=' + accid, undefined, function (body, code) {
 			if (is_dead) return
 			if (retryable(code)) {
 				is_polling_stuck = true
@@ -751,6 +749,7 @@ function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 			// too long, kill
 			if (done) return
 			done = true
+			is_sub_stuck = true
 			resolve(repeat('dead', topics.length))
 			if (is_dead) return
 			kill('subs')
@@ -774,7 +773,8 @@ 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
 
-					var fullurl = apiUrl + 'subs' + query + '&account-id=' + encodeURIComponent(accid || credential.account_id)
+					var fullurl =
+						apiUrl + 'subs' + query + '&v=5&account-id=' + encodeURIComponent(accid || credential.account_id)
 					callAPI('post', fullurl, JSON.stringify({events: topics}), function (body, code) {
 						if (done) return
 						if (is_dead) {
@@ -884,7 +884,7 @@ function Realtime(apiUrls, credential, callAPI, accid, skipautoreconnect) {
 		return conn.getStatus()
 	}
 
-	this.subscribe = function (events) {
+	var subscribe = function (events) {
 		if (!conn) return Promise.resolve({error: 'dead'})
 		if (typeof events === 'string') events = [events]
 		if (!Array.isArray(events)) return Promise.resolve({error: 'param should be an array or string'})
@@ -904,20 +904,22 @@ function Realtime(apiUrls, credential, callAPI, accid, skipautoreconnect) {
 			return {}
 		})
 	}
+	this.subscribe = subscribe
 
 	// reconnect make sure there is alway a Conn running in the background
 	// if the Conn is dead, it recreate a new one
 	var conn
-	this.reconnect = function () {
+	var reconnect = function () {
 		var randomUrl = apiUrls[Math.floor(Math.random() * apiUrls.length)]
 		if (conn) conn.kill() // kill old connection
-		let myconn = new Conn(
+		var myconn = new Conn(
 			randomUrl,
 			credential,
 			function (code, body, status) {
-				if (myconn != conn) return // outdated
+				if (conn === undefined || myconn != conn) return // outdated
+				conn = undefined // prevent dupplicate dead fire
 				pubsub.emit('interrupted', code, body, status)
-				if (!skipautoreconnect) setTimeout(this.reconnect, 2000) // reconnect and resubscribe after 2 sec
+				if (!skipautoreconnect) setTimeout(reconnect, 2000) // reconnect and resubscribe after 2 sec
 			},
 			function (events) {
 				if (myconn != conn) return
@@ -927,13 +929,13 @@ function Realtime(apiUrls, credential, callAPI, accid, skipautoreconnect) {
 			accid,
 		)
 		conn = myconn
-
 		var copyTopics = Object.keys(topics)
 		topics = {}
 		// resubscribe all subscribed events
-		return this.subscribe(copyTopics)
+		return subscribe(copyTopics)
 	}
-	this.reconnect()
+	this.reconnect = reconnect
+	reconnect()
 }
 
 // calcNextBackoff returns number of seconds we must wait
@@ -2772,6 +2774,13 @@ function replaceCssVariable(css, setting) {
   tokens = tokenize(tokens, "'@z_index_3'");
   tokens = tokenize(tokens, "'@z_index_4'");
   tokens = tokenize(tokens, "'@z_index_5'");
+  tokens = tokenize(tokens, "'@form_background_color'");
+  tokens = tokenize(tokens, "'@form_header_font_size'");
+  tokens = tokenize(tokens, "'@form_header_font_family'");
+  tokens = tokenize(tokens, "'@form_desc_font_size'");
+  tokens = tokenize(tokens, "'@form_desc_font_family'");
+  tokens = tokenize(tokens, "'@form_input_label_font_size'");
+  tokens = tokenize(tokens, "'@form_input_label_font_family'");
   var primary_color = op.get(setting, 'primary_color') || op.get(DEFVAL, 'primary_color');
   let parseColor = parseCssColor(primary_color);
   if (!parseColor) parseColor = {
@@ -2817,7 +2826,7 @@ function replaceCssVariable(css, setting) {
     var path = item.type.substr(2, item.type.length - 3);
     var val = op.get(setting, path) || op.get(DEFVAL, path) || '';
     val = norm2(val);
-    if (['mobile_button.width', 'mobile_button.height', 'mobile_button.margin_x', 'mobile_button.margin_y', 'desktop_button.width', 'desktop_button.height', 'desktop_button.margin_x', 'desktop_button.margin_y', 'width', 'height'].includes(path)) {
+    if (['mobile_button.width', 'mobile_button.height', 'mobile_button.margin_x', 'mobile_button.margin_y', 'desktop_button.width', 'desktop_button.height', 'desktop_button.margin_x', 'desktop_button.margin_y', 'form_header_font_size', 'form_desc_font_size', 'form_input_label_font_size', 'width', 'height'].includes(path)) {
       val += 'px';
     }
     if (path === 'height' && op.get(setting, 'window_mode') === 'full') {
@@ -4994,9 +5003,7 @@ class Store {
       await util/* default */.A.sleep(this.CONNECTION_CHECK_INTERVAL);
       if (!this.realtime) continue;
       if (!this.realtime.getStatus || !this.realtime.reconnect) continue;
-      if (this.connectionStatus === 'dead') {
-        await this.realtime.reconnect();
-      }
+      if (this.connectionStatus === 'dead') {}
       let currentStatus = this.connectionStatus;
       this.connectionStatus = this.realtime.getStatus();
       if (currentStatus !== this.connectionStatus) {
@@ -7395,6 +7402,128 @@ class QuickReplies extends common/* Com */.Mw {
     }, $replies);
   }
 }
+;// ./src/form/rating-stars.js
+function rating_stars_defineProperty(e, r, t) { return (r = rating_stars_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function rating_stars_toPropertyKey(t) { var i = rating_stars_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function rating_stars_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); }
+
+
+
+class rating_stars_Form2 extends common/* Com */.Mw {
+  constructor(props) {
+    super(props);
+    rating_stars_defineProperty(this, "state", {
+      hovering: 0,
+      selected: 0
+    });
+    rating_stars_defineProperty(this, "onMouseEnter", v => {
+      let {
+        selected,
+        hovering
+      } = this.state;
+      if (v <= selected) {
+        this.setState({
+          hovering: selected
+        });
+        return;
+      }
+      this.setState({
+        hovering: v
+      });
+    });
+    rating_stars_defineProperty(this, "onMouseLeave", () => {
+      let {
+        selected,
+        hovering
+      } = this.state;
+      this.setState({
+        hovering: 0
+      });
+    });
+  }
+  onToggleValue(v) {
+    let {
+      selected
+    } = this.state;
+    let newVal = v;
+    if (v === selected) newVal = 0;
+    this.setState({
+      selected: newVal,
+      hovering: newVal
+    });
+    this.props.onChange(newVal);
+  }
+  render() {
+    let {
+      selected,
+      hovering
+    } = this.state;
+    let star1Cls = 'star-wrapper';
+    if (selected >= 1) {
+      star1Cls += ' selected';
+    } else if (hovering >= 1) {
+      star1Cls += ' hovering';
+    }
+    let star2Cls = 'star-wrapper';
+    if (selected >= 2) {
+      star2Cls += ' selected';
+    } else if (hovering >= 2) {
+      star2Cls += ' hovering';
+    }
+    let star3Cls = 'star-wrapper';
+    if (selected >= 3) {
+      star3Cls += ' selected';
+    } else if (hovering >= 3) {
+      star3Cls += ' hovering';
+    }
+    let star4Cls = 'star-wrapper';
+    if (selected >= 4) {
+      star4Cls += ' selected';
+    } else if (hovering >= 4) {
+      star4Cls += ' hovering';
+    }
+    let star5Cls = 'star-wrapper';
+    if (selected >= 5) {
+      star5Cls += ' selected';
+    } else if (hovering >= 5) {
+      star5Cls += ' hovering';
+    }
+    return (0,preact_module.h)("div", {
+      class: "form-ratings-wrapper",
+      onMouseLeave: () => this.onMouseLeave()
+    }, (0,preact_module.h)("div", {
+      class: star1Cls,
+      onClick: () => this.onToggleValue(1),
+      onMouseEnter: () => this.onMouseEnter(1)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })), (0,preact_module.h)("div", {
+      class: star2Cls,
+      onClick: () => this.onToggleValue(2),
+      onMouseEnter: () => this.onMouseEnter(2)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })), (0,preact_module.h)("div", {
+      class: star3Cls,
+      onClick: () => this.onToggleValue(3),
+      onMouseEnter: () => this.onMouseEnter(3)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })), (0,preact_module.h)("div", {
+      class: star4Cls,
+      onClick: () => this.onToggleValue(4),
+      onMouseEnter: () => this.onMouseEnter(4)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })), (0,preact_module.h)("div", {
+      class: star5Cls,
+      onClick: () => this.onToggleValue(5),
+      onMouseEnter: () => this.onMouseEnter(5)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })));
+  }
+}
 ;// ./src/form/Form.js
 function Form_defineProperty(e, r, t) { return (r = Form_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function Form_toPropertyKey(t) { var i = Form_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -7403,6 +7532,7 @@ function Form_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
 
 
 
+
 class Form2 extends common/* Com */.Mw {
   constructor(props) {
     super(props);
@@ -7454,7 +7584,7 @@ class Form2 extends common/* Com */.Mw {
         class: "label"
       }, com.label, " ", com.is_required && (0,preact_module.h)("span", {
         class: "red"
-      }, "*")), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'multiple' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx), com.input_type === 'dropdown' && this.renderFieldDropdownInput(com, idx), errorMsg && (0,preact_module.h)("div", {
+      }, "*")), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'textarea' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx), (com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx), com.input_type === 'rating' && this.renderFieldRatingInput(com, idx), errorMsg && (0,preact_module.h)("div", {
         class: "form-control--valid-input--error"
       }, errorMsg));
     });
@@ -7497,7 +7627,11 @@ class Form2 extends common/* Com */.Mw {
       let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
-      return util/* default */.A.map(com.input_options, (option, oidx) => {
+      let wrappercls = 'form-radios-wrapper';
+      if (util/* default */.A.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
+      return (0,preact_module.h)("div", {
+        class: wrappercls
+      }, util/* default */.A.map(com.input_options, (option, oidx) => {
         let id = com.key + '_' + oidx;
         return (0,preact_module.h)("div", {
           class: "radio"
@@ -7513,13 +7647,17 @@ class Form2 extends common/* Com */.Mw {
         }, option.label), (0,preact_module.h)("div", {
           class: "radio--check"
         }));
-      });
+      }));
     });
     Form_defineProperty(this, "renderFieldCheckboxInput", (com, idx) => {
       let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '[]';
       val = util/* default */.A.parseJSON(val);
-      return util/* default */.A.map(com.input_options, (option, oidx) => {
+      let wrappercls = 'form-checkboxes-wrapper';
+      if (util/* default */.A.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
+      return (0,preact_module.h)("div", {
+        class: wrappercls
+      }, util/* default */.A.map(com.input_options, (option, oidx) => {
         let id = com.key + '_' + oidx;
         return (0,preact_module.h)("div", {
           class: "checkbox"
@@ -7535,20 +7673,25 @@ class Form2 extends common/* Com */.Mw {
         }, option.label), (0,preact_module.h)("div", {
           class: "checkbox--check"
         }));
-      });
+      }));
     });
     Form_defineProperty(this, "renderFieldDropdownInput", (com, idx) => {
       let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
+      let cls = 'form-control';
+      if (this.state.errorFields[com.key]) cls += ' input--error';
+      if (!val) cls += ' form-control--empty';
       return (0,preact_module.h)("select", {
-        class: "form-control",
+        class: cls,
         ref: this[`${com.key}_input`],
         onChange: e => {
           this.onChangeValue(com.key, e.target.value);
           this.clearError(com.key);
         }
-      }, util/* default */.A.map(com.input_options, option => {
+      }, (0,preact_module.h)("option", {
+        value: ""
+      }, "-- ", this.props.t('no_select'), " --"), util/* default */.A.map(com.input_options, option => {
         return (0,preact_module.h)("option", {
           value: option.value
         }, option.label);
@@ -7569,6 +7712,11 @@ class Form2 extends common/* Com */.Mw {
         placeholder: com.placeholder
       });
     });
+    Form_defineProperty(this, "renderFieldRatingInput", (com, idx) => {
+      return (0,preact_module.h)(rating_stars_Form2, {
+        onChange: v => this.onChangeValue(com.key, v)
+      });
+    });
     Form_defineProperty(this, "onSubmit", e => {
       e.preventDefault();
       if (!this.validateForm()) return;
@@ -7581,18 +7729,42 @@ class Form2 extends common/* Com */.Mw {
       let components = util/* default */.A.get(this.props.formSetting, 'components') || [];
       util/* default */.A.each(components, com => {
         if (com.type === 'input') {
+          let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
+          val = val.value || '""';
+          val = util/* default */.A.parseJSON(val);
           if (com.is_required) {
-            let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
-            val = val.value || '""';
-            val = util/* default */.A.parseJSON(val);
-            if (typeof val === 'string' && !val.trim()) {
+            let isEmpty = false;
+            if (typeof val === 'string' && !val.trim()) isEmpty = true;
+            if (Array.isArray(val) && val.length === 0) isEmpty = true;
+            if (isEmpty) {
               result = false;
               errors[com.key] = this.props.t('cannot_be_empty');
-              if (!ref && com.input_type !== 'checkbox' && com.input_type !== 'radio') ref = `${com.key}_input`;
+              ref = `${com.key}_input`;
+            }
+          }
+          if (com.validation && !Array.isArray(val)) {
+            let isInvalid = false;
+            let validationText = '';
+            if (com.validation === 'email' && !util/* default */.A.isEmail(val)) {
+              validationText = 'Email';
+              isInvalid = true;
+            }
+            if (com.validation === 'phone' && !util/* default */.A.isPhone(val)) {
+              validationText = this.props.t('phn');
+              isInvalid = true;
+            }
+            if (com.validation === 'number' && !util/* default */.A.isNumber(val)) {
+              validationText = this.props.t('number');
+              isInvalid = true;
+            }
+            if (com.validation === 'url' && !util/* default */.A.isURL(val)) {
+              isInvalid = true;
+              validationText = 'URL';
             }
-            if (Array.isArray(val) && val.length === 0) {
+            if (isInvalid) {
               result = false;
-              errors[com.key] = this.props.t('cannot_be_empty');
+              errors[com.key] = this.props.t('format_is_invalid') + ' ' + validationText;
+              ref = `${com.key}_input`;
             }
           }
         }
@@ -7625,6 +7797,43 @@ class Form2 extends common/* Com */.Mw {
         errorFields: errors
       });
     });
+    Form_defineProperty(this, "renderFormHeader", () => {
+      let title = util/* default */.A.get(this.props.formSetting, 'title') || '';
+      let desc = util/* default */.A.get(this.props.formSetting, 'description') || '';
+      if (this.props.mode === 'attachment') {
+        if (title.trim() || desc.trim()) {
+          return (0,preact_module.h)("div", {
+            class: "form-component form-component-block"
+          }, title && (0,preact_module.h)("div", null, title), desc && (0,preact_module.h)("div", {
+            class: "text-sm text-muted"
+          }, desc));
+        }
+      }
+      let brandLogo = util/* default */.A.get(this.props.formSetting, 'logo.url');
+      let brandUrl = util/* default */.A.get(this.props.formSetting, 'brand_url');
+      let $logo = null;
+      if (brandLogo) {
+        $logo = (0,preact_module.h)("div", {
+          class: "form-page-logo-wrapper"
+        }, (0,preact_module.h)("a", {
+          href: brandUrl || 'javascript:;'
+        }, (0,preact_module.h)("img", {
+          src: brandLogo,
+          class: "form-page-logo"
+        })));
+      }
+      let $header = null;
+      if (title.trim() || desc.trim()) {
+        $header = (0,preact_module.h)("div", {
+          class: "form-page-header"
+        }, (0,preact_module.h)("div", {
+          class: "form-page-title"
+        }, title), desc && (0,preact_module.h)("div", {
+          class: "form-page-desc"
+        }, desc));
+      }
+      return (0,preact_module.h)(preact_module/* Fragment */.FK, null, $logo, $header);
+    });
     let _components = util/* default */.A.get(this.props.formSetting, 'components') || [];
     util/* default */.A.each(_components, com => {
       if (com.type === 'input' && com.input_type !== 'checkbox' && com.input_type !== 'radio') {
@@ -7651,6 +7860,7 @@ class Form2 extends common/* Com */.Mw {
   render() {
     let components = util/* default */.A.get(this.props.formSetting, 'components') || [];
     let title = util/* default */.A.get(this.props.formSetting, 'title') || '';
+    let desc = util/* default */.A.get(this.props.formSetting, 'description') || '';
     let cls = 'form-wrapper form';
     if (this.props.mode === 'attachment') cls += ' form-wrapper-attachment';
     return (0,preact_module.h)("div", {
@@ -7659,9 +7869,7 @@ class Form2 extends common/* Com */.Mw {
       class: "form-component"
     }, this.props.t('you_have_submitted_info_successfully')), (0,preact_module.h)("form", {
       onSubmit: this.onSubmit
-    }, (0,preact_module.h)("div", {
-      class: "form-component form-component-block"
-    }, title), util/* default */.A.map(components, this.renderFormComponent)));
+    }, this.renderFormHeader(), util/* default */.A.map(components, this.renderFormComponent)));
   }
 }
 ;// ./src/chatbox/FormAttachment2.js
@@ -9974,9 +10182,9 @@ class Widget extends common/* Com */.Mw {
           });
         } else if (util/* default */.A.get(field, 'def.select') === 'checkbox') {
           $field = this.renderCheckboxField(field);
-        } else if (util/* default */.A.get(field, 'def.select') === 'radio') {
+        } else if (util/* default */.A.get(field, 'def.select') === 'radio' && util/* default */.A.size(util/* default */.A.get(field, 'def.items', [])) < 5) {
           $field = this.renderRadioField(field);
-        } else if (util/* default */.A.get(field, 'def.select') === 'dropdown') {
+        } else if (util/* default */.A.get(field, 'def.select') === 'dropdown' || util/* default */.A.size(util/* default */.A.get(field, 'def.items', [])) >= 5) {
           $field = this.renderDropdownField(field);
         } else {
           $field = (0,preact_module.h)("input", {

package/index.html

@@ -70,6 +70,20 @@
 					})
 				})
 			})
+			setTimeout(function () {
+				if (accid === 'acshaomzfkhqtwlxmtfo' && getUrlParameter('chat-only')) {
+					subiz('overrideChatbox', {
+						chatbox: {
+							offline_form: {
+								enabled: false,
+							},
+							prechat_form: {
+								enabled: false,
+							},
+						},
+					})
+				}
+			})
 		</script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.143",
+	"version": "4.1.145",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -11,27 +11,27 @@
 	"dependencies": {
 		"@subiz/ajax": "^3.0.19",
 		"@subiz/flow": "^1.1.0",
-		"@subiz/wsclient": "^4.0.31",
+		"@subiz/wsclient": "^4.0.34",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.41.0",
+		"core-js": "^3.42.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.3.0",
-		"less-loader": "^12.2.0",
+		"less-loader": "^12.3.0",
 		"preact": "10.19.3"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.27.0",
-		"@babel/core": "^7.26.10",
+		"@babel/cli": "^7.27.2",
+		"@babel/core": "^7.27.1",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-transform-react-jsx": "^7.25.9",
-		"@babel/preset-env": "^7.26.9",
+		"@babel/plugin-transform-react-jsx": "^7.27.1",
+		"@babel/preset-env": "^7.27.2",
 		"babel-loader": "^10.0.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.3",
 		"prettier": "^3.5.3",
-		"puppeteer": "^24.7.2",
-		"webpack": "^5.99.7",
+		"puppeteer": "^24.9.0",
+		"webpack": "^5.99.9",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.1"

package/src/chatbox/Header.js

@@ -23,6 +23,23 @@ export default class Header extends Com {
 		)
 	}
 
+	renderAgentAvatar = () => {
+		let accSetting = this.props.plugin.chatbox || {}
+		let agids = sb.get(accSetting, 'header.agent_ids') || []
+		let agent = sb.get(this.props.store.matchAgent(agids[0]))
+		let logoUrl = sb.get(agent, 'avatar_url_128') || sb.get(agent, 'avatar_url')
+
+		if (!logoUrl) return
+		return (
+			<img
+				width={38}
+				height={38}
+				class='avatar avatar__account'
+				src={this.props.store.replaceFileUrl(logoUrl) || require('../../assets/img/image_default.png')}
+			/>
+		)
+	}
+
 	render() {
 		let headerMode = 'collapsed'
 
@@ -66,10 +83,12 @@ export default class Header extends Com {
 		let style = ''
 		if (!classic) $back = this.renderBackButton()
 		else style = 'padding-bottom: 75px !important;'
+
+		let layout = sb.get(accSetting, 'header.layout')
 		return (
 			<div class={cls} style={style}>
 				{$back}
-				{this.renderAccountAvatar()}
+				{layout === 'agent' ? this.renderAgentAvatar() : this.renderAccountAvatar()}
 				<div class='widget-header--title-container'>
 					<div class='widget-header--title'>{this.getTitle()}</div>
 					<div class='widget-header--description' title={desc}>

package/src/store/store.js

@@ -134,7 +134,7 @@ export default class Store {
 			if (!this.realtime.getStatus || !this.realtime.reconnect) continue
 
 			if (this.connectionStatus === 'dead') {
-				await this.realtime.reconnect()
+				//await this.realtime.reconnect()
 			}
 
 			let currentStatus = this.connectionStatus