feat: Add new message bubbles (#10481)

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/message/stories/TextMessages.story.vue

@@ -0,0 +1,45 @@
+<script setup>
+import Message from '../Message.vue';
+
+import textWithMedia from '../fixtures/textWithMedia.js';
+
+const messages = textWithMedia;
+
+const shouldGroupWithNext = index => {
+  if (index === messages.length - 1) return false;
+
+  const current = messages[index];
+  const next = messages[index + 1];
+
+  if (next.status === 'failed') return false;
+
+  const nextSenderId = next.senderId ?? next.sender?.id;
+  const currentSenderId = current.senderId ?? current.sender?.id;
+  if (currentSenderId !== nextSenderId) 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);
+};
+
+const getReplyToMessage = message => {
+  const idToCheck = message.contentAttributes.inReplyTo;
+  if (!idToCheck) return null;
+
+  return messages.find(candidate => idToCheck === candidate.id);
+};
+</script>
+
+<template>
+  <Story title="Components/Messages/Text" :layout="{ type: 'single' }">
+    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+      <template v-for="(message, index) in messages" :key="message.id">
+        <Message
+          :current-user-id="1"
+          :group-with-next="shouldGroupWithNext(index)"
+          :in-reply-to="getReplyToMessage(message)"
+          v-bind="message"
+        />
+      </template>
+    </div>
+  </Story>
+</template>