From fe4e906fc67cd95c0a66658534767018f08458eb Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 21 Nov 2024 20:31:42 +0530
Subject: [PATCH] feat: format md

---
 .../dashboard/components-next/message/bubbles/Text.vue    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text.vue b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
index 4451786e3..fcabac393 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
 
 const props = defineProps({
@@ -32,6 +33,7 @@ const varaintBaseMap = {
 const orientationMap = {
   left: 'rounded-xl rounded-bl-sm',
   right: 'rounded-xl rounded-br-sm',
+  center: 'rounded-md',
 };
 
 const messageClass = computed(() => {
@@ -45,10 +47,14 @@ const messageClass = computed(() => {
 
   return classToApply;
 });
+
+const formattedContent = computed(() => {
+  return new MessageFormatter(props.content).formattedMessage;
+});
 </script>
 
 <template>
   <div class="max-w-md text-sm" :class="messageClass">
-    {{ content }}
+    <span class="prose prose-sm" v-html="formattedContent" />
   </div>
 </template>