@subiz/widget-v4 4.1.210 → 4.1.212

package/package.json

@@ -1,12 +1,16 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.210",
+	"version": "4.1.212",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
-		"build": "rm -rf dist && npx webpack --config webpack.screenshoot.js && npx webpack --config webpack.prod.js",
+		"build": "npm run lib && rm -rf dist && webpack --config webpack.screenshoot.js && webpack --config webpack.prod.js",
 		"report": "npx webpack --config webpack.report.js",
-		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
+		"lib": "babel src --out-dir compiled_src --ignore \"**/*.test.js,**/*.test2.js\"",
+		"test": "node test.cjs",
+		"lint": "eslint src",
+		"check": "npm run lint && npm test",
+		"prepack": "npm run check && npm run lib"
 	},
 	"dependencies": {
 		"@subiz/ajax": "^3.0.22",
@@ -16,8 +20,8 @@
 		"core-js": "^3.50.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
-		"less": "^4.6.4",
-		"less-loader": "^12.3.2",
+		"less": "^4.9.1",
+		"less-loader": "^13.0.0",
 		"preact": "10.19.3"
 	},
 	"devDependencies": {
@@ -28,7 +32,10 @@
 		"@babel/preset-env": "^7.29.7",
 		"babel-loader": "^10.1.1",
 		"babel-plugin-syntax-jsx": "^6.18.0",
+		"eslint": "^10.11.0",
+		"globals": "^17.13.0",
 		"html-webpack-plugin": "^5.6.8",
+		"jsdom": "^30.1.1",
 		"puppeteer": "^25.12.0",
 		"tape": "^5.10.2",
 		"webpack": "^5.111.1",

package/src/chatbox/Buttons.js

@@ -1,12 +1,13 @@
 import sb from '../util/index.js'
 import {h} from 'preact'
+import {safeUrl} from '../util/url.js'
 
 export default function Buttons(props) {
 	if (sb.size(props.buttons) === 0) return null
 	var $buttons = sb.map(props.buttons, (button, index) => {
 		if (button.type === 'call_button') {
 			return (
-				<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
+				<a class='url-button-attachment' href={safeUrl('tel:' + button.phone_number)} key={index} title={button.title}>
 					{props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || `${props.t('call')} ${button.phone_number}`}
 				</a>
 			)
@@ -14,7 +15,7 @@ export default function Buttons(props) {
 
 		if (button.type === 'url_button') {
 			return (
-				<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
+				<a class='url-button-attachment' href={safeUrl(button.url) || undefined} target='_blank' rel='noopener noreferrer' key={index} title={button.title}>
 					{props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || button.url}
 				</a>
 			)
@@ -22,9 +23,9 @@ export default function Buttons(props) {
 
 		if (button.type === 'postback_button') {
 			return (
-				<a class='url-button-attachment' href='javascript:;' onClick={(_) => props.onSelect(button)}>
+				<button type='button' class='url-button-attachment' key={index} onClick={(_) => props.onSelect(button)}>
 					{props.t.i18n(button.i18n_title) || button.title}
-				</a>
+				</button>
 			)
 		}
 

package/src/chatbox/ChatButton.js

@@ -1,6 +1,7 @@
 import sb from '../util/index.js'
 import Emoji from './Emoji.js'
 var defaultBubble = require('../../assets/img/bubble_default.svg')
+const dotChatIcon = require('../../assets/img/dot_chat.svg')
 let defaultAvatar = require('../../assets/img/default_avatar.png')
 import {Com} from '../common.js'
 import Block from './block.js'
@@ -378,30 +379,7 @@ export default class ChatButton extends Com {
 		)
 	}
 
-	async prepareButtonImage() {
-		let accountSetting = this.props.plugin.chatbox
-		accountSetting = this.fixMissingSetting(accountSetting)
-		let imgsrc =
-			sb.get(accountSetting, 'desktop_button.background_image_url') ||
-			sb.get(accountSetting, 'desktop_button.background_mask_url') ||
-			defaultBubble
-
-		if (this.props.store.isMobile()) {
-			imgsrc =
-				sb.get(accountSetting, 'mobile_button.background_image_url') ||
-				sb.get(accountSetting, 'mobile_button.background_mask_url') ||
-				imgsrc
-		}
-
-		imgsrc = this.props.store.replaceFileUrl(imgsrc)
-		await sb.preloadImg(imgsrc)
-		this.setState({ready: true})
-		this.readyGate.open()
-	}
-
-	renderButton() {
-		if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_button = sb.Date.now()
-
+	getButtonAppearance() {
 		let accountSetting = this.props.plugin.chatbox
 		accountSetting = this.fixMissingSetting(accountSetting)
 		let imgsrc =
@@ -433,24 +411,94 @@ export default class ChatButton extends Com {
 			}
 		}
 
+		const imageUrl = (url) => {
+			const asset = normalizeButtonImageUrl(this.props.store.replaceFileUrl(url))
+			return asset === dotChatIcon ? asset : addVersionParam(asset)
+		}
+		imgsrc = imageUrl(imgsrc)
+		imgurl = imageUrl(imgurl)
+		maskurl = imageUrl(maskurl)
+		const defaultMask = !imgurl && !maskurl ? DEF_BG_URL : ''
+		const urls = [
+			...new Set([imgsrc, imgurl && encodeURI(imgurl), maskurl && encodeURI(maskurl), defaultMask].filter(Boolean)),
+		]
+		return {
+			imgsrc,
+			imgurl,
+			maskurl,
+			background,
+			position,
+			imgwidth,
+			imgheight,
+			urls,
+			maskAsset: maskurl ? encodeURI(maskurl) : defaultMask,
+			key: JSON.stringify([urls, maskurl, defaultMask]),
+		}
+	}
+
+	componentDidUpdate() {
+		if (this.getButtonAppearance().key !== this._buttonImageKey) this.prepareButtonImage()
+	}
+
+	async prepareButtonImage() {
+		const appearance = this.getButtonAppearance()
+		const version = (this._buttonImageVersion = (this._buttonImageVersion || 0) + 1)
+		this._buttonImageKey = appearance.key
+		this.readyGate.close()
+		const [loaded, mask] = await Promise.all([
+			Promise.all(appearance.urls.filter((url) => url !== appearance.maskAsset).map((url) => preloadButtonImage(url))),
+			appearance.maskAsset ? prepareButtonMask(appearance.maskAsset) : Promise.resolve(null),
+		])
+		const stale = () => !this._isMounted || this._buttonImageVersion !== version
+		if (stale()) {
+			if (mask) URL.revokeObjectURL(mask)
+			return
+		}
+		const fallback = loaded.some((success) => !success) || (!!appearance.maskAsset && !mask)
+		const ready = !fallback || (await preloadButtonImage(defaultBubble))
+		if (stale()) {
+			if (mask) URL.revokeObjectURL(mask)
+			return
+		}
+		if (this._buttonMaskUrl) URL.revokeObjectURL(this._buttonMaskUrl)
+		this._buttonMaskUrl = mask
+		// Commit the hidden style before revealing even when images are cached.
+		// Otherwise older browsers can paint only the final state and skip the transition.
+		if (this._buttonElement) window.getComputedStyle(this._buttonElement).transform
+		this.setState({ready, readyImageKey: appearance.key, fallbackButtonImage: fallback, buttonMaskUrl: mask})
+		this.readyGate.open()
+	}
+
+	componentWillUnmount() {
+		if (this._buttonMaskUrl) URL.revokeObjectURL(this._buttonMaskUrl)
+		if (this._animateTimeout) clearTimeout(this._animateTimeout)
+	}
+
+	renderButton() {
+		if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_button = sb.Date.now()
+		const appearance = this.getButtonAppearance()
+		let {imgsrc, imgurl, maskurl, background, position, imgwidth, imgheight} = appearance
+		// Never attach a remote CSS mask while the local copy is being prepared.
+		if (appearance.maskAsset) {
+			maskurl = this.state.readyImageKey === appearance.key ? this.state.buttonMaskUrl : ''
+			if (imgsrc === appearance.maskAsset) imgsrc = maskurl || ''
+		}
+		if (this.state.readyImageKey === appearance.key && this.state.fallbackButtonImage) {
+			imgsrc = imgurl = defaultBubble
+			maskurl = ''
+		}
+
 		let whitebgcls = 'chat-button--white-bg'
 		if (!imgurl && maskurl) whitebgcls += ' chat-button--white-bg--mask-only'
 		let imgcontainerstyle = ''
 
-		imgurl = this.props.store.replaceFileUrl(imgurl)
-		imgsrc = this.props.store.replaceFileUrl(imgsrc)
-		maskurl = this.props.store.replaceFileUrl(maskurl)
-		imgurl = addVersionParam(imgurl)
-		imgsrc = addVersionParam(imgsrc)
-		maskurl = addVersionParam(maskurl)
-
 		if (!imgurl && !maskurl) {
 			whitebgcls += ' chat-button--white-bg--mask-only'
 			imgcontainerstyle = `
-				-webkit-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
-				-o-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
-				-moz-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
-				mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
+				-webkit-mask-image: none !important;
+				-o-mask-image: none !important;
+				-moz-mask-image: none !important;
+				mask-image: none !important;
 				height: ${imgheight}px !important;
 				width: ${imgwidth}px !important;
 				background: ${background} !important;
@@ -509,16 +557,23 @@ export default class ChatButton extends Com {
 
     `
 
-		if (!this.state.ready) cls += ' hidden'
+		if (!this.state.ready || this.state.readyImageKey !== appearance.key) cls += ' hidden'
 
 		return (
-			<div class={cls} onClick={(e) => this.onClick(e)}>
+			<button
+				ref={(element) => {this._buttonElement = element}}
+				type='button'
+				class={cls}
+				aria-label={this.props.t('chat')}
+				aria-expanded={!this.props.isShow}
+				onClick={(e) => this.onClick(e)}
+			>
 				<div class={whitebgcls} style={whiteBgStyle}></div>
 				<div class='chat-button--img-container' style={imgcontainerstyle}>
 					<img width='70' height='70' alt='chat button' class='chat-button--img' src={imgsrc} />
 				</div>
 				{this.renderUnread()}
-			</div>
+			</button>
 		)
 	}
 
@@ -551,7 +606,7 @@ export default class ChatButton extends Com {
 				}
 				return defmsg
 			}
-			return <Block block={block} />
+			return <Block block={block} store={this.props.store} t={this.props.t} />
 		}
 
 		let message = sb.get(ev, 'data.message.text', defmsg)
@@ -582,6 +637,11 @@ function randomAgent(agentM) {
 
 const Ms30Mins = 30 * 60 * 1000
 
+function normalizeButtonImageUrl(url) {
+	if (/^https:\/\/(?:storage\.googleapis\.com\/public-gcs\.subiz-cdn\.com|public-gcs\.subiz-cdn\.com|vcdn\.subiz-cdn\.com)\/dashboard-v4\/public\/img\/bubble\/dot_chat\.svg(?=$|[?#])/.test(url)) return dotChatIcon
+	return url
+}
+
 // v=5 trick to clear cache
 const DEF_BG_URL = 'https://vcdn.subiz-cdn.com/file/bubble_11.svg?v=5'
 const DEF_BG = 'linear-gradient(280.16deg, #0053d3 22.03%, #0265ff 78.2%)'
@@ -600,3 +660,37 @@ function addVersionParam(url, version = 8) {
 		return hash ? newUrl + '#' + hash : newUrl
 	}
 }
+
+// Use the exact rendered URL, including its version, for both images and masks.
+function preloadButtonImage(src, {crossOrigin = false} = {}) {
+	return new Promise((resolve) => {
+		const image = new Image()
+		if (crossOrigin) image.crossOrigin = 'anonymous'
+		image.onerror = () => resolve(false)
+		image.onload = async () => {
+			try {
+				if (image.decode) await image.decode()
+				resolve(true)
+			} catch (_) {
+				resolve(false)
+			}
+		}
+		image.src = src
+	})
+}
+
+// CSS masks use a separate CORS image request. Pin the loaded bytes locally so
+// revealing the white backing never races another network request by CSS.
+async function prepareButtonMask(src) {
+	let url
+	try {
+		const response = await fetch(src)
+		if (!response.ok) return null
+		url = URL.createObjectURL(await response.blob())
+		if (await preloadButtonImage(url)) return url
+	} catch (_) {
+		// Use the bundled fallback if the custom mask cannot be loaded.
+	}
+	if (url) URL.revokeObjectURL(url)
+	return null
+}

package/src/chatbox/Event.js

@@ -28,11 +28,31 @@ export default class Event extends Com {
 		this.props.store.onConvoEvent(this, (ev) => this.onEvent(ev))
 		this.refForm = createRef()
 		this.state = {pongs: sb.get(this.props.event, 'ev.data.message.pongs') || []}
+		const ev = this.props.event.ev
+		const age = (this.props.store.now ? this.props.store.now() : sb.Date.now()) - ev.created
+		// Capture this once: acknowledgement keeps the same component and animation.
+		this.animateSend = !props.isHistory && ev.type === 'message_sent' &&
+			sb.get(ev, 'by.type') === 'user' && ev.id === sb.get(ev, 'source_event_id') &&
+			age >= 0 && age < 2000
 		this.textMessageRef = createRef()
 		this.fileAttachmentRef = createRef()
 		this.imageAttachmentRef = createRef()
 	}
 
+	componentDidMount() {
+		if (!this.animateSend) return
+		// Paint the starting position before transitioning to the resting position.
+		this.sendAnimationFrame = window.requestAnimationFrame(() => {
+			this.sendAnimationFrame = window.requestAnimationFrame(() => {
+				if (this._isMounted) this.setState({sendEntered: true})
+			})
+		})
+	}
+
+	componentWillUnmount() {
+		if (this.sendAnimationFrame) window.cancelAnimationFrame(this.sendAnimationFrame)
+	}
+
 	focusSourceEventFromQuote = (ev) => {
 		let $textMessage = this.textMessageRef.current
 		if ($textMessage && typeof $textMessage.focusSourceEventFromQuote === 'function') {
@@ -90,6 +110,7 @@ export default class Event extends Com {
 	}
 
 	chooseQuickReply(reply) {
+		if (this.props.isHistory) return
 		let ev = sb.get(this.props.event, 'ev', {})
 		let message = {text: reply.title, format: 'plaintext'}
 		if (reply.payload) {
@@ -107,6 +128,7 @@ export default class Event extends Com {
 	}
 
 	choosePostbackBtn(button) {
+		if (this.props.isHistory) return
 		let ev = sb.get(this.props.event, 'ev', {})
 		let message = {text: button.title, format: 'plaintext'}
 		if (button.payload) {
@@ -252,6 +274,14 @@ export default class Event extends Com {
 
 	renderMessageSent() {
 		let ev = this.props.event.ev
+		if (sb.get(ev, 'data.message.deleted')) {
+			let byType = sb.get(ev, 'by.type') === 'user' ? 'user' : 'agent'
+			return (
+				<div class={'convo-event ' + byType + '-message'} data-ev-id={ev.id}>
+					<TextMessage ev={ev} t={this.props.t} store={this.props.store} />
+				</div>
+			)
+		}
 		let attachments = sb.get(ev, 'data.message.attachments')
 		let hasForm = sb.find(attachments, (att) => att.type === 'form')
 		if (sb.isEmptyMessage(sb.get(ev, 'data.message'))) return null
@@ -312,7 +342,7 @@ export default class Event extends Com {
 								ev={ev}
 							/>
 							<OrderAttachments t={this.props.t} store={this.props.store} ev={ev} />
-							<QuickReplies store={this.props.store} ev={ev} onSelect={(e) => this.chooseQuickReply(e)} />
+							{!this.props.isHistory && <QuickReplies store={this.props.store} ev={ev} onSelect={(e) => this.chooseQuickReply(e)} />}
 							{this.renderReactions()}
 							{this.renderAIDevNote()}
 						</div>
@@ -321,14 +351,14 @@ export default class Event extends Com {
 			)
 		}
 
-		if (sb.get(ev, 'data.message.idempotency_key') === ev.id && this.props.store.now() - ev.created < 900) {
+		if (sb.get(ev, 'source_event_id') === ev.id && this.props.store.now() - ev.created < 900) {
 			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
 		// the server
 		let $dot = <div class='sending_dot'></div>
-		if (this.props.store.now() - ev.created < 900 || sb.get(ev, 'data.message.idempotency_key') !== ev.id) {
+		if (this.props.store.now() - ev.created < 900 || sb.get(ev, 'source_event_id') !== ev.id) {
 			$dot = <div class='sending_dot sending_dot__hide'></div>
 		}
 
@@ -352,11 +382,12 @@ export default class Event extends Com {
 		return (
 			<div class='convo-event user-message' data-ev-id={ev.id}>
 				{$sender}
-				<div class='message-user__container'>
+				<div class={'message-user__container' + (this.animateSend && !this.props.isHistory ? ' message-user__container--send' + (this.state.sendEntered ? '' : ' message-user__container--enter') : '')}>
 					{$dot}
 					<TextMessage
 						ref={this.textMessageRef}
 						store={this.props.store}
+						t={this.props.t}
 						ev={ev}
 						refresh={this.state.refresh}
 						onLink={this.props.onLink}
@@ -376,6 +407,7 @@ export default class Event extends Com {
 	}
 
 	async onSendReaction(action) {
+		if (this.props.isHistory) return
 		if (this._reacting) return
 		let ev = this.props.event.ev
 		let cid = sb.get(ev, 'data.message.conversation_id')
@@ -423,6 +455,7 @@ export default class Event extends Com {
 	}
 
 	renderReactions() {
+		if (this.props.isHistory) return null
 		if (this.props.store.isAIDevMode()) return null
 		let cid = sb.get(this.props.event.ev, 'data.message.conversation_id', '')
 		if (cid.startsWith('cslight')) return null
@@ -515,7 +548,7 @@ export default class Event extends Com {
 		let byid = sb.get(ev, 'by.display_id', sb.get(ev, 'by.id')) || ''
 		if (bytype === 'user') return sb.getUserDisplayName(this.props.store.matchUser())
 		let acc = this.props.store.matchAccount()
-		if (bytype === 'agent') return sb.getAgentDisplayName(acc, this.props.store.matchAgent(byid))
+		if (bytype === 'agent' || sb.get(ev, 'by.display_type') === 'agent') return sb.getAgentDisplayName(acc, this.props.store.matchAgent(byid))
 		if (byid.startsWith('at')) return sb.getAgentDisplayName(acc, this.props.store.matchAgent(byid))
 		if (bytype === 'bot') {
 			let bot = this.props.store.matchBot()[byid]