fix: Bubble style when grouping with next (#10677)

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>

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',
 };