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

app/javascript/sdk/IFrameHelper.js

@@ -23,7 +23,11 @@ import {
 } from './bubbleHelpers';
 import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
 import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
-import { CHATWOOT_ERROR, CHATWOOT_READY } from '../widget/constants/sdkEvents';
+import {
+  CHATWOOT_ERROR,
+  CHATWOOT_ON_MESSAGE,
+  CHATWOOT_READY,
+} from '../widget/constants/sdkEvents';
 import { SET_USER_ERROR } from '../widget/constants/errorTypes';
 import { getUserCookieName } from './cookieHelpers';
 import {
@@ -177,7 +181,9 @@ export const IFrameHelper = {
         Cookies.remove(getUserCookieName());
       }
     },
-
+    onMessage({ data }) {
+      dispatchWindowEvent({ eventName: CHATWOOT_ON_MESSAGE, data });
+    },
     setBubbleLabel(message) {
       setBubbleText(window.$chatwoot.launcherTitle || message.label);
     },

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();

app/views/widget_tests/index.html.erb

@@ -53,4 +53,9 @@ window.addEventListener('chatwoot:ready', function() {
 window.addEventListener('chatwoot:error', function(e) {
   console.log('chatwoot:error', e.detail)
 })
+
+
+window.addEventListener('chatwoot:on-message', function(e) {
+  console.log('chatwoot:on-message', e.detail)
+})
 </script>