feat: use formatted content

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

@@ -5,10 +5,11 @@ import { Letter } from 'vue-letter';
 import Icon from 'next/icon/Icon.vue';
 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 } from '../../constants';
+import { MESSAGE_STATUS, MESSAGE_TYPES } from '../../constants';
 
 const props = defineProps({
   content: {
@@ -32,6 +33,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  messageType: {
+    type: String,
+    required: true,
+  },
 });
 
 const isExpandable = ref(false);
@@ -43,6 +48,10 @@ onMounted(() => {
   isExpandable.value = contentContainer.value.scrollHeight > 400;
 });
 
+const isOutgoing = computed(() => {
+  return props.messageType === MESSAGE_TYPES.OUTGOING;
+});
+
 const fullHTML = computed(() => {
   return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
 });
@@ -84,18 +93,21 @@ const textToShow = computed(() => {
           {{ $t('EMAIL_HEADER.EXPAND') }}
         </button>
       </div>
-      <Letter
-        v-if="showQuotedMessage"
-        class-name="prose prose-email"
-        :html="fullHTML"
-        :text="textToShow"
-      />
-      <Letter
-        v-else
-        class-name="prose prose-email"
-        :html="unquotedHTML"
-        :text="textToShow"
-      />
+      <FormattedContent v-if="isOutgoing && content" :content="content" />
+      <template v-else>
+        <Letter
+          v-if="showQuotedMessage"
+          class-name="prose prose-email !max-w-none"
+          :html="fullHTML"
+          :text="textToShow"
+        />
+        <Letter
+          v-else
+          class-name="prose prose-email !max-w-none"
+          :html="unquotedHTML"
+          :text="textToShow"
+        />
+      </template>
       <button
         v-if="hasQuotedMessage"
         class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"