feat(editor): Add info boxes to some of AI sub-categories (no-changelog) (#10177)

packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue

@@ -57,10 +57,16 @@ function onSelected(item: INodeCreateElement) {
 		const subcategoryKey = camelCase(item.properties.title);
 		const title = i18n.baseText(`nodeCreator.subcategoryNames.${subcategoryKey}` as BaseTextKey);
 
+		// If the info message exists in locale, add it to the info field of the view
+		const infoKey = `nodeCreator.subcategoryInfos.${subcategoryKey}` as BaseTextKey;
+		const info = i18n.baseText(infoKey);
+		const extendedInfo = info !== infoKey ? { info } : {};
+
 		pushViewStack({
 			subcategory: item.key,
-			title,
 			mode: 'nodes',
+			title,
+			...extendedInfo,
 			...(item.properties.icon
 				? {
 						nodeIcon: {

packages/editor-ui/src/components/Node/NodeCreator/composables/useViewStacks.ts

@@ -297,9 +297,16 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
 			);
 		}
 
+		// Only add info field if the view does not have any filters (e.g.
+		let extendedInfo = {};
+		if (!filter?.nodes?.length && relatedAIView?.properties.info) {
+			extendedInfo = { info: relatedAIView?.properties.info };
+		}
+
 		await nextTick();
 		pushViewStack({
 			title: relatedAIView?.properties.title,
+			...extendedInfo,
 			rootView: AI_OTHERS_NODE_CREATOR_VIEW,
 			mode: 'nodes',
 			items: nodeCreatorStore.allNodeCreatorNodes,

packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts

@@ -61,6 +61,8 @@ import type { SimplifiedNodeType } from '@/Interface';
 import type { INodeTypeDescription, Themed } from 'n8n-workflow';
 import { NodeConnectionType } from 'n8n-workflow';
 import { useTemplatesStore } from '@/stores/templates.store';
+import type { BaseTextKey } from '@/plugins/i18n';
+import { camelCase } from 'lodash-es';
 
 export interface NodeViewItemSection {
 	key: string;
@@ -78,6 +80,7 @@ export interface NodeViewItem {
 		iconProps?: {
 			color?: string;
 		};
+		info?: string;
 		url?: string;
 		connectionType?: NodeConnectionType;
 		panelClass?: string;
@@ -185,6 +188,17 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 		};
 	}
 
+	function getSubcategoryInfo(subcategory: string) {
+		const localeKey = `nodeCreator.subcategoryInfos.${camelCase(subcategory)}` as BaseTextKey;
+
+		const info = i18n.baseText(localeKey);
+
+		// Return undefined if the locale key is not found
+		if (info === localeKey) return undefined;
+
+		return info;
+	}
+
 	return {
 		value: AI_OTHERS_NODE_CREATOR_VIEW,
 		title: i18n.baseText('nodeCreator.aiPanel.aiOtherNodes'),
@@ -195,6 +209,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 				type: 'subcategory',
 				properties: {
 					title: AI_CATEGORY_DOCUMENT_LOADERS,
+					info: getSubcategoryInfo(AI_CATEGORY_DOCUMENT_LOADERS),
 					icon: 'file-import',
 					...getAISubcategoryProperties(NodeConnectionType.AiDocument),
 				},
@@ -204,6 +219,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 				type: 'subcategory',
 				properties: {
 					title: AI_CATEGORY_LANGUAGE_MODELS,
+					info: getSubcategoryInfo(AI_CATEGORY_LANGUAGE_MODELS),
 					icon: 'language',
 					...getAISubcategoryProperties(NodeConnectionType.AiLanguageModel),
 				},
@@ -213,6 +229,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 				type: 'subcategory',
 				properties: {
 					title: AI_CATEGORY_MEMORY,
+					info: getSubcategoryInfo(AI_CATEGORY_MEMORY),
 					icon: 'brain',
 					...getAISubcategoryProperties(NodeConnectionType.AiMemory),
 				},
@@ -222,6 +239,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 				type: 'subcategory',
 				properties: {
 					title: AI_CATEGORY_OUTPUTPARSER,
+					info: getSubcategoryInfo(AI_CATEGORY_OUTPUTPARSER),
 					icon: 'list',
 					...getAISubcategoryProperties(NodeConnectionType.AiOutputParser),
 				},
@@ -231,6 +249,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 				type: 'subcategory',
 				properties: {
 					title: AI_CATEGORY_RETRIEVERS,
+					info: getSubcategoryInfo(AI_CATEGORY_RETRIEVERS),
 					icon: 'search',
 					...getAISubcategoryProperties(NodeConnectionType.AiRetriever),
 				},
@@ -240,6 +259,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 				type: 'subcategory',
 				properties: {
 					title: AI_CATEGORY_TEXT_SPLITTERS,
+					info: getSubcategoryInfo(AI_CATEGORY_TEXT_SPLITTERS),
 					icon: 'grip-lines-vertical',
 					...getAISubcategoryProperties(NodeConnectionType.AiTextSplitter),
 				},
@@ -250,6 +270,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 				category: CORE_NODES_CATEGORY,
 				properties: {
 					title: AI_CATEGORY_TOOLS,
+					info: getSubcategoryInfo(AI_CATEGORY_TOOLS),
 					icon: 'tools',
 					...getAISubcategoryProperties(NodeConnectionType.AiTool),
 					sections: [
@@ -266,6 +287,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 				type: 'subcategory',
 				properties: {
 					title: AI_CATEGORY_EMBEDDING,
+					info: getSubcategoryInfo(AI_CATEGORY_EMBEDDING),
 					icon: 'vector-square',
 					...getAISubcategoryProperties(NodeConnectionType.AiEmbedding),
 				},
@@ -275,6 +297,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
 				type: 'subcategory',
 				properties: {
 					title: AI_CATEGORY_VECTOR_STORES,
+					info: getSubcategoryInfo(AI_CATEGORY_VECTOR_STORES),
 					icon: 'project-diagram',
 					...getAISubcategoryProperties(NodeConnectionType.AiVectorStore),
 				},

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1018,6 +1018,9 @@
 	"nodeCreator.subcategoryDescriptions.tools": "Utility components providing various functionalities.",
 	"nodeCreator.subcategoryDescriptions.vectorStores": "Handles storage and retrieval of vector representations.",
 	"nodeCreator.subcategoryDescriptions.miscellaneous": "Other AI related nodes.",
+	"nodeCreator.subcategoryInfos.languageModels": "Chat models are designed for interactive conversations and follow instructions well, while text completion models focus on generating continuations of a given text input",
+	"nodeCreator.subcategoryInfos.memory": "Memory allows an AI model to remember and reference past interactions with it",
+	"nodeCreator.subcategoryInfos.vectorStores": "Vector stores allow an AI model to reference relevant pieces of documents, useful for question answering and document search",
 	"nodeCreator.subcategoryNames.appTriggerNodes": "On app event",
 	"nodeCreator.subcategoryNames.appRegularNodes": "Action in an app",
 	"nodeCreator.subcategoryNames.dataTransformation": "Data transformation",