@subiz/widget-v4 4.1.216 → 4.1.218

package/dist/HASH

@@ -1 +1 @@
-1a12ecfb6db
+1a12ed33347

package/package.json

@@ -1,19 +1,16 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.216",
+	"version": "4.1.218",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.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": "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"
+		"test": "node test.cjs"
 	},
 	"dependencies": {
-		"@subiz/ajax": "^3.0.22",
+		"@subiz/ajax": "^3.0.23",
 		"@subiz/flow": "^1.1.0",
 		"@subiz/wsclient": "^4.0.36",
 		"cookie_js": "1.4.2",
@@ -32,15 +29,19 @@
 		"@babel/preset-env": "^7.29.7",
 		"babel-loader": "^10.1.1",
 		"babel-plugin-syntax-jsx": "^6.18.0",
-		"eslint": "^10.12.0",
 		"globals": "^17.13.0",
 		"html-webpack-plugin": "^5.6.8",
-		"jsdom": "^30.1.2",
-		"puppeteer": "^25.12.0",
-		"tape": "^5.10.2",
-		"webpack": "^5.111.1",
+		"jsdom": "^30.1.3",
+		"puppeteer": "^25.14.0",
+		"tape": "^5.10.3",
+		"webpack": "^5.112.0",
 		"webpack-bundle-analyzer": "^5.4.0",
 		"webpack-cli": "^7.2.3",
-		"webpack-dev-server": "^6.0.0"
+		"webpack-dev-server": "^6.1.0"
+	},
+	"allowScripts": {
+		"puppeteer@25.14.0": true,
+		"fsevents@2.3.3": true,
+		"core-js@3.50.0": true
 	}
 }

package/src/chatbox/AudioAttachments.js

@@ -1,3 +1,4 @@
+import {UploadingFile} from './UploadProgress.js'
 import sb from '../util/index.js'
 import {h} from 'preact'
 
@@ -12,6 +13,7 @@ export default function AudioAttachments(props) {
 	if (audios.length === 0) return null
 
 	var $audios = sb.map(audios, (audio, index) => {
+			if (props.sending) return <UploadingFile key={index} attachment={audio} />
 		return (
 			<div key={index} class={`audio-attachment audio-attachment--${byType}`}>
 				<audio class='audio-attachment__audio' controls>

package/src/chatbox/Event.js

@@ -362,6 +362,10 @@ export default class Event extends Com {
 			$dot = <div class='sending_dot sending_dot__hide'></div>
 		}
 
+		const hasFile = sb.find(attachments, att => att.type === 'file' || att._file)
+		const sendingAttachment = !ev._error && ev.source_event_id === ev.id
+		if (hasFile) $dot = null
+
 		let $sender = null
 		if (this.props.event.mode === 'lead' && sb.get(ev, 'by.type') !== 'user') $sender = <div class='pt-3'></div>
 
@@ -392,10 +396,10 @@ export default class Event extends Com {
 						refresh={this.state.refresh}
 						onLink={this.props.onLink}
 					/>
-					<ImageAttachments store={this.props.store} ev={ev} ref={this.imageAttachmentRef} />
-					<AudioAttachments store={this.props.store} ev={ev} />
-					<VideoAttachments store={this.props.store} ev={ev} />
-					<FileAttachments store={this.props.store} ev={ev} ref={this.fileAttachmentRef} />
+					<ImageAttachments store={this.props.store} ev={ev} sending={sendingAttachment} ref={this.imageAttachmentRef} />
+					<AudioAttachments store={this.props.store} ev={ev} sending={sendingAttachment} />
+					<VideoAttachments store={this.props.store} ev={ev} sending={sendingAttachment} />
+					<FileAttachments store={this.props.store} ev={ev} sending={sendingAttachment} ref={this.fileAttachmentRef} />
 					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t} />
 					<FormAttachment store={this.props.store} t={this.props.t} ev={ev} />
 					<ProductAttachments t={this.props.t} store={this.props.store} ev={ev} />

package/src/chatbox/FileAttachments.js

@@ -1,3 +1,4 @@
+import UploadProgress from './UploadProgress.js'
 import sb from '../util/index.js'
 import {Com} from '../common.js'
 import {h} from 'preact'
@@ -33,14 +34,16 @@ export default class FileAttachments extends Com {
 
 		let $files = sb.map(files, (file, index) => {
 			let cls = `file-attachment file-attachment--${byType}`
+			if (this.props.sending) cls += ' file-attachment--sending'
 			if (file._true_idx === this.state.focusedIdx) cls += ` just-focused`
 
 			return (
-				<div key={index} class={cls}>
-					<a class='file-attachment--link' href={this.props.store.replaceFileUrl(file.url)} target='_blank'>
+				<div key={index} class={cls} aria-busy={!!this.props.sending}>
+					<a class='file-attachment--link' href={this.props.sending ? undefined : this.props.store.replaceFileUrl(file.url)} target='_blank'>
 						<span class='file-attachment--download mr-2'></span>
 						<span class='file-attachment--filename'>{file.name}</span>
 					</a>
+					{this.props.sending && <UploadProgress attachment={file} compact />}
 				</div>
 			)
 		})

package/src/chatbox/ImageAttachments.js

@@ -1,3 +1,4 @@
+import UploadProgress from './UploadProgress.js'
 import sb from '../util/index.js'
 import {Com} from '../common.js'
 import {h, createRef} from 'preact'
@@ -82,17 +83,19 @@ export default class ImageAttachment extends Com {
 
 		let cls = `image-attachment image-attachment--${byType}`
 		if (image._true_idx === this.state.focusedIdx) cls += ' just-focused'
+		const $sending = this.props.sending ? <span class='image-attachment__sending'><UploadProgress attachment={image} /></span> : null
 
 		if (!image.width || !image.height) {
 			return (
 				<div class={cls}>
-					<a href={this.props.store.replaceFileUrl(image.url)} target='_blank'>
+					<a class='image-attachment__preview' href={this.props.sending ? undefined : this.props.store.replaceFileUrl(image.url)} target='_blank' aria-busy={!!this.props.sending}>
 						<img
 							alt
 							class='image-attachment__img'
 							src={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)}
 							onload={(e) => this.props.onLoad && this.props.onLoad()}
 						/>
+						{$sending}
 					</a>
 				</div>
 			)
@@ -108,7 +111,7 @@ export default class ImageAttachment extends Com {
 
 		return (
 			<div class={cls}>
-				<a href={trueUrl} target='_blank'>
+				<a class='image-attachment__preview' href={this.props.sending ? undefined : trueUrl} target='_blank' aria-busy={!!this.props.sending}>
 					<img
 						alt
 						ref={(el) => {
@@ -123,6 +126,7 @@ export default class ImageAttachment extends Com {
 						onload={(e) => this.props.onLoad && this.props.onLoad()}
 						onerror={(e) => this.onErrorImage(index)}
 					/>
+					{$sending}
 				</a>
 			</div>
 		)

package/src/chatbox/UploadProgress.js

@@ -0,0 +1,21 @@
+import {h} from 'preact'
+
+export default function UploadProgress({attachment, compact = false}) {
+	const progress = attachment._upload?.putDone || attachment._upload?.file ? 100 : (attachment._upload?.progress ?? 0)
+	return <span class={'image-attachment__progress' + (compact ? ' file-attachment__progress' : '')}>
+		<span class='image-attachment__progress-label'>{progress}%</span>
+		<span class='image-attachment__progress-track' role='progressbar' aria-label={attachment.name || 'Uploading file'} aria-valuemin={0} aria-valuemax={100} aria-valuenow={progress}>
+			<span class='image-attachment__progress-fill' ref={el => {
+				// Widget styles reset all properties with !important.
+				if (el) el.style.setProperty('width', `${progress}%`, 'important')
+			}} />
+		</span>
+	</span>
+}
+
+export function UploadingFile({attachment}) {
+	return <div class='file-attachment file-attachment--user file-attachment--sending' aria-busy='true'>
+		<span class='file-attachment--filename'>{attachment.name}</span>
+		<UploadProgress attachment={attachment} compact />
+	</div>
+}

package/src/chatbox/VideoAttachments.js

@@ -1,3 +1,4 @@
+import {UploadingFile} from './UploadProgress.js'
 import sb from '../util/index.js'
 import {Com} from '../common.js'
 import {h} from 'preact'
@@ -19,6 +20,7 @@ export default class VideoAttachments extends Com {
 		if (videos.length === 0) return null
 
 		var $videos = sb.map(videos, (video, index) => {
+			if (this.props.sending) return <UploadingFile key={index} attachment={video} />
 			return (
 				<div key={index} class={`video-attachment video-attachment--${byType}`}>
 					<video

package/src/store/api.js

@@ -309,91 +309,76 @@ export default class {
 		})
 	}
 
-	uploadToS3 = async (file) => {
-		let name = file.name.replace(/\s+/g, '_')
-
-		var {body, error} = await this.apireq
-			.setBaseUrl('https://api5.subiz.com.vn/4.1')
-			.setQuery({
-				'account-id': this.accid,
-				description: 'upload\n user-client: web-widget',
-				name: name,
-				presign: true,
-				size: file.size,
-				// server reads 'content-type' (not 'type') and signs it into the presigned URL,
-				// so the PUT below must send the exact same Content-Type value
-				'content-type': file.type,
-			})
-			.post('/files')
-		if (error) return {body, error}
-
-		let signedurl = body.signed_url
-		let fileid = body.id
-
-		// Step 2: Upload the file to the signed_url
-		let err = await new Promise((resolve) => {
-			const xhr = new sb.XMLHttpRequest()
-			xhr.open('PUT', signedurl, true)
-			xhr.setRequestHeader('Content-Type', file.type || '')
-			xhr.onload = function () {
-				if (xhr.status === 200) {
-					resolve()
-				} else {
-					resolve(new Error(`Upload failed: ${xhr.statusText}`))
-				}
-			}
-
-			xhr.onerror = function () {
-				resolve(new Error('Network error during upload.'))
-			}
-
-			xhr.send(file)
-		})
-		if (err) return {error: err}
-
-		// Step 3: Notify server of upload completion
-		var {body, error} = await this.apireq
-			.setBaseUrl('https://api5.subiz.com.vn/4.1')
-			.setQuery({'account-id': this.accid})
-			.post(`/files/${fileid}/uploaded`)
-		if (error) return {error}
-		return {url: sb.get(body, 'file.url', '')}
+	attachmentRequest = () => this.apireq
+		.setBaseUrl(new URL('/4.1', this.ApiURL).href)
+		.addQuery('x-account-id', this.accid)
+
+	attachmentJSON = async (path, body, method = 'post') => {
+		const result = await this.attachmentRequest()[method](path, body)
+		if (result.error || result.body?.error || result.code < 200 || result.code >= 300) {
+			throw Object.assign(new Error('Attachment request failed'), {code: result.body?.error?.code, response: result})
+		}
+		return result.body
 	}
 
-	uploadToS32 = async (file) => {
-		var {body, error} = await ajax
-			.setBaseUrl('https://api5.subiz.com.vn/4.1')
-			.withCredentials(true)
-			.setQuery({
-				'account-id': this.accid,
-				description: 'upload\n user-client: web-widget',
-				name: file.name.replace(/\s+/g, '_'),
-				size: file.size,
-				type: file.type,
-			})
-			.setParser('json')
-			.beforeHook((param, done) => {
-				if (this.token_generator) {
-					let user_id = this.profile_id
-					this.token_generator().then((token) => {
-						if (user_id != this.profile_id) return done(true) // outdated
-
-						if (!token) return done(false)
-						if (token == 'error') return done(false)
-						param.request = param.request.addQuery('x-access-token', token)
-						return done(true)
-					})
-					return
+	uploadAttachment = async (file, state = {}, onProgress = () => {}) => {
+		if (file.size > 25000000) return {error: 'invalid_field_size', body: {code: 'invalid_field_size'}}
+		const identity = JSON.stringify([this.accid, this.uid, this.ref, this.mask, this.profile_id, this.tokensession])
+		if (state.identity && state.identity !== identity) throw new Error('Upload identity changed')
+		state.identity = identity
+		const checkIdentity = () => {
+			if (identity !== JSON.stringify([this.accid, this.uid, this.ref, this.mask, this.profile_id, this.tokensession])) throw new Error('Upload identity changed')
+		}
+		if (state.file) return state.file
+		// A completed PUT can still be finalized after the PUT URL expires.
+		if (state.upload && !state.putDone && state.upload.upload_expires_at <= sb.Date.now()) {
+			delete state.upload
+			delete state.key
+		}
+		if (!state.key) state.key = sb.randomString(36)
+		if (!state.metadata) state.metadata = {
+			category: 'attachment', name: file.name,
+			content_type: file.type || 'application/octet-stream', size: file.size, ttl_seconds: 0,
+		}
+		if (!state.upload) {
+			const created = await this.attachmentJSON('/uploads', {...state.metadata, idempotency_key: state.key})
+			checkIdentity()
+			if (!created.upload?.upload_id || !created.upload.upload_url) throw new Error('Missing upload session')
+			state.upload = created.upload
+		}
+		if (!state.putDone) {
+			checkIdentity()
+			const report = (percent) => {
+				if (state.progress === percent) return
+				state.progress = percent
+				onProgress(percent)
+			}
+			report(0)
+			// XHR exposes upload progress; this request still bypasses the API client.
+			await new Promise((resolve, reject) => {
+				const xhr = new sb.XMLHttpRequest()
+				xhr.upload.onprogress = (event) => {
+					if (event.lengthComputable) report(Math.min(100, Math.floor(event.loaded / event.total * 100)))
 				}
-
-				if (this.ref) param.request = param.request.addQuery('x-user-ref', this.ref)
-				else if (this.mask) param.request = param.request.addQuery('x-user-mask', this.mask) // deprecating
-
-				return done(true)
+				xhr.open('PUT', state.upload.upload_url, true)
+				xhr.withCredentials = false
+				Object.entries(state.upload.required_headers || {}).forEach(([key, value]) => xhr.setRequestHeader(key, value))
+				xhr.onload = () => xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new Error(`Upload failed: HTTP ${xhr.status}`))
+				xhr.onerror = () => reject(new Error('Network error during upload'))
+				xhr.onabort = () => reject(new Error('Upload aborted'))
+				xhr.ontimeout = () => reject(new Error('Upload timed out'))
+				xhr.send(file)
 			})
-			.post('/files', file)
-		if (error) return {body, error}
-		return {url: sb.get(body, 'file.url')}
+			report(100)
+			state.putDone = true
+		}
+		checkIdentity()
+		const finished = await this.attachmentJSON(`/uploads/${encodeURIComponent(state.upload.upload_id)}/finish`)
+		checkIdentity()
+		const f = finished.file
+		if (!f?.id || !f.url || f.error_code) throw new Error('File is not available')
+		state.file = {url: f.url, v: 'cdn', file_id: f.id}
+		return state.file
 	}
 
 	time = (_) => ajax.setBaseUrl(this.ApiURL).withCredentials(true).setParser('json').get('/time')

package/src/store/api_fake.js

@@ -66,7 +66,7 @@ export default class {
 	sendLostFocus = (data) => OK200
 	sendContentView = (data) => OK200
 
-	uploadToS3 = async (file) => OK200
+	uploadAttachment = async (file) => OK200
 
 	time = (_) => Promise.resolve({code: 200, body: new sb.Date().toISOString()})
 	updateUser = (data) => OK200

package/src/store/attachments.js

@@ -4,7 +4,7 @@ export async function uploadAttachments(attachments, upload) {
 	let error, errorMessage
 	for (const attachment of attachments) {
 		try {
-			const result = await upload(attachment._file)
+			const result = await upload(attachment._file, attachment._upload || (attachment._upload = {}))
 			if (result.body && result.body.code === 'invalid_field_size') {
 				errorMessage = 'cannot_send_too_big_file'
 			}
@@ -13,6 +13,10 @@ export async function uploadAttachments(attachments, upload) {
 				continue
 			}
 			attachment.url = result.url
+			if (result.file_id) {
+				attachment.v = 'cdn'
+				attachment.file_id = result.file_id
+			}
 		} catch (err) {
 			error = error || err
 		}

package/src/store/store.js

@@ -1450,7 +1450,7 @@ export default class Store {
 				if (att.type !== 'file') return
 				if (!att._file) return
 				files.push(att)
-				if (ImageTypes.includes(att._file.type)) {
+				if (!att._upload?.file && ImageTypes.includes(att._file.type)) {
 					let {width, height, url} = await loadImage(att._file)
 					att.url = url
 					att.width = width
@@ -1463,14 +1463,21 @@ export default class Store {
 		await this.convoGate.entry()
 		// upload file first
 
-		const uploaded = await uploadAttachments(files, (file) => this.api.uploadToS3(file))
+		const uploaded = await uploadAttachments(files, (file, state) => this.api.uploadAttachment(file, state, () => this.pubsub.publish('events', event)))
 		event._error = uploaded.error
 		if (uploaded.errorMessage) event._error_message = uploaded.errorMessage
 
 		if (event._error) return this.onWs(event) // dont send error msg
 		if (cid && cid.startsWith('cslight')) return
 
-		let {body: ret, error} = await this.api.sendConvoEvent(cid, event)
+		// Keep browser Files and upload sessions locally for retry, never in the event JSON.
+		const outgoing = {...event, data: {...event.data}}
+		if (event.data.message) outgoing.data.message = {...event.data.message, attachments: event.data.message.attachments?.map(att => {
+			const {_file, _upload, ...attachment} = att
+			return attachment
+		})}
+		let {body: ret, error} = await this.api.sendConvoEvent(cid, outgoing)
+		error = error || ret?.error
 		if (error) {
 			event._error = error
 			this.onWs(event)