@subiz/widget-v4 4.1.2 → 4.1.5

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.5",
 	"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/notif/notif.js

@@ -76,7 +76,8 @@ export default class Notif extends Com {
 					height='24'
 					viewBox='0 0 24 24'
 					stroke-linecap='round'
-					stroke-linejoin='round'>
+					stroke-linejoin='round'
+				>
 					<line x1='18' y1='6' x2='6' y2='18' style='stroke-width: 3 !important;'></line>
 					<line x1='6' y1='6' x2='18' y2='18' style='stroke-width: 3 !important;'></line>
 				</svg>
@@ -196,22 +197,24 @@ export default class Notif extends Com {
 	renderTextFromQuillDelta(quilldelta, profile) {
 		let qd = sb.parseJSON(quilldelta)
 		if (!qd || !qd.ops) return null
-		return sb.map(qd.ops, (op) => {
-			let out = null
-			if (!op.insert) return null
-
-			if (typeof op.insert == 'string') out = op.insert
-			if (sb.get(op, 'insert.dynamicField')) {
-				let key = sb.get(op, 'insert.dynamicField.key')
-				if (key === 'user.fullname') out = profile.fullname
-				if (key === 'user.email') out = profile.email
-				if (key === 'user.address') out = profile.address
-				if (key === 'user.phone') out = profile.phone
-			}
-			if (sb.get(op, 'attributes.bold')) out = <b>{out}</b>
-			if (sb.get(op, 'attributes.italic')) out = <b>{out}</b>
-			return out
-		})
+		return sb
+			.map(qd.ops, (op) => {
+				let out = null
+				if (!op.insert) return null
+
+				if (typeof op.insert == 'string') out = op.insert
+				if (sb.get(op, 'insert.dynamicField')) {
+					let key = sb.get(op, 'insert.dynamicField.key')
+					if (key === 'user.fullname') out = profile.fullname
+					if (key === 'user.email') out = profile.email
+					if (key === 'user.address') out = profile.address
+					if (key === 'user.phone') out = profile.phone
+				}
+				if (sb.get(op, 'attributes.bold')) out = <b>{out}</b>
+				if (sb.get(op, 'attributes.italic')) out = <b>{out}</b>
+				return out
+			})
+			.filter((a) => a)
 	}
 
 	render() {
@@ -245,13 +248,27 @@ export default class Notif extends Com {
 		let st = 'position: fixed !important; z-index: 1000000000 !important'
 		if (this.props.plugin._preview) st = 'position: absolute !important;'
 		if (this.state.closeAnimation) animation = 'fadeOut'
+		let $avatar = null
+		if (user.avatar_url) $avatar = <img alt='notification avatar' class='notif_avatar__img' src={user.avatar_url} />
+
+		let $time = (
+			<div class='notif_time' style={sb.js2css(notif.subtext_style)}>
+				{this.state.timestamp}
+			</div>
+		)
+
+		let $title = this.renderTextFromQuillDelta(this.state.title, user)
+		let $message = this.renderTextFromQuillDelta(this.state.message, user)
+		if (!lo.size($title) && !lo.size($message)) $time = null
+
 		return (
 			<div
 				class={animation + ' notif' + ' notif__' + pos}
 				onClick={(e) => this.onClick(e)}
 				onmouseover={(e) => this.setOver(true)}
 				style={st}
-				onmouseleave={(e) => this.setOver(false)}>
+				onmouseleave={(e) => this.setOver(false)}
+			>
 				<div style='position: relative !important; display: flex !important; align-items: center !important;'>
 					<img
 						alt='notification background'
@@ -261,18 +278,16 @@ export default class Notif extends Com {
 					/>
 					{this.renderCloseButton()}
 					<div class='notif_avatar' style={sb.js2css(notif.avatar_style)}>
-						<img alt='notification avatar' class='notif_avatar__img' src={user.avatar_url} />
+						{$avatar}
 					</div>
 					<div class='notif_body'>
 						<div class='notif_title' style={sb.js2css(notif.title_style)}>
-							{this.renderTextFromQuillDelta(this.state.title, user)}
+							{$title}
 						</div>
 						<div class='notif_message' style={sb.js2css(notif.message_style)}>
-							{this.renderTextFromQuillDelta(this.state.message, user)}
-						</div>
-						<div class='notif_time' style={sb.js2css(notif.subtext_style)}>
-							{this.state.timestamp}
+							{$message}
 						</div>
+						{$time}
 					</div>
 				</div>
 			</div>
@@ -303,12 +318,7 @@ function ramdomPhone() {
 }
 
 function randomEmail() {
-	return (
-		randomName()
-			.split(' ')
-			.join('.')
-			.toLowerCase() + '@gmail.com'
-	)
+	return randomName().split(' ').join('.').toLowerCase() + '@gmail.com'
 }
 
 function randomAddress() {

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