@subiz/widget-v4 4.1.69 → 4.1.71

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.69",
+	"version": "4.1.71",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",

package/src/chatbox/AgentsAvatar.js

@@ -3,161 +3,98 @@ import {Com} from '../common.js'
 import {h} from 'preact'
 
 //  ['mode', 'tooltipPos', 'agent_ids', 'border'],
-export default class AgentsAvatar extends Com {
-	constructor(props) {
-		super(props)
-	}
-
-	render() {
-		let accountSetting = this.props.plugin.chatbox
-		let acc = this.props.store.matchAccount() || {}
-		var tooltippos = this.props.tooltipPos || 'bottom'
-		var mode = this.props.mode || 'primary'
-
-		if (accountSetting && accountSetting.hide_agent_profile) {
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
-						<img
-							width={35}
-							height={35}
-							alt='agent avatar left'
-							class='avatar group-avatar--agent-left'
-							src={this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
-						/>
-					</div>
-				</div>
-			)
-		}
-
-		let agentM = this.props.store.matchAgent('*')
-		var agents = sb.map(this.props.agent_ids, (id) => agentM[id])
-		if (this.props.agent_ids === undefined || sb.size(this.props.agent_ids) === 0) {
-			var agids = sb.get(accountSetting, 'header.agent_ids', [])
-			agids = sb.filter(agids, (id) => !!agentM[id])
-			if (agids.length !== 0) {
-				agents = sb.map(agids, (id) => agentM[id])
-			} else {
-				agents = sb.filter(agentM, (agent) => agent.type === 'agent')
-			}
-		}
+export default function AgentsAvatar(props) {
+	let accountSetting = props.plugin.chatbox
+	let acc = props.store.matchAccount() || {}
+	var tooltippos = props.tooltipPos || 'bottom'
+	var mode = props.mode || 'primary'
 
-		agents = sb.filter(agents, (ag) => !!ag)
-		if (agents.length === 0) {
-			// use account avatar
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
-						<img
-							width={35}
-							height={35}
-							alt='agent avatar left'
-							class='avatar group-avatar--agent-left'
-							src={this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
-						/>
-					</div>
+	if (accountSetting && accountSetting.hide_agent_profile) {
+		return (
+			<div class={`group-avatar group-avatar--${mode}`}>
+				<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
+					<img
+						width={35}
+						height={35}
+						alt='agent avatar left'
+						class='avatar group-avatar--agent-left'
+						src={props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
+					/>
 				</div>
-			)
-		}
+			</div>
+		)
+	}
 
-		// 1 agent
-		if (agents.length === 1) {
-			var agent = agents[0]
-			var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left'
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div
-						class='d-inline-block pos-relative'
-						data-tooltip={agent.fullname || acc.name}
-						data-tooltip-position={tooltippos}
-					>
-						<img
-							width={35}
-							height={35}
-							class={`avatar ${groupClass}`}
-							alt='agent avatar'
-							src={this.props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')}
-						/>
-					</div>
-				</div>
-			)
+	let agentM = props.store.matchAgent('*')
+	var agents = sb.map(props.agent_ids, (id) => agentM[id])
+	if (props.agent_ids === undefined || sb.size(props.agent_ids) === 0) {
+		var agids = sb.get(accountSetting, 'header.agent_ids', [])
+		agids = sb.filter(agids, (id) => !!agentM[id])
+		if (agids.length !== 0) {
+			agents = sb.map(agids, (id) => agentM[id])
+		} else {
+			agents = sb.filter(agentM, (agent) => agent.type === 'agent')
 		}
+	}
 
-		// 2 agent
-		if (agents.length === 2) {
-			let leftAgent = agents[0]
-			let rightAgent = agents[1]
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div
-						class='d-inline-block pos-relative'
-						data-tooltip={leftAgent.fullname || acc.name}
-						data-tooltip-position={tooltippos}
-					>
-						<img
-							width={35}
-							height={35}
-							alt='agent avatar left'
-							class='avatar group-avatar--agent-left'
-							src={
-								this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-							}
-						/>
-					</div>
-					<div
-						class='d-inline-block pos-relative'
-						data-tooltip={rightAgent.fullname || acc.name}
-						data-tooltip-position={tooltippos}
-					>
-						<img
-							alt='agent avatar right'
-							width={35}
-							height={35}
-							class='avatar group-avatar--agent-right'
-							src={
-								this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-							}
-						/>
-					</div>
+	agents = sb.filter(agents, (ag) => !!ag)
+	if (agents.length === 0) {
+		// use account avatar
+		return (
+			<div class={`group-avatar group-avatar--${mode}`}>
+				<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
+					<img
+						width={35}
+						height={35}
+						alt='agent avatar left'
+						class='avatar group-avatar--agent-left'
+						src={props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
+					/>
 				</div>
-			)
-		}
-
-		// >=3 agent
+			</div>
+		)
+	}
 
-		let leftAgent = agents[0]
-		let middleAgent = agents[1]
-		let rightAgent = agents[2]
+	// 1 agent
+	if (agents.length === 1) {
+		var agent = agents[0]
+		var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left'
 		return (
 			<div class={`group-avatar group-avatar--${mode}`}>
 				<div
 					class='d-inline-block pos-relative'
-					data-tooltip={leftAgent.fullname || acc.name}
+					data-tooltip={agent.fullname || acc.name}
 					data-tooltip-position={tooltippos}
 				>
 					<img
 						width={35}
 						height={35}
-						alt='agent avatar left'
-						class='avatar group-avatar--agent-left'
-						src={
-							this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-						}
+						class={`avatar ${groupClass}`}
+						alt='agent avatar'
+						src={props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')}
 					/>
 				</div>
+			</div>
+		)
+	}
+
+	// 2 agent
+	if (agents.length === 2) {
+		let leftAgent = agents[0]
+		let rightAgent = agents[1]
+		return (
+			<div class={`group-avatar group-avatar--${mode}`}>
 				<div
 					class='d-inline-block pos-relative'
-					data-tooltip={middleAgent.fullname || acc.name}
+					data-tooltip={leftAgent.fullname || acc.name}
 					data-tooltip-position={tooltippos}
 				>
 					<img
-						alt='agent avatar middle'
 						width={35}
 						height={35}
-						class='avatar group-avatar--agent-middle'
-						src={
-							this.props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-						}
+						alt='agent avatar left'
+						class='avatar group-avatar--agent-left'
+						src={props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
 					/>
 				</div>
 				<div
@@ -166,16 +103,63 @@ export default class AgentsAvatar extends Com {
 					data-tooltip-position={tooltippos}
 				>
 					<img
+						alt='agent avatar right'
 						width={35}
 						height={35}
-						alt='agent avatar right'
 						class='avatar group-avatar--agent-right'
-						src={
-							this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-						}
+						src={props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
 					/>
 				</div>
 			</div>
 		)
 	}
+
+	// >=3 agent
+
+	let leftAgent = agents[0]
+	let middleAgent = agents[1]
+	let rightAgent = agents[2]
+	return (
+		<div class={`group-avatar group-avatar--${mode}`}>
+			<div
+				class='d-inline-block pos-relative'
+				data-tooltip={leftAgent.fullname || acc.name}
+				data-tooltip-position={tooltippos}
+			>
+				<img
+					width={35}
+					height={35}
+					alt='agent avatar left'
+					class='avatar group-avatar--agent-left'
+					src={props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
+				/>
+			</div>
+			<div
+				class='d-inline-block pos-relative'
+				data-tooltip={middleAgent.fullname || acc.name}
+				data-tooltip-position={tooltippos}
+			>
+				<img
+					alt='agent avatar middle'
+					width={35}
+					height={35}
+					class='avatar group-avatar--agent-middle'
+					src={props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
+				/>
+			</div>
+			<div
+				class='d-inline-block pos-relative'
+				data-tooltip={rightAgent.fullname || acc.name}
+				data-tooltip-position={tooltippos}
+			>
+				<img
+					width={35}
+					height={35}
+					alt='agent avatar right'
+					class='avatar group-avatar--agent-right'
+					src={props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
+				/>
+			</div>
+		</div>
+	)
 }

package/src/chatbox/ButtonAttachments.js

@@ -1,26 +1,19 @@
 import Buttons from './Buttons.js'
 import sb from '../util/index.js'
-import { Com } from '../common.js'
-import { h } from 'preact'
+import {h} from 'preact'
 
-export default class ButtonAttachments extends Com {
-	constructor (props) {
-		super(props)
-	}
+export default function ButtonAttachments(props) {
+	// dont support user sent button yet
+	let byType = sb.get(props.ev, 'by.type')
+	if (byType === 'user') return null
 
-	render () {
-		// dont support user sent button yet
-		let byType = sb.get(this.props.ev, 'by.type')
-		if (byType === 'user') return null
+	// filter out all button
+	let buttons = []
+	let attachments = sb.get(props.ev, 'data.message.attachments', [])
+	sb.each(attachments, (att, i) => {
+		if (!att || sb.get(att, 'type') !== 'button') return
+		sb.each(sb.get(att, 'buttons') || [], (btn) => buttons.push(btn))
+	})
 
-		// filter out all button
-		let buttons = []
-		let attachments = sb.get(this.props.ev, 'data.message.attachments', [])
-		sb.each(attachments, (att, i) => {
-			if (!att || sb.get(att, 'type') !== 'button') return
-			sb.each(sb.get(att, 'buttons') || [], btn => buttons.push(btn))
-		})
-
-		return <Buttons store={this.props.store} buttons={buttons} t={this.props.t}/>
-	}
+	return <Buttons store={props.store} buttons={buttons} t={props.t} />
 }

package/src/chatbox/Buttons.js

@@ -1,44 +1,36 @@
 import sb from '../util/index.js'
-import {Com} from '../common.js'
 import {h} from 'preact'
 
-export default class Buttons extends Com {
-	constructor(props) {
-		super(props)
-	}
+export default function Buttons(props) {
+	if (sb.size(props.buttons) === 0) return null
+	var $buttons = sb.map(props.buttons, (button, index) => {
+		if (button.type === 'call_button') {
+			return (
+				<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
+					{props.t.i18n(button.i18n_title) || button.title}
+				</a>
+			)
+		}
 
-	render() {
-		if (sb.size(this.props.buttons) === 0) return null
-		var $buttons = sb.map(this.props.buttons, (button, index) => {
-			if (button.type === 'call_button') {
-				return (
-					<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
-						{this.props.t.i18n(button.i18n_title) || button.title}
-					</a>
-				)
-			}
+		if (button.type === 'url_button') {
+			return (
+				<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
+					{props.t.i18n(button.i18n_title) || button.title || button.url}
+				</a>
+			)
+		}
 
-			if (button.type === 'url_button') {
-				return (
-					<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
-						{this.props.t.i18n(button.i18n_title) || button.title || button.url} 
-					</a>
-				)
-			}
+		if (button.type === 'postback_button') {
+			return (
+				<a class='url-button-attachment' href='javascript:;' onClick={(_) => props.onSelect(button)}>
+					{props.t.i18n(button.i18n_title) || button.title}
+				</a>
+			)
+		}
 
-			if (button.type === 'postback_button') {
-				return (
-					<a class='url-button-attachment' href='javascript:;' onClick={(_) => this.props.onSelect(button)}>
-						{this.props.t.i18n(button.i18n_title) || button.title}
-					</a>
-				)
-			}
-
-			if (button.type === 'widget_ask_desktop_notify_button') return null
-			if (button.type === 'widget_ask_contact_info_button') return null
-			return null
-		})
-
-		return <div class='button-attachments'>{$buttons}</div>
-	}
+		if (button.type === 'widget_ask_desktop_notify_button') return null
+		if (button.type === 'widget_ask_contact_info_button') return null
+		return null
+	})
+	return <div class='button-attachments'>{$buttons}</div>
 }

package/src/chatbox/ChatButton.js

@@ -128,7 +128,12 @@ export default class ChatButton extends Com {
 
 		let greeting = sb.get(accountSetting, 'greeting', {})
 		let text = this.props.t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
-		if (!text || !greeting.enabled) {
+
+		let enabled = greeting.enabled
+		if (this.props.store.isMobile()) {
+			enabled = enabled && !sb.get(greeting, 'mobile_disabled')
+		}
+		if (!text || !enabled) {
 			this.setState({previewEvent: {}})
 			return
 		}

package/src/chatbox/Rating.js

@@ -121,7 +121,7 @@ export default class Rating extends Com {
 		let foundUser = false
 		sb.map(this.props.store.listEvents(this.props.cid), (ev) => {
 			if (!ev || !ev.by) return
-			if (ev.by.type == 'user') foundUser = true
+			if (ev.by.type == 'user' && ev.type == 'message_sent') foundUser = true
 			if (ev.type === 'conversation_state_updated' && sb.get(ev, 'data.conversation.state') === 'ended') {
 				ended = ev
 			}

package/src/chatbox/Widget.js

@@ -258,7 +258,8 @@ export default class Widget extends Com {
 		}
 
 		this.setState({formData})
-		if (!this.props.store.isMobile()) this.focusInput()
+		// dont steal focus on mobile or trying to override form
+		if (!this.props.store.isMobile() && !form._updated) this.focusInput()
 	}
 
 	onBooleanChange(key, e) {