Merge pull request #8629 from nextcloud/backport/8628/stable34

[stable34] fix(translate): use assistant app dialog

Author: mejo-

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()
 	})
 })

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) {

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()

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,
 	},
 }