Merge pull request #411 from nextcloud/enh/noid/input-length-limit

Limit the number of text input characters in the UI and the backend

Author: janepie

lib/AppInfo/Application.php

@@ -55,6 +55,7 @@ class Application extends App implements IBootstrap {
 
 	public const CHAT_USER_INSTRUCTIONS = 'This is a conversation in a specific language between the user and you, Nextcloud Assistant. You are a kind, polite and helpful AI that helps the user to the best of its abilities. If you do not understand something, you will ask for clarification. Detect the language that the user is using. Make sure to use the same language in your response. Do not mention the language explicitly.';
 	public const CHAT_USER_INSTRUCTIONS_TITLE = 'Above is a chat session in a specific language between the user and you, Nextcloud Assistant. Generate a suitable title summarizing the conversation in the same language. Output only the title in plain text, nothing else.';
+	public const MAX_TEXT_INPUT_LENGTH = 64_000;
 
 	private IAppConfig $appConfig;
 	private IManager $taskProcessingManager;

lib/Controller/ChattyLLMController.php

@@ -292,6 +292,9 @@ public function newMessage(
 		if ($this->userId === null) {
 			return new JSONResponse(['error' => $this->l10n->t('User not logged in')], Http::STATUS_UNAUTHORIZED);
 		}
+		if (strlen($content) > Application::MAX_TEXT_INPUT_LENGTH) {
+			return new JSONResponse(['error' => $this->l10n->t('The new message is too long')], Http::STATUS_BAD_REQUEST);
+		}
 
 		try {
 			$sessionExists = $this->sessionMapper->exists($this->userId, $sessionId);

lib/Service/AssistantService.php

@@ -244,6 +244,11 @@ public function getAvailableTaskTypes(): array {
 				'id' => 'core:inputList',
 				'priority' => 0,
 				'inputShape' => [
+					'textList' => new ShapeDescriptor(
+						'Input text list',
+						'plop',
+						EShapeType::ListOfTexts,
+					),
 					'fileList' => new ShapeDescriptor(
 						'Input file list',
 						'plop',

src/components/AssistantTextProcessingForm.vue

@@ -152,7 +152,7 @@ import TaskList from './TaskList.vue'
 import TaskTypeSelect from './TaskTypeSelect.vue'
 import TranslateForm from './Translate/TranslateForm.vue'
 
-import { SHAPE_TYPE_NAMES } from '../constants.js'
+import { SHAPE_TYPE_NAMES, MAX_TEXT_INPUT_LENGTH } from '../constants.js'
 
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
@@ -330,15 +330,23 @@ export default {
 				}
 				const fieldType = taskType.inputShape[k].type
 				const value = this.myInputs[k]
-				return ([SHAPE_TYPE_NAMES.Text, SHAPE_TYPE_NAMES.Enum].includes(fieldType) && typeof value === 'string' && !!value?.trim())
+				return ([SHAPE_TYPE_NAMES.Text, SHAPE_TYPE_NAMES.Enum].includes(fieldType)
+						&& typeof value === 'string'
+						&& !!value?.trim()
+						// check that the input text is not too long for text fields
+						&& (fieldType === SHAPE_TYPE_NAMES.Enum || value.trim().length <= MAX_TEXT_INPUT_LENGTH))
 					|| ([
 						SHAPE_TYPE_NAMES.Number,
 						SHAPE_TYPE_NAMES.File,
 						SHAPE_TYPE_NAMES.Image,
 						SHAPE_TYPE_NAMES.Audio,
 						SHAPE_TYPE_NAMES.Video,
 					].includes(fieldType) && typeof value === 'number')
-					|| (fieldType === SHAPE_TYPE_NAMES.ListOfTexts && typeof value === 'object' && !!value && value.every(v => typeof v === 'string'))
+					|| (fieldType === SHAPE_TYPE_NAMES.ListOfTexts && typeof value === 'object' && !!value && value.every(v => {
+						return typeof v === 'string'
+							&& !!v?.trim()
+							&& v.trim().length <= MAX_TEXT_INPUT_LENGTH
+					}))
 					|| (fieldType === SHAPE_TYPE_NAMES.ListOfNumbers && typeof value === 'object' && !!value && value.every(v => typeof v === 'number'))
 					|| ([
 						SHAPE_TYPE_NAMES.ListOfFiles,

src/components/ChattyLLM/ChattyLLMInputForm.vue

@@ -128,6 +128,10 @@
 			<p class="session-area__disclaimer">
 				{{ t('assistant', 'Output shown here is generated by AI. Make sure to always double-check.') }}
 			</p>
+			<p v-if="chatContent?.length > 64_000"
+				class="session-area__disclaimer">
+				{{ t('assistant', 'Messages should not be longer than {maxLength} characters (currently {length}).', { maxLength: 64_000, length: chatContent.length }) }}
+			</p>
 			<InputArea ref="inputComponent"
 				v-model:chat-content="chatContent"
 				class="session-area__input-area"

src/components/ChattyLLM/InputArea.vue

@@ -12,18 +12,18 @@
 			:disabled="disabled"
 			:placeholder="loading.llmGeneration ? thinkingText : placeholderText"
 			:aria-label="loading.llmGeneration ? thinkingText : placeholderText"
-			:maxlength="1600"
+			:maxlength="64_000"
 			:multiline="isMobile"
 			dir="auto"
 			@update:model-value="$emit('update:chatContent', $event)"
-			@submit="$emit('submit', $event)" />
+			@submit="onSubmitText" />
 		<div class="input-area__button-box">
 			<NcButton v-if="!audioChatAvailable || chatContent"
 				class="input-area__button-box__button"
 				:aria-label="submitBtnAriaText"
-				:disabled="disabled || !chatContent.trim()"
+				:disabled="disabled || !chatContent.trim() || chatContentTooLong"
 				variant="primary"
-				@click="$emit('submit', $event)">
+				@click="onSubmitText">
 				<template #icon>
 					<SendIcon :size="20" />
 				</template>
@@ -50,6 +50,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { MAX_TEXT_INPUT_LENGTH } from '../../constants.js'
 
 /*
 maxlength calculation (just a rough estimate):
@@ -112,6 +113,9 @@ export default {
 		disabled() {
 			return this.loading.llmGeneration || this.loading.olderMessages || this.loading.initialMessages || this.loading.titleGeneration || this.loading.newHumanMessage || this.loading.newSession
 		},
+		chatContentTooLong() {
+			return this.chatContent.length > MAX_TEXT_INPUT_LENGTH
+		},
 	},
 
 	mounted() {
@@ -139,6 +143,11 @@ export default {
 				console.error(error)
 			})
 		},
+		onSubmitText(e) {
+			if (!this.chatContentTooLong) {
+				this.$emit('submit', e)
+			}
+		},
 	},
 }
 </script>

src/components/fields/ListOfTextsField.vue

@@ -137,7 +137,7 @@ export default {
 		&--item {
 			display: flex;
 			gap: 4px;
-			align-items: center;
+			align-items: end;
 			.text-input {
 				flex-grow: 1;
 			}

src/components/fields/TextInput.vue

@@ -6,13 +6,16 @@
 	<div class="text-input">
 		<label :for="id">
 			{{ label }}
+			<br v-if="limitLabel">
+			{{ limitLabel ?? '' }}
 		</label>
 		<NcRichContenteditable
 			:id="id"
 			ref="input"
 			:model-value="value ?? ''"
 			:link-autocomplete="false"
 			:multiline="isMobile"
+			:maxlength="maxLength"
 			class="editable-input"
 			:class="{ shadowed: isOutput }"
 			:placeholder="placeholder"
@@ -55,7 +58,7 @@ import isMobile from '../../mixins/isMobile.js'
 import axios from '@nextcloud/axios'
 import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
-import { VALID_TEXT_MIME_TYPES } from '../../constants.js'
+import { VALID_TEXT_MIME_TYPES, MAX_TEXT_INPUT_LENGTH } from '../../constants.js'
 
 const picker = (callback, target) => getFilePickerBuilder(t('assistant', 'Choose a text file'))
 	.setMimeTypeFilter(VALID_TEXT_MIME_TYPES)
@@ -123,6 +126,7 @@ export default {
 	data() {
 		return {
 			copied: false,
+			maxLength: MAX_TEXT_INPUT_LENGTH,
 		}
 	},
 
@@ -136,6 +140,12 @@ export default {
 		hasValue() {
 			return this.formattedValue !== ''
 		},
+		limitLabel() {
+			const length = this.value?.length ?? 0
+			return length > this.maxLength
+				? t('assistant', 'Warning: The input text exceeds the maximum length of {limit} characters (currently {length}).', { length, limit: this.maxLength })
+				: undefined
+		},
 	},
 
 	watch: {

src/constants.js

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+export const MAX_TEXT_INPUT_LENGTH = 64_000
+
 export const TASK_STATUS_INT = {
 	cancelled: 5,
 	failed: 4,