From faf78bd44773ff8265ec2133d2f38d072562756d Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 27 Nov 2024 16:17:42 +0530
Subject: [PATCH] feat: hide avatar for right oriented messages

---
 .../dashboard/components-next/message/Message.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index 1821f7836..e49da3976 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -138,7 +138,7 @@ const flexOrientationClass = computed(() => {
 const gridClass = computed(() => {
   const map = {
     [ORIENTATION.LEFT]: 'grid grid-cols-[24px_1fr]',
-    [ORIENTATION.RIGHT]: 'grid grid-cols-[1fr_24px]',
+    [ORIENTATION.RIGHT]: 'grid grid-cols-1fr',
   };
 
   return map[orientation.value];
@@ -151,8 +151,8 @@ const gridTemplate = computed(() => {
       "spacer meta"
     `,
     [ORIENTATION.RIGHT]: `
-      "bubble avatar"
-      "meta spacer"
+      "bubble"
+      "meta"
     `,
   };
 
@@ -164,6 +164,13 @@ const shouldGroupWithNext = computed(() => {
 
   return props.groupWithNext;
 });
+
+const shouldShowAvatar = computed(() => {
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return false;
+  if (orientation.value === ORIENTATION.RIGHT) return false;
+
+  return true;
+});
 </script>
 
 <template>
@@ -183,7 +190,7 @@ const shouldGroupWithNext = computed(() => {
       }"
     >
       <div
-        v-if="!shouldGroupWithNext"
+        v-if="!shouldGroupWithNext && shouldShowAvatar"
         class="[grid-area:avatar] flex items-end"
       >
         <Avatar :name="sender ? sender.name : ''" src="" :size="24" />