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

* Remove thumbnail

* Show grouped messages

app/javascript/widget/components/AgentMessage.vue

@@ -1,31 +1,38 @@
 <template>
   <div class="agent-message">
     <div class="avatar-wrap">
-      <UserAvatar size="small" :src="avatarUrl" />
+      <thumbnail
+        v-if="showAvatar"
+        :src="avatarUrl"
+        size="24px"
+        :username="agentName"
+      />
     </div>
     <div class="message-wrap">
-      <h5 class="agent-name">
-        {{ agentName }}
-      </h5>
       <AgentMessageBubble :message="message" />
+      <p v-if="showAvatar" class="agent-name">
+        {{ agentName }}
+      </p>
     </div>
   </div>
 </template>
 
 <script>
-import UserAvatar from 'widget/components/UserAvatar.vue';
 import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 export default {
   name: 'AgentMessage',
   components: {
-    UserAvatar,
     AgentMessageBubble,
+    Thumbnail,
   },
   props: {
     message: String,
     avatarUrl: String,
     agentName: String,
+    showAvatar: Boolean,
+    createdAt: Number,
   },
 };
 </script>
@@ -35,10 +42,10 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 .conversation-wrap {
   .agent-message {
+    align-items: flex-end;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: flex-end;
     margin: 0 0 $space-micro $space-small;
     max-width: 88%;
 
@@ -48,14 +55,6 @@ export default {
       .chat-bubble {
         border-top-left-radius: $space-smaller;
       }
-
-      .user-avatar {
-        visibility: hidden;
-      }
-
-      .agent-name {
-        display: none;
-      }
     }
 
     & + .user-message {
@@ -63,23 +62,28 @@ export default {
     }
 
     .avatar-wrap {
-      flex-shrink: 1;
-      flex-grow: 0;
+      height: $space-medium;
+      width: $space-medium;
+
+      .user-thumbnail-box {
+        margin-top: -$space-large;
+      }
     }
 
     .message-wrap {
-      max-width: 90%;
-      flex-shrink: 0;
       flex-grow: 1;
+      flex-shrink: 0;
       margin-left: $space-small;
-
-      .agent-name {
-        font-weight: $font-weight-medium;
-        margin-bottom: $space-smaller;
-        margin-left: $space-two;
-        color: $color-body;
-      }
+      max-width: 90%;
     }
   }
+
+  .agent-name {
+    color: $color-body;
+    font-size: $font-size-default;
+    font-weight: $font-weight-medium;
+    margin-bottom: $space-small;
+    margin-top: $space-small;
+  }
 }
 </style>

app/javascript/widget/components/ChatMessage.vue

@@ -4,7 +4,13 @@
     :message="message.content"
     :status="message.status"
   />
-  <AgentMessage v-else :agent-name="agentName" :message="message.content" />
+  <AgentMessage
+    v-else
+    :agent-name="agentName"
+    :message="message.content"
+    :show-avatar="message.showAvatar"
+    :avatar-url="avatarUrl"
+  />
 </template>
 
 <script>
@@ -19,6 +25,7 @@ export default {
   },
   props: {
     message: Object,
+    showAvatar: Boolean,
   },
   computed: {
     isUserMessage() {
@@ -27,6 +34,9 @@ export default {
     agentName() {
       return this.message.sender ? this.message.sender.name : '';
     },
+    avatarUrl() {
+      return this.message.sender ? this.message.sender.avatar_url : '';
+    },
   },
 };
 </script>

app/javascript/widget/components/ConversationWrap.vue

@@ -4,10 +4,10 @@
       <div v-if="isFetchingList" class="message--loader">
         <spinner></spinner>
       </div>
-      <div v-for="date in conversationDates" :key="date">
-        <date-separator :date="date"></date-separator>
+      <div v-for="groupedMessage in groupedMessages" :key="groupedMessage.date">
+        <date-separator :date="groupedMessage.date"></date-separator>
         <ChatMessage
-          v-for="message in groupedMessages[date]"
+          v-for="message in groupedMessage.messages"
           :key="message.id"
           :message="message"
         />
@@ -33,7 +33,7 @@ export default {
     Spinner,
   },
   props: {
-    groupedMessages: Object,
+    groupedMessages: Array,
   },
   data() {
     return {
@@ -48,9 +48,6 @@ export default {
       isFetchingList: 'conversation/getIsFetchingList',
       conversationSize: 'conversation/getConversationSize',
     }),
-    conversationDates() {
-      return Object.keys(this.groupedMessages);
-    },
   },
   watch: {
     allMessagesLoaded() {

app/javascript/widget/components/UserMessage.vue

@@ -43,12 +43,6 @@ export default {
       .chat-bubble {
         border-top-right-radius: $space-smaller;
       }
-      .user-avatar {
-        visibility: hidden;
-      }
-      .agent-name {
-        display: none;
-      }
     }
     & + .agent-message {
       margin-top: $space-normal;