Merge pull request #47 from nextcloud/enh/no-provider-discoverability

Show empty content if no AI provider was found

lib/Listener/BeforeTemplateRenderedListener.php

@@ -13,7 +13,6 @@
 use OCP\IConfig;
 use OCP\IUser;
 use OCP\IUserSession;
-use OCP\TextProcessing\IManager as ITextProcessingManager;
 use OCP\Util;
 
 /**
@@ -26,7 +25,6 @@ public function __construct(
 		private IConfig $config,
 		private IInitialState $initialStateService,
 		private ?string $userId,
-		private ITextProcessingManager $textProcessingManager
 	) {
 	}
 
@@ -44,10 +42,6 @@ public function handle(Event $event): void {
 			return;
 		}
 
-		if (!$this->textProcessingManager->hasProviders()) {
-			return;
-		}
-
 		$adminAssistantEnabled = $this->config->getAppValue(Application::APP_ID, 'assistant_enabled', '1') === '1';
 		$userAssistantEnabled = $this->config->getUserValue($this->userId, Application::APP_ID, 'assistant_enabled', '1') === '1';
 		$assistantEnabled = $adminAssistantEnabled && $userAssistantEnabled;

src/components/AdminSettings.vue

@@ -11,14 +11,13 @@
 				</h3>
 				<NcCheckboxRadioSwitch
 					:checked="state.assistant_enabled"
-					:disabled="!state.text_processing_available"
 					@update:checked="onCheckboxChanged($event, 'assistant_enabled')">
 					<div class="checkbox-text">
 						{{ t('assistant', 'Top-right assistant') }}
 						<div v-if="!state.text_processing_available" class="checkbox-text">
 							<InformationOutlineIcon class="icon" />
 							<span>
-								{{ t('assistant', 'To enable this feature, please install any AI text processing provider.') }}
+								{{ t('assistant', 'To be able to use this feature, please install at least one AI text processing provider.') }}
 							</span>
 						</div>
 					</div>

src/components/AssistantTextProcessingForm.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="assistant-form">
+	<NcLoadingIcon v-if="loadingTaskTypes" />
+	<NoProviderEmptyContent v-else-if="taskTypes.length === 0" />
+	<div v-else
+		class="assistant-form">
 		<span class="assistant-bubble">
 			<CreationIcon :size="16" class="icon" />
 			<span>{{ t('assistant', 'Nextcloud Assistant') }}</span>
@@ -134,6 +137,7 @@ import TaskTypeSelect from './TaskTypeSelect.vue'
 import AssistantFormInputs from './AssistantFormInputs.vue'
 import Text2ImageDisplay from './Text2Image/Text2ImageDisplay.vue'
 import TaskList from './TaskList.vue'
+import NoProviderEmptyContent from './NoProviderEmptyContent.vue'
 
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
@@ -148,6 +152,7 @@ const FREE_PROMPT_TASK_TYPE_ID = 'OCP\\TextProcessing\\FreePromptTaskType'
 export default {
 	name: 'AssistantTextProcessingForm',
 	components: {
+		NoProviderEmptyContent,
 		TaskList,
 		Text2ImageDisplay,
 		TaskTypeSelect,
@@ -199,6 +204,7 @@ export default {
 			mySelectedTaskTypeId: this.selectedTaskTypeId || FREE_PROMPT_TASK_TYPE_ID,
 			copied: false,
 			showHistory: false,
+			loadingTaskTypes: false,
 		}
 	},
 	computed: {
@@ -274,13 +280,17 @@ export default {
 	},
 	methods: {
 		getTaskTypes() {
+			this.loadingTaskTypes = true
 			axios.get(generateOcsUrl('/apps/assistant/api/v1/task-types'))
 				.then((response) => {
 					this.taskTypes = response.data.ocs.data.types
 				})
 				.catch((error) => {
 					console.error(error)
 				})
+				.then(() => {
+					this.loadingTaskTypes = false
+				})
 		},
 		onSubmit() {
 			this.$emit('submit', { inputs: this.myInputs, selectedTaskTypeId: this.mySelectedTaskTypeId })

src/components/NoProviderEmptyContent.vue

@@ -0,0 +1,85 @@
+<template>
+	<NcEmptyContent
+		:name="t('assistant', 'No provider found')"
+		:description="t('assistant', 'AI Providers need to be installed to use the Assistant')">
+		<template v-if="isAdmin" #action>
+			<div class="actions">
+				<span v-html="action1Html" />
+				<span v-html="action2Html" />
+			</div>
+		</template>
+		<template #icon>
+			<AssistantIcon />
+		</template>
+	</NcEmptyContent>
+</template>
+
+<script>
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+
+import AssistantIcon from './icons/AssistantIcon.vue'
+
+import { getCurrentUser } from '@nextcloud/auth'
+import { generateUrl } from '@nextcloud/router'
+
+const toolSectionUrl = generateUrl('/settings/apps/tools')
+const toolLinkText = t('assistant', 'tool')
+const toolLink = `<a class="external" target="_blank" href="${toolSectionUrl}">${toolLinkText}</a>`
+
+const integrationSectionUrl = generateUrl('/settings/apps/integration')
+const integrationLinkText = t('assistant', 'integration')
+const integrationLink = `<a class="external" target="_blank" href="${integrationSectionUrl}">${integrationLinkText}</a>`
+
+const aiDocUrl = 'https://docs.nextcloud.com/server/latest/admin_manual/ai/index.html'
+const aiDocLinkText = t('assistant', 'complete AI documentation')
+const aiAdminDocLink = `<a class="external" target="_blank" href="${aiDocUrl}">${aiDocLinkText}</a>`
+
+export default {
+	name: 'NoProviderEmptyContent',
+
+	components: {
+		AssistantIcon,
+		NcEmptyContent,
+	},
+
+	props: {
+	},
+
+	data() {
+		return {
+			isAdmin: getCurrentUser()?.isAdmin,
+		}
+	},
+
+	computed: {
+		action1Html() {
+			return t('assistant', 'AI provider apps can be found in the {toolLink} and {integrationLink} app settings sections.', {
+				toolLink,
+				integrationLink,
+			}, undefined, { escape: false, sanitize: false })
+		},
+		action2Html() {
+			return t('assistant', 'You can also check the {aiAdminDocLink}', {
+				aiAdminDocLink,
+			}, undefined, { escape: false, sanitize: false })
+		},
+	},
+
+	watch: {
+	},
+
+	mounted() {
+	},
+
+	methods: {
+	},
+}
+</script>
+
+<style lang="scss">
+.actions {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+</style>