@subiz/widget-v4 4.1.116 → 4.1.119

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.116",
+	"version": "4.1.119",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -17,7 +17,7 @@
 		"core-js": "^3.41.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
-		"less": "^4.2.2",
+		"less": "^4.3.0",
 		"less-loader": "^12.2.0",
 		"preact": "10.19.3"
 	},
@@ -30,8 +30,8 @@
 		"babel-loader": "^10.0.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.3",
-		"puppeteer": "^24.6.0",
-		"webpack": "^5.99.1",
+		"puppeteer": "^24.6.1",
+		"webpack": "^5.99.5",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.1"

package/src/chatbox/AgentsAvatar.js

@@ -38,7 +38,7 @@ export default function AgentsAvatar(props) {
 	}
 
 	agents = sb.filter(agents, (ag) => !!ag)
-	if (agents.length === 0) {
+	if (agents.length === 0 || props.agent_ids === undefined || sb.size(props.agent_ids) === 0) {
 		// use account avatar
 		return (
 			<div class={`group-avatar group-avatar--${mode}`}>

package/src/chatbox/Event.js

@@ -33,10 +33,13 @@ export default class Event extends Com {
 	render() {
 		var ev = sb.get(this.props.event, 'ev', {})
 		switch (ev.type) {
+			case 'conversation_typing':
+				return this.renderTyping()
 			case 'conversation_joined':
 				// return this.renderMessageChatJoin()
 				break
 			case 'message_sent':
+				if (this.props.event.is_typing) return this.renderTyping()
 				return this.renderMessageSent()
 			case 'conversation_state_updated':
 			case 'conversation_rating_requested':
@@ -149,19 +152,74 @@ export default class Event extends Com {
 			})
 	}
 
+	renderTyping() {
+		let innercls = 'agent-convo-event-inner'
+		var html = `
+<html>
+  <head>
+    <style>
+      .typing-container {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        justify-content: center;
+      }
+      .typing-dot {
+        display: inline-block;
+        vertical-align: middle;
+        width: 8px;
+        height: 8px;
+        background: black;
+        border-radius: 50%;
+        animation: typing 0.5s infinite alternate;
+      }
+      .typing-dot:nth-of-type(2) {
+        animation-delay: 0.2s;
+      }
+      .typing-dot:nth-of-type(3) {
+        animation-delay: 0.6s;
+      }
+      @keyframes typing {
+        0% {
+          opacity: 0.9;
+        }
+        100% {
+          opacity: 0.4;
+        }
+      }
+    </style>
+  </head>
+  <body style="padding: 0; margin: 0">
+    <div class="typing-container">
+      <span class="typing-dot"></span>
+      <span class="typing-dot"></span>
+      <span class="typing-dot"></span>
+    </div>
+  </body>
+</html>
+`
+		let src = 'data:text/html,' + encodeURIComponent(html)
+		return (
+			<div class='convo-event agent-message'>
+				<div class='agent-convo-event-wrapper'>
+					<div class={innercls}>
+						<div class='message-agent message-text--agent' style='opacity: 0.6 !important'>
+							<iframe
+								src={src}
+								style='width: 35px !important; height: 20px !important; display: block !important; overflow: hidden !important; padding: 0 !important '
+							></iframe>
+						</div>
+					</div>
+				</div>
+			</div>
+		)
+	}
+
 	renderMessageSent() {
 		let ev = this.props.event.ev
 		this.tryLoadOrder(ev)
-		var $time = null
-		if (this.props.event.show_time) {
-			$time = (
-				<div class='convo-event-time'>
-					<Time time={ev.created} t={this.props.t} />
-				</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') {
@@ -171,11 +229,16 @@ export default class Event extends Com {
 			if (this.props.isLast) innercls += ' last'
 			return (
 				<div class='convo-event agent-message'>
-					{$time}
 					{$sender}
 					<div class='agent-convo-event-wrapper'>
 						<div class={innercls}>
-							<TextMessage store={this.props.store} ev={ev} onLink={this.props.onLink} />
+							<TextMessage
+								showTime={this.props.event.show_time}
+								isLast={this.props.isLast}
+								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} />
@@ -223,7 +286,7 @@ export default class Event extends Com {
 		}
 
 		let $sender = null
-		if (this.props.event.mode === 'lead') $sender = <div class='pt-3'></div>
+		// if (this.props.event.mode === 'lead') $sender = <div class='pt-3'></div>
 
 		let $error = null
 		if (ev._error && ev.type === 'message_sent') {
@@ -239,7 +302,6 @@ export default class Event extends Com {
 
 		return (
 			<div class='convo-event user-message'>
-				{$time}
 				{$sender}
 				<div class='message-user__container'>
 					{$dot}
@@ -307,7 +369,6 @@ export default class Event extends Com {
 
 	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()

package/src/chatbox/Events.js

@@ -29,10 +29,66 @@ export default class Events extends Com {
 		this.checkAndSeen()
 	}
 
+	componentDidMount() {
+		this.setState({
+			isShowTyping: false,
+			typing_event: {},
+		})
+
+		this.props.store.onConvoEvent(this, (ev) => {
+			if (sb.convoOfEv(ev) !== this.props.cid) return
+			// if (sb.get(ev, 'by.id') === user.id) return
+			// fixwidget in dashboard show typing of user
+			if (sb.get(ev, 'by.type') === 'user') return
+
+			let oldby = sb.get(this.state.typing_event, 'by.id')
+			if (oldby && sb.get(ev, 'by.id') !== oldby) return
+
+			if (sb.get(ev, 'type') === 'message_sent') {
+				// stop the typing
+				if (this.timer) sb.clearTimeout(this.timer)
+				this.timer = null
+				this.setState({isShowTyping: false})
+				return
+			}
+			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' && !sb.get(this.props.plugin, 'chatbox.show_agent_typing')) return
+			this.setState({typing_event: ev, isShowTyping: true})
+			if (this.timer) sb.clearTimeout(this.timer)
+			this.timer = sb.setTimeout(() => {
+				if (sb.convoOfEv(ev) !== this.props.cid) return
+				this.timer = null
+				this.setState({isShowTyping: false})
+			}, 5000)
+		})
+	}
+
 	componentDidUpdate(prevProps) {
 		if (prevProps.cid !== this.props.cid) this.loadConvo()
 	}
 
+	ShowTyping() {
+		this.setState({
+			isShowTyping: true,
+			typing_event: {
+				id: 'evzz' + sb.Date.now(),
+				created: sb.Date.now(),
+				by: {
+					type: 'agent',
+				},
+				type: 'conversation_typing',
+			},
+		})
+		if (this.timer) sb.clearTimeout(this.timer)
+		this.timer = sb.setTimeout(() => {
+			this.timer = null
+			this.setState({isShowTyping: false})
+		}, 5000)
+	}
+
 	render() {
 		if (this.state.error) return this.renderError()
 		let events = sb.map(this.props.store.listEvents(this.props.cid))
@@ -53,20 +109,29 @@ export default class Events extends Com {
 
 		let convo = this.props.store.matchConvo(this.props.cid)
 		events = sb.map(events, (ev) => ({ev: ev}))
-		processEvents(convo, events)
 
-		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
+		// console.log('-----------', this.state.isShowTyping, this.state.typing_event)
+		if (this.state.isShowTyping) {
+			let ev = this.state.typing_event || {id: 'evzz' + sb.Date.now(), created: sb.Date.now(), by: {type: 'agent'}}
+			let fakeev = {
+				is_typing: true,
+				id: ev.id,
+				ev: {
+					id: ev.id,
+					created: ev.created,
+					by: ev.by,
+					type: 'message_sent',
+					data: {message: {text: '...', conversation_id: this.props.cid}},
+				},
 			}
+			console.log('FA', fakeev)
+			events.push(fakeev)
 		}
 
+		processEvents(convo, events)
+
 		let $events = sb.map(events, (ev) => {
-			let isLast = ev.ev.id === lastAgentMessageSentId
+			let isLast = ev.ev.id === sb.get(convo, 'last_message_sent.id')
 			return (
 				<Event
 					isLast={isLast}
@@ -85,11 +150,18 @@ export default class Events extends Com {
 
 		let $loading = null
 		let style = 'opacity: 1 !important'
-		if (this.state.loading || this.props.creating) {
+		if (this.props.creating) {
 			$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}
@@ -171,9 +243,13 @@ export default class Events extends Com {
 		if (!this.props.cid) return
 		// load msg
 		this.lastContentOffsetY = 0
-		this.setState({loading: true})
+		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(() => {
+				this.forceUpdate()
+			}, 800)
 			let cid = this.props.cid
 
 			let {error} = await this.props.store.fetchMoreEvents(cid)
@@ -184,11 +260,10 @@ export default class Events extends Com {
 				return
 			}
 		}
-		this.setState({loading: true})
 		this.props.store.fetchMoreEvents(this.props.cid)
 		this.setState({error: false})
 		this.scrollToBottom()
-		sb.setTimeout(() => this.setState({loading: false}), 50)
+		// sb.setTimeout(() => this.setState({loading: false}), 50)
 	}
 
 	isBottom() {
@@ -205,7 +280,7 @@ export default class Events extends Com {
 		sb.setTimeout(() => {
 			const $div = this.refBody
 			if ($div) $div.scrollTop = $div.scrollHeight
-		}, 200)
+		}, 100)
 
 		if (this.props.isShow) {
 			if (this.props.store.browserVisibility === 'visible' && document.hasFocus()) {
@@ -224,9 +299,13 @@ function processEvents(convo, events) {
 
 	// 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)
@@ -234,6 +313,8 @@ function processEvents(convo, events) {
 		}
 	}
 
+	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') {

package/src/chatbox/Header.js

@@ -54,7 +54,8 @@ export default class Header extends Com {
 		return (
 			<div class={cls} style={style}>
 				{$back}
-				<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='secondary' agent_ids={agentIdsJoined} />
+				<div class="mr-2"></div>
+				<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='secondary' />
 				<div class='widget-header--title-container'>
 					<div class='widget-header--title'>{this.getTitle()}</div>
 					<div class='widget-header--description' title={desc}>
@@ -201,7 +202,7 @@ 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
 		return (
 			<div
-				class='widget-header--button widget-header--button-close'
+				class='widget-header--button-close'
 				data-tooltip={this.props.t('close')}
 				data-tooltip-position='bottom'
 				onClick={(e) => this.onCloseClick(e)}

package/src/chatbox/InfoMessage.js

@@ -7,24 +7,12 @@ function getRateLang(rating) {
 	return 'great'
 }
 
-import Time from './time.js'
 import {Com} from '../common.js'
 import {h} from 'preact'
 //  [ 'ev'],
 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'>
-					<Time time={ev.created} t={this.props.t} />
-				</div>
-			)
-		}
-
-		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') {
@@ -32,7 +20,6 @@ export default class InfoMessage extends Com {
 			if (rating.no_rating) return null
 			return (
 				<div class='convo-event'>
-					{$time}
 					<div class='info-message'>
 						{this.props.t('rated_as') + ' ' + this.props.t(getRateLang(rating.rating)).toLowerCase()}
 					</div>
@@ -42,7 +29,6 @@ export default class InfoMessage extends Com {
 		if (ev.type === 'conversation_state_updated' && sb.get(ev, 'data.conversation.state') === 'ended') {
 			return (
 				<div class='convo-event'>
-					{$time}
 					<div class='info-message'>{this.props.t('conversation_ended')}</div>
 				</div>
 			)

package/src/chatbox/MessageInput.js

@@ -1,8 +1,9 @@
 import sb from '../util/index.js'
 import {Com} from '../common.js'
 import {h, createRef} from 'preact'
+import Spinner from './spinner.js'
 import Emoji from './Emoji.js'
-// 	props: ['disabled', 'cid'],
+// 	props: ['disabled', 'cid', 'is_loading'],
 export default class MessageInput extends Com {
 	constructor(props) {
 		super(props)
@@ -37,7 +38,7 @@ export default class MessageInput extends Com {
 	}
 
 	render() {
-		var buttons = (
+		var $buttons = (
 			<div class='d-flex flex-row align-self-end'>
 				{this.renderEmoji()}
 				<div
@@ -49,7 +50,7 @@ export default class MessageInput extends Com {
 		)
 		var msg = sb.trim(this.state.msgValue)
 		if (msg.length > 0) {
-			buttons = (
+			$buttons = (
 				<div class='d-flex flex-row align-self-end'>
 					{this.renderEmoji()}
 					<div
@@ -61,9 +62,17 @@ export default class MessageInput extends Com {
 			)
 		}
 
+		if (this.props.is_loading) {
+			$buttons = (
+				<div class='d-flex flex-row align-self-end'>
+					<Spinner size='32' />
+				</div>
+			)
+		}
+
 		var containercls = ''
 		var disabled = this.hasUnfinishRequiredFormOrLock() || this.props.disabled
-		if (disabled) containercls = 'message-input--disabled'
+		if (disabled || this.props.is_loading) containercls = 'message-input--disabled'
 
 		return (
 			<div
@@ -77,7 +86,7 @@ export default class MessageInput extends Com {
 					disabled={disabled}
 					class='message-input--input'
 					maxlength='1024'
-					placeholder={this.props.t('message_input_help')}
+					placeholder={this.props.t('message_input_help').substr(0, 25)}
 					ref={this.refMessageInput}
 					rows='1'
 					value={this.state.msgValue}
@@ -86,7 +95,7 @@ export default class MessageInput extends Com {
 					data-emojiable='true'
 					onKeydown={(e) => this.onKeydown(e)}
 				/>
-				{buttons}
+				{$buttons}
 			</div>
 		)
 	}
@@ -226,6 +235,11 @@ export default class MessageInput extends Com {
 		)
 	}
 
+	applyMessage(text) {
+		this.setState({msgValue: text})
+		this.resizeInput()
+	}
+
 	focus() {
 		if (this.props.disabled) return
 		this.refMessageInput.current && this.refMessageInput.current.focus()
@@ -319,9 +333,11 @@ export default class MessageInput extends Com {
 		msg = msg || sb.trim(this.state.msgValue) || ''
 		if (!msg) return
 		if (this.props.disabled) return
+		if (this.props.onSend) {
+			await this.props.onSend({text: msg, format: 'plaintext'})
+		}
 		this.setState({openEmoji: false, msgValue: ''})
 		this.resizeInput()
-		this.props.onSend && this.props.onSend({text: msg, format: 'plaintext'})
 	}
 
 	sendTyping() {

package/src/chatbox/TextMessage.js

@@ -3,8 +3,19 @@ import Block from './block.js'
 import {Com} from '../common.js'
 import {h} from 'preact'
 import Emoji from './Emoji.js'
+import Time from './time.js'
 
 export default class TextMessage extends Com {
+	renderTime() {
+		if (!this.props.showTime && !this.props.isLast && !this.props.isFirst) return null
+
+		return (
+			<div>
+				<Time class='inline-time' time={sb.get(this.props.ev, 'created', sb.Date.now())} t={this.props.t} />
+			</div>
+		)
+	}
+
 	render() {
 		var format = sb.get(this.props.ev, 'data.message.format', 'plaintext')
 		let block = sb.get(this.props.ev, 'data.message.block')
@@ -48,6 +59,7 @@ export default class TextMessage extends Com {
 			return (
 				<div class='message-agent message-text--agent' title={t}>
 					{tags}
+					{this.renderTime()}
 				</div>
 			)
 		return (
@@ -66,6 +78,7 @@ export default class TextMessage extends Com {
 			return (
 				<div class='message-agent message-text--agent' title={t}>
 					<Block block={block} onLink={this.props.onLink} />
+					{this.renderTime()}
 				</div>
 			)
 		}

package/src/chatbox/Widget.js

@@ -8,7 +8,7 @@ var checkedimg = require('../../assets/img/done_gray.svg')
 var empty = require('../../assets/img/empty.svg')
 import MessageInput from './MessageInput.js'
 import Events from './Events.js'
-import Typing from './Typing.js'
+// import Typing from './Typing.js'
 import Rating from './Rating.js'
 // import Order from './Order.js'
 let Order = false
@@ -17,7 +17,6 @@ import ListField from './ListField.js'
 
 const defaultAvatar = 'https://vcdn.subiz-cdn.com/file/fiqoahedjbgwclpouoml-avatar_default_baa8a1d7.png'
 
-import Spinner from './spinner.js'
 import Time from './time.js'
 import {Com} from '../common.js'
 import {h, createRef} from 'preact'
@@ -49,6 +48,10 @@ export default class Widget extends Com {
 		this.updateFormDataFields()
 	}
 
+	applyMessage(text) {
+		this.focusInput(text)
+	}
+
 	componentDidUpdate(prevProp) {
 		if (prevProp.isShow !== this.props.isShow) {
 			if (this.props.isShow && !this.props.store.isMobile()) this.focusInput()
@@ -64,7 +67,7 @@ export default class Widget extends Com {
 				// focus Events then focus MessageInput
 				// if there is any pending form, MessageInput will be disabled
 				// and dont steal focus from Events
-				this.events && this.events.focus()
+				this.$events && this.$events.focus()
 				if (!this.props.store.isMobile()) this.focusInput()
 			}, 100)
 			this.updateFormDataFields()
@@ -73,7 +76,7 @@ export default class Widget extends Com {
 	}
 
 	ShowTyping() {
-		this.refTyping.current && this.refTyping.current.ShowTyping()
+		this.$events && this.$events.ShowTyping()
 	}
 
 	shouldShowForm() {
@@ -130,7 +133,7 @@ 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'
 		let hideheader = sb.get(accountSetting, 'header.hidden', false)
@@ -709,9 +712,8 @@ export default class Widget extends Com {
 		sb.setTimeout(() => $input && $input.blur(), 300) // force lose focus
 	}
 
-	focusInput() {
+	focusInput(text) {
 		if (this.props.store.isPreview) return
-
 		if (this.shouldShowForm()) {
 			// focus on the element
 			let firstemptykey = ''
@@ -733,6 +735,9 @@ export default class Widget extends Com {
 
 		var $input = this.msgInput.current
 		if (!$input) return
+		if (text != undefined && typeof text === 'string') {
+			$input.applyMessage(text)
+		}
 		sb.setTimeout(() => $input.focus())
 		sb.setTimeout(() => $input.focus(), 300) // force focus
 	}
@@ -770,17 +775,21 @@ export default class Widget extends Com {
 			})
 			if (_creating != this._creating) return // outdated
 			if (error) {
+				this.setState({creating: false})
+				return
 				// show error and try again
 			}
 			await this.props.store.sendConvoEvent(convo.id, 'message_sent', {message})
 			if (_creating != this._creating) return // outdated
-			this.setState({creating: false})
-
 			this.props.onGo({view: 'chat', cid: convo.id})
+			this.setState({creating: false})
 			return
 		}
-		await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {message})
-		this.setState({creating: false})
+		// dont let text-input wait, since we want to clear out the message as soon as posible
+		sb.setTimeout(async () => {
+			await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {message})
+			this.setState({creating: false})
+		}, 1)
 	}
 
 	createPostback(postback) {
@@ -798,6 +807,7 @@ export default class Widget extends Com {
 				ref={this.msgInput}
 				cid={this.props.cid}
 				onChange={this.onChangeMessageInput}
+				is_loading={this.state.creating}
 				onSend={this.sendMessage}
 				t={this.props.t}
 			/>
@@ -812,7 +822,6 @@ export default class Widget extends Com {
 				</div>
 			)
 		}
-
 		return (
 			<div class='widget-body'>
 				<div class='widget-body--content' onClick={(e) => this.onContainerClick(e)}>
@@ -822,19 +831,13 @@ export default class Widget extends Com {
 						store={this.props.store}
 						chatbox={this.props.plugin.chatbox || {}}
 						onFormSubmit={(e) => this.onEventFormSubmit(e)}
-						ref={(ref) => (this.events = ref)}
+						ref={(ref) => (this.$events = ref)}
 						cid={this.props.cid}
 						creating={this.creating}
 						onSend={(e) => this.sendMessage(e)}
 						onPostback={(e) => this.createPostback(e)}
 						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

package/src/chatbox/main.js

@@ -168,6 +168,10 @@ export default class Main extends Com {
 		this.props.store.setLastview(p.view, {cid: p.cid})
 	}
 
+	applyMessage(text) {
+		this.refWidget.current && this.refWidget.current.applyMessage(text)
+	}
+
 	showGreeting() {
 		this.refButton.current && this.refButton.current.ShowGreeting()
 	}