[Enhancement] Group widget messages by users (#367)

* Remove thumbnail

* Show grouped messages

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

@@ -45,9 +45,33 @@ export const getters = {
     return {};
   },
   getGroupedConversation: _state => {
-    return groupBy(Object.values(_state.conversations), message =>
-      new DateHelper(message.created_at).format()
+    const conversationGroupedByDate = groupBy(
+      Object.values(_state.conversations),
+      message => new DateHelper(message.created_at).format()
     );
+
+    return Object.keys(conversationGroupedByDate).map(date => {
+      const messages = conversationGroupedByDate[date].map((message, index) => {
+        let showAvatar = false;
+        if (index === conversationGroupedByDate[date].length - 1) {
+          showAvatar = true;
+        } else {
+          const nextMessage = conversationGroupedByDate[date][index + 1];
+          const currentSender = message.sender ? message.sender.name : '';
+          const nextSender = nextMessage.sender ? nextMessage.sender.name : '';
+          showAvatar = currentSender !== nextSender;
+        }
+        return {
+          showAvatar,
+          ...message,
+        };
+      });
+
+      return {
+        date,
+        messages,
+      };
+    });
   },
   getIsFetchingList: _state => _state.uiFlags.isFetchingList,
 };

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

@@ -79,31 +79,41 @@ describe('#getters', () => {
         },
       },
     };
-    expect(getters.getGroupedConversation(state)).toEqual({
-      'Nov 18, 2019': [
-        {
-          id: 1,
-          content: 'Thanks for the help',
-          created_at: 1574075964,
-        },
-        {
-          id: 2,
-          content: 'Yes, It makes sense',
-          created_at: 1574092218,
-        },
-      ],
-      'Dec 14, 2019': [
-        {
-          id: 3,
-          content: 'Hey',
-          created_at: 1576340623,
-        },
-        {
-          id: 4,
-          content: 'How may I help you',
-          created_at: 1576340626,
-        },
-      ],
-    });
+    expect(getters.getGroupedConversation(state)).toEqual([
+      {
+        date: 'Nov 18, 2019',
+        messages: [
+          {
+            id: 1,
+            content: 'Thanks for the help',
+            created_at: 1574075964,
+            showAvatar: false,
+          },
+          {
+            id: 2,
+            content: 'Yes, It makes sense',
+            created_at: 1574092218,
+            showAvatar: true,
+          },
+        ],
+      },
+      {
+        date: 'Dec 14, 2019',
+        messages: [
+          {
+            id: 3,
+            content: 'Hey',
+            created_at: 1576340623,
+            showAvatar: false,
+          },
+          {
+            id: 4,
+            content: 'How may I help you',
+            created_at: 1576340626,
+            showAvatar: true,
+          },
+        ],
+      },
+    ]);
   });
 });