@subiz/widget-v4 4.1.218 → 4.1.222

package/src/form/form-fields.js

@@ -0,0 +1,224 @@
+import {h} from 'preact'
+import sb from '../util/index.js'
+
+// Helpers and small presentational pieces for the new Form block fields
+// (rating stars/faces, linear_scale, checkbox chips, "Other" option).
+
+export const OTHER_OPTION_VALUE = '__other__'
+
+// Defaults for i18n keys that may not exist yet in the backend locale files.
+// t(key) returns the key itself when the message is missing.
+const DEFAULT_MESSAGES = {
+	vi: {
+		form_other_option: 'Khác…',
+		form_other_option_placeholder: 'Nhập câu trả lời của bạn',
+		form_other_option_label: 'Khác',
+	},
+	en: {
+		form_other_option: 'Other…',
+		form_other_option_placeholder: 'Type your answer',
+		form_other_option_label: 'Other',
+	},
+}
+
+export function translate(t, key) {
+	let msg = typeof t === 'function' ? t(key) : ''
+	if (msg && msg !== key) return msg
+	let locale = ''
+	try {
+		if (t && typeof t.locale === 'function') locale = String(t.locale() || '')
+	} catch (e) {}
+	// unknown locale falls back to vi, same as the widget's fallback locale
+	let lang = locale && !locale.toLowerCase().startsWith('vi') ? 'en' : 'vi'
+	return DEFAULT_MESSAGES[lang][key] || key
+}
+
+export function isChips(com) {
+	return String(sb.get(com, 'class') || '')
+		.split(/\s+/)
+		.includes('chips')
+}
+
+export function getPlaceholder(com) {
+	return sb.get(com, 'place_holder') || sb.get(com, 'placeholder') || ''
+}
+
+export function getDescription(com) {
+	return sb.get(com, 'description') || sb.get(com, 'label_description') || ''
+}
+
+// numeric option values ("1".."N") are stored as numbers, same as the legacy rating field
+export function toStoredValue(v) {
+	if (typeof v === 'number') return v
+	let s = String(v === undefined || v === null ? '' : v).trim()
+	if (s !== '' && /^-?\d+(\.\d+)?$/.test(s)) return Number(s)
+	return s
+}
+
+export function sameValue(a, b) {
+	if (a === undefined || a === null || a === '') return false
+	return String(a) === String(b)
+}
+
+const FACES_5 = ['face_very_sad', 'face_sad', 'face_neutral', 'face_happy', 'face_very_happy']
+const FACES_3 = ['face_sad', 'face_neutral', 'face_happy']
+
+// returns {kind: 'star'|'face', levels: [{value, icon}]}
+export function getRatingConfig(com) {
+	let options = sb.filter(sb.get(com, 'input_options') || [], (o) => o && o.value !== undefined && o.value !== '')
+	if (sb.size(options) > 0) {
+		let isFace = sb.find(options, (o) => String(o.icon || '').startsWith('face'))
+		let faces = options.length === 3 ? FACES_3 : FACES_5
+		let levels = sb.map(options, (o, i) => {
+			let icon = String(o.icon || '')
+			if (isFace && !icon.startsWith('face')) icon = faces[i] || 'face_neutral'
+			if (!isFace) icon = 'star'
+			return {value: String(o.value), icon}
+		})
+		return {kind: isFace ? 'face' : 'star', levels}
+	}
+	let max = parseInt(sb.get(com, 'scale_max'), 10)
+	if (max !== 3) max = 5
+	let levels = []
+	for (let i = 1; i <= max; i++) levels.push({value: String(i), icon: 'star'})
+	return {kind: 'star', levels}
+}
+
+export function getScaleRange(com) {
+	let min = parseInt(sb.get(com, 'scale_min'), 10) === 0 ? 0 : 1
+	let max = parseInt(sb.get(com, 'scale_max'), 10)
+	if (!max || isNaN(max)) max = 5
+	if (max < 2) max = 2
+	if (max > 10) max = 10
+	let values = []
+	for (let i = min; i <= max; i++) values.push(i)
+	return {min, max, values}
+}
+
+// label shown for a stored option value; values not in the option list
+// (old free text or an "Other" answer) are shown as-is
+export function optionLabel(com, v) {
+	let option = sb.find(sb.get(com, 'input_options') || [], (o) => sameValue(o.value, v))
+	if (option) return option.label || option.value
+	return v
+}
+
+export function isEmptyValue(val) {
+	if (val === undefined || val === null) return true
+	if (typeof val === 'string' && !val.trim()) return true
+	if (Array.isArray(val) && val.length === 0) return true
+	return false
+}
+
+const MOUTHS = {
+	face_very_sad: 'M7.5 17.5 Q12 11.5 16.5 17.5',
+	face_sad: 'M8.5 16.5 Q12 13.5 15.5 16.5',
+	face_neutral: 'M8.5 15.5 L15.5 15.5',
+	face_happy: 'M8.5 14 Q12 17.5 15.5 14',
+	face_very_happy: 'M7.5 13 Q12 20 16.5 13 Z',
+}
+
+export function FaceIcon({icon, size}) {
+	let mouth = MOUTHS[icon] || MOUTHS.face_neutral
+	let s = size || 28
+	return (
+		<svg
+			class='form-face-icon'
+			width={s}
+			height={s}
+			viewBox='0 0 24 24'
+			fill='none'
+			stroke='currentColor'
+			stroke-width='1.6'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+			aria-hidden='true'
+		>
+			<circle cx='12' cy='12' r='10' />
+			<circle cx='8.8' cy='9.6' r='0.6' fill='currentColor' stroke-width='1.2' />
+			<circle cx='15.2' cy='9.6' r='0.6' fill='currentColor' stroke-width='1.2' />
+			<path d={mouth} fill={icon === 'face_very_happy' ? 'currentColor' : 'none'} fill-opacity='0.15' />
+		</svg>
+	)
+}
+
+export function RatingFaces({levels, value, onChange, readonly}) {
+	return (
+		<div class={'form-rating-faces' + (readonly ? ' readonly' : '')} role={readonly ? undefined : 'radiogroup'}>
+			{sb.map(levels, (level) => {
+				let selected = sameValue(value, level.value)
+				let cls = 'form-rating-face'
+				if (selected) cls += ' selected'
+				if (readonly) {
+					return (
+						<span class={cls} key={level.value}>
+							<FaceIcon icon={level.icon} />
+						</span>
+					)
+				}
+				return (
+					<button
+						type='button'
+						class={cls}
+						key={level.value}
+						role='radio'
+						aria-checked={selected ? 'true' : 'false'}
+						aria-label={level.value}
+						title={level.value}
+						onClick={() => onChange(selected ? '' : toStoredValue(level.value))}
+					>
+						<FaceIcon icon={level.icon} />
+					</button>
+				)
+			})}
+		</div>
+	)
+}
+
+// numberedLabels: prefix min/max labels with their number ("1 · …"), used in the chat box only
+export function LinearScale({com, value, onChange, numberedLabels}) {
+	let {min, max, values} = getScaleRange(com)
+	let cols = Math.ceil(values.length / 2)
+	let minLabel = sb.get(com, 'scale_min_label') || ''
+	let maxLabel = sb.get(com, 'scale_max_label') || ''
+	return (
+		<div
+			class={'form-linear-scale' + (values.length >= 8 ? ' many' : '')}
+			style={`--scale-count: ${values.length}; --scale-cols: ${cols}`}
+		>
+			<div class='form-linear-scale-items' role='radiogroup'>
+				{sb.map(values, (v) => {
+					let selected = sameValue(value, v)
+					// odd count on two rows (e.g. 0..10 -> 6 + 5): start the 2nd row one column
+					// later so the max value ends bottom-right, above the max label.
+					// A class, not an inline style: the chatbox has `* {all: unset !important}`.
+					let cls = 'form-linear-scale-item'
+					if (selected) cls += ' selected'
+					if (values.length % 2 && v === values[cols]) cls += ' row2-start'
+					return (
+						<button
+							type='button'
+							key={v}
+							class={cls}
+							role='radio'
+							aria-checked={selected ? 'true' : 'false'}
+							onClick={() => onChange(v)}
+						>
+							{v}
+						</button>
+					)
+				})}
+			</div>
+			{(minLabel || maxLabel) && (
+				<div class='form-linear-scale-labels'>
+					<span class='form-linear-scale-label min'>
+						{minLabel && numberedLabels ? `${min} · ${minLabel}` : minLabel}
+					</span>
+					<span class='form-linear-scale-label max'>
+						{maxLabel && numberedLabels ? `${max} · ${maxLabel}` : maxLabel}
+					</span>
+				</div>
+			)}
+		</div>
+	)
+}

package/src/form/index.js

@@ -40,6 +40,8 @@ async function load() {
 		getUrlParameter('id') || getUrlParameter('accid') || getUrlParameter('account-id') || 'acqsulrowbxiugvginhw'
 	let mask = accid + '@' + 'abcd'
 	let token = getUrlParameter('token')
+	// public link: ?account-id=...&form-id=...
+	let formId = getUrlParameter('form-id') || getUrlParameter('formid')
 	let previewJson = getUrlParameter('preview')
 	//previewJson = PREVIEW_B64
 	await store.init(accid)
@@ -62,7 +64,10 @@ async function load() {
 	}
 	t.locale = () => _locale
 	common.downloadLanguage(store, _locale).then(() => {
-		render(<FormPage store={store} t={t} token={token} previewJson={previewJson} />, document.getElementById('form'))
+		render(
+			<FormPage store={store} t={t} token={token} formId={formId} previewJson={previewJson} />,
+			document.getElementById('form'),
+		)
 	})
 }
 

package/src/form/rating-stars.js

@@ -1,88 +1,72 @@
 import {Com} from '../common.js'
-import {h, createRef, Fragment} from 'preact'
-import sb from '../util/index.js'
-
-export default class Form2 extends Com {
-	state = {
-		hovering: 0,
-		selected: 0,
-	}
+import {h} from 'preact'
 
+// Star rating. `count` stars (default 5), selecting level N highlights stars 1..N.
+// Clicking the selected star again clears the value (onChange(0)).
+export default class RatingStars extends Com {
 	constructor(props) {
 		super(props)
+		this.state = {hovering: 0, selected: Number(props.value) || 0}
 	}
 
 	onMouseEnter = (v) => {
-		let {selected, hovering} = this.state
-		if (v <= selected) {
-			this.setState({hovering: selected})
-			return
-		}
-		this.setState({hovering: v})
+		let {selected} = this.state
+		this.setState({hovering: v <= selected ? selected : v})
 	}
 
 	onMouseLeave = () => {
-		let {selected, hovering} = this.state
 		this.setState({hovering: 0})
 	}
 
 	onToggleValue(v) {
-		let {selected} = this.state
-		let newVal = v
-		if (v === selected) newVal = 0
+		let newVal = v === this.state.selected ? 0 : v
 		this.setState({selected: newVal, hovering: newVal})
-		this.props.onChange(newVal)
+		if (this.props.onChange) this.props.onChange(newVal)
 	}
 
 	render() {
 		let {selected, hovering} = this.state
-		let star1Cls = 'star-wrapper'
-		if (selected >= 1) {
-			star1Cls += ' selected'
-		} else if (hovering >= 1) {
-			star1Cls += ' hovering'
-		}
-		let star2Cls = 'star-wrapper'
-		if (selected >= 2) {
-			star2Cls += ' selected'
-		} else if (hovering >= 2) {
-			star2Cls += ' hovering'
-		}
-		let star3Cls = 'star-wrapper'
-		if (selected >= 3) {
-			star3Cls += ' selected'
-		} else if (hovering >= 3) {
-			star3Cls += ' hovering'
-		}
-		let star4Cls = 'star-wrapper'
-		if (selected >= 4) {
-			star4Cls += ' selected'
-		} else if (hovering >= 4) {
-			star4Cls += ' hovering'
-		}
-		let star5Cls = 'star-wrapper'
-		if (selected >= 5) {
-			star5Cls += ' selected'
-		} else if (hovering >= 5) {
-			star5Cls += ' hovering'
+		let count = Number(this.props.count) || 5
+		let readonly = !!this.props.readonly
+		let $stars = []
+		for (let i = 1; i <= count; i++) {
+			let cls = 'star-wrapper'
+			if (selected >= i) cls += ' selected'
+			else if (hovering >= i) cls += ' hovering'
+			if (readonly) {
+				$stars.push(
+					<div class={cls} key={i}>
+						<div class='star' />
+					</div>,
+				)
+				continue
+			}
+			$stars.push(
+				<div
+					class={cls}
+					key={i}
+					role='radio'
+					aria-checked={selected === i ? 'true' : 'false'}
+					aria-label={String(i)}
+					tabIndex={0}
+					onClick={() => this.onToggleValue(i)}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault()
+							this.onToggleValue(i)
+						}
+					}}
+					onMouseEnter={() => this.onMouseEnter(i)}
+				>
+					<div class='star' />
+				</div>,
+			)
 		}
+		let cls = 'form-ratings-wrapper'
+		if (readonly) cls += ' readonly'
 		return (
-			<div class='form-ratings-wrapper' onMouseLeave={() => this.onMouseLeave()}>
-				<div class={star1Cls} onClick={() => this.onToggleValue(1)} onMouseEnter={() => this.onMouseEnter(1)}>
-					<div class='star' />
-				</div>
-				<div class={star2Cls} onClick={() => this.onToggleValue(2)} onMouseEnter={() => this.onMouseEnter(2)}>
-					<div class='star' />
-				</div>
-				<div class={star3Cls} onClick={() => this.onToggleValue(3)} onMouseEnter={() => this.onMouseEnter(3)}>
-					<div class='star' />
-				</div>
-				<div class={star4Cls} onClick={() => this.onToggleValue(4)} onMouseEnter={() => this.onMouseEnter(4)}>
-					<div class='star' />
-				</div>
-				<div class={star5Cls} onClick={() => this.onToggleValue(5)} onMouseEnter={() => this.onMouseEnter(5)}>
-					<div class='star' />
-				</div>
+			<div class={cls} role={readonly ? undefined : 'radiogroup'} onMouseLeave={() => this.onMouseLeave()}>
+				{$stars}
 			</div>
 		)
 	}

package/src/plugin.js

@@ -4,6 +4,7 @@ import {h, render, createRef} from 'preact'
 
 // const LoadChatbox = () => import(/*webpackChunkName: "chatbox" */ './chatbox/main.js')
 import Chatbox from './chatbox/main.js'
+import {widgetGreeting} from './chatbox/greeting.js'
 const LoadPopup = () => import(/*webpackChunkName: "popup" */ './popup/popup.js')
 const LoadNotif = () => import(/*webpackChunkName: "notif" */ './notif/notif.js')
 
@@ -172,6 +173,15 @@ function Plugin(plugin, store, $container, lib) {
 		_locale = common.getLocale(plugin, locale)
 		await common.downloadLanguage(store, _locale)
 		this.t = t
+		if (plugin.type === 'chatbox') {
+			store.relocalizeLightConvos(_locale, t.i18n, {
+				widgetGreeting: () => widgetGreeting(plugin.chatbox, t),
+				previewGreetingText: () => {
+					let greeting = sb.get(plugin, 'chatbox.greeting', {})
+					return t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
+				},
+			})
+		}
 		_render()
 		return _locale
 	}

package/src/store/api.js

@@ -1,4 +1,5 @@
 import sb from '../util/index.js'
+import {loadWidgetSettings} from './widget-settings.js'
 const ajax = require('@subiz/ajax/src/ajax.js')
 
 function jsonifyTextPlain(param, done) {
@@ -309,8 +310,9 @@ export default class {
 		})
 	}
 
+	// Embedded widgets can use a relative API base, such as /4.0/ on the dashboard.
 	attachmentRequest = () => this.apireq
-		.setBaseUrl(new URL('/4.1', this.ApiURL).href)
+		.setBaseUrl(new URL('/4.1', new URL(this.ApiURL, document.location.href)).href)
 		.addQuery('x-account-id', this.accid)
 
 	attachmentJSON = async (path, body, method = 'post') => {
@@ -387,12 +389,7 @@ export default class {
 	getUser = (_) => this.apireq.get(`/accounts/${this.accid}/users/${this.uid}`)
 	getAccountSetting = async (p) => {
 		let href = sb.get(document, 'location.href') // send full href, this could be used to select which bot (ai-agent) should be returned
-		let res = {}
-		if (p && p.bot_id) {
-			res = await this.apireq.addQuery('url', href).addQuery('bot_id', p.bot_id).get(`/accounts/${this.accid}/settings`)
-		} else {
-			res = await this.apireq.addQuery('url', href).get(`/accounts/${this.accid}/settings`)
-		}
+		const res = await loadWidgetSettings(this.apireq, this.ApiURL, this.accid, href, p && p.bot_id)
 		if (res.error) return res
 
 		// fix image error image url link in popup
@@ -441,6 +438,11 @@ export default class {
 
 	checkFormToken = (accid, token) => this.api41.addQuery('account-id', accid).get(`/submissions/${token}`)
 	submitForm2 = (accid, token, data) => this.api41.addQuery('account-id', accid).post(`/submissions/${token}`, data)
+	// public form (no token): submitter is the current visitor
+	getPublicForm = (formid) =>
+		this.websiteFormRequest().get(`/accounts/${this.accid}/public-forms/${encodeURIComponent(formid)}`)
+	submitPublicForm = (formid, data) =>
+		this.websiteFormRequest().post(`/accounts/${this.accid}/public-forms/${encodeURIComponent(formid)}/submissions`, data)
 	suggest_address = (keyword) => this.apireq.setQuery({keyword: keyword}).get(`/accounts/${this.accid}/addresses`)
 	create_ticket = (ticket) => this.apireq.post(`/accounts/${this.accid}/tickets`, ticket)
 }

package/src/store/api_fake.js

@@ -1,4 +1,5 @@
 import sb from '../util/index.js'
+import {loadWidgetSettings} from './widget-settings.js'
 
 const ajax = require('@subiz/ajax/src/ajax.js')
 
@@ -13,6 +14,7 @@ const OK200 = Promise.resolve({code: 200})
 export default class {
 	constructor(ApiURL, FileURL) {
 		this.FileURL = FileURL
+		this.ApiURL = ApiURL
 		this.apireq = ajax.setBaseUrl(ApiURL).setContentType('text/plain').beforeHook(jsonifyTextPlain).setParser('json')
 	}
 
@@ -84,7 +86,7 @@ export default class {
 				],
 			},
 		})
-	getAccountSetting = () => this.apireq.get(`/accounts/${this.accid}/settings`)
+	getAccountSetting = (p) => loadWidgetSettings(this.apireq, this.ApiURL, this.accid, document.location.href, p && p.bot_id)
 
 	sendImpression = (impression) => OK200
 	sendConversion = (conversion) => OK200

package/src/store/localize.js

@@ -0,0 +1,30 @@
+import sb from '../util/index.js'
+
+// pick(i18nObject) returns the localized value or a falsy value when none matches.
+export const pickLocale = (locale) => (i18n) => {
+	if (!i18n || !locale) return undefined
+	return i18n[locale.replace('-', '_')] || i18n[locale]
+}
+
+// Rewrites the visible fields of a message from its i18n fields, in place.
+// Fields without a matching translation keep their current value.
+// Returns true when anything changed.
+export function localizeMessage(message, pick) {
+	if (!message) return false
+	let changed = false
+	const block = message.i18n_block && pick(message.i18n_block)
+	if (block) {
+		message.block = sb.cloneDeep(block)
+		message.text = sb.blockToText(block)
+		changed = true
+	}
+	sb.map(message.attachments, (att) => {
+		sb.map(att && att.quick_replies, (qr) => {
+			const title = qr && qr.i18n_title && pick(qr.i18n_title)
+			if (!title) return
+			qr.title = title
+			changed = true
+		})
+	})
+	return changed
+}

package/src/store/store.js

@@ -7,6 +7,7 @@ import KV from './kv.js'
 import APIFake from './api_fake.js'
 import RealtimeFake from './realtime_fake.js'
 import {uploadAttachments} from './attachments.js'
+import {localizeMessage, pickLocale} from './localize.js'
 var Realtime = require('@subiz/wsclient')
 var cookie = require('cookie_js')
 cookie.defaults.path = '/'
@@ -637,6 +638,8 @@ export default class Store {
 
 	checkFormToken = (accid, token) => this.api.checkFormToken(accid, token)
 	submitForm2 = (accid, token, data) => this.api.submitForm2(accid, token, data)
+	getPublicForm = (formid) => this.api.getPublicForm(formid)
+	submitPublicForm = (formid, data) => this.api.submitPublicForm(formid, data)
 	sendPresence = sb.throttle(
 		async () => {
 			if (!this._track_page_view) return
@@ -1311,6 +1314,65 @@ export default class Store {
 
 	_typing = sb.throttle((convoid) => this.api.sendTyping(convoid), 3000, {trailing: false})
 
+	// Re-translates stored light convos and the button preview after the chatbox locale changes.
+	// pick(i18nObject) returns the localized value.
+	// opts.widgetGreeting() rebuilds the widget greeting event,
+	// opts.previewGreetingText() returns the chatbox greeting text shown in the button preview.
+	relocalizeLightConvos(locale, pick, opts = {}) {
+		let changed = []
+		sb.map(this.lightConvos, (convo) => {
+			if (!convo) return
+			sb.map(convo.events, (ev) => {
+				let message = sb.get(ev, 'data.message')
+				if (!message) return
+				let ok = false
+				if (convo.light_type === 'widget' && sb.get(ev, 'id', '').startsWith('widget-greeting-')) {
+					let text = opts.widgetGreeting && sb.get(opts.widgetGreeting(), 'data.message.text')
+					if (text) {
+						message.text = text
+						ok = true
+					}
+				} else {
+					ok = localizeMessage(message, pick)
+				}
+				if (!ok) return
+				if (sb.get(convo, 'last_message_sent.id') === ev.id) convo.last_message_sent = sb.cloneDeep(ev)
+				changed.push(ev)
+			})
+			convo.locale = locale
+		})
+		if (sb.size(this.lightConvos)) this.kv.put('light_convos', this.lightConvos)
+		this.relocalizePreview(pick, opts.previewGreetingText)
+		// re-render only: publishing 'events' would re-trigger greeting previews and subiz('on') callbacks
+		if (changed.length) this.pubsub.publish('account')
+	}
+
+	// lastview.previewEvent is a snapshot (persisted separately from light_convos), so it must be rebuilt.
+	relocalizePreview(pick, previewGreetingText) {
+		let previewEvent = sb.get(this.matchLastview(), 'previewEvent')
+		if (!sb.size(previewEvent)) return
+		let cid = sb.get(previewEvent, 'data.message.conversation_id')
+		let next = sb.cloneDeep(previewEvent)
+		let ok = false
+		if (!cid) {
+			// greeting built from chatbox setting (ChatButton.pickBestGreeting)
+			let text = previewGreetingText && previewGreetingText()
+			if (text) {
+				next.data.message.text = text
+				ok = true
+			}
+		} else {
+			let ev = previewEvent.id && sb.find(sb.get(this.lightConvos, [cid, 'events']), (e) => e && e.id === previewEvent.id)
+			if (ev) {
+				next = sb.cloneDeep(ev)
+				ok = true
+			} else {
+				ok = localizeMessage(sb.get(next, 'data.message'), pick)
+			}
+		}
+		if (ok) this.updateLastview({previewEvent: next})
+	}
+
 	deleteLightConvo(id) {
 		delete this.lightConvos[id]
 		this.kv.put('light_convos', this.lightConvos)
@@ -1365,8 +1427,9 @@ export default class Store {
 			ev.id = 'evfake' + now + idx
 			ev.type = 'message_sent'
 			ev.by = {id: botid, type: 'bot'}
-			ev.data = {message: message}
+			ev.data = {message: sb.cloneDeep(message)}
 			ev.data.message.conversation_id = convoid
+			localizeMessage(ev.data.message, pickLocale(locale))
 			lastev = ev
 			return ev
 		})

package/src/store/widget-settings.js

@@ -0,0 +1,46 @@
+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'
+}
+
+// A separate client keeps visitor identity, authentication hooks and cookies
+// out of the shared Cloudflare cache key.
+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 (_) {
+  // CSP and network failures can reject instead of returning an error envelope.
+ }
+ return request.setBaseUrl('https://api.sbz.vn/4.1').get('/widget-config')
+}
+
+export 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'),
+ ])
+ // Preserve the API error body for the existing banned/locked-account handling.
+ 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)}
+}
+
+export 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/src/util/common.js

@@ -836,7 +836,7 @@ export function setCss(id, $css, css) {
 	}
 }
 
-export const DEF_CHAT_BUTTON_BACKGROUND_IMAGE_URL = 'https://vcdn.subiz-cdn.com/file/bubble_11.svg?v=5' // v=5 trick to clear cache
+export const DEF_CHAT_BUTTON_BACKGROUND_IMAGE_URL = require('../../assets/img/bubble_11.svg?inline')
 
 export const DEFVAL = {
 	primary_color: '#0265FF',

package/test.cjs

@@ -34,6 +34,9 @@ Module._extensions['.js'] = (module, filename) => {
 const originalLoad = Module._load
 Module._load = function(request, parent, isMain) {
 	if (request.startsWith('css-loader!')) return {default: {toString: () => ''}}
+	if (request.endsWith('.svg?inline')) {
+		return 'data:image/svg+xml;base64,' + fs.readFileSync(path.resolve(path.dirname(parent.filename), request.slice(0, -7))).toString('base64')
+	}
 	return originalLoad.call(this, request, parent, isMain)
 }
 for (const extension of ['.svg', '.png', '.jpg', '.gif', '.mp3', '.ogg']) {

package/webpack.dev.js

@@ -34,8 +34,10 @@ module.exports = {
 	module: {
 		rules: [
 			{test: /\.less$/, loader: 'less-loader'},
+			{test: /\.svg$/i, resourceQuery: /inline/, type: 'asset/inline'},
 			{
 				test: /\.(svg|png|jpe?g|gif|ogg|mp3)$/i,
+				resourceQuery: {not: [/inline/]},
 				use: [
 					{
 						loader: 'file-loader',