From 1c363262b6c1c1d2685d282933ecff1749f33fdc Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 9 Dec 2025 17:26:06 +0530
Subject: [PATCH] feat: allow group with next

---
 .../components-next/message/MessageList.vue   | 35 +------------------
 .../components-next/message/groupWithNext.js  | 33 +++++++++++++++++
 app/javascript/ui/MessageList.vue             |  9 ++---
 3 files changed, 39 insertions(+), 38 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/message/groupWithNext.js

diff --git a/app/javascript/dashboard/components-next/message/MessageList.vue b/app/javascript/dashboard/components-next/message/MessageList.vue
index b73b44d5a..c0a7807e0 100644
--- a/app/javascript/dashboard/components-next/message/MessageList.vue
+++ b/app/javascript/dashboard/components-next/message/MessageList.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { defineProps, computed, reactive } from 'vue';
 import Message from './Message.vue';
-import { MESSAGE_TYPES } from './constants.js';
+import shouldGroupWithNext from './groupWithNext';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import MessageApi from 'dashboard/api/inbox/message.js';
@@ -87,39 +87,6 @@ const fetchReplyMessage = async (messageId, conversationId) => {
   }
 };
 
-/**
- * Determines if a message should be grouped with the next message
- * @param {Number} index - Index of the current message
- * @param {Array} searchList - Array of messages to check
- * @returns {Boolean} - Whether the message should be grouped with next
- */
-const shouldGroupWithNext = (index, searchList) => {
-  if (index === searchList.length - 1) return false;
-
-  const current = searchList[index];
-  const next = searchList[index + 1];
-
-  if (next.status === 'failed') return false;
-
-  const nextSenderId = next.senderId ?? next.sender?.id;
-  const currentSenderId = current.senderId ?? current.sender?.id;
-  const hasSameSender = nextSenderId === currentSenderId;
-
-  const nextMessageType = next.messageType;
-  const currentMessageType = current.messageType;
-
-  const areBothTemplates =
-    nextMessageType === MESSAGE_TYPES.TEMPLATE &&
-    currentMessageType === MESSAGE_TYPES.TEMPLATE;
-
-  if (!hasSameSender || areBothTemplates) return false;
-
-  if (currentMessageType !== nextMessageType) return false;
-
-  // Check if messages are in the same minute by rounding down to nearest minute
-  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
-};
-
 /**
  * Gets the message that was replied to
  * @param {Object} parentMessage - The message containing the reply reference
diff --git a/app/javascript/dashboard/components-next/message/groupWithNext.js b/app/javascript/dashboard/components-next/message/groupWithNext.js
new file mode 100644
index 000000000..aecb3f661
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/groupWithNext.js
@@ -0,0 +1,33 @@
+import { MESSAGE_TYPES } from './constants';
+/**
+ * Determines if a message should be grouped with the next message
+ * @param {Number} index - Index of the current message
+ * @param {Array} searchList - Array of messages to check
+ * @returns {Boolean} - Whether the message should be grouped with next
+ */
+export const shouldGroupWithNext = (index, searchList) => {
+  if (index === searchList.length - 1) return false;
+
+  const current = searchList[index];
+  const next = searchList[index + 1];
+
+  if (next.status === 'failed') return false;
+
+  const nextSenderId = next.senderId ?? next.sender?.id;
+  const currentSenderId = current.senderId ?? current.sender?.id;
+  const hasSameSender = nextSenderId === currentSenderId;
+
+  const nextMessageType = next.messageType;
+  const currentMessageType = current.messageType;
+
+  const areBothTemplates =
+    nextMessageType === MESSAGE_TYPES.TEMPLATE &&
+    currentMessageType === MESSAGE_TYPES.TEMPLATE;
+
+  if (!hasSameSender || areBothTemplates) return false;
+
+  if (currentMessageType !== nextMessageType) return false;
+
+  // Check if messages are in the same minute by rounding down to nearest minute
+  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
+};
diff --git a/app/javascript/ui/MessageList.vue b/app/javascript/ui/MessageList.vue
index 061cc13dd..69aaeb269 100644
--- a/app/javascript/ui/MessageList.vue
+++ b/app/javascript/ui/MessageList.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, computed, watch, useTemplateRef } from 'vue';
 import Message from 'next/message/Message.vue';
 import TypingIndicator from 'next/message/TypingIndicator.vue';
+import shouldGroupWithNext from 'next/message/groupWithNext';
 import Snipper from 'next/spinner/Spinner.vue';
 import LiteReplyBox from './LiteReplyBox.vue';
 import {
@@ -113,12 +114,12 @@ useInfiniteScroll(messageListRef, useThrottleFn(fetchMore, 1000), {
           <TypingIndicator class="text-n-slate-9" />
         </div>
       </div>
-      <template v-for="message in allMessages" :key="message.id">
+      <template v-for="(message, index) in allMessages" :key="message.id">
         <Message
           v-bind="message"
-          :is-email-inbox="isAnEmailChannel"
-          :group-with-next="false"
-          :inbox-supports-reply-to="inboxSupportsReplyTo"
+          :is-email-inbox="false"
+          :group-with-next="shouldGroupWithNext(index, allMessages)"
+          :inbox-supports-reply-to="false"
           :current-user-id="currentUserId"
         />
       </template>