chore: Repalce message formatter mixin with useMessageFormatter [CW-3470] (#9986)

# Pull Request Template

## Description

Replaced the old messageFormatterMixin with a useMessageFormatter
composable

app/javascript/widget/components/AgentMessageBubble.vue

@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import ChatCard from 'shared/components/ChatCard.vue';
 import ChatForm from 'shared/components/ChatForm.vue';
 import ChatOptions from 'shared/components/ChatOptions.vue';
@@ -20,7 +20,7 @@ export default {
     CustomerSatisfaction,
     IntegrationCard,
   },
-  mixins: [messageFormatterMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     message: { type: String, default: null },
     contentType: { type: String, default: null },
@@ -31,6 +31,16 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const { formatMessage, getPlainText, truncateMessage, highlightContent } =
+      useMessageFormatter();
+    return {
+      formatMessage,
+      getPlainText,
+      truncateMessage,
+      highlightContent,
+    };
+  },
   computed: {
     isTemplate() {
       return this.messageType === 3;