mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 12:57:29 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Eugene 2024-07-25 14:46:26 +02:00 committed by GitHub
parent 2dc3ff49d7
commit 49c7306feb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 40 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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: {

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

@ -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,

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

@ -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),
},

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

@ -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",