chore: Forward plain email UI

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

@@ -14,12 +14,15 @@ import TranslationToggle from 'dashboard/components-next/message/TranslationTogg
 import ForwardMessageForm from 'dashboard/components-next/message/forwardMessage/ForwardMessage.vue';
 
 import { useMessageContext } from '../../provider.js';
+import { useInbox } from 'dashboard/composables/useInbox';
 import { MESSAGE_TYPES, MESSAGE_STATUS } from 'next/message/constants.js';
 import { useTranslations } from 'dashboard/composables/useTranslations';
 
 const { id, status, content, contentAttributes, attachments, messageType } =
   useMessageContext();
 
+const { inbox } = useInbox();
+
 const isExpandable = ref(false);
 const isExpanded = ref(false);
 const showQuotedMessage = ref(false);
@@ -128,6 +131,8 @@ const handleSeeOriginal = () => {
           <ForwardMessageForm
             v-if="showForwardMessageModal"
             :message="contentAttributes?.email"
+            :content="content"
+            :inbox="inbox"
             :message-id="id"
             class="absolute right-3 z-50 skip-context-menu top-10"
             @close="showForwardMessageModal = false"

app/javascript/dashboard/components-next/message/forwardMessage/ForwardMessage.vue

@@ -24,6 +24,14 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  content: {
+    type: String,
+    default: '',
+  },
+  inbox: {
+    type: Object,
+    default: () => ({}),
+  },
   messageId: {
     type: Number,
     default: null,
@@ -45,7 +53,7 @@ const currentChat = useMapGetter('getSelectedChat');
 const currentUser = useMapGetter('getCurrentUser');
 const globalConfig = useMapGetter('globalConfig/get');
 
-const fromEmail = computed(() => props.message?.to?.[0]);
+const fromEmail = computed(() => props.message?.to?.[0] || props.inbox?.email);
 
 const fullHTML = computed(() => {
   return (
@@ -156,6 +164,8 @@ const handleSelectedContact = async ({ value, action, ...rest }) => {
       :from-email="fromEmail"
       :message="message"
       :message-signature="messageSignature"
+      :content="content"
+      :is-plain-email="!message || !Object.keys(message).length"
       :full-html="fullHTML"
       :unquoted-html="unquotedHTML"
       :text-to-show="textToShow"

app/javascript/dashboard/components-next/message/forwardMessage/components/EmailMessageEditor.vue

@@ -6,10 +6,12 @@ import { allowedCssProperties } from 'lettersanitizer';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import EmailMeta from 'dashboard/components-next/message/bubbles/Email/EmailMeta.vue';
 
-// import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
+import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 defineProps({
+  content: { type: String, default: '' },
+  isPlainEmail: { type: Boolean, default: false },
   hasQuotedMessage: { type: Boolean, default: false },
   fullHtml: { type: String, default: '' },
   unquotedHtml: { type: String, default: '' },
@@ -50,28 +52,35 @@ const showQuotedMessage = ref(false);
       <EmailMeta />
     </div>
     <div class="px-4 pb-4">
-      <Letter
-        v-if="showQuotedMessage"
-        class-name="prose prose-bubble !max-w-none letter-render"
-        :allowed-css-properties="[
-          ...allowedCssProperties,
-          'transform',
-          'transform-origin',
-        ]"
-        :html="fullHtml"
-        :text="textToShow"
-      />
-      <Letter
-        v-else
-        class-name="prose prose-bubble !max-w-none letter-render"
-        :html="unquotedHtml"
-        :allowed-css-properties="[
-          ...allowedCssProperties,
-          'transform',
-          'transform-origin',
-        ]"
-        :text="textToShow"
+      <FormattedContent
+        v-if="isPlainEmail"
+        class="text-n-slate-12"
+        :content="content"
       />
+      <template v-else>
+        <Letter
+          v-if="showQuotedMessage"
+          class-name="prose prose-bubble !max-w-none letter-render"
+          :allowed-css-properties="[
+            ...allowedCssProperties,
+            'transform',
+            'transform-origin',
+          ]"
+          :html="fullHtml"
+          :text="textToShow"
+        />
+        <Letter
+          v-else
+          class-name="prose prose-bubble !max-w-none letter-render"
+          :html="unquotedHtml"
+          :allowed-css-properties="[
+            ...allowedCssProperties,
+            'transform',
+            'transform-origin',
+          ]"
+          :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/forwardMessage/components/ForwardMessageForm.vue

@@ -22,6 +22,8 @@ const props = defineProps({
   isCreatingContact: { type: Boolean, default: false },
   fromEmail: { type: String, default: null },
   messageSignature: { type: String, default: '' },
+  content: { type: String, default: '' },
+  isPlainEmail: { type: Boolean, default: false },
   fullHtml: { type: String, default: '' },
   unquotedHtml: { type: String, default: '' },
   textToShow: { type: String, default: '' },
@@ -161,6 +163,8 @@ const handleSendMessage = async () => {
     <EmailMessageEditor
       v-model="state.message"
       class="bg-n-alpha-3"
+      :content="content"
+      :is-plain-email="isPlainEmail"
       :has-quoted-message="hasQuotedMessage"
       :full-html="fullHtml"
       :unquoted-html="unquotedHtml"