@subiz/widget-v4 4.1.191 → 4.1.196

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.191",
+	"version": "4.1.196",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -9,14 +9,14 @@
 		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
 	},
 	"dependencies": {
-		"@subiz/ajax": "^3.0.20",
+		"@subiz/ajax": "^3.0.22",
 		"@subiz/flow": "^1.1.0",
 		"@subiz/wsclient": "^4.0.34",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.46.0",
+		"core-js": "^3.47.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
-		"less": "^4.4.2",
+		"less": "^4.5.1",
 		"less-loader": "^12.3.0",
 		"preact": "10.19.3"
 	},
@@ -28,10 +28,10 @@
 		"@babel/preset-env": "^7.28.5",
 		"babel-loader": "^10.0.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
-		"html-webpack-plugin": "^5.6.4",
-		"puppeteer": "^24.27.0",
-		"webpack": "^5.102.1",
-		"webpack-bundle-analyzer": "^4.10.2",
+		"html-webpack-plugin": "^5.6.5",
+		"puppeteer": "^24.34.0",
+		"webpack": "^5.104.1",
+		"webpack-bundle-analyzer": "^5.1.0",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.2"
 	}

package/src/chatbox/Event.js

@@ -28,6 +28,26 @@ 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') || []}
+		this.textMessageRef = createRef()
+		this.fileAttachmentRef = createRef()
+		this.imageAttachmentRef = createRef()
+	}
+
+	focusSourceEventFromQuote = (ev) => {
+		let $textMessage = this.textMessageRef.current
+		if ($textMessage && typeof $textMessage.focusSourceEventFromQuote === 'function') {
+			$textMessage.focusSourceEventFromQuote(ev)
+		}
+
+		let $fileAttachment = this.fileAttachmentRef.current
+		if ($fileAttachment && typeof $fileAttachment.focusSourceEventFromQuote === 'function') {
+			$fileAttachment.focusSourceEventFromQuote(ev)
+		}
+
+		let $imageAttachment = this.imageAttachmentRef.current
+		if ($imageAttachment && typeof $imageAttachment.focusSourceEventFromQuote === 'function') {
+			$imageAttachment.focusSourceEventFromQuote(ev)
+		}
 	}
 
 	render() {
@@ -248,21 +268,34 @@ export default class Event extends Com {
 			let wrappercls = 'agent-convo-event-wrapper'
 			if (hasForm) wrappercls += ' full'
 			return (
-				<div class='convo-event agent-message'>
+				<div class='convo-event agent-message' data-ev-id={ev.id}>
 					{$sender}
 					<div class={wrappercls}>
 						<div class={innercls}>
 							<TextMessage
+								ref={this.textMessageRef}
+								onFocusSourceEventFromQuote={this.props.onFocusSourceEventFromQuote}
 								showTime={this.props.event.show_time}
 								isLast={this.props.isLast}
 								store={this.props.store}
+								t={this.props.t}
 								ev={ev}
 								onLink={this.props.onLink}
 							/>
-							<ImageAttachments store={this.props.store} ev={ev} />
+							<ImageAttachments
+								ref={this.imageAttachmentRef}
+								store={this.props.store}
+								ev={ev}
+								focusSourceEventFromQuote={this.props.focusSourceEventFromQuote}
+							/>
 							<AudioAttachments store={this.props.store} ev={ev} />
 							<VideoAttachments store={this.props.store} ev={ev} />
-							<FileAttachments store={this.props.store} ev={ev} />
+							<FileAttachments
+								ref={this.fileAttachmentRef}
+								store={this.props.store}
+								ev={ev}
+								focusSourceEventFromQuote={this.props.focusSourceEventFromQuote}
+							/>
 							<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t} />
 							<FormAttachment store={this.props.store} ev={ev} t={this.props.t} />
 							<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t} />
@@ -317,15 +350,21 @@ export default class Event extends Com {
 		}
 
 		return (
-			<div class='convo-event user-message'>
+			<div class='convo-event user-message' data-ev-id={ev.id}>
 				{$sender}
 				<div class='message-user__container'>
 					{$dot}
-					<TextMessage store={this.props.store} ev={ev} refresh={this.state.refresh} onLink={this.props.onLink} />
-					<ImageAttachments store={this.props.store} ev={ev} />
+					<TextMessage
+						ref={this.textMessageRef}
+						store={this.props.store}
+						ev={ev}
+						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} />
+					<FileAttachments store={this.props.store} ev={ev} 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} />
@@ -388,6 +427,8 @@ export default class Event extends Com {
 		let cid = sb.get(this.props.event.ev, 'data.message.conversation_id', '')
 		if (cid.startsWith('cslight')) return null
 		let ev = sb.get(this.props.event, 'ev') || {}
+		let isDeleted = sb.get(ev, 'data.message.deleted')
+		if (isDeleted) return
 		let pongs = sb.get(ev, 'data.message.pongs') || []
 		let hasLike = this.hasLike()
 		let hasDislike = this.hasDislike()

package/src/chatbox/Events.js

@@ -5,7 +5,7 @@ import sb from '../util/index.js'
 
 import Spinner from './spinner.js'
 import {Com} from '../common.js'
-import {h, Fragment} from 'preact'
+import {h, Fragment, createRef} from 'preact'
 
 //  ['cid', 'creating', 'isShow'],
 export default class Events extends Com {
@@ -15,6 +15,7 @@ export default class Events extends Com {
 		this.props.store.onConvoEvent(this, (ev) => this.onEvent(ev))
 		this.loadConvo()
 		this.refBody = null
+		this.evRefs = {}
 
 		this.checkAndSeen = sb.throttle(() => {
 			if (
@@ -64,12 +65,29 @@ export default class Events extends Com {
 				this.setState({isShowTyping: false})
 			}, 5000)
 		})
+
+		this.props.store.onMessageUpdated(this, async (ev) => {
+			if (sb.convoOfEv(ev) !== this.props.cid) return
+			await this.props.store.reloadConvoEvents(this.props.cid)
+			this.forceUpdate()
+		})
 	}
 
 	componentDidUpdate(prevProps) {
 		if (prevProps.cid !== this.props.cid) this.loadConvo()
 	}
 
+	setEventChildRef(ele, id) {
+		this.evRefs[id] = ele
+	}
+
+	onFocusSourceEventFromQuote = (ev) => {
+		let ref = this.evRefs[ev.id]
+		if (ref) {
+			ref.focusSourceEventFromQuote(ev)
+		}
+	}
+
 	ShowTyping() {
 		this.setState({
 			isShowTyping: true,
@@ -140,6 +158,8 @@ export default class Events extends Com {
 					onFormSubmit={this.props.onFormSubmit}
 					onSend={this.props.onSend}
 					onPostback={this.props.onPostback}
+					onFocusSourceEventFromQuote={this.onFocusSourceEventFromQuote}
+					ref={(ele) => this.setEventChildRef(ele, ev.ev.id)}
 					event={ev}
 					t={this.props.t}
 					key={ev.ev.id}

package/src/chatbox/FileAttachments.js

@@ -3,12 +3,17 @@ import {Com} from '../common.js'
 import {h} from 'preact'
 
 export default class FileAttachments extends Com {
+	constructor(props) {
+		super(props)
+		this.state = {focusedIdx: -1}
+	}
+
 	render() {
 		var byType = sb.get(this.props.ev, 'by.type', 'agent')
 		if (byType !== 'user') byType = 'agent'
 		var attachments = sb.get(this.props.ev, 'data.message.attachments', [])
 		var files = []
-		sb.each(attachments, (att) => {
+		sb.each(attachments, (att, idx) => {
 			if (!att) return
 			if (!att.url && !att._file) return
 			if (
@@ -20,15 +25,18 @@ export default class FileAttachments extends Com {
 				att.type !== 'form' &&
 				att.type !== 'form_submit'
 			) {
-				files.push(att)
+				files.push({...att, _true_idx: idx})
 			}
 		})
 
 		if (files.length === 0) return null
 
-		var $files = sb.map(files, (file, index) => {
+		let $files = sb.map(files, (file, index) => {
+			let cls = `file-attachment file-attachment--${byType}`
+			if (file._true_idx === this.state.focusedIdx) cls += ` just-focused`
+
 			return (
-				<div key={index} class={`file-attachment file-attachment--${byType}`}>
+				<div key={index} class={cls}>
 					<a class='file-attachment--link' href={this.props.store.replaceFileUrl(file.url)} target='_blank'>
 						<span class='file-attachment--download mr-2'></span>
 						<span class='file-attachment--filename'>{file.name}</span>
@@ -39,4 +47,23 @@ export default class FileAttachments extends Com {
 
 		return <div class={`message-${byType}`}>{$files}</div>
 	}
+
+	focusSourceEventFromQuote(ev) {
+		if (ev.id !== this.props.ev.id) return
+		let fields = sb.get(ev, 'data.message.fields') || []
+		let attachmentIndexField = sb.find(fields, (f) => f.key === 'attachment_index')
+		let attachmentIndex = sb.get(attachmentIndexField, 'value')
+		try {
+			attachmentIndex = JSON.parse(attachmentIndex)
+		} catch (err) {
+			attachmentIndex = undefined
+		}
+
+		if (attachmentIndex === undefined) return // this is a quote for text
+		this.setState({focusedIdx: attachmentIndex})
+		if (this.focusTimeout) clearTimeout(this.focusTimeout)
+		this.focusTimeout = setTimeout(() => {
+			this.setState({focusedIdx: -1})
+		}, 3000)
+	}
 }

package/src/chatbox/ImageAttachments.js

@@ -8,6 +8,7 @@ export default class ImageAttachment extends Com {
 		this.setState({
 			ready: false,
 			errorIndecies: [],
+			focusedIdx: -1,
 		})
 	}
 
@@ -16,6 +17,25 @@ export default class ImageAttachment extends Com {
 		this.setImageFrameDimension()
 	}
 
+	focusSourceEventFromQuote(ev) {
+		if (ev.id !== this.props.ev.id) return
+		let fields = sb.get(ev, 'data.message.fields') || []
+		let attachmentIndexField = sb.find(fields, (f) => f.key === 'attachment_index')
+		let attachmentIndex = sb.get(attachmentIndexField, 'value')
+		try {
+			attachmentIndex = JSON.parse(attachmentIndex)
+		} catch (err) {
+			attachmentIndex = undefined
+		}
+
+		if (attachmentIndex === undefined) return // this is a quote for text
+		this.setState({focusedIdx: attachmentIndex})
+		if (this.focusTimeout) clearTimeout(this.focusTimeout)
+		this.focusTimeout = setTimeout(() => {
+			this.setState({focusedIdx: -1})
+		}, 3000)
+	}
+
 	setImageFrameDimension() {
 		const MAX_HEIGHT = 240
 		const DEFAULT_MAX_WIDTH = 267
@@ -60,9 +80,12 @@ export default class ImageAttachment extends Com {
 		let byType = sb.get(this.props.ev, 'by.type')
 		if (byType !== 'user') byType = 'agent'
 
+		let cls = `image-attachment image-attachment--${byType}`
+		if (image._true_idx === this.state.focusedIdx) cls += ' just-focused'
+
 		if (!image.width || !image.height) {
 			return (
-				<div class={`image-attachment image-attachment--${byType}`}>
+				<div class={cls}>
 					<a href={this.props.store.replaceFileUrl(image.url)} target='_blank'>
 						<img
 							alt
@@ -84,7 +107,7 @@ export default class ImageAttachment extends Com {
 		}
 
 		return (
-			<div class={`image-attachment image-attachment--${byType}`}>
+			<div class={cls}>
 				<a href={trueUrl} target='_blank'>
 					<img
 						alt
@@ -125,7 +148,7 @@ export default class ImageAttachment extends Com {
 			) {
 				att.url = this.props.store.FileURL + uri
 			}
-			images.push(att)
+			images.push({...att, _true_idx: i})
 		})
 
 		if (images.length === 0) return null

package/src/chatbox/QuoteMessage.js

@@ -0,0 +1,94 @@
+import sb from '../util/index.js'
+import Block from './block.js'
+import {Com} from '../common.js'
+import {h} from 'preact'
+import Emoji from './Emoji.js'
+
+export default class QuoteMessage extends Com {
+	render() {
+		let sendername = ''
+		let byType = sb.get(this.props.ev, 'by.type')
+		let byId = sb.get(this.props.ev, 'by.id')
+
+		if (byType === 'user') {
+			sendername = this.props.t('you')
+		} else {
+			sendername = this.getSenderName(this.props.ev)
+
+			let acc = this.props.store.matchAccount() || {}
+			if (sb.get(this.props, 'chatbox.hide_agent_profile')) sendername = acc.name
+		}
+
+		let att = sb.get(this.props.ev, 'data.message.attachments.0')
+		if (att) {
+			let isImg = sb.includes(att.mimetype, 'image')
+			if (isImg) {
+				let uri = att.url
+				if (
+					!uri.startsWith('https://') &&
+					!uri.startsWith('http://') &&
+					!uri.startsWith('content://') &&
+					!uri.startsWith('data:')
+				) {
+					uri = this.props.store.FileURL + uri
+				}
+				return (
+					<div class='message-quote d-flex' onClick={() => this.scrollToSourceEvent(this.props.ev)}>
+						<img src={uri} class='message-quote-inner-img' />
+						<div class='message-quote-inner'>
+							<div class='message-quote-title'>{sendername}</div>
+							<div class='message-quote-content'>[{this.props.t('image')}]</div>
+						</div>
+					</div>
+				)
+			} else {
+				return (
+					<div class='message-quote' onClick={() => this.scrollToSourceEvent(this.props.ev)}>
+						<div class='message-quote-title'>{sendername}</div>
+						<div class='message-quote-content'>
+							{`[File] `}
+							{att.name}
+						</div>
+					</div>
+				)
+			}
+		}
+
+		let format = sb.get(this.props.ev, 'data.message.format', 'plaintext')
+		let block = sb.get(this.props.ev, 'data.message.block')
+
+		let text = sb.get(this.props.ev, 'data.message.text')
+		if (block) text = sb.blockToText(block)
+
+		return (
+			<div class='message-quote' onClick={() => this.scrollToSourceEvent(this.props.ev)}>
+				<div class='message-quote-title'>{sendername}</div>
+				<div class='message-quote-content'>{text}</div>
+			</div>
+		)
+	}
+
+	scrollToSourceEvent(ev) {
+		let $ele = document.querySelector(`.convo-event[data-ev-id=${ev.id}]`)
+		if ($ele && typeof $ele.scrollIntoViewIfNeeded === 'function') {
+			$ele.scrollIntoViewIfNeeded()
+		}
+		this.props.onFocusSourceEventFromQuote(ev)
+	}
+
+	getSenderName = (ev) => {
+		let bytype = sb.get(ev, 'by.type')
+		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 (byid.startsWith('at')) return sb.getAgentDisplayName(acc, this.props.store.matchAgent(byid))
+		if (bytype === 'bot') {
+			let bot = this.props.store.matchBot()[byid]
+			if (!bot) return 'Bot'
+			return bot.fullname || 'Bot'
+		}
+		if (byid === 'system' || bytype === 'dummy' || bytype === 'workflow') return acc.name || 'system'
+		return acc.name
+	}
+}

package/src/chatbox/Rating.js

@@ -34,6 +34,11 @@ export default class Rating extends Com {
 		this.props.store.onConvoEvent(this, (ev) => {
 			var cid = sb.convoOfEv(ev)
 			if (cid !== this.props.cid) return
+			if (!this.state.hide && ev.type === 'conversation_rated') {
+				// close if already rated in another tab
+				this.close()
+				return
+			}
 			if (this.shoudDisplay()) this.open()
 		})
 

package/src/chatbox/TextMessage.js

@@ -4,8 +4,14 @@ import {Com} from '../common.js'
 import {h} from 'preact'
 import Emoji from './Emoji.js'
 import Time from './time.js'
+import QuoteMessage from './QuoteMessage.js'
 
 export default class TextMessage extends Com {
+	constructor(props) {
+		super(props)
+		this.state = {focused: false}
+	}
+
 	renderTime() {
 		return null
 		if (!this.props.showTime && !this.props.isLast && !this.props.isFirst) return null
@@ -17,6 +23,25 @@ export default class TextMessage extends Com {
 		)
 	}
 
+	focusSourceEventFromQuote(ev) {
+		if (ev.id !== this.props.ev.id) return
+		let fields = sb.get(ev, 'data.message.fields') || []
+		let attachmentIndexField = sb.find(fields, (f) => f.key === 'attachment_index')
+		let attachmentIndex = sb.get(attachmentIndexField, 'value')
+		try {
+			attachmentIndex = JSON.parse(attachmentIndex)
+		} catch (err) {
+			attachmentIndex = undefined
+		}
+
+		if (attachmentIndex !== undefined) return // this is a quote for image or video, not for text
+		this.setState({focused: true})
+		if (this.focusTimeout) clearTimeout(this.focusTimeout)
+		this.focusTimeout = setTimeout(() => {
+			this.setState({focused: false})
+		}, 3000)
+	}
+
 	render() {
 		var format = sb.get(this.props.ev, 'data.message.format', 'plaintext')
 		let block = sb.get(this.props.ev, 'data.message.block')
@@ -66,15 +91,38 @@ export default class TextMessage extends Com {
 		})
 
 		if (sb.size(tags) === 0) return null
-		if (byType === 'agent')
+		let isDeleted = sb.get(this.props.ev, 'data.message.deleted')
+
+		let attachments = sb.get(this.props.ev, 'data.message.attachments', [])
+		let quote = sb.find(attachments, (att) => att.type === 'quote')
+
+		if (byType === 'agent') {
+			let cls = 'message-agent message-text--agent'
+			if (isDeleted) {
+				tags = this.props.t('recalled_message')
+				cls += ' message-text--deleted'
+			}
+			if (this.state.focused) cls += ' just-focused'
+
 			return (
-				<div class='message-agent message-text--agent' title={t}>
+				<div class={cls} title={t}>
+					{quote && (
+						<QuoteMessage
+							ev={sb.get(quote, 'quote')}
+							t={this.props.t}
+							store={this.props.store}
+							onFocusSourceEventFromQuote={this.props.onFocusSourceEventFromQuote}
+						/>
+					)}
 					{tags}
 					{this.renderTime()}
 				</div>
 			)
+		}
 		let msgcls = 'message-user message-text--user'
 		if (this.props.ev._error) msgcls += ' message-user--error'
+		if (this.state.focused) msgcls += ' just-focused'
+
 		return (
 			<div class={msgcls} title={t}>
 				{tags}

package/src/chatbox/Widget.js

@@ -48,6 +48,54 @@ export default class Widget extends Com {
 		if (!this.props.store.isMobile()) this.focusInput()
 
 		this.updateFormDataFields()
+		this.debugRTAgentMessageSent()
+	}
+
+	findMissingRTMessage = async (started) => {
+		let messageSentDict = this.props.store.listAgentRealtimeMessageSent()
+
+		let res1 = await this.props.store.sbzListConversations()
+		let conversions = sb.get(res1, 'body.conversations') || []
+		let cids = sb.map(conversions, (convo) => convo.id)
+
+		let promises = sb.map(cids, (cid) => this.props.store.sbzListMessages(cid))
+		let msgReses = await Promise.all(promises)
+		sb.map(msgReses, (msgRes) => {
+			let messages = sb.get(msgRes, 'body') || []
+			sb.map(messages, (ev) => {
+				if (ev.created < started) return
+				//if (ev.created > Date.now() - 30_000) return
+				if (ev.type !== 'message_sent') return
+				if (sb.get(ev, 'by.type') === 'user') return
+
+				console.log('check ev pass condition', ev)
+				if (!messageSentDict[ev.id]) {
+					this.props.store.sendBugReport(
+						'[WIDGET ' + accid + '] Missing agent message sent evid ' + ev.id + ', cid ' + sb.convoOfEv(ev),
+					)
+				}
+			})
+		})
+	}
+
+	debugRTAgentMessageSent = async () => {
+		try {
+			let debugAccountIds = this.props.store.matchDebugAccountIds()
+			let accid = sb.get(this.props.store.matchAccount(), 'id')
+			if (!debugAccountIds.includes(accid)) return
+
+			console.log('START check RT agent message with BE source')
+			let started = Date.now()
+			this.findMissingRTMessage(started)
+
+			for (let i = 0; i < 100_000; i++) {
+				await sb.sleep(120_000)
+				console.log('LOOP check RT agent message with BE source', i)
+				this.findMissingRTMessage(started)
+			}
+		} catch (err) {
+			this.props.store.sendBugReport(`debugRTAgentMessageSent ERROR ${err.stack}`)
+		}
 	}
 
 	applyMessage(text) {
@@ -799,6 +847,9 @@ export default class Widget extends Com {
 			this.setState({creating: true})
 			let botid = cid.split('_')[0].slice(7) // 6 = len(cslight)
 			let oldconvo = this.props.store.matchConvo(this.props.cid) || {}
+			let greeting_msg = sb.find(oldconvo.events, (ev) => {
+				return ev.type == 'message_sent' && ev.by && ev.by.type == 'bot'
+			})
 			const {convo, error} = await this.props.store.startConvo({
 				state: 'active', // so it would not run through rule
 				locale: this.props.t.locale(),
@@ -806,6 +857,7 @@ export default class Widget extends Com {
 				members: [{type: 'bot', id: botid, bot_version: oldconvo.bot_version}],
 				initial_by: this.props.store.matchUser().id,
 				is_testing: oldconvo.is_testing,
+				greeting_message: greeting_msg,
 			})
 			if (_creating != this._creating) return // outdated
 			if (error) {

package/src/store/api.js

@@ -39,6 +39,7 @@ export default class {
 
 		this.FileURL = FileURL
 		this.ApiURL = ApiURL
+		this.bugReq = ajax.setBaseUrl('https://api5.subiz.com.vn/4.1').setContentType('text/plain')
 		this.api41 = ajax
 			.setBaseUrl('https://api.sbz.vn/4.1')
 			.withCredentials(true)
@@ -229,6 +230,8 @@ export default class {
 		return {error: 'invalid_auth'}
 	}
 
+	sendBugReport = (str) => this.bugReq.post('/bugs', str)
+
 	listConversations = (_) =>
 		this.apireq
 			.addQuery('user_id', this.uid)