@subiz/widget-v4 4.1.218 → 4.1.222

package/compiled_src/store/widget-settings.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadWidgetSettings = loadWidgetSettings;
+exports.mergeWidgetSettings = mergeWidgetSettings;
+const ajax = require('@subiz/ajax/src/ajax.js');
+function failed(response) {
+  return !response || response.error || response.body?.error || response.code < 200 || response.code >= 300 || !response.body || typeof response.body !== 'object';
+}
+async function readConfig(query) {
+  const request = ajax.withCredentials(false).setParser('json').setQuery(query);
+  let response;
+  try {
+    response = await request.setBaseUrl('https://api2.sbz.vn/4.1').get('/widget-config');
+    if (!failed(response)) return response;
+  } catch (_) {}
+  return request.setBaseUrl('https://api.sbz.vn/4.1').get('/widget-config');
+}
+async function loadWidgetSettings(contextRequest, apiURL, accountId, pageURL, botId) {
+  const query = {
+    'account-id': accountId,
+    url: pageURL,
+    v: '6'
+  };
+  if (botId) query.bot_id = botId;
+  const contextBase = new URL('/4.1', new URL(apiURL, document.location.href)).href;
+  const [config, context] = await Promise.all([readConfig(query), contextRequest.setBaseUrl(contextBase).setQuery(query).get('/widget-context')]);
+  if (failed(context)) return {
+    ...context,
+    error: context?.error || true
+  };
+  if (failed(config)) return {
+    ...config,
+    error: config?.error || true
+  };
+  return {
+    ...config,
+    body: mergeWidgetSettings(config.body, context.body)
+  };
+}
+function mergeWidgetSettings(config, context) {
+  const dynamicPlugins = new Map((context.plugins || []).map(plugin => [plugin.id, plugin]));
+  const plugins = (config.plugins || []).map(plugin => {
+    const dynamic = dynamicPlugins.get(plugin.id);
+    if (!dynamic) return plugin;
+    const merged = {
+      ...plugin,
+      ...dynamic
+    };
+    if (dynamic.chatbox) merged.chatbox = {
+      ...plugin.chatbox,
+      ...dynamic.chatbox
+    };
+    if (dynamic.notification) merged.notification = {
+      ...plugin.notification,
+      ...dynamic.notification
+    };
+    return merged;
+  });
+  return {
+    ...config,
+    ...context,
+    plugins
+  };
+}

package/compiled_src/util/common.js

@@ -763,7 +763,7 @@ function setCss(id, $css, css) {
     $css.appendChild(document.createTextNode(css));
   }
 }
-const DEF_CHAT_BUTTON_BACKGROUND_IMAGE_URL = exports.DEF_CHAT_BUTTON_BACKGROUND_IMAGE_URL = 'https://vcdn.subiz-cdn.com/file/bubble_11.svg?v=5';
+const DEF_CHAT_BUTTON_BACKGROUND_IMAGE_URL = exports.DEF_CHAT_BUTTON_BACKGROUND_IMAGE_URL = require('../../assets/img/bubble_11.svg?inline');
 const DEFVAL = exports.DEFVAL = {
   primary_color: '#0265FF',
   secondary_color: '#555555',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.218",
+	"version": "4.1.222",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -32,9 +32,9 @@
 		"globals": "^17.13.0",
 		"html-webpack-plugin": "^5.6.8",
 		"jsdom": "^30.1.3",
-		"puppeteer": "^25.14.0",
+		"puppeteer": "^25.16.0",
 		"tape": "^5.10.3",
-		"webpack": "^5.112.0",
+		"webpack": "^5.112.1",
 		"webpack-bundle-analyzer": "^5.4.0",
 		"webpack-cli": "^7.2.3",
 		"webpack-dev-server": "^6.1.0"

package/src/chatbox/ChatButton.js

@@ -2,6 +2,10 @@ 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')
+const builtInButtonIcons = {
+	bubble_11: require('../../assets/img/bubble_11.svg?inline'),
+	bar_ho_tro: require('../../assets/img/bar_ho_tro.svg?inline'),
+}
 let defaultAvatar = require('../../assets/img/default_avatar.png')
 import {Com} from '../common.js'
 import Block from './block.js'
@@ -61,7 +65,10 @@ export default class ChatButton extends Com {
 			let screen = sb.get(this.props.store.matchLastview(), 'screen')
 			let previewEvent = sb.get(this.props.store.matchLastview(), 'previewEvent') || {}
 			let isOpen = screen === 'preview' && sb.size(previewEvent) > 0
-			if (isOpen) {
+			if (isOpen && this.state.hasPreviewDom && !this.state.previewExtraCls && isSamePreview(this.state.previewEvent, previewEvent)) {
+				// same message re-rendered (e.g. after setLocale): swap content without replaying the animation
+				this.setState({previewEvent})
+			} else if (isOpen) {
 				this.makeAnimateShowPreview(previewEvent)
 			} else {
 				this.makeAnimateHidePreview()
@@ -414,7 +421,7 @@ export default class ChatButton extends Com {
 
 		const imageUrl = (url) => {
 			const asset = normalizeButtonImageUrl(this.props.store.replaceFileUrl(url))
-			return asset === dotChatIcon ? asset : addVersionParam(asset)
+			return asset === dotChatIcon || (asset && asset.startsWith('data:')) ? asset : addVersionParam(asset)
 		}
 		imgsrc = imageUrl(imgsrc)
 		imgurl = imageUrl(imgurl)
@@ -635,13 +642,26 @@ function randomAgent(agentM) {
 
 const Ms30Mins = 30 * 60 * 1000
 
+// Same preview message, possibly with re-localized content: same event id, or the same
+// convo-less chatbox greeting from the same agent.
+export function isSamePreview(a, b) {
+	if (!sb.size(a) || !sb.size(b)) return false
+	if (a.id || b.id) return a.id === b.id
+	if (sb.get(a, 'data.message.conversation_id') || sb.get(b, 'data.message.conversation_id')) return false
+	return sb.get(a, 'by.id') === sb.get(b, 'by.id')
+}
+
 function normalizeButtonImageUrl(url) {
+	if (/^https:\/\/vcdn\.subiz-cdn\.com\/file\/bubble_11\.svg(?=$|[?#])/.test(url)) return builtInButtonIcons.bubble_11
+	// These public CDN redirects can cache another website's CORS origin.
+	// Embed the stock masks so their appearance does not depend on that cache.
+	const builtIn = /^https:\/\/(?:storage\.googleapis\.com\/public-gcs\.subiz-cdn\.com|public-gcs\.subiz-cdn\.com|vcdn\.subiz-cdn\.com)\/dashboard-v4\/public\/img\/bubble\/(bubble_11|bar_ho_tro)\.svg(?=$|[?#])/.exec(url)
+	if (builtIn) return builtInButtonIcons[builtIn[1]]
 	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_URL = builtInButtonIcons.bubble_11
 const DEF_BG = 'linear-gradient(280.16deg, #0053d3 22.03%, #0265ff 78.2%)'
 
 function addVersionParam(url, version = 8) {
@@ -680,6 +700,7 @@ function preloadButtonImage(src, {crossOrigin = false} = {}) {
 // Pin the mask bytes with a data URL: some sites allow data: images but block blob:.
 // If inline images or fetch are blocked, preload the original URL with CORS for CSS masks.
 async function prepareButtonMask(src) {
+	if (src.startsWith('data:')) return await preloadButtonImage(src) ? src : null
 	try {
 		const response = await fetch(src)
 		if (!response.ok) return null

package/src/chatbox/Widget.js

@@ -47,7 +47,7 @@ export default class Widget extends Com {
 
 	msgInput = createRef()
 	componentDidMount() {
-		if (!this.props.store.isMobile()) this.focusInput()
+		if (this.props.isShow && !this.props.store.isMobile()) this.focusInput()
 
 		this.updateFormDataFields()
 	}
@@ -87,7 +87,8 @@ export default class Widget extends Com {
 	}
 
 	shouldShowForm() {
-		return !!(this.state.restartForm || this.state.clickedJoin)
+		return this.props.view !== 'list' && !!(this.props.view === 'offline_form' || this.props.view === 'prechat_form' ||
+			this.state.restartForm || this.state.clickedJoin)
 	}
 
 	render() {
@@ -306,9 +307,10 @@ export default class Widget extends Com {
 			}
 		}
 
-		this.setState({formData})
-		// dont steal focus on mobile or trying to override form
-		if (!this.props.store.isMobile() && !form._updated) this.focusInput()
+		this.setState({formData}, () => {
+			// Wait for the populated form's inputs to mount before focusing.
+			if (this.props.isShow && !this.props.store.isMobile()) this.focusInput()
+		})
 	}
 
 	onBooleanChange(key, e) {
@@ -744,22 +746,20 @@ export default class Widget extends Com {
 	focusInput(text, repeat = true) {
 		if (this.props.store.isPreview) return
 		if (this.shouldShowForm()) {
-			// focus on the element
-			let focusfieldkey = ''
-			sb.map(this.state.formData, (field, key) => {
-				if (focusfieldkey || field.type !== 'text') return
-				if (!field.value || field.error) focusfieldkey = key
-			})
-			var $input = this['form_' + encode(focusfieldkey)]
-			if ($input) $input.focus()
-			sb.setTimeout(() => {
-				sb.map(this.state.formData, (field, key) => {
-					if (focusfieldkey || field.type !== 'text') return
-					if (!field.value || field.error) focusfieldkey = key
-				})
-				var $input = this['form_' + encode(focusfieldkey)]
-				if ($input) $input.focus()
-			}, 200)
+			const focusField = () => {
+				if (!this.props.isShow || !this.shouldShowForm()) return
+				const inputs = Object.keys(this.state.formData).map(key => this['form_' + encode(key)])
+					.filter(input => input && !input.disabled && !input.readOnly &&
+						(input.tagName === 'TEXTAREA' || (input.tagName === 'INPUT' &&
+							['text', 'email', 'tel', 'number', 'url', 'search', 'password'].includes(input.type))))
+				// Do not move the caret again after the user starts typing or tabs to another field.
+				if (inputs.some(input => input.ownerDocument.activeElement === input)) return
+				const input = inputs.find(input => input.value.trim() === '')
+					|| inputs.find(input => input.getAttribute('aria-invalid') === 'true')
+				if (input) input.focus()
+			}
+			focusField()
+			if (repeat) sb.setTimeout(focusField, 200)
 			return
 		}