@subiz/widget-v4 4.1.206 → 4.1.207

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.206",
+	"version": "4.1.207",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -21,19 +21,19 @@
 		"preact": "10.19.3"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.28.6",
-		"@babel/core": "^7.29.0",
+		"@babel/cli": "^7.28.7",
+		"@babel/core": "^7.29.7",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-transform-react-jsx": "^7.28.6",
-		"@babel/preset-env": "^7.29.5",
+		"@babel/plugin-transform-react-jsx": "^7.28.7",
+		"@babel/preset-env": "^7.29.7",
 		"babel-loader": "^10.1.1",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.8",
 		"puppeteer": "^25.9.0",
 		"tape": "^5.10.2",
-		"webpack": "^5.110.1",
+		"webpack": "^5.110.3",
 		"webpack-bundle-analyzer": "^5.3.2",
-		"webpack-cli": "^7.2.2",
+		"webpack-cli": "^7.2.3",
 		"webpack-dev-server": "^6.0.0"
 	}
 }

package/src/chatbox/main.js

@@ -66,7 +66,9 @@ export default class Main extends Com {
 		this.refreshCSS()
 
 		let lastview = this.props.store.matchLastview() || {}
-		let cid = sb.get(lastview, 'opts.cid')
+		// Only validate a saved cid when restoring an opened widget.
+		// Mobile init may downgrade a saved widget state to preview while keeping stale opts.
+		let cid = sb.get(lastview, 'screen') === 'widget' ? sb.get(lastview, 'opts.cid') : ''
 		if (cid) {
 			this._last_cid = cid
 			this.setState({changing: true}, () => {
@@ -177,11 +179,15 @@ export default class Main extends Com {
 	}
 
 	onNewMessageShowWidget(cid) {
-		if (this.props.store.isMobile()) modifyViewport()
+		if (this.props.store.isMobile()) modifyViewport(this.shouldLockPageScroll())
 		this.props.store.updateLastview({screen: 'widget', previewEvent: {}, view: 'chat', opts: {cid}})
 		this.forceUpdate()
 	}
 
+	shouldLockPageScroll() {
+		return sb.get(this.props.plugin, 'chatbox.mobile_height') === undefined
+	}
+
 	async showWidget(p) {
 		//this.refButton.current && this.refButton.current.ClearPreview()
 
@@ -196,7 +202,7 @@ export default class Main extends Com {
 			newView.opts = {cid}
 		}
 
-		if (this.props.store.isMobile()) modifyViewport()
+		if (this.props.store.isMobile()) modifyViewport(this.shouldLockPageScroll())
 		this.props.store.updateLastview(newView)
 		this.forceUpdate()
 	}
@@ -248,11 +254,13 @@ function restoreViewport() {
 	if (metatag) metatag.remove()
 }
 
-function modifyViewport() {
-	// dont allow to scroll background document
-	if (document.body && document.body.classList) document.body.classList.add('sbz_no_scroll')
-	if (document.documentElement && document.documentElement.classList)
-		document.documentElement.classList.add('sbz_no_scroll')
+function modifyViewport(lockPageScroll) {
+	if (lockPageScroll) {
+		// dont allow to scroll background document
+		if (document.body && document.body.classList) document.body.classList.add('sbz_no_scroll')
+		if (document.documentElement && document.documentElement.classList)
+			document.documentElement.classList.add('sbz_no_scroll')
+	}
 
 	let currentMetas = document.querySelectorAll('meta[name="viewport"]')
 	let shouldAddMetaTag = true

package/src/util/common.js

@@ -682,6 +682,7 @@ export function replaceCssVariable(css, setting) {
 	//tokens = tokenize(tokens, "'@mobile_button.background_mask_url'")
 	tokens = tokenize(tokens, "'@mobile_button.margin_x'")
 	tokens = tokenize(tokens, "'@mobile_button.margin_y'")
+	tokens = tokenize(tokens, "'@mobile_height'")
 	tokens = tokenize(tokens, "'@widget_position'")
 	tokens = tokenize(tokens, "'@z_index'")
 	tokens = tokenize(tokens, "'@z_index_2'")
@@ -838,6 +839,7 @@ export const DEFVAL = {
 		margin_x: 0.3,
 		margin_y: 0.3,
 	},
+	mobile_height: '100%',
 	widget_position: 'fixed',
 	z_index: 2000000000,
 }

package/src/util/common.test.js

@@ -56,6 +56,13 @@ test('util.randomString', (t) => {
 	t.end()
 })
 
+test('replaceCssVariable mobile height', (t) => {
+	let css = "height: '@mobile_height';"
+	t.equal(util.replaceCssVariable(css, {}), 'height: 100%;', 'defaults to full mobile height')
+	t.equal(util.replaceCssVariable(css, {mobile_height: '50%'}), 'height: 50%;', 'uses configured mobile height')
+	t.end()
+})
+
 test('convert message event first msg send', (t) => {
 	var events = [
 		{by: {id: 1}, type: 'message_sent', created: 1100},