From 8497bd72993ed1f4db1a75118f10fd08433cd16e Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 12 May 2023 15:15:25 +0200
Subject: [PATCH 1/3] create MessageTranslateDialog.vue, connect API

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/ChatView.vue                   |   2 +
 .../MessagesGroup/Message/Message.vue         |  18 +-
 .../MessageButtonsBar/MessageButtonsBar.vue   |  18 +-
 .../MessageTranslateDialog.vue                | 295 ++++++++++++++++++
 src/services/messagesService.js               |  14 +
 src/store/messagesStore.js                    |  33 ++
 6 files changed, 378 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 480dbca19e1..7e63f5c3ee4 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -108,6 +108,8 @@ export default {
 	mounted() {
 		// Postpone render of NewMessageForm until application is mounted
 		this.containerId = this.$store.getters.getMainContainerSelector()
+
+		this.$store.dispatch('getTranslationConfiguration')
 	},
 
 	methods: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 1e8fd149b3e..41346ca2dde 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -179,6 +179,7 @@ the main body of the message as well as a quote.
 		<div class="message-body__scroll">
 			<MessageButtonsBar v-if="showMessageButtonsBar"
 				ref="messageButtonsBar"
+				:is-translation-available="isTranslationAvailable"
 				:is-action-menu-open.sync="isActionMenuOpen"
 				:is-emoji-picker-open.sync="isEmojiPickerOpen"
 				:is-reactions-menu-open.sync="isReactionsMenuOpen"
@@ -193,9 +194,15 @@ the main body of the message as well as a quote.
 				:common-read-icon-tooltip="commonReadIconTooltip"
 				:show-sent-icon="showSentIcon"
 				:sent-icon-tooltip="sentIconTooltip"
+				@show-translate-dialog="isTranslateDialogOpen = true"
 				@delete="handleDelete" />
 		</div>
 
+		<MessageTranslateDialog v-if="isTranslateDialogOpen"
+			:text="message"
+			:rich-parameters="richParameters"
+			@close="isTranslateDialogOpen = false" />
+
 		<div v-if="isLastReadMessage"
 			v-observe-visibility="lastReadMessageVisibilityChanged">
 			<div class="new-message-marker">
@@ -225,6 +232,7 @@ import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
 import Quote from '../../../Quote.vue'
 import CallButton from '../../../TopBar/CallButton.vue'
 import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
+import MessageTranslateDialog from './MessageButtonsBar/MessageTranslateDialog.vue'
 import Contact from './MessagePart/Contact.vue'
 import DeckCard from './MessagePart/DeckCard.vue'
 import DefaultParameter from './MessagePart/DefaultParameter.vue'
@@ -245,6 +253,7 @@ export default {
 	name: 'Message',
 
 	components: {
+		MessageTranslateDialog,
 		CallButton,
 		MessageButtonsBar,
 		NcButton,
@@ -422,6 +431,7 @@ export default {
 			isReactionsMenuOpen: false,
 			isForwarderOpen: false,
 			detailedReactionsLoading: false,
+			isTranslateDialogOpen: false,
 		}
 	},
 
@@ -580,7 +590,9 @@ export default {
 		},
 
 		showMessageButtonsBar() {
-			return !this.isSystemMessage && !this.isDeletedMessage && !this.isTemporary && (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen || this.isFollowUpEmojiPickerOpen || this.isReactionsMenuOpen || this.isForwarderOpen)
+			return !this.isSystemMessage && !this.isDeletedMessage && !this.isTemporary
+				&& (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen || this.isFollowUpEmojiPickerOpen
+					|| this.isReactionsMenuOpen || this.isForwarderOpen || this.isTranslateDialogOpen)
 		},
 
 		isTemporaryUpload() {
@@ -650,6 +662,10 @@ export default {
 		detailedReactionsLoaded() {
 			return this.$store.getters.reactionsLoaded(this.token, this.id)
 		},
+
+		isTranslationAvailable() {
+			return this.$store.getters.getTranslationAvailableLanguages()?.length !== 0
+		},
 	},
 
 	watch: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 49e08d0ae81..354987c1148 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -106,6 +106,15 @@
 					@click="action.callback(messageApiData)">
 					{{ action.label }}
 				</NcActionButton>
+				<NcActionButton v-if="isTranslationAvailable"
+					:close-after-click="true"
+					@click.stop="$emit('show-translate-dialog', true)"
+					@close="$emit('show-translate-dialog', false)">
+					<template #icon>
+						<Translate :size="16" />
+					</template>
+					{{ t('spreed', 'Translate') }}
+				</NcActionButton>
 				<template v-if="isDeleteable">
 					<NcActionSeparator />
 					<NcActionButton icon="icon-delete"
@@ -169,6 +178,7 @@ import File from 'vue-material-design-icons/File.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Reply from 'vue-material-design-icons/Reply.vue'
 import Share from 'vue-material-design-icons/Share.vue'
+import Translate from 'vue-material-design-icons/Translate.vue'
 
 import moment from '@nextcloud/moment'
 
@@ -211,6 +221,7 @@ export default {
 		Plus,
 		Reply,
 		Share,
+		Translate,
 	},
 
 	props: {
@@ -354,9 +365,14 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		isTranslationAvailable: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
-	emits: ['delete', 'update:isActionMenuOpen', 'update:isEmojiPickerOpen', 'update:isReactionsMenuOpen', 'update:isForwarderOpen'],
+	emits: ['delete', 'update:isActionMenuOpen', 'update:isEmojiPickerOpen', 'update:isReactionsMenuOpen', 'update:isForwarderOpen', 'show-translate-dialog'],
 
 	data() {
 		return {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
new file mode 100644
index 00000000000..57e3b69628e
--- /dev/null
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
@@ -0,0 +1,295 @@
+<!--
+  - @copyright Copyright (c) 2023 Marco Ambrosini <marcoambrosini@icloud.com>
+  -
+  - @author Marco Ambrosini <marcoambrosini@icloud.com>
+  - @author Maksim Sukharev <antreesy.web@gmail.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<NcModal ref="translate-modal" size="large" @close="$emit('close')">
+		<div v-if="isMounted" class="translate-dialog">
+			<h2> {{ t('spreed', 'Translate message') }} </h2>
+			<div class="translate-dialog__wrapper">
+				<NcSelect v-model="selectedFrom"
+					class="translate-dialog__select"
+					input-id="from"
+					:aria-label="t('spreed', 'Source language to translate from')"
+					:placeholder="t('spreed', 'Translate from')"
+					:options="optionsFrom"
+					no-wrap />
+
+				<ArrowRight />
+
+				<NcSelect v-model="selectedTo"
+					class="translate-dialog__select"
+					input-id="to"
+					:aria-label="t('spreed', 'Target language to translate into')"
+					:placeholder="t('spreed', 'Translate to')"
+					:options="optionsTo"
+					no-wrap />
+
+				<NcButton type="primary"
+					:disabled="isLoading"
+					class="translate-dialog__button"
+					@click="handleTranslate">
+					<template v-if="isLoading" #icon>
+						<NcLoadingIcon />
+					</template>
+					{{ isLoading ? t('spreed', 'Translating') : t('spreed', 'Translate') }}
+				</NcButton>
+			</div>
+
+			<NcRichText class="translate-dialog__message translate-dialog__message-source"
+				:text="text"
+				:arguments="richParameters"
+				:reference-limit="0" />
+
+			<template v-if="translatedMessage">
+				<NcRichText class="translate-dialog__message translate-dialog__message-translation"
+					:text="translatedMessage"
+					:arguments="richParameters"
+					:reference-limit="0" />
+				<NcButton class="translate-dialog__copy-button"
+					@click="handleCopyTranslation">
+					<template #icon>
+						<ContentCopy />
+					</template>
+					{{ t('spreed', 'Copy translation') }}
+				</NcButton>
+			</template>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+
+import { showError, showSuccess } from '@nextcloud/dialogs'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+
+import { translateText } from '../../../../../services/messagesService.js'
+
+export default {
+	name: 'MessageTranslateDialog',
+
+	components: {
+		ArrowRight,
+		ContentCopy,
+		NcRichText,
+		NcModal,
+		NcSelect,
+		NcButton,
+		NcLoadingIcon,
+	},
+
+	props: {
+		text: {
+			type: String,
+			required: true,
+		},
+		richParameters: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	emits: ['close'],
+
+	data() {
+		return {
+			isMounted: false,
+			selectedFrom: null,
+			selectedTo: null,
+			isLoading: false,
+			translatedMessage: '',
+		}
+	},
+
+	computed: {
+		hasTranslationLanguageDetection() {
+			return this.$store.getters.hasTranslationLanguageDetection()
+		},
+
+		availableLanguages() {
+			return this.$store.getters.getTranslationAvailableLanguages()
+		},
+
+		userLanguage() {
+			return navigator.language.substring(0, 2)
+		},
+
+		sourceTree() {
+			const tree = {}
+			const uniqueSourceLanguages = Array.from(new Set(this.availableLanguages.map(element => element.from)))
+
+			uniqueSourceLanguages.forEach(language => {
+				tree[language] = {
+					id: language,
+					label: this.availableLanguages.find(element => element.from === language)?.fromLabel,
+					translations: this.availableLanguages.filter(element => element.from === language).map(model => ({
+						id: model.to,
+						label: model.toLabel,
+					})),
+				}
+			})
+
+			return tree
+		},
+
+		translationTree() {
+			const tree = {}
+			const uniqueTranslateLanguages = Array.from(new Set(this.availableLanguages.map(element => element.to)))
+
+			uniqueTranslateLanguages.forEach(language => {
+				tree[language] = {
+					id: language,
+					label: this.availableLanguages.find(element => element.to === language)?.toLabel,
+					sources: this.availableLanguages.filter(element => element.to === language).map(model => ({
+						id: model.from,
+						label: model.fromLabel,
+					})),
+				}
+			})
+
+			return tree
+		},
+
+		optionsFrom() {
+			return this.selectedTo?.id
+				? this.translationTree[this.selectedTo?.id]?.sources
+				: Object.values(this.sourceTree).map(model => ({
+					id: model.id,
+					label: model.label,
+				}))
+		},
+
+		optionsTo() {
+			return this.selectedFrom?.id
+				? this.sourceTree[this.selectedFrom?.id]?.translations
+				: Object.values(this.translationTree).map(model => ({
+					id: model.id,
+					label: model.label,
+				}))
+		},
+	},
+
+	watch: {
+		selectedTo() {
+			this.translatedMessage = ''
+		},
+		selectedFrom() {
+			this.translatedMessage = ''
+		},
+	},
+
+	mounted() {
+		this.selectedTo = this.optionsTo.find(language => language.id === this.userLanguage) || null
+
+		if (this.hasTranslationLanguageDetection && this.selectedTo) {
+			this.translateMessage()
+		}
+
+		this.$nextTick(() => {
+			// FIXME trick to avoid focusTrap() from activating on NcSelect
+			this.isMounted = !!this.$refs['translate-modal'].randId
+		})
+	},
+
+	methods: {
+		handleTranslate() {
+			this.translateMessage(this.selectedFrom?.id)
+		},
+
+		async translateMessage(sourceLanguage = null) {
+			try {
+				this.isLoading = true
+				const response = await translateText(this.text, sourceLanguage, this.selectedTo?.id)
+				this.translatedMessage = response.data.ocs.data.text
+			} catch (error) {
+				console.error(error)
+				showError(t('spreed', 'The message could not be translated'))
+			} finally {
+				this.isLoading = false
+			}
+		},
+
+		async handleCopyTranslation() {
+			try {
+				await navigator.clipboard.writeText(this.translatedMessage)
+				showSuccess(t('spreed', 'Translation copied to clipboard'))
+			} catch (error) {
+				showError(t('spreed', 'Translation could not be copied'))
+			}
+		},
+	},
+}
+
+</script>
+
+<style lang="scss" scoped>
+.translate-dialog {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	min-height: 400px;
+	padding: calc(var(--default-grid-baseline) * 3);
+
+	&__wrapper {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 4);
+		padding: calc(var(--default-grid-baseline) * 2);
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	& &__select {
+		width: 50%;
+	}
+
+	&__button {
+		flex-shrink: 0;
+		margin-left: auto;
+	}
+
+	&__message {
+		padding: calc(var(--default-grid-baseline) * 2);
+		flex-grow: 1;
+
+		&-source {
+			color: var(--color-text-lighter);
+			margin-bottom: calc(var(--default-grid-baseline) * 2);
+		}
+
+		&-translation {
+			background-color: var(--color-background-dark);
+			border-radius: var(--border-radius-large);
+		}
+	}
+
+	& &__copy-button {
+		margin-top: calc(var(--default-grid-baseline) * 2);
+		align-self: end;
+	}
+}
+</style>
diff --git a/src/services/messagesService.js b/src/services/messagesService.js
index 6dca4c52a19..b6b3e4bf59f 100644
--- a/src/services/messagesService.js
+++ b/src/services/messagesService.js
@@ -175,6 +175,18 @@ const getReactionsDetails = async function(token, messageId) {
 	return axios.get(generateOcsUrl('apps/spreed/api/v1/reaction/{token}/{messageId}', { token, messageId }))
 }
 
+const getTranslationLanguages = async function() {
+	return axios.get(generateOcsUrl('/translation/languages'))
+}
+
+const translateText = async function(text, fromLanguage, toLanguage) {
+	return axios.post(generateOcsUrl('/translation/translate'), {
+		text,
+		fromLanguage,
+		toLanguage,
+	})
+}
+
 export {
 	fetchMessages,
 	lookForNewMessages,
@@ -186,4 +198,6 @@ export {
 	addReactionToMessage,
 	removeReactionFromMessage,
 	getReactionsDetails,
+	getTranslationLanguages,
+	translateText,
 }
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 6fd5e057473..488c657e0d3 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -39,6 +39,7 @@ import {
 	postRichObjectToConversation,
 	addReactionToMessage,
 	removeReactionFromMessage,
+	getTranslationLanguages,
 } from '../services/messagesService.js'
 import CancelableRequest from '../utils/cancelableRequest.js'
 
@@ -129,6 +130,10 @@ const state = {
 	 * Array of temporary message id to cancel function for the "postNewMessage" action
 	 */
 	cancelPostNewMessage: {},
+
+	translationLanguageDetection: false,
+
+	translationAvailableLanguages: [],
 }
 
 const getters = {
@@ -248,6 +253,14 @@ const getters = {
 	hasReactions: (state) => (token, messageId) => {
 		return Object.keys(state.messages[token][messageId].reactions).length !== 0
 	},
+
+	hasTranslationLanguageDetection: (state) => () => {
+		return state.translationLanguageDetection
+	},
+
+	getTranslationAvailableLanguages: (state) => () => {
+		return state.translationAvailableLanguages
+	},
 }
 
 const mutations = {
@@ -466,6 +479,14 @@ const mutations = {
 			Vue.set(state.firstKnown, token, newFirstKnown)
 		}
 	},
+
+	setTranslationLanguageDetection(state, { payload }) {
+		Vue.set(state, 'translationLanguageDetection', payload)
+	},
+
+	setTranslationAvailableLanguages(state, { payload }) {
+		Vue.set(state, 'translationAvailableLanguages', payload)
+	},
 }
 
 const actions = {
@@ -1313,6 +1334,18 @@ const actions = {
 	async easeMessageList(context, { token }) {
 		context.commit('easeMessageList', { token })
 	},
+
+	async getTranslationConfiguration(context) {
+		try {
+			const response = await getTranslationLanguages()
+			const { languages, languageDetection } = response.data.ocs.data
+			context.commit('setTranslationLanguageDetection', { payload: languageDetection })
+			context.commit('setTranslationAvailableLanguages', { payload: languages })
+		} catch (error) {
+			console.error(error)
+			showError(t('spreed', 'Failed to load translation configuration'))
+		}
+	},
 }
 
 export default { state, mutations, getters, actions }

From 8831435613bc9168b662b0e180398c990b65fb43 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 12 May 2023 17:23:16 +0200
Subject: [PATCH 2/3] request for languages from capabilities instead of store

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/ChatView.vue                   |  2 --
 .../MessagesGroup/Message/Message.vue         |  9 +++--
 .../MessageTranslateDialog.vue                | 17 +++++-----
 src/store/messagesStore.js                    | 33 -------------------
 4 files changed, 12 insertions(+), 49 deletions(-)

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 7e63f5c3ee4..480dbca19e1 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -108,8 +108,6 @@ export default {
 	mounted() {
 		// Postpone render of NewMessageForm until application is mounted
 		this.containerId = this.$store.getters.getMainContainerSelector()
-
-		this.$store.dispatch('getTranslationConfiguration')
 	},
 
 	methods: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 41346ca2dde..b05deaa1b03 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -221,6 +221,7 @@ import CheckAll from 'vue-material-design-icons/CheckAll.vue'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import Reload from 'vue-material-design-icons/Reload.vue'
 
+import { getCapabilities } from '@nextcloud/capabilities'
 import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 
@@ -246,6 +247,8 @@ import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
 import participant from '../../../../mixins/participant.js'
 import { EventBus } from '../../../../services/EventBus.js'
 
+const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
+
 /**
  * @property {object} scrollerBoundingClientRect provided by MessageList.vue
  */
@@ -413,7 +416,7 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
-		return { isInCall }
+		return { isInCall, isTranslationAvailable }
 	},
 
 	data() {
@@ -662,10 +665,6 @@ export default {
 		detailedReactionsLoaded() {
 			return this.$store.getters.reactionsLoaded(this.token, this.id)
 		},
-
-		isTranslationAvailable() {
-			return this.$store.getters.getTranslationAvailableLanguages()?.length !== 0
-		},
 	},
 
 	watch: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
index 57e3b69628e..868db625364 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
@@ -80,6 +80,7 @@
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 
+import { getCapabilities } from '@nextcloud/capabilities'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -90,6 +91,8 @@ import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 import { translateText } from '../../../../../services/messagesService.js'
 
+const availableLanguages = getCapabilities()?.spreed?.config?.chat?.translations
+
 export default {
 	name: 'MessageTranslateDialog',
 
@@ -116,6 +119,10 @@ export default {
 
 	emits: ['close'],
 
+	setup() {
+		return { availableLanguages }
+	},
+
 	data() {
 		return {
 			isMounted: false,
@@ -127,14 +134,6 @@ export default {
 	},
 
 	computed: {
-		hasTranslationLanguageDetection() {
-			return this.$store.getters.hasTranslationLanguageDetection()
-		},
-
-		availableLanguages() {
-			return this.$store.getters.getTranslationAvailableLanguages()
-		},
-
 		userLanguage() {
 			return navigator.language.substring(0, 2)
 		},
@@ -206,7 +205,7 @@ export default {
 	mounted() {
 		this.selectedTo = this.optionsTo.find(language => language.id === this.userLanguage) || null
 
-		if (this.hasTranslationLanguageDetection && this.selectedTo) {
+		if (this.selectedTo) {
 			this.translateMessage()
 		}
 
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 488c657e0d3..6fd5e057473 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -39,7 +39,6 @@ import {
 	postRichObjectToConversation,
 	addReactionToMessage,
 	removeReactionFromMessage,
-	getTranslationLanguages,
 } from '../services/messagesService.js'
 import CancelableRequest from '../utils/cancelableRequest.js'
 
@@ -130,10 +129,6 @@ const state = {
 	 * Array of temporary message id to cancel function for the "postNewMessage" action
 	 */
 	cancelPostNewMessage: {},
-
-	translationLanguageDetection: false,
-
-	translationAvailableLanguages: [],
 }
 
 const getters = {
@@ -253,14 +248,6 @@ const getters = {
 	hasReactions: (state) => (token, messageId) => {
 		return Object.keys(state.messages[token][messageId].reactions).length !== 0
 	},
-
-	hasTranslationLanguageDetection: (state) => () => {
-		return state.translationLanguageDetection
-	},
-
-	getTranslationAvailableLanguages: (state) => () => {
-		return state.translationAvailableLanguages
-	},
 }
 
 const mutations = {
@@ -479,14 +466,6 @@ const mutations = {
 			Vue.set(state.firstKnown, token, newFirstKnown)
 		}
 	},
-
-	setTranslationLanguageDetection(state, { payload }) {
-		Vue.set(state, 'translationLanguageDetection', payload)
-	},
-
-	setTranslationAvailableLanguages(state, { payload }) {
-		Vue.set(state, 'translationAvailableLanguages', payload)
-	},
 }
 
 const actions = {
@@ -1334,18 +1313,6 @@ const actions = {
 	async easeMessageList(context, { token }) {
 		context.commit('easeMessageList', { token })
 	},
-
-	async getTranslationConfiguration(context) {
-		try {
-			const response = await getTranslationLanguages()
-			const { languages, languageDetection } = response.data.ocs.data
-			context.commit('setTranslationLanguageDetection', { payload: languageDetection })
-			context.commit('setTranslationAvailableLanguages', { payload: languages })
-		} catch (error) {
-			console.error(error)
-			showError(t('spreed', 'Failed to load translation configuration'))
-		}
-	},
 }
 
 export default { state, mutations, getters, actions }

From 940d4460748e51117c83d13c10ebe58d6a880915 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 12 May 2023 17:37:20 +0200
Subject: [PATCH 3/3] minor design updates and props renaming

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/Message/Message.vue           |  2 +-
 .../MessageTranslateDialog.vue                  | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index b05deaa1b03..e27b0b27721 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -199,7 +199,7 @@ the main body of the message as well as a quote.
 		</div>
 
 		<MessageTranslateDialog v-if="isTranslateDialogOpen"
-			:text="message"
+			:message="message"
 			:rich-parameters="richParameters"
 			@close="isTranslateDialogOpen = false" />
 
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
index 868db625364..53efa043854 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
@@ -55,7 +55,7 @@
 			</div>
 
 			<NcRichText class="translate-dialog__message translate-dialog__message-source"
-				:text="text"
+				:text="message"
 				:arguments="richParameters"
 				:reference-limit="0" />
 
@@ -69,7 +69,7 @@
 					<template #icon>
 						<ContentCopy />
 					</template>
-					{{ t('spreed', 'Copy translation') }}
+					{{ t('spreed', 'Copy translated text') }}
 				</NcButton>
 			</template>
 		</div>
@@ -107,7 +107,7 @@ export default {
 	},
 
 	props: {
-		text: {
+		message: {
 			type: String,
 			required: true,
 		},
@@ -223,11 +223,11 @@ export default {
 		async translateMessage(sourceLanguage = null) {
 			try {
 				this.isLoading = true
-				const response = await translateText(this.text, sourceLanguage, this.selectedTo?.id)
+				const response = await translateText(this.message, sourceLanguage, this.selectedTo?.id)
 				this.translatedMessage = response.data.ocs.data.text
 			} catch (error) {
 				console.error(error)
-				showError(t('spreed', 'The message could not be translated'))
+				showError(error.response?.data?.ocs?.data?.message ?? t('spreed', 'The message could not be translated'))
 			} finally {
 				this.isLoading = false
 			}
@@ -253,13 +253,13 @@ export default {
 	flex-direction: column;
 	min-height: 400px;
 	padding: calc(var(--default-grid-baseline) * 3);
+	background-color: var(--color-main-background);
 
 	&__wrapper {
 		display: flex;
 		align-items: center;
 		gap: calc(var(--default-grid-baseline) * 4);
 		padding: calc(var(--default-grid-baseline) * 2);
-		border-bottom: 1px solid var(--color-border);
 	}
 
 	& &__select {
@@ -274,15 +274,16 @@ export default {
 	&__message {
 		padding: calc(var(--default-grid-baseline) * 2);
 		flex-grow: 1;
+		border-radius: var(--border-radius-large);
 
 		&-source {
 			color: var(--color-text-lighter);
 			margin-bottom: calc(var(--default-grid-baseline) * 2);
+			border: 2px solid var(--color-border);
 		}
 
 		&-translation {
-			background-color: var(--color-background-dark);
-			border-radius: var(--border-radius-large);
+			border: 2px solid var(--color-primary-element);
 		}
 	}