From dbcc55665aba40b4cea6a61545adca3dd01d877f Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 14 Jan 2025 09:05:29 +0530
Subject: [PATCH] fix: Bubble style when grouping with next (#10677)

---
 .../components-next/message/Message.vue       | 19 +++++++++++++++++--
 .../components-next/message/bubbles/Base.vue  |  4 ++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index fb3769e88..77a6601b9 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -395,9 +395,12 @@ provideMessageContext({
 <template>
   <div
     :id="`message${props.id}`"
-    class="flex w-full"
+    class="flex w-full message-bubble-container"
     :data-message-id="props.id"
-    :class="[flexOrientationClass, shouldGroupWithNext ? 'mb-2' : 'mb-4']"
+    :class="[
+      flexOrientationClass,
+      shouldGroupWithNext ? 'group-with-next mb-2' : 'mb-4',
+    ]"
   >
     <div v-if="variant === MESSAGE_VARIANTS.ACTIVITY">
       <ActivityBubble :content="content" />
@@ -454,3 +457,15 @@ provideMessageContext({
     </div>
   </div>
 </template>
+
+<style lang="scss">
+.group-with-next + .message-bubble-container {
+  .left-bubble {
+    @apply rounded-tl-sm;
+  }
+
+  .right-bubble {
+    @apply rounded-tr-sm;
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Base.vue b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
index 3bc912713..2c11ccca6 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Base.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
@@ -29,8 +29,8 @@ const varaintBaseMap = {
 };
 
 const orientationMap = {
-  [ORIENTATION.LEFT]: 'rounded-xl rounded-bl-sm',
-  [ORIENTATION.RIGHT]: 'rounded-xl rounded-br-sm',
+  [ORIENTATION.LEFT]: 'left-bubble rounded-xl rounded-bl-sm',
+  [ORIENTATION.RIGHT]: 'right-bubble rounded-xl rounded-br-sm',
   [ORIENTATION.CENTER]: 'rounded-md',
 };