@subiz/widget-v4 4.1.185 → 4.1.187

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.185",
+	"version": "4.1.187",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -29,7 +29,7 @@
 		"babel-loader": "^10.0.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.4",
-		"puppeteer": "^24.24.0",
+		"puppeteer": "^24.25.0",
 		"webpack": "^5.102.1",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",

package/src/bot.js

@@ -17,7 +17,7 @@ export default function (store) {
 					bot.id,
 					bot.welcome_message,
 					common.getLocale(bot, sb.detectLang()),
-					true,
+					false,
 				)
 				if (error) return console.error(error)
 				store.logBotRun(bot.id)

package/src/chatbox/ChatButton.js

@@ -49,10 +49,13 @@ export default class ChatButton extends Com {
 
 			if (this.props.store.isMobile()) {
 				// dont show greeting fro mobile anymore
-				// need setState previewEvent for display 1 unread in mobile
-				this.props.store.updateLastview({previewEvent: ev})
-				this.forceUpdate()
-				return
+				let mobileDisabled = sb.get(this.props.plugin, 'chatbox.greeting.mobile_disabled')
+				if (mobileDisabled) {
+					// need setState previewEvent for display 1 unread in mobile
+					this.props.store.updateLastview({screen: 'button', previewEvent: ev})
+					this.forceUpdate()
+					return
+				}
 			}
 
 			this.props.store.updateLastview({screen: 'preview', previewEvent: ev})
@@ -212,7 +215,8 @@ export default class ChatButton extends Com {
 		let text = this.props.t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
 
 		let enabled = greeting.enabled
-		if (!text || !enabled) {
+		let mobileDisabled = this.props.store.isMobile() && greeting.mobile_disabled
+		if (!text || !enabled || mobileDisabled) {
 			return
 		}
 		this.ShowGreeting()
@@ -278,7 +282,7 @@ export default class ChatButton extends Com {
 	}
 
 	renderPreview() {
-		if (this.props.store.isMobile()) return
+		//if (this.props.store.isMobile()) return
 		if (!this.state.hasPreviewDom) return
 		let previewEvent = this.state.previewEvent
 		let agent = this.getAgentOfPreviewEvent(previewEvent)
@@ -294,6 +298,7 @@ export default class ChatButton extends Com {
 		let attachments = sb.get(previewEvent, 'data.message.attachments') || []
 		let quickReplies = sb.find(attachments, (att) => att.type === 'quick_replies')
 		quickReplies = sb.get(quickReplies, 'quick_replies') || []
+		quickReplies = sb.take(quickReplies, 10)
 		let imgAtt = sb.find(attachments, (att) => sb.includes(att.mimetype, 'image') && att.url)
 		let uri = sb.get(imgAtt, 'url') || ''
 		if (
@@ -308,7 +313,7 @@ export default class ChatButton extends Com {
 
 		return (
 			<div class={`widget-preview-new-wrapper ${this.state.previewExtraCls}`}>
-				<div class={`widget-preview-x-wrapper ${position}`}>
+				<div class={`widget-preview-x-wrapper ${position} ${this.props.store.isMobile() ? 'mobile' : ''}`}>
 					<div class='widget-preview--btn-close' onClick={(e) => this.closePreview(e)} />
 				</div>
 				<div class={`widget-preview-text-message ${position}`} onClick={(e) => this.onPreviewClick(e)}>
@@ -338,11 +343,14 @@ export default class ChatButton extends Com {
 					</div>
 				)}
 				{sb.size(quickReplies) > 0 && (
-					<div class={`widget-preview-quick-reply-wrapper ${position}`}>
+					<div
+						class={`widget-preview-quick-reply-wrapper ${position} ${sb.size(quickReplies) > 4 ? 'horizontal' : ''}`}
+					>
 						{sb.map(quickReplies, (reply) => {
 							if (!(reply.title || '').trim()) return
 							return (
 								<div
+									title={reply.title}
 									class='widget-preview-quick-reply-item'
 									onClick={() => {
 										// copy chooseQuickReply function from Event.js

package/src/chatbox/TextMessage.js

@@ -45,13 +45,23 @@ export default class TextMessage extends Com {
 				}
 
 				return (
-					<a href={url} target='_blank' onClick={(e) => this.props.onLink(e, url)}>
+					<a class='text-message-link' href={url} target='_blank' onClick={(e) => this.props.onLink(e, url)}>
 						{tag.text}
 					</a>
 				)
 			}
-			if (tag.type === 'phone') return <a href={'tel:' + tag.text}>{tag.text}</a>
-			if (tag.type === 'email') return <a href={'mailto:' + tag.text}>{tag.text}</a>
+			if (tag.type === 'phone')
+				return (
+					<a class='text-message-link' href={'tel:' + tag.text}>
+						{tag.text}
+					</a>
+				)
+			if (tag.type === 'email')
+				return (
+					<a class='text-message-link' href={'mailto:' + tag.text}>
+						{tag.text}
+					</a>
+				)
 			return tag.text
 		})
 
@@ -80,7 +90,7 @@ export default class TextMessage extends Com {
 		if (byType === 'agent') {
 			return (
 				<div class='message-agent message-text--agent' title={t}>
-					<Block block={block} onLink={this.props.onLink} textMessage/>
+					<Block block={block} onLink={this.props.onLink} textMessage />
 					{this.renderTime()}
 				</div>
 			)
@@ -89,7 +99,7 @@ export default class TextMessage extends Com {
 		if (this.props.ev._error) msgcls += ' message-user--error'
 		return (
 			<div class={msgcls} title={t}>
-				<Block block={block} onLink={this.props.onLink} textMessage/>
+				<Block block={block} onLink={this.props.onLink} textMessage />
 			</div>
 		)
 	}

package/src/chatbox/block.js

@@ -188,6 +188,7 @@ export default class Block extends Com {
 			case 'a':
 				return (
 					<a
+          class={this.props.textMessage ? 'message-text-link' : ''}
 						href={ele.attrs['href']}
 						target={this.props.textMessage ? '_blank' : ele.attrs['target']}
 						title={ele.attrs['title']}

package/src/chatbox/main.js

@@ -26,6 +26,8 @@ export default class Main extends Com {
 		let chatbox = found.chatbox
 		let margin_y = sb.get(chatbox, 'desktop_button.margin_y')
 		chatbox.desktop_widget_max_height = margin_y ? `calc(100% - ${margin_y + 10}px)` : 'calc(100% - 40px)'
+		const PREVIEW_MAX_WIDTH = 340
+		chatbox.preview_max_width = Math.min(PREVIEW_MAX_WIDTH, chatbox.width) + 'px'
 		var outcss = sb.replaceCssVariable(css, chatbox)
 		sb.setCss(this.props.plugin.id, this.$cssStyleDiv, outcss)
 	}

package/src/store/store.js

@@ -594,8 +594,14 @@ export default class Store {
 			}
 		}
 
-		// mobile always has screen button initially
-		if (this.isMobile()) lastView.screen = 'button'
+		if (this.isMobile()) {
+			lastView.screen = 'preview'
+			let plugins = this.matchPlugin() || {}
+			let chatbox = sb.find(plugins, (plugin) => plugin.type === 'chatbox') || {}
+			if (sb.get(chatbox, 'chatbox.greeting.mobile_disabled')) {
+				lastView.screen = 'button'
+			}
+		}
 		this.kv.put('lastview', lastView)
 	}
 

package/src/util/common.js

@@ -668,6 +668,7 @@ export function replaceCssVariable(css, setting) {
 	tokens = tokenize(tokens, "'@desktop_button.margin_x'")
 	tokens = tokenize(tokens, "'@desktop_button.margin_y'")
 	tokens = tokenize(tokens, "'@desktop_widget_max_height'")
+	tokens = tokenize(tokens, "'@preview_max_width'")
 	tokens = tokenize(tokens, "'@mobile_button.width'")
 	tokens = tokenize(tokens, "'@mobile_button.height'")
 	tokens = tokenize(tokens, "'@mobile_button.background'")

package/src/util/index.js

@@ -23,6 +23,7 @@ sb.Mutex = require('./mutex.js').default
 var op = require('./op.js')
 sb.get = op.get
 sb.set = op.set
+sb.take = op.take
 
 sb.Pubsub = require('./pubsub.js').default
 

package/src/util/op.js

@@ -9,26 +9,26 @@ var isArray =
 		return toStr.call(obj) === '[object Array]'
 	}
 
-function hasOwnProperty (obj, prop) {
+function hasOwnProperty(obj, prop) {
 	if (obj == null) return false
 	//to handle objects with null prototypes (too edge case?)
 	return Object.prototype.hasOwnProperty.call(obj, prop)
 }
 
-function getKey (key) {
+function getKey(key) {
 	var intKey = parseInt(key)
 	return intKey.toString() === key ? intKey : key
 }
 
-function hasShallowProperty (obj, prop) {
+function hasShallowProperty(obj, prop) {
 	return (typeof prop === 'number' && isArray(obj)) || hasOwnProperty(obj, prop)
 }
 
-function getShallowProperty (obj, prop) {
+function getShallowProperty(obj, prop) {
 	if (hasShallowProperty(obj, prop)) return obj[prop]
 }
 
-export function get (obj, path, defaultValue) {
+export function get(obj, path, defaultValue) {
 	if (typeof path === 'number') path = [path]
 	if (!path || path.length === 0) return obj
 	if (obj == null) return defaultValue
@@ -44,7 +44,7 @@ export function get (obj, path, defaultValue) {
 	return get(obj[currentPath], path.slice(1), defaultValue)
 }
 
-export function set (obj, path, value) {
+export function set(obj, path, value) {
 	if (typeof path === 'number') path = [path]
 	if (!path || path.length === 0) return obj
 	if (typeof path === 'string') {
@@ -65,3 +65,15 @@ export function set (obj, path, value) {
 
 	return set(obj[currentPath], path.slice(1), value)
 }
+
+export function take(arr, n = 1) {
+	if (!Array.isArray(arr)) return []
+
+	let len = arr.length
+	if (typeof len !== 'number' || len <= 0) return []
+
+	if (n <= 0) return []
+	let end = Math.min(n, len)
+
+	return arr.slice(0, end)
+}