From 8db40f2d8201678327c4c950186cb69960bc250b Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Thu, 9 Feb 2023 12:48:22 -0800
Subject: [PATCH] chore: Add chatwoot:on-message event (#6425)

---
 app/javascript/sdk/IFrameHelper.js           | 10 ++++++--
 app/javascript/widget/constants/sdkEvents.js |  1 +
 app/javascript/widget/helpers/actionCable.js | 25 +++++++++++++++++++-
 app/views/widget_tests/index.html.erb        |  5 ++++
 4 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index 32e64b36a..8f4e85bae 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/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);
     },
diff --git a/app/javascript/widget/constants/sdkEvents.js b/app/javascript/widget/constants/sdkEvents.js
index 3accb1123..801665711 100644
--- a/app/javascript/widget/constants/sdkEvents.js
+++ b/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';
diff --git a/app/javascript/widget/helpers/actionCable.js b/app/javascript/widget/helpers/actionCable.js
index 4b7140bcf..40f95c342 100644
--- a/app/javascript/widget/helpers/actionCable.js
+++ b/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();
diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb
index 5a3ba29e0..3c9b8624d 100644
--- a/app/views/widget_tests/index.html.erb
+++ b/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>