refactor(chat): reuse message component inside of message replies

components/views/chat/message/Message.html

@@ -44,7 +44,7 @@
     </div>
     <div class="footer">
       <MessageReactions :message="message" :emojiReaction="emojiReaction" />
-      <MessageReply :replies="replies" />
+      <MessageReplies :replies="replies" />
     </div>
   </div>
 </UiContextMenu>

components/views/chat/message/Message.less

@@ -25,18 +25,18 @@
       'timestamp footer';
     grid-template-columns: 52px;
 
-    .timestamp {
+    > .timestamp {
       opacity: 0;
     }
 
     &:hover,
     &:focus-within {
-      .timestamp {
+      > .timestamp {
         opacity: 1;
       }
     }
 
-    .timestamp {
+    > .timestamp {
       line-height: 24px;
     }
   }
@@ -98,7 +98,7 @@
       &:extend(.background-semitransparent-light);
     }
 
-    .message-actions {
+    > .body > .message-actions {
       opacity: 1;
     }
   }

components/views/chat/message/Message.vue

@@ -25,7 +25,7 @@ export default Vue.extend({
     },
     replies: {
       type: Array as PropType<(ConversationMessage & { id: string })[]>,
-      required: true,
+      default: [] as (ConversationMessage & { id: string })[],
     },
     showHeader: {
       type: Boolean,

components/views/chat/message/reply/Reply.html → components/views/chat/message/replies/Replies.html

@@ -9,12 +9,14 @@
     {{ makeReplyText }}
   </div>
   <template v-else>
-    <MessageReplyItem
-      v-for="reply in replies"
-      :key="reply.id"
-      :message="message"
-      :reply="reply"
-    />
+    <div class="message-replies">
+      <Message
+        v-for="item in replyItems"
+        :message="item.message"
+        :key="item.message.id"
+        :showHeader="!item.isSameAuthor"
+      />
+    </div>
     <div @click="toggleReplies" class="toggle-button" data-cy="reply-close">
       <minus-square-icon size="1.1x" />
       {{ $t('conversation.collapse') }}

components/views/chat/message/reply/Reply.less → components/views/chat/message/replies/Replies.less

@@ -1,6 +1,5 @@
 .replies-container {
   margin: @light-spacing 0;
-  padding: @xlight-spacing @light-spacing;
   word-break: break-word;
   &:extend(.bordered);
   &:extend(.round-corners);
@@ -11,10 +10,23 @@
     align-items: center;
     cursor: pointer;
     padding: @xlight-spacing;
-    gap: @xlight-spacing;
+    gap: @light-spacing;
     font-size: @text-size;
     font-family: @secondary-font;
+    padding: @light-spacing @normal-spacing;
     &:extend(.font-secondary);
+
+    &:hover {
+      &:extend(.background-semitransparent-light);
+    }
+  }
+
+  .message-replies {
+    padding: @light-spacing;
+
+    .chat-message-container:first-child .chat-message {
+      margin-top: @light-spacing;
+    }
   }
 }
 .is-chatbar-reply {

components/views/chat/message/reply/Reply.vue → components/views/chat/message/replies/Replies.vue

@@ -1,4 +1,4 @@
-<template src="./Reply.html"></template>
+<template src="./Replies.html"></template>
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { mapState } from 'vuex'
@@ -7,6 +7,11 @@ import { getUsernameFromState } from '~/utilities/Messaging'
 import { toHTML } from '~/libraries/ui/Markdown'
 import { ConversationMessage } from '~/libraries/Iridium/chat/types'
 
+interface ReplyItem {
+  message: ConversationMessage & { id: string }
+  isSameAuthor: boolean
+}
+
 export default Vue.extend({
   components: {
     PlusSquareIcon,
@@ -25,6 +30,18 @@ export default Vue.extend({
   },
   computed: {
     ...mapState(['ui', 'chat']),
+    replyItems(): ReplyItem[] {
+      return this.replies.map((message, index) => {
+        const prevMessage = index >= 0 ? this.replies[index - 1] : undefined
+        const isSameAuthor = prevMessage
+          ? message.from === prevMessage.from
+          : false
+        return {
+          message,
+          isSameAuthor,
+        }
+      })
+    },
     setChatReply: {
       set(state) {
         this.$store.commit('chat/setChatReply', state)
@@ -132,4 +149,4 @@ export default Vue.extend({
   },
 })
 </script>
-<style lang="less" src="./Reply.less"></style>
+<style lang="less" src="./Replies.less"></style>