feat: integrate new bubbles (#10550)

To test this, set the `useNextBubble` value to `true` in the
localstorage. Here's a quick command to run in the console

```js
localStorage.setItem('useNextBubble', true)
```

```js
localStorage.setItem('useNextBubble', false)
```

---------

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

app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue

@@ -3,11 +3,11 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
+import { useMessageContext } from '../provider.js';
 
-const props = defineProps({
+defineProps({
   icon: { type: [String, Object], required: true },
   iconBgColor: { type: String, default: 'bg-n-alpha-3' },
-  sender: { type: Object, default: () => ({}) },
   senderTranslationKey: { type: String, required: true },
   content: { type: String, required: true },
   action: {
@@ -19,60 +19,62 @@ const props = defineProps({
   },
 });
 
+const { sender } = useMessageContext();
 const { t } = useI18n();
 
 const senderName = computed(() => {
-  return props.sender.name;
+  return sender?.value.name;
 });
 </script>
 
 <template>
   <BaseBubble
-    class="overflow-hidden grid gap-4 min-w-64 p-0"
+    class="overflow-hidden p-3 !bg-n-solid-2 shadow-[0px_0px_12px_0px_rgba(0,0,0,0.05)]"
     data-bubble-name="attachment"
   >
-    <slot name="before" />
-    <div class="grid gap-3 px-3 pt-3 z-20">
-      <div
-        class="size-8 rounded-lg grid place-content-center"
-        :class="iconBgColor"
-      >
-        <slot name="icon">
-          <Icon :icon="icon" class="text-white size-4" />
-        </slot>
-      </div>
-      <div class="space-y-1">
-        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
-          {{
-            t(senderTranslationKey, {
-              sender: senderName,
-            })
-          }}
+    <div class="grid gap-4 min-w-64">
+      <div class="grid gap-3 z-20">
+        <div
+          class="size-8 rounded-lg grid place-content-center"
+          :class="iconBgColor"
+        >
+          <slot name="icon">
+            <Icon :icon="icon" class="text-white size-4" />
+          </slot>
         </div>
-        <slot>
-          <div v-if="content" class="truncate text-sm text-n-slate-11">
-            {{ content }}
+        <div class="space-y-1">
+          <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
+            {{
+              t(senderTranslationKey, {
+                sender: senderName,
+              })
+            }}
           </div>
-        </slot>
+          <slot>
+            <div v-if="content" class="truncate text-sm text-n-slate-11">
+              {{ content }}
+            </div>
+          </slot>
+        </div>
+      </div>
+      <div v-if="action">
+        <a
+          v-if="action.href"
+          :href="action.href"
+          rel="noreferrer noopener nofollow"
+          target="_blank"
+          class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center border border-n-container"
+        >
+          {{ action.label }}
+        </a>
+        <button
+          v-else
+          class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center border border-n-container"
+          @click="action.onClick"
+        >
+          {{ action.label }}
+        </button>
       </div>
-    </div>
-    <div v-if="action" class="px-3 pb-3">
-      <a
-        v-if="action.href"
-        :href="action.href"
-        rel="noreferrer noopener nofollow"
-        target="_blank"
-        class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center"
-      >
-        {{ action.label }}
-      </a>
-      <button
-        v-else
-        class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
-        @click="action.onClick"
-      >
-        {{ action.label }}
-      </button>
     </div>
   </BaseBubble>
 </template>