fix: Disable showing read messages in unread view (#4324)

app/javascript/widget/App.vue

@@ -138,7 +138,13 @@ export default {
       }
     },
     registerUnreadEvents() {
-      bus.$on(ON_AGENT_MESSAGE_RECEIVED, this.setUnreadView);
+      bus.$on(ON_AGENT_MESSAGE_RECEIVED, () => {
+        const { name: routeName } = this.$route;
+        if (this.isWidgetOpen && routeName === 'messages') {
+          this.$store.dispatch('conversation/setUserLastSeen');
+        }
+        this.setUnreadView();
+      });
       bus.$on(ON_UNREAD_MESSAGE_CLICK, () => {
         this.replaceRoute('messages').then(() => this.unsetUnreadView());
       });
@@ -175,6 +181,7 @@ export default {
     },
     setUnreadView() {
       const { unreadMessageCount } = this;
+
       if (this.isIFrame && unreadMessageCount > 0 && !this.isWidgetOpen) {
         this.replaceRoute('unread-messages').then(() => {
           this.setIframeHeight(true);

app/javascript/widget/store/modules/conversation/actions.js

@@ -84,8 +84,12 @@ export const actions = {
   fetchOldConversations: async ({ commit }, { before } = {}) => {
     try {
       commit('setConversationListLoading', true);
-      const { data } = await getMessagesAPI({ before });
+      const {
-      const formattedMessages = getNonDeletedMessages({ messages: data });
+        data: { payload, meta },
+      } = await getMessagesAPI({ before });
+      const { contact_last_seen_at: lastSeen } = meta;
+      const formattedMessages = getNonDeletedMessages({ messages: payload });
+      commit('conversation/setMetaUserLastSeenAt', lastSeen, { root: true });
       commit('setMessagesInConversation', formattedMessages);
       commit('setConversationListLoading', false);
     } catch (error) {

app/javascript/widget/store/modules/specs/conversation/actions.spec.js

@@ -181,22 +181,28 @@ describe('#actions', () => {
   describe('#fetchOldConversations', () => {
     it('sends correct actions', async () => {
       API.get.mockResolvedValue({
-        data: [
+        data: {
-          {
+          payload: [
-            id: 1,
+            {
-            text: 'hey',
+              id: 1,
-            content_attributes: {},
+              text: 'hey',
+              content_attributes: {},
+            },
+            {
+              id: 2,
+              text: 'welcome',
+              content_attributes: { deleted: true },
+            },
+          ],
+          meta: {
+            contact_last_seen_at: 1466424490,
           },
-          {
+        },
-            id: 2,
-            text: 'welcome',
-            content_attributes: { deleted: true },
-          },
-        ],
       });
       await actions.fetchOldConversations({ commit }, {});
       expect(commit.mock.calls).toEqual([
         ['setConversationListLoading', true],
+        ['conversation/setMetaUserLastSeenAt', 1466424490, { root: true }],
         [
           'setMessagesInConversation',
           [

app/views/api/v1/widget/messages/index.json.jbuilder

@@ -1,11 +1,16 @@
-json.array! @messages do |message|
+json.payload do
-  json.id message.id
+  json.array! @messages do |message|
-  json.content message.content
+    json.id message.id
-  json.message_type message.message_type_before_type_cast
+    json.content message.content
-  json.content_type message.content_type
+    json.message_type message.message_type_before_type_cast
-  json.content_attributes message.content_attributes
+    json.content_type message.content_type
-  json.created_at message.created_at.to_i
+    json.content_attributes message.content_attributes
-  json.conversation_id message.conversation.display_id
+    json.created_at message.created_at.to_i
-  json.attachments message.attachments.map(&:push_event_data) if message.attachments.present?
+    json.conversation_id message.conversation.display_id
-  json.sender message.sender.push_event_data if message.sender
+    json.attachments message.attachments.map(&:push_event_data) if message.attachments.present?
+    json.sender message.sender.push_event_data if message.sender
+  end
+end
+json.meta do
+  json.contact_last_seen_at @conversation.contact_last_seen_at.to_i
 end

spec/controllers/api/v1/widget/messages_controller_spec.rb

@@ -23,9 +23,8 @@ RSpec.describe '/api/v1/widget/messages', type: :request do
 
         expect(response).to have_http_status(:success)
         json_response = JSON.parse(response.body)
-
         # 2 messages created + 2 messages by the email hook
-        expect(json_response.length).to eq(4)
+        expect(json_response['payload'].length).to eq(4)
       end
     end
   end