fix(assistant): render markdown in TextInput output

src/components/TaskTypeSelect.vue

@@ -141,7 +141,7 @@ export default {
 		buttonTypes() {
 			const taskTypes = {}
 			for (const task of this.options) {
-				const type = task.category.id
+				const type = this.getTaskCategory(task.id)
 				if (!taskTypes[type]) {
 					taskTypes[type] = []
 				}
@@ -154,7 +154,7 @@ export default {
 				}
 				result.push({
 					id: entry[0],
-					text: entry[1][0].category.name,
+					text: this.getTextForCategory(entry[0]),
 					icon: this.getCategoryIcon(entry[0]),
 					tasks: entry[1],
 				})
@@ -163,7 +163,7 @@ export default {
 			if (taskTypes.other) {
 				result.push({
 					id: 'other',
-					text: taskTypes.other[0].category.name,
+					text: this.getTextForCategory('other'),
 					icon: this.getCategoryIcon('other'),
 					tasks: taskTypes.other,
 				})
@@ -208,11 +208,7 @@ export default {
 			return taskType.id === this.modelValue
 		},
 		isCategorySelected(category) {
-			if (!this.modelValue) {
-				return false
-			}
-			const selectedTask = this.options.find(task => task.id === this.modelValue)
-			return selectedTask && category.id === selectedTask.category.id
+			return category.id === this.getTaskCategory(this.modelValue || '')
 		},
 		onTaskSelected(taskType) {
 			this.$emit('update:model-value', taskType.id)
@@ -228,6 +224,44 @@ export default {
 				this.categorySubmenu = null
 			}
 		},
+		getTaskCategory(id) {
+			if (id.startsWith('chatty')) {
+				return 'chat'
+			} else if (id.startsWith('context_chat')) {
+				return 'context'
+			} else if (id.includes('translate')) {
+				return 'translate'
+			} else if (id.startsWith('richdocuments')) {
+				return 'generate'
+			} else if (id.includes('image') || id.includes('sticker')) {
+				return 'image'
+			} else if (id.includes('audio') || id.includes('speech')) {
+				return 'audio'
+			} else if (id.includes('text')) {
+				return 'text'
+			}
+			return 'other'
+		},
+		getTextForCategory(category) {
+			switch (category) {
+			case 'chat':
+				return t('assistant', 'Chat with AI')
+			case 'context':
+				return t('assistant', 'Context Chat')
+			case 'text':
+				return t('assistant', 'Work with text')
+			case 'image':
+				return t('assistant', 'Work with images')
+			case 'translate':
+				return t('assistant', 'Translate')
+			case 'audio':
+				return t('assistant', 'Work with audio')
+			case 'generate':
+				return t('assistant', 'Generate file')
+			default:
+				return t('assistant', 'Other')
+			}
+		},
 		getCategoryIcon(category) {
 			switch (category) {
 			case 'chat':

src/components/fields/TextInput.vue

@@ -9,7 +9,16 @@
 			<br v-if="limitLabel">
 			{{ limitLabel ?? '' }}
 		</label>
+		<NcRichText
+			v-if="isOutput && hasValue && !isEditing"
+			class="rendered-output output-wrapper"
+			:title="t('assistant', 'Double-click to edit')"
+			:text="value ?? ''"
+			:use-markdown="true"
+			:autolink="true"
+			@dblclick="enterEditMode" />
 		<NcRichContenteditable
+			v-else
 			:id="id"
 			ref="input"
 			:model-value="value ?? ''"
@@ -21,7 +30,8 @@
 			:placeholder="placeholder"
 			:title="title"
 			@submit="hasValue && $emit('submit', $event)"
-			@update:model-value="$emit('update:value', $event)" />
+			@update:model-value="$emit('update:value', $event)"
+			@blur="onEditableBlur" />
 		<NcButton v-if="isOutput && hasValue"
 			class="copy-button"
 			variant="secondary"
@@ -59,6 +69,7 @@ import ContentCopyIcon from 'vue-material-design-icons/ContentCopy.vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcRichContenteditable from '@nextcloud/vue/components/NcRichContenteditable'
 import { NcLoadingIcon } from '@nextcloud/vue'
+import { NcRichText } from '@nextcloud/vue/components/NcRichText'
 
 import isMobile from '../../mixins/isMobile.js'
 
@@ -84,6 +95,7 @@ export default {
 
 	components: {
 		NcRichContenteditable,
+		NcRichText,
 		NcButton,
 		NcLoadingIcon,
 		FileDocumentOutlineIcon,
@@ -138,6 +150,7 @@ export default {
 	data() {
 		return {
 			copied: false,
+			isEditing: false,
 			maxLength: MAX_TEXT_INPUT_LENGTH,
 		}
 	},
@@ -215,6 +228,39 @@ export default {
 				showError(t('assistant', 'Result could not be copied to clipboard'))
 			}
 		},
+		enterEditMode() {
+			if (!this.isOutput) {
+				return
+			}
+			this.isEditing = true
+			this.$nextTick(() => {
+				const ref = this.$refs.input
+				if (!ref) {
+					return
+				}
+				if (typeof ref.focus === 'function') {
+					ref.focus()
+					return
+				}
+				const el = ref.$el
+				if (!el) {
+					return
+				}
+				if (typeof el.focus === 'function') {
+					el.focus()
+					return
+				}
+				const editable = el.querySelector?.('[contenteditable]')
+				if (editable && typeof editable.focus === 'function') {
+					editable.focus()
+				}
+			})
+		},
+		onEditableBlur() {
+			if (this.isOutput && this.isEditing) {
+				this.isEditing = false
+			}
+		},
 	},
 }
 </script>
@@ -247,6 +293,20 @@ body[dir="rtl"] .choose-file-button {
 		right: 4px;
 	}
 
+	.output-wrapper {
+		display: block !important;
+		box-sizing: border-box !important;
+		border: 2px solid var(--color-primary-element) !important;
+		border-radius: var(--border-radius-large) !important;
+		padding: 8px !important;
+		padding-bottom: 42px !important;
+		max-height: 35vh !important;
+		overflow-y: auto !important;
+		.rendered-output, .rendered-output * {
+			cursor: text;
+		}
+	}
+
 	.rich-contenteditable__input {
 		min-height: calc(var(--default-clickable-area) + 4px);
 		padding-top: 5px !important;
@@ -255,6 +315,7 @@ body[dir="rtl"] .choose-file-button {
 	.shadowed .rich-contenteditable__input {
 		border: 2px solid var(--color-primary-element);
 		padding-bottom: 38px !important;
+		max-height: 35vh !important;
 	}
 	.shadowed.streaming .rich-contenteditable__input {
 		animation: pulse 2s infinite;