AI Admin settings: Implement mt settings, stt settings and tp settings

Signed-off-by: Marcel Klehr <mklehr@gmx.net>

1 files changed, 59 insertions, 26 deletions

diff --git a/apps/settings/src/components/AdminAI.vue b/apps/settings/src/components/AdminAI.vue
index 2e1104a49d2..f11cb0c3da0 100644
--- a/apps/settings/src/components/AdminAI.vue
+++ b/apps/settings/src/components/AdminAI.vue
@@ -1,34 +1,53 @@
 <template>
-	<NcSettingsSection :title="t('settings', 'Artificial Intelligence')"
-		:description="t('settings', 'Artificial Intelligence features can be implemented by different apps. Here you can set which app should be used for which features.')">
-		<h3>{{ t('settings', 'Translations') }}</h3>
-		<h3>{{ t('settings', 'Speech-To-Text') }}</h3>
-		<template v-for="provider in sttProviders">
-			<NcCheckboxRadioSwitch :key="provider.class"
-				:checked.sync="settings['ai.stt_provider']"
-				:value="provider.class"
-				name="stt_provider"
-				type="radio">{{ provider.name }}</NcCheckboxRadioSwitch>
-		</template>
-		<template v-if="sttProviders.length === 0">
-	  	<NcCheckboxRadioSwitch disabled type="radio">{{ t('settings', 'No apps are currently installed that provide Speech-To-Text functionality') }}</NcCheckboxRadioSwitch>
-		</template>
-		<h3>{{ t('settings', 'Text processing') }}</h3>
-		<template v-for="(type, provider) in settings['ai.textprocessing_provider_preferences']">
-			<h4>{{ type }}</h4>
-			<!--<p>{{ getTaskType(type).description }}</p>
-			<NcSelect v-model="settings['ai.textprocessing_provider_preferences'][type]" :options="textProcessingProviders.filter(provider => provider.taskType === type)" />-->
-		</template>
-		<template v-if="Object.keys(settings['ai.textprocessing_provider_preferences']).length === 0 || !Array.isArray(this.textProcessingTaskTypes)">
-			<p>{{ t('settings', 'No apps are currently installed that provide Text processing functionality') }}</p>
-		</template>
-	</NcSettingsSection>
+	<div>
+		<NcSettingsSection :title="t('settings', 'Machine translation')"
+			:description="t('settings', 'Machine translation can be implemented by different apps. Here you can define the precedence of the machine translation apps you have installed at the moment.')">
+			<draggable v-model="settings['ai.translation_provider_preferences']">
+				<div v-for="(providerClass, i) in settings['ai.translation_provider_preferences']" :key="providerClass" class="draggable__item"><span class="draggable__number">{{i+1}}</span> {{ translationProviders.find(p => p.class === providerClass)?.name }}</div>
+			</draggable>
+		</NcSettingsSection>
+		<NcSettingsSection :title="t('settings', 'Speech-To-Text')"
+			:description="t('settings', 'Speech-To-Text can be implemented by different apps. Here you can set which app should be used.')">
+			<template v-for="provider in sttProviders">
+				<NcCheckboxRadioSwitch :key="provider.class"
+					:checked.sync="settings['ai.stt_provider']"
+					:value="provider.class"
+					name="stt_provider"
+					type="radio">
+					{{ provider.name }}
+				</NcCheckboxRadioSwitch>
+			</template>
+			<template v-if="sttProviders.length === 0">
+				<NcCheckboxRadioSwitch disabled type="radio">
+					{{ t('settings', 'No apps are currently installed that provide Speech-To-Text functionality') }}
+				</NcCheckboxRadioSwitch>
+			</template>
+		</NcSettingsSection>
+		<NcSettingsSection :title="t('settings', 'Text processing')"
+			:description="t('settings', 'Text processing tasks can be implemented by different apps. Here you can set which app should be used for which task.')">
+			<template v-for="type in Object.keys(settings['ai.textprocessing_provider_preferences'])">
+				<h3>{{ t('settings', 'Task:') }} {{ getTaskType(type).name }}</h3>
+				<p>{{ getTaskType(type).description }}</p>
+				<p>&nbsp;</p>
+				<NcSelect v-model="settings['ai.textprocessing_provider_preferences'][type]"  :clearable="false" :options="textProcessingProviders.filter(p => p.taskType === type).map(p => p.class)">
+					<template #option="{label}">{{ textProcessingProviders.find(p => p.class === label)?.name }}</template>
+					<template #selected-option="{label}">{{ textProcessingProviders.find(p => p.class === label)?.name }}</template>
+				</NcSelect>
+				<p>&nbsp;</p>
+			</template>
+			<template v-if="Object.keys(settings['ai.textprocessing_provider_preferences']).length === 0 || !Array.isArray(textProcessingTaskTypes)">
+				<p>{{ t('settings', 'No apps are currently installed that provide Text processing functionality') }}</p>
+			</template>
+		</NcSettingsSection>
+	</div>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import draggable from 'vuedraggable'
 import { loadState } from '@nextcloud/initial-state'
 
 import { generateUrl } from '@nextcloud/router'
@@ -38,6 +57,8 @@ export default {
 	components: {
 		NcCheckboxRadioSwitch,
 		NcSettingsSection,
+		NcSelect,
+		draggable,
 	},
 	data() {
 		return {
@@ -76,8 +97,20 @@ export default {
 		  if (!Array.isArray(this.textProcessingTaskTypes)) {
 				return null
 			}
-			return this.textProcessingTaskTypes.find(taskType => taskType === type)
-		}
+			return this.textProcessingTaskTypes.find(taskType => taskType.class === type)
+		},
 	},
 }
 </script>
+<style scoped>
+.draggable__item {
+	margin-bottom: 5px;
+}
+
+.draggable__number {
+	border-radius: 20px;
+	border: 2px solid var(--color-primary-default);
+	color: var(--color-primary-default);
+  padding: 2px 7px;
+}
+</style>