feat(TranslationModal): add translation for html messages

Signed-off-by: Grigory V <scratchx@gmx.com>

src/components/MenuEnvelope.vue

@@ -83,7 +83,7 @@
 				</template>
 				{{ t('mail', 'Unsnooze') }}
 			</ActionButton>
-			<ActionButton v-if="!isHtml"
+			<ActionButton
 				:close-after-click="true"
 				@click.prevent="$emit('open-translation-modal')">
 				<template #icon>
@@ -310,11 +310,6 @@ export default {
 			type: Boolean,
 			default: true,
 		},
-		isHtml: {
-			// Indicates if the envelope is HTML
-			type: Boolean,
-			default: false,
-		},
 	},
 	data() {
 		return {

src/components/ThreadEnvelope.vue

@@ -186,7 +186,6 @@
 							:with-select="false"
 							:with-show-source="true"
 							:more-actions-open.sync="moreActionsOpen"
-							:is-html="false"
 							@reply="onReply"
 							@delete="$emit('delete',envelope.databaseId)"
 							@show-source-modal="onShowSourceModal"
@@ -221,7 +220,7 @@
 						@close="onCloseTagModal" />
 					<TranslationModal v-if="showTranslationModal"
 						:rich-parameters="{}"
-						:message="message.body"
+						:message="plainTextBody"
 						@close="onCloseTranslationModal" />
 				</template>
 			</div>
@@ -315,6 +314,7 @@ import { mapStores } from 'pinia'
 import moment from '@nextcloud/moment'
 import { translateTagDisplayName } from '../util/tag.js'
 import { FOLLOW_UP_TAG_LABEL } from '../store/constants.js'
+import { getPlainText } from '../service/plainTextService.js'
 
 // Ternary loading state
 const LOADING_DONE = 0
@@ -408,6 +408,7 @@ export default {
 			showTaskModal: false,
 			showTagModal: false,
 			showTranslationModal: false,
+			plainTextBody: '',
 			rawMessage: '', // Will hold the raw source of the message when requested
 			isInternal: true,
 			enabledSmartReply: loadState('mail', 'llm_freeprompt_available', false),
@@ -874,7 +875,18 @@ export default {
 			this.showTagModal = false
 		},
 		onOpenTranslationModal() {
-			this.showTranslationModal = true
+			this.handleHtmlBodyMessages().then(() => {
+				this.showTranslationModal = true
+			})
+		},
+		async handleHtmlBodyMessages() {
+			console.log('message', this.message)
+			if (this.message.isHtml) {
+				const message = await getPlainText(this.message.id)
+				this.plainTextBody = message.body
+			} else {
+				this.plainTextBody = this.message.body
+			}
 		},
 		onCloseTranslationModal() {
 			this.showTranslationModal = false

src/components/TranslationModal.vue

@@ -186,11 +186,13 @@ export default {
 		this.availableLanguages = response.data.ocs.data.languages
 	},
 
-	mounted() {
+	async mounted() {
+		await this.handleHtmlBodyMessages()
+
 		this.selectedTo = this.optionsTo.find(language => language.id === this.userLanguage) || null
 
 		if (this.selectedTo) {
-			this.translateMessage()
+			await this.translateMessage()
 		}
 
 		this.$nextTick(() => {

src/service/plainTextService.js

@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { convertAxiosError } from '../errors/convert.js'
+
+export async function getPlainText(id) {
+	const url = generateUrl('/apps/mail/api/messages', {
+		id,
+		plain: true,
+	})
+
+	return await axios.get(url).catch((error) => {
+		throw convertAxiosError(error)
+	})
+}