move SABs margin into status

src/components/chat_message_list/chat_message_list.js

@@ -20,7 +20,7 @@ const ChatMessageList = {
       hoveredMessageChainId: undefined,
     }
   },
-  emits: ['messageDelete'],
+  emits: ['messageDelete', 'replyRequested'],
   computed: {
     chatItems() {
       const messages = [
@@ -107,6 +107,22 @@ const ChatMessageList = {
     onMessageDelete({ messageId, chatId }) {
       this.$emit('messageDelete', { messageId, chatId })
     },
+    onReplyRequested(message) {
+      this.$emit('replyRequested', message)
+    },
+    getPreviousItem(index) {
+      let result
+
+      this.chatItems.slice(0, index).reverse().some((item) => {
+        const isMessage = item.type === 'message'
+        if (isMessage) {
+          result = item
+        }
+        return isMessage
+      })
+
+      return result
+    }
   },
 }
 

src/components/chat_message_list/chat_message_list.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="ChatMessageList">
     <ChatMessage
-      v-for="chatItem in chatItems"
+      v-for="(chatItem, index) in chatItems"
       :key="chatItem.id"
       :chat-item="chatItem"
+      :previous-item="getPreviousItem(index)"
       :hovered-message-chain="chatItem.messageChainId === hoveredMessageChainId"
       @hover="onMessageHover"
       @delete="onMessageDelete"
+      @reply-requested="onReplyRequested"
     />
   </div>
 </template>