diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue index 94d611b4c8d48..1f163232ed1b9 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue +++ b/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: { diff --git a/packages/editor-ui/src/components/Node/NodeCreator/composables/useViewStacks.ts b/packages/editor-ui/src/components/Node/NodeCreator/composables/useViewStacks.ts index b67869204d39a..891c360e2cc13 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/composables/useViewStacks.ts +++ b/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, diff --git a/packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts b/packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts index 53ceb525b51ff..ba9cb59c3aa05 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts +++ b/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), }, diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json index 56af9fcade8cf..8d00e109e50ae 100644 --- a/packages/editor-ui/src/plugins/i18n/locales/en.json +++ b/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",