feat: use formatted content

app/javascript/dashboard/components-next/message/Message.vue

@@ -12,7 +12,7 @@ import {
 
 import Avatar from 'next/avatar/Avatar.vue';
 
-import TextBubble from './bubbles/Text.vue';
+import TextBubble from './bubbles/Text/Index.vue';
 import ActivityBubble from './bubbles/Activity.vue';
 import ImageBubble from './bubbles/Image.vue';
 import FileBubble from './bubbles/File.vue';

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"

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>

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

@@ -1,11 +1,10 @@
 <script setup>
 import { computed } from 'vue';
-import { useMessageContext } from '../provider.js';
 import BaseBubble from 'next/message/bubbles/Base.vue';
+import FormattedContent from './FormattedContent.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+import { MESSAGE_TYPES } from '../../constants';
 
-import MessageFormatter from 'shared/helpers/MessageFormatter.js';
-import { MESSAGE_VARIANTS } from '../constants';
 /**
  * @typedef {Object} Attachment
  * @property {number} id - Unique identifier for the attachment
@@ -28,23 +27,34 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  messageType: {
+    type: String,
+    default: '',
+    validator: value => Object.values(MESSAGE_TYPES).includes(value),
+  },
 });
 
-const { variant } = useMessageContext();
-
-const formattedContent = computed(() => {
-  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
-    return props.content;
-  }
-
-  return new MessageFormatter(props.content).formattedMessage;
+const isTemplate = computed(() => {
+  return props.messageType === MESSAGE_TYPES.TEMPLATE;
 });
 </script>
 
 <template>
-  <BaseBubble class="p-3 grid gap-3" data-bubble-name="text">
-    <span v-if="content" v-html="formattedContent" />
+  <BaseBubble class="flex flex-col gap-3 px-4 py-3" data-bubble-name="text">
+    <FormattedContent v-if="content" :content="content" />
     <AttachmentChips :attachments="attachments" class="gap-2" />
+    <template v-if="isTemplate">
+      <div
+        v-if="contentAttributes.submittedEmail"
+        class="px-2 py-1 rounded-lg bg-n-alpha-3"
+      >
+        {{ contentAttributes.submittedEmail }}
+      </div>
+    </template>
   </BaseBubble>
 </template>