@subiz/widget-v4 4.0.98 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.98",
+	"version": "4.1.1",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -19,22 +19,22 @@
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
 		"less-loader": "^11.1.0",
-		"marked": "^4.2.3",
+		"marked": "^4.2.4",
 		"preact": "^10.11.3"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.19.3",
-		"@babel/core": "^7.20.2",
+		"@babel/core": "^7.20.5",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-transform-react-jsx": "^7.19.0",
 		"@babel/preset-env": "^7.20.2",
 		"babel-loader": "^9.1.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"puppeteer": "^19.3.0",
+		"puppeteer": "^19.4.0",
 		"webpack": "^5.75.0",
 		"webpack-bundle-analyzer": "^4.7.0",
-		"webpack-cli": "^5.0.0",
+		"webpack-cli": "^5.0.1",
 		"webpack-dev-server": "^4.11.1"
 	}
 }

package/src/chatbox/Header.js

@@ -187,7 +187,8 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 		return (
 			<div
 				class={`widget-header--wrap-button-back ${unreadcount ? 'widget-header--has-convo-unred' : ''}`}
-				onClick={(e) => this.onBackClick(e)}>
+				onClick={(e) => this.onBackClick(e)}
+			>
 				<div class='widget-header--button-back' data-tooltip={this.props.t('menu_back')}></div>
 				{$unreadcount}
 			</div>
@@ -202,7 +203,8 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 				class='widget-header--button widget-header--button-close'
 				data-tooltip={this.props.t('close')}
 				data-tooltip-position='bottom'
-				onClick={(e) => this.onCloseClick(e)}>
+				onClick={(e) => this.onCloseClick(e)}
+			>
 				<span class='widget-header--button-close-icon'></span>
 			</div>
 		)
@@ -227,4 +229,8 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 	}
 }
 
-let getJoinedNameMember = (agents) => sb.map(agents, (agent) => agent.name).join(', ')
+let getJoinedNameMember = (agents) => {
+	agents = sb.filter(agents, (agent) => sb.trim(agent.fullname))
+	if (!agents.length) return null
+	return sb.map(agents, (agent) => agent.fullname).join(', ')
+}

package/src/chatbox/ShadowDomRoot.js

@@ -14,7 +14,7 @@ export default class ShadowDomRoot extends Com {
 
 	update (html) {
 		this.shadowRoot.innerHTML = `<style type="text/css">
-body { font-family: 'Roboto', sans-serif!important; font-size: 14px!important; line-height: 20px; overflow-y: hidden; margin:0 }
+body { font-family: 'Inter', sans-serif!important; font-size: 14px!important; line-height: 20px; overflow-y: hidden; margin:0 }
 h{ font-size: 14/18px!important; }
 a { text-decoration: none;}
 img { max-width: 100%; display: block; margin: 10px auto; }

package/src/chatbox/Widget.js

@@ -875,18 +875,13 @@ export default class Widget extends Com {
 
 		var $you = null
 		if (convo.lastSenderType === 'user') {
-			$you = <span class='yourmessage'>{this.props.t('you')}:</span>
+			$you = <span>{this.props.t('you')}:</span>
 		}
 
 		let seen = sb.isConvoSeen(convo, this.props.store.matchUser().id)
-		var lastmsg = this.renderMessagePreview(convo.last_message_sent || {data: {message: sb.get(convo, 'last_message')}})
-
-		var time =
-			sb.getMs(sb.get(convo, 'last_message_sent.created')) ||
-			sb.getMs(sb.get(convo, 'last_sent.created')) ||
-			sb.getMs(convo.created)
-		var $tim = <Time ago time={time} key={time} short />
+		var lastmsg = this.renderMessagePreview(convo.last_message_sent)
 
+		var time = sb.getMs(sb.get(convo, 'last_message_sent.created')) || sb.getMs(convo.created)
 		let $unread = seen ? null : <div class='convo-list--item-unread'></div>
 		if (convo.state === 'ended') {
 			$unread = (
@@ -903,7 +898,9 @@ export default class Widget extends Com {
 			<div class='convo-list--convo-last-info'>
 				<div class='d-flex flex-row'>
 					<div class='convo-list--convo-name'>{name}</div>
-					<div class='convo-list--convo-time'>{$tim}</div>
+					<div class='convo-list--convo-time'>
+						<Time ago time={time} key={time} short />
+					</div>
 				</div>
 
 				<div class='d-flex flex-row'>
@@ -925,7 +922,6 @@ export default class Widget extends Com {
 
 	renderMessagePreview(ev) {
 		let defmsg = this.props.t('sent_you_a_message')
-
 		let message = sb.get(ev, 'data.message.text')
 		var format = sb.get(ev, 'data.message.format')
 

package/src/lib.js

@@ -3,11 +3,11 @@ import sb from './util/index.js'
 import PluginMgr from './plugin.js'
 
 var $link = document.createElement('link')
-$link.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'
+$link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'
 $link.rel = 'stylesheet'
 document.head.append($link)
 
-sb.preloadWebfonts(['Roboto'], [400, 500])
+sb.preloadWebfonts(['Inter'], [400, 500, 600])
 
 class Widget {
 	constructor(ApiURL, FileURL, RealtimeURL, inmem, fake) {
@@ -20,18 +20,6 @@ class Widget {
 		this.store.onConvoEvent({_isMounted: true}, (ev) => sb.map(this.subs, (sub) => sub(ev)))
 	}
 
-	setLang(obj) {
-		var xhttp = new XMLHttpRequest()
-		xhttp.open('GET', 'https://api.sbz.vn/4.0/oldlang', true)
-		xhttp.send()
-	}
-
-	toggleLangDebugMode() {
-		var xhttp = new XMLHttpRequest()
-		xhttp.open('GET', 'https://api.sbz.vn/4.0/oldlangdebug', true)
-		xhttp.send()
-	}
-
 	async waitReady(cb) {
 		await this.store.readyGate.entry()
 		cb()
@@ -146,10 +134,7 @@ class Widget {
 	version = () => '4.5'
 
 	setSetting = (setting) => this.store.setSetting({account_setting: setting})
-	getSetting = (_) => ({account_setting: sb.cloneDeep(this.store.matchAccountSetting())})
-
 	getUser = () => sb.parseJSON(sb.stringify(this.store.matchUser()))
-
 	setViewingProduct = (p) => this.store.linkProduct(p)
 	getViewingProduct = () => this.store.getLinkedProduct()
 
@@ -160,6 +145,11 @@ class Widget {
 		return this.pluginMgr.setCurrentChatboxLocale(locale)
 	}
 
+	async setLanguage(locale) {
+		await this.domGate.entry()
+		return this.pluginMgr.setCurrentChatboxLocale(locale)
+	}
+
 	async setPluginLocale(id, locale) {
 		await this.domGate.entry()
 		return this.pluginMgr.setPluginLocale(id, locale)

package/src/store/store.js

@@ -310,6 +310,7 @@ export default class Store {
 	readyGate = new sb.Gate()
 	convoGate = new sb.Gate(true)
 	reconnectGate = new sb.Gate(true)
+	wsGate = new sb.Gate(true)
 
 	// last widget screen
 	matchLastview = () => this.kv.match('lastview') || {}
@@ -646,6 +647,13 @@ export default class Store {
 	matchTrafficSource = () => this.kv.match('traffic_source')
 
 	async onWs(ev) {
+		await this.wsGate.entry()
+		this.wsGate.close()
+		await this._onWs(ev)
+		this.wsGate.open()
+	}
+
+	async _onWs(ev) {
 		if (!ev || !ev.type) return
 		ev.created = sb.getMs(ev.created)
 		if (ev.type === 'user_info_updated') {
@@ -660,12 +668,16 @@ export default class Store {
 		let user = this.kv.match('user') || {}
 		let cid = sb.convoOfEv(ev)
 		let convo
+
+		let alreadyFetched = false
 		if (cid) {
-			convo = this.matchConvo(cid)
+			convo = this.cache.match('convo_' + cid)
 			if (!convo || !convo.id) {
 				let {body: apiconvo, error} = await this.api.getConversation(cid)
 				if (!apiconvo) return
 				convo = apiconvo
+				alreadyFetched = true
+				this._setConvo(convo)
 			}
 		}
 
@@ -685,14 +697,14 @@ export default class Store {
 			if (me) {
 				await this.chain.reload(cid, (type, anchor, limit) => this.listmessageapi(type, anchor, limit))
 				this.markSync('events' + cid)
-
-				let {body: apiconvo} = await this.api.getConversation(cid)
-				if (apiconvo) {
-					convo = apiconvo
-					this._setConvo(convo)
+				if (!alreadyFetched) {
+					let {body: apiconvo} = await this.api.getConversation(cid)
+					if (apiconvo) {
+						convo = apiconvo
+						this._setConvo(convo)
+					}
+					this.pubsub.publish('account')
 				}
-
-				this.pubsub.publish('account')
 			}
 		}