chore: Add chatwoot:on-message event (#6425)

app/javascript/widget/constants/sdkEvents.js

@@ -1,2 +1,3 @@
 export const CHATWOOT_ERROR = 'chatwoot:error';
+export const CHATWOOT_ON_MESSAGE = 'chatwoot:on-message';
 export const CHATWOOT_READY = 'chatwoot:ready';

app/javascript/widget/helpers/actionCable.js

@@ -1,6 +1,14 @@
 import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnector';
 import { playNewMessageNotificationInWidget } from 'widget/helpers/WidgetAudioNotificationHelper';
 import { ON_AGENT_MESSAGE_RECEIVED } from '../constants/widgetBusEvents';
+import { IFrameHelper } from 'widget/helpers/utils';
+
+const isMessageInActiveConversation = (getters, message) => {
+  const { conversation_id: conversationId } = message;
+  const activeConversationId =
+    getters['conversationAttributes/getConversationParams'].id;
+  return activeConversationId && conversationId !== activeConversationId;
+};
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
@@ -25,15 +33,24 @@ class ActionCableConnector extends BaseActionCableConnector {
   };
 
   onMessageCreated = data => {
+    if (isMessageInActiveConversation(this.app.$store.getters, data)) {
+      return;
+    }
+
     this.app.$store
       .dispatch('conversation/addOrUpdateMessage', data)
       .then(() => window.bus.$emit(ON_AGENT_MESSAGE_RECEIVED));
+
+    IFrameHelper.sendMessage({ event: 'onMessage', data });
     if (data.sender_type === 'User') {
       playNewMessageNotificationInWidget();
     }
   };
 
   onMessageUpdated = data => {
+    if (isMessageInActiveConversation(this.app.$store.getters, data)) {
+      return;
+    }
     this.app.$store.dispatch('conversation/addOrUpdateMessage', data);
   };
 
@@ -51,7 +68,13 @@ class ActionCableConnector extends BaseActionCableConnector {
   };
 
   onTypingOn = data => {
-    if (data.is_private) {
+    const activeConversationId = this.app.$store.getters[
+      'conversationAttributes/getConversationParams'
+    ].id;
+    const isUserTypingOnAnotherConversation =
+      data.conversation && data.conversation.id !== activeConversationId;
+
+    if (isUserTypingOnAnotherConversation || data.is_private) {
       return;
     }
     this.clearTimer();