@subiz/widget-v4 4.1.126 → 4.1.130

package/dist/screenshoot.js

@@ -412,6 +412,43 @@ ajax.waterfall = waterfall
 module.exports = ajax
 
 
+/***/ }),
+
+/***/ 450:
+/***/ ((module) => {
+
+var localStorageMemory = {};
+var cache = {};
+localStorageMemory.length = 0;
+localStorageMemory.getItem = function (key) {
+  if (key in cache) return cache[key];
+  return null;
+};
+localStorageMemory.setItem = function (key, value) {
+  if (typeof value === 'undefined') {
+    localStorageMemory.removeItem(key);
+  } else {
+    if (!Object.prototype.hasOwnProperty.call(cache, key)) {
+      localStorageMemory.length++;
+    }
+    cache[key] = value;
+  }
+};
+localStorageMemory.removeItem = function (key) {
+  if (Object.prototype.hasOwnProperty.call(cache, key)) {
+    delete cache[key];
+    localStorageMemory.length--;
+  }
+};
+localStorageMemory.key = function (index) {
+  return Object.keys(cache)[index] || null;
+};
+localStorageMemory.clear = function () {
+  cache = {};
+  localStorageMemory.length = 0;
+};
+module.exports = localStorageMemory;
+
 /***/ }),
 
 /***/ 940:
@@ -469,95 +506,6 @@ class Gate {
 
 /***/ }),
 
-/***/ 1314:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-let KvMaxSize = 500;
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (class {
-  constructor(db, schema) {
-    this.name = schema;
-    schema += '_kv';
-    this.dead = false;
-    this.db = db;
-    this.cache = {};
-    this.initialized = false;
-    this.init();
-  }
-  refreshCache() {
-    if (this.dead) return;
-    let inmemItemM = {};
-    let allitems = this.db.all('items');
-    allitems.forEach(function (item) {
-      inmemItemM[item.key] = item.value;
-    });
-    this.cache = inmemItemM;
-  }
-  init() {
-    if (this.initialized) return;
-    let inmemItemM = {};
-    console.time('KV' + this.name);
-    let allitems = this.db.all('items');
-    allitems.forEach(function (item) {
-      inmemItemM[item.key] = item.value;
-    });
-    this.cache = inmemItemM;
-    let allkeys = Object.keys(this.cache);
-    if (allkeys.length > KvMaxSize) {
-      let liveChance = KvMaxSize / 2 / allkeys.lenth;
-      let removekeys = [];
-      for (var i = 0; i < KvMaxSize; i++) {
-        let live = Math.random() <= liveChance;
-        if (live) continue;
-        let key = allkeys[i];
-        delete this.cache[key];
-        removekeys.push(key);
-      }
-      this.db.removes('items', [removekeys]);
-    }
-    this.initialized = true;
-    console.timeEnd('KV' + this.name);
-  }
-  all() {
-    if (this.dead) return [];
-    if (!this.initialized) return [];
-    return this.cache;
-  }
-  match(key) {
-    if (this.dead || !this.initialized) return;
-    if (!key) return;
-    return this.cache[key];
-  }
-  put(key, value) {
-    if (!key) return;
-    if (this.dead) return [];
-    if (!this.initialized) throw new Error('uninitialized');
-    this.cache[key] = value;
-    this.db.put('items', key, {
-      key,
-      value
-    });
-  }
-  del(key) {
-    if (this.dead) return;
-    if (!this.initialized) throw new Error('uninitialized');
-    delete this.cache[key];
-    this.db.removes('items', [key]);
-  }
-  destroy() {
-    this.db.clear('items');
-    this.dead = true;
-    this.db = undefined;
-    this.cache = undefined;
-    this.initialized = false;
-  }
-});
-
-/***/ }),
-
 /***/ 1370:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -565,109 +513,6 @@ module.exports = __webpack_require__.p + "assets/img/convos_empty.2353007.svg";
 
 /***/ }),
 
-/***/ 1428:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-let memlocalStorage = (__webpack_require__(1554)/* ["default"] */ .A);
-let requestIdleCallback = window.requestIdleCallback || (cb => cb());
-const LIMIT = 80;
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (class {
-  constructor(schema, inmem) {
-    this.localStorage = memlocalStorage;
-    this.allkeys = {};
-    if (!inmem) {
-      try {
-        window.localStorage.setItem('sbzstore1029', '?');
-        window.localStorage.removeItem('sbzstore1029');
-        this.localStorage = window.localStorage;
-      } catch (e) {}
-    }
-    this.schema = schema;
-  }
-  all(table) {
-    let items = [];
-    for (var i = 0; i < this.localStorage.length; i++) {
-      let key = this.localStorage.key(i);
-      if (!key.startsWith(this.schema + '#' + table + '#')) continue;
-      this.allkeys[key] = true;
-      items.push(JSON.parse(this.localStorage.getItem(key)));
-    }
-    return items;
-  }
-  removes(table, keys) {
-    for (var i = 0; i < keys.length; i++) {
-      delete this.allkeys[this.schema + '#' + table + '#' + keys[i]];
-      this.localStorage.removeItem(this.schema + '#' + table + '#' + keys[i]);
-    }
-  }
-  clear(table) {
-    let matchkeys = [];
-    for (var i = 0; i < this.localStorage.length; i++) {
-      let key = this.localStorage.key(i);
-      if (!key.startsWith(this.schema + '#' + table + '#')) continue;
-      matchkeys.push(key);
-    }
-    for (var i = 0; i < matchkeys.length; i++) this.localStorage.removeItem(matchkeys[i]);
-    this.allkeys = {};
-  }
-  put(table, key, value) {
-    this.allkeys[this.schema + '#' + table + '#' + key] = true;
-    if (Object.keys(this.allkeys).length > LIMIT) this.clear(table);
-    requestIdleCallback(() => {
-      try {
-        this.localStorage.setItem(this.schema + '#' + table + '#' + key, toString(value));
-      } catch (e) {
-        this.clear(table);
-      }
-    });
-  }
-});
-function toString(obj) {
-  if (obj === undefined) return 'null';
-  return JSON.stringify(obj);
-}
-
-/***/ }),
-
-/***/ 1554:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-var localStorageMemory = {};
-var cache = {};
-localStorageMemory.length = 0;
-localStorageMemory.getItem = function (key) {
-  if (key in cache) return cache[key];
-  return null;
-};
-localStorageMemory.setItem = function (key, value) {
-  if (typeof value === 'undefined') localStorageMemory.removeItem(key);else cache[key] = '' + value;
-  localStorageMemory.length = Object.keys(cache).length;
-};
-localStorageMemory.removeItem = function (key) {
-  if (Object.prototype.hasOwnProperty.call(cache, key)) {
-    delete cache[key];
-    localStorageMemory.length = Object.keys(cache).length;
-  }
-};
-localStorageMemory.key = function (index) {
-  return Object.keys(cache)[index] || null;
-};
-localStorageMemory.clear = function () {
-  cache = {};
-  localStorageMemory.length = 0;
-};
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (localStorageMemory);
-
-/***/ }),
-
 /***/ 1620:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -837,121 +682,174 @@ var {xhrsend, parseJSON, Pubsub} = __webpack_require__(7695)
 // as fast as possible through onEvents callback.
 //
 // It will try it best to keep the communication with the realtime
-// server. But if the user is offline for too long or her network can't
-// keep up with the incomming events (rarely happend with today
-// internet speed). The connection will be halt. Dead.
+// server. But if the user is offline for too long or the network can't
+// keep up with incomming events (rarely happend with today internet speed).
+// The connection will be killed. Dead.
 //
 // Once dead, onDead will be called. After that, the connection is
 // useless, all resources will be released.
 function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 	callAPI = callAPI || xhrsend // allow hook
 	credential = credential || {}
-	// tell if connection is dead
-	var dead = false
 
 	var lastToken = ''
-	// kill force the connection to dead state
-	this.kill = function () {
-		dead = true
-	}
 	if (!accid) accid = ''
 
-	// long polling loop, polling will run sequentialy. Each polling will start right
-	// after the previous returned. In case of error, polling loop will pause based on
-	// exponential backoff algorithm. Polling loop will terminate if it encounter an
-	// un-retryable error
-	// the polling loop starts after the first subscribe call finished successfully
+	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
+
+	// The long polling loop runs sequentially, with each poll starting immediately
+	// after the previous one completes. If an error occurs, the loop will pause
+	// using an exponential backoff strategy. It will terminate if an unretryable
+	// error is encountered.
+	// The first loop begins after the first subscription call completes successfully
 	var polling = function (backoff) {
-		if (dead) return
-		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 (is_dead) return
+		callAPI('get', apiUrl + 'poll?token=' + lastToken + '&account-id=' + accid, undefined, function (body, code) {
+			if (is_dead) return
+			if (retryable(code)) {
+				is_polling_stuck = true
+				return setTimeout(polling, calcNextBackoff(backoff), backoff + 1)
+			}
+
 			if (code !== 200) {
 				// unretryable error, should kill
-				dead = true
-				return onDead('poll')
+				is_polling_stuck = true
+				return kill('poll')
 			}
 
 			// 200, success
+			is_polling_stuck = false
 			body = parseJSON(body) || {}
 			if (body.host) apiUrl = absUrl(body.host)
 
 			var seqToken = body.sequential_token
-			// the server returns a malform payload. We should retry and hope it heal soon
-			if (!seqToken) return setTimeout(polling, calcNextBackoff(backoff), backoff + 1)
+			// the server returns a malform payload. We should end
+			if (!seqToken) return kill('poll')
 			lastToken = seqToken
 			onEvents(body.events || [])
 			return polling(0)
 		})
 	}
 
-	var subQueue = flow.batch(50, 100, function (events) {
-		if (dead) return ['dead']
-		if (events.length <= 0) return []
-
-		var out = []
-		return flow
-			.loop(function () {
-				return new Promise(function (rs) {
-					var query = '?token=' + lastToken
-					credential.getAccessToken().then(function (access_token) {
-						if (credential.user_ref) query += '&user_ref=' + encodeURIComponent(credential.user_ref)
-						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 + '&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)
-								return rs(false) // break loop
-							}
-
-							if (retryable(code)) return setTimeout(rs, 3000, true)
-							// unretryable error
-							if (code !== 200) {
-								// we are unable to start the communication with realtime server.
-								// Must notify the user by killing the connection
-								dead = true
-								onDead('subscribe', body, code)
-								out = repeat('dead', events.length)
-								return rs(false)
-							}
-
-							if (lastToken) return rs(false)
-
-							// first time sub, should grab the initial token
-							body = parseJSON(body) || {}
-							var initialToken = body.initial_token
-							// the server returns a malform payload. We should retry and hope it heal soon
-							if (!initialToken) return setTimeout(rs, 3000, true)
-							if (body.host) apiUrl = absUrl(body.host)
-
-							lastToken = initialToken
-							polling(0)
+	var subQueue = flow.batch(50, 100, function (topics) {
+		if (is_dead) return Promise.resolve(repeat('dead', topics.length))
+		if (topics.length <= 0) return Promise.resolve([])
+
+		var resolve
+		var promise = new Promise((rs) => {
+			resolve = rs
+		})
+
+		var done = false
+		setTimeout(function () {
+			if (!done && !is_dead) is_sub_stuck = true
+		}, 4000)
+
+		setTimeout(() => {
+			// too long, kill
+			if (done) return
+			done = true
+			resolve(repeat('dead', topics.length))
+			if (is_dead) return
+			kill('subs')
+		}, 60000)
+
+		flow.loop(function () {
+			return new Promise(function (rs) {
+				if (is_dead) {
+					resolve(repeat('dead', topics.length))
+					return rs(false) // break loop
+				}
+
+				var query = '?token=' + lastToken
+				credential.getAccessToken().then(function (access_token) {
+					if (is_dead) {
+						resolve(repeat('dead', topics.length))
+						return rs(false) // break loop
+					}
+
+					if (credential.user_ref) query += '&user_ref=' + encodeURIComponent(credential.user_ref)
+					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)
+					callAPI('post', fullurl, JSON.stringify({events: topics}), function (body, code) {
+						if (done) return
+						if (is_dead) {
+							resolve(repeat('dead', topics.length))
+							return rs(false) // break loop
+						}
+
+						if (retryable(code)) {
+							is_sub_stuck = true
+							return setTimeout(rs, 3000, true)
+						}
+
+						// unretryable error
+						if (code !== 200) {
+							// we are unable to start the communication with the realtime server.
+							// Must notify the user by killing the connection
+							kill('subs')
+							resolve(repeat('dead', topics.length))
 							return rs(false)
-						})
+						}
+						is_sub_stuck = false
+						done = true
+						if (lastToken) {
+							resolve(topics)
+							return rs(false)
+						}
+
+						// first time sub, should grab the initial token
+						body = parseJSON(body) || {}
+						var initialToken = body.initial_token
+						// the server returns a malform payload. We should end
+						if (!initialToken) {
+							kill('subs')
+							resolve(repeat('dead', topics.length))
+							return rs(false) // break loop
+						}
+
+						// learn new host
+						if (body.host) apiUrl = absUrl(body.host)
+
+						lastToken = initialToken
+						polling(0)
+						resolve(topics)
+						return rs(false) // to break the loop
 					})
 				})
 			})
-			.then(function () {
-				return out
-			})
+		})
+
+		return promise
 	})
 
 	// subscribe call /subs API to tell server that we are listening for those events
 	// this function may start polling loop if it hasn't been started yet
-	// Note: this function is not design to be thread safed so, do not call this
-	// function multiple times at once
+	// its safe to call this function multiple times
 	this.subscribe = subQueue.push.bind(subQueue)
+
+	this.getStatus = function () {
+		if (is_dead) return 'dead'
+		if (is_sub_stuck || is_polling_stuck) return 'connecting'
+		return 'active'
+	}
+
+	// kill force the connection to dead state
+	var kill = function (reason) {
+		is_dead = true
+		onDead(reason)
+	}
+	this.kill = kill
 }
 
-// Realtime is just a stronger Conn.
-// This class helps you subscribe and listen realtime event from the
+// Realtime helps you subscribe and listen realtime event from th
 // realtime server
-// additional features compare to conn:
-//   + auto recreate and resub if the last conn is dead
-//   + don't subscribe already subscribed events
-function Realtime(apiUrls, credential, callAPI, accid) {
+// Realtime is just a stronger Conn.
+function Realtime(apiUrls, credential, callAPI, accid, skipautoreconnect) {
 	if (typeof apiUrls === 'string' || apiUrls instanceof String) apiUrls = [apiUrls]
 	credential = credential || {}
 	if (!credential.getAccessToken) {
@@ -963,19 +861,13 @@ function Realtime(apiUrls, credential, callAPI, accid) {
 	var pubsub = new Pubsub()
 
 	// holds all topics that realtime must subscribed
-	// {
-	//   a: 'online',
-	//   b: 'offline',
-	//   c: 'connecting',
-	// }
 	var topics = {}
 
 	// stop the connection
-	var stop = false
 	this.stop = function () {
-		if (!conn || stop) return
-		stop = true
+		if (!conn) return
 		conn.kill()
+		conn = undefined
 		pubsub.emit('interrupted')
 	}
 
@@ -987,9 +879,13 @@ function Realtime(apiUrls, credential, callAPI, accid) {
 		return pubsub.on('interrupted', cb)
 	}
 
-	var conn
+	this.getStatus = function () {
+		if (!conn) return 'dead'
+		return conn.getStatus()
+	}
+
 	this.subscribe = function (events) {
-		if (stop) return Promise.resolve({})
+		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'})
 
@@ -998,46 +894,46 @@ function Realtime(apiUrls, credential, callAPI, accid) {
 		for (var i = 0; i < events.length; i++) {
 			var topic = events[i]
 			if (!topic) continue
-			if (!topics[topic]) all.push(conn.subscribe(topic))
+			if (topics[topic]) continue
+			topics[topic] = true // mark so next time we wont subscribe this event (topic) again
+			all.push(conn.subscribe(topic))
 		}
 		if (all.length === 0) return Promise.resolve({})
-		return Promise.all(all).then(function (errs) {
-			for (var i = 0; i < errs.length; i++) if (errs[i]) return {error: errs[i]}
-			for (var j = 0; j < events.length; j++) topics[events[j]] = true
+		return Promise.all(all).then(function () {
+			if (!conn || conn.getStatus() == 'dead') return {error: 'dead'}
 			return {}
 		})
 	}
 
 	// reconnect make sure there is alway a Conn running in the background
 	// if the Conn is dead, it recreate a new one
-	var reconnect = function () {
-		if (stop) return
-		// reset subscribed topic
-		var allTopics = Object.keys(topics)
-		for (var i = 0; i < allTopics.length; i++) topics[allTopics[i]] = false
-
+	var conn
+	this.reconnect = function () {
 		var randomUrl = apiUrls[Math.floor(Math.random() * apiUrls.length)]
-		conn = new Conn(
+		if (conn) conn.kill() // kill old connection
+		let myconn = new Conn(
 			randomUrl,
 			credential,
 			function (code, body, status) {
-				if (stop) return
+				if (myconn != conn) return // outdated
 				pubsub.emit('interrupted', code, body, status)
-				setTimeout(reconnect, 2000) // reconnect and resubscribe after 2 sec
+				if (!skipautoreconnect) setTimeout(this.reconnect, 2000) // reconnect and resubscribe after 2 sec
 			},
-			function (topics) {
-				if (stop) return
-				for (var i = 0; i < topics.length; i++) pubsub.emit('event', topics[i])
+			function (events) {
+				if (myconn != conn) return
+				for (var i = 0; i < events.length; i++) pubsub.emit('event', events[i])
 			},
 			callAPI,
 			accid,
 		)
+		conn = myconn
 
+		var copyTopics = Object.keys(topics)
+		topics = {}
 		// resubscribe all subscribed events
-		var topicKeys = Object.keys(topics)
-		for (var i = 0; i < topicKeys.length; i++) conn.subscribe(topicKeys[i])
+		return this.subscribe(copyTopics)
 	}
-	reconnect()
+	this.reconnect()
 }
 
 // calcNextBackoff returns number of seconds we must wait
@@ -1264,244 +1160,14 @@ function eqFloat(a, b) {
 
 /***/ }),
 
-/***/ 3118:
+/***/ 3259:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
+__webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (/* binding */ Chain)
-/* harmony export */ });
-const ChainMaxSize = 50;
-class Chain {
-  constructor(db, schema, inmem) {
-    this.schema = schema + '_chain';
-    this.dead = false;
-    this.db = db;
-    this.anchorCache = {};
-    this.cache = {};
-    this.init();
-  }
-  init() {
-    let inmemItemM = {};
-    let allitems = this.db.all('items');
-    allitems.map(item => {
-      inmemItemM[item.chain] = inmemItemM[item.chain] || {};
-      inmemItemM[item.chain][item.id] = {
-        id: item.id,
-        chain: item.chain,
-        full_id: item.full_id,
-        index: item.index,
-        value: item.value
-      };
-    });
-    map(inmemItemM, (itemM, chain) => {
-      if (size(itemM) < ChainMaxSize) return;
-      let items = orderBy(map(itemM), ['index'], 'desc');
-      let removekeys = [];
-      for (var i = ChainMaxSize; i < items.length; i++) {
-        removekeys.push(items[i].full_id);
-        delete itemM[items[i].id];
-      }
-      this.db.removes('items', removekeys);
-      inmemItemM[chain] = itemM;
-    });
-    this.cache = inmemItemM;
-  }
-  destroy() {
-    this.db.clear('items');
-    this.dead = true;
-    this.cache = {};
-    this.anchorCache = {};
-    this.db = undefined;
-  }
-  put(chain, id, node_index, value) {
-    if (this.dead) return;
-    let inmemItemM = this.cache[chain] || {};
-    let bottom = minIndex(inmemItemM) || {};
-    let bottomIndex = bottom.index || 'z';
-    let item = {
-      id,
-      index: node_index,
-      value,
-      chain,
-      full_id: chain + ':' + id
-    };
-    delete inmemItemM[item.id];
-    if (bottomIndex > item.index + '') return;
-    inmemItemM[item.id] = item;
-    this.cache[chain] = inmemItemM;
-    this.db.put('items', item.full_id, item);
-  }
-  listM(chain) {
-    if (this.dead) return {};
-    let inmemItemM = this.cache[chain] || {};
-    let out = {};
-    map(inmemItemM, (item, id) => {
-      out[id] = item.value;
-    });
-    return out;
-  }
-  async fetchMore(chain, limit = 20, api) {
-    if (this.dead) return {
-      error: 'dead'
-    };
-    if (!api) return {
-      error: 'no api'
-    };
-    let anchor = this.anchorCache[chain] || '';
-    var [apiItems, newanchor, error] = await api(chain, anchor, limit);
-    if (error) return {
-      error
-    };
-    if (this.dead) return {
-      error: 'dead'
-    };
-    let inmemItemM = this.cache[chain] || {};
-    if (apiItems.length === 0) return {
-      end: true
-    };
-    apiItems.forEach(item => {
-      item.chain = chain;
-      item.full_id = chain + ':' + item.id;
-      inmemItemM[item.id] = item;
-      this.db.put('items', item.full_id, item);
-    });
-    this.anchorCache[chain] = newanchor;
-    this.cache[chain] = inmemItemM;
-    return {};
-  }
-  del(chain, id) {
-    if (this.dead) return;
-    let inmemItemM = this.cache[chain] || {};
-    let full_id = chain + ':' + id;
-    delete inmemItemM[id];
-    this.db.removes('items', [full_id]);
-  }
-  match(chain, id) {
-    return this.listM(chain)[id];
-  }
-  async reload(chain, api) {
-    if (this.dead) return;
-    let top = maxIndex(this.listM(chain)) || {};
-    let topindex = top.index;
-    if (!topindex) topindex = Date.now();
-    var lastanchor = '';
-    var fetchedItems = {};
-    for (;;) {
-      if (this.dead) return;
-      let [newItems, newanchor, error] = await api(chain, lastanchor, 50);
-      if (error) return;
-      if (this.dead) return;
-      newItems.map(item => {
-        fetchedItems[item.id] = Object.assign({}, item, {
-          chain,
-          full_id: chain + ':' + item.id
-        });
-      });
-      if (newItems.length === 0 || newanchor === lastanchor) break;
-      if (fetchedItems.length >= 200) {
-        let inmemItemM = this.cache[chain] || {};
-        let removeids = [];
-        map(inmemItemM, item => {
-          if (item.chain !== chain) return;
-          removeids.push(item.full_id);
-        });
-        this.db.removes('items', removeids);
-        this.cache[chain] = {};
-        break;
-      }
-      let minindexitem = minIndex(fetchedItems) || {};
-      if (minindexitem.index <= topindex) {
-        lastanchor = this.anchorCache[chain] || newanchor;
-        break;
-      }
-      lastanchor = newanchor;
-    }
-    for (var i = 0; i < Object.keys(fetchedItems).length; i++) {
-      let item = fetchedItems[Object.keys(fetchedItems)[i]];
-      this.db.put('items', item.full_id, item);
-      this.cache[item.chain] = this.cache[item.chain] || {};
-      this.cache[item.chain][item.id] = item;
-    }
-    this.anchorCache[chain] = lastanchor;
-  }
-}
-function minIndex(obj) {
-  if (!obj) return;
-  let keys = Object.keys(obj);
-  if (!keys.length) return;
-  let min = Infinity;
-  let minKey = Object.keys(obj)[0];
-  for (var i = 0; i < keys.length; i++) {
-    let index = obj[keys[i]] && obj[keys[i]].index || Infinity;
-    if (index < min) {
-      min = index;
-      minKey = keys[i];
-    }
-  }
-  return obj[minKey];
-}
-function maxIndex(obj) {
-  if (!obj) return;
-  let keys = Object.keys(obj);
-  if (!keys.length) return;
-  let max = -Infinity;
-  let maxKey = Object.keys(obj)[0];
-  for (var i = 0; i < keys.length; i++) {
-    let index = obj[keys[i]] && obj[keys[i]].index || -Infinity;
-    if (index > max) {
-      max = index;
-      maxKey = keys[i];
-    }
-  }
-  return obj[keys[maxKey]];
-}
-function map(collection, predicate) {
-  if (!collection) return [];
-  if (!predicate) return collection;
-  var out = [];
-  if (Array.isArray(collection)) {
-    for (let i = 0; i < collection.length; i++) {
-      out.push(predicate(collection[i], i));
-    }
-    return out;
-  }
-  if (typeof collection === 'object') {
-    var keys = Object.keys(collection);
-    for (let i = 0; i < keys.length; i++) {
-      var k = keys[i];
-      out.push(predicate(collection[k], k));
-    }
-    return out;
-  }
-  return out;
-}
-function size(o) {
-  if (!o) return 0;
-  if (o.length !== undefined) return o.length;
-  return Object.keys(o).length;
-}
-function orderBy(a, k, d) {
-  var clone = [];
-  map(a, v => clone.push(v));
-  clone.sort((i, j) => {
-    if (i[k] === j[k]) return 0;
-    var r = i[k] < j[k] ? -1 : 1;
-    return d === 'desc' ? -r : r;
-  });
-  return clone;
-}
-
-/***/ }),
-
-/***/ 3259:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   get: () => (/* binding */ get),
-/* harmony export */   set: () => (/* binding */ set)
+/* harmony export */   get: () => (/* binding */ get),
+/* harmony export */   set: () => (/* binding */ set)
 /* harmony export */ });
 var toStr = Object.prototype.toString;
 var isArray = Array.isArray || function (obj) {
@@ -2183,8 +1849,8 @@ var xhrsend = function (method, url, body, cb) {
 	request.send(body)
 }
 
-// JSON.parse without exeption
-// return undefined when parsing invalid JSON string
+// JSON.parse without exception
+// return undefined when input is an invalid JSON
 function parseJSON(str) {
 	try {
 		return JSON.parse(str)
@@ -2312,10 +1978,7 @@ function trackInactivity(seconds = 0, cb) {
     document.addEventListener(ev, resetTime, false);
   }
 }
-let timeOnPage = 0;
-campaign_common.setInterval(() => {
-  timeOnPage += 5;
-}, 5000);
+let _pageLoaded = campaign_common.Date.now();
 function trackTimeOnPage(seconds = 0, cb) {
   if (seconds < 1) {
     return campaign_common.setTimeout(function () {
@@ -2323,10 +1986,11 @@ function trackTimeOnPage(seconds = 0, cb) {
     }, 100);
   }
   let timer = campaign_common.setInterval(() => {
+    let timeOnPage = (campaign_common.Date.now() - _pageLoaded) / 1000;
     if (timeOnPage < seconds) return;
     if (cb) cb(timeOnPage);
     campaign_common.clearInterval(timer);
-  }, 1000);
+  }, 200);
 }
 function on(eventName, selector, fn) {
   document.addEventListener(eventName, function (event) {
@@ -2524,6 +2188,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   getUserAttr: () => (/* binding */ getUserAttr),
 /* harmony export */   hslToRgb: () => (/* binding */ hslToRgb),
 /* harmony export */   includes: () => (/* binding */ includes),
+/* harmony export */   isBlockEmpty: () => (/* binding */ isBlockEmpty),
 /* harmony export */   isConvoSeen: () => (/* binding */ isConvoSeen),
 /* harmony export */   isEmail: () => (/* binding */ isEmail),
 /* harmony export */   isNumber: () => (/* binding */ isNumber),
@@ -3708,6 +3373,20 @@ const ALL_CURRENCIES = [{
 function blockToText(block) {
   return _blockToText(block).trim();
 }
+function isBlockEmpty(block) {
+  return _isBlockEmpty(block);
+}
+function _isBlockEmpty(block = {}) {
+  if (!size(block.content)) {
+    if ((block.text || '').trim()) return false;
+    return true;
+  }
+  let result = true;
+  map(block.content, content => {
+    result = result && _isBlockEmpty(content);
+  });
+  return result;
+}
 function _blockToText(block) {
   if (!block || !block.type) return '';
   let out = '';
@@ -4008,17 +3687,6 @@ var __webpack_exports__ = {};
 
 // EXTERNAL MODULE: ./src/util/index.js + 1 modules
 var util = __webpack_require__(8150);
-;// ./node_modules/@subiz/storage/index.js
-var kv = (__webpack_require__(1314)/* ["default"] */ .A);
-var chain = (__webpack_require__(3118)/* ["default"] */ .A);
-var inmem_localstorage = (__webpack_require__(1554)/* ["default"] */ .A);
-var lsdb = (__webpack_require__(1428)/* ["default"] */ .A);
-/* harmony default export */ const storage = ({
-  kv,
-  lsdb,
-  chain,
-  inmem_localstorage
-});
 ;// ./src/store/api.js
 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 + ""; }
@@ -4125,6 +3793,8 @@ function jsonifyTextPlain(param, done) {
     _defineProperty(this, "list_provinces", () => this.apireq.get(`/accounts/${this.accid}/provinces`));
     _defineProperty(this, "list_districts", p => this.apireq.setQuery(p).get(`/accounts/${this.accid}/districts`));
     _defineProperty(this, "list_wards", p => this.apireq.setQuery(p).get(`/accounts/${this.accid}/wards`));
+    _defineProperty(this, "checkFormToken", token => this.api41.get(`/submissions/${token}`));
+    _defineProperty(this, "submitForm2", (token, data) => this.api41.post(`/submissions/${token}`, data));
     _defineProperty(this, "suggest_address", keyword => this.apireq.setQuery({
       keyword: keyword
     }).get(`/accounts/${this.accid}/addresses`));
@@ -4132,6 +3802,7 @@ function jsonifyTextPlain(param, done) {
     this.refreshLock = new util/* default */.A.Mutex();
     this.FileURL = FileURL;
     this.ApiURL = ApiURL;
+    this.api41 = ajax.setBaseUrl('https://api5.subiz.com.vn/4.1').withCredentials(true).setContentType('text/plain').beforeHook(jsonifyTextPlain).setParser('json');
     this.apireq = ajax.setBaseUrl(ApiURL).withCredentials(true).addQuery('v', '6').setContentType('text/plain').beforeHook(jsonifyTextPlain).setParser('json').beforeHook((param, done) => {
       if (this.token_generator) {
         let user_id = this.profile_id;
@@ -4269,31 +3940,394 @@ function jsonifyTextPlain(param, done) {
         id: this.uid
       };
     }
-    return {
-      error: 'invalid_auth'
-    };
+    return {
+      error: 'invalid_auth'
+    };
+  }
+  sendContentView(device, pageUrl, pageTitle, id, source_id, sku) {
+    if (!id) id = undefined;
+    if (!source_id) source_id = undefined;
+    return this.sendEvent({
+      by: {
+        id: this.uid,
+        device: device
+      },
+      type: 'content_viewed',
+      data: {
+        product: {
+          id: id,
+          source_id: source_id,
+          url: pageUrl,
+          name: pageTitle,
+          title: pageTitle,
+          sku: sku
+        }
+      }
+    });
+  }
+});
+;// ./src/store/lsdb.js
+let memlocalStorage = __webpack_require__(450);
+
+let requestIdleCallback = typeof window !== 'undefined' ? window.requestIdleCallback : null;
+if (!requestIdleCallback) requestIdleCallback = cb => cb();
+const LIMIT = 80;
+/* harmony default export */ const lsdb = (class {
+  constructor(schema, inmem) {
+    this.localStorage = memlocalStorage;
+    this.inmem = inmem;
+    this.allkeys = {};
+    if (!inmem) {
+      try {
+        window.localStorage.setItem('sbzstore1029', '?');
+        window.localStorage.removeItem('sbzstore1029');
+        this.localStorage = window.localStorage;
+      } catch (e) {}
+    }
+    this.schema = schema;
+  }
+  all(table) {
+    let items = [];
+    for (var i = 0; i < this.localStorage.length; i++) {
+      let key = this.localStorage.key(i);
+      if (!key.startsWith(this.schema + '#' + table + '#')) continue;
+      this.allkeys[key] = true;
+      if (this.inmem) items.push(this.localStorage.getItem(key));else items.push(util/* default */.A.parseJSON(this.localStorage.getItem(key)));
+    }
+    return items;
+  }
+  removes(table, keys) {
+    for (var i = 0; i < keys.length; i++) {
+      delete this.allkeys[this.schema + '#' + table + '#' + keys[i]];
+      this.localStorage.removeItem(this.schema + '#' + table + '#' + keys[i]);
+    }
+  }
+  clear(table) {
+    for (var i = 0; i < this.localStorage.length; i++) {
+      let key = this.localStorage.key(i);
+      if (!key.startsWith(this.schema + '#' + table + '#')) continue;
+      this.localStorage.removeItem(key);
+    }
+    this.allkeys = {};
+  }
+  put(table, key, value) {
+    this.allkeys[this.schema + '#' + table + '#' + key] = true;
+    if (this.inmem) return this.localStorage.setItem(this.schema + '#' + table + '#' + key, value);
+    if (Object.keys(this.allkeys).length > LIMIT) this.clear(table);
+    requestIdleCallback(() => {
+      try {
+        this.localStorage.setItem(this.schema + '#' + table + '#' + key, lsdb_toString(value));
+      } catch (e) {
+        this.clear(table);
+      }
+    });
+  }
+});
+function lsdb_toString(obj) {
+  if (obj === undefined) return 'null';
+  return JSON.stringify(obj);
+}
+;// ./src/store/chain.js
+const ChainMaxSize = 50;
+class Chain {
+  constructor(db, schema, inmem) {
+    this.schema = schema + '_chain';
+    this.dead = false;
+    this.db = db;
+    this.anchorCache = {};
+    this.cache = {};
+    this.init();
+  }
+  init() {
+    let inmemItemM = {};
+    let allitems = this.db.all('items');
+    allitems.map(item => {
+      inmemItemM[item.chain] = inmemItemM[item.chain] || {};
+      inmemItemM[item.chain][item.id] = {
+        id: item.id,
+        chain: item.chain,
+        full_id: item.full_id,
+        index: item.index,
+        value: item.value
+      };
+    });
+    map(inmemItemM, (itemM, chain) => {
+      if (size(itemM) < ChainMaxSize) return;
+      let items = orderBy(map(itemM), ['index'], 'desc');
+      let removekeys = [];
+      for (var i = ChainMaxSize; i < items.length; i++) {
+        removekeys.push(items[i].full_id);
+        delete itemM[items[i].id];
+      }
+      this.db.removes('items', removekeys);
+      inmemItemM[chain] = itemM;
+    });
+    this.cache = inmemItemM;
+  }
+  destroy() {
+    this.db.clear('items');
+    this.dead = true;
+    this.cache = {};
+    this.anchorCache = {};
+    this.db = undefined;
+  }
+  put(chain, id, node_index, value) {
+    if (this.dead) return;
+    let inmemItemM = this.cache[chain] || {};
+    let bottom = minIndex(inmemItemM) || {};
+    let bottomIndex = bottom.index || 'z';
+    if (size(inmemItemM) == 0) bottomIndex = '';
+    let item = {
+      id,
+      index: node_index,
+      value,
+      chain,
+      full_id: chain + ':' + id
+    };
+    delete inmemItemM[item.id];
+    if (bottomIndex > item.index + '') return;
+    inmemItemM[item.id] = item;
+    this.cache[chain] = inmemItemM;
+    this.db.put('items', item.full_id, item);
+  }
+  listM(chain) {
+    if (this.dead) return {};
+    let inmemItemM = this.cache[chain] || {};
+    let out = {};
+    map(inmemItemM, (item, id) => {
+      out[id] = item.value;
+    });
+    return out;
+  }
+  async fetchMore(chain, limit = 20, api) {
+    if (this.dead) return {
+      error: 'dead'
+    };
+    if (!api) return {
+      error: 'no api'
+    };
+    let anchor = this.anchorCache[chain] || '';
+    var [apiItems, newanchor, error] = await api(chain, anchor, limit);
+    if (error) return {
+      error
+    };
+    if (this.dead) return {
+      error: 'dead'
+    };
+    let inmemItemM = this.cache[chain] || {};
+    if (apiItems.length === 0) return {
+      end: true
+    };
+    apiItems.forEach(item => {
+      item.chain = chain;
+      item.full_id = chain + ':' + item.id;
+      inmemItemM[item.id] = item;
+      this.db.put('items', item.full_id, item);
+    });
+    this.anchorCache[chain] = newanchor;
+    this.cache[chain] = inmemItemM;
+    return {};
+  }
+  del(chain, id) {
+    if (this.dead) return;
+    let inmemItemM = this.cache[chain] || {};
+    let full_id = chain + ':' + id;
+    delete inmemItemM[id];
+    this.db.removes('items', [full_id]);
+  }
+  match(chain, id) {
+    return this.listM(chain)[id];
+  }
+  async reload(chain, api) {
+    if (this.dead) return;
+    let top = maxIndex(this.listM(chain)) || {};
+    let topindex = top.index;
+    if (!topindex) topindex = Date.now();
+    var lastanchor = '';
+    var fetchedItems = {};
+    for (;;) {
+      if (this.dead) return;
+      let [newItems, newanchor, error] = await api(chain, lastanchor, 50);
+      if (error) return;
+      if (this.dead) return;
+      newItems.map(item => {
+        fetchedItems[item.id] = Object.assign({}, item, {
+          chain,
+          full_id: chain + ':' + item.id
+        });
+      });
+      if (newItems.length === 0 || newanchor === lastanchor) break;
+      if (fetchedItems.length >= 200) {
+        let inmemItemM = this.cache[chain] || {};
+        let removeids = [];
+        map(inmemItemM, item => {
+          if (item.chain !== chain) return;
+          removeids.push(item.full_id);
+        });
+        this.db.removes('items', removeids);
+        this.cache[chain] = {};
+        break;
+      }
+      let minindexitem = minIndex(fetchedItems) || {};
+      if (minindexitem.index <= topindex) {
+        lastanchor = this.anchorCache[chain] || newanchor;
+        break;
+      }
+      lastanchor = newanchor;
+    }
+    for (var i = 0; i < Object.keys(fetchedItems).length; i++) {
+      let item = fetchedItems[Object.keys(fetchedItems)[i]];
+      this.db.put('items', item.full_id, item);
+      this.cache[item.chain] = this.cache[item.chain] || {};
+      this.cache[item.chain][item.id] = item;
+    }
+    this.anchorCache[chain] = lastanchor;
+  }
+}
+function minIndex(obj) {
+  if (!obj) return;
+  let keys = Object.keys(obj);
+  if (!keys.length) return;
+  let min = Infinity;
+  let minKey = Object.keys(obj)[0];
+  for (var i = 0; i < keys.length; i++) {
+    let index = obj[keys[i]] && obj[keys[i]].index || Infinity;
+    if (index < min) {
+      min = index;
+      minKey = keys[i];
+    }
+  }
+  return obj[minKey];
+}
+function maxIndex(obj) {
+  if (!obj) return;
+  let keys = Object.keys(obj);
+  if (!keys.length) return;
+  let max = -Infinity;
+  let maxKey = Object.keys(obj)[0];
+  for (var i = 0; i < keys.length; i++) {
+    let index = obj[keys[i]] && obj[keys[i]].index || -Infinity;
+    if (index > max) {
+      max = index;
+      maxKey = keys[i];
+    }
+  }
+  return obj[keys[maxKey]];
+}
+function map(collection, predicate) {
+  if (!collection) return [];
+  if (!predicate) return collection;
+  var out = [];
+  if (Array.isArray(collection)) {
+    for (let i = 0; i < collection.length; i++) {
+      out.push(predicate(collection[i], i));
+    }
+    return out;
+  }
+  if (typeof collection === 'object') {
+    var keys = Object.keys(collection);
+    for (let i = 0; i < keys.length; i++) {
+      var k = keys[i];
+      out.push(predicate(collection[k], k));
+    }
+    return out;
+  }
+  return out;
+}
+function size(o) {
+  if (!o) return 0;
+  if (o.length !== undefined) return o.length;
+  return Object.keys(o).length;
+}
+function orderBy(a, k, d) {
+  var clone = [];
+  map(a, v => clone.push(v));
+  clone.sort((i, j) => {
+    if (i[k] === j[k]) return 0;
+    var r = i[k] < j[k] ? -1 : 1;
+    return d === 'desc' ? -r : r;
+  });
+  return clone;
+}
+;// ./src/store/kv.js
+let KvMaxSize = 500;
+/* harmony default export */ const kv = (class {
+  constructor(db, schema) {
+    this.name = schema;
+    schema += '_kv';
+    this.dead = false;
+    this.db = db;
+    this.cache = {};
+    this.initialized = false;
+    this.init();
+  }
+  refreshCache() {
+    if (this.dead) return;
+    let inmemItemM = {};
+    let allitems = this.db.all('items');
+    allitems.forEach(function (item) {
+      inmemItemM[item.key] = item.value;
+    });
+    this.cache = inmemItemM;
+  }
+  init() {
+    if (this.initialized) return;
+    let inmemItemM = {};
+    console.time('KV' + this.name);
+    let allitems = this.db.all('items');
+    allitems.forEach(function (item) {
+      inmemItemM[item.key] = item.value;
+    });
+    this.cache = inmemItemM;
+    let allkeys = Object.keys(this.cache);
+    if (allkeys.length > KvMaxSize) {
+      let liveChance = KvMaxSize / 2 / allkeys.lenth;
+      let removekeys = [];
+      for (var i = 0; i < KvMaxSize; i++) {
+        let live = Math.random() <= liveChance;
+        if (live) continue;
+        let key = allkeys[i];
+        delete this.cache[key];
+        removekeys.push(key);
+      }
+      this.db.removes('items', [removekeys]);
+    }
+    this.initialized = true;
+    console.timeEnd('KV' + this.name);
   }
-  sendContentView(device, pageUrl, pageTitle, id, source_id, sku) {
-    if (!id) id = undefined;
-    if (!source_id) source_id = undefined;
-    return this.sendEvent({
-      by: {
-        id: this.uid,
-        device: device
-      },
-      type: 'content_viewed',
-      data: {
-        product: {
-          id: id,
-          source_id: source_id,
-          url: pageUrl,
-          name: pageTitle,
-          title: pageTitle,
-          sku: sku
-        }
-      }
+  all() {
+    if (this.dead) return [];
+    if (!this.initialized) return [];
+    return this.cache;
+  }
+  match(key) {
+    if (this.dead || !this.initialized) return;
+    if (!key) return;
+    return this.cache[key];
+  }
+  put(key, value) {
+    if (!key) return;
+    if (this.dead) return [];
+    if (!this.initialized) throw new Error('uninitialized');
+    this.cache[key] = value;
+    this.db.put('items', key, {
+      key,
+      value
     });
   }
+  del(key) {
+    if (this.dead) return;
+    if (!this.initialized) throw new Error('uninitialized');
+    delete this.cache[key];
+    this.db.removes('items', [key]);
+  }
+  destroy() {
+    this.db.clear('items');
+    this.dead = true;
+    this.db = undefined;
+    this.cache = undefined;
+    this.initialized = false;
+  }
 });
 ;// ./src/store/api_fake.js
 function api_fake_defineProperty(e, r, t) { return (r = api_fake_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -4679,6 +4713,10 @@ function makeFakeMessages(accid, convoid, userid, agentid) {
   onInterrupted() {}
   subscribe() {}
   stop() {}
+  getStatus() {
+    return 'active';
+  }
+  reconnect() {}
 });
 ;// ./src/store/store.js
 function store_defineProperty(e, r, t) { return (r = store_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -4690,6 +4728,8 @@ var flow = __webpack_require__(8193);
 
 
 
+
+
 var Realtime = __webpack_require__(2839);
 var cookie = __webpack_require__(5672);
 cookie.defaults.path = '/';
@@ -4701,6 +4741,7 @@ class Store {
   constructor(ApiURL, FileURL, RealtimeURL, inmem, fakeapi) {
     store_defineProperty(this, "inmem", false);
     store_defineProperty(this, "cookie", cookie);
+    store_defineProperty(this, "getConnectionStatus", () => this.connectionStatus);
     store_defineProperty(this, "_currentViewingProduct", {});
     store_defineProperty(this, "new_visitor", true);
     store_defineProperty(this, "matchUser", () => {
@@ -4808,6 +4849,8 @@ class Store {
     store_defineProperty(this, "matchIsOpen", () => !!this.kv.match('isopen'));
     store_defineProperty(this, "matchHasManuallyClosed", () => !!this.kv.match('hasManuallyClosed'));
     store_defineProperty(this, "matchClosePreviewAt", () => this.kv.match('close_preview_at') || 0);
+    store_defineProperty(this, "checkFormToken", token => this.api.checkFormToken(token));
+    store_defineProperty(this, "submitForm2", (token, data) => this.api.submitForm2(token, data));
     store_defineProperty(this, "sendPresence", util/* default */.A.throttle(async () => {
       if (this._die) return dieErr;
       await this.readyGate.entry();
@@ -4834,6 +4877,7 @@ class Store {
       this.seenQueue.push(id);
     });
     store_defineProperty(this, "onUpdate", (o, cb) => this.pubsub.on2(o, 'account', cb));
+    store_defineProperty(this, "onConnection", (o, cb) => this.pubsub.on2(o, 'connection', cb));
     store_defineProperty(this, "onResetCSS", (o, cb) => this.pubsub.on2(o, 'resetCSS', cb));
     store_defineProperty(this, "onHighlight", (o, cb) => this.pubsub.on2(o, 'highlight', cb));
     store_defineProperty(this, "setHasManuallyClosed", () => this.kv.put('hasManuallyClosed', true));
@@ -4855,6 +4899,9 @@ class Store {
       });
     });
     store_defineProperty(this, "timeDiff", 0);
+    this.connectionStatus = 'active';
+    this.CONNECTION_CHECK_INTERVAL = 3000;
+    this.reconnectTimestamp = 0;
     this.g_sync = {};
     this._die = false;
     this.forceDevice = null;
@@ -4881,9 +4928,9 @@ class Store {
     }
     cleanLocalStorage();
     this.pubsub = new util/* default */.A.Pubsub();
-    this.kv = new storage.kv(new storage.lsdb('sbz2023', this.inmem), 'kv');
-    this.cache = new storage.kv(new storage.lsdb('sbz2023', true), 'kv');
-    this.chain = new storage.chain(new storage.lsdb('cbz2023', true), 'ch');
+    this.kv = new kv(new lsdb('sbz2023', this.inmem), 'kv');
+    this.cache = new kv(new lsdb('sbz2023', true), 'kv');
+    this.chain = new Chain(new lsdb('cbz2023', true), 'ch');
     this.getLocaleContent = this.api.getLocaleContent;
     this.g_haveSentSeenM = {};
     this.last_focused = util/* default */.A.Date.now();
@@ -4941,6 +4988,23 @@ class Store {
       }
     }, 2000);
   }
+  async loopCheckConnectionStatus() {
+    while (true) {
+      if (this._die) break;
+      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();
+      }
+      let currentStatus = this.connectionStatus;
+      this.connectionStatus = this.realtime.getStatus();
+      if (currentStatus !== this.connectionStatus) {
+        console.log('publish connectionStatus', this.connectionStatus);
+        this.pubsub.publish('connection');
+      }
+    }
+  }
   linkProduct(p) {
     if (!p) {
       this._currentViewingProduct = {};
@@ -5119,6 +5183,7 @@ class Store {
     });
     this.readyGate.open();
     this.reconnectWs(accid, user.id);
+    this.loopCheckConnectionStatus();
     return user;
   }
   async login(accid, user_id, tokenGenerator) {
@@ -5716,9 +5781,9 @@ class Store {
       if ((k || '').startsWith('__sb')) this.cookie.remove(k);
     });
     this.kv.destroy();
-    this.kv = new storage.kv(new storage.lsdb('sbz2023', this.inmem), 'kv');
+    this.kv = new kv(new lsdb('sbz2023', this.inmem), 'kv');
     this.chain.destroy();
-    this.chain = new storage.chain(new storage.lsdb('cbz2023', true), 'ch');
+    this.chain = new Chain(new lsdb('cbz2023', true), 'ch');
   }
   destroy() {
     this._die = true;
@@ -5940,9 +6005,15 @@ class ChatButton extends common/* Com */.Mw {
           isquickreplies = true;
         }
       });
-      if (isquickreplies) return;
-      var tags = util/* default */.A.filter(util/* default */.A.map(this.renderMessagePreview(ev), tag => util/* default */.A.trim(tag)), a => a);
-      if (util/* default */.A.size(tags) > 0) this.setState({
+      let format = util/* default */.A.get(ev, 'data.message.format');
+      let block = util/* default */.A.get(ev, 'data.message.block');
+      if (block || format == 'block') {
+        if (util/* default */.A.isBlockEmpty(block) && isquickreplies) return;
+      } else {
+        let message = util/* default */.A.get(ev, 'data.message.text') || '';
+        if (!message && isquickreplies) return;
+      }
+      this.setState({
         displayPreview: true,
         previewEvent: ev
       });
@@ -6256,11 +6327,20 @@ class ChatButton extends common/* Com */.Mw {
   }
   renderMessagePreview(ev, defmsg) {
     defmsg = defmsg || this.props.t('sent_you_a_message');
-    var format = util/* default */.A.get(ev, 'data.message.format');
+    let format = util/* default */.A.get(ev, 'data.message.format');
     let block = util/* default */.A.get(ev, 'data.message.block');
-    if (block || format == 'block') return (0,preact_module.h)(chatbox_block/* default */.A, {
-      block: block
-    });
+    if (block || format == 'block') {
+      if (util/* default */.A.isBlockEmpty(block)) {
+        let attachments = util/* default */.A.get(ev, 'data.message.attachments');
+        if (util/* default */.A.size(attachments) > 0) {
+          return (0,preact_module.h)("div", null, `${this.props.t('send')} ${util/* default */.A.size(attachments)} ${util/* default */.A.size(attachments) > 1 ? this.props.t('attachments') : this.props.t('attachment')}`);
+        }
+        return defmsg;
+      }
+      return (0,preact_module.h)(chatbox_block/* default */.A, {
+        block: block
+      });
+    }
     let message = util/* default */.A.get(ev, 'data.message.text', defmsg);
     if (!message && util/* default */.A.size(util/* default */.A.get(ev, 'data.message.attachments')) > 0) message = defmsg;
     if (!message) return null;
@@ -6457,6 +6537,17 @@ class Header extends common/* Com */.Mw {
   constructor(props) {
     super(props);
   }
+  renderAccountAvatar() {
+    let acc = this.props.store.matchAccount() || {};
+    if (!acc.logo_url) return null;
+    return (0,preact_module.h)("img", {
+      width: 38,
+      height: 38,
+      alt: acc.name,
+      class: "avatar avatar__account",
+      src: this.props.store.replaceFileUrl(acc.logo_url) || __webpack_require__(3582)
+    });
+  }
   render() {
     let headerMode = 'collapsed';
     let cls = 'widget-header';
@@ -6492,7 +6583,7 @@ class Header extends common/* Com */.Mw {
     return (0,preact_module.h)("div", {
       class: cls,
       style: style
-    }, $back, (0,preact_module.h)("div", {
+    }, $back, this.renderAccountAvatar(), (0,preact_module.h)("div", {
       class: "widget-header--title-container"
     }, (0,preact_module.h)("div", {
       class: "widget-header--title"
@@ -7304,429 +7395,382 @@ class QuickReplies extends common/* Com */.Mw {
     }, $replies);
   }
 }
-;// ./src/chatbox/ListField.js
+;// ./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 + ""; }
+function Form_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 ListField extends common/* Com */.Mw {
+
+class Form2 extends common/* Com */.Mw {
   constructor(props) {
     super(props);
-    this.setState({
-      search: '',
-      isShow: false
-    });
-  }
-  render() {
-    let fields = util/* default */.A.filter(this.props.items, item => {
-      let search = this.state.search.toLowerCase();
-      let name = item || '';
-      return name.toLowerCase().indexOf(search) > -1;
-    });
-    let $fields = util/* default */.A.map(fields, field => {
-      return (0,preact_module.h)("li", {
-        class: "custom-select--item-options",
-        onClick: () => this.add(field)
-      }, field);
-    });
-    let $selected = util/* default */.A.map(this.props.selected, (item, i) => {
+    Form_defineProperty(this, "state", {
+      errorFields: {},
+      submiting: false
+    });
+    Form_defineProperty(this, "renderFormComponent", (com, idx) => {
+      if (com.type === 'input') return this.renderField(com, idx);
+      if (com.type === 'submit_button') return this.renderSubmitButton(com, idx);
+      if (this.props.isSubmited) return;
       return (0,preact_module.h)("div", {
-        class: "custom-select--selected-item",
-        onClick: e => this.remove(e, i)
-      }, item, (0,preact_module.h)("i", {
-        class: "icn-delete delete-tag"
+        class: "form-component form-component-block"
+      }, (0,preact_module.h)(chatbox_block/* default */.A, {
+        block: com
       }));
     });
-    let $dropdown = (0,preact_module.h)("div", {
-      class: "custom-select--wrap-options"
-    }, (0,preact_module.h)("input", {
-      onClick: e => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.setState({
-          isShow: true
-        });
-      },
-      type: "text",
-      onInput: e => this.setState({
-        search: e.target.value
-      }),
-      value: this.state.search,
-      placeholder: "T\xECm ki\u1EBFm",
-      class: "custom-select--input-search"
-    }), (0,preact_module.h)("ul", {
-      class: "custom-select--items-options"
-    }, $fields));
-    if (!this.state.isShow) {
-      $dropdown = null;
-    }
-    return (0,preact_module.h)("div", {
-      class: "form-control custom-select"
-    }, (0,preact_module.h)(common/* Clickaway */.tW, {
-      onClickaway: e => this.clickaway()
-    }, (0,preact_module.h)("div", {
-      class: "custom-select--wrap-selected",
-      onClick: () => this.setState({
-        isShow: !this.state.isShow
-      })
-    }, (0,preact_module.h)("div", {
-      class: "custom-select--selected-items"
-    }, $selected), $dropdown, (0,preact_module.h)("div", {
-      class: "custom-select--icon-dropdown"
-    }, (0,preact_module.h)("svg", {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, (0,preact_module.h)("g", {
-      opacity: "0.6"
-    }, (0,preact_module.h)("path", {
-      d: "M7 9.5L12 14.5L17 9.5H7Z",
-      fill: "black"
-    })))))));
-  }
-  clickaway() {
-    this.setState({
-      isShow: false
-    });
-  }
-  add(field) {
-    this.props.onAddItem && this.props.onAddItem(field);
-  }
-  remove(e, index) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.props.onRemoveItem && this.props.onRemoveItem(index);
-  }
-}
-;// ./src/chatbox/FormAttachment.js
-
-
-
-
-class FormAttachment extends common/* Com */.Mw {
-  constructor(props) {
-    super(props);
-    this.props.store.onUpdate(this, _ => this.forceUpdate());
-    let user = this.props.store.matchUser();
-    let fields = util/* default */.A.get(this.props.form, 'fields') || [];
-    let formData = util/* default */.A.map(fields, field => {
-      let is_required = field.is_required || false;
-      var state = util/* default */.A.parseJSON(field.state) || {};
-      if (!is_required) is_required = state.require || false;
-      var userattr = util/* default */.A.getUserAttr(user, field.name, state.type || 'text');
-      return {
-        name: field.name,
-        items: field.items,
-        value: util/* default */.A.parseJSON(field.answer) || util/* default */.A.parseJSON(field.default_answer) || userattr,
-        is_required,
-        label: field.title,
-        type: field.input_type
-      };
-    });
-    this.setState({
-      formData
-    });
-  }
-  isSummited() {
-    let found = util/* default */.A.find(this.state.formData, field => !!field.answered);
-    if (found) return true;
-    let convo = this.props.store.matchConvo(util/* default */.A.convoOfEv(this.props.ev));
-    return convo.state === 'ended';
-  }
-  render() {
-    if (util/* default */.A.size(this.state.formData) === 0) return null;
-    let $fields = this.renderFields();
-    let $submitbutton = null;
-    if (!this.isSummited()) {
-      $submitbutton = (0,preact_module.h)("div", {
-        class: "mt-2"
-      }, (0,preact_module.h)("button", {
-        onClick: _ => this.submit(),
-        type: "button",
-        class: "form-attachment--submit-btn"
-      }, this.props.t('btn_submit_form_attachment')));
-    }
-    return (0,preact_module.h)("div", {
-      class: "form-attachment",
-      onClick: e => e.stopPropagation()
-    }, this.props.t(this.props.form.title) || this.props.t('capture_lead_title'), $fields, $submitbutton);
-  }
-  focus() {
-    if (this.props.store.isPreview) return;
-    if (util/* default */.A.size(this.state.formData) === 0) return;
-    let $field;
-    if (this.isFormFilled()) {
-      var keys = Object.keys(this.state.formData);
-      var lastkey = keys[util/* default */.A.size(keys) - 1];
-      var lastfield = this.state.formData[lastkey];
-      $field = this['field.' + encode(lastfield.name)];
-    } else {
-      var firstunfilledfield = this.firstUnfilledField();
-      if (!firstunfilledfield) return;
-      $field = this['field.' + encode(firstunfilledfield.name)];
-    }
-    if ($field) $field.focus();
-  }
-  firstUnfilledField() {
-    return util/* default */.A.find(this.state.formData, field => field.value == null || field.value === '');
-  }
-  isFormFilled() {
-    return !util/* default */.A.find(this.state.formData, field => field.value == null || field.value === '');
-  }
-  onInputChange(index, val) {
-    let formData = util/* default */.A.cloneDeep(this.state.formData);
-    formData[index].value = val;
-    this.setState({
-      formData
-    });
-  }
-  onListAddItem(index, val) {
-    let formData = util/* default */.A.cloneDeep(this.state.formData);
-    let field = formData[index];
-    field.value = field.value || [];
-    field.value.push(val);
-    this.setState({
-      formData
-    });
-  }
-  onListRemoveItem(index, vindex) {
-    let formData = util/* default */.A.cloneDeep(this.state.formData);
-    let field = formData[index];
-    field.value = field.value || [];
-    field.value.splice(vindex, 1);
-    this.setState({
-      formData
-    });
-  }
-  renderFields() {
-    if (util/* default */.A.size(this.state.formData) === 0) return null;
-    let $fields = null;
-    $fields = util/* default */.A.map(this.state.formData, (field, index) => {
-      let $field = null;
-      var errclass = field.error ? 'input--error' : '';
-      if (field.type === 'text') {
-        if (this.isSummited()) {
-          $field = (0,preact_module.h)("div", {
-            class: "form-control--container"
-          }, (0,preact_module.h)("input", {
-            disabled: true,
-            ref: ref => {
-              this['field.' + encode(field.name)] = ref;
-            },
-            value: field.value,
-            onInput: e => this.onInputChange(index, e.target.value),
-            class: `form-control ${errclass}`,
-            type: "text"
-          }), (0,preact_module.h)("i", {
-            class: "form-control--check"
-          }));
-        } else {
-          $field = (0,preact_module.h)("input", {
-            ref: ref => {
-              this['field.' + encode(field.name)] = ref;
-            },
-            value: field.value,
-            onInput: e => this.onInputChange(index, e.target.value),
-            class: `form-control ${errclass}`,
-            type: "text"
-          });
+    Form_defineProperty(this, "renderSubmitButton", (com, idx) => {
+      if (this.props.isSubmited) return;
+      return (0,preact_module.h)("div", {
+        class: "form-component form-component-submit-button"
+      }, (0,preact_module.h)("div", {
+        class: "form-control--valid-input--error"
+      }, this.props.errorMessage), (0,preact_module.h)("div", null, (0,preact_module.h)("button", {
+        class: "btn--start-convo",
+        disabled: this.props.submiting
+      }, com.label)));
+    });
+    Form_defineProperty(this, "renderField", (com, idx) => {
+      let errorMsg = this.state.errorFields[com.key];
+      if (this.props.isSubmited) {
+        let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+        val = val.value || '""';
+        val = util/* default */.A.parseJSON(val);
+        if (Array.isArray(val)) val = val.join(', ');
+        return (0,preact_module.h)("div", {
+          class: "form-component submitted",
+          key: com.key
+        }, (0,preact_module.h)("label", {
+          class: "label"
+        }, com.label), (0,preact_module.h)("div", null, val || (0,preact_module.h)("span", {
+          class: "text-muted text-italic"
+        }, this.props.t('no_info_input'))));
+      }
+      return (0,preact_module.h)("div", {
+        class: "form-component",
+        key: com.key
+      }, (0,preact_module.h)("label", {
+        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", {
+        class: "form-control--valid-input--error"
+      }, errorMsg));
+    });
+    Form_defineProperty(this, "renderFieldTextInput", (com, idx) => {
+      let cls = 'form-control';
+      if (this.state.errorFields[com.key]) cls = 'form-control input--error';
+      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      val = val.value || '""';
+      val = util/* default */.A.parseJSON(val);
+      return (0,preact_module.h)("input", {
+        ref: this[`${com.key}_input`],
+        type: "text",
+        class: cls,
+        placeholder: com.placeholder,
+        value: val,
+        onInput: e => {
+          this.onChangeValue(com.key, e.target.value);
+          this.clearError(com.key);
         }
-      } else if (field.type === 'number') {
-        if (this.isSummited()) {
-          $field = (0,preact_module.h)("div", {
-            class: "form-control--container"
-          }, (0,preact_module.h)("input", {
-            disabled: true,
-            ref: ref => {
-              this['field.' + encode(field.name)] = ref;
-            },
-            value: field.value,
-            onInput: e => this.onInputChange(index, e.target.value),
-            class: `form-control ${errclass}`,
-            type: "number"
-          }), (0,preact_module.h)("i", {
-            class: "form-control--check"
-          }));
-        } else {
-          $field = (0,preact_module.h)("input", {
-            ref: ref => {
-              this['field.' + encode(field.name)] = ref;
-            },
-            value: field.value,
-            onInput: e => this.onInputChange(index, e.target.value),
-            class: `form-control ${errclass}`,
-            type: "number"
-          });
+      });
+    });
+    Form_defineProperty(this, "renderFieldDateInput", (com, idx) => {
+      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      val = val.value || '""';
+      val = util/* default */.A.parseJSON(val);
+      return (0,preact_module.h)("input", {
+        ref: this[`${com.key}_input`],
+        class: "form-control",
+        type: "date",
+        value: val,
+        onInput: e => {
+          this.onChangeValue(com.key, e.target.value);
+          this.clearError(com.key);
         }
-      } else if (field.type === 'boolean') {
-        $field = (0,preact_module.h)("div", {
+      });
+    });
+    Form_defineProperty(this, "renderFieldRadioInput", (com, idx) => {
+      let val = util/* default */.A.find(this.props.formValues, 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 id = com.key + '_' + oidx;
+        return (0,preact_module.h)("div", {
+          class: "radio"
+        }, (0,preact_module.h)("input", {
+          type: "radio",
+          name: com.key,
+          id: id,
+          checked: option.value === val,
+          onChange: () => this.toggleRadioField(com.key, option.value)
+        }), (0,preact_module.h)("label", {
+          class: "radio--label",
+          for: id
+        }, option.label), (0,preact_module.h)("div", {
+          class: "radio--check"
+        }));
+      });
+    });
+    Form_defineProperty(this, "renderFieldCheckboxInput", (com, idx) => {
+      let val = util/* default */.A.find(this.props.formValues, 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 id = com.key + '_' + oidx;
+        return (0,preact_module.h)("div", {
           class: "checkbox"
         }, (0,preact_module.h)("input", {
-          ref: ref => {
-            this['field.' + encode(field.name)] = ref;
-          },
           type: "checkbox",
-          id: 'checkbox.' + this.props.ev.id + '.' + field.name,
-          onChange: e => this.onInputChange(index, ev.target.checked),
-          checked: field.value
+          name: com.key,
+          id: id,
+          checked: val.includes(option.value),
+          onChange: () => this.toggleCheckboxField(com.key, option.value)
         }), (0,preact_module.h)("label", {
           class: "checkbox--label",
-          for: 'checkbox.' + this.props.ev.id + '.' + field.name
-        }, field.label), (0,preact_module.h)("div", {
+          for: id
+        }, option.label), (0,preact_module.h)("div", {
           class: "checkbox--check"
-        }, (0,preact_module.h)("div", null)));
-      } else if (field.type === 'list') {
-        let selected = field.value || [];
-        let items = util/* default */.A.filter(util/* default */.A.get(field, 'items', []), item => !selected.includes(item));
-        $field = (0,preact_module.h)(ListField, {
-          selected: selected,
-          items: items,
-          onAddItem: e => this.onListAddItem(index, e),
-          onRemoveItem: item => this.onListRemoveItem(index, item)
-        });
-      } else if (field.type === 'datetime') {
-        $field = (0,preact_module.h)("input", {
-          ref: ref => {
-            this['field.' + encode(field.name)] = ref;
-          },
-          value: field.value,
-          onInput: e => this.onInputChange(index, e.target.value),
-          class: `form-control ${errclass}`,
-          type: "date"
-        });
-      }
-      let label = field.label;
-      if (field.name === 'fullname') {
-        label = this.props.t('fullname');
-      } else if (field.name === 'emails') {
-        label = this.props.t('email');
-      } else if (field.name === 'phones') {
-        label = this.props.t('phones');
-      }
-      return (0,preact_module.h)("div", null, (0,preact_module.h)("p", {
-        class: "label mt-3"
-      }, label, field.is_required ? (0,preact_module.h)("span", {
-        class: "ml-1 red"
-      }, "*") : ''), field.error ? (0,preact_module.h)("div", {
-        class: "form-control--valid-input--error"
-      }, field.error) : '', $field);
+        }));
+      });
     });
-    return (0,preact_module.h)("div", null, $fields);
-  }
-  async submit() {
-    var hasError = false;
-    util/* default */.A.map(this.state.formData, field => {
-      if (field.is_required && (field.value === undefined || field.value === '' || util/* default */.A.size(field.value) === 0 && Array.isArray(field.value))) {
-        field.error = this.props.t('error_empty');
-        hasError = true;
-      } else {
-        field.error = '';
-      }
-      if (field.name === 'emails' && field.value) {
-        if (!util/* default */.A.isEmail(field.value)) {
-          field.error = this.props.t('error_email_invalid');
-          hasError = true;
+    Form_defineProperty(this, "renderFieldDropdownInput", (com, idx) => {
+      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      val = val.value || '""';
+      val = util/* default */.A.parseJSON(val);
+      return (0,preact_module.h)("select", {
+        class: "form-control",
+        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 => {
+        return (0,preact_module.h)("option", {
+          value: option.value
+        }, option.label);
+      }));
     });
-    this.forceUpdate();
-    if (hasError) return;
-    let user = {};
-    let formData = util/* default */.A.cloneDeep(this.state.formData);
-    util/* default */.A.map(formData, field => {
-      var attr = {
-        key: field.name
-      };
-      field.answered = new util/* default */.A.Date().getTime();
-      if (field.type === 'number') {
-        attr.number = parseInt(field.value);
-        field.answer = util/* default */.A.stringify(attr.number);
-      }
-      if (field.type === 'datetime') {
-        attr.datetime = new util/* default */.A.Date(field.value).toISOString();
-        field.answer = util/* default */.A.stringify(attr.datetime);
-      }
-      if (field.type === 'list') {
-        attr.list = field.value;
-        field.answer = util/* default */.A.stringify(attr.list);
-      }
-      if (field.type === 'text' || field.type === 'boolean') {
-        attr[field.type] = field.value;
-        field.answer = util/* default */.A.stringify(field.value);
+    Form_defineProperty(this, "renderFieldTextareaInput", (com, idx) => {
+      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      val = val.value || '""';
+      val = util/* default */.A.parseJSON(val);
+      return (0,preact_module.h)("textarea", {
+        onInput: e => {
+          this.onChangeValue(com.key, e.target.value);
+          this.clearError(com.key);
+        },
+        ref: this[`${com.key}_input`],
+        rows: "3",
+        class: "form-control",
+        placeholder: com.placeholder
+      });
+    });
+    Form_defineProperty(this, "onSubmit", e => {
+      e.preventDefault();
+      if (!this.validateForm()) return;
+      this.props.onSubmit();
+    });
+    Form_defineProperty(this, "validateForm", () => {
+      let result = true;
+      let ref = '';
+      let errors = {};
+      let components = util/* default */.A.get(this.props.formSetting, 'components') || [];
+      util/* default */.A.each(components, com => {
+        if (com.type === 'input') {
+          if (com.is_required) {
+            let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+            val = val.value || '""';
+            val = util/* default */.A.parseJSON(val);
+            if (typeof val === 'string' && !val.trim()) {
+              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`;
+            }
+            if (Array.isArray(val) && val.length === 0) {
+              result = false;
+              errors[com.key] = this.props.t('cannot_be_empty');
+            }
+          }
+        }
+      });
+      if (ref && this[ref] && this[ref].current) {
+        this[ref].current.focus();
       }
-      util/* default */.A.setUserAttr(user, attr);
+      this.setState({
+        errorFields: errors
+      });
+      return result;
     });
-    util/* default */.A.map(formData, field => {
-      let ffield = util/* default */.A.find(this.props.form.fields, ffield => ffield.name === field.name);
-      if (!ffield) return;
-      ffield.answered = field.answered;
+    Form_defineProperty(this, "onChangeValue", (key, v) => {
+      let formValues = this.props.formValues;
+      let f = util/* default */.A.find(formValues, field => field.key === key);
+      if (!f) {
+        formValues.push({
+          key,
+          value: JSON.stringify(v)
+        });
+      } else {
+        f.value = JSON.stringify(v);
+      }
+      this.props.onChangeFormValues(formValues);
     });
-    this.setState({
-      formData
+    Form_defineProperty(this, "clearError", key => {
+      let errors = this.state.errorFields;
+      errors[key] = '';
+      this.setState({
+        errorFields: errors
+      });
     });
-    this.props.store.setUser(user);
-    let message = {
-      attachments: [{
-        type: 'form_submit',
-        form_submit: {
-          state: '{"user_id":"' + this.props.store.matchUser().id + '"}',
-          form_message_id: util/* default */.A.get(this.props.ev, 'id'),
-          fields: formData
-        }
-      }]
-    };
-    let cid = util/* default */.A.convoOfEv(this.props.ev);
-    this.props.store.sendConvoEvent(cid, 'message_sent', {
-      message
+    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') {
+        this[`${com.key}_input`] = (0,preact_module/* createRef */._3)();
+      }
     });
-    this.props.onSubmit && this.props.onSubmit();
+  }
+  toggleRadioField(key, v) {
+    this.clearError(key);
+    this.onChangeValue(key, v);
+  }
+  toggleCheckboxField(key, v) {
+    let currentValues = util/* default */.A.find(this.props.formValues, f => f.key === key) || {};
+    currentValues = currentValues.value || '[]';
+    currentValues = util/* default */.A.parseJSON(currentValues);
+    if (currentValues.includes(v)) {
+      currentValues = currentValues.filter(s => s !== v);
+    } else {
+      currentValues.push(v);
+    }
+    this.clearError(key);
+    this.onChangeValue(key, currentValues);
+  }
+  render() {
+    let components = util/* default */.A.get(this.props.formSetting, 'components') || [];
+    let cls = 'form-wrapper form';
+    if (this.props.mode === 'attachment') cls += ' form-wrapper-attachment';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, this.props.isSubmited && (0,preact_module.h)("div", {
+      class: "form-component"
+    }, this.props.t('you_have_submitted_info_successfully')), (0,preact_module.h)("form", {
+      onSubmit: this.onSubmit
+    }, util/* default */.A.map(components, this.renderFormComponent)));
   }
 }
-function encode(key) {
-  return btoa(key).split('=').join('');
-}
-;// ./src/chatbox/FormAttachments.js
+;// ./src/chatbox/FormAttachment2.js
+function FormAttachment2_defineProperty(e, r, t) { return (r = FormAttachment2_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function FormAttachment2_toPropertyKey(t) { var i = FormAttachment2_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function FormAttachment2_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 FormAttachments extends common/* Com */.Mw {
+class FormAttachment extends common/* Com */.Mw {
   constructor(props) {
     super(props);
-  }
-  render() {
-    let byType = util/* default */.A.get(this.props.ev, 'by.type');
-    if (byType === 'user') return;
-    let forms = [];
-    let attachments = util/* default */.A.get(this.props.ev, 'data.message.attachments') || [];
-    util/* default */.A.each(attachments, att => {
-      if (!att) return;
-      if (att.type !== 'form' && att.type !== 'ask_info_form') return;
-      att.form._type = att.type;
-      forms.push(att.form);
+    FormAttachment2_defineProperty(this, "state", {
+      formValues: [],
+      submiting: false,
+      isSubmited: false,
+      errorMessage: '',
+      step: 1
+    });
+    FormAttachment2_defineProperty(this, "onChangeFormValues", values => {
+      this.setState({
+        formValues: values
+      });
     });
-    let $forms = util/* default */.A.map(forms, (form, formIndex) => {
-      return (0,preact_module.h)(FormAttachment, {
-        store: this.props.store,
-        onSubmit: this.props.onSubmit,
-        ref: ref => {
-          this['form.' + formIndex] = ref;
-        },
-        key: formIndex,
-        form: form,
-        ev: this.props.ev,
-        t: this.props.t
+    FormAttachment2_defineProperty(this, "onSubmit", async () => {
+      console.log('submittttttt', this.state.formValues);
+      this.setState({
+        errorMessage: ''
+      });
+      if (this.state.submiting) return;
+      this.setState({
+        submiting: true
+      });
+      await util/* default */.A.sleep(1_500);
+      this.setState({
+        submiting: false,
+        isSubmited: true
       });
     });
-    if ($forms.length === 0) return null;
-    return (0,preact_module.h)("div", {
-      class: "message-agent"
-    }, $forms);
   }
-  focus() {
-    var $form = this['form.0'];
-    if ($form) $form.focus();
+  render() {
+    if (this.props.ev.id !== 'evshpgaeetsplfqprzmynrvrl') return;
+    const formSetting = {
+      components: [{
+        type: 'text',
+        text: 'Đặt lịch khám'
+      }, {
+        type: 'input',
+        key: 'fullname',
+        default_value: '234',
+        link_attribute: 'email',
+        placeholder: 'Nguyen Van A',
+        label: 'Họ và tên',
+        input_type: 'text',
+        is_required: true
+      }, {
+        type: 'input',
+        key: 'phone',
+        validation: 'phone',
+        label: 'SĐT',
+        input_type: 'text',
+        is_required: true
+      }, {
+        type: 'input',
+        label: 'Chọn ca',
+        is_required: true,
+        input_type: 'radio',
+        key: 'shift',
+        input_options: [{
+          value: 'Buổi sáng',
+          label: 'Buổi sáng'
+        }, {
+          value: 'Buổi chiều',
+          label: 'Buổi chiều'
+        }]
+      }, {
+        type: 'input',
+        label: 'Chọn ca 2',
+        is_required: true,
+        input_type: 'checkbox',
+        key: 'shift_2',
+        input_options: [{
+          value: 'Buổi sáng',
+          label: 'Buổi sáng'
+        }, {
+          value: 'Buổi chiều',
+          label: 'Buổi chiều'
+        }]
+      }, {
+        type: 'input',
+        key: 'schedule',
+        label: 'Chọn ngày',
+        is_required: true,
+        input_type: 'date'
+      }, {
+        type: 'submit_button',
+        label: 'Submit'
+      }]
+    };
+    return (0,preact_module.h)("div", {
+      onClick: e => e.stopPropagation()
+    }, (0,preact_module.h)(Form2, {
+      store: this.props.store,
+      formSetting: formSetting,
+      mode: "attachment",
+      t: this.props.t,
+      formValues: this.state.formValues,
+      errorMessage: this.state.errorMessage,
+      isSubmited: this.state.isSubmited,
+      submiting: this.state.submiting,
+      onChangeFormValues: this.onChangeFormValues,
+      onSubmit: this.onSubmit
+    }));
   }
 }
 ;// ./src/chatbox/FormSubmitAttachments.js
@@ -8384,6 +8428,9 @@ class Event extends common/* Com */.Mw {
   }
   renderMessageSent() {
     let ev = this.props.event.ev;
+    let attachments = util/* default */.A.get(ev, 'data.message.attachments');
+    let hasForm = util/* default */.A.find(attachments, att => att.type === 'form');
+    if (ev.id === 'evshpgaeetsplfqprzmynrvrl') hasForm = true;
     this.tryLoadOrder(ev);
     let t = new util/* default */.A.Date(ev.created).toLocaleString();
     if (util/* default */.A.get(ev, 'by.type') !== 'user') {
@@ -8391,10 +8438,12 @@ class Event extends common/* Com */.Mw {
       if (this.props.event.mode === 'lead') $sender = this.renderAgentAvatar(ev);
       let innercls = 'agent-convo-event-inner';
       if (this.props.isLast) innercls += ' last';
+      let wrappercls = 'agent-convo-event-wrapper';
+      if (hasForm) wrappercls += ' full';
       return (0,preact_module.h)("div", {
         class: "convo-event agent-message"
       }, $sender, (0,preact_module.h)("div", {
-        class: "agent-convo-event-wrapper"
+        class: wrappercls
       }, (0,preact_module.h)("div", {
         class: innercls
       }, (0,preact_module.h)(TextMessage, {
@@ -8419,10 +8468,8 @@ class Event extends common/* Com */.Mw {
         store: this.props.store,
         ev: ev,
         t: this.props.t
-      }), (0,preact_module.h)(FormAttachments, {
+      }), (0,preact_module.h)(FormAttachment, {
         store: this.props.store,
-        onSubmit: this.props.onFormSubmit,
-        ref: this.refForm,
         ev: ev,
         t: this.props.t
       }), (0,preact_module.h)(FormSubmitAttachments, {
@@ -8506,10 +8553,9 @@ class Event extends common/* Com */.Mw {
       store: this.props.store,
       ev: ev,
       t: this.props.t
-    }), (0,preact_module.h)(FormAttachments, {
+    }), (0,preact_module.h)(FormAttachment, {
       store: this.props.store,
-      onSubmit: this.props.onFormSubmit,
-      ref: this.refForm,
+      t: this.props.t,
       ev: ev
     }), (0,preact_module.h)(ProductAttachments, {
       t: this.props.t,
@@ -8728,7 +8774,7 @@ class Events extends common/* Com */.Mw {
   render() {
     if (this.state.error) return this.renderError();
     let events = util/* default */.A.map(this.props.store.listEvents(this.props.cid));
-    if (!this.state.loading && util/* default */.A.size(events) === 0) {
+    if (!this.state.loading && util/* default */.A.size(events) === 0 && !this.props.cid) {
       return (0,preact_module.h)("div", {
         ref: ref => this.refBody = ref,
         class: "widget-body--events-container"
@@ -9258,6 +9304,152 @@ class Rating extends common/* Com */.Mw {
     });
   }
 }
+;// ./src/chatbox/ConnectionStatus.js
+function ConnectionStatus_defineProperty(e, r, t) { return (r = ConnectionStatus_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function ConnectionStatus_toPropertyKey(t) { var i = ConnectionStatus_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function ConnectionStatus_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 ConnectionStatus extends common/* Com */.Mw {
+  constructor(props) {
+    super(props);
+    ConnectionStatus_defineProperty(this, "onChangeConnectionStatus", () => {
+      let newstatus = this.props.store.getConnectionStatus();
+      let currentstatus = this.state.status;
+      this.setState({
+        status: newstatus
+      });
+      if (currentstatus !== 'active' && newstatus === 'active') this.changeStatusFailedToSuccess();
+    });
+    ConnectionStatus_defineProperty(this, "changeStatusFailedToSuccess", () => {
+      this.setState({
+        status: 'just_active'
+      });
+      if (this.props.cid) this.props.store.fetchMoreEvents(this.props.cid);
+      if (this._timeout) clearTimeout(this._timeout);
+      this._timeout = setTimeout(() => {
+        this.setState({
+          status: 'active'
+        });
+      }, 2000);
+    });
+    this.props.store.onConnection(this, this.onChangeConnectionStatus);
+    this.state = {
+      status: this.props.store.getConnectionStatus()
+    };
+  }
+  render() {
+    if (this.state.status === 'active') return;
+    let cls = 'widget-internet-status';
+    let text = '';
+    if (this.state.status !== 'just_active') {
+      cls += ' negative';
+      text = `${this.props.t('network_error')}. ${this.props.t('try_reconnecting')}...`;
+    } else {
+      cls += ' positive';
+      text = this.props.t('reconnect_successfully');
+    }
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, text);
+  }
+}
+;// ./src/chatbox/ListField.js
+
+
+
+class ListField extends common/* Com */.Mw {
+  constructor(props) {
+    super(props);
+    this.setState({
+      search: '',
+      isShow: false
+    });
+  }
+  render() {
+    let fields = util/* default */.A.filter(this.props.items, item => {
+      let search = this.state.search.toLowerCase();
+      let name = item || '';
+      return name.toLowerCase().indexOf(search) > -1;
+    });
+    let $fields = util/* default */.A.map(fields, field => {
+      return (0,preact_module.h)("li", {
+        class: "custom-select--item-options",
+        onClick: () => this.add(field)
+      }, field);
+    });
+    let $selected = util/* default */.A.map(this.props.selected, (item, i) => {
+      return (0,preact_module.h)("div", {
+        class: "custom-select--selected-item",
+        onClick: e => this.remove(e, i)
+      }, item, (0,preact_module.h)("i", {
+        class: "icn-delete delete-tag"
+      }));
+    });
+    let $dropdown = (0,preact_module.h)("div", {
+      class: "custom-select--wrap-options"
+    }, (0,preact_module.h)("input", {
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.setState({
+          isShow: true
+        });
+      },
+      type: "text",
+      onInput: e => this.setState({
+        search: e.target.value
+      }),
+      value: this.state.search,
+      placeholder: "T\xECm ki\u1EBFm",
+      class: "custom-select--input-search"
+    }), (0,preact_module.h)("ul", {
+      class: "custom-select--items-options"
+    }, $fields));
+    if (!this.state.isShow) {
+      $dropdown = null;
+    }
+    return (0,preact_module.h)("div", {
+      class: "form-control custom-select"
+    }, (0,preact_module.h)(common/* Clickaway */.tW, {
+      onClickaway: e => this.clickaway()
+    }, (0,preact_module.h)("div", {
+      class: "custom-select--wrap-selected",
+      onClick: () => this.setState({
+        isShow: !this.state.isShow
+      })
+    }, (0,preact_module.h)("div", {
+      class: "custom-select--selected-items"
+    }, $selected), $dropdown, (0,preact_module.h)("div", {
+      class: "custom-select--icon-dropdown"
+    }, (0,preact_module.h)("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, (0,preact_module.h)("g", {
+      opacity: "0.6"
+    }, (0,preact_module.h)("path", {
+      d: "M7 9.5L12 14.5L17 9.5H7Z",
+      fill: "black"
+    })))))));
+  }
+  clickaway() {
+    this.setState({
+      isShow: false
+    });
+  }
+  add(field) {
+    this.props.onAddItem && this.props.onAddItem(field);
+  }
+  remove(e, index) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.onRemoveItem && this.props.onRemoveItem(index);
+  }
+}
 ;// ./src/chatbox/Widget.js
 function Widget_defineProperty(e, r, t) { return (r = Widget_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function Widget_toPropertyKey(t) { var i = Widget_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -9273,6 +9465,7 @@ var empty = __webpack_require__(9419);
 
 
 
+
 let Order = false;
 const LoadOrder = () => __webpack_require__.e(/* import() */ 185).then(__webpack_require__.bind(__webpack_require__, 4185));
 
@@ -9690,12 +9883,12 @@ class Widget extends common/* Com */.Mw {
         class: "checkbox"
       }, (0,preact_module.h)("input", {
         type: "checkbox",
-        id: 'form-checkbox' + Widget_encode(field.key) + item.value,
+        id: 'form-checkbox' + encode(field.key) + item.value,
         onChange: e => this.toggleCheckboxField(field.key, item.value),
         checked: values.includes(item.value)
       }), (0,preact_module.h)("label", {
         class: "checkbox--label",
-        for: 'form-checkbox' + Widget_encode(field.key) + item.value
+        for: 'form-checkbox' + encode(field.key) + item.value
       }, this.props.t.i18n(item.i18n_label) || item.label || item.value), (0,preact_module.h)("div", {
         class: "checkbox--check"
       }, (0,preact_module.h)("div", null)));
@@ -9727,13 +9920,13 @@ class Widget extends common/* Com */.Mw {
         class: "radio"
       }, (0,preact_module.h)("input", {
         type: "radio",
-        name: 'form-radio' + Widget_encode(field.key),
-        id: 'form-radio' + Widget_encode(field.key) + item.value,
+        name: 'form-radio' + encode(field.key),
+        id: 'form-radio' + encode(field.key) + item.value,
         onChange: e => this.toggleRadioField(field.key, item.value),
         checked: value === item.value
       }), (0,preact_module.h)("label", {
         class: "radio--label",
-        for: 'form-radio' + Widget_encode(field.key) + item.value
+        for: 'form-radio' + encode(field.key) + item.value
       }, this.props.t.i18n(item.i18n_label) || item.label || item.value), (0,preact_module.h)("div", {
         class: "radio--check"
       }, (0,preact_module.h)("div", null)));
@@ -9782,9 +9975,9 @@ class Widget extends common/* Com */.Mw {
           $field = (0,preact_module.h)("textarea", {
             class: `form-control ${errclass}`,
             ref: ref => {
-              this['form_' + Widget_encode(key)] = ref;
+              this['form_' + encode(key)] = ref;
             },
-            id: 'form_' + Widget_encode(key),
+            id: 'form_' + encode(key),
             value: field.value || '',
             onInput: e => this.onInputChange(key, e.target.value),
             onChange: e => this.onInputChange(key, e.target.value),
@@ -9798,13 +9991,13 @@ class Widget extends common/* Com */.Mw {
           $field = this.renderDropdownField(field);
         } else {
           $field = (0,preact_module.h)("input", {
-            id: 'form_' + Widget_encode(key),
+            id: 'form_' + encode(key),
             value: field.value || '',
             onInput: e => this.onInputChange(key, e.target.value),
             onChange: e => this.onInputChange(key, e.target.value),
             onKeyDown: e => this.onKeywordField(e, form, formName, key),
             ref: ref => {
-              this['form_' + Widget_encode(key)] = ref;
+              this['form_' + encode(key)] = ref;
             },
             class: `form-control ${errclass}`,
             type: "text"
@@ -9812,11 +10005,11 @@ class Widget extends common/* Com */.Mw {
         }
       } else if (field.type === 'number') {
         $field = (0,preact_module.h)("input", {
-          id: 'form_' + Widget_encode(key),
+          id: 'form_' + encode(key),
           value: field.value,
           onInput: e => this.onInputChange(key, e.target.value),
           ref: ref => {
-            this['form_' + Widget_encode(key)] = ref;
+            this['form_' + encode(key)] = ref;
           },
           class: `form-control ${errclass}`,
           type: "number"
@@ -9826,12 +10019,12 @@ class Widget extends common/* Com */.Mw {
           class: "checkbox"
         }, (0,preact_module.h)("input", {
           type: "checkbox",
-          id: 'form-checkbox' + Widget_encode(key),
+          id: 'form-checkbox' + encode(key),
           onInput: e => this.onBooleanChange(key, e),
           checked: field.value
         }), (0,preact_module.h)("label", {
           class: "checkbox--label",
-          for: 'form-checkbox' + Widget_encode(key)
+          for: 'form-checkbox' + encode(key)
         }, field.label), (0,preact_module.h)("div", {
           class: "checkbox--check"
         }, (0,preact_module.h)("div", null)));
@@ -9840,12 +10033,12 @@ class Widget extends common/* Com */.Mw {
           class: "radio"
         }, (0,preact_module.h)("input", {
           type: "radio",
-          id: 'form-radio' + Widget_encode(key) + Widget_encode(item.value),
+          id: 'form-radio' + encode(key) + encode(item.value),
           checked: field.value === item.value,
           onInput: e => this.onInputChange(key, item.value)
         }), (0,preact_module.h)("label", {
           class: "radio--label",
-          for: 'form-radio' + Widget_encode(key) + Widget_encode(item.value)
+          for: 'form-radio' + encode(key) + encode(item.value)
         }, this.props.t.i18n(item.i18n_label) || item.label || item.value), (0,preact_module.h)("div", {
           class: "radio--check"
         }, (0,preact_module.h)("div", {
@@ -9865,7 +10058,7 @@ class Widget extends common/* Com */.Mw {
         $field = this.renderDropdownField(field);
       } else if (field.type === 'datetime') {
         $field = (0,preact_module.h)("input", {
-          id: 'form_' + Widget_encode(key),
+          id: 'form_' + encode(key),
           value: field.value,
           onInput: e => this.onInputChange(key, e.target.value),
           class: `form-control ${errclass}`,
@@ -9884,10 +10077,10 @@ class Widget extends common/* Com */.Mw {
       }
       if (field.label) label = field.label;
       return (0,preact_module.h)("div", {
-        key: 'form_' + Widget_encode(key)
+        key: 'form_' + encode(key)
       }, (0,preact_module.h)("label", {
         class: "label",
-        for: 'form_' + Widget_encode(key)
+        for: 'form_' + encode(key)
       }, label, field.is_required ? (0,preact_module.h)("span", {
         class: "red"
       }, "*") : ''), $field, field.error ? (0,preact_module.h)("div", {
@@ -10006,14 +10199,14 @@ class Widget extends common/* Com */.Mw {
         if (focusfieldkey || field.type !== 'text') return;
         if (!field.value || field.error) focusfieldkey = key;
       });
-      var $input = this['form_' + Widget_encode(focusfieldkey)];
+      var $input = this['form_' + encode(focusfieldkey)];
       if ($input) $input.focus();
       util/* default */.A.setTimeout(() => {
         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)];
+        var $input = this['form_' + encode(focusfieldkey)];
         if ($input) $input.focus();
       }, 200);
       return;
@@ -10086,6 +10279,10 @@ class Widget extends common/* Com */.Mw {
       onPostback: e => this.createPostback(e),
       t: this.props.t,
       plugin: this.props.plugin
+    }), (0,preact_module.h)(ConnectionStatus, {
+      cid: this.props.cid,
+      store: this.props.store,
+      t: this.props.t
     })), (0,preact_module.h)(Rating, {
       forceView: this.props.view,
       plugin: this.props.plugin,
@@ -10351,7 +10548,7 @@ class FormMounter extends common/* Com */.Mw {
     this.props.onMount(this.props.form);
   }
 }
-function Widget_encode(key) {
+function encode(key) {
   return encodeURIComponent(key);
 }
 ;// ./src/chatbox/main.js