diff --git a/packages/webchat/src/components/messages/Message.tsx b/packages/webchat/src/components/messages/Message.tsx index 15d099f4f..c7fe83179 100644 --- a/packages/webchat/src/components/messages/Message.tsx +++ b/packages/webchat/src/components/messages/Message.tsx @@ -62,7 +62,7 @@ class Message extends Component { isLastGroup: this.props.isLastGroup!, isBotMessage: this.props.isBotMessage!, sentOn: this.props.sentOn!, - onSendData: this.props.onSendData!, + onSendData: (payload) => this.props.onSendData!(payload, { showBotTyping: true }), onFileUpload: this.props.onFileUpload!, store: this.props.store, onAudioEnded: this.props.onAudioEnded, diff --git a/packages/webchat/src/store/index.ts b/packages/webchat/src/store/index.ts index 78ded4e85..e977f92ef 100644 --- a/packages/webchat/src/store/index.ts +++ b/packages/webchat/src/store/index.ts @@ -338,8 +338,7 @@ class RootStore { this.composer.updateMessage('') try { - this.isBotTyping.set(true) - const message = await this.sendData({ type: 'text', text: textMessage }) + const message = await this.sendData({ type: 'text', text: textMessage }, { showBotTyping: true }) trackMessage('sent') if (message) { postMessageToParent('MESSAGE.SENT', message, this.config.chatId) @@ -438,12 +437,16 @@ class RootStore { /** Sends an event or a message, depending on how the backend manages those types */ @action.bound - async sendData(data: any): Promise { + async sendData(data: any, options?: { showBotTyping?: boolean }): Promise { if (!this.isInitialized || !this.currentConversationId) { console.warn('[webchat] Cannot send data until the webchat is ready') return } + if (options?.showBotTyping) { + this.isBotTyping.set(true) + } + const message = await this.api.sendMessage(data, this.currentConversationId) this.updateLastMessage(this.currentConversationId, message) diff --git a/packages/webchat/src/typings.ts b/packages/webchat/src/typings.ts index 8104783f6..3eb629ef1 100644 --- a/packages/webchat/src/typings.ts +++ b/packages/webchat/src/typings.ts @@ -56,7 +56,7 @@ export namespace Renderer { sentOn?: Date inlineFeedback?: any - onSendData?: (data: any) => Promise + onSendData?: (data: any, options?: { showBotTyping?: boolean }) => Promise onFileUpload?: (label: string, payload: any, file: File) => Promise /** Allows to autoplay voice messages coming from the bot */