feat: Add new message bubbles (#10481)

---------

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

app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../../provider.js';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } from '../../constants';
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+
+const { variant } = useMessageContext();
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+</script>
+
+<template>
+  <span
+    v-dompurify-html="formattedContent"
+    class="[&>p:last-child]:mb-0 [&>ul]:list-inside"
+  />
+</template>