@subiz/widget-v4 4.1.210 → 4.1.211

package/src/chatbox/block.js

@@ -2,6 +2,7 @@ import sb from '../util/index.js'
 import Emoji from './Emoji.js'
 import {Com} from '../common.js'
 import {h} from 'preact'
+import {safeUrl} from '../util/url.js'
 
 export default class Block extends Com {
 	constructor(props) {
@@ -43,9 +44,8 @@ export default class Block extends Com {
 		}
 
 		if (block.type == 'heading') {
-			if (block.level < 1) block.level = 1
-			if (block.level > 6) block.level = 6
-			ele.tag = 'h' + block.level
+			let level = Math.max(1, Math.min(6, Math.floor(Number(block.level) || 1)))
+			ele.tag = 'h' + level
 		}
 
 		if (block.type == 'paragraph' || block.type == 'section' || block.type == 'div') ele.tag = 'div'
@@ -61,8 +61,10 @@ export default class Block extends Com {
 				}
 			}
 
-			if (block.underline) ele.Style += 'text-decoration:underline;'
-			if (block.strike_through) ele.Style += 'text-decoration: line-through;'
+			let decorations = []
+			if (block.underline) decorations.push('underline')
+			if (block.strike_through) decorations.push('line-through')
+			if (decorations.length) ele.style += 'text-decoration: ' + decorations.join(' ') + ' !important;'
 		}
 
 		if (block.type == 'dynamic-field') {
@@ -72,7 +74,7 @@ export default class Block extends Com {
 
 		if (block.type == 'link') {
 			ele.tag = 'a'
-			ele.attrs['href'] = block.href
+			ele.attrs['href'] = safeUrl(block.href)
 			ele.attrs['target'] = block.target
 			ele.attrs['title'] = block.title
 		}
@@ -80,15 +82,15 @@ export default class Block extends Com {
 			ele.tag = 'span'
 			ele.class = 'mention'
 
-			let id = (block.attrs.id = '')
+			let id = sb.get(block, 'attrs.id', '')
 
-			if (block.attrs.id == '*' || block.attrs.id == 'all') {
-				ele.text = '@' + this.$t('all')
+			if (id == '*' || id == 'all') {
+				ele.text = '@' + (this.props.t ? this.props.t('all') : 'all')
 			}
 
-			if (id.startsWith('ag')) {
-				let ag = store.matchAgent(id)
-				let name = sb.getAgentDisplayName(ag, insert.mention.fullname)
+			if (typeof id === 'string' && /^(ag|at)/.test(id) && this.props.store) {
+				let ag = this.props.store.matchAgent(id)
+				let name = sb.getAgentDisplayName(this.props.store.matchAccount(), ag)
 				ele.text = '@' + name
 			}
 		}
@@ -96,19 +98,16 @@ export default class Block extends Com {
 		if (block.type == 'emoji') {
 			let code = ''
 			if (sb.size(block.attrs) > 0) code = block.attrs['code']
-			if (code == '') code = block.Text
+			if (!code) code = block.text || block.Text
 			if (code != '') {
 				ele.tag = 'Emoji' //
 				ele.attrs['emojiCode'] = code
 			}
 		}
 
-		if (block.type == 'table') {
-			return null
-		}
 		if (block.type === 'image') {
 			ele.tag = 'img'
-			ele.attrs['src'] = sb.get(block, 'image.url')
+			ele.attrs['src'] = safeUrl(sb.get(block, 'image.url'), true)
 			ele.attrs['alt'] = block.alt_text
 		}
 		if (block.type == 'hard_break') {
@@ -131,9 +130,11 @@ export default class Block extends Com {
 					) {
 						url = '//' + url
 					}
+					url = safeUrl(url)
+					if (!url) return tag.text
 
 					return (
-						<a href={url} target='_blank' onClick={(e) => this.props.onLink(e, url)}>
+						<a href={url} target='_blank' rel='noopener noreferrer' onClick={(e) => this.props.onLink && this.props.onLink(e, url)}>
 							{tag.text}
 						</a>
 					)
@@ -148,11 +149,13 @@ export default class Block extends Com {
 		}
 		switch (ele.tag) {
 			case 'img':
+				if (!ele.attrs.src) return block.alt_text || null
 				return (
 					<a
 						class={this.props.textMessage ? 'message-text-inline-image-wrapper' : ''}
 						href={sb.get(ele, 'attrs.src')}
 						target='_blank'
+						rel='noopener noreferrer'
 					>
 						<img
 							class={this.props.textMessage ? 'message-text-inline-image' : ''}
@@ -186,22 +189,25 @@ export default class Block extends Com {
 			case 'li':
 				return <li class={this.props.textMessage ? 'text-message-li' : ''}>{$body}</li>
 			case 'span':
-				return <span>{$body}</span>
+				return <span class={ele.class} style={ele.style}>{$body}</span>
 			case 'em':
-				return <em>{$body}</em>
+				return <em style={ele.style}>{$body}</em>
 			case 'b':
-				return <b>{$body}</b>
+				return <b style={ele.style}>{$body}</b>
 			case 'hr':
 				return <hr />
 			case 'br':
 				return <br />
 			case 'a':
+				if (!ele.attrs.href) return <span>{$body}</span>
 				return (
 					<a
 						class={this.props.textMessage ? 'message-text-link' : ''}
 						href={ele.attrs['href']}
 						target={this.props.textMessage ? '_blank' : ele.attrs['target']}
 						title={ele.attrs['title']}
+						rel='noopener noreferrer'
+						onClick={(e) => this.props.onLink && this.props.onLink(e, ele.attrs.href)}
 					>
 						{$body}
 					</a>
@@ -210,15 +216,11 @@ export default class Block extends Com {
 				return <Emoji emojiCode={ele.attrs['emojiCode']} />
 		}
 
-		return null
+		// Unknown containers should retain their readable content.
+		return $body
 	}
 
 	render() {
 		return this.renderBlock(this.props.block)
 	}
 }
-
-function absLink(url) {
-	if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('//')) return 'http://' + url
-	return url
-}

package/src/chatbox/conversation-history.js

@@ -0,0 +1,37 @@
+import sb from '../util/index.js'
+
+// Creation order is stable even when an older conversation receives a new reply.
+export function conversationHistory(store, cid) {
+	if (!cid) return []
+	const current = store.matchConvo(cid)
+	if (!current || !current.created) return [current || {id: cid}]
+	const conversations = sb.map(store.matchConvo('*'))
+	const unique = new Map()
+	for (const convo of conversations) {
+		if (!convo || !convo.id || convo.id === cid || convo.id.startsWith('cslight')) continue
+		if (current.account_id && convo.account_id !== current.account_id) continue
+		if (convo.created && sb.getMs(convo.created) < sb.getMs(current.created)) unique.set(convo.id, convo)
+	}
+	return [...unique.values()].sort((a, b) => sb.getMs(a.created) - sb.getMs(b.created) || a.id.localeCompare(b.id)).concat(current)
+}
+
+export function conversationEvents(store, convo) {
+	const events = sb.orderBy(sb.map(store.listEvents(convo.id)), 'created', 'asc')
+	const unique = new Map()
+	for (const ev of events) {
+		const key = conversationEventKey(ev)
+		const previous = unique.get(key)
+		if (!previous) unique.set(key, ev)
+		// History can arrive before the optimistic event is reconciled by the socket.
+		// Prefer the confirmed payload while keeping the original message position.
+		else if (previous.id === previous.source_event_id && ev.id !== ev.source_event_id) unique.set(key, {...ev, created: previous.created})
+	}
+	return [...unique.values()].map(ev => ({ev}))
+}
+
+export function conversationEventKey(ev) {
+	// A send can also produce conversation_joined with the same source_event_id.
+	// Only message copies use that ID for optimistic acknowledgement reconciliation.
+	const id = ev.type === 'message_sent' ? ev.source_event_id || ev.id : ev.id
+	return ev.type + ':' + id
+}

package/src/chatbox/event-layout.js

@@ -0,0 +1,72 @@
+import sb from '../util/index.js'
+
+//_mode = lead
+export function processEvents(convo, events) {
+	events = events.filter((event) => visibleEvent(event.ev))
+	if (events.length < 1) return
+
+	// show time for the first msg sent
+	// insert time
+	var lastAgentEvent
+	for (var i = 1; i < events.length; i++) {
+		let curEvent = events[i]
+		let lastEvent = events[i - 1]
+		if (sb.get(curEvent, 'ev.by.type') != 'user' && !curEvent.is_typing) {
+			lastAgentEvent = curEvent
+		}
+
+		if (visibleEvent(curEvent.ev)) {
+			let elapsedSec = sb.unixSec(curEvent.ev.created) - sb.unixSec(lastEvent.ev.created)
+			if (elapsedSec > 300) curEvent.show_time = true // 5 mins
+		}
+	}
+
+	if (lastAgentEvent) lastAgentEvent.show_time = true
+
+	for (var i = 0; i < events.length; i++) {
+		let curEvent = events[i]
+		if (sb.get(curEvent, 'ev.type') === 'message_sent') {
+			curEvent.show_time = true
+			break
+		}
+	}
+
+	let lastMsgSentIdx = -1
+	// insert lead
+	for (var i = 0; i < events.length; i++) {
+		let curEvent = events[i]
+		let prevEvent = events[i - 1]
+		let nextEvent = events[i + 1]
+
+		if (curEvent.ev.type === 'message_sent') {
+			// ignore fake typing message_sent event at last
+			lastMsgSentIdx = i
+			curEvent.mode = 'lead'
+			if (
+				sb.get(prevEvent, 'ev.type') === 'message_sent' &&
+				sb.get(prevEvent, 'ev.by.id') === sb.get(curEvent, 'ev.by.id')
+			) {
+				curEvent.mode = 'follow'
+			}
+			if (
+				sb.get(nextEvent, 'ev.type') !== 'message_sent' ||
+				sb.get(nextEvent, 'ev.by.id') !== sb.get(curEvent, 'ev.by.id')
+			) {
+				curEvent.is_end = true
+			}
+			continue
+		}
+	}
+	if (lastMsgSentIdx > -1) {
+		events[lastMsgSentIdx].is_last_message_send = true
+	}
+}
+
+function visibleEvent(ev) {
+	let type = sb.get(ev, 'type')
+	if (type === 'message_sent') return true
+	if (type === 'conversation_state_updated') {
+		return sb.get(ev, 'data.conversation.state') == 'ended'
+	}
+}
+

package/src/chatbox/greeting.js

@@ -0,0 +1,13 @@
+import sb from '../util/index.js'
+
+export function widgetGreeting(chatbox, t, created = sb.Date.now()) {
+	const greeting = sb.get(chatbox, 'greeting', {})
+	const localized = t.i18n ? t.i18n(greeting.greeting || {}) : ''
+	const text = sb.trim(localized) || sb.trim(greeting.message) || sb.trim(t('team_intro')) || t('empty_convo_text')
+	return {
+		id: 'widget-greeting-' + sb.randomString(24),
+		type: 'message_sent', created,
+		by: {type: 'system', id: 'system', ...(greeting.agent_id ? {display_type: 'agent', display_id: greeting.agent_id} : {})},
+		data: {message: {text, format: 'plaintext'}},
+	}
+}

package/src/common.js

@@ -5,15 +5,21 @@ export class Com extends Component {
 	constructor(props) {
 		super(props)
 		this._isMounted = true
-		sb.setTimeout(() => {
-			if (this.componentWillUnmount) {
-				let old = this.componentWillUnmount.bind(this)
-				this.componentWillUnmount = () => {
-					old()
-					this._isMounted = false
-				}
-			}
-		}, 10)
+		this._subscriptions = new Set()
+		const onUnmount = this.componentWillUnmount
+		this.componentWillUnmount = () => {
+			if (!this._isMounted) return
+			this._isMounted = false
+			for (const unsubscribe of this._subscriptions) unsubscribe()
+			this._subscriptions.clear()
+			if (onUnmount) onUnmount.call(this)
+		}
+	}
+
+	onDispose(cleanup) {
+		if (this._isMounted) this._subscriptions.add(cleanup)
+		else cleanup()
+		return () => this._subscriptions.delete(cleanup)
 	}
 }
 

package/src/lib.js

@@ -1,6 +1,7 @@
 import Store from './store/store.js'
 import sb from './util/index.js'
 import PluginMgr from './plugin.js'
+import {normalizeCdpEvent} from './util/event.js'
 
 /*
 var $link = document.createElement('link')
@@ -14,6 +15,7 @@ sb.preloadWebfonts(['Inter'], [400, 500])
 class Widget {
 	constructor(ApiURL, FileURL, RealtimeURL, inmem, fake) {
 		this.impressionTokens = {}
+		this._containerTimers = new Set()
 		this.domGate = new sb.Gate()
 		this.store = new Store(ApiURL, FileURL, RealtimeURL, inmem, fake)
 
@@ -37,6 +39,17 @@ class Widget {
 		cb()
 	}
 
+	watchContainer(container) {
+		const manager = this.pluginMgr
+		const timer = sb.setInterval(() => {
+			if (!this.store.isDead() && container && container.isConnected) return
+			manager.destroy()
+			sb.clearInterval(timer)
+			this._containerTimers.delete(timer)
+		}, 1000)
+		this._containerTimers.add(timer)
+	}
+
 	setAIDevMode(mode) {
 		this.store.setAIDevMode(mode)
 	}
@@ -60,12 +73,7 @@ class Widget {
 		if (!$container) $container = document.body
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = sb.setInterval(() => {
-			// check if the dom is deleted
-			if ($container && $container.isConnected) return
-			this.pluginMgr.destroy()
-			sb.clearInterval(clean)
-		}, 1000)
+		this.watchContainer($container)
 		this.domGate.open()
 		return user
 	}
@@ -92,12 +100,7 @@ class Widget {
 		if (!$container) $container = document.body || document
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = sb.setInterval(() => {
-			// check if the dom is deleted
-			if ($container && $container.isConnected) return
-			this.pluginMgr.destroy()
-			sb.clearInterval(clean)
-		}, 1000)
+		this.watchContainer($container)
 		this.domGate.open()
 		return user
 	}
@@ -111,12 +114,7 @@ class Widget {
 		if (!$container) $container = document.body || document
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = sb.setInterval(() => {
-			// check if the dom is deleted
-			if ($container && $container.isConnected) return
-			this.pluginMgr.destroy()
-			sb.clearInterval(clean)
-		}, 1000)
+		this.watchContainer($container)
 		this.domGate.open()
 		cb && cb(outmask)
 		return outmask
@@ -144,12 +142,7 @@ class Widget {
 		if (!$container) $container = document.body || document
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = sb.setInterval(() => {
-			// check if the dom is deleted
-			if ($container && $container.isConnected) return
-			this.pluginMgr.destroy()
-			sb.clearInterval(clean)
-		}, 1000)
+		this.watchContainer($container)
 		this.domGate.open()
 		if (typeof sbz_info != 'undefined') sbz_info.set_account_done = sb.Date.now()
 
@@ -181,7 +174,7 @@ class Widget {
 
 	async createTicket(ticket) {
 		await this.domGate.entry()
-		return this.createTicket(ticket)
+		return this.store.createTicket(ticket)
 	}
 
 	expandWidget(view, convo) {
@@ -274,7 +267,7 @@ class Widget {
 		if (req.bot_id) {
 			let botid = req.bot_id
 			delete req.bot_id
-			if (!sb.find(members, (m) => b.id == botid)) {
+			if (!sb.find(members, (m) => m.id == botid)) {
 				members.push({type: 'bot', id: botid, bot_version: req.bot_version})
 			}
 		}
@@ -343,6 +336,9 @@ class Widget {
 	}
 
 	unload() {
+		for (const timer of this._containerTimers) sb.clearInterval(timer)
+		this._containerTimers.clear()
+		this.subs = []
 		// this.store.overridePlugin([])
 		if (this.pluginMgr) this.pluginMgr.destroy()
 		this.store.destroy()
@@ -403,15 +399,6 @@ class Widget {
 	}
 }
 
-function normalizeCdpEvent(type, payload, options) {
-	if (type && typeof type === 'object') return type
-
-	let data = {type: type}
-	if (payload !== undefined) data.payload = payload
-	if (options && typeof options === 'object') data = Object.assign({}, options, data)
-	return data
-}
-
 // for debugging purpose
 window.__sbz_WIDGET = Widget
 export default Widget

package/src/plugin.js

@@ -4,7 +4,6 @@ import {h, render, createRef} from 'preact'
 
 // const LoadChatbox = () => import(/*webpackChunkName: "chatbox" */ './chatbox/main.js')
 import Chatbox from './chatbox/main.js'
-const LoadContact = () => import(/*webpackChunkName: "contact" */ './contact/contact.js')
 const LoadPopup = () => import(/*webpackChunkName: "popup" */ './popup/popup.js')
 const LoadNotif = () => import(/*webpackChunkName: "notif" */ './notif/notif.js')
 
@@ -59,7 +58,6 @@ function Plugin(plugin, store, $container, lib) {
 
 	// let Chatbox = null
 	let Popup = null
-	let Contact = null
 	let Notif = null
 
 	var showCurrentChatbox = (p) => lib.showWidget(p)
@@ -107,11 +105,6 @@ function Plugin(plugin, store, $container, lib) {
 			)
 		}
 
-		if (plugin.type === 'contact') {
-			if (!Contact) Contact = (await LoadContact()).default
-			render(<Contact destroy={_destroy} t={this.t} plugin={plugin} store={store} ref={_ref} />, $div)
-		}
-
 		domGate.open()
 	}
 
@@ -123,10 +116,11 @@ function Plugin(plugin, store, $container, lib) {
 
 	var _destroy = false
 	this.destroy = () => {
+		if (_destroy) return
 		_destroy = true
 		render(null, $div) // trigger unmount
 
-		$div.parentNode.removeChild($div)
+		if ($div.parentNode) $div.parentNode.removeChild($div)
 		// remove div
 	}
 
@@ -229,14 +223,15 @@ export default class PluginMgr {
 		this.pluginM = {}
 
 		this._destroy = false
+		this._subscriptions = []
 
-		lib.store.onHighlight({_isMounted: true}, (id, comref) => {
+		this._subscriptions.push(lib.store.onHighlight({_isMounted: true}, (id, comref) => {
 			let plugin = this.pluginM[id]
 			if (!plugin) return
 			plugin.highlight(comref)
-		})
+		}))
 
-		lib.store.onUpdate({_isMounted: true}, () => {
+		this._subscriptions.push(lib.store.onUpdate({_isMounted: true}, () => {
 			if (this._destroy) return
 			let pluginM = this.lib.store.matchPlugin()
 			let foundchatbox = false
@@ -259,7 +254,7 @@ export default class PluginMgr {
 				this.pluginM[id].destroy()
 				delete this.pluginM[id]
 			})
-		})
+		}))
 
 		let pluginM = this.lib.store.matchPlugin()
 		if (typeof sbz_info != 'undefined') sbz_info['plugins'] = pluginM
@@ -351,11 +346,14 @@ export default class PluginMgr {
 	}
 
 	destroy() {
+		if (this._destroy) return
+		this._destroy = true
+		for (const unsubscribe of this._subscriptions) unsubscribe()
+		this._subscriptions = []
 		sb.map(this.pluginM, (conf, id) => {
 			conf.destroy()
 			delete this.pluginM[id]
 		})
 
-		this._destroy = true
 	}
 }

package/src/popup/popup.js

@@ -63,7 +63,7 @@ export default class Popup extends Com {
 			for (var i = 0; i < fonts.length; i++) {
 				try {
 					if (document.fonts.check('normal 16px ' + fonts[i])) ready[fonts[i]] = true
-					if (Object.keys(readycount) == fonts.length) return
+					if (Object.keys(ready).length == fonts.length) return
 				} catch (e) {}
 			}
 			await sb.sleep(200)

package/src/store/api.js

@@ -39,7 +39,6 @@ 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)
@@ -230,7 +229,6 @@ export default class {
 		return {error: 'invalid_auth'}
 	}
 
-	sendBugReport = (str) => this.bugReq.post('/bugs', str)
 
 	listConversations = (_) =>
 		this.apireq

package/src/store/api_fake.js

@@ -208,6 +208,7 @@ function makeFakeMessages(accid, convoid, userid, agentid) {
 		},
 		{
 			id: 'evqyiyjmzatvtgpdmmpzwnwgn',
+			source_event_id: 'wrueysyjbhqrkiwhsejpqrwqrdkkyaibajdw',
 			account_id: accid,
 			created: 1616213202685,
 			type: 'message_sent',
@@ -217,7 +218,6 @@ function makeFakeMessages(accid, convoid, userid, agentid) {
 					conversation_id: convoid,
 					text: 'Xin chào',
 					format: 'plaintext',
-					idempotency_key: 'wrueysyjbhqrkiwhsejpqrwqrdkkyaibajdw',
 					integration_id: inteid,
 					pongs: [{member_id: userid, type: 'seen', created: 1616213203068}],
 				},

package/src/store/attachments.js

@@ -0,0 +1,21 @@
+// Keep upload errors across the entire batch. A later successful upload must
+// not turn an incomplete message into a successful one.
+export async function uploadAttachments(attachments, upload) {
+	let error, errorMessage
+	for (const attachment of attachments) {
+		try {
+			const result = await upload(attachment._file)
+			if (result.body && result.body.code === 'invalid_field_size') {
+				errorMessage = 'cannot_send_too_big_file'
+			}
+			if (result.error || !result.url) {
+				error = error || result.error || 'upload_failed'
+				continue
+			}
+			attachment.url = result.url
+		} catch (err) {
+			error = error || err
+		}
+	}
+	return {error, errorMessage}
+}

package/src/store/chain.js

@@ -111,6 +111,17 @@ export default class Chain {
 		return {}
 	}
 
+	merge(chain, items) {
+		if (this.dead) return
+		const cached = this.cache[chain] || {}
+		for (const item of items) {
+			const node = {...item, chain, full_id: chain + ':' + item.id}
+			cached[item.id] = node
+			this.db.put('items', node.full_id, node)
+		}
+		this.cache[chain] = cached
+	}
+
 	del(chain, id) {
 		if (this.dead) return
 		let inmemItemM = this.cache[chain] || {}
@@ -127,7 +138,7 @@ export default class Chain {
 	async reload(chain, api) {
 		if (this.dead) return
 
-		let top = maxIndex(this.listM(chain)) || {}
+		let top = maxIndex(this.cache[chain] || {}) || {}
 		let topindex = top.index
 		if (!topindex) topindex = Date.now()
 		var lastanchor = ''
@@ -142,8 +153,17 @@ export default class Chain {
 			})
 			if (newItems.length === 0 || newanchor === lastanchor) break // out of item
 
+			let minindexitem = minIndex(fetchedItems) || {}
+			// try to join old data
+			if (minindexitem.index <= topindex) {
+				// successfully joined, reuse anchor
+
+				lastanchor = this.anchorCache[chain] || newanchor
+				break
+			}
+
 			// still cannot join
-			if (fetchedItems.length >= 200) {
+			if (size(fetchedItems) >= 200) {
 				// fetch too much but still cannot merge with old data
 				// clear old data and write new data
 
@@ -155,22 +175,15 @@ export default class Chain {
 				})
 				this.db.removes('items', removeids)
 				this.cache[chain] = {}
+				lastanchor = newanchor
 				break
 			}
 
-			let minindexitem = minIndex(fetchedItems) || {}
-			// try to join old data
-			if (minindexitem.index <= topindex) {
-				// successfully joined, reuse anchor
 
-				lastanchor = this.anchorCache[chain] || newanchor
-				break
-			}
 			lastanchor = newanchor
 		}
 
-		for (var i = 0; i < Object.keys(fetchedItems).length; i++) {
-			let item = fetchedItems[Object.keys(fetchedItems)[i]]
+		for (const item of Object.values(fetchedItems)) {
 			this.db.put('items', item.full_id, item)
 			this.cache[item.chain] = this.cache[item.chain] || {}
 			this.cache[item.chain][item.id] = item
@@ -210,7 +223,7 @@ function maxIndex(obj) {
 		}
 	}
 
-	return obj[keys[maxKey]]
+	return obj[maxKey]
 }
 
 function map(collection, predicate) {