@subiz/widget-v4 4.1.122 → 4.1.124

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.122",
+	"version": "4.1.124",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -11,7 +11,6 @@
 	"dependencies": {
 		"@subiz/ajax": "^3.0.19",
 		"@subiz/flow": "^1.1.0",
-		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^4.0.28",
 		"cookie_js": "1.4.2",
 		"core-js": "^3.41.0",

package/src/chatbox/Event.js

@@ -302,13 +302,15 @@ export default class Event extends Com {
 		if (this.props.event.mode === 'lead') $sender = <div class='pt-3'></div>
 
 		let $error = null
+		if (ev._error) $dot = null
 		if (ev._error && ev.type === 'message_sent') {
 			let msg = this.props.t('error_send_message')
 			if (ev._error_message) msg = this.props.t(ev._error_message)
 			$error = (
-				<a class='message_error' src='javascript:;' onClick={(e) => this.resendMessage()}>
-					<div class='message_error__text'>{msg}</div>
+				<a class='message_error' src='javascript:;' onClick={this.resendMessage}>
 					<div class='message_error__icon' />
+					&nbsp;
+					<div class='message_error__text'>{msg}</div>
 				</a>
 			)
 		}
@@ -436,7 +438,7 @@ export default class Event extends Com {
 		return <div class='message-system'>{this.props.t('conversation_state_updated', {state})}</div>
 	}
 
-	resendMessage() {
+	resendMessage = () => {
 		let cid = sb.convoOfEv(this.props.event.ev)
 		const message = sb.get(this.props.event, 'ev.data.message')
 		this.props.store.sendConvoEvent(cid, 'message_sent', {message})

package/src/chatbox/TextMessage.js

@@ -63,8 +63,10 @@ export default class TextMessage extends Com {
 					{this.renderTime()}
 				</div>
 			)
+		let msgcls = 'message-user message-text--user'
+		if (this.props.ev._error) msgcls += ' message-user--error'
 		return (
-			<div class='message-user message-text--user' title={t}>
+			<div class={msgcls} title={t}>
 				{tags}
 			</div>
 		)
@@ -83,8 +85,10 @@ export default class TextMessage extends Com {
 				</div>
 			)
 		}
+		let msgcls = 'message-user message-text--user'
+		if (this.props.ev._error) msgcls += ' message-user--error'
 		return (
-			<div class='message-user message-text--user' title={t}>
+			<div class={msgcls} title={t}>
 				<Block block={block} onLink={this.props.onLink} />
 			</div>
 		)

package/src/chatbox/Widget.js

@@ -609,7 +609,7 @@ export default class Widget extends Com {
 				<div key={'form_' + encode(key)}>
 					<label class='label' for={'form_' + encode(key)}>
 						{label}
-						{field.is_required ? <span class='ml-1 red'>*</span> : ''}
+						{field.is_required ? <span class='red'>*</span> : ''}
 					</label>
 					{$field}
 					{field.error ? <div class='form-control--valid-input--error'>{field.error}</div> : ''}
@@ -631,8 +631,8 @@ export default class Widget extends Com {
 		return (
 			<div class='widget-body'>
 				<FormMounter key={form._updated} form={form} onMount={this.formMounted} />
-				<div class='widget-body--content flex-grow-1 pl-3 pr-3 d-flex flex-column'>
-					<div class='mt-3 d-flex flex-column'>
+				<div class='widget-body--content flex-grow-1 pl-3 pr-3 pb-2 d-flex flex-column'>
+					<div class='mt-2 d-flex flex-column'>
 						<div>{title}</div>
 						{this.renderFields(form, formName)}
 					</div>
@@ -645,7 +645,6 @@ export default class Widget extends Com {
 						{submitLabel}
 					</button>
 				</div>
-				<div class='mt-2'></div>
 			</div>
 		)
 	}

package/src/chatbox/main.js

@@ -70,6 +70,7 @@ export default class Main extends Com {
 		if (!this.state.cssready) return null
 		if (sb.isUserBanned(this.props.store.matchUser())) return null
 		if (!this.props.t) return null
+
 		return (
 			<div class={this.props.store.isMobile() ? 'mobile' : 'desktop'}>
 				<ChatButton

package/src/plugin.js

@@ -69,6 +69,8 @@ function Plugin(plugin, store, $container, lib) {
 	var _render = async () => {
 		if (_destroy) return
 		if (!$div) return
+		if (!this.t) return
+
 		if (plugin.type === 'chatbox') {
 			// if (!Chatbox) Chatbox = (await LoadChatbox()).default
 			render(<Chatbox destroy={_destroy} plugin={plugin} store={store} ref={_ref} t={this.t} />, $div)

package/src/store/api.js

@@ -63,7 +63,11 @@ export default class {
 					.addQuery('x-user-ref', this.ref)
 					.setParser('json')
 					.get(`/accounts/${this.accid}/users/${this.ref}`)
-				if (outuser.error && sb.get(outuser, 'body.error.code', '').indexOf('locked_account') != -1) break
+				if (sb.get(outuser, 'body.error.code', '').indexOf('locked_account') != -1) break
+				if (sb.get(outuser, 'body.error.code', '').indexOf('user_is_banned') != -1) {
+					await sb.sleep(120000) // sleep 2 min, incase of unblock
+					continue
+				}
 
 				if (!sb.get(outuser, 'body.id')) {
 					let sleeptime = Math.min(2000 + i * 400, 60000)
@@ -286,7 +290,6 @@ export default class {
 
 	getUser = (_) => this.apireq.get(`/accounts/${this.accid}/users/${this.uid}`)
 	getAccountSetting = () => this.apireq.get(`/accounts/${this.accid}/settings`)
-	getIsOnline = () => this.apireq.get(`/accounts/${this.accid}/is_online`)
 
 	sendImpression = (impression) =>
 		this.apireq.post(`/accounts/${this.accid}/campaigns/${impression.campaign_id}/impressions`, impression)

package/src/store/api_fake.js

@@ -86,7 +86,6 @@ export default class {
 			},
 		})
 	getAccountSetting = () => this.apireq.get(`/accounts/${this.accid}/settings`)
-	getIsOnline = () => this.apireq.get(`/accounts/${this.accid}/is_online`)
 
 	sendImpression = (impression) => OK200
 	sendConversion = (conversion) => OK200

package/src/store/chain.js

@@ -0,0 +1,255 @@
+const ChainMaxSize = 50
+// NOTE:
+// index must be number and index must be positive
+//
+
+export default class Chain {
+	constructor(db, schema, inmem) {
+		this.schema = schema + '_chain'
+		this.dead = false
+		this.db = db
+		this.anchorCache = {}
+		this.cache = {} // note: cache must be continuously from start
+
+		this.init()
+	}
+
+	init() {
+		let inmemItemM = {}
+
+		let allitems = this.db.all('items')
+		allitems.map((item) => {
+			inmemItemM[item.chain] = inmemItemM[item.chain] || {}
+			inmemItemM[item.chain][item.id] = {
+				id: item.id,
+				chain: item.chain,
+				full_id: item.full_id,
+				index: item.index,
+				value: item.value,
+			}
+		})
+
+		map(inmemItemM, (itemM, chain) => {
+			if (size(itemM) < ChainMaxSize) return
+			let items = orderBy(map(itemM), ['index'], 'desc')
+			let removekeys = []
+			for (var i = ChainMaxSize; i < items.length; i++) {
+				removekeys.push(items[i].full_id)
+				delete itemM[items[i].id]
+			}
+			this.db.removes('items', removekeys)
+			inmemItemM[chain] = itemM
+		})
+
+		this.cache = inmemItemM
+	}
+
+	destroy() {
+		// clear all data
+		this.db.clear('items')
+
+		this.dead = true
+		this.cache = {}
+		this.anchorCache = {}
+		this.db = undefined
+	}
+
+	// item: {id, index, value}
+	// note: should only call update when db is synced
+	put(chain, id, node_index, value) {
+		if (this.dead) return
+
+		let inmemItemM = this.cache[chain] || {}
+		let bottom = minIndex(inmemItemM) || {}
+		let bottomIndex = bottom.index || 'z'
+		if (size(inmemItemM) == 0) bottomIndex = ''
+
+		let item = {id, index: node_index, value, chain, full_id: chain + ':' + id}
+		delete inmemItemM[item.id]
+
+		if (bottomIndex > item.index + '') return
+		inmemItemM[item.id] = item
+
+		this.cache[chain] = inmemItemM
+		this.db.put('items', item.full_id, item)
+	}
+
+	listM(chain) {
+		if (this.dead) return {}
+		let inmemItemM = this.cache[chain] || {}
+		let out = {}
+		map(inmemItemM, (item, id) => {
+			out[id] = item.value
+		})
+		return out
+	}
+
+	async fetchMore(chain, limit = 20, api) {
+		if (this.dead) return {error: 'dead'}
+		if (!api) return {error: 'no api'}
+
+		let anchor = this.anchorCache[chain] || ''
+		var [apiItems, newanchor, error] = await api(chain, anchor, limit)
+
+		if (error) return {error}
+		if (this.dead) return {error: 'dead'}
+
+		let inmemItemM = this.cache[chain] || {}
+
+		if (apiItems.length === 0) return {end: true}
+
+		apiItems.forEach((item) => {
+			item.chain = chain
+			item.full_id = chain + ':' + item.id
+			inmemItemM[item.id] = item
+			this.db.put('items', item.full_id, item)
+		})
+
+		// save items fetch from api to the db
+		this.anchorCache[chain] = newanchor
+		this.cache[chain] = inmemItemM
+		return {}
+	}
+
+	del(chain, id) {
+		if (this.dead) return
+		let inmemItemM = this.cache[chain] || {}
+		let full_id = chain + ':' + id
+
+		delete inmemItemM[id]
+		this.db.removes('items', [full_id])
+	}
+
+	match(chain, id) {
+		return this.listM(chain)[id]
+	}
+
+	async reload(chain, api) {
+		if (this.dead) return
+
+		let top = maxIndex(this.listM(chain)) || {}
+		let topindex = top.index
+		if (!topindex) topindex = Date.now()
+		var lastanchor = ''
+		var fetchedItems = {}
+		for (;;) {
+			if (this.dead) return
+			let [newItems, newanchor, error] = await api(chain, lastanchor, 50)
+			if (error) return
+			if (this.dead) return
+			newItems.map((item) => {
+				fetchedItems[item.id] = Object.assign({}, item, {chain, full_id: chain + ':' + item.id})
+			})
+			if (newItems.length === 0 || newanchor === lastanchor) break // out of item
+
+			// still cannot join
+			if (fetchedItems.length >= 200) {
+				// fetch too much but still cannot merge with old data
+				// clear old data and write new data
+
+				let inmemItemM = this.cache[chain] || {}
+				let removeids = []
+				map(inmemItemM, (item) => {
+					if (item.chain !== chain) return
+					removeids.push(item.full_id)
+				})
+				this.db.removes('items', removeids)
+				this.cache[chain] = {}
+				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]]
+			this.db.put('items', item.full_id, item)
+			this.cache[item.chain] = this.cache[item.chain] || {}
+			this.cache[item.chain][item.id] = item
+		}
+		this.anchorCache[chain] = lastanchor
+	}
+}
+
+function minIndex(obj) {
+	if (!obj) return
+	let keys = Object.keys(obj)
+	if (!keys.length) return
+	let min = Infinity
+	let minKey = Object.keys(obj)[0]
+	for (var i = 0; i < keys.length; i++) {
+		let index = (obj[keys[i]] && obj[keys[i]].index) || Infinity
+		if (index < min) {
+			min = index
+			minKey = keys[i]
+		}
+	}
+
+	return obj[minKey]
+}
+
+function maxIndex(obj) {
+	if (!obj) return
+	let keys = Object.keys(obj)
+	if (!keys.length) return
+	let max = -Infinity
+	let maxKey = Object.keys(obj)[0]
+	for (var i = 0; i < keys.length; i++) {
+		let index = (obj[keys[i]] && obj[keys[i]].index) || -Infinity
+		if (index > max) {
+			max = index
+			maxKey = keys[i]
+		}
+	}
+
+	return obj[keys[maxKey]]
+}
+
+function map(collection, predicate) {
+	if (!collection) return []
+	if (!predicate) return collection
+
+	var out = []
+	if (Array.isArray(collection)) {
+		for (let i = 0; i < collection.length; i++) {
+			out.push(predicate(collection[i], i))
+		}
+		return out
+	}
+
+	if (typeof collection === 'object') {
+		var keys = Object.keys(collection)
+		for (let i = 0; i < keys.length; i++) {
+			var k = keys[i]
+			out.push(predicate(collection[k], k))
+		}
+		return out
+	}
+
+	return out
+}
+
+function size(o) {
+	if (!o) return 0
+	if (o.length !== undefined) return o.length
+	return Object.keys(o).length
+}
+
+function orderBy(a, k, d) {
+	var clone = []
+	map(a, (v) => clone.push(v))
+	clone.sort((i, j) => {
+		if (i[k] === j[k]) return 0
+		var r = i[k] < j[k] ? -1 : 1
+		return d === 'desc' ? -r : r
+	})
+	return clone
+}

package/src/store/inmem_localstorage.js

@@ -0,0 +1,40 @@
+// this file implements localstorage in memory
+var localStorageMemory = {}
+var cache = {}
+
+localStorageMemory.length = 0
+
+localStorageMemory.getItem = function (key) {
+	if (key in cache) return cache[key]
+	return null
+}
+
+localStorageMemory.setItem = function (key, value) {
+	if (typeof value === 'undefined') {
+		localStorageMemory.removeItem(key)
+	} else {
+		if (!Object.prototype.hasOwnProperty.call(cache, key)) {
+			localStorageMemory.length++
+		}
+
+		cache[key] = value
+	}
+}
+
+localStorageMemory.removeItem = function (key) {
+	if (Object.prototype.hasOwnProperty.call(cache, key)) {
+		delete cache[key]
+		localStorageMemory.length--
+	}
+}
+
+localStorageMemory.key = function (index) {
+	return Object.keys(cache)[index] || null
+}
+
+localStorageMemory.clear = function () {
+	cache = {}
+	localStorageMemory.length = 0
+}
+
+module.exports = localStorageMemory

package/src/store/kv.js

@@ -0,0 +1,103 @@
+let KvMaxSize = 500
+// A key-value database with a cache layer
+export default class {
+	constructor (db, schema) {
+		this.name = schema
+		schema += '_kv'
+		this.dead = false
+		this.db = db
+		this.cache = {}
+
+		this.initialized = false
+		this.init()
+	}
+
+	refreshCache () {
+		if (this.dead) return
+		let inmemItemM = {}
+		let allitems = this.db.all('items')
+		allitems.forEach(function(item) {
+			inmemItemM[item.key] = item.value
+		})
+		this.cache = inmemItemM
+	}
+
+	init () {
+		if (this.initialized) return
+		let inmemItemM = {}
+
+		console.time('KV' + this.name)
+		let allitems = this.db.all('items')
+		allitems.forEach(function(item) {
+			inmemItemM[item.key] = item.value
+		})
+		this.cache = inmemItemM
+
+		// If the cache is full. Randomly remove half of the cache. credit to thanos
+		// this is so simple since we don't need to keep track of last modified time
+		// for each key. Implementing a LRU cache won't add much value.
+		let allkeys = Object.keys(this.cache)
+		if (allkeys.length > KvMaxSize) {
+			let liveChance = KvMaxSize / 2 / allkeys.lenth
+
+			let removekeys = []
+			for (var i = 0; i < KvMaxSize; i++) {
+				let live = Math.random() <= liveChance
+				if (live) continue
+
+				let key = allkeys[i]
+				delete this.cache[key]
+				removekeys.push(key)
+			}
+
+			this.db.removes('items', [removekeys])
+
+		}
+
+		this.initialized = true
+		console.timeEnd('KV' + this.name)
+	}
+
+	all () {
+		if (this.dead) return []
+		if (!this.initialized) return []
+		return this.cache
+	}
+
+	match (key) {
+		if (this.dead || !this.initialized) return
+		if (!key) return
+		return this.cache[key]
+	}
+
+	// keys could be a string or array
+	// put('1', {id: '1', name: 'thanh'})
+	// put({id: '1', name: 'thanh'}, 'id')
+	// put([{id: '1', name: 'thanh'},{id: '2', name: 'van'}], 'id')
+	put (key, value) {
+		if (!key) return
+		if (this.dead) return []
+		if (!this.initialized) throw new Error('uninitialized')
+		// if multiple key
+		this.cache[key] = value
+		this.db.put('items', key, { key, value })
+	}
+
+	// delete an record in a schema
+	del (key) {
+		if (this.dead) return
+		if (!this.initialized) throw new Error('uninitialized')
+		delete this.cache[key]
+		this.db.removes('items', [key])
+	}
+
+	destroy () {
+		// clear all data
+		this.db.clear('items')
+
+		this.dead = true
+		this.db = undefined
+		this.cache = undefined
+		this.initialized = false
+	}
+}

package/src/store/lsdb.js

@@ -0,0 +1,74 @@
+// like db but implement using localstorage
+let memlocalStorage = require('./inmem_localstorage.js')
+import sb from '../util/index.js'
+
+let requestIdleCallback = typeof window !== 'undefined' ? window.requestIdleCallback : null
+if (!requestIdleCallback) requestIdleCallback = (cb) => cb()
+
+const LIMIT = 80
+
+export default class {
+	constructor(schema, inmem) {
+		this.localStorage = memlocalStorage
+		this.inmem = inmem
+		this.allkeys = {}
+		if (!inmem) {
+			try {
+				window.localStorage.setItem('sbzstore1029', '?')
+				window.localStorage.removeItem('sbzstore1029')
+				this.localStorage = window.localStorage
+			} catch (e) {}
+		}
+
+		this.schema = schema
+	}
+
+	all(table) {
+		let items = []
+		for (var i = 0; i < this.localStorage.length; i++) {
+			let key = this.localStorage.key(i)
+			if (!key.startsWith(this.schema + '#' + table + '#')) continue
+			this.allkeys[key] = true
+			if (this.inmem)
+				items.push(this.localStorage.getItem(key)) // fast path
+			else items.push(sb.parseJSON(this.localStorage.getItem(key)))
+		}
+		return items
+	}
+
+	removes(table, keys) {
+		for (var i = 0; i < keys.length; i++) {
+			delete this.allkeys[this.schema + '#' + table + '#' + keys[i]]
+			this.localStorage.removeItem(this.schema + '#' + table + '#' + keys[i])
+		}
+	}
+
+	clear(table) {
+		for (var i = 0; i < this.localStorage.length; i++) {
+			let key = this.localStorage.key(i)
+			if (!key.startsWith(this.schema + '#' + table + '#')) continue
+			this.localStorage.removeItem(key)
+		}
+		this.allkeys = {}
+	}
+
+	// write a (key,value) pair to the table
+	// if the localstorage is already full, it would try to free by delete the whole table!
+	put(table, key, value) {
+		this.allkeys[this.schema + '#' + table + '#' + key] = true
+		if (this.inmem) return this.localStorage.setItem(this.schema + '#' + table + '#' + key, value) // fast path
+		if (Object.keys(this.allkeys).length > LIMIT) this.clear(table)
+		requestIdleCallback(() => {
+			try {
+				this.localStorage.setItem(this.schema + '#' + table + '#' + key, toString(value))
+			} catch (e) {
+				this.clear(table)
+			}
+		})
+	}
+}
+
+function toString(obj) {
+	if (obj === undefined) return 'null'
+	return JSON.stringify(obj)
+}