@subiz/widget-v4 4.1.83 → 4.1.85

package/compiled_src/util/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var common = _interopRequireWildcard(require("./common.js"));
-var extractor = _interopRequireWildcard(require("./extractor.js"));
 var campaign = _interopRequireWildcard(require("./campaign.js"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -17,6 +16,5 @@ var op = require('./op.js');
 sb.get = op.get;
 sb.set = op.set;
 sb.Pubsub = require('./pubsub.js').default;
-sb = Object.assign(sb, extractor);
 sb = Object.assign(sb, campaign);
 var _default = exports.default = sb;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.83",
+	"version": "4.1.85",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -30,7 +30,7 @@
 		"babel-loader": "^9.1.3",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.0",
-		"puppeteer": "^22.12.0",
+		"puppeteer": "^22.12.1",
 		"webpack": "^5.92.1",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^5.1.4",

package/src/chatbox/ChatButton.js

@@ -3,6 +3,7 @@ import Emoji from './Emoji.js'
 var defaultBubble = require('../../assets/img/bubble_default.svg')
 let defaultAvatar = require('../../assets/img/default_avatar.png')
 import {Com} from '../common.js'
+import Block from './block.js'
 import {h} from 'preact'
 
 export default class ChatButton extends Com {
@@ -377,54 +378,22 @@ export default class ChatButton extends Com {
 
 	renderMessagePreview(ev, defmsg) {
 		defmsg = defmsg || this.props.t('sent_you_a_message')
-
-		let message = sb.get(ev, 'data.message.text')
 		var format = sb.get(ev, 'data.message.format')
+		let block = sb.get(ev, 'data.message.block')
+		if (block || format == 'block') return <Block block={block} />
 
-		// render delta preview message
-		if (format === 'delta') return this.renderDeltaMessagePreview(ev, defmsg)
-
-		// cant display message
-		if (format && format !== 'plaintext') message = defmsg
+		let message = sb.get(ev, 'data.message.text', defmsg)
 		if (!message && sb.size(sb.get(ev, 'data.message.attachments')) > 0) message = defmsg
-
 		if (!message) return null
 		let byType = sb.get(ev, 'by.type')
 		var tags = sb.extractText(message).map((tag) => {
-			if (tag.type === 'emoji') return <Emoji emojiCode={tag.text} byType={byType} />
+			if (tag.type === 'emoji') return <Emoji emojiCode={tag.text} />
 			return tag.text
 		})
 
 		return tags
 	}
 
-	renderDeltaMessagePreview(ev, defmsg) {
-		defmsg = defmsg || this.props.t('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/chatbox/Emoji.js

@@ -2,7 +2,7 @@ import sb from '../util/index.js'
 import { Com } from '../common.js'
 import { h } from 'preact'
 
-// 	props: ['emojiCode', 'byType'],
+// 	props: ['emojiCode'],
 export default class Emoji extends Com {
 	render () {
 		var emojiCode = this.props.emojiCode

package/src/chatbox/TextMessage.js

@@ -1,5 +1,5 @@
 import sb from '../util/index.js'
-
+import Block from './block.js'
 import {Com} from '../common.js'
 import {h} from 'preact'
 import Emoji from './Emoji.js'
@@ -7,7 +7,8 @@ import Emoji from './Emoji.js'
 export default class TextMessage extends Com {
 	render() {
 		var format = sb.get(this.props.ev, 'data.message.format', 'plaintext')
-		if (format === 'delta') return this.renderDelta()
+		let block = sb.get(this.props.ev, 'data.message.block')
+		if (block) return this.renderBlock(block)
 		return this.renderPlainText()
 	}
 
@@ -17,6 +18,7 @@ export default class TextMessage extends Com {
 		if (sb.size(text) === 0) return null
 
 		let byType = sb.get(this.props.ev, 'by.type')
+		if (byType !== 'user') byType = 'agent'
 		var tags = sb.extractText(text).map((tag) => {
 			if (tag.type === 'emoji') return <Emoji emojiCode={tag.text} byType={byType} />
 			if (tag.type === 'link') {
@@ -42,106 +44,26 @@ export default class TextMessage extends Com {
 		})
 
 		if (sb.size(tags) === 0) return null
-		if (byType === 'agent') {
-			return <div class='message-agent message-text--agent'>{tags}</div>
-		}
+		if (byType === 'agent') return <div class='message-agent message-text--agent'>{tags}</div>
 		return <div class='message-user message-text--user'>{tags}</div>
 	}
 
-	renderDelta() {
-		let deltas = sb.get(this.props.ev, 'data.message.quill_delta') || sb.get(this.props.ev, 'data.message.text')
-		let quilldeltas = sb.parseJSON(deltas) || {}
-		// deltas = deltas.ops || []
-		quilldeltas = trimQuillDelta(quilldeltas)
-		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') {
-				let $tags = sb.extractText(insert).map((tag, i) => {
-					if (tag.type === 'link') {
-						return (
-							<a href={absLink(tag.text)} target='_blank'>
-								{tag.text}
-							</a>
-						)
-					}
-					return tag.text
-				})
+	renderBlock(block) {
+		if (sb.size(block) == 0) return null
+		let byType = sb.get(this.props.ev, 'by.type')
 
-				if (attributes) {
-					if (attributes.italic && attributes.bold)
-						return <span style='font-weight: bold !important; font-style: italic !important'>{$tags}</span>
-					if (attributes.italic) return <span style='font-style: italic !important'>{$tags}</span>
-					if (attributes.bold) return <span style='font-weight: bold !important'>{$tags}</span>
-				}
-				return <span>{$tags}</span>
-			}
-			return null
-		})
-		let byType = sb.get(this.ev, 'by.type')
 		if (byType !== 'user') byType = 'agent'
-		if (sb.size($deltas) === 0) return null
 		if (byType === 'agent') {
-			return <div class='message-agent message-text--agent'>{$deltas}</div>
+			return (
+				<div class='message-agent message-text--agent'>
+					<Block block={block} />
+				</div>
+			)
 		}
-		return <div class='message-user message-text--user'>{$deltas}</div>
+		return (
+			<div class='message-user message-text--user'>
+				<Block block={block} />
+			</div>
+		)
 	}
 }
-
-const emojiCodes = {
-	like: '👍',
-	unlike: '👎',
-	angry: '😠',
-	confused: '😕',
-	crying: '😢',
-	grinning: '😀',
-	'heart-eyes': '😍',
-	neutral: '😐',
-	sleepy: '😪',
-	sad: '😞',
-	smiling: '😄',
-	'tongue-out': '😛',
-	tired: '😩',
-	surprised: '😮',
-	wink: '😉',
-}
-
-function trimQuillDelta(delta) {
-	if (!delta) return delta
-	if (!delta.ops || !delta.ops.length) return delta
-	let last = delta.ops[delta.ops.length - 1]
-	if (typeof last.insert != 'string') return delta
-
-	let insert = last.insert.trimEnd()
-	if (insert) {
-		if (last.insert != insert) {
-			// just fix the last item
-			let newops = delta.ops.slice()
-			// let last = sb.cloneDeep(newops.pop())
-			let last = newops.pop()
-			last.insert = insert
-			newops.push(last)
-			return {ops: newops}
-		}
-
-		// last item dont change, do nothing
-		return delta
-	}
-
-	// remove the last item
-	let newops = delta.ops.slice()
-	newops.pop()
-	return trimQuillDelta({ops: newops})
-}
-
-function absLink(url) {
-	if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('//')) return 'http://' + url
-	return url
-}

package/src/chatbox/block.js

@@ -0,0 +1,161 @@
+import sb from '../util/index.js'
+import Emoji from './Emoji.js'
+import {Com} from '../common.js'
+import {h} from 'preact'
+
+export default class Block extends Com {
+	constructor(props) {
+		super(props)
+	}
+
+	renderBlock(block) {
+		if (sb.size(block) == 0) return null
+		let ele = {}
+		ele.style = ''
+		if (block.style) {
+			sb.map(block.style, (v, k) => {
+				ele.style += k + ': ' + v + ';'
+			})
+		}
+
+		ele.attrs = {}
+		if (block.title != '') {
+			ele.attrs['title'] = block.title
+		}
+		if (block.href != '') {
+			ele.attrs['href'] = block.href
+		}
+
+		ele.class = block.class
+		sb.map(block.attrs, (v, k) => {
+			ele.attrs[k] = v
+		})
+		if (block.type == 'bullet_list' || block.type == 'ordered_list') {
+			if (block.type == 'bullet_list') {
+				ele.tag = 'ol'
+			} else {
+				ele.tag = 'ul'
+			}
+		}
+
+		if (block.type == 'list_item') {
+			ele.tag = 'li'
+		}
+
+		if (block.type == 'heading') {
+			if (block.level < 1) block.level = 1
+			if (block.level > 6) block.level = 6
+			ele.tag = 'h' + block.level
+		}
+
+		if (block.type == 'paragraph' || block.type == 'section' || block.type == 'div') ele.tag = 'div'
+		ele.text = block.text
+		if (block.type == '' || block.type == 'text' || block.type == 'dynamic-field') {
+			ele.tag = 'span'
+			if (block.bold) ele.tag = 'b'
+			if (block.italic) {
+				if (ele.tag == 'b') {
+					ele.style += 'font-style: italic;'
+				} else {
+					ele.tag = 'em'
+				}
+			}
+
+			if (block.underline) ele.Style += 'text-decoration:underline;'
+			if (block.strike_through) ele.Style += 'text-decoration: line-through;'
+		}
+
+		if (block.type == 'dynamic-field') {
+			let key = sb.get(block.attrs, 'key')
+			ele.text = sb.get(this.props.data, [key], ele.text)
+		}
+
+		if (block.type == 'link') {
+			ele.tag = 'a'
+			ele.attrs['href'] = block.href
+			ele.attrs['target'] = block.target
+			ele.attrs['title'] = block.title
+		}
+		if (block.type == 'mention-agent' || block.type == 'mention') {
+			ele.tag = 'span'
+			ele.class = 'mention'
+
+			let id = (block.attrs.id = '')
+
+			if (block.attrs.id == '*' || block.attrs.id == 'all') {
+				ele.text = '@' + this.$t('all')
+			}
+
+			if (id.startsWith('ag')) {
+				let ag = store.matchAgent(id)
+				let name = sb.getAgentDisplayName(ag, insert.mention.fullname)
+				ele.text = '@' + name
+			}
+		}
+		if (block.type == 'horizontal_rule') ele.tag = 'hr'
+		if (block.type == 'emoji') {
+			let code = ''
+			if (sb.size(block.attrs) > 0) code = block.attrs['code']
+			if (code == '') code = block.Text
+			if (code != '') {
+				ele.tag = 'Emoji' //
+				ele.attrs['emojiCode'] = code
+			}
+		}
+
+		if (block.type == 'table') {
+			return null
+		}
+
+		let $body = null
+		if (sb.size(block.content)) $body = sb.map(block.content, (block) => this.renderBlock(block))
+		else $body = ele.text
+		switch (ele.tag) {
+			case 'div':
+				return <div>{$body}</div>
+			case 'h1':
+				return <h1>{$body}</h1>
+			case 'h2':
+				return <h2>{$body}</h2>
+			case 'h3':
+				return <h3>{$body}</h3>
+			case 'h4':
+				return <h4>{$body}</h4>
+			case 'h5':
+				return <h5>{$body}</h5>
+			case 'h6':
+				return <h6>{$body}</h6>
+			case 'ol':
+				return <ol>{$body}</ol>
+			case 'ul':
+				return <ul>{$body}</ul>
+			case 'span':
+				return <span>{$body}</span>
+			case 'em':
+				return <em>{$body}</em>
+			case 'b':
+				return <b>{$body}</b>
+			case 'hr':
+				return <hr />
+			case 'a':
+				return (
+					<a href={ele.attrs['href']} target={ele.attrs['target']} title={ele.attrs['title']}>
+						{$body}
+					</a>
+				)
+			case 'Emoji':
+				return <Emoji emojiCode={ele.attrs['emojiCode']} />
+		}
+
+		return null
+	}
+
+	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/common.js

@@ -53,16 +53,8 @@ export const getLocale = (plugin, loc) => {
 	if (found) return found
 
 	found = sb.find(plugin.locales, (l) => {
-		l = l
-			.replace('-', '_')
-			.split('_')[0]
-			.trim()
-			.toLowerCase()
-		let compareloc = loc
-			.replace('-', '_')
-			.split('_')[0]
-			.trim()
-			.toLowerCase()
+		l = l.replace('-', '_').split('_')[0].trim().toLowerCase()
+		let compareloc = loc.replace('-', '_').split('_')[0].trim().toLowerCase()
 		return l == compareloc
 	})
 	if (found) return found

package/src/notif/notif.js

@@ -1,6 +1,7 @@
 import sb from '../util/index.js'
 import {render, h} from 'preact'
 import {Com} from '../common.js'
+import Block from '../chatbox/block.js'
 
 let notifCSS = (() => import(/*webpackChunkName: "notif-css" */ './css.js'))()
 
@@ -101,12 +102,6 @@ export default class Notif extends Com {
 			this.setState({closeAnimation: false})
 			let timestamp = this.randomTimestampt()
 			let profiles = sb.get(this.props, 'plugin.notification.profiles', [])
-			let user = profiles[Math.floor(Math.random() * sb.size(profiles))] || {}
-			// make sure image loaded
-			if (user.avatar_url && user.avatar_url.startsWith('http')) {
-				await sb.preloadImg(user.avatar_url)
-			}
-
 			sb.map(sb.get(this.props.plugin, 'notification.custom_avatar_urls'), (url) => {
 				profiles.push({
 					type: 'person',
@@ -119,21 +114,36 @@ export default class Notif extends Com {
 				})
 			})
 
-			let i18n_messages = sb.get(this.props, 'plugin.notification.i18n_message_quill_deltas', [])
+			if (sb.size(profiles) == 0) {
+				profiles.push({
+					type: 'person',
+					fullname: randomName(),
+					avatar_url: 'https://public-gcs.subiz-cdn.com/widget_assets/profile_images/VNF25.png',
+					email: randomEmail(),
+					address: randomAddress(),
+					phone: ramdomPhone(),
+					age: randomAge(),
+				})
+			}
 
-			let i18n_message = i18n_messages[Math.floor(Math.random() * sb.size(i18n_messages))]
+			let user = profiles[Math.floor(Math.random() * sb.size(profiles))] || {}
+			// make sure image loaded
+			if (user.avatar_url && user.avatar_url.startsWith('http')) {
+				await sb.preloadImg(user.avatar_url)
+			}
 
-			let fallbackmsgs = sb.get(this.props, 'plugin.notification.message_quill_deltas', [])
+			let i18n_messages = sb.get(this.props, 'plugin.notification.i18n_message_blocks', [])
+			let i18n_message = i18n_messages[Math.floor(Math.random() * sb.size(i18n_messages))].i18n
+			let fallbackmsgs = sb.get(this.props, 'plugin.notification.message_blocks', [])
 			let fallbackmessage = fallbackmsgs[Math.floor(Math.random() * sb.size(fallbackmsgs))]
 
-			let i18n_title = sb.get(this.props, 'plugin.notification.i18n_title_quill_delta')
-
+			let i18n_title = sb.get(this.props, 'plugin.notification.i18n_title_block')
 			return this.setState({
 				close: false,
 				last_show: sb.Date.now(),
 				timestamp: timestamp,
 				user: user,
-				title: this.props.t.i18n(i18n_title) || sb.get(this.props, 'plugin.notification.title_quill_delta'),
+				title: this.props.t.i18n(i18n_title) || sb.get(this.props, 'plugin.notification.title_block'),
 				message: this.props.t.i18n(i18n_message) || fallbackmessage,
 			})
 		}
@@ -194,32 +204,6 @@ export default class Notif extends Com {
 		}, 50)
 	}
 
-	renderTextFromQuillDelta(quilldelta, profile) {
-		let qd = sb.parseJSON(quilldelta)
-		if (!qd || !qd.ops) return null
-		let out = 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)
-
-		if (out.length == 1 && (out[0] == '\n' || out[0] == '')) return []
-		return out
-	}
-
 	render() {
 		if (!this.props.t) return null
 		if (!this.state.cssready) return null
@@ -260,9 +244,12 @@ export default class Notif extends Com {
 			</div>
 		)
 
-		let $title = this.renderTextFromQuillDelta(this.state.title, user)
-		let $message = this.renderTextFromQuillDelta(this.state.message, user)
-		if (!sb.size($title) && !sb.size($message)) $time = null
+		let data = {
+			'user.fullname': user.fullname,
+			'user.email': user.email,
+			'user.address': user.address,
+			'user.phone': user.phone,
+		}
 
 		return (
 			<div
@@ -285,10 +272,10 @@ export default class Notif extends Com {
 					</div>
 					<div class='notif_body'>
 						<div class='notif_title' style={sb.js2css(notif.title_style)}>
-							{$title}
+							<Block block={this.state.title} data={data} />
 						</div>
 						<div class='notif_message' style={sb.js2css(notif.message_style)}>
-							{$message}
+							<Block block={this.state.message} data={data} />
 						</div>
 						{$time}
 					</div>