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/Email/EmailMeta.vue

@@ -1,57 +1,44 @@
 <script setup>
 import { computed } from 'vue';
 import { MESSAGE_STATUS } from '../../constants';
+import { useMessageContext } from '../../provider.js';
 
-const props = defineProps({
-  contentAttributes: {
-    type: Object,
-    default: () => ({}),
-  },
-  status: {
-    type: String,
-    required: true,
-    validator: value => Object.values(MESSAGE_STATUS).includes(value),
-  },
-  sender: {
-    type: Object,
-    default: () => ({}),
-  },
-});
+const { contentAttributes, status, sender } = useMessageContext();
 
 const hasError = computed(() => {
-  return props.status === MESSAGE_STATUS.FAILED;
+  return status.value === MESSAGE_STATUS.FAILED;
 });
 
 const fromEmail = computed(() => {
-  return props.contentAttributes?.email?.from ?? [];
+  return contentAttributes.value?.email?.from ?? [];
 });
 
 const toEmail = computed(() => {
-  return props.contentAttributes?.email?.to ?? [];
+  return contentAttributes.value?.email?.to ?? [];
 });
 
 const ccEmail = computed(() => {
   return (
-    props.contentAttributes?.ccEmails ??
-    props.contentAttributes?.email?.cc ??
+    contentAttributes.value?.ccEmails ??
+    contentAttributes.value?.email?.cc ??
     []
   );
 });
 
 const senderName = computed(() => {
-  return props.sender.name ?? '';
+  return sender.value.name ?? '';
 });
 
 const bccEmail = computed(() => {
   return (
-    props.contentAttributes?.bccEmails ??
-    props.contentAttributes?.email?.bcc ??
+    contentAttributes.value?.bccEmails ??
+    contentAttributes.value?.email?.bcc ??
     []
   );
 });
 
 const subject = computed(() => {
-  return props.contentAttributes?.email?.subject ?? '';
+  return contentAttributes.value?.email?.subject ?? '';
 });
 
 const showMeta = computed(() => {

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -7,37 +7,13 @@ import { EmailQuoteExtractor } from './removeReply.js';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
-
 import EmailMeta from './EmailMeta.vue';
-import { MESSAGE_STATUS, MESSAGE_TYPES } from '../../constants';
 
-const props = defineProps({
-  content: {
-    type: String,
-    required: true,
-  },
-  contentAttributes: {
-    type: Object,
-    default: () => ({}),
-  },
-  attachments: {
-    type: Array,
-    default: () => [],
-  },
-  status: {
-    type: String,
-    required: true,
-    validator: value => Object.values(MESSAGE_STATUS).includes(value),
-  },
-  sender: {
-    type: Object,
-    default: () => ({}),
-  },
-  messageType: {
-    type: Number,
-    required: true,
-  },
-});
+import { useMessageContext } from '../../provider.js';
+import { MESSAGE_TYPES } from 'next/message/constants.js';
+
+const { content, contentAttributes, attachments, messageType } =
+  useMessageContext();
 
 const isExpandable = ref(false);
 const isExpanded = ref(false);
@@ -49,11 +25,11 @@ onMounted(() => {
 });
 
 const isOutgoing = computed(() => {
-  return props.messageType === MESSAGE_TYPES.OUTGOING;
+  return messageType.value === MESSAGE_TYPES.OUTGOING;
 });
 
 const fullHTML = computed(() => {
-  return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
+  return contentAttributes?.value?.email?.htmlContent?.full ?? content.value;
 });
 
 const unquotedHTML = computed(() => {
@@ -66,14 +42,14 @@ const hasQuotedMessage = computed(() => {
 
 const textToShow = computed(() => {
   const text =
-    props.contentAttributes?.email?.textContent?.full ?? props.content;
-  return text.replace(/\n/g, '<br>');
+    contentAttributes?.value?.email?.textContent?.full ?? content.value;
+  return text?.replace(/\n/g, '<br>');
 });
 </script>
 
 <template>
   <BaseBubble class="w-full overflow-hidden" data-bubble-name="email">
-    <EmailMeta :status :sender :content-attributes />
+    <EmailMeta />
     <section
       ref="contentContainer"
       class="p-4"