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/Activity.vue

@@ -1,16 +1,25 @@
 <script setup>
+import { computed } from 'vue';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
 import BaseBubble from './Base.vue';
+import { useMessageContext } from '../provider.js';
 
-defineProps({
-  content: {
-    type: String,
-    required: true,
-  },
-});
+const { content, createdAt } = useMessageContext();
+
+const readableTime = computed(() =>
+  messageTimestamp(createdAt.value, 'LLL d, h:mm a')
+);
 </script>
 
 <template>
-  <BaseBubble class="px-2 py-0.5" data-bubble-name="activity">
+  <BaseBubble
+    class="px-2 py-0.5 !rounded-full flex items-center gap-2"
+    data-bubble-name="activity"
+  >
     <span v-dompurify-html="content" />
+    <div v-if="readableTime" class="w-px h-3 rounded-full bg-n-slate-7" />
+    <span class="text-n-slate-10">
+      {{ readableTime }}
+    </span>
   </BaseBubble>
 </template>