From cdfb573ecb48944781ac71feb0389e6b4cae6eac Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 20 May 2026 16:54:06 +0200
Subject: [PATCH] fix(translate): use assistant app dialog

No need for a custom translate dialog these days given that the
assistant app provides one.

Fixes: #8036

Signed-off-by: Jonas <jonas@freesources.org>
---
 cypress/e2e/Assistant.spec.js           |   7 +-
 lib/Service/InitialStateProvider.php    |   9 +-
 src/components/Editor.vue               |  37 ---
 src/components/Menu/AssistantAction.vue |  60 ++++-
 src/components/Modal/Translate.vue      | 344 ------------------------
 5 files changed, 54 insertions(+), 403 deletions(-)
 delete mode 100644 src/components/Modal/Translate.vue

diff --git a/cypress/e2e/Assistant.spec.js b/cypress/e2e/Assistant.spec.js
index 6baa32cc842..f6797598b88 100644
--- a/cypress/e2e/Assistant.spec.js
+++ b/cypress/e2e/Assistant.spec.js
@@ -81,9 +81,10 @@ describe('Assistant', () => {
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(1000)
 
-		cy.get('[data-cy="translate-input"]').should('be.visible').focus()
+		cy.get('.assistant-modal--content #input-input').type('Hello World', {
+			force: true,
+		})
 
-		cy.get('[data-cy="translate-input"]').should('be.focused')
-		cy.get('[data-cy="translate-input"]').type('Hello World')
+		cy.get('.assistant-modal--content button').contains('Translate').click()
 	})
 })
diff --git a/lib/Service/InitialStateProvider.php b/lib/Service/InitialStateProvider.php
index b0305965d49..20c0ef2a4f0 100644
--- a/lib/Service/InitialStateProvider.php
+++ b/lib/Service/InitialStateProvider.php
@@ -56,15 +56,10 @@ public function provideState(): void {
 		);
 
 		$taskTypes = $this->taskProcessingManager->getAvailableTaskTypes();
-		$fromLanguages = $taskTypes['core:text2text:translate']['inputShapeEnumValues']['origin_language'] ?? [];
-		$toLanguages = $taskTypes['core:text2text:translate']['inputShapeEnumValues']['target_language'] ?? [];
 
 		$this->initialState->provideInitialState(
-			'translation_languages',
-			[
-				'from' => $fromLanguages,
-				'to' => $toLanguages,
-			]
+			'translation_available',
+			isset($taskTypes['core:text2text:translate']),
 		);
 
 		$filteredTypes = array_filter($taskTypes, static function (string $taskType) {
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index d52c8687894..14fb419ab07 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -74,13 +74,6 @@
 			:has-connection-issue="displayConnectionIssue"
 			:has-indexed-db-conflict="!!indexedDbConflictContent"
 			@reconnect="reconnect" />
-		<Translate
-			:show="translateModal"
-			:content="translateContent"
-			:file-id="fileId"
-			@insert-content="translateInsert"
-			@replace-content="translateReplace"
-			@close="hideTranslate" />
 	</div>
 </template>
 
@@ -140,7 +133,6 @@ import MainContainer from './Editor/MainContainer.vue'
 import Status from './Editor/Status.vue'
 import Wrapper from './Editor/Wrapper.vue'
 import MenuBar from './Menu/MenuBar.vue'
-import Translate from './Modal/Translate.vue'
 import SkeletonLoading from './SkeletonLoading.vue'
 import SuggestionsBar from './SuggestionsBar.vue'
 
@@ -157,7 +149,6 @@ export default defineComponent({
 		MenuBar,
 		Reader: () => import('./Reader.vue'),
 		Status,
-		Translate,
 		SuggestionsBar,
 	},
 	mixins: [isMobile],
@@ -359,8 +350,6 @@ export default defineComponent({
 			draggedOver: false,
 
 			contentWrapper: null,
-			translateModal: false,
-			translateContent: '',
 			indexedDbConflictContent: '',
 		}
 	},
@@ -475,7 +464,6 @@ export default defineComponent({
 		subscribe('text:image-node:add', this.onAddImageNode)
 		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.emit('update:loaded', true)
-		subscribe('text:translate-modal:show', this.showTranslateModal)
 		exposeForDebugging(this)
 
 		await this.whenSynced
@@ -511,7 +499,6 @@ export default defineComponent({
 		unsubscribe('text:keyboard:save', this.onKeyboardSave)
 		unsubscribe('text:image-node:add', this.onAddImageNode)
 		unsubscribe('text:image-node:delete', this.onDeleteImageNode)
-		unsubscribe('text:translate-modal:show', this.showTranslateModal)
 		if (this.dirty && !this.hasOutdatedDocument && !this.hasSyncCollision) {
 			const timeout = new Promise((resolve) => setTimeout(resolve, 2000))
 			await Promise.any([timeout, this.saveService.save()])
@@ -884,33 +871,9 @@ export default defineComponent({
 			this.setEditable(this.editMode)
 		},
 
-		showTranslateModal(e) {
-			this.translateContent = e.content
-			this.translateModal = true
-		},
-		hideTranslate() {
-			this.translateModal = false
-		},
 		applyCommand(fn) {
 			this.editor.commands.command(fn)
 		},
-		translateInsert(content) {
-			this.applyCommand(({ tr, commands }) => {
-				return commands.insertContentAt(tr.selection.to, content)
-			})
-			this.translateModal = false
-		},
-		translateReplace(content) {
-			this.applyCommand(({ tr, commands }) => {
-				const selection = tr.selection
-				const range = {
-					from: selection.from,
-					to: selection.to,
-				}
-				return commands.insertContentAt(range, content)
-			})
-			this.translateModal = false
-		},
 
 		saveBeforeUnload() {
 			this.saveService.saveViaSendBeacon()
diff --git a/src/components/Menu/AssistantAction.vue b/src/components/Menu/AssistantAction.vue
index 2ce7382dea4..f0132eefc7a 100644
--- a/src/components/Menu/AssistantAction.vue
+++ b/src/components/Menu/AssistantAction.vue
@@ -153,7 +153,7 @@
 <script>
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -234,8 +234,7 @@ export default {
 			STATUS_UNKNOWN,
 
 			showTaskList: false,
-			canTranslate:
-				loadState('text', 'translation_languages', []).from?.length > 0,
+			canTranslate: loadState('text', 'translation_available', false),
 		}
 	},
 	computed: {
@@ -343,15 +342,37 @@ export default {
 			})
 		},
 		openTranslateDialog() {
-			let selectAll = false
-			if (!this.selection.trim().length) {
-				this.editor.commands.selectAll()
-				selectAll = true
-			}
-			emit('text:translate-modal:show', { content: this.selection || '' })
-			if (selectAll) {
-				this.editor.commands.setTextSelection(0)
-			}
+			const { selection, doc } = this.editor.state
+			const hasSelection = selection.from !== selection.to
+
+			const inputText = hasSelection
+				? doc.textBetween(selection.from, selection.to, ' ')
+				: doc.textBetween(0, doc.content.size, ' ')
+
+			const replaceRange = hasSelection
+				? { from: selection.from, to: selection.to }
+				: null
+
+			window.OCA.Assistant.openAssistantForm({
+				appId: 'text',
+				customId: this.identifier,
+				taskType: 'core:text2text:translate',
+				inputs: { input: inputText },
+				isInsideViewer: true,
+				closeOnResult: false,
+				actionButtons: [
+					{
+						variant: 'primary',
+						title: t('text', 'Insert'),
+						label: t('text', 'Insert'),
+						onClick: (task) => {
+							this.translateInsert(task, replaceRange)
+						},
+					},
+				],
+			}).finally(() => {
+				this.fetchTasks()
+			})
 		},
 		async openResult(task) {
 			window.OCA.Assistant.openAssistantTask(task, {
@@ -400,6 +421,21 @@ export default {
 				this.$delete(this.tasks, taskIndex)
 			}
 		},
+		async translateInsert(task, replaceRange) {
+			const isMarkdown = shouldInterpretAsMarkdown(task.output.output)
+			const content = isMarkdown
+				? markdownit.render(task.output.output)
+				: task.output.output
+			if (replaceRange) {
+				this.editor.commands.insertContentAt(replaceRange, content)
+			} else {
+				this.editor.commands.insertContent(content)
+			}
+
+			if (this.fileId) {
+				await markFileAsAiGenerated(this.fileId)
+			}
+		},
 		t,
 	},
 }
diff --git a/src/components/Modal/Translate.vue b/src/components/Modal/Translate.vue
deleted file mode 100644
index 79f82afbf4f..00000000000
--- a/src/components/Modal/Translate.vue
+++ /dev/null
@@ -1,344 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<NcModal
-		:show="show"
-		size="large"
-		:name="t('text', 'Translate')"
-		@close="$emit('close')">
-		<div class="translate-dialog">
-			<h2>{{ t('text', 'Translate') }}</h2>
-			<em>{{
-				t(
-					'text',
-					'To translate individual parts of the text, select it before using the translate function.',
-				)
-			}}</em>
-			<div class="wrapper">
-				<div class="col">
-					<div class="language-selector">
-						<label for="fromLanguage">{{
-							t('text', 'Translate from')
-						}}</label>
-						<NcSelect
-							v-model="fromLanguage"
-							input-id="fromLanguage"
-							:placeholder="t('text', 'Select language')"
-							:aria-label-combobox="t('text', 'Translate from')"
-							:options="fromLanguages"
-							:disabled="disableFromLanguageSelect"
-							:append-to-body="false" />
-					</div>
-					<NcTextArea
-						ref="input"
-						:value.sync="input"
-						:label="t('text', 'Text to translate from')"
-						autofocus
-						data-cy="translate-input"
-						input-class="translate-textarea"
-						resize="none"
-						@focus="onInputFocus" />
-				</div>
-				<div class="col">
-					<div class="language-selector">
-						<label for="toLanguage">{{ t('text', 'to') }}</label>
-						<NcSelect
-							v-model="toLanguage"
-							input-id="toLanguage"
-							:placeholder="t('text', 'Select language')"
-							:aria-label-combobox="t('text', 'Translate to')"
-							:options="toLanguages"
-							:disabled="!fromLanguage"
-							:append-to-body="false" />
-					</div>
-					<NcTextArea
-						ref="result"
-						:value.sync="result"
-						:label="t('text', 'Translated text result')"
-						readonly
-						input-class="translate-textarea"
-						resize="none"
-						:class="{ 'icon-loading': loading }" />
-				</div>
-			</div>
-			<div class="translate-actions">
-				<NcLoadingIcon v-if="loading" />
-				<NcButton
-					v-if="!result"
-					variant="primary"
-					:disabled="loading"
-					@click="translate">
-					{{ t('text', 'Translate') }}
-				</NcButton>
-				<NcButton
-					v-if="result && content"
-					variant="secondary"
-					@click="contentReplace">
-					{{ t('text', 'Replace') }}
-				</NcButton>
-				<NcButton v-if="result" variant="primary" @click="contentInsert">
-					{{ t('text', 'Insert') }}
-				</NcButton>
-			</div>
-		</div>
-	</NcModal>
-</template>
-
-<script>
-import axios from '@nextcloud/axios'
-import { loadState } from '@nextcloud/initial-state'
-import { t } from '@nextcloud/l10n'
-import { generateOcsUrl } from '@nextcloud/router'
-import NcButton from '@nextcloud/vue/components/NcButton'
-import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import NcModal from '@nextcloud/vue/components/NcModal'
-import NcSelect from '@nextcloud/vue/components/NcSelect'
-import NcTextArea from '@nextcloud/vue/components/NcTextArea'
-import { markFileAsAiGenerated } from '../../apis/ai.ts'
-import { useIsMobileMixin } from '../Editor.provider.ts'
-
-export default {
-	name: 'Translate',
-	components: {
-		NcModal,
-		NcButton,
-		NcSelect,
-		NcLoadingIcon,
-		NcTextArea,
-	},
-	mixins: [useIsMobileMixin],
-	props: {
-		show: {
-			type: Boolean,
-			default: false,
-		},
-		content: {
-			type: String,
-			default: '',
-		},
-		fileId: {
-			type: Number,
-			default: null,
-		},
-	},
-	data() {
-		return {
-			input: 'Hallo welt. Das ist ein Test.',
-			result: '',
-			fromLanguage: null,
-			toLanguage: null,
-			languages: loadState('text', 'translation_languages', []),
-			loading: false,
-			error: null,
-			disableFromLanguageSelect: true,
-		}
-	},
-	computed: {
-		fromLanguages() {
-			const result = []
-			for (const item of this.languages.from) {
-				result.push({
-					id: item.value,
-					label: !this.$isMobile
-						? item.name
-						: t('text', 'Translate from {language}', {
-								language: item.name,
-							}),
-				})
-			}
-			return result
-		},
-		toLanguages() {
-			if (this.fromLanguage === null) {
-				return []
-			}
-
-			const languages = this.languages.to.filter((l) => {
-				if (this.fromLanguage.id === null) {
-					return true
-				}
-				return l.value !== this.fromLanguage.id
-			})
-			const result = []
-			for (const item of languages) {
-				result.push({
-					id: item.value,
-					label: !this.$isMobile
-						? item.name
-						: t('text', 'Translate to {language}', {
-								language: item.name,
-							}),
-				})
-			}
-			return result
-		},
-	},
-	watch: {
-		content() {
-			this.input = this.content
-		},
-		input() {
-			this.result = ''
-			this.error = null
-			this.autosize()
-		},
-		fromLanguage(newVal) {
-			if (newVal?.id === this.toLanguage?.id) {
-				this.toLanguage = null
-			}
-			this.result = ''
-			this.error = null
-		},
-		toLanguage() {
-			this.result = ''
-			this.error = null
-		},
-	},
-	mounted() {
-		this.input = this.content
-	},
-	methods: {
-		async translate() {
-			this.loading = true
-			try {
-				const scheduleResponse = await axios.post(
-					generateOcsUrl('taskprocessing/schedule'),
-					{
-						input: {
-							origin_language: this.fromLanguage?.id ?? null,
-							input: this.input,
-							target_language: this.toLanguage.id,
-						},
-						type: 'core:text2text:translate',
-						appId: 'text',
-					},
-				)
-				const task = scheduleResponse.data.ocs.data.task
-				const getTaskOutput = async (task) => {
-					if (task.output) {
-						return task.output.output
-					}
-					await new Promise((resolve) => setTimeout(resolve, 2000))
-					const taskResponse = await axios.get(
-						generateOcsUrl(`taskprocessing/task/${task.id}`),
-					)
-					return getTaskOutput(taskResponse.data.ocs.data.task)
-				}
-				this.result = await getTaskOutput(task)
-			} catch (e) {
-				console.error('Failed to translate', e)
-				this.error = t('text', 'Translation failed')
-			} finally {
-				this.loading = false
-			}
-		},
-		async contentInsert() {
-			if (this.fileId) {
-				await markFileAsAiGenerated(this.fileId)
-			}
-			this.$emit('insert-content', this.result)
-		},
-		async contentReplace() {
-			if (this.fileId) {
-				await markFileAsAiGenerated(this.fileId)
-			}
-			this.$emit('replace-content', this.result)
-		},
-		autosize() {
-			this.$refs.input.$refs.input.style.overflowY = 'hidden'
-			this.$refs.input.$refs.input.style.height = 'auto'
-			const height = this.$refs.input.$refs.input.scrollHeight + 10
-			this.$refs.input.$refs.input.style.height = height + 'px'
-			this.$refs.result.$refs.input.style.height = height + 'px'
-			this.$refs.input.$refs.input.style.overflowY = 'auto'
-		},
-		onInputFocus() {
-			this.disableFromLanguageSelect = false
-			this.autosize()
-		},
-		t,
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.translate-dialog {
-	margin: 24px;
-
-	.wrapper {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		grid-column-gap: 16px;
-		margin-top: calc(var(--default-grid-baseline) * 6);
-
-		.language-selector {
-			font-weight: bold;
-			flex-wrap: wrap;
-			gap: var(--default-grid-baseline);
-		}
-
-		.col {
-			grid-row: 1/2;
-		}
-	}
-
-	:deep(.translate-textarea) {
-		display: block;
-		width: 100%;
-		margin-bottom: 12px;
-		height: auto;
-		resize: none;
-		box-sizing: border-box;
-		overflow-y: auto;
-		min-height: 62px;
-		max-height: 58vh;
-	}
-}
-
-@media (max-width: 670px) {
-	.translate-dialog {
-		.wrapper {
-			display: block;
-		}
-
-		.language-selector {
-			.select {
-				width: 100%;
-			}
-		}
-
-		:deep(.translate-textarea) {
-			max-height: 20vh;
-		}
-	}
-
-	label {
-		&[for='fromLanguage'],
-		&[for='toLanguage'] {
-			display: none;
-		}
-	}
-}
-
-.language-selector {
-	display: flex;
-	align-items: center;
-	margin-bottom: 12px;
-
-	label {
-		flex-grow: 1;
-	}
-}
-
-.translate-actions {
-	display: flex;
-	justify-content: flex-end;
-
-	button {
-		margin-left: 12px;
-	}
-}
-</style>