@subiz/widget-v4 4.1.81 → 4.1.82

package/package.json

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

package/src/chatbox/Typing.js

@@ -32,7 +32,7 @@ export default class Typing extends Com {
 			if (sb.get(ev, 'type') !== 'conversation_typing') return
 			// dont show typing of agent, some agent dont like this
 			let ag = this.props.store.matchAgent(sb.get(ev, 'by.id')) || {}
-			if (ag.type == 'agent') return
+			if (ag.type == 'agent' && !sb.get(this.props.plugin, 'chatbox.show_agent_typing')) return
 			this.setState({ev: ev, isShow: true})
 			if (this.timer) sb.clearTimeout(this.timer)
 			this.timer = sb.setTimeout(() => {
@@ -44,11 +44,23 @@ export default class Typing extends Com {
 		})
 	}
 
+	ShowTyping() {
+		this.setState({isShow: true})
+		if (this.timer) sb.clearTimeout(this.timer)
+		this.timer = sb.setTimeout(() => {
+			this.timer = null
+			this.setState({isShow: false})
+		}, 5000)
+	}
+
 	render() {
 		let account = this.props.store.matchAccount()
 		var cls = this.state.isShow ? '' : 'typing--hidden'
 		let byid = sb.get(this.state.ev, 'by.display_id', sb.get(this.state.ev, 'by.id'))
 		let agentName = sb.getAgentDisplayName(account, this.props.store.matchAgent(byid))
+		if (sb.get(this.props.plugin, 'chatbox.hide_agent_profile')) {
+			agentName = sb.get(account, 'name')
+		}
 		return (
 			<div class={`typing ${cls}`}>
 				{agentName} {this.props.t('typing')}

package/src/chatbox/Widget.js

@@ -40,6 +40,7 @@ export default class Widget extends Com {
 		})
 
 		this.props.store.onUpdate(this, (_) => this.forceUpdate())
+		this.refTyping = createRef()
 	}
 
 	msgInput = createRef()
@@ -71,6 +72,10 @@ export default class Widget extends Com {
 		// this.updateFormDataFields()
 	}
 
+	ShowTyping() {
+		this.refTyping.current && this.refTyping.current.ShowTyping()
+	}
+
 	shouldShowForm() {
 		// always show form when ask agentgroup
 		let form
@@ -158,14 +163,36 @@ export default class Widget extends Com {
 				hasError = true
 			} else field.error = ''
 
-			if (key.substr(5) === 'emails' && !sb.isEmail(field.value) && field.is_required) {
-				field.error = this.props.t('error_email_invalid') // 'The email is not valid'
-				hasError = true
+			if (key.substr(5) === 'emails') {
+				if (field.is_required) {
+					if (!sb.isEmail(field.value)) {
+						field.error = this.props.t('error_email_invalid') // 'The email is not valid'
+						hasError = true
+					}
+				} else {
+					let value = field.value || ''
+					if (typeof value !== 'string') value = value + '' // try to makesure use ''.trim doesnt errror
+					if (value.trim() && !sb.isEmail(field.value)) {
+						field.error = this.props.t('error_email_invalid') // 'The email is not valid'
+						hasError = true
+					}
+				}
 			}
 
-			if (key.substr(5) === 'phones' && !sb.isPhone(field.value) && field.is_required) {
-				field.error = this.props.t('error_phone_invalid') // 'Phone number is not valid'
-				hasError = true
+			if (key.substr(5) === 'phones') {
+				if (field.is_required) {
+					if (!sb.isPhone(field.value)) {
+						field.error = this.props.t('error_phone_invalid') // 'The email is not valid'
+						hasError = true
+					}
+				} else {
+					let value = field.value || ''
+					if (typeof value !== 'string') value = value + '' // try to makesure use ''.trim doesnt errror
+					if (value.trim() && !sb.isPhone(field.value)) {
+						field.error = this.props.t('error_phone_invalid') // 'The email is not valid'
+						hasError = true
+					}
+				}
 			}
 		})
 		if (hasError) return this.forceUpdate()
@@ -786,7 +813,13 @@ export default class Widget extends Com {
 						onPostback={(e) => this.createPostback(e)}
 						t={this.props.t}
 					/>
-					<Typing store={this.props.store} cid={this.props.cid} t={this.props.t} />
+					<Typing
+						store={this.props.store}
+						cid={this.props.cid}
+						t={this.props.t}
+						plugin={this.props.plugin}
+						ref={this.refTyping}
+					/>
 				</div>
 				<Rating
 					forceView={this.props.view}

package/src/chatbox/main.js

@@ -176,6 +176,10 @@ export default class Main extends Com {
 		this.refButton.current && this.refButton.current.HideGreeting()
 	}
 
+	showTyping() {
+		this.refWidget.current && this.refWidget.current.ShowTyping()
+	}
+
 	hideWidget() {
 		restoreViewport()
 		this.props.store.setIsOpen(false)

package/src/lib.js

@@ -202,6 +202,11 @@ class Widget {
 		this.pluginMgr.showCurrentChatbox({view, cid: cid})
 	}
 
+	async showTyping() {
+		await this.domGate.entry()
+		this.pluginMgr.showCurrentChatboxTyping()
+	}
+
 	async hideWidget() {
 		await this.domGate.entry()
 		this.pluginMgr.hideCurrentChatbox()

package/src/plugin.js

@@ -293,6 +293,11 @@ export default class PluginMgr {
 		if (chatbox) return chatbox.call('showWidget', p)
 	}
 
+	showCurrentChatboxTyping() {
+		let chatbox = this.findChatbox()
+		if (chatbox) return chatbox.call('showTyping')
+	}
+
 	showCurrentGreeting() {
 		let chatbox = this.findChatbox()
 		if (chatbox) return chatbox.call('showGreeting')