@subiz/widget-v4 4.1.2 → 4.1.4

package/inject.js

@@ -173,10 +173,7 @@ function runCallButton(subiz) {
 				layout: 'classic',
 				classic_layout: {
 					picture_url: '',
-					message_style: {
-
-					},
-
+					message_style: {},
 				},
 				image_url: '',
 
@@ -478,8 +475,7 @@ function runPopup2(subiz) {
 									z_index: '2',
 								},
 								image: {
-									url:
-										'https://images.unsplash.com/photo-1534349735944-2b3a6f7a268f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MXxzZWFyY2h8NTJ8fGRpc2NvdW50fGVufDB8fHx8MTYyMDg3OTM2OQ&ixlib=rb-1.2.1&q=80&w=1080',
+									url: 'https://images.unsplash.com/photo-1534349735944-2b3a6f7a268f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MXxzZWFyY2h8NTJ8fGRpc2NvdW50fGVufDB8fHx8MTYyMDg3OTM2OQ&ixlib=rb-1.2.1&q=80&w=1080',
 								},
 								_id: 'xmfemhpj_0',
 							},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.2",
+	"version": "4.1.4",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -12,26 +12,27 @@
 		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
 		"@subiz/storage": "0.0.8",
-		"@subiz/wsclient": "^3.1.7",
+		"@subiz/wsclient": "^3.1.9",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.26.1",
+		"core-js": "^3.27.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
 		"less-loader": "^11.1.0",
-		"marked": "^4.2.4",
+		"marked": "^4.2.5",
 		"preact": "^10.11.3"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.19.3",
-		"@babel/core": "^7.20.5",
+		"@babel/cli": "^7.20.7",
+		"@babel/core": "^7.20.7",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-transform-react-jsx": "^7.19.0",
+		"@babel/plugin-transform-react-jsx": "^7.20.7",
 		"@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.4.0",
+		"prettier": "^2.8.1",
+		"puppeteer": "^19.4.1",
 		"webpack": "^5.75.0",
 		"webpack-bundle-analyzer": "^4.7.0",
 		"webpack-cli": "^5.0.1",

package/src/chatbox/ChatButton.js

@@ -343,6 +343,9 @@ export default class ChatButton extends Com {
 		let message = sb.get(ev, 'data.message.text')
 		var format = sb.get(ev, 'data.message.format')
 
+		// render delta preview message
+		if (format === 'delta') return this.renderDeltaMessagePreview(ev, defmsg)
+
 		// cant display message
 		if (format && format !== 'plaintext') message = defmsg
 		if (!message && sb.size(sb.get(ev, 'data.message.attachments')) > 0) message = defmsg
@@ -357,6 +360,33 @@ export default class ChatButton extends Com {
 		return tags
 	}
 
+	renderDeltaMessagePreview(ev, defmsg) {
+		defmsg = defmsg || 'Sent you a message'
+
+		let message = sb.get(ev, 'data.message.quill_delta')
+		if (!message && sb.size(sb.get(ev, 'data.message.attachments')) > 0) message = defmsg
+		if (!message) return
+
+		let quilldeltas = sb.parseJSON(message) || {}
+		// deltas = deltas.ops || []
+		if (!quilldeltas || sb.size(quilldeltas.ops) === 0) return null
+		let $deltas = sb.map(quilldeltas.ops, (delta) => {
+			let html = ''
+			let insert = delta.insert
+			let attributes = delta.attributes
+
+			if (insert.dynamicField) {
+				return sb.get(insert, 'dynamicField.text', '')
+			}
+			if (insert.emoji) return <Emoji emojiCode={`:${insert.emoji}:`} />
+			if (typeof insert === 'string') {
+				return insert
+			}
+			return null
+		})
+		return $deltas
+	}
+
 	closePreview(e) {
 		if (e) {
 			e.preventDefault()

package/src/lib.js

@@ -43,14 +43,34 @@ class Widget {
 		return user
 	}
 
-	logout(accid) {
-		return this.store.logout()
+	logout(userref) {
+		return this.store.logout(userref)
+	}
+
+	async init(param, $container) {
+		param = param || {}
+		let accid = param.account_id
+		let ref = param.ref
+
+		let user = await this.store.init(accid, undefined, ref)
+		// add container to client site
+		if (!$container) $container = document.body || document
+		this.pluginMgr = new PluginMgr(this, $container)
+
+		let clean = setInterval(() => {
+			// check if the dom is deleted
+			if ($container && $container.isConnected) return
+			this.pluginMgr.destroy()
+			clearInterval(clean)
+		}, 1000)
+		this.domGate.open()
+		return user
 	}
 
 	async setAccount(id, $container, mask, cb) {
 		let outmask = await this.store.init(id, mask)
 		// add container to client site
-		if (!$container) $container = document.body
+		if (!$container) $container = document.body || document
 		this.pluginMgr = new PluginMgr(this, $container)
 
 		let clean = setInterval(() => {

package/src/store/api.js

@@ -3,8 +3,6 @@ import sb from '../util/index.js'
 const ajax = require('@subiz/ajax/src/ajax.js')
 ajax.env.XMLHttpRequest = window.XMLHttpRequest
 
-const findAnswer = (challenge) => challenge.answer
-
 function jsonifyTextPlain(param, done) {
 	let req = param.request
 	if (req.content_type === 'text/plain' && req.body !== undefined) req.body = sb.stringify(req.body)
@@ -38,7 +36,9 @@ export default class {
 					return
 				}
 
-				if (this.mask) param.request = param.request.addQuery('x-user-mask', this.mask)
+				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)
 			})
 		// .beforeHook((param, done) => setTimeout((_) => done(true), 1000))
@@ -48,115 +48,155 @@ export default class {
 		this.agentid = agid
 	}
 
-	setAuth(obj) {
-		this.accid = obj.accid
-		this.mask = obj.mask
-		this.uid = obj.uid
-	}
-
-	async setTokenGenerator(accid, uid, tokenGenerator) {
-		this.tokensession = this.tokensession || 0
-		this.tokensession++
-		let tokensession = this.tokensession
+	async setAuth(obj) {
+		if (obj.accid) this.accid = obj.accid
+		if (obj.ref) this.ref = obj.ref
 
-		if (!accid || !sb.startsWith(accid, 'ac')) return {error: 'invalid_account_id'}
-		if (!uid) return {error: 'invalid_user_id'}
-		if (typeof tokenGenerator !== 'function') return {error: 'invalid_token_generator'}
-
-		this.accid = accid
-		this.profile_id = uid
-		this.token_generator = async (force) => {
-			await this.refreshLock.lock()
-			if (tokensession != this.tokensession) {
-				this.refreshLock.unlock()
-				return // outdated
+		this.mask = obj.mask
+		this.profile_id = obj.profile_id
+		if (obj.ref) {
+			let outuser
+			for (let i = 0; true; i++) {
+				outuser = await ajax
+					.setBaseUrl(this.ApiURL)
+					.withCredentials(true)
+					.addQuery('v', '6')
+					.addQuery('x-user-ref', this.ref)
+					.setParser('json')
+					.get(`/accounts/${this.accid}/users/${this.ref}`)
+				if (!sb.get(outuser, 'body.id')) {
+					let sleeptime = Math.min(2000 + i * 200, 60000)
+					await sb.sleep(sleeptime)
+					continue
+				}
+				break
 			}
-			let age = (sb.Date.now() - (this.last_token_at || 0)) / 1000
 
-			// very good token, use this one
-			if (!force && this.last_token && age < 1800) {
-				this.refreshLock.unlock()
-				return this.last_token
+			if (outuser.error) {
+				if (sb.get(outuser.body.code)) return {error: outuser.body.code}
+				return outuser
 			}
+			this.uid = outuser.body.id
+			return outuser.body
+		}
 
-			if (!force && this.last_token && age < 3000) {
-				// the token is still good, but should get new one
-				if (this.token_generator)
-					setTimeout(async () => {
-						let token, err
-						try {
-							token = await tokenGenerator(uid)
-						} catch (e) {
-							err = e
-						}
-						if (tokensession != this.tokensession) {
+		if (obj.tokenGenerator) {
+			this.tokensession = this.tokensession || 0
+			this.tokensession++
+			let tokensession = this.tokensession
+
+			// validating input
+			if (!this.accid || !sb.startsWith(this.accid, 'ac')) return {error: 'invalid_account_id'}
+			if (!this.profile_id) return {error: 'invalid_profile_id'}
+			if (typeof this.tokenGenerator !== 'function') return {error: 'invalid_token_generator'}
+
+			let profile_id = this.profile_id
+			this.token_generator = async (force) => {
+				await this.refreshLock.lock()
+				if (tokensession != this.tokensession) {
+					this.refreshLock.unlock()
+					return // outdated
+				}
+				let age = (sb.Date.now() - (this.last_token_at || 0)) / 1000
+
+				// very good token, use this one
+				if (!force && this.last_token && age < 1800) {
+					this.refreshLock.unlock()
+					return this.last_token
+				}
+
+				if (!force && this.last_token && age < 3000) {
+					// the token is still good, but should get new one
+					if (this.token_generator)
+						setTimeout(async () => {
+							let token, err
+							try {
+								token = await tokenGenerator(profile_id)
+							} catch (e) {
+								err = e
+							}
+							if (tokensession != this.tokensession) {
+								this.refreshLock.unlock()
+								return // outdated
+							}
+
+							if (err) this.last_token = 'error'
+							else this.last_token = token
+							this.last_token_at = sb.Date.now()
 							this.refreshLock.unlock()
-							return // outdated
-						}
+						})
+					return this.last_token
+				}
 
-						if (err) this.last_token = 'error'
-						else this.last_token = token
-						this.last_token_at = sb.Date.now()
-						this.refreshLock.unlock()
-					})
-				return this.last_token
-			}
+				// the token is outdated, must get new one
+				let token
+				let err
+				try {
+					token = await tokenGenerator(profile_id)
+				} catch (e) {
+					err = e
+				}
 
-			// the token is outdated, must get new one
-			let token
-			let err
-			try {
-				token = await tokenGenerator(uid)
-			} catch (e) {
-				err = e
-			}
+				if (tokensession != this.tokensession) {
+					this.refreshLock.unlock()
+					return // outdated
+				}
 
-			if (tokensession != this.tokensession) {
+				if (err) this.last_token = 'error'
+				else this.last_token = token
+				this.last_token_at = sb.Date.now()
 				this.refreshLock.unlock()
-				return // outdated
+				return this.last_token
 			}
 
-			if (err) this.last_token = 'error'
-			else this.last_token = token
-			this.last_token_at = sb.Date.now()
-			this.refreshLock.unlock()
-			return this.last_token
-		}
-
-		let outuser
-		for (let i = 0; true; i++) {
-			await this.token_generator(true)
-			if (tokensession != this.tokensession) break // outdated
-			outuser = await ajax
-				.setBaseUrl(this.ApiURL)
-				.withCredentials(true)
-				.addQuery('v', '6')
-				.addQuery('x-access-token', this.last_token)
-				.setParser('json')
-				.get(`/accounts/${accid}/users/${uid}`)
-			if (!sb.get(outuser, 'body.id')) {
-				let sleeptime = Math.min(2000 + i * 100, 120000)
-				await sb.sleep(sleeptime)
-				continue
+			let outuser
+			for (let i = 0; true; i++) {
+				await this.token_generator(true)
+				if (tokensession != this.tokensession) break // outdated
+				outuser = await ajax
+					.setBaseUrl(this.ApiURL)
+					.withCredentials(true)
+					.addQuery('v', '6')
+					.addQuery('x-access-token', this.last_token)
+					.setParser('json')
+					.get(`/accounts/${accid}/users/${profile_id}`)
+				if (!sb.get(outuser, 'body.id')) {
+					let sleeptime = Math.min(2000 + i * 100, 120000)
+					await sb.sleep(sleeptime)
+					continue
+				}
+				break
 			}
-			break
+			if (outuser.error) {
+				if (sb.get(outuser.body.code)) return {error: outuser.body.code}
+				return outuser
+			}
+			this.uid = outuser.body.id
+			return outuser.body
 		}
-		if (outuser.error) {
-			if (sb.get(outuser.body.code)) return {error: outuser.body.code}
-			return outuser
+
+		if (this.mask) {
+			let parts = this.mask.split('@')
+			this.uid = parts[1]
+			return {id: this.uid}
 		}
-		this.uid = outuser.body.id
-		return outuser.body
+
+		return {error: 'invalid_auth'}
 	}
 
+	async setTokenGenerator(accid, uid, tokenGenerator) {}
+
 	listConversations = (_) =>
 		this.apireq
 			.addQuery('user_id', this.uid)
 			.addQuery('integration_id', `${this.accid}.subizv4.subikon`)
-			.get('/conversations')
+			.get(`/accounts/${this.accid}/conversations`)
 
 	listMessages = (cid, limit, start_id) =>
-		this.apireq.addQuery('limit', limit).addQuery('start_id', start_id).get(`/conversations/${cid}/messages`)
+		this.apireq
+			.addQuery('limit', limit)
+			.addQuery('start_id', start_id)
+			.get(`/accounts/${this.accid}/conversations/${cid}/messages`)
 
 	ajax = ajax
 
@@ -166,18 +206,20 @@ export default class {
 			data[k] = v
 		})
 
-		return this.apireq.post('/conversations', data)
+		return this.apireq.post(`/accounts/${this.accid}/conversations`, data)
 	}
 
 	sendConvoEvent = (cid, ev) => this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/events`, ev)
 	createPostback = (cid, p) => this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/postbacks`, p)
-	markAsReceived = (cid, messageId) => this.apireq.post(`/conversations/${cid}/messages/${messageId}/receive`)
-	markAsSeen = (cid, messageId) => this.apireq.post(`/conversations/${cid}/messages/${messageId}/seen`)
+	markAsReceived = (cid, messageId) =>
+		this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/messages/${messageId}/receive`)
+	markAsSeen = (cid, messageId) =>
+		this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/messages/${messageId}/seen`)
 
-	getConversation = (cid) => this.apireq.get(`/conversations/${cid}`)
+	getConversation = (cid) => this.apireq.get(`/accounts/${this.accid}/conversations/${cid}`)
 	getLocaleContent = (locale) => this.apireq.get(`/accounts/${this.accid}/locales/${locale}`)
-	sendEvent = (data) => this.apireq.post(`/users/${this.uid}/events`, data)
-	sendTyping = (cid) => this.apireq.post(`/conversations/${cid}/typing`)
+	sendEvent = (data) => this.apireq.post(`/accounts/${this.accid}/users/${this.uid}/events`, data)
+	sendTyping = (cid) => this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/typing`)
 
 	sendLostFocus = (device, productid, source_id, sku) =>
 		this.sendEvent({
@@ -226,25 +268,8 @@ export default class {
 		return {url: this.FileURL + body.url}
 	}
 
-	getChallenge = (accid) => this.apireq.post(`/accounts/${accid}/scrypt-challenges`)
-
-	async createUser(accid) {
-		for (var i = 0; i < 10; i++) {
-			const {body: challenge} = await this.getChallenge(accid)
-			const answer = findAnswer(challenge)
-			const data = {challenge_id: challenge.id, answer: '' + answer}
-
-			let {body: user, error} = await this.apireq.post(`/accounts/${accid}/scrypt-challenges/users`, data)
-			if (error) {
-				await sb.sleep(1000)
-				continue
-			}
-			return user
-		}
-	}
-
-	time = (_) => this.apireq.get('/time')
-	updateUser = (data) => this.apireq.post(`/users/${this.uid}`, data)
+	time = (_) => ajax.setBaseUrl(this.ApiURL).withCredentials(true).setParser('json').get('/time')
+	updateUser = (data) => this.apireq.post(`/accounts/${this.accid}/users/${this.uid}`, data)
 
 	getUser = (_) => this.apireq.get(`/accounts/${this.accid}/users/${this.uid}`)
 	getAccountSetting = () => this.apireq.get(`/accounts/${this.accid}/settings`)

package/src/store/api_fake.js

@@ -32,6 +32,7 @@ export default class {
 		this.accid = obj.accid
 		this.mask = obj.mask
 		this.uid = obj.uid
+		return {account_id: accid, id: 'usqzgtgfake'}
 	}
 
 	listConversations = (_) => {
@@ -65,8 +66,6 @@ export default class {
 	uploadToS3 = async (file) => OK200
 	getChallenge = (accid) => OK200
 
-	createUser = (accid) => Promise.resolve({account_id: accid, id: 'usqzgtgfake', mask: 'fakemask'})
-
 	time = (_) => Promise.resolve({code: 200, body: new sb.Date().toISOString()})
 	updateUser = (data) => OK200
 

package/src/store/store.js

@@ -15,6 +15,9 @@ const page_loaded = sb.Date.now()
 
 // available localstorage key mask, user, hasManuallyClosed, isopen, close_preview_at, lastview, bot_run_logs, plugin_run_logs
 export default class Store {
+	inmem = false
+	cookie = cookie
+
 	constructor(ApiURL, FileURL, RealtimeURL, inmem, fakeapi) {
 		this.g_sync = {}
 		this.forceDevice = null
@@ -28,6 +31,17 @@ export default class Store {
 		if (this.fake) this.api = new APIFake(ApiURL, FileURL)
 		else this.api = new API(ApiURL, FileURL)
 
+		// test cookie
+		if (!inmem) {
+			try {
+				document.cookie
+				localStorage
+			} catch (e) {
+				// cookie and localstorage is disable => must inmem
+				inmem = true
+			}
+		}
+
 		if (inmem) {
 			this.inmem = inmem
 			this.cookie = inmemCookie
@@ -75,9 +89,6 @@ export default class Store {
 		}, 2000)
 	}
 
-	inmem = false
-	cookie = cookie
-
 	// inmem
 	_currentViewingProduct = {}
 	linkProduct(p) {
@@ -350,68 +361,65 @@ export default class Store {
 
 	now = () => sb.Date.now() + this.timeDiff // millisecond on server
 
-	async init(accid, mask) {
+	async init(accid, mask, userRef) {
 		this.readyGate.close()
 		accid = (accid || '').trim()
 		this.api.setAuth({accid: accid})
-
 		this.g_sync = {}
-		// try to find mask in cookie
-		if (!mask) {
+		if (!userRef) {
+			// try to find userRef in cookie
 			try {
-				mask = this.cookie.get('__sbmask', '')
+				userRef = this.cookie.get('__sbref', '')
 			} catch (e) {}
-		}
 
-		let localstorageMask = this.kv.match('mask')
-		// cookie is deleted, fallback to local storage
-		if (!mask && localstorageMask) mask = localstorageMask
-
-		// check mask integrity, mask in cookie should match mask in localstorate
-		// trust cookie, remove localstorage
-		if (mask && localstorageMask && mask !== localstorageMask) this.clearBrowserData()
-
-		var userId = ''
-		if (mask) {
-			let parts = mask.split('@')
-			if (parts[0] != accid) {
-				// invalid account (may be user has changed their injected code), must recreate user
-				mask = ''
-				this.clearBrowserData()
-			} else userId = parts[1]
-		}
+			if (!userRef) {
+				// try to find mask in cookie
+				if (!mask) {
+					try {
+						mask = this.cookie.get('__sbmask', '')
+					} catch (e) {}
+				}
+
+				if (mask) {
+					let parts = mask.split('@')
+					if (parts[0] != accid) {
+						userRef = sb.randomString(40)
+						this.new_visitor = true
+					}
 
-		if (!mask) {
-			let user = await this.api.createUser(accid)
-			this.new_visitor = true
-			mask = user.mask
-			userId = user.id
-		} else {
-			this.new_visitor = false // for checking returning or new visitor
+					this.new_visitor = false // for checking returning or new visitor
+					// set cookie forever
+					this.cookie.set('__sbmask', mask)
+				} else {
+					// random
+					userRef = sb.randomString(40)
+					this.new_visitor = true
+				}
+			}
 		}
 
 		// set cookie forever
-		this.cookie.set('__sbmask', mask)
-		this.kv.put('mask', mask)
+		if (userRef) this.cookie.set('__sbref', userRef)
+
+		let user = await this.api.setAuth({accid: accid, mask: mask, ref: userRef})
+		if (user.error) return
 
 		if (this.realtime) this.realtime.stop()
 		if (this.fake) this.realtime = new RealtimeFake()
-		else this.realtime = new Realtime(this.RealtimeURL, {user_mask: mask})
+		else this.realtime = new Realtime(this.RealtimeURL, {account_id: accid, user_ref: userRef, user_mask: mask})
 
 		this.realtime.onEvent(this.onWs.bind(this))
-		this.realtime.onInterrupted(() => this.reconnectWs(accid, userId))
+		this.realtime.onInterrupted(() => this.reconnectWs(accid, user.id))
 
-		this.api.setAuth({accid: accid, uid: userId, mask: mask})
 		this.seenLoop()
 		await this.reconnect()
 		this.readyGate.open()
-		this.reconnectWs(accid, userId)
-
-		return mask
+		this.reconnectWs(accid, user.id)
+		return user
 	}
 
 	async login(accid, user_id, tokenGenerator) {
-		let user = await this.api.setTokenGenerator(accid, user_id, tokenGenerator)
+		let user = await this.api.setAuth({accid: accid, profile_id: user_id, tokenGenerator: tokenGenerator})
 		if (user.error) return user
 
 		this.clearBrowserData()
@@ -436,8 +444,9 @@ export default class Store {
 		return user
 	}
 
-	logout(user_id) {
-		this.api.setTokenGenerator(undefined, undefined, undefined)
+	logout(userRef) {
+		return this.api.setAuth({ref: userRef})
+		// this.api.setTokenGenerator({})
 	}
 
 	seenQueue = [] // convoid will be seen

package/webpack.dev.js

@@ -3,6 +3,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
 	mode: 'development',
 	entry: {
+		webview: './webview.js',
 		app: './app.js',
 		inject: './inject.js',
 		preview: './preview.js',

package/webpack.prod.js

@@ -6,6 +6,7 @@ var fs = require('fs')
 webpackconfig.output.publicPath = 'https://vcdn.subiz-cdn.com/widget-v4/public/'
 
 webpackconfig.entry = {
+	webview: './webview.js',
 	app: './app.js',
 	preview: './preview.js',
 	library: './library.js',