@subiz/widget-v4 4.1.209 → 4.1.211

package/src/chatbox/Events.js

@@ -1,3 +1,6 @@
+import {processEvents} from './event-layout.js'
+import {conversationHistory, conversationEvents, conversationEventKey} from './conversation-history.js'
+import {widgetGreeting} from './greeting.js'
 import Event from './Event.js'
 import PoweredBy from './PoweredBy.js'
 const convoemptyimg = require('../../assets/img/convos_empty.svg')
@@ -31,6 +34,11 @@ export default class Events extends Com {
 	}
 
 	componentDidMount() {
+		this.syncTimer = sb.setInterval(() => this.syncMessages(), 120_000)
+		this.resumeSync = () => this.syncMessages()
+		window.addEventListener('focus', this.resumeSync)
+		document.addEventListener('visibilitychange', this.resumeSync)
+		this.syncMessages()
 		this.setState({
 			isShowTyping: false,
 			typing_event: {},
@@ -67,14 +75,127 @@ export default class Events extends Com {
 		})
 
 		this.props.store.onMessageUpdated(this, async (ev) => {
-			if (sb.convoOfEv(ev) !== this.props.cid) return
-			await this.props.store.reloadConvoEvents(this.props.cid)
+			const cid = sb.convoOfEv(ev)
+			if (!this.visibleCounts || !this.visibleCounts[cid]) return
+			await this.props.store.reloadConvoEvents(cid)
 			this.forceUpdate()
 		})
+		this.restoreInitialBottom()
+		this.observeHistoryStart()
 	}
 
 	componentDidUpdate(prevProps) {
-		if (prevProps.cid !== this.props.cid) this.loadConvo()
+		if (prevProps.cid !== this.props.cid && !this.isDraftPromotion(prevProps, this.props)) this.loadConvo()
+		if (prevProps.cid !== this.props.cid || (!prevProps.isShow && this.props.isShow)) this.syncMessages()
+		this.restoreInitialBottom()
+		this.observeHistoryStart()
+	}
+
+	componentWillReceiveProps(nextProps) {
+		if (nextProps.cid === this.props.cid) return
+		if (this.isDraftPromotion(this.props, nextProps)) {
+			this.visibleCounts[nextProps.cid] = this.visibleCounts[this.props.cid] || 30
+			delete this.visibleCounts[this.props.cid]
+			return
+		}
+		// Prepare the new conversation before its first render, not after the DOM update.
+		this.loadVersion = (this.loadVersion || 0) + 1
+		this.visibleCounts = this.initialVisibleCounts(nextProps)
+		this.evRefs = {}
+		this.historyBusy = true
+		this.setState({error: false, historyError: false, historyLoading: false, isShowTyping: false, loading: nextProps.cid ? sb.Date.now() : false})
+	}
+
+	isDraftPromotion(previous, next) {
+		return !!previous.cid && sb.get(next.store.widgetConvoOrigins, next.cid) === previous.cid
+	}
+
+	initialVisibleCounts(props) {
+		const counts = props.cid ? {[props.cid]: 30} : {}
+		if (!props.store.matchConvo || sb.get(props.store.matchConvo(props.cid), 'light_type') !== 'widget') return counts
+		const history = conversationHistory(props.store, props.cid).slice(0, -1).reverse()
+		let remaining = 30
+		for (const convo of history) {
+			const cached = sb.size(props.store.listEvents(convo.id))
+			if (!cached || !remaining) break
+			counts[convo.id] = Math.min(cached, remaining)
+			remaining -= counts[convo.id]
+			if (!sb.get(props.store.outofmsgM, convo.id)) break
+		}
+		return counts
+	}
+
+	syncMessages() {
+		if (!this._isMounted || !this.props.isShow || document.visibilityState === 'hidden') return
+		const ids = Object.keys(this.visibleCounts || {}).filter(cid => this.visibleCounts[cid])
+		return Promise.all(ids.map(cid => this.props.store.syncConvoEvents(cid)))
+	}
+
+	componentWillUnmount() {
+		sb.clearInterval(this.syncTimer)
+		window.removeEventListener('focus', this.resumeSync)
+		document.removeEventListener('visibilitychange', this.resumeSync)
+		this.loadVersion = (this.loadVersion || 0) + 1
+		if (this.timer) sb.clearTimeout(this.timer)
+		if (this.historyCheckTimer) sb.clearTimeout(this.historyCheckTimer)
+		if (this.historyObserver) this.historyObserver.disconnect()
+		if (this.scrollTimer) sb.clearTimeout(this.scrollTimer)
+		if (this.initialSizeObserver) this.initialSizeObserver.disconnect()
+	}
+
+	stopInitialBottom() {
+		this.initialBottom = false
+	}
+
+	restoreInitialBottom() {
+		if (!this.initialBottom || this.props.isShow === false || !this.refBody) return
+		// Restore after DOM commits, and again when images/fonts or the widget size settle.
+		// Unlike isBottom(), this records the opening intent before the content grows.
+		if (window.ResizeObserver && (this.initialObservedBody !== this.refBody || this.initialObservedContent !== this.refContent)) {
+			if (this.initialSizeObserver) this.initialSizeObserver.disconnect()
+			this.initialObservedBody = this.refBody
+			this.initialObservedContent = this.refContent
+			this.initialSizeObserver = new window.ResizeObserver(() => {
+				if (this._isMounted) this.restoreInitialBottom()
+			})
+			this.initialSizeObserver.observe(this.refBody)
+			if (this.refContent) this.initialSizeObserver.observe(this.refContent)
+		}
+		this.refBody.scrollTop = this.refBody.scrollHeight
+		if (this.checkAndSeen) this.checkAndSeen()
+	}
+
+	observeHistoryStart() {
+		if (this.observedHistoryStart !== this.historyStart || this.observedHistoryRoot !== this.refBody) {
+			if (this.historyObserver) this.historyObserver.disconnect()
+			this.observedHistoryStart = this.historyStart
+			this.observedHistoryRoot = this.refBody
+			if (this.historyStart && this.refBody && window.IntersectionObserver) {
+				this.historyObserver = new window.IntersectionObserver(entries => {
+					if (entries.some(entry => entry.isIntersecting)) this.queueHistoryCheck()
+				}, {root: this.refBody})
+				this.historyObserver.observe(this.historyStart)
+			}
+		}
+		this.queueHistoryCheck()
+	}
+
+	queueHistoryCheck() {
+		if (this.historyCheckTimer || !this._isMounted) return
+		this.historyCheckTimer = sb.setTimeout(() => {
+			this.historyCheckTimer = null
+			this.loadVisibleHistory()
+		}, 0)
+	}
+
+	loadVisibleHistory() {
+		if (!this._isMounted || this.props.isShow === false || this.historyBusy || this.state.historyError || !this.hasMore()) return
+		if (!this.refBody || !this.historyStart) return
+		const root = this.refBody.getBoundingClientRect()
+		const marker = this.historyStart.getBoundingClientRect()
+		if (root.width <= 0 || root.height <= 0 || marker.height <= 0) return
+		if (marker.right <= Math.max(root.left, 0) || marker.left >= Math.min(root.right, window.innerWidth)) return
+		if (marker.bottom > Math.max(root.top, 0) && marker.top < Math.min(root.bottom, window.innerHeight)) return this.loadMore()
 	}
 
 	setEventChildRef(ele, id) {
@@ -109,24 +230,28 @@ export default class Events extends Com {
 
 	render() {
 		if (this.state.error) return this.renderError()
-		let events = sb.map(this.props.store.listEvents(this.props.cid))
+		const conversations = conversationHistory(this.props.store, this.props.cid).filter(convo => this.visibleCounts && this.visibleCounts[convo.id])
+		let events = conversations.flatMap(convo => {
+			const entries = conversationEvents(this.props.store, convo).slice(-this.visibleCounts[convo.id]).filter(entry => convo.id === this.props.cid || entry.ev.type !== 'conversation_state_updated')
+			processEvents(convo, entries)
+			return entries.map(entry => ({...entry, convo}))
+		})
 
-		if (!this.state.loading && sb.size(events) === 0 && !this.props.cid) {
-			return (
-				<div ref={(ref) => (this.refBody = ref)} class='widget-body--events-container'>
-					<div class='widget-body--empty'>
-						<div class='widget-body--empty-icon'></div>
-						<div class='widget-body--empty-text'>{this.props.t('empty_convo_text')}</div>
-					</div>
-					<PoweredBy store={this.props.store} />
-				</div>
-			)
+		if (!this.state.loading && !this.props.creating && events.length === 0 && !this.props.cid) {
+			if (!this.greetingCreated) this.greetingCreated = sb.Date.now()
+			// Presentation only: never insert this greeting into the store or send it.
+			events.push({
+				mode: 'lead',
+				is_last_message_send: true,
+				ev: {
+					...widgetGreeting(this.props.chatbox, this.props.t, this.greetingCreated),
+					id: 'widget-virtual-greeting',
+				},
+			})
 		}
 
-		events = sb.orderBy(events, 'created', 'asc')
-
+		this.renderedIds = new Set(events.map(entry => entry.ev.id))
 		let convo = this.props.store.matchConvo(this.props.cid)
-		events = sb.map(events, (ev) => ({ev: ev}))
 
 		// console.log('-----------', this.state.isShowTyping, this.state.typing_event)
 		let ev = this.state.typing_event || {id: 'evzz' + sb.Date.now(), created: sb.Date.now(), by: {type: 'agent'}}
@@ -143,14 +268,20 @@ export default class Events extends Com {
 			},
 		}
 
-		processEvents(convo, events)
+		const hasMessages = events.some(entry => entry.ev.type === 'message_sent')
 		// we dont want fakeev cause some unexpected buf when processEvents
 		events.push(fakeev)
 
 		let $events = sb.map(events, (ev) => {
-			let isLast = ev.is_last_message_send && sb.get(convo, 'state') !== 'ended'
+			const sourceConvo = ev.convo || convo
+			const isHistory = sourceConvo && sourceConvo.id !== this.props.cid
+			let isLast = !isHistory && ev.is_last_message_send && sb.get(sourceConvo, 'state') !== 'ended'
+			const sourceId = sourceConvo ? sourceConvo.id : ''
+			const key = (sb.get(this.props.store.widgetConvoOrigins, sourceId) || sourceId) + ':' + conversationEventKey(ev.ev)
 			return (
+				<fieldset class={isHistory ? 'conversation-event conversation-event--history' : 'conversation-event'} disabled={isHistory} data-conversation-id={sourceConvo && sourceConvo.id} key={key}>
 				<Event
+					isHistory={isHistory}
 					isLast={isLast}
 					chatbox={this.props.chatbox}
 					onLink={this.props.onLink}
@@ -160,44 +291,60 @@ export default class Events extends Com {
 					onPostback={this.props.onPostback}
 					onFocusSourceEventFromQuote={this.onFocusSourceEventFromQuote}
 					ref={(ele) => this.setEventChildRef(ele, ev.ev.id)}
-					isConvoEnded={sb.get(convo, 'state') === 'ended'}
+					isConvoEnded={sb.get(sourceConvo, 'state') === 'ended'}
 					event={ev}
 					t={this.props.t}
-					key={ev.ev.id}
+					key={key}
 				/>
+				</fieldset>
 			)
 		})
 
 		let $loading = null
-		let style = 'opacity: 1 !important'
-		if (this.props.creating) {
+		if (!hasMessages && (this.props.creating || this.state.loading)) {
 			$loading = <Spinner static mode={sb.get(this.props.chatbox, 'primary_color', 'dark')} size='120' center />
-			style = 'opacity: 0 !important'
-		}
-
-		if (this.state.loading) {
-			if (sb.Date.now() - this.state.loading > 500) {
-				$loading = <Spinner static mode={sb.get(this.props.chatbox, 'primary_color', 'dark')} size='120' center />
-				style = 'opacity: 0 !important'
-			}
 		}
 
 		return (
 			<Fragment>
 				{$loading}
 				<div
-					style={style}
 					ref={(ref) => (this.refBody = ref)}
 					class='widget-body--events-container'
 					onMouseOver={this.checkAndSeen}
+					onScroll={() => this.queueHistoryCheck()}
+					onWheel={() => this.stopInitialBottom()}
+					onTouchStart={() => this.stopInitialBottom()}
+					onPointerDown={() => this.stopInitialBottom()}
+					onKeyDown={() => this.stopInitialBottom()}
 				>
-					<div class='widget-body--events'>{$events}</div>
+					{this.hasMore() && <div ref={ref => {this.historyStart = ref}} class='conversation-history-start' aria-hidden='true' />}
+					{this.state.historyLoading && !this.state.historyError && <Spinner size='16' mode='blue' />}
+					{this.state.historyError && this.renderHistoryError()}
+					<div class='widget-body--events' ref={ref => {this.refContent = ref}}>{$events}</div>
 					<PoweredBy store={this.props.store} />
 				</div>
 			</Fragment>
 		)
 	}
 
+	renderHistoryError() {
+		const t = this.props.t
+		const translated = t('load_history_error')
+		const locale = t.locale ? t.locale().toLowerCase() : 'en'
+		const fallback = locale.startsWith('vi') ? 'Chưa tải được tin nhắn cũ' : 'Couldn’t load earlier messages'
+		const text = translated && translated !== 'load_history_error' ? translated : fallback
+		return (
+			<div class='conversation-history-error' role='status'>
+				<span class='conversation-history-error__text'>{text}</span>
+				<button class='conversation-history-error__retry' type='button' disabled={this.state.historyLoading} aria-label={t('try_again')} aria-busy={!!this.state.historyLoading} onClick={() => this.loadMore()}>
+					<span class='conversation-history-error__retry-label' style={{visibility: this.state.historyLoading ? 'hidden' : 'visible'}}>{t('try_again')}</span>
+					{this.state.historyLoading && <span class='conversation-history-error__spinner' aria-hidden='true'><Spinner size='14' /></span>}
+				</button>
+			</div>
+		)
+	}
+
 	renderError() {
 		let $tryAgainBtn = (
 			<a href='#' onclick={(_) => this.loadConvo()}>
@@ -248,42 +395,131 @@ export default class Events extends Com {
 	}
 
 	onEvent(newev) {
-		if (sb.convoOfEv(newev) !== this.props.cid) return
+		const cid = sb.convoOfEv(newev)
+		if (!this.visibleCounts || !this.visibleCounts[cid]) return
+		if (newev.type === 'message_sent') {
+			const sourceEventId = sb.get(newev, 'source_event_id')
+			const key = cid + ':' + (sourceEventId || newev.id)
+			this.receivedMessageKeys = this.receivedMessageKeys || new Set()
+			const known = this.receivedMessageKeys.has(key) || (this.renderedIds && (this.renderedIds.has(newev.id) || this.renderedIds.has(sourceEventId)))
+			this.receivedMessageKeys.add(key)
+			// Acknowledgements update the existing bubble; they must not restart scrolling.
+			if (known) return
+			if (this.renderedIds) this.visibleCounts[cid]++
+		}
+		if (cid !== this.props.cid) {
+			const container = this.refBody
+			const height = container ? container.scrollHeight : 0
+			const top = container ? container.scrollTop : 0
+			this.forceUpdate()
+			sb.setTimeout(() => {if (container && container === this.refBody) container.scrollTop = top + container.scrollHeight - height})
+			return
+		}
 		let isBottom = this.isBottom()
+		if (newev.type === 'message_sent') this.stopInitialBottom()
 
 		var byme = false
-		if (sb.get(newev, 'type') === 'message_sent' && newev.id === sb.get(newev, 'data.message.idempotency_key'))
+		if (sb.get(newev, 'type') === 'message_sent' && newev.id === sb.get(newev, 'source_event_id'))
 			byme = true
 		// scroll to bottom when message is sent by me
 		// auto scroll to bottom on new message when we are at the bottom
-		if (byme || isBottom) this.scrollToBottom()
+		if (byme || isBottom) this.scrollToBottom('smooth')
+	}
+
+	historyTarget() {
+		const conversations = conversationHistory(this.props.store, this.props.cid)
+		const first = conversations.findIndex(convo => this.visibleCounts && this.visibleCounts[convo.id])
+		if (first < 0) return
+		const convo = conversations[first]
+		const count = sb.size(this.props.store.listEvents(convo.id))
+		if (this.visibleCounts[convo.id] < count || (!convo.id.startsWith('cslight') && !sb.get(this.props.store.outofmsgM, convo.id))) return convo
+		return conversations[first - 1]
+	}
+
+	hasMore() {
+		return !!this.historyTarget()
+	}
+
+	async fetchPage(cid) {
+		if (cid.startsWith('cslight') || sb.get(this.props.store.outofmsgM, cid)) return {}
+		this.eventRequests = this.eventRequests || new Map()
+		let request = this.eventRequests.get(cid)
+		if (!request) {
+			request = this.props.store.fetchMoreEvents(cid, 30)
+			this.eventRequests.set(cid, request)
+		}
+		try {return await request} finally {
+			if (this.eventRequests.get(cid) === request) this.eventRequests.delete(cid)
+		}
 	}
 
 	async loadConvo() {
-		if (!this.props.cid) return
-		// load msg
-		this.lastContentOffsetY = 0
-		this.setState({loading: false})
-		let events = this.props.store.listEvents(this.props.cid)
-		if (sb.size(events) === 0) {
-			this.setState({loading: sb.Date.now()})
-			sb.setTimeout(() => {
+		const cid = this.props.cid
+		this.receivedMessageKeys = new Set()
+		this.initialBottom = true
+		const version = this.loadVersion = (this.loadVersion || 0) + 1
+		this.visibleCounts = this.initialVisibleCounts(this.props)
+		this.historyBusy = true
+		this.evRefs = {}
+		this.setState({error: false, historyError: false, historyLoading: false, isShowTyping: false, loading: cid && !sb.size(this.props.store.listEvents(cid)) ? sb.Date.now() : false})
+		try {
+			if (cid && !sb.size(this.props.store.listEvents(cid))) {
+				const result = await this.fetchPage(cid)
+				if (version !== this.loadVersion || !this._isMounted) return
+				if (result && result.error) this.setState({error: !sb.size(this.props.store.listEvents(cid)), historyError: true})
+			}
+		} catch (_) {
+			if (version === this.loadVersion) this.setState({error: !sb.size(this.props.store.listEvents(cid)), historyError: true})
+		} finally {
+			if (version === this.loadVersion && this._isMounted) {
+				this.historyBusy = false
+				this.setState({loading: false})
+				if (!this.initialBottom && this.receivedMessageKeys.size && this.isBottom()) this.scrollToBottom('smooth')
+				this.queueHistoryCheck()
+				// Fetch the previous conversation on opening a draft, even if the greeting fills the viewport.
+				if (cid && cid.startsWith('cslightwidget_') && Object.keys(this.visibleCounts).length === 1 && this.hasMore()) this.loadMore()
+			}
+		}
+	}
+
+	async loadMore() {
+		if (this.historyBusy || !this._isMounted) return
+		const target = this.historyTarget()
+		if (!target) return
+		const version = this.loadVersion
+		this.historyBusy = true
+		const container = this.refBody
+		const visible = this.visibleCounts[target.id] || 0
+		this.setState({historyLoading: true})
+		try {
+			if (visible >= sb.size(this.props.store.listEvents(target.id))) {
+				const result = await this.fetchPage(target.id)
+				if (result && result.error) throw result.error
+			}
+			if (version !== this.loadVersion || !this._isMounted) return
+			this.visibleCounts[target.id] = visible + 30
+			this.setState({historyError: false})
+		} catch (_) {
+			if (version === this.loadVersion) this.setState({historyError: true})
+		} finally {
+			if (version === this.loadVersion && this._isMounted) {
+				// The reader may have scrolled or sent a message while the request was pending.
+				const height = container ? container.scrollHeight : 0
+				const top = container ? container.scrollTop : 0
+				this.setState({historyLoading: false})
 				this.forceUpdate()
-			}, 800)
-			let cid = this.props.cid
-
-			let {error} = await this.props.store.fetchMoreEvents(cid)
-			this.setState({loading: false})
-			if (cid !== this.props.cid) return // out dated
-			if (error) {
-				this.setState({error: true})
-				return
+				await new Promise(resolve => sb.setTimeout(resolve, 0))
+				if (version === this.loadVersion && this._isMounted) {
+					if (this.initialBottom) this.restoreInitialBottom()
+					else if (container && container === this.refBody) {
+						container.scrollTop = top + container.scrollHeight - height
+						this.lastScrollTop = container.scrollTop
+					}
+					this.historyBusy = false
+					this.queueHistoryCheck()
+				}
 			}
 		}
-		this.props.store.fetchMoreEvents(this.props.cid)
-		this.setState({error: false})
-		this.scrollToBottom()
-		// sb.setTimeout(() => this.setState({loading: false}), 50)
 	}
 
 	isBottom() {
@@ -292,15 +528,21 @@ export default class Events extends Com {
 		return $container.scrollHeight < $container.scrollTop + $container.offsetHeight + 50
 	}
 
-	scrollToBottom() {
-		sb.setTimeout(() => {
+	scrollToBottom(behavior = 'auto') {
+		if (this.scrollTimer) sb.clearTimeout(this.scrollTimer)
+		const cid = this.props.cid
+		this.scrollTimer = sb.setTimeout(() => {
+			this.scrollTimer = null
+			if (!this._isMounted || this.props.cid !== cid) return
 			const $div = this.refBody
-			if ($div) $div.scrollTop = $div.scrollHeight
+			if (!$div) return
+			const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			if (behavior === 'smooth' && !reducedMotion && $div.scrollTo) {
+				$div.scrollTo({top: $div.scrollHeight, behavior: 'smooth'})
+			} else {
+				$div.scrollTop = $div.scrollHeight
+			}
 		})
-		sb.setTimeout(() => {
-			const $div = this.refBody
-			if ($div) $div.scrollTop = $div.scrollHeight
-		}, 100)
 
 		if (this.props.isShow) {
 			if (this.props.store.browserVisibility === 'visible' && document.hasFocus()) {
@@ -312,76 +554,6 @@ export default class Events extends Com {
 
 // [{ev: {}, mode: 'time'}]
 //_mode = time
-//_mode = lead
-function processEvents(convo, events) {
-	events = events.filter((event) => visibleEvent(event.ev))
-	if (events.length < 1) return
-
-	// show time for the first msg sent
-	// insert time
-	var lastAgentEvent
-	for (var i = 1; i < events.length; i++) {
-		let curEvent = events[i]
-		let lastEvent = events[i - 1]
-		if (sb.get(curEvent, 'ev.by.type') != 'user' && !curEvent.is_typing) {
-			lastAgentEvent = curEvent
-		}
-
-		if (visibleEvent(curEvent.ev)) {
-			let elapsedSec = sb.unixSec(curEvent.ev.created) - sb.unixSec(lastEvent.ev.created)
-			if (elapsedSec > 300) curEvent.show_time = true // 5 mins
-		}
-	}
-
-	if (lastAgentEvent) lastAgentEvent.show_time = true
-
-	for (var i = 0; i < events.length; i++) {
-		let curEvent = events[i]
-		if (sb.get(curEvent, 'ev.type') === 'message_sent') {
-			curEvent.show_time = true
-			break
-		}
-	}
-
-	let lastMsgSentIdx = -1
-	// insert lead
-	for (var i = 0; i < events.length; i++) {
-		let curEvent = events[i]
-		let prevEvent = events[i - 1]
-		let nextEvent = events[i + 1]
-
-		if (curEvent.ev.type === 'message_sent') {
-			// ignore fake typing message_sent event at last
-			lastMsgSentIdx = i
-			curEvent.mode = 'lead'
-			if (
-				sb.get(prevEvent, 'ev.type') === 'message_sent' &&
-				sb.get(prevEvent, 'ev.by.id') === sb.get(curEvent, 'ev.by.id')
-			) {
-				curEvent.mode = 'follow'
-			}
-			if (
-				sb.get(nextEvent, 'ev.type') !== 'message_sent' ||
-				sb.get(nextEvent, 'ev.by.id') !== sb.get(curEvent, 'ev.by.id')
-			) {
-				curEvent.is_end = true
-			}
-			continue
-		}
-	}
-	if (lastMsgSentIdx > -1) {
-		events[lastMsgSentIdx].is_last_message_send = true
-	}
-}
-
-function visibleEvent(ev) {
-	let type = sb.get(ev, 'type')
-	if (type === 'message_sent') return true
-	if (type === 'conversation_state_updated') {
-		return sb.get(ev, 'data.conversation.state') == 'ended'
-	}
-}
-
 function isSummited(form) {
 	let fields = sb.get(form, 'fields') || []
 	return sb.find(fields, (field) => !!field.answered)

package/src/chatbox/FormAttachment.js

@@ -191,7 +191,7 @@ export default class FormAttachment extends Com {
 							}}
 							type="checkbox"
 							id={'checkbox.' + this.props.ev.id + '.' + field.name}
-							onChange={e => this.onInputChange(index, ev.target.checked)}
+							onChange={e => this.onInputChange(index, e.target.checked)}
 							checked={field.value}
 						/>
 						<label class="checkbox--label" for={'checkbox.' + this.props.ev.id + '.' + field.name}>

package/src/chatbox/Header.js

@@ -223,13 +223,13 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 			$unreadcount = <span class='widget-header--total-unread-convo'>{unreadcount}</span>
 		}
 		return (
-			<div
+			<button type='button' aria-label={this.props.t('menu_back')}
 				class={`widget-header--wrap-button-back ${unreadcount ? 'widget-header--has-convo-unred' : ''}`}
 				onClick={(e) => this.onBackClick(e)}
 			>
 				<div class='widget-header--button-back' data-tooltip={this.props.t('menu_back')}></div>
 				{$unreadcount}
-			</div>
+			</button>
 		)
 	}
 
@@ -238,14 +238,14 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 		if (accSetting.hide_close_button) return null
 		if (this.props.store.isEmbededChatMode()) return
 		return (
-			<div
+			<button type='button' aria-label={this.props.t('close')}
 				class='widget-header--button-close'
 				data-tooltip={this.props.t('close')}
 				data-tooltip-position='bottom'
 				onClick={(e) => this.onCloseClick(e)}
 			>
 				<span class='widget-header--button-close-icon'></span>
-			</div>
+			</button>
 		)
 	}
 

package/src/chatbox/InfoMessage.js

@@ -29,7 +29,7 @@ export default class InfoMessage extends Com {
 		if (ev.type === 'conversation_state_updated' && sb.get(ev, 'data.conversation.state') === 'ended') {
 			return (
 				<div class='convo-event'>
-					<div class='info-message'>{this.props.t('conversation_ended')}</div>
+					<div class='info-message info-message--ended'>{this.props.t('conversation_ended')}</div>
 				</div>
 			)
 		}