feat: email typography

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

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { Letter } from 'vue-letter';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 
 const props = defineProps({
@@ -16,10 +17,20 @@ const props = defineProps({
 const contentToShow = computed(() => {
   return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
 });
+
+const textToShow = computed(() => {
+  return props.contentAttributes?.email?.textContent?.full ?? props.content;
+});
 </script>
 
 <template>
   <BaseBubble class="w-full">
-    <div class="p-4 prose prose-sm max-w-none" v-html="contentToShow" />
+    <div class="p-3">
+      <Letter
+        class-name="prose prose-email"
+        :html="contentToShow"
+        :text="textToShow"
+      />
+    </div>
   </BaseBubble>
 </template>