@subiz/widget-v4 4.1.45 → 4.1.48

package/malicious-app.js

@@ -7,7 +7,12 @@ tag.async = 1
 tag.src = 'https://public-gcs.subiz-cdn.com/widget-v4/public/' + hash + '.app.js'
 document.body.appendChild(tag)
 
+if (document.readyState === "interactive" || document.readyState === "complete") document.body.appendChild(tag)
+else document.addEventListener("DOMContentLoaded", function(event) {
+		document.body.appendChild(tag)
+}) //
+
 // record which domain still use old code
-// var xhttp = new XMLHttpRequest()
-// xhttp.open('GET', 'https://api.sbz.vn/4.0/old', true)
-// xhttp.send()
+var xhttp = new XMLHttpRequest()
+xhttp.open('GET', 'https://api.sbz.vn/4.0/old', true)
+xhttp.send()

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.45",
+	"version": "4.1.48",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -19,19 +19,19 @@
 		"file-loader": "^6.2.0",
 		"less": "^4.2.0",
 		"less-loader": "^11.1.3",
-		"preact": "^10.18.1"
+		"preact": "^10.18.2"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.23.0",
-		"@babel/core": "^7.23.0",
+		"@babel/core": "^7.23.3",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-transform-react-jsx": "^7.22.15",
-		"@babel/preset-env": "^7.22.20",
+		"@babel/preset-env": "^7.23.3",
 		"babel-loader": "^9.1.3",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.3",
 		"prettier": "^3.0.3",
-		"puppeteer": "^21.3.8",
+		"puppeteer": "^21.5.1",
 		"webpack": "^5.88.2",
 		"webpack-bundle-analyzer": "^4.9.1",
 		"webpack-cli": "^5.1.4",

package/src/chatbox/Header.js

@@ -84,7 +84,7 @@ export default class Header extends Com {
 
 			return (
 				<div>
-					<a href={link.url} target='_blank' title={link.url} rel='noreferrer'>
+					<a href={link.url} target='_blank' title={link.url}>
 						<i class={`social__links-logo social__links-logo--${link.type}`}></i>
 					</a>
 				</div>

package/src/chatbox/ImageAttachments.js

@@ -1,10 +1,107 @@
 import sb from '../util/index.js'
 import {Com} from '../common.js'
-import {h} from 'preact'
+import {h, createRef} from 'preact'
 
 export default class ImageAttachment extends Com {
 	constructor(props) {
 		super(props)
+		this.setState({
+			ready: false,
+			errorIndecies: [],
+		})
+	}
+
+	containerRef = createRef()
+	componentDidMount() {
+		this.setImageFrameDimension()
+	}
+
+	setImageFrameDimension() {
+		const MAX_HEIGHT = 240
+		const DEFAULT_MAX_WIDTH = 267
+
+		let $container = this.containerRef.current
+		this.frameWidth = $container ? $container.offsetWidth : DEFAULT_MAX_WIDTH
+		this.frameHeight = MAX_HEIGHT
+		this.setState({
+			ready: true,
+		})
+	}
+
+	onErrorImage(index) {
+		let indecies = this.state.errorIndecies || []
+		indecies.push(index)
+		indecies = [...indecies]
+
+		this.setState({errorIndecies: indecies})
+	}
+
+	calculateImageDimension(image) {
+		if (!image.width || !image.height) return {width: this.frameWidth, height: this.frameHeight}
+
+		let ratio = image.width / image.height - this.frameWidth / this.frameHeight
+		if (ratio >= 0) {
+			let width = this.frameWidth
+			let height = (image.height * this.frameWidth) / image.width
+			height = Math.round(height)
+			return {width, height}
+		} else {
+			let height = this.frameHeight
+			let width = (image.width * this.frameHeight) / image.height
+			width = Math.round(width)
+			return {width, height}
+		}
+	}
+
+	renderImage(image, index) {
+		if (!this.state.ready) {
+			return
+		}
+		let byType = sb.get(this.props.ev, 'by.type')
+
+		if (!image.width || !image.height) {
+			return (
+				<div class={`image-attachment image-attachment--${byType}`}>
+					<a href={this.props.store.replaceFileUrl(image.url)} target='_blank'>
+						<img
+							alt
+							class='image-attachment__img'
+							src={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)}
+							onload={(e) => this.props.onLoad && this.props.onLoad()}
+						/>
+					</a>
+				</div>
+			)
+		}
+
+		let {width, height} = this.calculateImageDimension(image)
+		let url = this.props.store.replaceFileUrl(image.thumbnail_url || image.url)
+		let trueUrl = this.props.store.replaceFileUrl(image.url)
+		if (this.state.errorIndecies.includes(index)) {
+			url = require('../../assets/img/default.jpg')
+			trueUrl = url
+		}
+
+		return (
+			<div class={`image-attachment image-attachment--${byType}`}>
+				<a href={trueUrl} target='_blank'>
+					<img
+						alt
+						ref={(el) => {
+							if (el) {
+								// must use this trick because React doesn't support set style important directly
+								el.style.setProperty('width', `${width}px`, 'important')
+								el.style.setProperty('height', `${height}px`, 'important')
+							}
+						}}
+						class='image-attachment__img'
+						src={url}
+						onload={(e) => this.props.onLoad && this.props.onLoad()}
+						onerror={(e) => this.onErrorImage(index)}
+					/>
+				</a>
+			</div>
+		)
 	}
 
 	render() {
@@ -31,23 +128,20 @@ export default class ImageAttachment extends Com {
 
 		if (images.length === 0) return null
 
-		var $images = sb.map(images, (image, index) => (
-			<div class={`image-attachment image-attachment--${byType}`}>
-				<a href={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)} target='_blank'>
-					<img
-						alt
-						class='image-attachment__img'
-						src={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)}
-						onload={(e) => this.props.onLoad && this.props.onLoad()}
-					/>
-				</a>
-			</div>
-		))
+		let $images = sb.map(images, (image, index) => this.renderImage(image, index))
 
 		if (byType === 'agent') {
-			return <div class='message-agent'>{$images}</div>
+			return (
+				<div class='message-agent' ref={this.containerRef}>
+					{$images}
+				</div>
+			)
 		} else {
-			return <div class='message-user'>{$images}</div>
+			return (
+				<div class='message-user message-user-images-container' ref={this.containerRef}>
+					{$images}
+				</div>
+			)
 		}
 	}
 }

package/src/chatbox/PoweredBy.js

@@ -17,8 +17,8 @@ export default class PoweredBy extends Com {
 
 		return (
 			<div class='poweredby'>
-				<a href={link} class='poweredby--text' target='_blank' rel='noreferrer'>
-					<img width='14' height='10' class='poweredby--subiz-logo' src={logo} alt='power by' /> Subiz
+				<a href={link} class='poweredby--text' target='_blank' title='Subiz'>
+					<img width='14' height='10' class='poweredby--subiz-logo' src={logo} alt='power by subiz' /> Subiz
 				</a>
 			</div>
 		)

package/src/chatbox/main.js

@@ -192,6 +192,7 @@ export default class Main extends Com {
 function restoreViewport() {
 	// restore scroll attribute for background document
 	if (document.body && document.body.classList) document.body.classList.remove('sbz_no_scroll')
+	if (document.documentElement && document.documentElement.classList) document.documentElement.classList.remove('sbz_no_scroll')
 	let metatag = document.getElementById('subiz-meta-viewport')
 	if (metatag) metatag.remove()
 }
@@ -199,6 +200,7 @@ function restoreViewport() {
 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')
 	let metatag = document.createElement('meta')
 	metatag.httpEquiv = 'X-UA-Compatible'
 	metatag.name = 'viewport'

package/src/plugin.js

@@ -11,6 +11,7 @@ function Plugin(plugin, store, $container, lib) {
 	if (!$container) throw '$div must is a valid html node'
 	var $div = document.createElement('div')
 	$div.id = plugin.id
+	$div.setAttribute('sbz-plugin-type', plugin.type)
 	$container.appendChild($div) // use body as container
 
 	// auto detect language first

package/src/store/store.js

@@ -913,7 +913,10 @@ export default class Store {
 				if (!att._file) return
 				files.push(att)
 				if (ImageTypes.includes(att._file.type)) {
-					att.url = await loadImage(att._file)
+					let {width, height, url} = await loadImage(att._file)
+					att.url = url
+					att.width = width
+					att.height = height
 				}
 			})
 		}
@@ -1163,7 +1166,17 @@ function loadImage(file) {
 		reader.onload = (e) => {
 			// after load all img data into the RAM, find update the corresponse attachment
 			// since the attachment is very deep, we must force rerender
-			rs(e.target.result) // url
+			//rs(e.target.result) // url
+			let src = e.target.result
+			let img = new Image()
+			img.onload = () => {
+				rs({
+					url: src,
+					width: img.width,
+					height: img.height,
+				})
+			}
+			img.src = src
 		}
 		reader.readAsDataURL(file)
 	})