@subiz/widget-v4 4.1.17 → 4.1.19

package/assets/less/widget_header.less

@@ -14,11 +14,12 @@
 		font-weight: 400;
 		display: flex;
 		border-radius: 5px;
-		align-items: center;
 		justify-content: center;
 		width: 20px;
 		height: 20px;
 		cursor: pointer;
+		position: relative;
+		top: 5px;
 	}
 }
 
@@ -42,6 +43,7 @@
 
 	.widget-header--description {
 		font-size: 14px;
+		white-space: pre-wrap;
 		opacity: 0.8;
 		flex: 1;
 		.color(@white);

package/compiled_src/call/call.js

@@ -28,7 +28,7 @@ class Notif extends _common.Com {
       title: '',
       last_show: 0
     });
-    setTimeout(async () => {
+    _index.default.setTimeout(async () => {
       let {
         body: impression
       } = await this.props.store.sendImpression(this.props.plugin.id);
@@ -101,7 +101,7 @@ class Notif extends _common.Com {
     await this.waitForT();
     if (!this.props.t) return;
     if (!close) {
-      clearTimeout(this.lastCloseTimeout);
+      _index.default.clearTimeout(this.lastCloseTimeout);
       this.setState({
         closeAnimation: false
       });
@@ -138,11 +138,11 @@ class Notif extends _common.Com {
       closeAnimation: true
     });
     this.mouse_leave = _index.default.Date.now();
-    this.lastCloseTimeout = setTimeout(() => this.setState({
+    this.lastCloseTimeout = _index.default.setTimeout(() => this.setState({
       close: true,
       closeAnimation: false
     }), 150);
-    if (this.props.plugin._dont_close) setTimeout(() => this.setState({
+    if (this.props.plugin._dont_close) _index.default.setTimeout(() => this.setState({
       closeAnimation: false,
       close: false
     }), 1000);
@@ -156,7 +156,7 @@ class Notif extends _common.Com {
     this.setClose(this.state.close);
   }
   componentWillUnmount() {
-    clearInterval(this.interval);
+    _index.default.clearInterval(this.interval);
     _index.default.setCss(this.props.plugin.id, this.$cssStyleDiv, '');
   }
   async componentDidMount() {
@@ -172,7 +172,7 @@ class Notif extends _common.Com {
     }
     this.props.store.onResetCSS(this, () => this.refreshCSS());
     await this.refreshCSS();
-    this.interval = setInterval(() => {
+    this.interval = _index.default.setInterval(() => {
       if (this.props._destroy) return this.componentWillUnmount();
       let mouseleave = this.mouse_leave;
       if (mouseleave === 0) mouseleave = _index.default.Date.now();
@@ -185,7 +185,7 @@ class Notif extends _common.Com {
         return this.setClose(false);
       }
     }, 1000);
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       this.setState({
         cssready: true
       });

package/compiled_src/chatbox/DropdownSelect.js

@@ -112,7 +112,7 @@ class DropdownSelect extends _common.Com {
   focusFilter() {
     if (!this.filterRef.current) return;
     this.filterRef.current.focus();
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       if (!this.filterRef.current) return;
       this.filterRef.current.focus();
     }, 100);

package/compiled_src/chatbox/Event.js

@@ -183,7 +183,7 @@ class Event extends _common.Com {
       }));
     }
     if (_index.default.getMsgField(ev, 'idempotency') === ev.id && this.props.store.now() - ev.created < 900) {
-      setTimeout(() => this.setState({
+      _index.default.setTimeout(() => this.setState({
         refresh: this.state.refresh
       }), 1000);
     }

package/compiled_src/chatbox/Events.js

@@ -168,7 +168,7 @@ class Events extends _common.Com {
       error: false
     });
     this.scrollToBottom();
-    setTimeout(() => this.setState({
+    _index.default.setTimeout(() => this.setState({
       loading: false
     }), 50);
   }
@@ -178,11 +178,11 @@ class Events extends _common.Com {
     return $container.scrollHeight < $container.scrollTop + $container.offsetHeight + 50;
   }
   scrollToBottom() {
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       const $div = this.refBody;
       if ($div) $div.scrollTop = $div.scrollHeight;
     });
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       const $div = this.refBody;
       if ($div) $div.scrollTop = $div.scrollHeight;
     }, 200);

package/compiled_src/chatbox/MessageInput.js

@@ -216,10 +216,10 @@ class MessageInput extends _common.Com {
   focus() {
     if (this.props.disabled) return;
     this.refMessageInput.current && this.refMessageInput.current.focus();
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       this.refMessageInput.current && this.refMessageInput.current.focus();
     });
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       this.refMessageInput.current && this.refMessageInput.current.focus();
     }, 100);
   }

package/compiled_src/chatbox/Order.js

@@ -150,7 +150,7 @@ class Order extends _common.Com {
   render() {
     if (this._show != this.props.show) {
       this._show = this.props.show;
-      setTimeout(() => {
+      _index.default.setTimeout(() => {
         if (!this._show) this.close();else this.open();
       });
     }

package/compiled_src/chatbox/Rating.js

@@ -188,7 +188,7 @@ class Rating extends _common.Com {
       hide: false
     });
     if (!this.refRating.current) return;
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       if (this.refComment.current) this.refComment.current.focus();
     }, 400);
     this.refComment.current.value = '';

package/compiled_src/chatbox/Typing.js

@@ -24,7 +24,7 @@ class Typing extends _common.Com {
       let oldby = _index.default.get(this.state.ev, 'by.id');
       if (oldby && _index.default.get(ev, 'by.id') !== oldby) return;
       if (_index.default.get(ev, 'type') === 'message_sent') {
-        if (this.timer) clearTimeout(this.timer);
+        if (this.timer) _index.default.clearTimeout(this.timer);
         this.timer = null;
         this.setState({
           isShow: false
@@ -38,8 +38,8 @@ class Typing extends _common.Com {
         ev: ev,
         isShow: true
       });
-      if (this.timer) clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
+      if (this.timer) _index.default.clearTimeout(this.timer);
+      this.timer = _index.default.setTimeout(() => {
         if (_index.default.convoOfEv(ev) !== this.props.cid) return;
         this.timer = null;
         this.setState({

package/compiled_src/chatbox/Widget.js

@@ -110,7 +110,7 @@ class Widget extends _common.Com {
         clickedJoin: false,
         quickReplyMessage: {}
       });
-      setTimeout(() => {
+      _index.default.setTimeout(() => {
         this.events && this.events.focus();
         if (!this.props.store.isMobile()) this.focusInput();
       }, 100);
@@ -644,8 +644,8 @@ class Widget extends _common.Com {
     if (this.props.store.isPreview) return;
     var $input = this.msgInput.current;
     if (!$input) return;
-    setTimeout(() => $input && $input.blur());
-    setTimeout(() => $input && $input.blur(), 300);
+    _index.default.setTimeout(() => $input && $input.blur());
+    _index.default.setTimeout(() => $input && $input.blur(), 300);
   }
   focusInput() {
     if (this.props.store.isPreview) return;
@@ -656,7 +656,7 @@ class Widget extends _common.Com {
         if (firstemptykey) return;
         if (!field.value) firstemptykey = key;
       });
-      setTimeout(() => {
+      _index.default.setTimeout(() => {
         var $input = this['form_' + encode(firstemptykey)];
         if (!$input) return;
         $input.focus();
@@ -665,8 +665,8 @@ class Widget extends _common.Com {
     }
     var $input = this.msgInput.current;
     if (!$input) return;
-    setTimeout(() => $input.focus());
-    setTimeout(() => $input.focus(), 300);
+    _index.default.setTimeout(() => $input.focus());
+    _index.default.setTimeout(() => $input.focus(), 300);
   }
   onRate(rating) {
     if (!this.props.cid) return;

package/compiled_src/chatbox/time.js

@@ -9,7 +9,7 @@ var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var g_pub = new _index.default.Pubsub();
-setInterval(() => g_pub.publish('time'), 20 * 1000);
+_index.default.setInterval(() => g_pub.publish('time'), 20 * 1000);
 class Time extends _common.Com {
   constructor(props) {
     super(props);

package/compiled_src/common.js

@@ -13,7 +13,7 @@ class Com extends _preact.Component {
   constructor(props) {
     super(props);
     this._isMounted = true;
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       if (this.componentWillUnmount) {
         let old = this.componentWillUnmount.bind(this);
         this.componentWillUnmount = () => {
@@ -69,7 +69,7 @@ let langMessages = {};
 exports.langMessages = langMessages;
 let downloadLock = false;
 function downloadLanguage(store, locale, force) {
-  if (downloadLock) return new Promise(resolve => setTimeout(() => downloadLanguage(store, locale, force).then(resolve), 100));
+  if (downloadLock) return new Promise(resolve => _index.default.setTimeout(() => downloadLanguage(store, locale, force).then(resolve), 100));
   downloadLock = true;
   let messages;
   if (locale === 'debug' || langMessages[locale] && !force) {

package/compiled_src/contact/contact.js

@@ -252,7 +252,7 @@ class Contact extends _common.Com {
     let pluginstringify = JSON.stringify(this.props.plugin);
     if (this.state.pluginjson !== pluginstringify) {
       this.refreshCSS();
-      setTimeout(() => this.setState({
+      _index.default.setTimeout(() => this.setState({
         pluginjson: pluginstringify
       }));
     }

package/compiled_src/lib.js

@@ -43,10 +43,10 @@ class Widget {
     let user = await this.store.login(accid, user_id, tokenGenerator);
     if (!$container) $container = document.body;
     this.pluginMgr = new _plugin.default(this, $container);
-    let clean = setInterval(() => {
+    let clean = _index.default.setInterval(() => {
       if ($container && $container.isConnected) return;
       this.pluginMgr.destroy();
-      clearInterval(clean);
+      _index.default.clearInterval(clean);
     }, 1000);
     this.domGate.open();
     return user;
@@ -61,10 +61,10 @@ class Widget {
     let user = await this.store.init(accid, undefined, ref);
     if (!$container) $container = document.body || document;
     this.pluginMgr = new _plugin.default(this, $container);
-    let clean = setInterval(() => {
+    let clean = _index.default.setInterval(() => {
       if ($container && $container.isConnected) return;
       this.pluginMgr.destroy();
-      clearInterval(clean);
+      _index.default.clearInterval(clean);
     }, 1000);
     this.domGate.open();
     return user;
@@ -73,10 +73,10 @@ class Widget {
     let outmask = await this.store.init(id, mask);
     if (!$container) $container = document.body || document;
     this.pluginMgr = new _plugin.default(this, $container);
-    let clean = setInterval(() => {
+    let clean = _index.default.setInterval(() => {
       if ($container && $container.isConnected) return;
       this.pluginMgr.destroy();
-      clearInterval(clean);
+      _index.default.clearInterval(clean);
     }, 1000);
     this.domGate.open();
     cb && cb(outmask);

package/compiled_src/notif/notif.js

@@ -28,7 +28,7 @@ class Notif extends _common.Com {
       title: '',
       last_show: 0
     });
-    setTimeout(async () => {
+    _index.default.setTimeout(async () => {
       let {
         body: impression
       } = await this.props.store.sendImpression(this.props.plugin.id);
@@ -101,7 +101,7 @@ class Notif extends _common.Com {
     await this.waitForT();
     if (!this.props.t) return;
     if (!close) {
-      clearTimeout(this.lastCloseTimeout);
+      _index.default.clearTimeout(this.lastCloseTimeout);
       this.setState({
         closeAnimation: false
       });
@@ -140,11 +140,11 @@ class Notif extends _common.Com {
       closeAnimation: true
     });
     this.mouse_leave = _index.default.Date.now();
-    this.lastCloseTimeout = setTimeout(() => this.setState({
+    this.lastCloseTimeout = _index.default.setTimeout(() => this.setState({
       close: true,
       closeAnimation: false
     }), 150);
-    if (this.props.plugin._dont_close) setTimeout(() => this.setState({
+    if (this.props.plugin._dont_close) _index.default.setTimeout(() => this.setState({
       closeAnimation: false,
       close: false
     }), 1000);
@@ -158,7 +158,7 @@ class Notif extends _common.Com {
     this.setClose(this.state.close);
   }
   componentWillUnmount() {
-    clearInterval(this.interval);
+    _index.default.clearInterval(this.interval);
     _index.default.setCss(this.props.plugin.id, this.$cssStyleDiv, '');
   }
   async componentDidMount() {
@@ -174,7 +174,7 @@ class Notif extends _common.Com {
     }
     this.props.store.onResetCSS(this, () => this.refreshCSS());
     await this.refreshCSS();
-    this.interval = setInterval(() => {
+    this.interval = _index.default.setInterval(() => {
       if (this.props._destroy) return this.componentWillUnmount();
       let mouseleave = this.mouse_leave;
       if (mouseleave === 0) mouseleave = _index.default.Date.now();
@@ -187,7 +187,7 @@ class Notif extends _common.Com {
         return this.setClose(false);
       }
     }, 1000);
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       this.setState({
         cssready: true
       });

package/compiled_src/order/address_picker.js

@@ -108,7 +108,7 @@ class AddressPicker extends _common.Com {
   focusFilter() {
     if (!this.filterRef.current) return;
     this.filterRef.current.focus();
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       if (!this.filterRef.current) return;
       this.filterRef.current.focus();
     }, 100);

package/compiled_src/popup/countdown.js

@@ -20,7 +20,7 @@ class Countdown extends _common.Com {
     _defineProperty(this, "state", {
       flipKey: '43'
     });
-    this.timer = setInterval(() => {
+    this.timer = _index.default.setInterval(() => {
       if (this.props._destroy) return this.componentWillUnmount();
       let cd = this.props.com.countdown || {};
       let newFlipKey = 'cd' + ':' + cd.skin + ':' + cd.size + ':' + this.props.plugin.popup.font_family + ':';
@@ -31,7 +31,7 @@ class Countdown extends _common.Com {
     }, 500);
   }
   componentWillUnmount() {
-    clearInterval(this.timer);
+    _index.default.clearInterval(this.timer);
   }
   getCountDownDeltaSec(countdown) {
     let dest;

package/compiled_src/popup/popup.js

@@ -27,14 +27,14 @@ class Popup extends _common.Com {
       fontReady: false
     });
     this._formRef = (0, _preact.createRef)();
-    setTimeout(() => this.fillForm(), 1000);
-    setTimeout(async () => {
+    _index.default.setTimeout(() => this.fillForm(), 1000);
+    _index.default.setTimeout(async () => {
       let {
         body: impression
       } = await this.props.store.sendImpression(this.props.plugin.id);
       this.impressionToken = _index.default.get(impression, 'impression_token') || '';
     }, 10);
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       let fonts = {};
       fonts[this.props.plugin.popup.font_family] = true;
       let images = {};
@@ -58,7 +58,7 @@ class Popup extends _common.Com {
         imageReady: true
       })));
       _index.default.preloadWebfonts(Object.keys(fonts));
-      setTimeout(async () => {
+      _index.default.setTimeout(async () => {
         await this.waitForFont(Object.keys(fonts));
         this.setState({
           fontReady: true
@@ -177,11 +177,11 @@ class Popup extends _common.Com {
       this.setState({
         closeAnimation: true
       });
-      setTimeout(() => this.setState({
+      _index.default.setTimeout(() => this.setState({
         close: true,
         closeAnimation: false
       }), 150);
-      if (this.props.plugin._dont_close) setTimeout(() => {
+      if (this.props.plugin._dont_close) _index.default.setTimeout(() => {
         this.lastoverflow = window.getComputedStyle(document.body).getPropertyValue('overflow');
         document.body.style.setProperty('overflow', 'hidden', 'important');
         this.setState({
@@ -266,7 +266,7 @@ class Popup extends _common.Com {
       if (a.action === 'open_widget') this.props.showWidget('list');
     }
     for (let a of actions) {
-      if (a.action === 'close') setTimeout(() => this.setClose(true), 100);
+      if (a.action === 'close') _index.default.setTimeout(() => this.setClose(true), 100);
       if (a.action === 'next_page') this.props.nextPage();
     }
     for (let a of actions) {
@@ -695,7 +695,7 @@ class Popup extends _common.Com {
     }
     this.props.store.onResetCSS(this, () => this.refreshCSS());
     await this.refreshCSS();
-    setTimeout(() => {
+    _index.default.setTimeout(() => {
       this.setState({
         cssready: true
       });

package/compiled_src/store/api.js

@@ -186,7 +186,7 @@ class _default {
           return this.last_token;
         }
         if (!force && this.last_token && age < 3000) {
-          if (this.token_generator) setTimeout(async () => {
+          if (this.token_generator) _index.default.setTimeout(async () => {
             let token, err;
             try {
               token = await tokenGenerator(profile_id);

package/compiled_src/store/store.js

@@ -14,7 +14,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var flow = require('@subiz/flow');
-var Realtime = require('@subiz/wsclient/index.js');
+var Realtime = require('@subiz/wsclient');
 var cookie = require('cookie_js');
 cookie.defaults.path = '/';
 cookie.expiresMultiplier = 60 * 60 * 24;
@@ -208,7 +208,7 @@ class Store {
       if (!user.id) return;
       var dev = this.getDeviceInfo();
       if (!dev.ga_tracking_ids || !dev.ga_client_id) return;
-      clearInterval(_gaInterval);
+      _index.default.clearInterval(_gaInterval);
       this.device = dev;
       let ga_client_id = dev.ga_client_id;
       if (ga_client_id !== _index.default.getUserAttr(user, 'ga_client_id', 'text')) {
@@ -405,7 +405,7 @@ class Store {
   }
   seenLoop() {
     this.seenQueue = [];
-    clearInterval(this._seenInterval);
+    _index.default.clearInterval(this._seenInterval);
     this._seenInterval = _index.default.setInterval(() => {
       this.seenQueue = [...new Set(this.seenQueue)];
       let user = this.cache.match('user') || {};

package/compiled_src/util/campaign.js

@@ -50,32 +50,32 @@ function trackInactivity(seconds, cb) {
   let resetTime = () => {
     inactiveSeconds = 0;
   };
-  let timer = setInterval(() => {
+  let timer = common.setInterval(() => {
     inactiveSeconds++;
     if (inactiveSeconds < seconds) return;
     if (cb) cb();
     for (let ev of events) {
       document.removeEventListener(ev, resetTime, false);
     }
-    clearInterval(timer);
+    common.clearInterval(timer);
   }, 1000);
   for (let ev of events) {
     document.addEventListener(ev, resetTime, false);
   }
 }
 let timeOnPage = 0;
-setInterval(() => {
+common.setInterval(() => {
   timeOnPage += 5;
 }, 5000);
 function trackTimeOnPage(seconds, cb) {
   if (seconds < 1) {
-    return setTimeout(function () {
+    return common.setTimeout(function () {
       cb(seconds);
     }, 100);
   }
-  let timer = setInterval(() => {
+  let timer = common.setInterval(() => {
     if (timeOnPage < seconds) return;
     if (cb) cb(timeOnPage);
-    clearInterval(timer);
+    common.clearInterval(timer);
   }, 1000);
 }

package/compiled_src/util/common.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Date = exports.DEF_CHAT_BUTTON_BACKGROUND_IMAGE_URL = exports.DEFVAL = void 0;
 exports.agentsOfConvo = agentsOfConvo;
 exports.checkRunConditions = checkRunConditions;
+exports.clearTimeout = exports.clearInterval = void 0;
 exports.cloneDeep = cloneDeep;
 exports.convoOfEv = convoOfEv;
 exports.convoToEv = convoToEv;
@@ -84,6 +85,10 @@ var setTimeout = f.contentWindow.setTimeout.bind(f.contentWindow);
 exports.setTimeout = setTimeout;
 var setInterval = f.contentWindow.setInterval.bind(f.contentWindow);
 exports.setInterval = setInterval;
+var clearInterval = f.contentWindow.clearInterval.bind(f.contentWindow);
+exports.clearInterval = clearInterval;
+var clearTimeout = f.contentWindow.clearTimeout.bind(f.contentWindow);
+exports.clearTimeout = clearTimeout;
 function convoOfEv(ev) {
   if (!ev) return '';
   switch (ev.type) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.17",
+	"version": "4.1.19",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -12,15 +12,15 @@
 		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
 		"@subiz/storage": "0.0.8",
-		"@subiz/wsclient": "^3.1.9",
+		"@subiz/wsclient": "^4.0.9",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.27.2",
+		"core-js": "^3.28.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
 		"less-loader": "^11.1.0",
 		"marked": "^4.2.12",
-		"preact": "^10.11.3"
+		"preact": "^10.12.1"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.20.7",
@@ -31,10 +31,10 @@
 		"babel-loader": "^9.1.2",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"prettier": "^2.8.3",
-		"puppeteer": "^19.6.3",
+		"prettier": "^2.8.4",
+		"puppeteer": "^19.7.0",
 		"webpack": "^5.75.0",
-		"webpack-bundle-analyzer": "^4.7.0",
+		"webpack-bundle-analyzer": "^4.8.0",
 		"webpack-cli": "^5.0.1",
 		"webpack-dev-server": "^4.11.1"
 	}

package/src/call/call.js

@@ -22,7 +22,7 @@ export default class Notif extends Com {
 	constructor(props) {
 		super(props)
 
-		setTimeout(async () => {
+		sb.setTimeout(async () => {
 			let {body: impression} = await this.props.store.sendImpression(this.props.plugin.id)
 			this.impressionToken = sb.get(impression, 'impression_token') || ''
 
@@ -95,7 +95,7 @@ export default class Notif extends Com {
 		if (!this.props.t) return
 
 		if (!close) {
-			clearTimeout(this.lastCloseTimeout)
+			sb.clearTimeout(this.lastCloseTimeout)
 
 			this.setState({closeAnimation: false})
 			let timestamp = this.randomTimestampt()
@@ -133,8 +133,8 @@ export default class Notif extends Com {
 		}
 		this.setState({closeAnimation: true})
 		this.mouse_leave = sb.Date.now()
-		this.lastCloseTimeout = setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
-		if (this.props.plugin._dont_close) setTimeout(() => this.setState({closeAnimation: false, close: false}), 1000)
+		this.lastCloseTimeout = sb.setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
+		if (this.props.plugin._dont_close) sb.setTimeout(() => this.setState({closeAnimation: false, close: false}), 1000)
 	}
 
 	async refreshCSS() {
@@ -149,7 +149,7 @@ export default class Notif extends Com {
 	}
 
 	componentWillUnmount() {
-		clearInterval(this.interval)
+		sb.clearInterval(this.interval)
 		sb.setCss(this.props.plugin.id, this.$cssStyleDiv, '')
 	}
 
@@ -166,7 +166,7 @@ export default class Notif extends Com {
 		this.props.store.onResetCSS(this, () => this.refreshCSS())
 		await this.refreshCSS()
 
-		this.interval = setInterval(() => {
+		this.interval = sb.setInterval(() => {
 			if (this.props._destroy) return this.componentWillUnmount()
 			// keep notification open when user hover on it
 			// but dont close right after mouse leave, activate after 1 sec
@@ -182,7 +182,7 @@ export default class Notif extends Com {
 			}
 		}, 1000)
 
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.setState({cssready: true})
 			this.setClose(false) // auto open when created
 		}, 50)

package/src/chatbox/DropdownSelect.js

@@ -114,7 +114,7 @@ export default class DropdownSelect extends Com {
 	focusFilter() {
 		if (!this.filterRef.current) return
 		this.filterRef.current.focus()
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			if (!this.filterRef.current) return
 			this.filterRef.current.focus()
 		}, 100)

package/src/chatbox/Event.js

@@ -167,7 +167,7 @@ export default class Event extends Com {
 		}
 
 		if (sb.getMsgField(ev, 'idempotency') === ev.id && this.props.store.now() - ev.created < 900) {
-			setTimeout(() => this.setState({refresh: this.state.refresh}), 1000)
+			sb.setTimeout(() => this.setState({refresh: this.state.refresh}), 1000)
 		}
 
 		// only show sending while the message is send too long (>300ms) but haven't returned from

package/src/chatbox/Events.js

@@ -173,7 +173,7 @@ export default class Events extends Com {
 		this.setState({error: false})
 		this.scrollToBottom()
 
-		setTimeout(() => this.setState({loading: false}), 50)
+		sb.setTimeout(() => this.setState({loading: false}), 50)
 	}
 
 	isBottom() {
@@ -183,11 +183,11 @@ export default class Events extends Com {
 	}
 
 	scrollToBottom() {
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			const $div = this.refBody
 			if ($div) $div.scrollTop = $div.scrollHeight
 		})
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			const $div = this.refBody
 			if ($div) $div.scrollTop = $div.scrollHeight
 		}, 200)

package/src/chatbox/MessageInput.js

@@ -228,10 +228,10 @@ export default class MessageInput extends Com {
 	focus() {
 		if (this.props.disabled) return
 		this.refMessageInput.current && this.refMessageInput.current.focus()
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.refMessageInput.current && this.refMessageInput.current.focus()
 		})
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.refMessageInput.current && this.refMessageInput.current.focus()
 		}, 100)
 	}

package/src/chatbox/Order.js

@@ -59,7 +59,7 @@ export default class Order extends Com {
 	render() {
 		if (this._show != this.props.show) {
 			this._show = this.props.show
-			setTimeout(() => {
+			sb.setTimeout(() => {
 				if (!this._show) this.close()
 				else this.open()
 			})

package/src/chatbox/Rating.js

@@ -155,7 +155,7 @@ export default class Rating extends Com {
 		if (!this.state.hide) return
 		this.setState({hide: false})
 		if (!this.refRating.current) return
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			if (this.refComment.current) this.refComment.current.focus()
 		}, 400)
 		this.refComment.current.value = ''

package/src/chatbox/Typing.js

@@ -23,7 +23,7 @@ export default class Typing extends Com {
 
 			if (sb.get(ev, 'type') === 'message_sent') {
 				// stop the typing
-				if (this.timer) clearTimeout(this.timer)
+				if (this.timer) sb.clearTimeout(this.timer)
 				this.timer = null
 				this.setState({isShow: false})
 				return
@@ -35,8 +35,8 @@ export default class Typing extends Com {
 
 			if (sb.get(ev, 'type') !== 'conversation_typing') return
 			this.setState({ev: ev, isShow: true})
-			if (this.timer) clearTimeout(this.timer)
-			this.timer = setTimeout(() => {
+			if (this.timer) sb.clearTimeout(this.timer)
+			this.timer = sb.setTimeout(() => {
 				if (sb.convoOfEv(ev) !== this.props.cid) return
 
 				this.timer = null

package/src/chatbox/Widget.js

@@ -53,7 +53,7 @@ export default class Widget extends Com {
 			this.closeOrder()
 			this.setState({clickedJoin: false, quickReplyMessage: {}})
 			// this.props.store.setLastview('chat', { cid: this.props.cid })
-			setTimeout(() => {
+			sb.setTimeout(() => {
 				// focus Events then focus MessageInput
 				// if there is any pending form, MessageInput will be disabled
 				// and dont steal focus from Events
@@ -642,8 +642,8 @@ export default class Widget extends Com {
 		if (this.props.store.isPreview) return
 		var $input = this.msgInput.current
 		if (!$input) return
-		setTimeout(() => $input && $input.blur())
-		setTimeout(() => $input && $input.blur(), 300) // force lose focus
+		sb.setTimeout(() => $input && $input.blur())
+		sb.setTimeout(() => $input && $input.blur(), 300) // force lose focus
 	}
 
 	focusInput() {
@@ -659,7 +659,7 @@ export default class Widget extends Com {
 				if (!field.value) firstemptykey = key
 			})
 
-			setTimeout(() => {
+			sb.setTimeout(() => {
 				var $input = this['form_' + encode(firstemptykey)]
 				if (!$input) return
 
@@ -670,8 +670,8 @@ export default class Widget extends Com {
 
 		var $input = this.msgInput.current
 		if (!$input) return
-		setTimeout(() => $input.focus())
-		setTimeout(() => $input.focus(), 300) // force focus
+		sb.setTimeout(() => $input.focus())
+		sb.setTimeout(() => $input.focus(), 300) // force focus
 	}
 
 	onRate(rating) {

package/src/chatbox/time.js

@@ -1,7 +1,7 @@
 import sb from '../util/index.js'
 
 var g_pub = new sb.Pubsub()
-setInterval(() => g_pub.publish('time'), 20 * 1000)
+sb.setInterval(() => g_pub.publish('time'), 20 * 1000)
 
 import {Com} from '../common.js'
 import {h} from 'preact'

package/src/common.js

@@ -5,7 +5,7 @@ export class Com extends Component {
 	constructor(props) {
 		super(props)
 		this._isMounted = true
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			if (this.componentWillUnmount) {
 				let old = this.componentWillUnmount.bind(this)
 				this.componentWillUnmount = () => {
@@ -74,7 +74,7 @@ let downloadLock = false
 
 export function downloadLanguage(store, locale, force) {
 	if (downloadLock)
-		return new Promise((resolve) => setTimeout(() => downloadLanguage(store, locale, force).then(resolve), 100))
+		return new Promise((resolve) => sb.setTimeout(() => downloadLanguage(store, locale, force).then(resolve), 100))
 
 	downloadLock = true
 	// let locale = getLocale()

package/src/contact/contact.js

@@ -262,7 +262,7 @@ export default class Contact extends Com {
 
 		if (this.state.pluginjson !== pluginstringify) {
 			this.refreshCSS()
-			setTimeout(() => this.setState({pluginjson: pluginstringify}))
+			sb.setTimeout(() => this.setState({pluginjson: pluginstringify}))
 		}
 
 		if (this.state.close) return null

package/src/lib.js

@@ -33,11 +33,11 @@ class Widget {
 		if (!$container) $container = document.body
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = setInterval(() => {
+		let clean = sb.setInterval(() => {
 			// check if the dom is deleted
 			if ($container && $container.isConnected) return
 			this.pluginMgr.destroy()
-			clearInterval(clean)
+			sb.clearInterval(clean)
 		}, 1000)
 		this.domGate.open()
 		return user
@@ -57,11 +57,11 @@ class Widget {
 		if (!$container) $container = document.body || document
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = setInterval(() => {
+		let clean = sb.setInterval(() => {
 			// check if the dom is deleted
 			if ($container && $container.isConnected) return
 			this.pluginMgr.destroy()
-			clearInterval(clean)
+			sb.clearInterval(clean)
 		}, 1000)
 		this.domGate.open()
 		return user
@@ -73,11 +73,11 @@ class Widget {
 		if (!$container) $container = document.body || document
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = setInterval(() => {
+		let clean = sb.setInterval(() => {
 			// check if the dom is deleted
 			if ($container && $container.isConnected) return
 			this.pluginMgr.destroy()
-			clearInterval(clean)
+			sb.clearInterval(clean)
 		}, 1000)
 		this.domGate.open()
 		cb && cb(outmask)

package/src/notif/notif.js

@@ -22,7 +22,7 @@ export default class Notif extends Com {
 	constructor(props) {
 		super(props)
 
-		setTimeout(async () => {
+		sb.setTimeout(async () => {
 			let {body: impression} = await this.props.store.sendImpression(this.props.plugin.id)
 			this.impressionToken = sb.get(impression, 'impression_token') || ''
 
@@ -96,7 +96,7 @@ export default class Notif extends Com {
 		if (!this.props.t) return
 
 		if (!close) {
-			clearTimeout(this.lastCloseTimeout)
+			sb.clearTimeout(this.lastCloseTimeout)
 
 			this.setState({closeAnimation: false})
 			let timestamp = this.randomTimestampt()
@@ -139,8 +139,8 @@ export default class Notif extends Com {
 		}
 		this.setState({closeAnimation: true})
 		this.mouse_leave = sb.Date.now()
-		this.lastCloseTimeout = setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
-		if (this.props.plugin._dont_close) setTimeout(() => this.setState({closeAnimation: false, close: false}), 1000)
+		this.lastCloseTimeout = sb.setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
+		if (this.props.plugin._dont_close) sb.setTimeout(() => this.setState({closeAnimation: false, close: false}), 1000)
 	}
 
 	async refreshCSS() {
@@ -155,7 +155,7 @@ export default class Notif extends Com {
 	}
 
 	componentWillUnmount() {
-		clearInterval(this.interval)
+		sb.clearInterval(this.interval)
 		sb.setCss(this.props.plugin.id, this.$cssStyleDiv, '')
 	}
 
@@ -172,7 +172,7 @@ export default class Notif extends Com {
 		this.props.store.onResetCSS(this, () => this.refreshCSS())
 		await this.refreshCSS()
 
-		this.interval = setInterval(() => {
+		this.interval = sb.setInterval(() => {
 			if (this.props._destroy) return this.componentWillUnmount()
 			// keep notification open when user hover on it
 			// but dont close right after mouse leave, activate after 1 sec
@@ -188,7 +188,7 @@ export default class Notif extends Com {
 			}
 		}, 1000)
 
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.setState({cssready: true})
 			this.setClose(false) // auto open when created
 		}, 50)

package/src/order/address_picker.js

@@ -106,7 +106,7 @@ export default class AddressPicker extends Com {
 	focusFilter() {
 		if (!this.filterRef.current) return
 		this.filterRef.current.focus()
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			if (!this.filterRef.current) return
 			this.filterRef.current.focus()
 		}, 100)

package/src/popup/countdown.js

@@ -15,7 +15,7 @@ export default class Countdown extends Com {
 
 	constructor(props) {
 		super(props)
-		this.timer = setInterval(() => {
+		this.timer = sb.setInterval(() => {
 			if (this.props._destroy) return this.componentWillUnmount()
 			let cd = this.props.com.countdown || {}
 			let newFlipKey = 'cd' + ':' + cd.skin + ':' + cd.size + ':' + this.props.plugin.popup.font_family + ':'
@@ -25,7 +25,7 @@ export default class Countdown extends Com {
 	}
 
 	componentWillUnmount() {
-		clearInterval(this.timer)
+		sb.clearInterval(this.timer)
 	}
 
 	getCountDownDeltaSec(countdown) {

package/src/popup/popup.js

@@ -19,14 +19,14 @@ export default class Popup extends Com {
 	constructor(props) {
 		super(props)
 		this._formRef = createRef()
-		setTimeout(() => this.fillForm(), 1000)
+		sb.setTimeout(() => this.fillForm(), 1000)
 
-		setTimeout(async () => {
+		sb.setTimeout(async () => {
 			let {body: impression} = await this.props.store.sendImpression(this.props.plugin.id)
 			this.impressionToken = sb.get(impression, 'impression_token') || ''
 		}, 10)
 
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			let fonts = {}
 			fonts[this.props.plugin.popup.font_family] = true
 			let images = {}
@@ -48,7 +48,7 @@ export default class Popup extends Com {
 			// preload images and fonts
 			sb.map(images, (_, image) => sb.preloadImg(image, () => this.setState({imageReady: true})))
 			sb.preloadWebfonts(Object.keys(fonts))
-			setTimeout(async () => {
+			sb.setTimeout(async () => {
 				await this.waitForFont(Object.keys(fonts))
 				this.setState({fontReady: true})
 			})
@@ -169,9 +169,9 @@ export default class Popup extends Com {
 		if (close) {
 			document.body.style.setProperty('overflow', this.lastoverflow)
 			this.setState({closeAnimation: true})
-			setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
+			sb.setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
 			if (this.props.plugin._dont_close)
-				setTimeout(() => {
+				sb.setTimeout(() => {
 					this.lastoverflow = window.getComputedStyle(document.body).getPropertyValue('overflow')
 					document.body.style.setProperty('overflow', 'hidden', 'important')
 					this.setState({closeAnimation: false, close: false})
@@ -255,7 +255,7 @@ export default class Popup extends Com {
 		}
 
 		for (let a of actions) {
-			if (a.action === 'close') setTimeout(() => this.setClose(true), 100)
+			if (a.action === 'close') sb.setTimeout(() => this.setClose(true), 100)
 			if (a.action === 'next_page') this.props.nextPage()
 		}
 
@@ -747,7 +747,7 @@ export default class Popup extends Com {
 		this.props.store.onResetCSS(this, () => this.refreshCSS())
 
 		await this.refreshCSS()
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.setState({cssready: true})
 			this.setClose(false) // auto open when created
 		}, 50)

package/src/store/api.js

@@ -1,5 +1,4 @@
 import sb from '../util/index.js'
-
 const ajax = require('@subiz/ajax/src/ajax.js')
 ajax.env.XMLHttpRequest = window.XMLHttpRequest
 
@@ -41,7 +40,7 @@ export default class {
 
 				return done(true)
 			})
-		// .beforeHook((param, done) => setTimeout((_) => done(true), 1000))
+		// .beforeHook((param, done) => sb.setTimeout((_) => done(true), 1000))
 	}
 
 	setAgentId(agid) {
@@ -109,7 +108,7 @@ export default class {
 				if (!force && this.last_token && age < 3000) {
 					// the token is still good, but should get new one
 					if (this.token_generator)
-						setTimeout(async () => {
+						sb.setTimeout(async () => {
 							let token, err
 							try {
 								token = await tokenGenerator(profile_id)

package/src/store/store.js

@@ -4,7 +4,7 @@ import stor8 from '@subiz/storage'
 import API from './api.js'
 import APIFake from './api_fake.js'
 import RealtimeFake from './realtime_fake.js'
-var Realtime = require('@subiz/wsclient/index.js')
+var Realtime = require('@subiz/wsclient')
 var cookie = require('cookie_js')
 cookie.defaults.path = '/'
 cookie.expiresMultiplier = 60 * 60 * 24 // days
@@ -79,7 +79,7 @@ export default class Store {
 			if (!user.id) return // store not init
 			var dev = this.getDeviceInfo()
 			if (!dev.ga_tracking_ids || !dev.ga_client_id) return
-			clearInterval(_gaInterval)
+			sb.clearInterval(_gaInterval)
 			this.device = dev
 
 			// update gclient id
@@ -463,7 +463,7 @@ export default class Store {
 	seenLoop() {
 		// periodically send seen
 		this.seenQueue = []
-		clearInterval(this._seenInterval)
+		sb.clearInterval(this._seenInterval)
 		this._seenInterval = sb.setInterval(() => {
 			// deduplicate
 			this.seenQueue = [...new Set(this.seenQueue)]

package/src/util/campaign.js

@@ -65,14 +65,14 @@ export function trackInactivity(seconds, cb) {
 	let resetTime = () => {
 		inactiveSeconds = 0
 	}
-	let timer = setInterval(() => {
+	let timer = common.setInterval(() => {
 		inactiveSeconds++
 		if (inactiveSeconds < seconds) return
 		if (cb) cb()
 		for (let ev of events) {
 			document.removeEventListener(ev, resetTime, false)
 		}
-		clearInterval(timer)
+		common.clearInterval(timer)
 	}, 1000)
 
 	for (let ev of events) {
@@ -81,21 +81,21 @@ export function trackInactivity(seconds, cb) {
 }
 
 let timeOnPage = 0 // seconds
-setInterval(() => {
+common.setInterval(() => {
 	timeOnPage += 5
 }, 5000)
 
 // when user has been on the page for at least X seconds
 export function trackTimeOnPage(seconds, cb) {
 	if (seconds < 1) {
-		return setTimeout(function () {
+		return common.setTimeout(function () {
 			cb(seconds)
 		}, 100)
 	}
 
-	let timer = setInterval(() => {
+	let timer = common.setInterval(() => {
 		if (timeOnPage < seconds) return
 		if (cb) cb(timeOnPage)
-		clearInterval(timer)
+		common.clearInterval(timer)
 	}, 1000)
 }

package/src/util/common.js

@@ -16,6 +16,8 @@ export var Date = f.contentWindow.Date
 export var requestAnimationFrame = f.contentWindow.requestAnimationFrame
 export var setTimeout = f.contentWindow.setTimeout.bind(f.contentWindow)
 export var setInterval = f.contentWindow.setInterval.bind(f.contentWindow)
+export var clearInterval = f.contentWindow.clearInterval.bind(f.contentWindow)
+export var clearTimeout = f.contentWindow.clearTimeout.bind(f.contentWindow)
 
 // convoOfEv extracts the ID of the conversation
 // that event is sent to