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

This commit is contained in:
Eugene
2024-07-25 14:46:26 +02:00
committed by GitHub
parent 2dc3ff49d7
commit 49c7306feb
4 changed files with 40 additions and 1 deletions

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

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,

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