@subiz/widget-v4 4.1.178 → 4.1.184

package/src/chatbox/ChatButton.js

@@ -9,12 +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.state = {
+			hasPreviewDom: false,
+			previewExtraCls: 'hidden',
 			previewEvent: {},
-			displayPreview: false,
-		})
-		this.loadGreeting()
+			ready: false,
+		}
+
+		this.readyGate = new sb.Gate()
+		this.prepareButtonImage()
 
 		this.props.store.onUpdate(this, (_) => this.forceUpdate())
 		this.props.store.onConvoEvent(this, (ev) => {
@@ -39,9 +42,33 @@ export default class ChatButton extends Com {
 				let message = sb.get(ev, 'data.message.text') || ''
 				if (!message && isquickreplies) return
 			}
+			let screen = sb.get(this.props.store.matchLastview(), 'screen')
+			let minimized = sb.get(this.props.store.matchLastview(), 'minimized')
+			if (screen === 'widget') return
+			if (minimized && Date.now() - minimized < Ms30Mins) return
 
-			this.setState({displayPreview: true, previewEvent: ev})
+			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
+			}
+
+			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) {
@@ -83,29 +110,18 @@ 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>
 		)
 	}
 
-	// this method could be call from the parent
-	ClearPreview() {
-		this.setState({previewEvent: {}})
-	}
-
-	ClosePreview() {
-		this.setState({displayPreview: false})
-	}
-
 	pickBestGreeting() {
 		let convoM = this.props.store.matchConvo('*')
 		let unseenConvo = sb
@@ -134,32 +150,69 @@ export default class ChatButton extends Com {
 		return unseenConvo[0].last_message_sent
 	}
 
-	// this method could be call from the parent
-	ShowGreeting() {
+	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({
-			previewEvent: this.pickBestGreeting(),
-			displayPreview: true,
+			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() {
+		let ev = this.pickBestGreeting()
+		this.showPreview(ev)
 	}
 
 	HideGreeting() {
-		this.setState({previewEvent: {}})
+		this.props.store.updateLastview({screen: 'button', minimized: Date.now(), previewEvent: {}})
 	}
 
 	loadGreeting() {
+		let minimized = sb.get(this.props.store.matchLastview(), 'minimized')
+		let screen = sb.get(this.props.store.matchLastview(), 'screen')
+		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
-		if (new sb.Date().getTime() - this.props.store.matchClosePreviewAt() < Ms30Mins) return
 
 		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')
-		}
 		if (!text || !enabled) {
-			this.setState({previewEvent: {}})
 			return
 		}
 		this.ShowGreeting()
@@ -184,14 +237,14 @@ export default class ChatButton extends Com {
 	}
 
 	onPreviewClick(e) {
-		let cid = sb.convoOfEv(this.state.previewEvent)
+		let previewEvent = sb.get(this.props.store.matchLastview(), 'previewEvent') || {}
+		let cid = sb.convoOfEv(previewEvent)
 		if (!cid) {
 			let convos = sb.map(this.props.store.matchConvo('*'))
 			let convo = sb.find(convos, (convo) => !sb.isConvoSeen(convo, this.props.store.matchUser().id))
 			if (!convo) convo = convos[0] || {}
 			cid = convo.id
 		}
-		this.closePreview(e)
 		this.props.onClick && this.props.onClick({view: 'chat', cid})
 	}
 
@@ -201,11 +254,11 @@ 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 byid = sb.get(this.state.previewEvent, 'by.display_id', sb.get(this.state.previewEvent, 'by.id'))
+		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]
 		let agent = this.props.store.matchAgent(byid)
@@ -213,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, {
@@ -225,44 +274,123 @@ export default class ChatButton extends Com {
 			})
 		}
 
-		let cls = 'widget-preview widget-preview--' + position
-		if (!this.state.displayPreview) cls += ' widget-preview--hidden'
+		return agent
+	}
 
-		var tags = this.renderMessagePreview(this.state.previewEvent)
-		if (sb.size(tags) === 0) cls += ' widget-preview--hidden'
+	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')
+		quickReplies = sb.get(quickReplies, 'quick_replies') || []
+		let imgAtt = sb.find(attachments, (att) => sb.includes(att.mimetype, 'image') && att.url)
+		let uri = sb.get(imgAtt, 'url') || ''
+		if (
+			uri &&
+			!uri.startsWith('https://') &&
+			!uri.startsWith('http://') &&
+			!uri.startsWith('content://') &&
+			!uri.startsWith('data:')
+		) {
+			uri = this.props.store.FileURL + uri
+		}
 
 		return (
-			<div class={cls}>
-				<div class='widget-preview--body'>
-					<img
-						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--content' onClick={(e) => this.onPreviewClick(e)}>
-						<div class='widget-preview--title'>{agent.fullname}</div>
-						<p class='widget-preview--message'>{tags}</p>
-					</div>
+			<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>
-
-				<div class='widget-preview--action' onClick={(e) => this.onPreviewClick(e)}>
-					<div class='widget-preview--action-text'>{this.props.t('chat_now')}</div>
+				<div class={`widget-preview-text-message ${position}`} onClick={(e) => this.onPreviewClick(e)}>
+					<div class='widget-preview-text-message--header'>
+						<img
+							alt='widget avatar'
+							class='widget-preview--avatar'
+							src={this.props.store.replaceFileUrl(agent.avatar_url)}
+						/>
+						<div class='widget-preview-text-message--author'>
+							<div class='widget-preview-text-message--author-text'>{agent.fullname}</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>
 				</div>
+				{uri && (
+					<div class={`widget-preview-image-wrapper ${position}`}>
+						<div class='widget-preview-image-item' onClick={() => this.onPreviewClick()}>
+							<img src={uri} />
+						</div>
+					</div>
+				)}
+				{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'
+									onClick={() => {
+										// copy chooseQuickReply function from Event.js
+										this.props.onSelectQuickReply({
+											text: reply.title,
+											format: 'plaintext',
+											conversation_id: sb.convoOfEv(previewEvent),
+											attachments: [
+												{
+													type: 'postback',
+													postback: {
+														event_id: previewEvent.id,
+														payload: reply.payload,
+													},
+												},
+											],
+										})
+									}}
+								>
+									{reply.title}
+								</div>
+							)
+						})}
+					</div>
+				)}
 			</div>
 		)
 	}
 
-	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() {
@@ -372,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>
@@ -440,9 +562,7 @@ export default class ChatButton extends Com {
 			e.preventDefault()
 			e.stopPropagation()
 		}
-		this.setState({displayPreview: false})
-		this.props.store.closePreview()
-		this.forceUpdate()
+		this.HideGreeting()
 	}
 }
 

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()
 	}
 
@@ -63,7 +64,6 @@ export default class Widget extends Com {
 		if (prevProp.cid !== this.props.cid) {
 			this.closeOrder()
 			this.setState({clickedJoin: false, quickReplyMessage: {}})
-			// this.props.store.setLastview('chat', { cid: this.props.cid })
 			sb.setTimeout(() => {
 				// focus Events then focus MessageInput
 				// if there is any pending form, MessageInput will be disabled
@@ -132,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

@@ -45,9 +45,6 @@ export default class Main extends Com {
 
 		this.setState({
 			cssReady: false,
-			isShowWidget: false,
-			widgetView: '',
-			widgetConvoId: '',
 		})
 
 		this.checkExpand()
@@ -62,16 +59,6 @@ export default class Main extends Com {
 		})
 		this.refreshCSS()
 		this.setState({cssReady: true})
-
-		if (this.props.store.matchIsOpen() && this.props.store.matchLastview().view) {
-			if (this.props.store.isMobile()) return // dont auto expand widget on mobile
-			this.showWidget(
-				Object.assign({}, this.props.store.matchLastview().opts, {view: this.props.store.matchLastview().view}),
-			)
-		} else {
-			restoreViewport()
-			if (!this.state.isShowWidget) this.hideWidget()
-		}
 	}
 
 	render() {
@@ -88,23 +75,29 @@ export default class Main extends Com {
 			return null
 		}
 		if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_main = sb.Date.now()
+		let lastview = this.props.store.matchLastview() || {}
+		let isShowWidget = lastview.screen === 'widget'
+		let widgetView = lastview.view
+		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}
 					key='chat_button'
 					ref={this.refButton}
-					isShow={!this.state.isShowWidget}
+					isShow={!isShowWidget}
 					onClick={(e) => this.showWidget(e)}
+					onSelectQuickReply={(msg) => this.onSelectQuickReply(msg)}
 					t={this.props.t}
 				/>
 				<Widget
 					plugin={this.props.plugin}
 					store={this.props.store}
-					view={this.state.widgetView}
-					cid={this.state.widgetConvoId}
-					isShow={this.state.isShowWidget}
+					view={widgetView}
+					cid={widgetConvoId}
+					isShow={isShowWidget}
 					onClose={(a) => this.onWidgetClose(a)}
 					onGo={(a) => this.showWidget(a)}
 					t={this.props.t}
@@ -124,7 +117,8 @@ export default class Main extends Com {
 		if (!$widget) return
 		if ($widget.wasFormInputed) return
 		if (ev.type !== 'message_sent') return
-		if (!this.state.isShowWidget) return
+		let isShowWidget = sb.get(this.props.store.matchLastview(), 'screen') === 'widget'
+		if (!isShowWidget) return
 
 		let byType = sb.get(ev, 'by.type')
 		let byid = sb.get(ev, 'by.id') || ''
@@ -140,50 +134,39 @@ export default class Main extends Com {
 		if (this.props.store.isMobile()) return
 
 		if (this.props.plugin._no_auto_expand) return
-		// dont try to expand widget if user has already closed it
-		if (this.props.store.matchHasManuallyClosed()) return
+		return
 
 		let convoM = this.props.store.matchConvo('*')
 		let redconvo = sb.find(convoM, (convo) => !sb.isConvoSeen(convo, this.props.store.matchUser().id))
 		if (!redconvo || !redconvo.id) return
-		if (!this.state.isShowWidget) this.showWidget({view: 'chat', cid: redconvo.id})
+		let isShowWidget = sb.get(this.props.store.matchLastview(), 'screen') === 'widget'
+		if (!isShowWidget) this.showWidget({view: 'chat', cid: redconvo.id})
 	}
 
-	getCurrentView() {
-		return {
-			is_show_widget: this.state.isShowWidget,
-			conversation_id: this.state.widgetConvoId,
-			view: this.state.widgetView,
-		}
+	onSelectQuickReply(message) {
+		this.showWidget({view: 'chat', cid: message.conversation_id})
+		this.forceUpdate(() => {
+			this.refWidget.current && this.refWidget.current.sendMessage(message)
+		})
 	}
 
 	async showWidget(p) {
-		this.refButton.current && this.refButton.current.ClearPreview()
-		if (!p.view) {
-			let lastview = this.props.store.matchLastview() || {}
-			p.view = sb.get(lastview, 'view')
-			p.cid = sb.get(lastview, 'opts.cid')
-		}
-		p = p || {}
+		//this.refButton.current && this.refButton.current.ClearPreview()
 
+		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
-			p.cid = sb.get(redconvo, 'id', sb.get(convoM, '0.id'))
-			p.view = 'chat'
+			cid = sb.get(redconvo, 'id', sb.get(convoM, '0.id'))
+			newView.view = 'chat'
+			newView.opts = {cid}
 		}
 
 		if (this.props.store.isMobile()) modifyViewport()
-		this.setState({widgetConvoId: p.cid, widgetView: p.view})
-		this.props.store.setIsOpen(true)
-
-		// lazy load widget
-		// if (!Widget) Widget = (await loadWidget()).default
-
+		this.props.store.updateLastview(newView)
 		this.forceUpdate()
-		this.setState({isShowWidget: true})
-		this.props.store.setLastview(p.view, {cid: p.cid})
 	}
 
 	applyMessage(text) {
@@ -204,17 +187,12 @@ export default class Main extends Com {
 
 	hideWidget() {
 		restoreViewport()
-		this.props.store.setIsOpen(false)
-		this.setState({isShowWidget: false})
+		this.props.store.updateLastview({screen: 'button', previewEvent: {}})
+		this.forceUpdate()
 	}
 
 	onWidgetClose() {
-		this.refButton.current && this.refButton.current.ClearPreview()
-		// need call closePreview if not this will display default agent avatar and account name
-		this.refButton.current && this.refButton.current.ClosePreview()
-		this.props.store.setHasManuallyClosed()
 		this.hideWidget()
-
 		// emit event close widget
 		this.props.store.emitCloseWidgetEvent()
 	}

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,17 +483,10 @@ 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 {}
-		if (lastView.user_id != user.id) return {}
-		return lastView
+		return this.kv.match('lastview') || {}
 	}
 
 	matchIsOpen = () => !!this.kv.match('isopen') // is widget currently open
-	matchHasManuallyClosed = () => !!this.kv.match('hasManuallyClosed') // true if user has ever closed the widget
 	matchClosePreviewAt = () => this.kv.match('close_preview_at') || 0
 
 	checkFormToken = (accid, token) => this.api.checkFormToken(accid, token)
@@ -563,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 = {}
 
@@ -591,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)
@@ -1212,20 +1249,21 @@ export default class Store {
 	onResetCSS = (o, cb) => this.pubsub.on2(o, 'resetCSS', cb)
 	onHighlight = (o, cb) => this.pubsub.on2(o, 'highlight', cb)
 
-	setHasManuallyClosed = () => this.kv.put('hasManuallyClosed', true)
-	setIsOpen = (isopen) => {
-		let lastisopen = this.kv.match('isopen')
-		this.kv.put('isopen', isopen)
-		if (!lastisopen && isopen) {
-			sendEventToThirdParty('SUBIZ Chat', 'Opened', 'Subiz Windows')
-		}
-	}
 	closePreview = () => this.kv.put('close_preview_at', new sb.Date().getTime())
-	setLastview = (view, opts) => {
+	updateLastview = (obj) => {
 		let user = this.cache.match('user') || {}
 		if (!user.id) return // store not init
-		this.kv.put('lastview', {user_id: user.id, view, opts})
+		let lastview = this.matchLastview() || {}
+		let newview = {
+			...lastview,
+			...obj,
+			user_id: user.id,
+		}
+
+		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') || {}