@subiz/widget-v4 4.1.203 → 4.1.205

package/dist/screenshoot.js

@@ -1282,6 +1282,7 @@ __webpack_require__.r(__webpack_exports__);
     window.cancelAnimationFrame(this.animationframe);
   }
 });
+__webpack_require__.dn(__WEBPACK_DEFAULT_EXPORT__);
 function linearTransform(from, to, t, duration) {
   if (eqFloat(from, to)) return from;
   var s = to - from;
@@ -4120,6 +4121,14 @@ var n,l,u,t,i,o,r,f,e,c={},s=[],a=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/set anonymous default export name */
+/******/ 	(() => {
+/******/ 		// set .name for anonymous default exports per ES spec
+/******/ 		__webpack_require__.dn = (x) => {
+/******/ 			(Object.getOwnPropertyDescriptor(x, "name") || {}).writable || Object.defineProperty(x, "name", { value: "default", configurable: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/publicPath */
 /******/ 	(() => {
 /******/ 		__webpack_require__.p = "./";
@@ -4599,6 +4608,7 @@ let trackResponseFn = (param, done) => {
     });
   }
 });
+__webpack_require__.dn(api);
 function fallbackGCSUrl(url) {
   try {
     const u = new URL(url);
@@ -4673,6 +4683,7 @@ const LIMIT = 80;
     });
   }
 });
+__webpack_require__.dn(lsdb);
 function lsdb_toString(obj) {
   if (obj === undefined) return 'null';
   return JSON.stringify(obj);
@@ -4977,6 +4988,7 @@ let KvMaxSize = 500;
     this.initialized = false;
   }
 });
+__webpack_require__.dn(kv);
 ;// ./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; }
 function api_fake_toPropertyKey(t) { var i = api_fake_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -5067,6 +5079,7 @@ const OK200 = Promise.resolve({
     };
   }
 });
+__webpack_require__.dn(api_fake);
 function makeFakeConvo(accid, convoid, userid, agentid) {
   let inteid = accid + '.subizv4.subikon';
   return {
@@ -5365,6 +5378,7 @@ function makeFakeMessages(accid, convoid, userid, agentid) {
   }
   reconnect() {}
 });
+__webpack_require__.dn(realtime_fake);
 ;// ./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; }
 function store_toPropertyKey(t) { var i = store_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -5537,14 +5551,14 @@ class Store {
     store_defineProperty(this, "checkFormToken", (accid, token) => this.api.checkFormToken(accid, token));
     store_defineProperty(this, "submitForm2", (accid, token, data) => this.api.submitForm2(accid, token, data));
     store_defineProperty(this, "sendPresence", util/* default */.A.throttle(async () => {
+      if (!this._track_page_view) return;
       if (this._die) return dieErr;
       await this.readyGate.entry();
       if (!util/* default */.A.get(this.cache.match('user'), 'id')) return;
       if (util/* default */.A.isUserBanned(this.cache.match('user'))) return;
-      if (!this._track_page_view) return;
       let hasfocus = this.browserVisibility === 'visible' && document.hasFocus();
       if (!hasfocus) return this.api.sendLostFocus();
-      this.api.sendContentView(this.device, location.href, document.title, this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
+      this.sendPageview();
     }, 1000, {
       leading: false
     }));
@@ -5638,6 +5652,13 @@ class Store {
       this.sendPresence();
     });
     window.addEventListener('beforeunload', () => this.api.sendLostFocus());
+    this._lastPresenceURL = window.location.href;
+    this._urlCheckInterval = util/* default */.A.setInterval(() => {
+      if (this._die) return util/* default */.A.clearInterval(this._urlCheckInterval);
+      if (this._lastPresenceURL === window.location.href) return;
+      this._lastPresenceURL = window.location.href;
+      this.sendPresence();
+    }, 2_000);
     this.doNotStartBot = () => {
       this._donotstartbot = true;
     };
@@ -6159,12 +6180,20 @@ class Store {
     this.cache.put('payment_methods', pms);
     this.pubsub.publish('account');
   }
+  async sendPageview(p) {
+    if (!p) p = {};
+    let device = Object.assign({}, this.device);
+    if (p.referrer) device.source_referrer = p.referrer;
+    device.page_url = p.url || location.href;
+    device.page_title = p.title || document.title;
+    return this.api.sendContentView(device, p.url || location.href, p.title || document.title, this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
+  }
   async track(e) {
     if (!e) {
-      let out = await this.api.sendContentView(this.device, location.href, document.title, this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
+      let out = await this.sendPageview();
       let traffic_source = util/* default */.A.get(out, 'body.by.device.source', '');
       if (traffic_source) this.kv.put('traffic_source', traffic_source);
-      return;
+      return out;
     }
     if (typeof e === 'object') {
       if (!e.data) e.data = {};
@@ -6673,6 +6702,7 @@ class Store {
     this._die = true;
     this.clearBrowserData();
     util/* default */.A.clearInterval(this._seenInterval);
+    util/* default */.A.clearInterval(this._urlCheckInterval);
     if (this.realtime) this.realtime.stop();
     this.readyGate.close();
     window.removeEventListener('blur', this.sendPresence);
@@ -7820,6 +7850,7 @@ class MessageInput extends common/* Com */.Mw {
     }, 500);
     this.resizeInput = util/* default */.A.throttle(function () {
       const input = this.refMessageInput.current;
+      if (!input) return;
       input.style.setProperty('height', '1em', 'important');
       const height = Math.min(200, input.scrollHeight);
       input.style.setProperty('height', `${height}px`, 'important');
@@ -11290,9 +11321,13 @@ class Widget extends common/* Com */.Mw {
       });
     }
     return (0,preact_module.h)("div", {
-      class: cls
+      class: cls,
+      onClick: this.onBgClick
     }, $header, $body);
   }
+  onBgClick(event) {
+    event.stopPropagation();
+  }
   validateForm(formData) {
     let newformdata = {};
     util/* default */.A.map(formData, (field, key) => {
@@ -12194,6 +12229,9 @@ function encode(key) {
 // EXTERNAL MODULE: ./src/chatbox/css.js
 var chatbox_css = __webpack_require__(9278);
 ;// ./src/chatbox/main.js
+function main_defineProperty(e, r, t) { return (r = main_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function main_toPropertyKey(t) { var i = main_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function main_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); }
 
 
 
@@ -12203,6 +12241,10 @@ var chatbox_css = __webpack_require__(9278);
 class Main extends common/* Com */.Mw {
   constructor(props) {
     super(props);
+    main_defineProperty(this, "state", {
+      cssReady: false,
+      changing: false
+    });
     this.refButton = (0,preact_module/* createRef */._3)();
     this.refWidget = (0,preact_module/* createRef */._3)();
   }
@@ -12230,9 +12272,6 @@ class Main extends common/* Com */.Mw {
       this.$cssStyleDiv.type = 'text/css';
       this.$cssStyleDiv.id = 'subiz-style-for-' + this.props.plugin.id;
     }
-    this.setState({
-      cssReady: false
-    });
     this.checkExpand();
     this.props.store.onResetCSS(this, () => this.refreshCSS());
     this.props.store.onConvoEvent(this, ev => this.onConvoEvent(ev));
@@ -12244,11 +12283,32 @@ class Main extends common/* Com */.Mw {
       });
     });
     this.refreshCSS();
+    let lastview = this.props.store.matchLastview() || {};
+    let cid = util/* default */.A.get(lastview, 'opts.cid');
+    if (cid) {
+      this._last_cid = cid;
+      this.setState({
+        changing: true
+      }, () => {
+        this.props.store.fetchConvo(cid).then(() => {
+          let convo = this.props.store.matchConvo(cid);
+          if (cid != this._last_cid) return;
+          this.setState({
+            changing: false
+          });
+          if (!convo) return this.showWidget({});
+        });
+      });
+    }
     this.setState({
       cssReady: true
     });
   }
   render() {
+    if (this.state.changing) {
+      if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_changing_ready = util/* default */.A.Date.now();
+      return null;
+    }
     if (!this.state.cssReady) {
       if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_css_not_ready = util/* default */.A.Date.now();
       return null;
@@ -12371,6 +12431,14 @@ class Main extends common/* Com */.Mw {
     this.props.store.updateLastview(newView);
     this.forceUpdate();
   }
+  getCurrentView() {
+    let lastview = this.props.store.matchLastview() || {};
+    return {
+      is_show_widget: util/* default */.A.get(lastview, 'screen') === 'widget',
+      view: util/* default */.A.get(lastview, 'view', ''),
+      conversation_id: util/* default */.A.get(lastview, 'opts.cid', '')
+    };
+  }
   applyMessage(text) {
     this.refWidget.current && this.refWidget.current.applyMessage(text);
   }
@@ -12531,7 +12599,10 @@ function Plugin(plugin, store, $container, lib) {
     }
     domGate.open();
   };
-  this.call = (method, param) => domGate.entry().then(() => _ref.current[method](param));
+  this.call = (method, param) => domGate.entry().then(() => {
+    if (!_ref.current || typeof _ref.current[method] !== 'function') return;
+    return _ref.current[method](param);
+  });
   var _destroy = false;
   this.destroy = () => {
     _destroy = true;
@@ -12744,6 +12815,11 @@ class lib_Widget {
     lib_defineProperty(this, "setViewingProduct", p => this.store.linkProduct(p));
     lib_defineProperty(this, "getViewingProduct", () => this.store.getLinkedProduct());
     lib_defineProperty(this, "track", v => this.store.track(v));
+    lib_defineProperty(this, "event", async (type, payload, options) => {
+      await this.store.readyGate.entry();
+      return this.store.api.sendEvent(normalizeCdpEvent(type, payload, options));
+    });
+    lib_defineProperty(this, "pageview", v => this.store.sendPageview(v));
     this.impressionTokens = {};
     this.domGate = new util/* default */.A.Gate();
     this.store = new Store(ApiURL, FileURL, RealtimeURL, inmem, fake);
@@ -13087,6 +13163,15 @@ class lib_Widget {
     this.store.doNotStartBot();
   }
 }
+function normalizeCdpEvent(type, payload, options) {
+  if (type && typeof type === 'object') return type;
+  let data = {
+    type: type
+  };
+  if (payload !== undefined) data.payload = payload;
+  if (options && typeof options === 'object') data = Object.assign({}, options, data);
+  return data;
+}
 window.__sbz_WIDGET = lib_Widget;
 /* harmony default export */ const lib = (lib_Widget);
 ;// ./screenshoot.js

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.203",
+	"version": "4.1.205",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -21,7 +21,6 @@
 		"preact": "10.19.3"
 	},
 	"devDependencies": {
-		"tape": "^5.9.0",
 		"@babel/cli": "^7.28.6",
 		"@babel/core": "^7.29.0",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -30,8 +29,9 @@
 		"babel-loader": "^10.1.1",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.7",
-		"puppeteer": "^24.43.1",
-		"webpack": "^5.106.2",
+		"puppeteer": "^25.0.4",
+		"tape": "^5.9.0",
+		"webpack": "^5.107.1",
 		"webpack-bundle-analyzer": "^5.3.0",
 		"webpack-cli": "^7.0.2",
 		"webpack-dev-server": "^5.2.4"

package/src/chatbox/Widget.js

@@ -207,13 +207,17 @@ export default class Widget extends Com {
 			)
 		}
 		return (
-			<div class={cls}>
+			<div class={cls} onClick={this.onBgClick}>
 				{$header}
 				{$body}
 			</div>
 		)
 	}
 
+	onBgClick(event) {
+		event.stopPropagation()
+	}
+
 	validateForm(formData) {
 		let newformdata = {}
 		sb.map(formData, (field, key) => {

package/src/chatbox/main.js

@@ -32,7 +32,10 @@ export default class Main extends Com {
 		let margin_y = sb.get(chatbox, 'desktop_button.margin_y')
 		chatbox.desktop_widget_max_height = margin_y ? `calc(100% - ${margin_y + 10}px)` : 'calc(100% - 40px)'
 		const PREVIEW_MAX_WIDTH = 340
-		chatbox.preview_max_width = Math.min(PREVIEW_MAX_WIDTH, chatbox.width) + 'px'
+		let previewMaxWidthVal = Math.min(PREVIEW_MAX_WIDTH, chatbox.width)
+		// avoid NaN when chatbox.width is undefined or null
+		if (Number.isNaN(previewMaxWidthVal) || !previewMaxWidthVal) previewMaxWidthVal = PREVIEW_MAX_WIDTH
+		chatbox.preview_max_width = previewMaxWidthVal + 'px'
 		var outcss = sb.replaceCssVariable(css, chatbox)
 		sb.setCss(this.props.plugin.id, this.$cssStyleDiv, outcss)
 	}
@@ -198,6 +201,15 @@ export default class Main extends Com {
 		this.forceUpdate()
 	}
 
+	getCurrentView() {
+		let lastview = this.props.store.matchLastview() || {}
+		return {
+			is_show_widget: sb.get(lastview, 'screen') === 'widget',
+			view: sb.get(lastview, 'view', ''),
+			conversation_id: sb.get(lastview, 'opts.cid', ''),
+		}
+	}
+
 	applyMessage(text) {
 		this.refWidget.current && this.refWidget.current.applyMessage(text)
 	}

package/src/lib.js

@@ -317,21 +317,11 @@ class Widget {
 	getViewingProduct = () => this.store.getLinkedProduct()
 
 	track = (v) => this.store.track(v)
-	event = async (v) => {
+	event = async (type, payload, options) => {
 		await this.store.readyGate.entry()
-		return this.store.api.sendEvent(v)
-	}
-	pageview = (v) => {
-		v = v || {}
-		return this.event({
-			type: 'content_viewed',
-			payload: {
-				url: v.url || location.href,
-				title: v.title || document.title,
-				referrer: v.referrer || document.referrer,
-			},
-		})
+		return this.store.api.sendEvent(normalizeCdpEvent(type, payload, options))
 	}
+	pageview = (v) => this.store.sendPageview(v)
 
 	async setLocale(locale) {
 		await this.domGate.entry()
@@ -413,6 +403,15 @@ class Widget {
 	}
 }
 
+function normalizeCdpEvent(type, payload, options) {
+	if (type && typeof type === 'object') return type
+
+	let data = {type: type}
+	if (payload !== undefined) data.payload = payload
+	if (options && typeof options === 'object') data = Object.assign({}, options, data)
+	return data
+}
+
 // for debugging purpose
 window.__sbz_WIDGET = Widget
 export default Widget

package/src/plugin.js

@@ -115,7 +115,11 @@ function Plugin(plugin, store, $container, lib) {
 		domGate.open()
 	}
 
-	this.call = (method, param) => domGate.entry().then(() => _ref.current[method](param))
+	this.call = (method, param) =>
+		domGate.entry().then(() => {
+			if (!_ref.current || typeof _ref.current[method] !== 'function') return
+			return _ref.current[method](param)
+		})
 
 	var _destroy = false
 	this.destroy = () => {

package/src/store/store.js

@@ -76,6 +76,13 @@ export default class Store {
 			this.sendPresence()
 		})
 		window.addEventListener('beforeunload', () => this.api.sendLostFocus())
+		this._lastPresenceURL = window.location.href
+		this._urlCheckInterval = sb.setInterval(() => {
+			if (this._die) return sb.clearInterval(this._urlCheckInterval)
+			if (this._lastPresenceURL === window.location.href) return
+			this._lastPresenceURL = window.location.href
+			this.sendPresence()
+		}, 2_000)
 
 		this.doNotStartBot = () => {
 			this._donotstartbot = true
@@ -508,24 +515,16 @@ export default class Store {
 	submitForm2 = (accid, token, data) => this.api.submitForm2(accid, token, data)
 	sendPresence = sb.throttle(
 		async () => {
+			if (!this._track_page_view) return
 			if (this._die) return dieErr
 			await this.readyGate.entry()
 			if (!sb.get(this.cache.match('user'), 'id')) return // store not init
 			if (sb.isUserBanned(this.cache.match('user'))) return
 
-			if (!this._track_page_view) return
-
 			let hasfocus = this.browserVisibility === 'visible' && document.hasFocus()
 			if (!hasfocus) return this.api.sendLostFocus()
 
-			this.api.sendContentView(
-				this.device,
-				location.href,
-				document.title,
-				this._currentViewingProduct.id,
-				this._currentViewingProduct.source_id,
-				this._currentViewingProduct.sku,
-			)
+			this.sendPageview()
 		},
 		1000, // dont send presence update too tight
 		{leading: false}, // dont send right after load. should send after content_view
@@ -915,21 +914,30 @@ export default class Store {
 		this.pubsub.publish('account')
 	}
 
+	async sendPageview(p) {
+		if (!p) p = {}
+		let device = Object.assign({}, this.device)
+		if (p.referrer) device.source_referrer = p.referrer
+		device.page_url = p.url || location.href
+		device.page_title = p.title || document.title
+		return this.api.sendContentView(
+			device,
+			p.url || location.href,
+			p.title || document.title,
+			this._currentViewingProduct.id,
+			this._currentViewingProduct.source_id,
+			this._currentViewingProduct.sku,
+		)
+	}
+
 	// send the content view, the first presence and record domain
 	async track(e) {
 		if (!e) {
-			let out = await this.api.sendContentView(
-				this.device,
-				location.href,
-				document.title,
-				this._currentViewingProduct.id,
-				this._currentViewingProduct.source_id,
-				this._currentViewingProduct.sku,
-			)
+			let out = await this.sendPageview()
 
 			let traffic_source = sb.get(out, 'body.by.device.source', '')
 			if (traffic_source) this.kv.put('traffic_source', traffic_source)
-			return
+			return out
 		}
 
 		if (typeof e === 'object') {
@@ -1501,6 +1509,7 @@ export default class Store {
 		this._die = true
 		this.clearBrowserData()
 		sb.clearInterval(this._seenInterval)
+		sb.clearInterval(this._urlCheckInterval)
 		if (this.realtime) this.realtime.stop()
 		this.readyGate.close()
 		window.removeEventListener('blur', this.sendPresence)

package/src/util/event.test.js

@@ -0,0 +1,31 @@
+var test = require('tape')
+var {normalizeCdpEvent} = require('./event.js')
+
+test('normalize cdp event new signature', (t) => {
+	t.deepEqual(
+		normalizeCdpEvent('content_viewed', {
+			url: 'https://example.com/products/pd2345',
+			title: 'Bàn phím cơ không dây',
+		}, {event_source_id: 'evt_1234'}),
+		{
+			type: 'content_viewed',
+			payload: {
+				url: 'https://example.com/products/pd2345',
+				title: 'Bàn phím cơ không dây',
+			},
+			event_source_id: 'evt_1234',
+		},
+	)
+	t.end()
+})
+
+test('normalize cdp event without payload', (t) => {
+	t.deepEqual(normalizeCdpEvent('login'), {type: 'login'})
+	t.end()
+})
+
+test('normalize cdp event keeps old object signature', (t) => {
+	let event = {type: 'product_viewed', payload: {id: 'pd2345'}}
+	t.equal(normalizeCdpEvent(event), event)
+	t.end()
+})