@subiz/widget-v4 4.1.113 → 4.1.115

package/src/chatbox/Event.js

@@ -25,7 +25,9 @@ import {h, createRef} from 'preact'
 export default class Event extends Com {
 	constructor(props) {
 		super(props)
+		this.props.store.onConvoEvent(this, (ev) => this.onEvent(ev))
 		this.refForm = createRef()
+		this.state = {pongs: sb.get(this.props.event, 'ev.data.message.pongs') || []}
 	}
 
 	render() {
@@ -49,6 +51,21 @@ export default class Event extends Com {
 		this.refForm.current && this.refForm.current.focus()
 	}
 
+	onEvent(ev) {
+		if (ev.id !== sb.get(this.props.event, 'ev.id')) return
+		this.setState({pongs: sb.get(ev, 'data.message.pongs') || []})
+	}
+
+	hasLike() {
+		let {pongs} = this.state
+		return !!sb.find(pongs, (pong) => pong.type === 'like')
+	}
+
+	hasDislike() {
+		let {pongs} = this.state
+		return !!sb.find(pongs, (pong) => pong.type === 'dislike')
+	}
+
 	chooseQuickReply(reply) {
 		let ev = sb.get(this.props.event, 'ev', {})
 		let message = {text: reply.title, format: 'plaintext'}
@@ -143,44 +160,53 @@ export default class Event extends Com {
 				</div>
 			)
 		}
+		if (this.props.store.isAIDevMode()) $time = null
 
 		let t = new sb.Date(ev.created).toLocaleString()
 		// message of agent
 		if (sb.get(ev, 'by.type') !== 'user') {
 			let $sender = null
 			if (this.props.event.mode === 'lead') $sender = this.renderAgentAvatar(ev)
+			let innercls = 'agent-convo-event-inner'
+			if (this.props.isLast) innercls += ' last'
 			return (
 				<div class='convo-event agent-message' title={t}>
 					{$time}
 					{$sender}
-					<TextMessage store={this.props.store} ev={ev} onLink={this.props.onLink} />
-					<ImageAttachments store={this.props.store} ev={ev} />
-					<AudioAttachments store={this.props.store} ev={ev} />
-					<VideoAttachments store={this.props.store} ev={ev} />
-					<FileAttachments store={this.props.store} ev={ev} />
-					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t} />
-					<FormAttachments
-						store={this.props.store}
-						onSubmit={this.props.onFormSubmit}
-						ref={this.refForm}
-						ev={ev}
-						t={this.props.t}
-					/>
-					<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t} />
-					<GenericTemplateAttachments
-						store={this.props.store}
-						ev={ev}
-						onSelect={(e) => this.choosePostbackBtn(e)}
-						t={this.props.t}
-					/>
-					<ProductAttachments
-						t={this.props.t}
-						onPostback={(e) => this.choosePostbackBtn(e)}
-						store={this.props.store}
-						ev={ev}
-					/>
-					<OrderAttachments t={this.props.t} store={this.props.store} ev={ev} />
-					<QuickReplies store={this.props.store} ev={ev} onSelect={(e) => this.chooseQuickReply(e)} />
+					<div class='agent-convo-event-wrapper'>
+						<div class={innercls}>
+							<TextMessage store={this.props.store} ev={ev} onLink={this.props.onLink} />
+							<ImageAttachments store={this.props.store} ev={ev} />
+							<AudioAttachments store={this.props.store} ev={ev} />
+							<VideoAttachments store={this.props.store} ev={ev} />
+							<FileAttachments store={this.props.store} ev={ev} />
+							<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t} />
+							<FormAttachments
+								store={this.props.store}
+								onSubmit={this.props.onFormSubmit}
+								ref={this.refForm}
+								ev={ev}
+								t={this.props.t}
+							/>
+							<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t} />
+							<GenericTemplateAttachments
+								store={this.props.store}
+								ev={ev}
+								onSelect={(e) => this.choosePostbackBtn(e)}
+								t={this.props.t}
+							/>
+							<ProductAttachments
+								t={this.props.t}
+								onPostback={(e) => this.choosePostbackBtn(e)}
+								store={this.props.store}
+								ev={ev}
+							/>
+							<OrderAttachments t={this.props.t} store={this.props.store} ev={ev} />
+							<QuickReplies store={this.props.store} ev={ev} onSelect={(e) => this.chooseQuickReply(e)} />
+							{this.renderReactions()}
+							{this.renderAIDevNote()}
+						</div>
+					</div>
 				</div>
 			)
 		}
@@ -232,6 +258,103 @@ export default class Event extends Com {
 		)
 	}
 
+	async onSendReaction(action) {
+		if (this._reacting) return
+		let ev = this.props.event.ev
+		let cid = sb.get(ev, 'data.message.conversation_id')
+		ev = {
+			type: 'message_pong',
+			data: {
+				message: {
+					id: ev.id,
+					pongs: [
+						{
+							type: action,
+						},
+					],
+					conversion_id: cid,
+				},
+			},
+		}
+		if (action == 'dislike' && this.props.store.isAIDevMode()) {
+			this.props.store.emitConvoEvent({
+				type: 'bad_feedbacked',
+				data: {
+					event: ev,
+					id: ev.id,
+					conversion_id: cid,
+				},
+			})
+		}
+
+		let {pongs} = this.state
+		if (action === 'like') {
+			pongs = pongs.filter((pong) => pong.type !== 'dislike')
+			pongs.push({type: 'like'})
+		} else if (action === 'dislike') {
+			pongs = pongs.filter((pong) => pong.type !== 'like')
+			pongs.push({type: 'dislike'})
+		} else if (action === 'remove_like') {
+			pongs = pongs.filter((pong) => pong.type !== 'like')
+		} else if (action === 'remove_dislike') {
+			pongs = pongs.filter((pong) => pong.type !== 'dislike')
+		}
+		this.setState({pongs})
+		this._reacting = true
+		let res = await this.props.store.sendReaction(cid, ev)
+		this._reacting = false
+	}
+
+	renderReactions() {
+		if (this.props.store.isAIDevMode()) return null
+
+		let ev = sb.get(this.props.event, 'ev') || {}
+		let pongs = sb.get(ev, 'data.message.pongs') || []
+		let hasLike = this.hasLike()
+		let hasDislike = this.hasDislike()
+
+		let likecls = 'message-event-action-btn'
+		if (hasLike) likecls += ' active'
+		let dislikecls = 'message-event-action-btn'
+		if (hasDislike) dislikecls += ' active'
+		return (
+			<div class='message-event-actions'>
+				<div class={likecls} onClick={() => this.onSendReaction(hasLike ? 'remove_like' : 'like')}>
+					<div class='message-event-action-btn-svg like' />
+				</div>
+				<div class={dislikecls} onClick={() => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')}>
+					<div class='message-event-action-btn-svg dislike' />
+				</div>
+			</div>
+		)
+	}
+
+	renderAIDevNote() {
+		if (!this.props.isLast) return null
+		if (!this.props.store.isAIDevMode()) return null
+
+		let ev = sb.get(this.props.event, 'ev') || {}
+		let pongs = sb.get(ev, 'data.message.pongs') || []
+		let hasLike = this.hasLike()
+		let hasDislike = this.hasDislike()
+
+		let likecls = 'message-event-action-btn message-event-action-btn__dev message-event-action-btn_like'
+		if (hasLike) likecls += ' active'
+		let dislikecls = 'message-event-action-btn message-event-action-btn__dev message-event-action-btn_dislike'
+		if (hasDislike) dislikecls += ' active'
+
+		return (
+			<div class='message-event-actions'>
+				<div class={likecls} onClick={() => this.onSendReaction(hasLike ? 'remove_like' : 'like')}>
+					<div class='message-event-action-btn-svg like' /> Good
+				</div>
+				<div class={dislikecls} onClick={() => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')}>
+					<div class='message-event-action-btn-svg dislike' /> Bad
+				</div>
+			</div>
+		)
+	}
+
 	renderUpdateConvo(ev) {
 		var state = sb.get(ev, 'data.conversation.state')
 		if (state === 'active') return null

package/src/chatbox/Events.js

@@ -55,19 +55,33 @@ export default class Events extends Com {
 		events = sb.map(events, (ev) => ({ev: ev}))
 		processEvents(convo, events)
 
-		let $events = sb.map(events, (ev) => (
-			<Event
-				chatbox={this.props.chatbox}
-				onLink={this.props.onLink}
-				store={this.props.store}
-				onFormSubmit={this.props.onFormSubmit}
-				onSend={this.props.onSend}
-				onPostback={this.props.onPostback}
-				event={ev}
-				t={this.props.t}
-				key={ev.ev.id}
-			/>
-		))
+		let lastAgentMessageSentId = ''
+		for (let i = events.length - 1; i >= 0; i--) {
+			let ev = sb.get(events, [i, 'ev']) || {}
+			let bytype = sb.get(ev, 'by.type')
+			if (bytype !== 'user' && ev.type === 'message_sent') {
+				lastAgentMessageSentId = ev.id
+				break
+			}
+		}
+
+		let $events = sb.map(events, (ev) => {
+			let isLast = ev.ev.id === lastAgentMessageSentId
+			return (
+				<Event
+					isLast={isLast}
+					chatbox={this.props.chatbox}
+					onLink={this.props.onLink}
+					store={this.props.store}
+					onFormSubmit={this.props.onFormSubmit}
+					onSend={this.props.onSend}
+					onPostback={this.props.onPostback}
+					event={ev}
+					t={this.props.t}
+					key={ev.ev.id}
+				/>
+			)
+		})
 
 		let $loading = null
 		let style = 'opacity: 1 !important'

package/src/chatbox/ImageAttachments.js

@@ -21,7 +21,7 @@ export default class ImageAttachment extends Com {
 		const DEFAULT_MAX_WIDTH = 267
 
 		let $container = this.containerRef.current
-		this.frameWidth = $container ? $container.offsetWidth : DEFAULT_MAX_WIDTH
+		this.frameWidth = $container ? $container.parentNode.parentNode.offsetWidth : DEFAULT_MAX_WIDTH
 		this.frameHeight = MAX_HEIGHT
 		this.setState({
 			ready: true,

package/src/chatbox/InfoMessage.js

@@ -15,6 +15,7 @@ export default class InfoMessage extends Com {
 	render() {
 		let ev = this.props.ev.ev
 		var $time = null
+
 		if (this.props.ev.show_time) {
 			$time = (
 				<div class='convo-event-time'>
@@ -23,6 +24,8 @@ export default class InfoMessage extends Com {
 			)
 		}
 
+		if (this.props.store.isAIDevMode()) $time = null
+
 		// if (this.ev.type === 'conversation_rating_requested') return <div class="info-message"></div>
 		if (ev.type === 'conversation_rated') {
 			var rating = sb.get(ev, 'data.conversation.ratings.0', {no_rating: true, rating: 0})

package/src/chatbox/PoweredBy.js

@@ -1,8 +1,10 @@
 var logo = require('../../assets/img/subiz-mono.svg')
 import {h} from 'preact'
+
 export default function PoweredBy(props) {
 	// dont render on mobile
 	if (props.store.isMobile()) return null
+	if (props.store.isAIDevMode()) return null
 	let user = props.store.matchUser() || {}
 	var link = `https://subiz.com.vn/?utm_source=${
 		window.location.host || `id-${user.account_id}`

package/src/chatbox/Widget.js

@@ -130,11 +130,13 @@ export default class Widget extends Com {
 		let position = sb.get(accountSetting, 'desktop_button.position') || 'right'
 		if (this.props.store.isMobile()) position = sb.get(accountSetting, 'mobile_button.position', position)
 		let cls = 'widget-container widget-container--' + position
-		if (!this.props.store.isMobile() && sb.get(accountSetting, 'window_mode') === 'full')
+		if ( !this.props.store.isMobile() && sb.get(accountSetting, 'window_mode') === 'full')
 			cls += ' widget-container--full'
 		if (!this.props.isShow) cls += ' widget-container--hide'
-		return (
-			<div class={cls}>
+		let hideheader = sb.get(accountSetting, 'header.hidden', false)
+		var $header
+		if (!hideheader) {
+			$header = (
 				<Header
 					t={this.props.t}
 					plugin={this.props.plugin}
@@ -144,6 +146,11 @@ export default class Widget extends Com {
 					onClose={this.props.onClose}
 					onGotoList={() => this.props.onGo({view: 'list'})}
 				/>
+			)
+		}
+		return (
+			<div class={cls}>
+				{$header}
 				{$body}
 			</div>
 		)

package/src/lib.js

@@ -35,6 +35,10 @@ class Widget {
 		cb()
 	}
 
+	setAIDevMode(mode) {
+		this.store.setAIDevMode(mode)
+	}
+
 	setTrackPageView(val) {
 		this.store.setTrackPageview(val)
 	}

package/src/store/store.js

@@ -210,6 +210,18 @@ export default class Store {
 		this.pubsub.publish('highlight', pluginid, ref)
 	}
 
+	emitConvoEvent(ev) {
+		this.pubsub.publish('events', ev)
+	}
+
+	setAIDevMode(mode) {
+		this.ai_dev_mode = mode
+	}
+
+	isAIDevMode() {
+		return this.ai_dev_mode
+	}
+
 	overrideDeviceType(type) {
 		this.forceDevice = type
 		this.pubsub.publish('account')
@@ -858,7 +870,17 @@ export default class Store {
 
 			if (!sb.get(oldev, 'data.message')) return
 			var pongs = sb.get(oldev, 'data.message.pongs', [])
-			pongs = pongs.concat(sb.get(ev, 'data.message.pongs', []))
+			let newpongs = sb.get(ev, 'data.message.pongs', []) || []
+			pongs = pongs.concat(newpongs)
+			if (newpongs.length === 1) {
+				let pongtype = newpongs[0].type
+				if (pongtype === 'like' || pongtype === 'remove_dislike') {
+					pongs = pongs.filter((pong) => pong.type !== 'dislike')
+				}
+				if (pongtype === 'dislike' || pongtype === 'remove_like') {
+					pongs = pongs.filter((pong) => pong.type !== 'like')
+				}
+			}
 			oldev.data.message.pongs = pongs
 			sb.map(pongs, (pong) => {
 				if (pong.member_id == user.id && pong.type === 'seen') {
@@ -867,6 +889,7 @@ export default class Store {
 				}
 			})
 			this.chain.put(cid, oldev.id, sb.getMs(oldev.created), oldev)
+			this.pubsub.publish('events', oldev)
 		}
 
 		if (ev.type === 'message_sent') {
@@ -901,6 +924,7 @@ export default class Store {
 	_typing = sb.throttle((convoid) => this.api.sendTyping(convoid), 3000, {trailing: false})
 
 	async startConvo(req) {
+		if (!req) req = {}
 		await this.readyGate.entry()
 		this.convoGate.close()
 
@@ -925,6 +949,10 @@ export default class Store {
 		return this.api.createPostback(cid, postback)
 	}
 
+	sendReaction(cid, ev) {
+		return this.api.sendConvoEvent(cid, ev)
+	}
+
 	async sendConvoEvent(cid, type, data) {
 		await this.readyGate.entry()
 		var idempotency = sb.randomString(36)