@subiz/widget-v4 4.1.179 → 4.1.184

package/src/chatbox/ChatButton.js

@@ -9,10 +9,15 @@ import {h} from 'preact'
 export default class ChatButton extends Com {
 	constructor(props) {
 		super(props)
-		this.setState({
-			opacity: 0, // wait for image to load first before setting opacity to 1
-		})
-		this.loadGreeting()
+		this.state = {
+			hasPreviewDom: false,
+			previewExtraCls: 'hidden',
+			previewEvent: {},
+			ready: false,
+		}
+
+		this.readyGate = new sb.Gate()
+		this.prepareButtonImage()
 
 		this.props.store.onUpdate(this, (_) => this.forceUpdate())
 		this.props.store.onConvoEvent(this, (ev) => {
@@ -53,6 +58,17 @@ export default class ChatButton extends Com {
 			this.props.store.updateLastview({screen: 'preview', previewEvent: ev})
 			this.forceUpdate()
 		})
+		this.props.store.onLastview(this, () => {
+			let screen = sb.get(this.props.store.matchLastview(), 'screen')
+			let previewEvent = sb.get(this.props.store.matchLastview(), 'previewEvent') || {}
+			let isOpen = screen === 'preview' && sb.size(previewEvent) > 0
+			if (isOpen) {
+				this.makeAnimateShowPreview(previewEvent)
+			} else {
+				this.makeAnimateHidePreview()
+			}
+		})
+		this.loadGreeting()
 	}
 
 	fixMissingSetting(chatbox) {
@@ -94,14 +110,12 @@ export default class ChatButton extends Com {
 		if (hiddenButtonDesktop) return null
 
 		let cls = 'widget-layout widget-layout--' + position
-		let opacity = this.state.opacity
 		if (!this.props.isShow) {
 			cls += ' widget-layout--hidden'
-			opacity = 0
 		}
 
 		return (
-			<div class={cls} style={'opacity: ' + opacity + ' !important'}>
+			<div class={cls}>
 				{this.renderPreview()}
 				{this.renderButton()}
 			</div>
@@ -136,46 +150,71 @@ export default class ChatButton extends Com {
 		return unseenConvo[0].last_message_sent
 	}
 
+	showPreview(ev) {
+		this.props.store.updateLastview({screen: 'preview', previewEvent: ev})
+	}
+
+	async makeAnimateShowPreview(ev) {
+		await this.readyGate.entry()
+		let agent = this.getAgentOfPreviewEvent(ev)
+		await sb.preloadImg(agent.avatar_url)
+		if (this.state.hasPreviewDom) {
+			this.setState({previewExtraCls: 'hidden'})
+			if (this._animateTimeout) clearTimeout(this._animateTimeout)
+			this._animateTimeout = setTimeout(() => {
+				this.setState({previewExtraCls: '', previewEvent: ev})
+			}, 200)
+			return
+		}
+		this.setState({
+			hasPreviewDom: true,
+			previewExtraCls: 'hidden',
+			previewEvent: {},
+		})
+		if (this._animateTimeout) clearTimeout(this._animateTimeout)
+		this._animateTimeout = setTimeout(() => {
+			this.setState({previewExtraCls: '', previewEvent: ev})
+		}, 200)
+	}
+
+	makeAnimateHidePreview() {
+		if (this._animateTimeout) clearTimeout(this._animateTimeout)
+		this.setState({previewExtraCls: 'hidden'})
+		this._animateTimeout = setTimeout(() => {
+			this.setState({hasPreviewDom: false, previewEvent: {}})
+		}, 200)
+	}
+
 	// this method could be call from the parent
 	ShowGreeting() {
-		this.props.store.updateLastview({screen: 'preview', previewEvent: this.pickBestGreeting()})
-		this.forceUpdate()
-		//this.setState({
-		//previewEvent: this.pickBestGreeting(),
-		//})
+		let ev = this.pickBestGreeting()
+		this.showPreview(ev)
 	}
 
 	HideGreeting() {
 		this.props.store.updateLastview({screen: 'button', minimized: Date.now(), previewEvent: {}})
-		this.forceUpdate()
-		//this.setState({previewEvent: {}})
 	}
 
 	loadGreeting() {
 		let minimized = sb.get(this.props.store.matchLastview(), 'minimized')
 		let screen = sb.get(this.props.store.matchLastview(), 'screen')
-		console.log('loadGreeting matchLastview', this.props.store.matchLastview())
 		if (screen !== 'preview') return
 		if (minimized && Date.now() - minimized < Ms30Mins) return
+		let previewEvent = sb.get(this.props.store.matchLastview(), 'previewEvent') || {}
+		if (sb.size(previewEvent) > 0) {
+			this.showPreview(previewEvent)
+			return
+		}
+
 		let accountSetting = this.props.plugin.chatbox
-		// dont show preview if the user has previously closed it
 
 		let greeting = sb.get(accountSetting, 'greeting', {})
 		let text = this.props.t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
 
 		let enabled = greeting.enabled
-		if (this.props.store.isMobile()) {
-			enabled = enabled && !sb.get(greeting, 'mobile_disabled')
-			// dont show greeting fro mobile anymore
-			this.props.store.updateLastview({screen: 'button', previewEvent: {}})
-			return
-		}
 		if (!text || !enabled) {
-			this.props.store.updateLastview({screen: 'button', previewEvent: {}})
-			this.forceUpdate()
 			return
 		}
-		console.log('loadGreeting pickBestGreeting', this.pickBestGreeting())
 		this.ShowGreeting()
 	}
 
@@ -206,7 +245,6 @@ export default class ChatButton extends Com {
 			if (!convo) convo = convos[0] || {}
 			cid = convo.id
 		}
-		//this.HideGreeting()
 		this.props.onClick && this.props.onClick({view: 'chat', cid})
 	}
 
@@ -216,11 +254,10 @@ export default class ChatButton extends Com {
 		return <div class='chat-button--unread'>{unreadcount}</div>
 	}
 
-	renderPreview() {
+	getAgentOfPreviewEvent(ev) {
 		let account = this.props.store.matchAccount()
-		if (!account) return null
 		let accountSetting = this.props.plugin.chatbox
-		let previewEvent = sb.get(this.props.store.matchLastview(), 'previewEvent') || {}
+		let previewEvent = ev
 		let byid = sb.get(previewEvent, 'by.display_id', sb.get(previewEvent, 'by.id'))
 		// let agent = sb.cloneDeep(this.props.store.matchAgent(byid)) || {}
 		// somehow store.matchAgent(id) return undefined so we try to backup with store.matchAgent('*')[id]
@@ -229,10 +266,6 @@ export default class ChatButton extends Com {
 		agent = sb.cloneDeep(agent)
 		agent.fullname = agent.fullname || sb.get(account, 'name') || this.props.t('agent')
 		agent.avatar_url = agent.avatar_url || account.logo_url || require('../../assets/img/image_default.png')
-		let position = sb.get(accountSetting, 'desktop_button.position') || 'right'
-		if (this.props.store.isMobile()) {
-			position = sb.get(accountSetting, 'mobile_button.position') || position
-		}
 
 		if (accountSetting && accountSetting.hide_agent_profile) {
 			agent = Object.assign({}, account, {
@@ -241,6 +274,22 @@ export default class ChatButton extends Com {
 			})
 		}
 
+		return agent
+	}
+
+	renderPreview() {
+		if (this.props.store.isMobile()) return
+		if (!this.state.hasPreviewDom) return
+		let previewEvent = this.state.previewEvent
+		let agent = this.getAgentOfPreviewEvent(previewEvent)
+
+		let account = this.props.store.matchAccount()
+		let accountSetting = this.props.plugin.chatbox
+		let position = sb.get(accountSetting, 'desktop_button.position') || 'right'
+		if (this.props.store.isMobile()) {
+			position = sb.get(accountSetting, 'mobile_button.position') || position
+		}
+
 		let tags = this.renderMessagePreview(previewEvent)
 		let attachments = sb.get(previewEvent, 'data.message.attachments') || []
 		let quickReplies = sb.find(attachments, (att) => att.type === 'quick_replies')
@@ -257,10 +306,8 @@ export default class ChatButton extends Com {
 			uri = this.props.store.FileURL + uri
 		}
 
-		let isShowPreview = sb.get(this.props.store.matchLastview(), 'screen') === 'preview'
-
 		return (
-			<div class={`widget-preview-new-wrapper ${isShowPreview ? '' : 'hidden'}`}>
+			<div class={`widget-preview-new-wrapper ${this.state.previewExtraCls}`}>
 				<div class={`widget-preview-x-wrapper ${position}`}>
 					<div class='widget-preview--btn-close' onClick={(e) => this.closePreview(e)} />
 				</div>
@@ -270,15 +317,15 @@ export default class ChatButton extends Com {
 							alt='widget avatar'
 							class='widget-preview--avatar'
 							src={this.props.store.replaceFileUrl(agent.avatar_url)}
-							onError={(ev) => this.onProfileError(ev)}
-							onload={(_) => this.onProfileReady()}
 						/>
 						<div class='widget-preview-text-message--author'>
 							<div class='widget-preview-text-message--author-text'>{agent.fullname}</div>
-							<div class='badge badge--success'>
-								<div class='dot dot--success mr-1' />
-								{'ONLINE'}
-							</div>
+							{accountSetting.is_online && (
+								<div class='badge badge--success'>
+									<div class='dot dot--success mr-1' />
+									{'ONLINE'}
+								</div>
+							)}
 						</div>
 					</div>
 					<div class='widget-preview-text-message--content'>{tags}</div>
@@ -293,6 +340,7 @@ export default class ChatButton extends Com {
 				{sb.size(quickReplies) > 0 && (
 					<div class={`widget-preview-quick-reply-wrapper ${position}`}>
 						{sb.map(quickReplies, (reply) => {
+							if (!(reply.title || '').trim()) return
 							return (
 								<div
 									class='widget-preview-quick-reply-item'
@@ -324,14 +372,25 @@ export default class ChatButton extends Com {
 		)
 	}
 
-	onProfileReady() {
-		if (this._buttonLoaded) this.setState({opacity: 1})
-		this._profileLoaded = true
-	}
+	async prepareButtonImage() {
+		let accountSetting = this.props.plugin.chatbox
+		accountSetting = this.fixMissingSetting(accountSetting)
+		let imgsrc =
+			sb.get(accountSetting, 'desktop_button.background_image_url') ||
+			sb.get(accountSetting, 'desktop_button.background_mask_url') ||
+			defaultBubble
 
-	onButtonReady() {
-		if (this._profileLoaded) this.setState({opacity: 1})
-		this._buttonLoaded = true
+		if (this.props.store.isMobile()) {
+			imgsrc =
+				sb.get(accountSetting, 'mobile_button.background_image_url') ||
+				sb.get(accountSetting, 'mobile_button.background_mask_url') ||
+				imgsrc
+		}
+
+		imgsrc = this.props.store.replaceFileUrl(imgsrc)
+		await sb.preloadImg(imgsrc)
+		this.setState({ready: true})
+		this.readyGate.open()
 	}
 
 	renderButton() {
@@ -441,19 +500,13 @@ export default class ChatButton extends Com {
 
     `
 
+		if (!this.state.ready) cls += ' hidden'
+
 		return (
 			<div class={cls} onClick={(e) => this.onClick(e)}>
 				<div class={whitebgcls} style={whiteBgStyle}></div>
 				<div class='chat-button--img-container' style={imgcontainerstyle}>
-					<img
-						width='70'
-						height='70'
-						alt='chat button'
-						class='chat-button--img'
-						onload={() => this.onButtonReady()}
-						src={imgsrc}
-						onError={(e, a) => this.onChatButtonError(e, a)}
-					/>
+					<img width='70' height='70' alt='chat button' class='chat-button--img' src={imgsrc} />
 				</div>
 				{this.renderUnread()}
 			</div>

package/src/chatbox/Widget.js

@@ -46,6 +46,7 @@ export default class Widget extends Com {
 	msgInput = createRef()
 	componentDidMount() {
 		if (!this.props.store.isMobile()) this.focusInput()
+
 		this.updateFormDataFields()
 	}
 
@@ -131,8 +132,10 @@ export default class Widget extends Com {
 		else $body = this.renderChat()
 
 		let position = sb.get(accountSetting, 'desktop_button.position') || 'right'
-		if (this.props.store.isMobile()) position = sb.get(accountSetting, 'mobile_button.position', position)
+		if (this.props.store.isMobile() || this.props.store.isEmbededChatMode())
+			position = sb.get(accountSetting, 'mobile_button.position', position)
 		let cls = 'widget-container widget-container--' + position
+		if (this.props.store.isEmbededChatMode()) cls += ' embed-chat'
 		if (!this.props.store.isMobile() && sb.get(accountSetting, 'window_mode') === 'full')
 			cls += ' widget-container--full'
 		if (!this.props.isShow) cls += ' widget-container--hide'

package/src/chatbox/main.js

@@ -81,7 +81,7 @@ export default class Main extends Com {
 		let widgetConvoId = sb.get(lastview, 'opts.cid')
 
 		return (
-			<div class={this.props.store.isMobile() ? 'mobile' : 'desktop'}>
+			<div class={this.props.store.isMobile() || this.props.store.isEmbededChatMode() ? 'mobile' : 'desktop'}>
 				<ChatButton
 					plugin={this.props.plugin}
 					store={this.props.store}
@@ -153,16 +153,16 @@ export default class Main extends Com {
 	async showWidget(p) {
 		//this.refButton.current && this.refButton.current.ClearPreview()
 
-    let cid = p.cid
-    let newView = {screen: 'widget', minimized: 0, view: p.view}
+		let cid = p.cid
+		let newView = {screen: 'widget', minimized: 0, view: p.view, previewEvent: {}, opts: {cid}}
 		if (!p.view && !p.cid) {
 			let convoM = this.props.store.matchConvo('*')
 			let redconvo = sb.find(convoM, (convo) => !sb.isConvoSeen(convo, this.props.store.matchUser().id))
 			// try to show first convo
 			cid = sb.get(redconvo, 'id', sb.get(convoM, '0.id'))
-      newView.view = 'chat'
+			newView.view = 'chat'
+			newView.opts = {cid}
 		}
-    if (cid) newView.opts = {cid}
 
 		if (this.props.store.isMobile()) modifyViewport()
 		this.props.store.updateLastview(newView)

package/src/store/store.js

@@ -359,6 +359,27 @@ export default class Store {
 	}
 
 	matchPlugin = () => {
+		if (this.is_embed_chat_mode) {
+			// only show widget
+			let pluginM = this.cache.match('plugin')
+			if (sb.size(this.forcePlugins) > 0) pluginM = this.forcePlugins
+
+			let chatboxs = sb.filter(pluginM, (plugin, id) => plugin && plugin.type === 'chatbox')
+			if (sb.size(chatboxs) === 0) {
+				console.error('no chatbox found.')
+				return
+			}
+
+			let chatbox = sb.find(chatboxs, (chatbox) => !!chatbox)
+			if (!chatbox) {
+				// take the first chatbox
+				chatbox = chatboxs[0]
+			}
+
+			chatbox = sb.cloneDeep(chatbox)
+			chatbox.triggers = undefined
+			return {[chatbox.id]: chatbox}
+		}
 		if (sb.size(this.forcePlugins) > 0) return sb.cloneDeep(this.forcePlugins)
 		return sb.cloneDeep(this.cache.match('plugin')) || {}
 	}
@@ -462,22 +483,7 @@ export default class Store {
 
 	// last widget screen
 	matchLastview = () => {
-		let lastView = this.kv.match('lastview') || {}
-
-		// make sure last view of correct user
-		let user = this.cache.match('user') || {}
-		if (!user.id) return { screen: 'preview' }
-		if (lastView.user_id != user.id) return { screen: 'preview' }
-
-		if (!lastView.screen) {
-			lastView.screen = 'preview' // mode preview allow load default greeting
-
-			// backward compatible for user currently view chat
-			if (lastView.view === 'list' || lastView.view === 'chat') {
-				lastView.screen = 'widget'
-			}
-		}
-		return lastView
+		return this.kv.match('lastview') || {}
 	}
 
 	matchIsOpen = () => !!this.kv.match('isopen') // is widget currently open
@@ -571,6 +577,28 @@ export default class Store {
 		)
 	}
 
+	standardlizeLastview() {
+		let lastView = this.kv.match('lastview') || {}
+
+		// make sure last view of correct user
+		let user = this.cache.match('user') || {}
+		if (!user.id) lastView = {}
+		if (lastView.user_id != user.id) lastView = {}
+
+		if (!lastView.screen) {
+			lastView.screen = 'preview' // mode preview allow load default greeting
+
+			// backward compatible for user currently view chat
+			if (lastView.view === 'list' || lastView.view === 'chat') {
+				lastView.screen = 'widget'
+			}
+		}
+
+		// mobile always has screen button initially
+		if (this.isMobile()) lastView.screen = 'button'
+		this.kv.put('lastview', lastView)
+	}
+
 	async _initResource(accid, auth, realtimep) {
 		this.g_sync = {}
 
@@ -599,6 +627,7 @@ export default class Store {
 		this.seenLoop()
 		if (typeof sbz_info != 'undefined') sbz_info.store_9 = true
 		await this.reconnect({user: user}) // already fetched
+		this.standardlizeLastview()
 		if (typeof sbz_info != 'undefined') sbz_info.store_10 = true
 		this.readyGate.open()
 		this.reconnectWs(accid, user.id)
@@ -1225,14 +1254,16 @@ export default class Store {
 		let user = this.cache.match('user') || {}
 		if (!user.id) return // store not init
 		let lastview = this.matchLastview() || {}
-		lastview = {
+		let newview = {
 			...lastview,
 			...obj,
 			user_id: user.id,
 		}
 
-		this.kv.put('lastview', lastview)
+		this.kv.put('lastview', newview)
+		this.pubsub.publish('lastview', newview, lastview)
 	}
+	onLastview = (o, cb) => this.pubsub.on2(o, 'lastview', cb)
 
 	matchLastPluginRun(pluginid) {
 		let log = this.kv.match('plugin_run_logs') || {}