feat: show message status for outgoing messages

app/javascript/dashboard/components-next/message/Message.vue

@@ -6,13 +6,17 @@ import {
   MESSAGE_VARIANTS,
   SENDER_TYPES,
   ORIENTATION,
+  MESSAGE_STATUS,
 } from './constants';
 
-import TextBubble from './bubbles/Text.vue';
-import MessageError from './MessageError.vue';
 import Avatar from 'next/avatar/Avatar.vue';
 import Icon from 'next/icon/Icon.vue';
 
+import TextBubble from './bubbles/Text.vue';
+
+import MessageError from './MessageError.vue';
+import MessageStatus from './MessageStatus.vue';
+
 /**
  * @typedef {Object} Sender
  * @property {Object} additional_attributes - Additional attributes of the sender
@@ -36,6 +40,7 @@ import Icon from 'next/icon/Icon.vue';
  * @property {Sender|null} [sender=null] - The sender information
  * @property {number|null} [senderId=null] - The ID of the sender
  * @property {string|null} [senderType=null] - The type of the sender
+ * @property {string|null} [error=null] - Error message if the message failed to send
  * @property {string} content - The message content
  * @property {number} currentUserId - The ID of the current user
  */
@@ -50,7 +55,7 @@ const props = defineProps({
   status: {
     type: String,
     required: true,
-    validator: value => ['sent', 'delivered', 'read', 'failed'].includes(value),
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
   },
   private: {
     type: Boolean,
@@ -160,7 +165,7 @@ const gridTemplate = computed(() => {
 });
 
 const shouldGroupWithNext = computed(() => {
-  if (props.error) return false;
+  if (props.status === MESSAGE_STATUS.FAILED) return false;
 
   return props.groupWithNext;
 });
@@ -218,6 +223,7 @@ const shouldShowAvatar = computed(() => {
           icon="i-lucide-lock-keyhole"
           class="text-n-slate-10 size-3"
         />
+        <MessageStatus v-if="messageType === MESSAGE_TYPES.OUTGOING" :status />
       </div>
     </div>
   </div>

app/javascript/dashboard/components-next/message/MessageStatus.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from 'vue';
+import { MESSAGE_STATUS } from './constants';
+
+import Icon from 'next/icon/Icon.vue';
+
+const { status } = defineProps({
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+});
+
+const statusIcon = computed(() => {
+  const statusIconMap = {
+    [MESSAGE_STATUS.SENT]: 'i-lucide-check',
+    [MESSAGE_STATUS.DELIVERED]: 'i-lucide-check-check',
+    [MESSAGE_STATUS.READ]: 'i-lucide-check-check',
+  };
+
+  return statusIconMap[status];
+});
+
+const statusColor = computed(() => {
+  const statusIconMap = {
+    [MESSAGE_STATUS.SENT]: 'text-n-slate-10',
+    [MESSAGE_STATUS.DELIVERED]: 'text-n-slate-10',
+    [MESSAGE_STATUS.READ]: 'text-[#7EB6FF]',
+  };
+
+  return statusIconMap[status];
+});
+</script>
+
+<template>
+  <Icon :icon="statusIcon" :class="statusColor" class="size-[14px]" />
+</template>

app/javascript/dashboard/components-next/message/constants.js

@@ -25,3 +25,10 @@ export const ORIENTATION = {
   RIGHT: 'right',
   CENTER: 'center',
 };
+
+export const MESSAGE_STATUS = {
+  SENT: 'sent',
+  DELIVERED: 'delivered',
+  READ: 'read',
+  FAILED: 'failed',
+};