Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Jul 25, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
13b8094
wip: Add info boxes to AI subcategories
burivuhster Jul 24, 2024
8172ada
wip: fix the issue when info locale string does not exist, hide info …
burivuhster Jul 25, 2024
4e041f3
wip: Fix type errors
burivuhster Jul 25, 2024
70bdbbc
wip: Remove final dots
burivuhster Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,12 @@ function onSelected(item: INodeCreateElement) {
if (item.type === 'subcategory') {
const subcategoryKey = camelCase(item.properties.title);
const title = i18n.baseText(`nodeCreator.subcategoryNames.${subcategoryKey}` as BaseTextKey);
const info = i18n.baseText(`nodeCreator.subcategoryInfos.${subcategoryKey}` as BaseTextKey);
burivuhster marked this conversation as resolved.
Show resolved Hide resolved

pushViewStack({
subcategory: item.key,
title,
info,
mode: 'nodes',
...(item.properties.icon
? {
Expand Down
1 change: 1 addition & 0 deletions packages/editor-ui/src/components/Node/NodeCreator/composables/useViewStacks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
await nextTick();
pushViewStack({
title: relatedAIView?.properties.title,
info: relatedAIView?.properties.info,
rootView: AI_OTHERS_NODE_CREATOR_VIEW,
mode: 'nodes',
items: nodeCreatorStore.allNodeCreatorNodes,
Expand Down
21 changes: 21 additions & 0 deletions packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -78,6 +80,7 @@ export interface NodeViewItem {
iconProps?: {
color?: string;
};
info?: string;
url?: string;
connectionType?: NodeConnectionType;
panelClass?: string;
Expand Down Expand Up @@ -185,6 +188,15 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
};
}

function getSubcategoryInfo(subcategory: string) {
const localeKey = `nodeCreator.aiPanel.${camelCase(subcategory)}` as BaseTextKey;
if (i18n.exists(localeKey)) {
burivuhster marked this conversation as resolved.
Show resolved Hide resolved
return i18n.baseText(localeKey);
}

return undefined;
}

return {
value: AI_OTHERS_NODE_CREATOR_VIEW,
title: i18n.baseText('nodeCreator.aiPanel.aiOtherNodes'),
Expand All @@ -195,6 +207,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),
},
Expand All @@ -204,6 +217,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),
},
Expand All @@ -213,6 +227,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
type: 'subcategory',
properties: {
title: AI_CATEGORY_MEMORY,
info: getSubcategoryInfo(AI_CATEGORY_MEMORY),
icon: 'brain',
...getAISubcategoryProperties(NodeConnectionType.AiMemory),
},
Expand All @@ -222,6 +237,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
type: 'subcategory',
properties: {
title: AI_CATEGORY_OUTPUTPARSER,
info: getSubcategoryInfo(AI_CATEGORY_OUTPUTPARSER),
icon: 'list',
...getAISubcategoryProperties(NodeConnectionType.AiOutputParser),
},
Expand All @@ -231,6 +247,7 @@ export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
type: 'subcategory',
properties: {
title: AI_CATEGORY_RETRIEVERS,
info: getSubcategoryInfo(AI_CATEGORY_RETRIEVERS),
icon: 'search',
...getAISubcategoryProperties(NodeConnectionType.AiRetriever),
},
Expand All @@ -240,6 +257,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),
},
Expand All @@ -250,6 +268,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: [
Expand All @@ -266,6 +285,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),
},
Expand All @@ -275,6 +295,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),
},
Expand Down
3 changes: 3 additions & 0 deletions packages/editor-ui/src/plugins/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading