Merge pull request #311 from nextcloud/feat/categories

feat: Add categories with icons

Author: lukasdotcom

src/components/AssistantTextProcessingModal.vue

@@ -115,7 +115,7 @@ export default {
 			show: true,
 			closeButtonTitle: t('assistant', 'Close'),
 			closeButtonLabel: t('assistant', 'Close Nextcloud Assistant'),
-			modalSize: 'full',
+			modalSize: 'large',
 			progress: null,
 			loading: false,
 			expectedRuntime: null,
@@ -191,6 +191,11 @@ export default {
 .modal-container__content .assistant-modal--wrapper {
 	height: 100%;
 }
+
+// make large modal a bit larger
+.assistant-modal .modal-container {
+	width: 1220px !important;
+}
 </style>
 
 <style lang="scss" scoped>
@@ -210,6 +215,7 @@ export default {
 
 .assistant-modal--content {
 	width: 100%;
+	margin: 0 auto;
 	padding: 16px;
 	display: flex;
 	flex-direction: column;

src/components/TaskTypeSelect.vue

@@ -5,43 +5,94 @@
 <template>
 	<div ref="taskTypeSelect"
 		class="task-type-select">
-		<NcButton v-for="(t, i) in buttonTypes"
-			:key="i + t.id"
-			:variant="getButtonType(t)"
-			:title="t.description"
-			@click="onTaskSelected(t)">
-			{{ t.name }}
-		</NcButton>
-		<NcActions v-if="!onlyInline && actionTypes.length > 0"
-			:force-menu="true"
-			:container="$refs.taskTypeSelect">
-			<NcActionButton v-for="(t, i) in actionTypes"
-				:key="i + t.id"
-				class="no-icon-action"
-				:aria-label="t.name"
-				:close-after-click="true"
-				@click="onMenuTaskSelected(t)">
+		<template v-for="variants in buttonTypesByInlineStatus.inline">
+			<NcActions v-if="hasSubMenu(variants)"
+				:key="variants.id"
+				:force-menu="true"
+				:menu-name="variants.text"
+				:container="$refs.taskTypeSelect"
+				:primary="isCategorySelected(variants)"
+				@click="onMenuCategorySelected(variants)">
+				<NcActionButton v-for="t in variants.tasks"
+					:key="t.id"
+					:disabled="selectedTask(t)"
+					:title="t.description"
+					:close-after-click="true"
+					@click="onTaskSelected(t)">
+					<template #icon>
+						<div style="width: 16px" />
+					</template>
+					{{ t.name }}
+				</NcActionButton>
+				<template #icon>
+					<component :is="variants.icon" />
+				</template>
+			</NcActions>
+			<NcButton v-else
+				:key="variants.id + '-button'"
+				:variant="isCategorySelected(variants) ? 'primary' : 'secondary'"
+				:title="variants.text"
+				@click="onMenuCategorySelected(variants)">
 				<template #icon>
-					<div style="width: 16px" />
+					<component :is="variants.icon" />
 				</template>
-				{{ t.name }}
-			</NcActionButton>
+				{{ variants.text }}
+			</NcButton>
+		</template>
+		<NcActions
+			:force-menu="true"
+			:container="$refs.taskTypeSelect"
+			@close="categorySubmenu = null">
+			<template v-if="!categorySubMenuTaskType">
+				<NcActionButton v-for="variant in buttonTypesByInlineStatus.overflow"
+					:key="variant.id"
+					:is-menu="variant.tasks.length > 1 || variant.id === 'other'"
+					:title="variant.text"
+					@click="onMenuCategorySelected(variant)">
+					<template #icon>
+						<component :is="variant.icon" />
+					</template>
+					{{ variant.text }}
+				</NcActionButton>
+			</template>
+			<template v-else>
+				<NcActionButton v-for="t in categorySubMenuTaskType.tasks"
+					:key="t.id"
+					:disabled="selectedTask(t)"
+					:title="t.description"
+					:close-after-click="true"
+					@click="onTaskSelected(t)">
+					<template #icon>
+						<div style="width: 16px" />
+					</template>
+					{{ t.name }}
+				</NcActionButton>
+			</template>
 		</NcActions>
 	</div>
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/components/NcButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import MessageOutlineIcon from 'vue-material-design-icons/MessageOutline.vue'
+import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+import TextLongIcon from 'vue-material-design-icons/TextLong.vue'
+import ImageOutlineIcon from 'vue-material-design-icons/ImageOutline.vue'
+import WebIcon from 'vue-material-design-icons/Web.vue'
+import FileIcon from 'vue-material-design-icons/File.vue'
+import ContentPasteSearchIcon from './icons/ContentPasteSearch.vue'
+import WaveformIcon from './icons/Waveform.vue'
 
 export default {
 	name: 'TaskTypeSelect',
 
 	components: {
-		NcButton,
 		NcActions,
 		NcActionButton,
+		MessageOutlineIcon,
+		NcButton,
 	},
 
 	props: {
@@ -69,7 +120,7 @@ export default {
 
 	data() {
 		return {
-			extraButtonType: null,
+			categorySubmenu: null,
 		}
 	},
 
@@ -78,66 +129,142 @@ export default {
 			return this.inline === null
 		},
 		buttonTypes() {
-			if (this.onlyInline) {
-				return this.options
+			const taskTypes = {}
+			for (const task of this.options) {
+				const type = this.getTaskCategory(task.id)
+				if (!taskTypes[type]) {
+					taskTypes[type] = []
+				}
+				taskTypes[type].push(task)
 			}
-			// extra button replaces the last one
-			if (this.extraButtonType !== null) {
-				const types = this.options.slice(0, this.inline - 1)
-				types.push(this.extraButtonType)
-				return types
-			} else {
-				return this.options.slice(0, this.inline)
+			const result = []
+			for (const entry of Object.entries(taskTypes)) {
+				if (entry[0] === 'other') {
+					continue
+				}
+				result.push({
+					id: entry[0],
+					text: this.getTextForCategory(entry[0]),
+					icon: this.getCategoryIcon(entry[0]),
+					tasks: entry[1],
+				})
+			}
+			// Ensure the "other" category is always last
+			if (taskTypes.other) {
+				result.push({
+					id: 'other',
+					text: this.getTextForCategory('other'),
+					icon: this.getCategoryIcon('other'),
+					tasks: taskTypes.other,
+				})
 			}
+			return result
 		},
-		actionTypes() {
-			if (this.extraButtonType !== null) {
-				// the extra button replaces the last one so we need the last one as an action
-				// take all non-inline options that are not selected and that are not the extra button
-				const types = this.options.slice(this.inline).filter(t => t.id !== this.modelValue && t.id !== this.extraButtonType.id)
-				// add the one that was a button and that has been replaced
-				if (this.extraButtonType.id !== this.options[this.inline - 1].id) {
-					types.unshift(this.options[this.inline - 1])
+		buttonTypesByInlineStatus() {
+			if (this.onlyInline) {
+				return { inline: this.buttonTypes, overflow: [] }
+			}
+			const inlineButtonTypes = this.buttonTypes.slice(0, this.inline)
+			let overflowButtonTypes = this.buttonTypes.slice(this.inline)
+
+			// Ensure that the selection is never inline otherwise swap with the last uninlined category
+			const selection = overflowButtonTypes.find(t => this.isCategorySelected(t))
+			if (selection) {
+				const removal = inlineButtonTypes.pop()
+				inlineButtonTypes.push(selection)
+				overflowButtonTypes = overflowButtonTypes.filter(t => t.id !== selection.id)
+				if (removal) {
+					overflowButtonTypes.unshift(removal)
 				}
-				return types
-			} else {
-				return this.options.slice(this.inline)
 			}
+			return { overflow: overflowButtonTypes, inline: inlineButtonTypes }
 		},
-	},
-
-	watch: {
-		options() {
-			this.moveSelectedIfInMenu()
+		categorySubMenuTaskType() {
+			return this.buttonTypesByInlineStatus.overflow.find(t => t.id === this.categorySubmenu)
 		},
 	},
 
 	mounted() {
-		this.moveSelectedIfInMenu()
 	},
 
 	methods: {
-		moveSelectedIfInMenu() {
-			if (this.onlyInline) {
-				return
-			}
-			// if the initially selected value is in the dropdown, get it out
-			const selectedAction = this.actionTypes.find(a => a.id === this.modelValue)
-			if (this.actionTypes.find(a => a.id === this.modelValue)) {
-				this.extraButtonType = selectedAction
-			}
-		},
-		getButtonType(taskType) {
+		selectedTask(taskType) {
 			return taskType.id === this.modelValue
-				? 'primary'
-				: 'secondary'
+		},
+		isCategorySelected(category) {
+			return category.id === this.getTaskCategory(this.modelValue || '')
 		},
 		onTaskSelected(taskType) {
 			this.$emit('update:model-value', taskType.id)
 		},
-		onMenuTaskSelected(taskType) {
-			this.extraButtonType = taskType
-			this.onTaskSelected(taskType)
+		hasSubMenu(taskType) {
+			return taskType.tasks.length > 1 || taskType.id === 'other'
+		},
+		onMenuCategorySelected(taskType) {
+			if (this.hasSubMenu(taskType)) {
+				this.categorySubmenu = taskType.id
+			} else {
+				this.onTaskSelected(taskType.tasks[0])
+				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')) {
+				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':
+				return MessageOutlineIcon
+			case 'context':
+				return ContentPasteSearchIcon
+			case 'text':
+				return TextLongIcon
+			case 'image':
+				return ImageOutlineIcon
+			case 'translate':
+				return WebIcon
+			case 'audio':
+				return WaveformIcon
+			case 'generate':
+				return FileIcon
+			default:
+				return DotsHorizontalIcon
+			}
 		},
 	},
 }

src/components/icons/ContentPasteSearch.vue

@@ -0,0 +1,43 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<span v-bind="$attrs"
+		:aria-hidden="title ? null : 'true'"
+		:aria-label="title"
+		class="material-design-icon waveform-icon"
+		role="img"
+		@click="$emit('click', $event)">
+		<svg :fill="fillColor"
+			class="material-design-icon__svg"
+			:width="size"
+			:height="size"
+			viewBox="0 -960 960 960">
+			<path d="M824-80 716-188q-22 13-46 20.5t-50 7.5q-75 0-127.5-52.5T440-340q0-75 52.5-127.5T620-520q75 0 127.5 52.5T800-340q0 26-7.5 50T772-244l108 108-56 56ZM620-240q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29Zm220-320h-80v-200h-80v120H280v-120h-80v560h200v80H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v200ZM480-760q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z">
+				<title v-if="title">{{ title }}</title>
+			</path>
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'ContentPasteSearch',
+	props: {
+		title: {
+			type: String,
+			default: null,
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+		size: {
+			type: Number,
+			default: 24,
+		},
+	},
+	emits: ['click'],
+}
+</script>