mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-14 08:34:07 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

merge in master

Browse source
This commit is contained in:
Mutasem Aldmour 2024-11-13 19:52:46 +01:00
parent 63e74f5e5e a91abeeff5
commit edcb74ad5c
No known key found for this signature in database
GPG key ID: 3DFA8122BB7FD6B8
89 changed files with 3734 additions and 1486 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
CHANGELOG.md
View file

@ -1,3 +1,67 @@
# [1.68.0](https://github.com/n8n-io/n8n/compare/n8n@1.67.0...n8n@1.68.0) (2024-11-13)
### Bug Fixes
* **AI Agent Node:** Throw better errors for non-tool agents when using structured tools ([#11582](https://github.com/n8n-io/n8n/issues/11582)) ([9b6123d](https://github.com/n8n-io/n8n/commit/9b6123dfb2648f880c7829211fa07666611ad0ea))
* **Auto-fixing Output Parser Node:** Only run retry chain on parsing errors ([#11569](https://github.com/n8n-io/n8n/issues/11569)) ([21b31e4](https://github.com/n8n-io/n8n/commit/21b31e488ff6ab0bcf3c79edcd17b9e37d4c64a4))
* **core:** Continue with error output reverse items in success branch ([#11684](https://github.com/n8n-io/n8n/issues/11684)) ([6d5ee83](https://github.com/n8n-io/n8n/commit/6d5ee832966fab96043b0d65697c059ced61d334))
* **core:** Ensure task runner server closes websocket connection correctly ([#11633](https://github.com/n8n-io/n8n/issues/11633)) ([b496bf3](https://github.com/n8n-io/n8n/commit/b496bf3147d2cd873d24371be02cb7ea5dbd8621))
* **core:** Handle websocket connection error more gracefully in task runners ([#11635](https://github.com/n8n-io/n8n/issues/11635)) ([af7d6e6](https://github.com/n8n-io/n8n/commit/af7d6e68d0436ff8a3d4e8410dc8ee4f3a035c44))
* **core:** Improve model sub-nodes error handling ([#11418](https://github.com/n8n-io/n8n/issues/11418)) ([57467d0](https://github.com/n8n-io/n8n/commit/57467d0285d67509322630c4c01130022f274a41))
* **core:** Make push work for waiting webhooks ([#11678](https://github.com/n8n-io/n8n/issues/11678)) ([600479b](https://github.com/n8n-io/n8n/commit/600479bf36ba8870d4aecacad19a2dc5f2d97959))
* **core:** Revert all the context helpers changes ([#11616](https://github.com/n8n-io/n8n/issues/11616)) ([20fd38f](https://github.com/n8n-io/n8n/commit/20fd38f3517f7ef35604ba16abb4d951270b4d50))
* **core:** Set the authentication methad to `email` during startup if the SAML configuration in the database has been corrupted ([#11600](https://github.com/n8n-io/n8n/issues/11600)) ([6439291](https://github.com/n8n-io/n8n/commit/6439291738dec16261979d6d835acbc63743d51a))
* **core:** Use cached value in retrieval of personal project owner ([#11533](https://github.com/n8n-io/n8n/issues/11533)) ([04029d8](https://github.com/n8n-io/n8n/commit/04029d82a11b52990890380ba7094055b18e7c1f))
* Credentials save button is hidden unless you make changes to the ([#11492](https://github.com/n8n-io/n8n/issues/11492)) ([835fbfe](https://github.com/n8n-io/n8n/commit/835fbfe337dd8dc0d0b0318c7227e174484e1328))
* **editor:** Add stickies to node insert position conflict check allowlist ([#11624](https://github.com/n8n-io/n8n/issues/11624)) ([fc39e3c](https://github.com/n8n-io/n8n/commit/fc39e3ca16231c176957e2504d55df6b416874fe))
* **editor:** Adjust Scrollbar Width of RunData Header Row ([#11561](https://github.com/n8n-io/n8n/issues/11561)) ([d17d76a](https://github.com/n8n-io/n8n/commit/d17d76a85d5425bc091d29fc84605ffbccbca984))
* **editor:** Cap NDV Output View Tab Index to prevent rare edge case ([#11614](https://github.com/n8n-io/n8n/issues/11614)) ([a6c8ee4](https://github.com/n8n-io/n8n/commit/a6c8ee4a82e6055766dc1307f79c774c17bb5f4d))
* **editor:** Do not show hover tooltip when autocomplete is active ([#11653](https://github.com/n8n-io/n8n/issues/11653)) ([23caf43](https://github.com/n8n-io/n8n/commit/23caf43e30342a21d45c825f438aa1e6193601d1))
* **editor:** Enable pinning main output with error and always allow unpinning ([#11452](https://github.com/n8n-io/n8n/issues/11452)) ([40c8882](https://github.com/n8n-io/n8n/commit/40c88822acdcda6401bd92b9cf89d013c44b8453))
* **editor:** Fix collapsing nested items in expression modal schema view ([#11645](https://github.com/n8n-io/n8n/issues/11645)) ([41dea52](https://github.com/n8n-io/n8n/commit/41dea522fbfb1c9acee51f47f384973914454b5f))
* **editor:** Fix default workflow settings ([#11632](https://github.com/n8n-io/n8n/issues/11632)) ([658568e](https://github.com/n8n-io/n8n/commit/658568e2700bfd5b61da53f3052403d0098c2d90))
* **editor:** Fix duplicate chat trigger ([#11693](https://github.com/n8n-io/n8n/issues/11693)) ([a025848](https://github.com/n8n-io/n8n/commit/a025848ec4be96f74d4de2ab104256b6d89bb837))
* **editor:** Fix hiding SQL query output when trying to select ([#11649](https://github.com/n8n-io/n8n/issues/11649)) ([4dbf2f4](https://github.com/n8n-io/n8n/commit/4dbf2f4256111985b367030020f1494b8a8b95af))
* **editor:** Fix scrolling in code edit modal ([#11647](https://github.com/n8n-io/n8n/issues/11647)) ([8f695f3](https://github.com/n8n-io/n8n/commit/8f695f3417820e7b9bb04b78972f6abbd61abbe8))
* **editor:** Prevent error being thrown in RLC while loading ([#11676](https://github.com/n8n-io/n8n/issues/11676)) ([ca8cb45](https://github.com/n8n-io/n8n/commit/ca8cb455ba59831295c238afb11aeab6ad18428e))
* **editor:** Prevent NodeCreator from swallowing AskAssistant enter event ([#11532](https://github.com/n8n-io/n8n/issues/11532)) ([db94f16](https://github.com/n8n-io/n8n/commit/db94f169fcd03983fc78a3b4c5e11543610825bf))
* **editor:** Show node executing status shortly before switching to success on new canvas ([#11675](https://github.com/n8n-io/n8n/issues/11675)) ([b0ba24c](https://github.com/n8n-io/n8n/commit/b0ba24cbbc55cebc26e9f62ead7396c4c8fbd062))
* **editor:** Show only error title and 'Open errored node' button; hide 'Ask Assistant' in root for sub-node errors ([#11573](https://github.com/n8n-io/n8n/issues/11573)) ([8cba100](https://github.com/n8n-io/n8n/commit/8cba1004888f60ca653ee069501c13b3cadcc561))
* **Facebook Lead Ads Trigger Node:** Fix issue with optional fields ([#11692](https://github.com/n8n-io/n8n/issues/11692)) ([70d315b](https://github.com/n8n-io/n8n/commit/70d315b3d5b8f5f3e0f39527bba11e254a52028e))
* **Google BigQuery Node:** Add item index to insert error ([#11702](https://github.com/n8n-io/n8n/issues/11702)) ([145d092](https://github.com/n8n-io/n8n/commit/145d0921b217bbd4b625beaacfa14429560bf51b))
* **Google Drive Node:** Fix file upload for streams ([#11698](https://github.com/n8n-io/n8n/issues/11698)) ([770230f](https://github.com/n8n-io/n8n/commit/770230fbfe0b9e86527254e201c4602fbced94ff))
* **In-Memory Vector Store Node:** Fix displaying execution data of connected embedding nodes ([#11701](https://github.com/n8n-io/n8n/issues/11701)) ([40ade15](https://github.com/n8n-io/n8n/commit/40ade151724f4af28a6ed959fd9363450ea711fd))
* **Item List Output Parser Node:** Fix number of items parameter issue ([#11696](https://github.com/n8n-io/n8n/issues/11696)) ([01ebe9d](https://github.com/n8n-io/n8n/commit/01ebe9dd38629afbab954fb489f3ef2bb7ab5b34))
* **n8n Form Node:** Find completion page ([#11674](https://github.com/n8n-io/n8n/issues/11674)) ([ed3ad6d](https://github.com/n8n-io/n8n/commit/ed3ad6d684597f7c4b7419dfa81d476e66f10eba))
* **n8n Form Node:** Open form page if form trigger has pin data ([#11673](https://github.com/n8n-io/n8n/issues/11673)) ([f0492bd](https://github.com/n8n-io/n8n/commit/f0492bd3bb0d94802a2707fb1cf861313b6ea808))
* **n8n Form Node:** Trigger page stack in waiting if error in workflow ([#11671](https://github.com/n8n-io/n8n/issues/11671)) ([94b5873](https://github.com/n8n-io/n8n/commit/94b5873248212a5500f02cf3c0d74df6f9d8fb26))
* **n8n Form Trigger Node:** Checkboxes different sizes ([#11677](https://github.com/n8n-io/n8n/issues/11677)) ([c08d23c](https://github.com/n8n-io/n8n/commit/c08d23c00f01bb6fcb3b75f02e0338af375f9b32))
* NDV search bugs ([#11613](https://github.com/n8n-io/n8n/issues/11613)) ([c32cf64](https://github.com/n8n-io/n8n/commit/c32cf644a6b8c21558e802449329877845de70b1))
* **Notion Node:** Extract page url ([#11643](https://github.com/n8n-io/n8n/issues/11643)) ([cbdd535](https://github.com/n8n-io/n8n/commit/cbdd535fe0cb4e032ea82f008dcf35cc5f2264c2))
* **Redis Chat Memory Node:** Respect the SSL flag from the credential ([#11689](https://github.com/n8n-io/n8n/issues/11689)) ([b5cbf75](https://github.com/n8n-io/n8n/commit/b5cbf7566d351d8a8e9972f13ff5867ff1c8d7d0))
* **Supabase Node:** Reset query parameters in get many operation ([#11630](https://github.com/n8n-io/n8n/issues/11630)) ([7458229](https://github.com/n8n-io/n8n/commit/74582290c04d2dd32300b1a6c7715862ae837d34))
* **Switch Node:** Maintain output connections ([#11162](https://github.com/n8n-io/n8n/issues/11162)) ([9bd79fc](https://github.com/n8n-io/n8n/commit/9bd79fceebc4453d0fe40ae5f628d5e31ff2b326))
### Features
* **AI Transform Node:** Show warning for binary data ([#11560](https://github.com/n8n-io/n8n/issues/11560)) ([ddbb263](https://github.com/n8n-io/n8n/commit/ddbb263dce0fc458abc95d850217251bb49d2b83))
* **core:** Make all http requests made with `httpRequestWithAuthentication` abortable ([#11704](https://github.com/n8n-io/n8n/issues/11704)) ([0d8aada](https://github.com/n8n-io/n8n/commit/0d8aada49005d6a6078e8460003a0de61a8f423c))
* **editor:** Improve how we show default Agent prompt and Memory session parameters ([#11491](https://github.com/n8n-io/n8n/issues/11491)) ([565f8cd](https://github.com/n8n-io/n8n/commit/565f8cd8c78b534a50e272997d659d162fa86625))
* **editor:** Improve workflow loading performance on new canvas ([#11629](https://github.com/n8n-io/n8n/issues/11629)) ([f1e2df7](https://github.com/n8n-io/n8n/commit/f1e2df7d0753aa0f33cf299100a063bf89cc8b35))
* **editor:** Redesign Canvas Chat ([#11634](https://github.com/n8n-io/n8n/issues/11634)) ([a412ab7](https://github.com/n8n-io/n8n/commit/a412ab7ebfcd6aa9051a8ca36e34f1067102c998))
* **editor:** Restrict when a ChatTrigger Node is added automatically ([#11523](https://github.com/n8n-io/n8n/issues/11523)) ([93a6f85](https://github.com/n8n-io/n8n/commit/93a6f858fa3eb53f8b48b2a3d6b7377279dd6ed1))
* Github star button in-app ([#11695](https://github.com/n8n-io/n8n/issues/11695)) ([0fd684d](https://github.com/n8n-io/n8n/commit/0fd684d90c830f8b0aab12b7f78a1fa5619c62c9))
* **Oura Node:** Update node for v2 api ([#11604](https://github.com/n8n-io/n8n/issues/11604)) ([3348fbb](https://github.com/n8n-io/n8n/commit/3348fbb1547c430ff8707b298640e3461d3f6536))
### Performance Improvements
* **editor:** Add lint rules for optimization-friendly syntax ([#11681](https://github.com/n8n-io/n8n/issues/11681)) ([88295c7](https://github.com/n8n-io/n8n/commit/88295c70495ae3d017674d5745972a346fcbaf12))
# [1.67.0](https://github.com/n8n-io/n8n/compare/n8n@1.66.0...n8n@1.67.0) (2024-11-06)

6
cypress/composables/modals/chat-modal.ts
View file

@ -3,7 +3,7 @@
*/
export function getManualChatModal() {
return cy.getByTestId('lmChat-modal');
return cy.getByTestId('canvas-chat');
}
export function getManualChatInput() {
@ -19,11 +19,11 @@ export function getManualChatMessages() {
}
export function getManualChatModalCloseButton() {
return getManualChatModal().get('.el-dialog__close');
return cy.getByTestId('workflow-chat-button');
}
export function getManualChatModalLogs() {
return getManualChatModal().getByTestId('lm-chat-logs');
return cy.getByTestId('canvas-chat-logs');
}
export function getManualChatDialog() {
return getManualChatModal().getByTestId('workflow-lm-chat-dialog');

4
cypress/e2e/1-workflows.cy.ts
View file

@ -23,6 +23,7 @@ describe('Workflows', () => {
});
it('should create multiple new workflows using add workflow button', () => {
cy.viewport(1920, 1080);
[...Array(multipleWorkflowsCount).keys()].forEach(() => {
cy.visit(WorkflowsPage.url);
WorkflowsPage.getters.createWorkflowButton().click();
@ -35,6 +36,7 @@ describe('Workflows', () => {
});
it('should search for a workflow', () => {
cy.viewport(1920, 1080);
// One Result
WorkflowsPage.getters.searchBar().type('Empty State Card Workflow');
WorkflowsPage.getters.workflowCards().should('have.length', 1);
@ -60,6 +62,7 @@ describe('Workflows', () => {
});
it('should delete all the workflows', () => {
cy.viewport(1920, 1080);
WorkflowsPage.getters.workflowCards().should('have.length', multipleWorkflowsCount + 1);
WorkflowsPage.getters.workflowCards().each(($el) => {
@ -75,6 +78,7 @@ describe('Workflows', () => {
});
it('should respect tag querystring filter when listing workflows', () => {
cy.viewport(1920, 1080);
WorkflowsPage.getters.newWorkflowButtonCard().click();
cy.createFixtureWorkflow('Test_workflow_2.json', getUniqueWorkflowName('My New Workflow'));

2
cypress/e2e/17-workflow-tags.cy.ts
View file

@ -53,6 +53,7 @@ describe('Workflow tags', () => {
});
it('should detach a tag inline by clicking on X on tag pill', () => {
cy.viewport(1920, 1080);
wf.getters.createTagButton().click();
wf.actions.addTags(TEST_TAGS);
wf.getters.nthTagPill(1).click();
@ -73,6 +74,7 @@ describe('Workflow tags', () => {
});
it('should not show non existing tag as a selectable option', () => {
cy.viewport(1920, 1080);
const NON_EXISTING_TAG = 'My Test Tag';
wf.getters.createTagButton().click();

1
cypress/e2e/19-execution.cy.ts
View file

@ -514,6 +514,7 @@ describe('Execution', () => {
});
it('should send proper payload for node rerun', () => {
cy.viewport(1920, 1080);
cy.createFixtureWorkflow('Multiple_trigger_node_rerun.json', 'Multiple trigger node rerun');
workflowPage.getters.zoomToFitButton().click();

1
cypress/e2e/20-workflow-executions.cy.ts
View file

@ -101,6 +101,7 @@ describe('Workflow Executions', () => {
});
it('should show workflow data in executions tab after hard reload and modify name and tags', () => {
cy.viewport(1920, 1080);
executionsTab.actions.switchToExecutionsTab();
checkMainHeaderELements();
workflowPage.getters.saveButton().find('button').should('not.exist');

17
cypress/e2e/30-langchain.cy.ts
View file

@ -14,7 +14,6 @@ import {
} from './../constants';
import {
closeManualChatModal,
getManualChatDialog,
getManualChatMessages,
getManualChatModal,
getManualChatModalLogs,
@ -168,7 +167,7 @@ describe('Langchain Integration', () => {
lastNodeExecuted: BASIC_LLM_CHAIN_NODE_NAME,
});
getManualChatDialog().should('contain', outputMessage);
getManualChatMessages().should('contain', outputMessage);
});
it('should be able to open and execute Agent node', () => {
@ -208,7 +207,7 @@ describe('Langchain Integration', () => {
lastNodeExecuted: AGENT_NODE_NAME,
});
getManualChatDialog().should('contain', outputMessage);
getManualChatMessages().should('contain', outputMessage);
});
it('should add and use Manual Chat Trigger node together with Agent node', () => {
@ -229,8 +228,6 @@ describe('Langchain Integration', () => {
clickManualChatButton();
getManualChatModalLogs().should('not.exist');
const inputMessage = 'Hello!';
const outputMessage = 'Hi there! How can I assist you today?';
const runData = [
@ -335,6 +332,8 @@ describe('Langchain Integration', () => {
getManualChatModalLogsEntries().should('have.length', 1);
closeManualChatModal();
getManualChatModalLogs().should('not.exist');
getManualChatModal().should('not.exist');
});
it('should auto-add chat trigger and basic LLM chain when adding LLM node', () => {
@ -359,6 +358,14 @@ describe('Langchain Integration', () => {
getConnectionBySourceAndTarget(CHAT_TRIGGER_NODE_DISPLAY_NAME, AGENT_NODE_NAME).should('exist');
getNodes().should('have.length', 3);
});
it('should not auto-add nodes if ChatTrigger is already present', () => {
addNodeToCanvas(MANUAL_CHAT_TRIGGER_NODE_NAME, true);
addNodeToCanvas(AGENT_NODE_NAME, true);
addNodeToCanvas(AI_LANGUAGE_MODEL_OPENAI_CHAT_MODEL_NODE_NAME, true);
getConnectionBySourceAndTarget(CHAT_TRIGGER_NODE_DISPLAY_NAME, AGENT_NODE_NAME).should('exist');
getNodes().should('have.length', 3);
});
it('should render runItems for sub-nodes and allow switching between them', () => {
const workflowPage = new WorkflowPage();
const ndv = new NDV();

1
cypress/e2e/34-template-credentials-setup.cy.ts
View file

@ -182,6 +182,7 @@ describe('Template credentials setup', () => {
});
it('should fill credentials from workflow editor', () => {
cy.viewport(1920, 1080);
templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
templateCredentialsSetupPage.getters.skipLink().click();

1
cypress/e2e/45-ai-assistant.cy.ts
View file

@ -36,6 +36,7 @@ describe('AI Assistant::enabled', () => {
});
it('renders placeholder UI', () => {
cy.viewport(1920, 1080);
aiAssistant.getters.askAssistantFloatingButton().should('be.visible');
aiAssistant.getters.askAssistantFloatingButton().click();
aiAssistant.getters.askAssistantChat().should('be.visible');

5
cypress/e2e/5-ndv.cy.ts
View file

@ -66,6 +66,7 @@ describe('NDV', () => {
});
it('should disconect Switch outputs if rules order was changed', () => {
cy.viewport(1920, 1080);
cy.createFixtureWorkflow('NDV-test-switch_reorder.json', 'NDV test switch reorder');
workflowPage.actions.zoomToFit();
@ -81,7 +82,7 @@ describe('NDV', () => {
ndv.getters.backToCanvas().click();
workflowPage.actions.executeWorkflow();
workflowPage.actions.openNode('Merge');
ndv.getters.outputPanel().contains('1 item').should('exist');
ndv.getters.outputPanel().contains('2 items').should('exist');
cy.contains('span', 'zero').should('exist');
});
@ -232,6 +233,7 @@ describe('NDV', () => {
ndv.getters.outputPanel().find('[class*=_pagination]').should('exist');
});
it('should display large schema', () => {
cy.viewport(1920, 1080);
cy.createFixtureWorkflow(
'Test_workflow_schema_test_pinned_data.json',
'NDV test schema view 2',
@ -718,6 +720,7 @@ describe('NDV', () => {
});
it('Should open appropriate node creator after clicking on connection hint link', () => {
cy.viewport(1920, 1080);
const nodeCreator = new NodeCreator();
const hintMapper = {
Memory: 'AI Nodes',

3
package.json
View file

@ -1,6 +1,6 @@
{
"name": "n8n-monorepo",
"version": "1.67.0",
"version": "1.68.0",
"private": true,
"engines": {
"node": ">=20.15",
@ -16,6 +16,7 @@
"build:nodes": "turbo run build:nodes",
"typecheck": "turbo typecheck",
"dev": "turbo run dev --parallel --env-mode=loose --filter=!n8n-design-system --filter=!@n8n/chat --filter=!@n8n/task-runner",
"dev:be": "turbo run dev --parallel --env-mode=loose --filter=!n8n-design-system --filter=!@n8n/chat --filter=!@n8n/task-runner --filter=!n8n-editor-ui",
"dev:ai": "turbo run dev --parallel --env-mode=loose --filter=@n8n/nodes-langchain --filter=n8n --filter=n8n-core",
"clean": "turbo run clean --parallel",
"reset": "node scripts/ensure-zx.mjs && zx scripts/reset.mjs",

2
packages/@n8n/chat/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@n8n/chat",
"version": "0.30.0",
"version": "0.31.0",
"scripts": {
"dev": "pnpm run storybook",
"build": "pnpm build:vite && pnpm build:bundle",

12
packages/@n8n/chat/src/__tests__/setup.ts
View file

@ -1 +1,13 @@
import '@testing-library/jest-dom';
import '@testing-library/jest-dom';
import { configure } from '@testing-library/vue';
configure({ testIdAttribute: 'data-test-id' });
window.ResizeObserver =
window.ResizeObserver ||
vi.fn().mockImplementation(() => ({
disconnect: vi.fn(),
observe: vi.fn(),
unobserve: vi.fn(),
}));

32
packages/@n8n/chat/src/components/ChatFile.vue
View file

@ -30,22 +30,23 @@ const TypeIcon = computed(() => {
});
function onClick() {
if (props.isRemovable) {
emit('remove', props.file);
}
if (props.isPreviewable) {
window.open(URL.createObjectURL(props.file));
}
}
function onDelete() {
emit('remove', props.file);
}
</script>
<template>
<div class="chat-file" @click="onClick">
<TypeIcon />
<p class="chat-file-name">{{ file.name }}</p>
<IconDelete v-if="isRemovable" class="chat-file-delete" />
<IconPreview v-if="isPreviewable" class="chat-file-preview" />
<span v-if="isRemovable" class="chat-file-delete" @click.stop="onDelete">
<IconDelete />
</span>
<IconPreview v-else-if="isPreviewable" class="chat-file-preview" />
</div>
</template>
@ -80,12 +81,25 @@ function onClick() {
.chat-file-preview {
background: none;
border: none;
display: none;
display: block;
cursor: pointer;
flex-shrink: 0;
}
.chat-file:hover & {
display: block;
.chat-file-delete {
position: relative;
&:hover {
color: red;
}
/* Increase hit area for better clickability */
&:before {
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
}
</style>

102
packages/@n8n/chat/src/components/Input.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { useFileDialog } from '@vueuse/core';
import IconFilePlus from 'virtual:icons/mdi/filePlus';
import IconPaperclip from 'virtual:icons/mdi/paperclip';
import IconSend from 'virtual:icons/mdi/send';
import { computed, onMounted, onUnmounted, ref, unref } from 'vue';
@ -9,10 +9,20 @@ import { chatEventBus } from '@n8n/chat/event-buses';
import ChatFile from './ChatFile.vue';
export interface ChatInputProps {
placeholder?: string;
}
const props = withDefaults(defineProps<ChatInputProps>(), {
placeholder: 'inputPlaceholder',
});
export interface ArrowKeyDownPayload {
key: 'ArrowUp' | 'ArrowDown';
currentInputValue: string;
}
const { t } = useI18n();
const emit = defineEmits<{
arrowKeyDown: [value: ArrowKeyDownPayload];
}>();
@ -20,12 +30,12 @@ const emit = defineEmits<{
const { options } = useOptions();
const chatStore = useChat();
const { waitingForResponse } = chatStore;
const { t } = useI18n();
const files = ref<FileList | null>(null);
const chatTextArea = ref<HTMLTextAreaElement | null>(null);
const input = ref('');
const isSubmitting = ref(false);
const resizeObserver = ref<ResizeObserver | null>(null);
const isSubmitDisabled = computed(() => {
return input.value === '' || waitingForResponse.value || options.disabled?.value === true;
@ -74,12 +84,30 @@ onMounted(() => {
chatEventBus.on('focusInput', focusChatInput);
chatEventBus.on('blurInput', blurChatInput);
chatEventBus.on('setInputValue', setInputValue);
if (chatTextArea.value) {
resizeObserver.value = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.target === chatTextArea.value) {
adjustHeight({ target: chatTextArea.value } as unknown as Event);
}
}
});
// Start observing the textarea
resizeObserver.value.observe(chatTextArea.value);
}
});
onUnmounted(() => {
chatEventBus.off('focusInput', focusChatInput);
chatEventBus.off('blurInput', blurChatInput);
chatEventBus.off('setInputValue', setInputValue);
if (resizeObserver.value) {
resizeObserver.value.disconnect();
resizeObserver.value = null;
}
});
function blurChatInput() {
@ -121,6 +149,7 @@ async function onSubmitKeydown(event: KeyboardEvent) {
}
await onSubmit(event);
adjustHeight({ target: chatTextArea.value } as unknown as Event);
}
function onFileRemove(file: File) {
@ -151,6 +180,15 @@ function onOpenFileDialog() {
if (isFileUploadDisabled.value) return;
openFileDialog({ accept: unref(allowedFileTypes) });
}
function adjustHeight(event: Event) {
const textarea = event.target as HTMLTextAreaElement;
// Set to content minimum to get the right scrollHeight
textarea.style.height = 'var(--chat--textarea--height)';
// Get the new height, with a small buffer for padding
const newHeight = Math.min(textarea.scrollHeight, 480); // 30rem
textarea.style.height = `${newHeight}px`;
}
</script>
<template>
@ -158,20 +196,25 @@ function onOpenFileDialog() {
<div class="chat-inputs">
<textarea
ref="chatTextArea"
data-test-id="chat-input"
v-model="input"
:disabled="isInputDisabled"
:placeholder="t('inputPlaceholder')"
:placeholder="t(props.placeholder)"
@keydown.enter="onSubmitKeydown"
@input="adjustHeight"
@mousedown="adjustHeight"
@focus="adjustHeight"
/>
<div class="chat-inputs-controls">
<button
v-if="isFileUploadAllowed"
:disabled="isFileUploadDisabled"
class="chat-input-send-button"
class="chat-input-file-button"
data-test-id="chat-attach-file-button"
@click="onOpenFileDialog"
>
<IconFilePlus height="24" width="24" />
<IconPaperclip height="24" width="24" />
</button>
<button :disabled="isSubmitDisabled" class="chat-input-send-button" @click="onSubmit">
<IconSend height="24" width="24" />
@ -184,6 +227,7 @@ function onOpenFileDialog() {
:key="file.name"
:file="file"
:is-removable="true"
:is-previewable="true"
@remove="onFileRemove"
/>
</div>
@ -217,13 +261,15 @@ function onOpenFileDialog() {
border-radius: var(--chat--input--border-radius, 0);
padding: 0.8rem;
padding-right: calc(0.8rem + (var(--controls-count, 1) * var(--chat--textarea--height)));
min-height: var(--chat--textarea--height);
max-height: var(--chat--textarea--max-height, var(--chat--textarea--height));
height: 100%;
min-height: var(--chat--textarea--height, 2.5rem); // Set a smaller initial height
max-height: var(--chat--textarea--max-height, 30rem);
height: var(--chat--textarea--height, 2.5rem); // Set initial height same as min-height
resize: none;
overflow-y: auto;
background: var(--chat--input--background, white);
resize: var(--chat--textarea--resize, none);
color: var(--chat--input--text-color, initial);
outline: none;
line-height: var(--chat--input--line-height, 1.5);
&:focus,
&:hover {
@ -235,8 +281,10 @@ function onOpenFileDialog() {
display: flex;
position: absolute;
right: 0.5rem;
bottom: 0;
}
.chat-input-send-button {
.chat-input-send-button,
.chat-input-file-button {
height: var(--chat--textarea--height);
width: var(--chat--textarea--height);
background: var(--chat--input--send--button--background, white);
@ -253,19 +301,33 @@ function onOpenFileDialog() {
min-width: fit-content;
}
&:hover,
&:focus {
background: var(
--chat--input--send--button--background-hover,
var(--chat--input--send--button--background)
);
color: var(--chat--input--send--button--color-hover, var(--chat--color-secondary-shade-50));
}
&[disabled] {
cursor: no-drop;
color: var(--chat--color-disabled);
}
.chat-input-send-button {
&:hover,
&:focus {
background: var(
--chat--input--send--button--background-hover,
var(--chat--input--send--button--background)
);
color: var(--chat--input--send--button--color-hover, var(--chat--color-secondary-shade-50));
}
}
}
.chat-input-file-button {
background: var(--chat--input--file--button--background, white);
color: var(--chat--input--file--button--color, var(--chat--color-secondary));
&:hover {
background: var(
--chat--input--file--button--background-hover,
var(--chat--input--file--button--background)
);
color: var(--chat--input--file--button--color-hover, var(--chat--color-secondary-shade-50));
}
}
.chat-files {
@ -275,7 +337,7 @@ function onOpenFileDialog() {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
gap: 0.25rem;
gap: 0.5rem;
padding: var(--chat--files-spacing, 0.25rem);
}
</style>

13
packages/@n8n/chat/src/components/Message.vue
View file

@ -60,7 +60,7 @@ const linksNewTabPlugin = (vueMarkdownItInstance: MarkdownIt) => {
const scrollToView = () => {
if (messageContainer.value?.scrollIntoView) {
messageContainer.value.scrollIntoView({
block: 'center',
block: 'start',
});
}
};
@ -132,14 +132,14 @@ onMounted(async () => {
.chat-message {
display: block;
position: relative;
max-width: 80%;
max-width: fit-content;
font-size: var(--chat--message--font-size, 1rem);
padding: var(--chat--message--padding, var(--chat--spacing));
border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
scroll-margin: 100px;
.chat-message-actions {
position: absolute;
bottom: 100%;
bottom: calc(100% - 0.5rem);
left: 0;
opacity: 0;
transform: translateY(-0.25rem);
@ -151,6 +151,9 @@ onMounted(async () => {
left: auto;
right: 0;
}
&.chat-message-from-bot .chat-message-actions {
bottom: calc(100% - 1rem);
}
&:hover {
.chat-message-actions {
@ -159,7 +162,7 @@ onMounted(async () => {
}
p {
line-height: var(--chat--message-line-height, 1.8);
line-height: var(--chat--message-line-height, 1.5);
word-wrap: break-word;
}

7
packages/@n8n/chat/src/components/MessageTyping.vue
View file

@ -34,7 +34,12 @@ onMounted(() => {
});
</script>
<template>
<Message ref="messageContainer" :class="classes" :message="message">
<Message
ref="messageContainer"
:class="classes"
:message="message"
data-test-id="chat-message-typing"
>
<div class="chat-message-typing-body">
<span class="chat-message-typing-circle"></span>
<span class="chat-message-typing-circle"></span>

4
packages/@n8n/chat/src/css/markdown.scss
View file

@ -37,7 +37,7 @@ body {
4. Prevent font size adjustment after orientation changes (IE, iOS)
5. Prevent overflow from long words (all)
*/
font-size: 125%; /* 2 */
font-size: 110%; /* 2 */
line-height: 1.6; /* 3 */
-webkit-text-size-adjust: 100%; /* 4 */
word-break: break-word; /* 5 */
@ -596,7 +596,7 @@ body {
pre code {
display: block;
padding: 0.3em 0.7em;
padding: 0 0 0.5rem 0.5rem;
word-break: normal;
overflow-x: auto;
}

2
packages/@n8n/config/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@n8n/config",
"version": "1.17.0",
"version": "1.18.0",
"scripts": {
"clean": "rimraf dist .turbo",
"dev": "pnpm watch",

2
packages/@n8n/nodes-langchain/nodes/vector_store/VectorStoreInMemory/VectorStoreInMemory.node.ts
View file

@ -54,6 +54,6 @@ export class VectorStoreInMemory extends createVectorStoreNode({
const workflowId = context.getWorkflow().id;
const vectorStoreInstance = MemoryVectorStoreManager.getInstance(embeddings);
void vectorStoreInstance.addDocuments(`${workflowId}__${memoryKey}`, documents, clearStore);
await vectorStoreInstance.addDocuments(`${workflowId}__${memoryKey}`, documents, clearStore);
},
}) {}

44
packages/@n8n/nodes-langchain/nodes/vector_store/shared/MemoryVectorStoreManager.test.ts Normal file
View file

@ -0,0 +1,44 @@
import type { OpenAIEmbeddings } from '@langchain/openai';
import { MemoryVectorStoreManager } from './MemoryVectorStoreManager';
import { mock } from 'jest-mock-extended';
describe('MemoryVectorStoreManager', () => {
it('should create an instance of MemoryVectorStoreManager', () => {
const embeddings = mock<OpenAIEmbeddings>();
const instance = MemoryVectorStoreManager.getInstance(embeddings);
expect(instance).toBeInstanceOf(MemoryVectorStoreManager);
});
it('should return existing instance', () => {
const embeddings = mock<OpenAIEmbeddings>();
const instance1 = MemoryVectorStoreManager.getInstance(embeddings);
const instance2 = MemoryVectorStoreManager.getInstance(embeddings);
expect(instance1).toBe(instance2);
});
it('should update embeddings in existing instance', () => {
const embeddings1 = mock<OpenAIEmbeddings>();
const embeddings2 = mock<OpenAIEmbeddings>();
const instance = MemoryVectorStoreManager.getInstance(embeddings1);
MemoryVectorStoreManager.getInstance(embeddings2);
expect((instance as any).embeddings).toBe(embeddings2);
});
it('should update embeddings in existing vector store instances', async () => {
const embeddings1 = mock<OpenAIEmbeddings>();
const embeddings2 = mock<OpenAIEmbeddings>();
const instance1 = MemoryVectorStoreManager.getInstance(embeddings1);
await instance1.getVectorStore('test');
const instance2 = MemoryVectorStoreManager.getInstance(embeddings2);
const vectorStoreInstance2 = await instance2.getVectorStore('test');
expect((vectorStoreInstance2 as any).embeddings).toBe(embeddings2);
});
});

9
packages/@n8n/nodes-langchain/nodes/vector_store/shared/MemoryVectorStoreManager.ts
View file

@ -14,7 +14,16 @@ export class MemoryVectorStoreManager {
public static getInstance(embeddings: Embeddings): MemoryVectorStoreManager {
if (!MemoryVectorStoreManager.instance) {
MemoryVectorStoreManager.instance = new MemoryVectorStoreManager(embeddings);
} else {
// We need to update the embeddings in the existing instance.
// This is important as embeddings instance is wrapped in a logWrapper,
// which relies on supplyDataFunctions context which changes on each workflow run
MemoryVectorStoreManager.instance.embeddings = embeddings;
MemoryVectorStoreManager.instance.vectorStoreBuffer.forEach((vectorStoreInstance) => {
vectorStoreInstance.embeddings = embeddings;
});
}
return MemoryVectorStoreManager.instance;
}

2
packages/@n8n/nodes-langchain/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@n8n/n8n-nodes-langchain",
"version": "1.67.0",
"version": "1.68.0",
"description": "",
"main": "index.js",
"scripts": {

2
packages/@n8n/task-runner/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@n8n/task-runner",
"version": "1.5.0",
"version": "1.6.0",
"scripts": {
"clean": "rimraf dist .turbo",
"start": "node dist/start.js",

2
packages/cli/README.md
View file

@ -48,7 +48,7 @@ It will download everything that is needed to start n8n.
You can then access n8n by opening:
[http://localhost:5678](http://localhost:5678)
**Note:** The minimum required version for Node.js is v14.15. Make sure to update Node.js to v14.15 or above.
**Note:** The minimum required version for Node.js is v18. Make sure to update Node.js to v18 or above.
### Run with Docker

2
packages/cli/package.json
View file

@ -1,6 +1,6 @@
{
"name": "n8n",
"version": "1.67.0",
"version": "1.68.0",
"description": "n8n Workflow Automation Tool",
"main": "dist/index",
"types": "dist/index.d.ts",

8
packages/cli/src/response-helper.ts
View file

@ -103,6 +103,14 @@ export function sendErrorResponse(res: Response, error: Error) {
}
}
if (error.errorCode === 409 && originalUrl && originalUrl.includes('form-waiting')) {
//codes other than 200 breaks redirection to form-waiting page from form trigger
//render form page instead of json
return res.render('form-trigger-409', {
message: error.message,
});
}
httpStatusCode = error.httpStatusCode;
if (error.errorCode) {

199
packages/cli/src/webhooks/__tests__/waiting-forms.test.ts Normal file
View file

@ -0,0 +1,199 @@
import { mock } from 'jest-mock-extended';
import { FORM_NODE_TYPE, type Workflow } from 'n8n-workflow';
import type { ExecutionRepository } from '@/databases/repositories/execution.repository';
import { WaitingForms } from '@/webhooks/waiting-forms';
describe('WaitingForms', () => {
const executionRepository = mock<ExecutionRepository>();
const waitingWebhooks = new WaitingForms(mock(), mock(), executionRepository);
beforeEach(() => {
jest.restoreAllMocks();
});
describe('findCompletionPage', () => {
it('should return lastNodeExecuted if it is a non-disabled form completion node', () => {
const workflow = mock<Workflow>({
getParentNodes: jest.fn().mockReturnValue([]),
nodes: {
Form1: {
disabled: undefined,
type: FORM_NODE_TYPE,
parameters: {
operation: 'completion',
},
},
},
});
const result = waitingWebhooks.findCompletionPage(workflow, {}, 'Form1');
expect(result).toBe('Form1');
});
it('should return undefined if lastNodeExecuted is disabled', () => {
const workflow = mock<Workflow>({
getParentNodes: jest.fn().mockReturnValue([]),
nodes: {
Form1: {
disabled: true,
type: FORM_NODE_TYPE,
parameters: {
operation: 'completion',
},
},
},
});
const result = waitingWebhooks.findCompletionPage(workflow, {}, 'Form1');
expect(result).toBeUndefined();
});
it('should return undefined if lastNodeExecuted is not a form node', () => {
const workflow = mock<Workflow>({
getParentNodes: jest.fn().mockReturnValue([]),
nodes: {
NonForm: {
disabled: undefined,
type: 'other-node-type',
parameters: {},
},
},
});
const result = waitingWebhooks.findCompletionPage(workflow, {}, 'NonForm');
expect(result).toBeUndefined();
});
it('should return undefined if lastNodeExecuted operation is not completion', () => {
const workflow = mock<Workflow>({
getParentNodes: jest.fn().mockReturnValue([]),
nodes: {
Form1: {
disabled: undefined,
type: FORM_NODE_TYPE,
parameters: {
operation: 'page',
},
},
},
});
const result = waitingWebhooks.findCompletionPage(workflow, {}, 'Form1');
expect(result).toBeUndefined();
});
it('should find first valid completion form in parent nodes if lastNodeExecuted is not valid', () => {
const workflow = mock<Workflow>({
getParentNodes: jest.fn().mockReturnValue(['Form1', 'Form2', 'Form3']),
nodes: {
LastNode: {
disabled: undefined,
type: 'other-node-type',
parameters: {},
},
Form1: {
disabled: true,
type: FORM_NODE_TYPE,
parameters: {
operation: 'completion',
},
},
Form2: {
disabled: undefined,
type: FORM_NODE_TYPE,
parameters: {
operation: 'completion',
},
},
Form3: {
disabled: undefined,
type: FORM_NODE_TYPE,
parameters: {
operation: 'completion',
},
},
},
});
const runData = {
Form2: [],
Form3: [],
};
const result = waitingWebhooks.findCompletionPage(workflow, runData, 'LastNode');
expect(result).toBe('Form3');
});
it('should return undefined if no valid completion form is found in parent nodes', () => {
const workflow = mock<Workflow>({
getParentNodes: jest.fn().mockReturnValue(['Form1', 'Form2']),
nodes: {
LastNode: {
disabled: undefined,
type: 'other-node-type',
parameters: {},
},
Form1: {
disabled: true,
type: FORM_NODE_TYPE,
parameters: {
operation: 'completion',
},
},
Form2: {
disabled: undefined,
type: FORM_NODE_TYPE,
parameters: {
operation: 'submit',
},
},
},
});
const result = waitingWebhooks.findCompletionPage(workflow, {}, 'LastNode');
expect(result).toBeUndefined();
});
it('should skip parent nodes without runData', () => {
const workflow = mock<Workflow>({
getParentNodes: jest.fn().mockReturnValue(['Form1', 'Form2', 'Form3']),
nodes: {
LastNode: {
disabled: undefined,
type: 'other-node-type',
parameters: {},
},
Form1: {
disabled: undefined,
type: FORM_NODE_TYPE,
parameters: {
operation: 'completion',
},
},
Form2: {
disabled: undefined,
type: FORM_NODE_TYPE,
parameters: {
operation: 'completion',
},
},
Form3: {
disabled: undefined,
type: FORM_NODE_TYPE,
parameters: {
operation: 'completion',
},
},
},
});
const runData = {
Form2: [],
};
const result = waitingWebhooks.findCompletionPage(workflow, runData, 'LastNode');
expect(result).toBe('Form2');
});
});
});

62
packages/cli/src/webhooks/waiting-forms.ts
View file

@ -1,5 +1,6 @@
import axios from 'axios';
import type express from 'express';
import type { IRunData } from 'n8n-workflow';
import { FORM_NODE_TYPE, sleep, Workflow } from 'n8n-workflow';
import { Service } from 'typedi';
@ -57,6 +58,29 @@ export class WaitingForms extends WaitingWebhooks {
} catch (error) {}
}
findCompletionPage(workflow: Workflow, runData: IRunData, lastNodeExecuted: string) {
const parentNodes = workflow.getParentNodes(lastNodeExecuted);
const lastNode = workflow.nodes[lastNodeExecuted];
if (
!lastNode.disabled &&
lastNode.type === FORM_NODE_TYPE &&
lastNode.parameters.operation === 'completion'
) {
return lastNodeExecuted;
} else {
return parentNodes.reverse().find((nodeName) => {
const node = workflow.nodes[nodeName];
return (
!node.disabled &&
node.type === FORM_NODE_TYPE &&
node.parameters.operation === 'completion' &&
runData[nodeName]
);
});
}
}
async executeWebhook(
req: WaitingWebhookRequest,
res: express.Response,
@ -89,35 +113,19 @@ export class WaitingForms extends WaitingWebhooks {
throw new ConflictError(`The execution "${executionId}" is running already.`);
}
let completionPage;
let lastNodeExecuted = execution.data.resultData.lastNodeExecuted as string;
if (execution.finished) {
// find the completion page to render
// if there is no completion page, render the default page
const workflow = this.getWorkflow(execution);
const parentNodes = workflow.getParentNodes(
execution.data.resultData.lastNodeExecuted as string,
const completionPage = this.findCompletionPage(
workflow,
execution.data.resultData.runData,
lastNodeExecuted,
);
const lastNodeExecuted = execution.data.resultData.lastNodeExecuted as string;
const lastNode = workflow.nodes[lastNodeExecuted];
if (
!lastNode.disabled &&
lastNode.type === FORM_NODE_TYPE &&
lastNode.parameters.operation === 'completion'
) {
completionPage = lastNodeExecuted;
} else {
completionPage = Object.keys(workflow.nodes).find((nodeName) => {
const node = workflow.nodes[nodeName];
return (
parentNodes.includes(nodeName) &&
!node.disabled &&
node.type === FORM_NODE_TYPE &&
node.parameters.operation === 'completion'
);
});
}
if (!completionPage) {
res.render('form-trigger-completion', {
title: 'Form Submitted',
@ -128,16 +136,16 @@ export class WaitingForms extends WaitingWebhooks {
return {
noWebhookResponse: true,
};
} else {
lastNodeExecuted = completionPage;
}
}
const targetNode = completionPage || (execution.data.resultData.lastNodeExecuted as string);
return await this.getWebhookExecutionData({
execution,
req,
res,
lastNodeExecuted: targetNode,
lastNodeExecuted,
executionId,
suffix,
});

74
packages/cli/templates/form-trigger-409.handlebars Normal file
View file

@ -0,0 +1,74 @@
<html lang='en'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<link rel='icon' type='image/png' href='https://n8n.io/favicon.ico' />
<link
href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet'
type='text/css'
/>
<title>Problem loading form</title>
<style>
*, ::after, ::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-family:
Open Sans, sans-serif; font-weight: 400; font-size: 12px; display: flex; flex-direction:
column; justify-content: start; background-color: #FBFCFE; } .container { margin: auto;
text-align: center; padding-top: 24px; width: 448px; } .card { padding: 24px;
background-color: white; border: 1px solid #DBDFE7; border-radius: 8px; box-shadow: 0px 4px
16px 0px #634DFF0F; margin-bottom: 16px; } .n8n-link a { color: #7E8186; font-weight: 600;
font-size: 12px; text-decoration: none; } .n8n-link svg { display: inline-block;
vertical-align: middle; } .header h1 { color: #525356; font-size: 20px; font-weight: 400;
padding-bottom: 8px; } .header p { color: #7E8186; font-size: 14px; font-weight: 400; }
</style>
</head>
<body>
<div class='container'>
<section>
<div class='card'>
<div class='header'>
<h1>Problem loading form</h1>
<p>{{message}}</p>
</div>
</div>
<div class='n8n-link'>
<a
href='https://n8n.io/?utm_source=n8n-internal&amp;utm_medium=form-trigger&amp'
target='_blank'
>
Form automated with
<svg
width='73'
height='20'
viewBox='0 0 73 20'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
fill-rule='evenodd'
clip-rule='evenodd'
d='M40.2373 4C40.2373 6.20915 38.4464 8 36.2373 8C34.3735 8 32.8074 6.72525 32.3633 5H26.7787C25.801 5 24.9666 5.70685 24.8059 6.6712L24.6415 7.6576C24.4854 8.59415 24.0116 9.40925 23.3417 10C24.0116 10.5907 24.4854 11.4058 24.6415 12.3424L24.8059 13.3288C24.9666 14.2931 25.801 15 26.7787 15H28.3633C28.8074 13.2747 30.3735 12 32.2373 12C34.4464 12 36.2373 13.7908 36.2373 16C36.2373 18.2092 34.4464 20 32.2373 20C30.3735 20 28.8074 18.7253 28.3633 17H26.7787C24.8233 17 23.1546 15.5864 22.8331 13.6576L22.6687 12.6712C22.508 11.7069 21.6736 11 20.6959 11H19.0645C18.5652 12.64 17.0406 13.8334 15.2373 13.8334C13.434 13.8334 11.9094 12.64 11.4101 11H9.06449C8.56519 12.64 7.04059 13.8334 5.2373 13.8334C3.02817 13.8334 1.2373 12.0424 1.2373 9.83335C1.2373 7.6242 3.02817 5.83335 5.2373 5.83335C7.16069 5.83335 8.76699 7.19085 9.15039 9H11.3242C11.7076 7.19085 13.3139 5.83335 15.2373 5.83335C17.1607 5.83335 18.767 7.19085 19.1504 9H20.6959C21.6736 9 22.508 8.29315 22.6687 7.3288L22.8331 6.3424C23.1546 4.41365 24.8233 3 26.7787 3H32.3633C32.8074 1.27478 34.3735 0 36.2373 0C38.4464 0 40.2373 1.79086 40.2373 4ZM38.2373 4C38.2373 5.10455 37.3419 6 36.2373 6C35.1327 6 34.2373 5.10455 34.2373 4C34.2373 2.89543 35.1327 2 36.2373 2C37.3419 2 38.2373 2.89543 38.2373 4ZM5.2373 11.8334C6.34189 11.8334 7.23729 10.9379 7.23729 9.83335C7.23729 8.72875 6.34189 7.83335 5.2373 7.83335C4.13273 7.83335 3.2373 8.72875 3.2373 9.83335C3.2373 10.9379 4.13273 11.8334 5.2373 11.8334ZM15.2373 11.8334C16.3419 11.8334 17.2373 10.9379 17.2373 9.83335C17.2373 8.72875 16.3419 7.83335 15.2373 7.83335C14.1327 7.83335 13.2373 8.72875 13.2373 9.83335C13.2373 10.9379 14.1327 11.8334 15.2373 11.8334ZM32.2373 18C33.3419 18 34.2373 17.1045 34.2373 16C34.2373 14.8954 33.3419 14 32.2373 14C31.1327 14 30.2373 14.8954 30.2373 16C30.2373 17.1045 31.1327 18 32.2373 18Z'
fill='#EA4B71'
></path>
<path
d='M44.2393 15.0007H46.3277V10.5791C46.3277 9.12704 47.2088 8.49074 48.204 8.49074C49.183 8.49074 49.9498 9.14334 49.9498 10.4812V15.0007H52.038V10.057C52.038 7.91969 50.798 6.67969 48.8567 6.67969C47.633 6.67969 46.9477 7.16914 46.4582 7.80544H46.3277L46.1482 6.84284H44.2393V15.0007Z'
fill='#101330'
></path>
<path
d='M60.0318 9.50205V9.40415C60.7498 9.0452 61.4678 8.4252 61.4678 7.20155C61.4678 5.43945 60.0153 4.37891 58.0088 4.37891C55.9528 4.37891 54.4843 5.5047 54.4843 7.23415C54.4843 8.4089 55.1698 9.0452 55.9203 9.40415V9.50205C55.0883 9.79575 54.0928 10.6768 54.0928 12.1452C54.0928 13.9237 55.5613 15.1637 57.9923 15.1637C60.4233 15.1637 61.8428 13.9237 61.8428 12.1452C61.8428 10.6768 60.8638 9.81205 60.0318 9.50205ZM57.9923 5.87995C58.8083 5.87995 59.4118 6.40205 59.4118 7.2831C59.4118 8.16415 58.7918 8.6863 57.9923 8.6863C57.1928 8.6863 56.5238 8.16415 56.5238 7.2831C56.5238 6.38575 57.1603 5.87995 57.9923 5.87995ZM57.9923 13.5974C57.0458 13.5974 56.2793 12.9937 56.2793 11.9658C56.2793 11.0358 56.9153 10.3342 57.9758 10.3342C59.0203 10.3342 59.6568 11.0195 59.6568 11.9984C59.6568 12.9937 58.9223 13.5974 57.9923 13.5974Z'
fill='#101330'
></path>
<path
d='M63.9639 15.0007H66.0524V10.5791C66.0524 9.12704 66.9334 8.49074 67.9289 8.49074C68.9079 8.49074 69.6744 9.14334 69.6744 10.4812V15.0007H71.7629V10.057C71.7629 7.91969 70.5229 6.67969 68.5814 6.67969C67.3579 6.67969 66.6724 7.16914 66.1829 7.80544H66.0524L65.8729 6.84284H63.9639V15.0007Z'
fill='#101330'
></path>
</svg>
</a>
</div>
</section>
</div>
</body>
</html>

2
packages/core/package.json
View file

@ -1,6 +1,6 @@
{
"name": "n8n-core",
"version": "1.67.0",
"version": "1.68.0",
"description": "Core functionality of n8n",
"main": "dist/index",
"types": "dist/index.d.ts",

9
packages/core/src/NodeExecuteFunctions.ts
View file

@ -921,6 +921,10 @@ function convertN8nRequestToAxios(n8nRequest: IHttpRequestOptions): AxiosRequest
axiosRequest.params = n8nRequest.qs;
if (n8nRequest.abortSignal) {
axiosRequest.signal = n8nRequest.abortSignal;
}
if (n8nRequest.baseURL !== undefined) {
axiosRequest.baseURL = n8nRequest.baseURL;
}
@ -1721,6 +1725,11 @@ export async function httpRequestWithAuthentication(
) {
removeEmptyBody(requestOptions);
// Cancel this request on execution cancellation
if ('getExecutionCancelSignal' in this) {
requestOptions.abortSignal = this.getExecutionCancelSignal();
}
let credentialsDecrypted: ICredentialDataDecryptedObject | undefined;
try {
const parentTypes = additionalData.credentialsHelper.getParentTypes(credentialsType);

2
packages/core/src/WorkflowExecute.ts
View file

@ -1246,7 +1246,7 @@ export class WorkflowExecute {
: [];
while (items.length) {
const item = items.pop();
const item = items.shift();
if (item === undefined) {
continue;
}

6
packages/core/test/WorkflowExecute.test.ts
View file

@ -188,7 +188,11 @@ describe('WorkflowExecute', () => {
if (nodeData.data === undefined) {
return null;
}
return nodeData.data.main[0];
return nodeData.data.main[0]!.map((entry) => {
// remove pairedItem from entry if it is an error output test
if (testData.description.includes('error_outputs')) delete entry.pairedItem;
return entry;
});
});
expect(resultData).toEqual(testData.output.nodeData[nodeName]);

331
packages/core/test/workflows/error_outputs.json
View file

@ -1,13 +1,13 @@
{
"name": "Error Output - Test Workflow",
"name": "My workflow 105",
"nodes": [
{
"parameters": {},
"id": "c41b46f0-3e76-4655-b5ea-4d15af58c138",
"id": "a94bc1fb-1f39-404b-b149-a76c4fbaed25",
"name": "When clicking \"Execute Workflow\"",
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [-680, 460]
"position": [-60, 780]
},
{
"parameters": {
@ -21,11 +21,11 @@
},
"options": {}
},
"id": "247f4118-d80f-49ab-8d9a-0cdbbb9271df",
"id": "6ba26bdf-91e2-4f18-8f4c-09e98aa4a9df",
"name": "Success",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [200, 860]
"position": [820, 1180]
},
{
"parameters": {
@ -39,21 +39,21 @@
},
"options": {}
},
"id": "311e3650-d89c-405a-9c8d-c238f48a8a5a",
"id": "e3d1eadf-0994-4806-97ce-c5c5f673c624",
"name": "Error",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [200, 1040]
"position": [820, 1360]
},
{
"parameters": {
"jsCode": "return [\n {\n \"id\": \"23423532\",\n \"name\": \"Jay Gatsby\",\n \"email\": \"gatsby@west-egg.com\",\n \"notes\": \"Keeps asking about a green light??\",\n \"country\": \"US\",\n \"created\": \"1925-04-10\"\n },\n {\n \"id\": \"23423533\",\n \"name\": \"José Arcadio Buendía\",\n \"email\": \"jab@macondo.co\",\n \"notes\": \"Lots of people named after him. Very confusing\",\n \"country\": \"CO\",\n \"created\": \"1967-05-05\"\n },\n {\n \"id\": \"23423534\",\n \"name\": \"Max Sendak\",\n \"email\": \"info@in-and-out-of-weeks.org\",\n \"notes\": \"Keeps rolling his terrible eyes\",\n \"country\": \"US\",\n \"created\": \"1963-04-09\"\n },\n {\n \"id\": \"23423535\",\n \"name\": \"Zaphod Beeblebrox\",\n \"email\": \"captain@heartofgold.com\",\n \"notes\": \"Felt like I was talking to more than one person\",\n \"country\": null,\n \"created\": \"1979-10-12\"\n },\n {\n \"id\": \"23423536\",\n \"name\": \"Edmund Pevensie\",\n \"email\": \"edmund@narnia.gov\",\n \"notes\": \"Passionate sailor\",\n \"country\": \"UK\",\n \"created\": \"1950-10-16\"\n }\n]"
},
"id": "179d4fe7-1ae7-4957-a77d-12c3ca6d141b",
"id": "01adfc2d-141d-4843-b2d6-04115a476bc1",
"name": "Mock Data",
"type": "n8n-nodes-base.code",
"typeVersion": 2,
"position": [-460, 460]
"position": [160, 780]
},
{
"parameters": {
@ -61,11 +61,11 @@
"height": 414,
"width": 564
},
"id": "1ec2a8b6-54e2-4319-90b3-30b387855b36",
"id": "8ca689eb-7910-43ad-bd10-fae35a8fc203",
"name": "Sticky Note",
"type": "n8n-nodes-base.stickyNote",
"typeVersion": 1,
"position": [-160, 780]
"position": [460, 1100]
},
{
"parameters": {
@ -73,11 +73,11 @@
"height": 279,
"width": 564
},
"id": "49a2b7d9-8bd1-4cdf-9649-2d93668b0f8f",
"id": "a17460d6-b0c0-432d-ac6f-8ff684357c8d",
"name": "Sticky Note1",
"type": "n8n-nodes-base.stickyNote",
"typeVersion": 1,
"position": [-160, 140]
"position": [460, 460]
},
{
"parameters": {
@ -91,22 +91,22 @@
},
"options": {}
},
"id": "9852f1d9-95b4-4ef7-bb18-8f0bab81a0bc",
"id": "46df5463-4289-4e61-9f80-87e035931bda",
"name": "Combined",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [180, 240]
"position": [800, 560]
},
{
"parameters": {
"mode": "runOnceForEachItem",
"jsCode": "// Add a new field called 'myNewField' to the JSON of the item\n$input.item.json.myNewField = 1;\n\nif ($input.item.json.country === 'US') {\n throw new Error('This is an error');\n}\n\nreturn $input.item;"
},
"id": "40d4dba3-3db7-4eb5-aa27-e76f955a5e09",
"id": "a4708520-aaca-4618-b7a2-94da268fba37",
"name": "Throw Error",
"type": "n8n-nodes-base.code",
"typeVersion": 2,
"position": [-140, 960],
"position": [480, 1280],
"errorOutput": true,
"onError": "continueErrorOutput"
},
@ -116,22 +116,22 @@
"height": 279,
"width": 564
},
"id": "8eb3dd54-c1dd-4167-abfa-c06d044c63f3",
"id": "f0a450cd-4124-490d-964f-a71b645f770c",
"name": "Sticky Note2",
"type": "n8n-nodes-base.stickyNote",
"typeVersion": 1,
"position": [-160, 460]
"position": [460, 780]
},
{
"parameters": {
"mode": "runOnceForEachItem",
"jsCode": "// Add a new field called 'myNewField' to the JSON of the item\n$input.item.json.myNewField = 1;\n\nif ($input.item.json.country === 'US') {\n throw new Error('This is an error');\n}\n\nreturn $input.item;"
},
"id": "19a3d6ac-e610-4296-9b7a-9ed19d242bdb",
"id": "823f12e6-cbfc-4545-8505-fab158d1effe",
"name": "Throw Error2",
"type": "n8n-nodes-base.code",
"typeVersion": 2,
"position": [-120, 560],
"position": [500, 880],
"onError": "continueRegularOutput"
},
{
@ -146,22 +146,22 @@
},
"options": {}
},
"id": "5f803fdc-7d88-4c12-8886-6092cfbc03c6",
"id": "8f88d130-9a13-4236-81c0-157f8a8990c0",
"name": "Combined1",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [180, 560]
"position": [800, 880]
},
{
"parameters": {
"mode": "runOnceForEachItem",
"jsCode": "// Add a new field called 'myNewField' to the JSON of the item\n$input.item.json.myNewField = 1;\n\nif ($input.item.json.country === 'US') {\n throw new Error('This is an error');\n}\n\nreturn $input.item;"
},
"id": "c2696c1f-1abd-4549-9ad9-e62017dc14b8",
"id": "1a3f4beb-0d1e-44fe-a411-5bd1096ffd74",
"name": "Throw Error1",
"type": "n8n-nodes-base.code",
"typeVersion": 2,
"position": [-120, 240],
"position": [500, 560],
"continueOnFail": true
},
{
@ -176,11 +176,11 @@
},
"options": {}
},
"id": "01740d7e-e572-408a-9fae-729068803113",
"id": "c617a3d7-15e3-49b4-a7dd-d45c5e059a22",
"name": "Success1",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [200, 1320]
"position": [820, 1640]
},
{
"parameters": {
@ -188,22 +188,22 @@
"height": 509.71047006830065,
"width": 1183.725293692246
},
"id": "ed409181-4847-4d65-af45-f45078a6343e",
"id": "046de2cf-970a-4925-b87d-16e8cca511fd",
"name": "Sticky Note3",
"type": "n8n-nodes-base.stickyNote",
"typeVersion": 1,
"position": [-160, 1240]
"position": [460, 1560]
},
{
"parameters": {
"mode": "runOnceForEachItem",
"jsCode": "// Add a new field called 'myNewField' to the JSON of the item\n$input.item.json.myNewField = 1;\n\nif ($input.item.json.country === 'US') {\n throw new Error('This is an error');\n}\n\nreturn $input.item;"
},
"id": "93d03f38-b928-4b4b-832a-3f1a5deebb2d",
"id": "9ec21de1-dfca-4fff-b5a7-a56364239d7b",
"name": "Throw Error3",
"type": "n8n-nodes-base.code",
"typeVersion": 2,
"position": [-140, 1420],
"position": [480, 1740],
"errorOutput": true,
"onError": "continueErrorOutput"
},
@ -211,11 +211,11 @@
"parameters": {
"options": {}
},
"id": "c92a6ce5-41ea-4fb9-a07b-c4e98f905b12",
"id": "e3605953-75cf-4036-99f7-05e3971a6a75",
"name": "Edit Fields",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [420, 1500],
"position": [1040, 1820],
"onError": "continueErrorOutput"
},
{
@ -230,11 +230,11 @@
},
"options": {}
},
"id": "ab838cc1-0987-4b41-bdc5-fe17f38e0691",
"id": "a71cfb77-adfd-4c77-9a8e-7e58cbd0931b",
"name": "Success2",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [700, 1360]
"position": [1320, 1680]
},
{
"parameters": {
@ -248,11 +248,11 @@
},
"options": {}
},
"id": "22e04172-19b9-4735-9dd0-a3e2fa3bf000",
"id": "ea9d02e9-1716-4f69-a14a-9133f5184886",
"name": "Error2",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [700, 1580]
"position": [1320, 1900]
},
{
"parameters": {
@ -266,101 +266,19 @@
},
"options": {}
},
"id": "69e7257a-1ba8-46ba-9394-d38d65b2e567",
"id": "17780679-f7a3-4b1b-b6ee-f3f61e0843ad",
"name": "Error1",
"type": "n8n-nodes-base.set",
"typeVersion": 3.2,
"position": [200, 1500]
"position": [820, 1820]
}
],
"pinData": {
"Error": [
{
"json": {
"id": "23423534",
"name": "Max Sendak",
"email": "info@in-and-out-of-weeks.org",
"notes": "Keeps rolling his terrible eyes",
"country": "US",
"created": "1963-04-09",
"error": "This is an error [line 5, for item 2]",
"originalName": "Max Sendak"
},
"pairedItem": {
"item": 0
}
},
{
"json": {
"id": "23423532",
"name": "Jay Gatsby",
"email": "gatsby@west-egg.com",
"notes": "Keeps asking about a green light??",
"country": "US",
"created": "1925-04-10",
"error": "This is an error [line 5, for item 0]",
"originalName": "Jay Gatsby"
},
"pairedItem": {
"item": 1
}
}
],
"Success": [
{
"json": {
"id": "23423536",
"name": "Edmund Pevensie",
"email": "edmund@narnia.gov",
"notes": "Passionate sailor",
"country": "UK",
"created": "1950-10-16",
"myNewField": 1,
"originalName": "Edmund Pevensie"
},
"pairedItem": {
"item": 0
}
},
{
"json": {
"id": "23423535",
"name": "Zaphod Beeblebrox",
"email": "captain@heartofgold.com",
"notes": "Felt like I was talking to more than one person",
"country": null,
"created": "1979-10-12",
"myNewField": 1,
"originalName": "Zaphod Beeblebrox"
},
"pairedItem": {
"item": 1
}
},
{
"json": {
"id": "23423533",
"name": "José Arcadio Buendía",
"email": "jab@macondo.co",
"notes": "Lots of people named after him. Very confusing",
"country": "CO",
"created": "1967-05-05",
"myNewField": 1,
"originalName": "José Arcadio Buendía"
},
"pairedItem": {
"item": 2
}
}
],
"Combined": [
{
"json": {
"error": "This is an error [line 5, for item 0]",
"originalName": "Jay Gatsby"
},
"pairedItem": {
"item": 0
}
},
{
@ -373,18 +291,12 @@
"created": "1967-05-05",
"myNewField": 1,
"originalName": "José Arcadio Buendía"
},
"pairedItem": {
"item": 1
}
},
{
"json": {
"error": "This is an error [line 5, for item 2]",
"originalName": "Max Sendak"
},
"pairedItem": {
"item": 2
}
},
{
@ -397,9 +309,6 @@
"created": "1979-10-12",
"myNewField": 1,
"originalName": "Zaphod Beeblebrox"
},
"pairedItem": {
"item": 3
}
},
{
@ -412,9 +321,6 @@
"created": "1950-10-16",
"myNewField": 1,
"originalName": "Edmund Pevensie"
},
"pairedItem": {
"item": 4
}
}
],
@ -423,9 +329,6 @@
"json": {
"error": "This is an error [line 5, for item 0]",
"originalName": "Jay Gatsby"
},
"pairedItem": {
"item": 0
}
},
{
@ -438,18 +341,12 @@
"created": "1967-05-05",
"myNewField": 1,
"originalName": "José Arcadio Buendía"
},
"pairedItem": {
"item": 1
}
},
{
"json": {
"error": "This is an error [line 5, for item 2]",
"originalName": "Max Sendak"
},
"pairedItem": {
"item": 2
}
},
{
@ -462,9 +359,6 @@
"created": "1979-10-12",
"myNewField": 1,
"originalName": "Zaphod Beeblebrox"
},
"pairedItem": {
"item": 3
}
},
{
@ -477,26 +371,20 @@
"created": "1950-10-16",
"myNewField": 1,
"originalName": "Edmund Pevensie"
},
"pairedItem": {
"item": 4
}
}
],
"Success1": [
{
"json": {
"id": "23423536",
"name": "Edmund Pevensie",
"email": "edmund@narnia.gov",
"notes": "Passionate sailor",
"country": "UK",
"created": "1950-10-16",
"id": "23423533",
"name": "José Arcadio Buendía",
"email": "jab@macondo.co",
"notes": "Lots of people named after him. Very confusing",
"country": "CO",
"created": "1967-05-05",
"myNewField": 1,
"originalName": "Edmund Pevensie"
},
"pairedItem": {
"item": 0
"originalName": "José Arcadio Buendía"
}
},
{
@ -509,43 +397,22 @@
"created": "1979-10-12",
"myNewField": 1,
"originalName": "Zaphod Beeblebrox"
},
"pairedItem": {
"item": 1
}
},
{
"json": {
"id": "23423533",
"name": "José Arcadio Buendía",
"email": "jab@macondo.co",
"notes": "Lots of people named after him. Very confusing",
"country": "CO",
"created": "1967-05-05",
"id": "23423536",
"name": "Edmund Pevensie",
"email": "edmund@narnia.gov",
"notes": "Passionate sailor",
"country": "UK",
"created": "1950-10-16",
"myNewField": 1,
"originalName": "José Arcadio Buendía"
},
"pairedItem": {
"item": 2
"originalName": "Edmund Pevensie"
}
}
],
"Error1": [
{
"json": {
"id": "23423534",
"name": "Max Sendak",
"email": "info@in-and-out-of-weeks.org",
"notes": "Keeps rolling his terrible eyes",
"country": "US",
"created": "1963-04-09",
"error": "This is an error [line 5, for item 2]",
"originalName": "Max Sendak"
},
"pairedItem": {
"item": 0
}
},
{
"json": {
"id": "23423532",
@ -556,9 +423,18 @@
"created": "1925-04-10",
"error": "This is an error [line 5, for item 0]",
"originalName": "Jay Gatsby"
},
"pairedItem": {
"item": 1
}
},
{
"json": {
"id": "23423534",
"name": "Max Sendak",
"email": "info@in-and-out-of-weeks.org",
"notes": "Keeps rolling his terrible eyes",
"country": "US",
"created": "1963-04-09",
"error": "This is an error [line 5, for item 2]",
"originalName": "Max Sendak"
}
}
],
@ -573,9 +449,6 @@
"created": "1925-04-10",
"error": "This is an error [line 5, for item 0]",
"originalName": "Jay Gatsby"
},
"pairedItem": {
"item": 0
}
},
{
@ -588,9 +461,70 @@
"created": "1963-04-09",
"error": "This is an error [line 5, for item 2]",
"originalName": "Max Sendak"
},
"pairedItem": {
"item": 1
}
}
],
"Error": [
{
"json": {
"id": "23423532",
"name": "Jay Gatsby",
"email": "gatsby@west-egg.com",
"notes": "Keeps asking about a green light??",
"country": "US",
"created": "1925-04-10",
"error": "This is an error [line 5, for item 0]",
"originalName": "Jay Gatsby"
}
},
{
"json": {
"id": "23423534",
"name": "Max Sendak",
"email": "info@in-and-out-of-weeks.org",
"notes": "Keeps rolling his terrible eyes",
"country": "US",
"created": "1963-04-09",
"error": "This is an error [line 5, for item 2]",
"originalName": "Max Sendak"
}
}
],
"Success": [
{
"json": {
"id": "23423533",
"name": "José Arcadio Buendía",
"email": "jab@macondo.co",
"notes": "Lots of people named after him. Very confusing",
"country": "CO",
"created": "1967-05-05",
"myNewField": 1,
"originalName": "José Arcadio Buendía"
}
},
{
"json": {
"id": "23423535",
"name": "Zaphod Beeblebrox",
"email": "captain@heartofgold.com",
"notes": "Felt like I was talking to more than one person",
"country": null,
"created": "1979-10-12",
"myNewField": 1,
"originalName": "Zaphod Beeblebrox"
}
},
{
"json": {
"id": "23423536",
"name": "Edmund Pevensie",
"email": "edmund@narnia.gov",
"notes": "Passionate sailor",
"country": "UK",
"created": "1950-10-16",
"myNewField": 1,
"originalName": "Edmund Pevensie"
}
}
]
@ -725,10 +659,11 @@
"settings": {
"executionOrder": "v1"
},
"versionId": "e73e1eda-293c-4ee2-87b9-923873241774",
"id": "UgoluWRMeg7fPLCB",
"versionId": "94aaa2ce-558a-4fed-948a-09860174272a",
"meta": {
"instanceId": "021d3c82ba2d3bc090cbf4fc81c9312668bcc34297e022bb3438c5c88a43a5ff"
"templateCredsSetupCompleted": true,
"instanceId": "27cc9b56542ad45b38725555722c50a1c3fee1670bbb67980558314ee08517c4"
},
"id": "FJvJXVvjM5rw3sUM",
"tags": []
}

2
packages/design-system/package.json
View file

@ -1,6 +1,6 @@
{
"name": "n8n-design-system",
"version": "1.57.0",
"version": "1.58.0",
"main": "src/main.ts",
"import": "src/main.ts",
"scripts": {

3
packages/editor-ui/package.json
View file

@ -1,6 +1,6 @@
{
"name": "n8n-editor-ui",
"version": "1.67.0",
"version": "1.68.0",
"description": "Workflow Editor UI for n8n",
"main": "index.js",
"scripts": {
@ -74,6 +74,7 @@
"vue": "catalog:frontend",
"vue-agile": "^2.0.0",
"vue-chartjs": "^5.2.0",
"vue-github-button": "^3.1.3",
"vue-i18n": "^9.2.2",
"vue-json-pretty": "2.2.4",
"vue-markdown-render": "catalog:frontend",

63
packages/editor-ui/src/App.vue
View file

@ -33,15 +33,11 @@ const loading = ref(true);
const defaultLocale = computed(() => rootStore.defaultLocale);
const isDemoMode = computed(() => route.name === VIEWS.DEMO);
const showAssistantButton = computed(() => assistantStore.canShowAssistantButtonsOnCanvas);
const hasContentFooter = ref(false);
const appGrid = ref<Element | null>(null);
const assistantSidebarWidth = computed(() => assistantStore.chatWidth);
watch(defaultLocale, (newLocale) => {
void loadLanguage(newLocale);
});
onMounted(async () => {
setAppZIndexes();
logHiringBanner();
@ -54,11 +50,6 @@ onBeforeUnmount(() => {
window.removeEventListener('resize', updateGridWidth);
});
// As assistant sidebar width changes, recalculate the total width regularly
watch(assistantSidebarWidth, async () => {
await updateGridWidth();
});
const logHiringBanner = () => {
if (settingsStore.isHiringBannerEnabled && !isDemoMode.value) {
console.log(HIRING_BANNER);
@ -71,6 +62,21 @@ const updateGridWidth = async () => {
uiStore.appGridWidth = appGrid.value.clientWidth;
}
};
// As assistant sidebar width changes, recalculate the total width regularly
watch(assistantSidebarWidth, async () => {
await updateGridWidth();
});
watch(route, (r) => {
hasContentFooter.value = r.matched.some(
(matchedRoute) => matchedRoute.components?.footer !== undefined,
);
});
watch(defaultLocale, (newLocale) => {
void loadLanguage(newLocale);
});
</script>
<template>
@ -94,12 +100,17 @@ const updateGridWidth = async () => {
<router-view name="sidebar"></router-view>
</div>
<div id="content" :class="$style.content">
<router-view v-slot="{ Component }">
<keep-alive v-if="$route.meta.keepWorkflowAlive" include="NodeViewSwitcher" :max="1">
<component :is="Component" />
</keep-alive>
<component :is="Component" v-else />
</router-view>
<div :class="$style.contentWrapper">
<router-view v-slot="{ Component }">
<keep-alive v-if="$route.meta.keepWorkflowAlive" include="NodeViewSwitcher" :max="1">
<component :is="Component" />
</keep-alive>
<component :is="Component" v-else />
</router-view>
</div>
<div v-if="hasContentFooter" :class="$style.contentFooter">
<router-view name="footer" />
</div>
</div>
<div :id="APP_MODALS_ELEMENT_ID" :class="$style.modals">
<Modals />
@ -138,8 +149,26 @@ const updateGridWidth = async () => {
grid-area: banners;
z-index: var(--z-index-top-banners);
}
.content {
display: flex;
flex-direction: column;
align-items: center;
overflow: auto;
grid-area: content;
}
.contentFooter {
height: auto;
z-index: 10;
width: 100%;
display: none;
// Only show footer if there's content
&:has(*) {
display: block;
}
}
.contentWrapper {
display: flex;
grid-area: content;
position: relative;

3
packages/editor-ui/src/__tests__/mocks.ts
View file

@ -54,6 +54,7 @@ export const mockNodeTypeDescription = ({
credentials = [],
inputs = [NodeConnectionType.Main],
outputs = [NodeConnectionType.Main],
codex = {},
properties = [],
}: {
name?: INodeTypeDescription['name'];
@ -61,6 +62,7 @@ export const mockNodeTypeDescription = ({
credentials?: INodeTypeDescription['credentials'];
inputs?: INodeTypeDescription['inputs'];
outputs?: INodeTypeDescription['outputs'];
codex?: INodeTypeDescription['codex'];
properties?: INodeTypeDescription['properties'];
} = {}) =>
mock<INodeTypeDescription>({
@ -77,6 +79,7 @@ export const mockNodeTypeDescription = ({
group: EXECUTABLE_TRIGGER_NODE_TYPES.includes(name) ? ['trigger'] : [],
inputs,
outputs,
codex,
credentials,
documentationUrl: 'https://docs',
webhooks: undefined,

5
packages/editor-ui/src/components/AskAssistant/AskAssistantFloatingButton.vue
View file

@ -2,6 +2,7 @@
import { useI18n } from '@/composables/useI18n';
import { useStyles } from '@/composables/useStyles';
import { useAssistantStore } from '@/stores/assistant.store';
import { useCanvasStore } from '@/stores/canvas.store';
import AssistantAvatar from 'n8n-design-system/components/AskAssistantAvatar/AssistantAvatar.vue';
import AskAssistantButton from 'n8n-design-system/components/AskAssistantButton/AskAssistantButton.vue';
import { computed } from 'vue';
@ -9,6 +10,7 @@ import { computed } from 'vue';
const assistantStore = useAssistantStore();
const i18n = useI18n();
const { APP_Z_INDEXES } = useStyles();
const canvasStore = useCanvasStore();
const lastUnread = computed(() => {
const msg = assistantStore.lastUnread;
@ -39,6 +41,7 @@ const onClick = () => {
v-if="assistantStore.canShowAssistantButtonsOnCanvas && !assistantStore.isAssistantOpen"
:class="$style.container"
data-test-id="ask-assistant-floating-button"
:style="{ '--canvas-panel-height-offset': `${canvasStore.panelHeight}px` }"
>
<n8n-tooltip
:z-index="APP_Z_INDEXES.ASK_ASSISTANT_FLOATING_BUTTON_TOOLTIP"
@ -61,7 +64,7 @@ const onClick = () => {
<style lang="scss" module>
.container {
position: absolute;
bottom: var(--spacing-s);
bottom: calc(var(--canvas-panel-height-offset, 0px) + var(--spacing-s));
right: var(--spacing-s);
z-index: var(--z-index-ask-assistant-floating-button);
}

586
packages/editor-ui/src/components/CanvasChat/CanvasChat.test.ts Normal file
View file

@ -0,0 +1,586 @@
import { setActivePinia } from 'pinia';
import { createTestingPinia } from '@pinia/testing';
import { waitFor } from '@testing-library/vue';
import { userEvent } from '@testing-library/user-event';
import { createRouter, createWebHistory } from 'vue-router';
import { computed, ref } from 'vue';
import { NodeConnectionType } from 'n8n-workflow';
import CanvasChat from './CanvasChat.vue';
import { createComponentRenderer } from '@/__tests__/render';
import { createTestWorkflowObject } from '@/__tests__/mocks';
import { mockedStore } from '@/__tests__/utils';
import { STORES } from '@/constants';
import { ChatOptionsSymbol, ChatSymbol } from '@n8n/chat/constants';
import { chatEventBus } from '@n8n/chat/event-buses';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useUIStore } from '@/stores/ui.store';
import { useCanvasStore } from '@/stores/canvas.store';
import * as useChatMessaging from './composables/useChatMessaging';
import * as useChatTrigger from './composables/useChatTrigger';
import { useToast } from '@/composables/useToast';
import type { IExecutionResponse, INodeUi } from '@/Interface';
import type { ChatMessage } from '@n8n/chat/types';
vi.mock('@/composables/useToast', () => {
const showMessage = vi.fn();
const showError = vi.fn();
return {
useToast: () => {
return {
showMessage,
showError,
clearAllStickyNotifications: vi.fn(),
};
},
};
});
// Test data
const mockNodes: INodeUi[] = [
{
parameters: {
options: {
allowFileUploads: true,
},
},
id: 'chat-trigger-id',
name: 'When chat message received',
type: '@n8n/n8n-nodes-langchain.chatTrigger',
typeVersion: 1.1,
position: [740, 860],
webhookId: 'webhook-id',
},
{
parameters: {},
id: 'agent-id',
name: 'AI Agent',
type: '@n8n/n8n-nodes-langchain.agent',
typeVersion: 1.7,
position: [960, 860],
},
];
const mockConnections = {
'When chat message received': {
main: [
[
{
node: 'AI Agent',
type: NodeConnectionType.Main,
index: 0,
},
],
],
},
};
const mockWorkflowExecution = {
data: {
resultData: {
runData: {
'AI Agent': [
{
data: {
main: [[{ json: { output: 'AI response message' } }]],
},
},
],
},
lastNodeExecuted: 'AI Agent',
},
},
};
const router = createRouter({
history: createWebHistory(),
routes: [],
});
describe('CanvasChat', () => {
const renderComponent = createComponentRenderer(CanvasChat, {
global: {
provide: {
[ChatSymbol as symbol]: {},
[ChatOptionsSymbol as symbol]: {},
},
plugins: [router],
},
});
let workflowsStore: ReturnType<typeof mockedStore<typeof useWorkflowsStore>>;
let uiStore: ReturnType<typeof mockedStore<typeof useUIStore>>;
let canvasStore: ReturnType<typeof mockedStore<typeof useCanvasStore>>;
beforeEach(() => {
const pinia = createTestingPinia({
initialState: {
[STORES.WORKFLOWS]: {
workflow: {
nodes: mockNodes,
connections: mockConnections,
},
},
[STORES.UI]: {
chatPanelOpen: true,
},
},
});
setActivePinia(pinia);
workflowsStore = mockedStore(useWorkflowsStore);
uiStore = mockedStore(useUIStore);
canvasStore = mockedStore(useCanvasStore);
// Setup default mocks
workflowsStore.getCurrentWorkflow.mockReturnValue(
createTestWorkflowObject({
nodes: mockNodes,
connections: mockConnections,
}),
);
workflowsStore.getNodeByName.mockImplementation(
(name) => mockNodes.find((node) => node.name === name) ?? null,
);
workflowsStore.isChatPanelOpen = true;
workflowsStore.getWorkflowExecution = mockWorkflowExecution as unknown as IExecutionResponse;
workflowsStore.getPastChatMessages = ['Previous message 1', 'Previous message 2'];
});
afterEach(() => {
vi.clearAllMocks();
});
describe('rendering', () => {
it('should render chat when panel is open', () => {
const { getByTestId } = renderComponent();
expect(getByTestId('canvas-chat')).toBeInTheDocument();
});
it('should not render chat when panel is closed', async () => {
workflowsStore.isChatPanelOpen = false;
const { queryByTestId } = renderComponent();
await waitFor(() => {
expect(queryByTestId('canvas-chat')).not.toBeInTheDocument();
});
});
it('should show correct input placeholder', async () => {
const { findByTestId } = renderComponent();
expect(await findByTestId('chat-input')).toBeInTheDocument();
});
});
describe('message handling', () => {
beforeEach(() => {
vi.spyOn(chatEventBus, 'emit');
workflowsStore.runWorkflow.mockResolvedValue({ executionId: 'test-execution-id' });
});
it('should send message and show response', async () => {
const { findByTestId, findByText } = renderComponent();
// Send message
const input = await findByTestId('chat-input');
await userEvent.type(input, 'Hello AI!');
await userEvent.keyboard('{Enter}');
// Verify message and response
expect(await findByText('Hello AI!')).toBeInTheDocument();
await waitFor(async () => {
expect(await findByText('AI response message')).toBeInTheDocument();
});
// Verify workflow execution
expect(workflowsStore.runWorkflow).toHaveBeenCalledWith(
expect.objectContaining({
runData: {
'When chat message received': [
{
data: {
main: [
[
{
json: {
action: 'sendMessage',
chatInput: 'Hello AI!',
sessionId: expect.any(String),
},
},
],
],
},
executionStatus: 'success',
executionTime: 0,
source: [null],
startTime: expect.any(Number),
},
],
},
}),
);
});
it('should show loading state during message processing', async () => {
const { findByTestId, queryByTestId } = renderComponent();
// Send message
const input = await findByTestId('chat-input');
await userEvent.type(input, 'Test message');
await userEvent.keyboard('{Enter}');
// Verify loading states
uiStore.isActionActive = { workflowRunning: true };
await waitFor(() => expect(queryByTestId('chat-message-typing')).toBeInTheDocument());
uiStore.isActionActive = { workflowRunning: false };
await waitFor(() => expect(queryByTestId('chat-message-typing')).not.toBeInTheDocument());
});
it('should handle workflow execution errors', async () => {
workflowsStore.runWorkflow.mockRejectedValueOnce(new Error());
const { findByTestId } = renderComponent();
const input = await findByTestId('chat-input');
await userEvent.type(input, 'Hello AI!');
await userEvent.keyboard('{Enter}');
const toast = useToast();
expect(toast.showError).toHaveBeenCalledWith(new Error(), 'Problem running workflow');
});
});
describe('session management', () => {
const mockMessages: ChatMessage[] = [
{
id: '1',
text: 'Existing message',
sender: 'user',
createdAt: new Date().toISOString(),
},
];
beforeEach(() => {
vi.spyOn(useChatMessaging, 'useChatMessaging').mockReturnValue({
getChatMessages: vi.fn().mockReturnValue(mockMessages),
sendMessage: vi.fn(),
extractResponseMessage: vi.fn(),
previousMessageIndex: ref(0),
waitForExecution: vi.fn(),
});
});
it('should allow copying session ID', async () => {
const clipboardSpy = vi.fn();
document.execCommand = clipboardSpy;
const { getByTestId } = renderComponent();
await userEvent.click(getByTestId('chat-session-id'));
const toast = useToast();
expect(clipboardSpy).toHaveBeenCalledWith('copy');
expect(toast.showMessage).toHaveBeenCalledWith({
message: '',
title: 'Copied to clipboard',
type: 'success',
});
});
it('should refresh session with confirmation when messages exist', async () => {
const { getByTestId, getByRole } = renderComponent();
const originalSessionId = getByTestId('chat-session-id').textContent;
await userEvent.click(getByTestId('refresh-session-button'));
const confirmButton = getByRole('dialog').querySelector('button.btn--confirm');
if (!confirmButton) throw new Error('Confirm button not found');
await userEvent.click(confirmButton);
expect(getByTestId('chat-session-id').textContent).not.toEqual(originalSessionId);
});
});
describe('resize functionality', () => {
it('should handle panel resizing', async () => {
const { container } = renderComponent();
const resizeWrapper = container.querySelector('.resizeWrapper');
if (!resizeWrapper) throw new Error('Resize wrapper not found');
await userEvent.pointer([
{ target: resizeWrapper, coords: { clientX: 0, clientY: 0 } },
{ coords: { clientX: 0, clientY: 100 } },
]);
expect(canvasStore.setPanelHeight).toHaveBeenCalled();
});
it('should persist resize dimensions', () => {
const mockStorage = {
getItem: vi.fn(),
setItem: vi.fn(),
};
Object.defineProperty(window, 'localStorage', { value: mockStorage });
renderComponent();
expect(mockStorage.getItem).toHaveBeenCalledWith('N8N_CANVAS_CHAT_HEIGHT');
expect(mockStorage.getItem).toHaveBeenCalledWith('N8N_CANVAS_CHAT_WIDTH');
});
});
describe('file handling', () => {
beforeEach(() => {
vi.spyOn(useChatMessaging, 'useChatMessaging').mockReturnValue({
getChatMessages: vi.fn().mockReturnValue([]),
sendMessage: vi.fn(),
extractResponseMessage: vi.fn(),
previousMessageIndex: ref(0),
waitForExecution: vi.fn(),
});
workflowsStore.isChatPanelOpen = true;
workflowsStore.allowFileUploads = true;
});
it('should enable file uploads when allowed by chat trigger node', async () => {
const allowFileUploads = ref(true);
const original = useChatTrigger.useChatTrigger;
vi.spyOn(useChatTrigger, 'useChatTrigger').mockImplementation((...args) => ({
...original(...args),
allowFileUploads: computed(() => allowFileUploads.value),
}));
const { getByTestId } = renderComponent();
const chatPanel = getByTestId('canvas-chat');
expect(chatPanel).toBeInTheDocument();
const fileInput = getByTestId('chat-attach-file-button');
expect(fileInput).toBeInTheDocument();
allowFileUploads.value = false;
await waitFor(() => {
expect(fileInput).not.toBeInTheDocument();
});
});
});
describe('message history handling', () => {
it('should properly navigate through message history with wrap-around', async () => {
const messages = ['Message 1', 'Message 2', 'Message 3'];
workflowsStore.getPastChatMessages = messages;
const { findByTestId } = renderComponent();
const input = await findByTestId('chat-input');
// First up should show most recent message
await userEvent.keyboard('{ArrowUp}');
expect(input).toHaveValue('Message 3');
// Second up should show second most recent
await userEvent.keyboard('{ArrowUp}');
expect(input).toHaveValue('Message 2');
// Third up should show oldest message
await userEvent.keyboard('{ArrowUp}');
expect(input).toHaveValue('Message 1');
// Fourth up should wrap around to most recent
await userEvent.keyboard('{ArrowUp}');
expect(input).toHaveValue('Message 3');
// Down arrow should go in reverse
await userEvent.keyboard('{ArrowDown}');
expect(input).toHaveValue('Message 1');
});
it('should reset message history navigation on new input', async () => {
workflowsStore.getPastChatMessages = ['Message 1', 'Message 2'];
const { findByTestId } = renderComponent();
const input = await findByTestId('chat-input');
// Navigate to oldest message
await userEvent.keyboard('{ArrowUp}'); // Most recent
await userEvent.keyboard('{ArrowUp}'); // Oldest
expect(input).toHaveValue('Message 1');
await userEvent.type(input, 'New message');
await userEvent.keyboard('{Enter}');
await userEvent.keyboard('{ArrowUp}');
expect(input).toHaveValue('Message 2');
});
});
describe('message reuse and repost', () => {
const sendMessageSpy = vi.fn();
beforeEach(() => {
const mockMessages: ChatMessage[] = [
{
id: '1',
text: 'Original message',
sender: 'user',
createdAt: new Date().toISOString(),
},
{
id: '2',
text: 'AI response',
sender: 'bot',
createdAt: new Date().toISOString(),
},
];
vi.spyOn(useChatMessaging, 'useChatMessaging').mockReturnValue({
getChatMessages: vi.fn().mockReturnValue(mockMessages),
sendMessage: sendMessageSpy,
extractResponseMessage: vi.fn(),
previousMessageIndex: ref(0),
waitForExecution: vi.fn(),
});
workflowsStore.messages = mockMessages;
});
it('should repost user message with new execution', async () => {
const { findByTestId } = renderComponent();
const repostButton = await findByTestId('repost-message-button');
await userEvent.click(repostButton);
expect(sendMessageSpy).toHaveBeenCalledWith('Original message');
// expect.objectContaining({
// runData: expect.objectContaining({
// 'When chat message received': expect.arrayContaining([
// expect.objectContaining({
// data: expect.objectContaining({
// main: expect.arrayContaining([
// expect.arrayContaining([
// expect.objectContaining({
// json: expect.objectContaining({
// chatInput: 'Original message',
// }),
// }),
// ]),
// ]),
// }),
// }),
// ]),
// }),
// }),
// );
});
it('should show message options only for appropriate messages', async () => {
const { findByText, container } = renderComponent();
await findByText('Original message');
const userMessage = container.querySelector('.chat-message-from-user');
expect(
userMessage?.querySelector('[data-test-id="repost-message-button"]'),
).toBeInTheDocument();
expect(
userMessage?.querySelector('[data-test-id="reuse-message-button"]'),
).toBeInTheDocument();
await findByText('AI response');
const botMessage = container.querySelector('.chat-message-from-bot');
expect(
botMessage?.querySelector('[data-test-id="repost-message-button"]'),
).not.toBeInTheDocument();
expect(
botMessage?.querySelector('[data-test-id="reuse-message-button"]'),
).not.toBeInTheDocument();
});
});
describe('execution handling', () => {
it('should update UI when execution is completed', async () => {
const { findByTestId, queryByTestId } = renderComponent();
// Start execution
const input = await findByTestId('chat-input');
await userEvent.type(input, 'Test message');
await userEvent.keyboard('{Enter}');
// Simulate execution completion
uiStore.isActionActive = { workflowRunning: true };
await waitFor(() => {
expect(queryByTestId('chat-message-typing')).toBeInTheDocument();
});
uiStore.isActionActive = { workflowRunning: false };
workflowsStore.setWorkflowExecutionData(
mockWorkflowExecution as unknown as IExecutionResponse,
);
await waitFor(() => {
expect(queryByTestId('chat-message-typing')).not.toBeInTheDocument();
});
});
});
describe('panel state synchronization', () => {
it('should update canvas height when chat or logs panel state changes', async () => {
renderComponent();
// Toggle logs panel
workflowsStore.isLogsPanelOpen = true;
await waitFor(() => {
expect(canvasStore.setPanelHeight).toHaveBeenCalled();
});
// Close chat panel
workflowsStore.isChatPanelOpen = false;
await waitFor(() => {
expect(canvasStore.setPanelHeight).toHaveBeenCalledWith(0);
});
});
it('should preserve panel state across component remounts', async () => {
const { unmount, rerender } = renderComponent();
// Set initial state
workflowsStore.isChatPanelOpen = true;
workflowsStore.isLogsPanelOpen = true;
// Unmount and remount
unmount();
await rerender({});
expect(workflowsStore.isChatPanelOpen).toBe(true);
expect(workflowsStore.isLogsPanelOpen).toBe(true);
});
});
describe('keyboard shortcuts', () => {
it('should handle Enter key with modifier to start new line', async () => {
const { findByTestId } = renderComponent();
const input = await findByTestId('chat-input');
await userEvent.type(input, 'Line 1');
await userEvent.keyboard('{Shift>}{Enter}{/Shift}');
await userEvent.type(input, 'Line 2');
expect(input).toHaveValue('Line 1\nLine 2');
});
});
describe('chat synchronization', () => {
it('should load initial chat history when first opening panel', async () => {
const getChatMessagesSpy = vi.fn().mockReturnValue(['Previous message']);
vi.spyOn(useChatMessaging, 'useChatMessaging').mockReturnValue({
...vi.fn()(),
getChatMessages: getChatMessagesSpy,
});
workflowsStore.isChatPanelOpen = false;
const { rerender } = renderComponent();
workflowsStore.isChatPanelOpen = true;
await rerender({});
expect(getChatMessagesSpy).toHaveBeenCalled();
});
});
});

351
packages/editor-ui/src/components/CanvasChat/CanvasChat.vue Normal file
View file

@ -0,0 +1,351 @@
<script setup lang="ts">
import type { Ref } from 'vue';
import { provide, watch, computed, ref, watchEffect } from 'vue';
import { ChatOptionsSymbol, ChatSymbol } from '@n8n/chat/constants';
import type { Router } from 'vue-router';
import { useRouter } from 'vue-router';
import { chatEventBus } from '@n8n/chat/event-buses';
import { VIEWS } from '@/constants';
import { v4 as uuid } from 'uuid';
// Components
import ChatMessagesPanel from './components/ChatMessagesPanel.vue';
import ChatLogsPanel from './components/ChatLogsPanel.vue';
// Composables
import { useChatTrigger } from './composables/useChatTrigger';
import { useChatMessaging } from './composables/useChatMessaging';
import { useResize } from './composables/useResize';
import { useI18n } from '@/composables/useI18n';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { useRunWorkflow } from '@/composables/useRunWorkflow';
// Types
import type { Chat, ChatMessage, ChatOptions } from '@n8n/chat/types';
import type { RunWorkflowChatPayload } from './composables/useChatMessaging';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useCanvasStore } from '@/stores/canvas.store';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
const workflowsStore = useWorkflowsStore();
const uiStore = useUIStore();
const canvasStore = useCanvasStore();
const nodeTypesStore = useNodeTypesStore();
const nodeHelpers = useNodeHelpers();
const router = useRouter();
// Component state
const messages = ref<ChatMessage[]>([]);
const currentSessionId = ref<string>(uuid().replace(/-/g, ''));
const isDisabled = ref(false);
const container = ref<HTMLElement>();
// Computed properties
const workflow = computed(() => workflowsStore.getCurrentWorkflow());
const isLoading = computed(() => {
const result = uiStore.isActionActive.workflowRunning;
return result;
});
const allConnections = computed(() => workflowsStore.allConnections);
const isChatOpen = computed(() => {
const result = workflowsStore.isChatPanelOpen;
return result;
});
const canvasNodes = computed(() => workflowsStore.allNodes);
const isLogsOpen = computed(() => workflowsStore.isLogsPanelOpen);
const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
// Expose internal state for testing
defineExpose({
messages,
currentSessionId,
isDisabled,
workflow,
isLoading,
});
const { runWorkflow } = useRunWorkflow({ router });
// Initialize features with injected dependencies
const { chatTriggerNode, connectedNode, allowFileUploads, setChatTriggerNode, setConnectedNode } =
useChatTrigger({
workflow,
canvasNodes,
getNodeByName: workflowsStore.getNodeByName,
getNodeType: nodeTypesStore.getNodeType,
});
const { sendMessage, getChatMessages } = useChatMessaging({
chatTrigger: chatTriggerNode,
connectedNode,
messages,
sessionId: currentSessionId,
workflow,
isLoading,
executionResultData: computed(() => workflowsStore.getWorkflowExecution?.data?.resultData),
getWorkflowResultDataByNodeName: workflowsStore.getWorkflowResultDataByNodeName,
onRunChatWorkflow,
});
const {
height,
chatWidth,
rootStyles,
logsWidth,
onResizeDebounced,
onResizeChatDebounced,
onWindowResize,
} = useResize(container);
// Extracted pure functions for better testability
function createChatConfig(params: {
messages: Chat['messages'];
sendMessage: Chat['sendMessage'];
currentSessionId: Chat['currentSessionId'];
isLoading: Ref<boolean>;
isDisabled: Ref<boolean>;
allowFileUploads: Ref<boolean>;
locale: ReturnType<typeof useI18n>;
}): { chatConfig: Chat; chatOptions: ChatOptions } {
const chatConfig: Chat = {
messages: params.messages,
sendMessage: params.sendMessage,
initialMessages: ref([]),
currentSessionId: params.currentSessionId,
waitingForResponse: params.isLoading,
};
const chatOptions: ChatOptions = {
i18n: {
en: {
title: '',
footer: '',
subtitle: '',
inputPlaceholder: params.locale.baseText('chat.window.chat.placeholder'),
getStarted: '',
closeButtonTooltip: '',
},
},
webhookUrl: '',
mode: 'window',
showWindowCloseButton: true,
disabled: params.isDisabled,
allowFileUploads: params.allowFileUploads,
allowedFilesMimeTypes: '',
};
return { chatConfig, chatOptions };
}
function displayExecution(params: { router: Router; workflowId: string; executionId: string }) {
const route = params.router.resolve({
name: VIEWS.EXECUTION_PREVIEW,
params: { name: params.workflowId, executionId: params.executionId },
});
window.open(route.href, '_blank');
}
function refreshSession(params: { messages: Ref<ChatMessage[]>; currentSessionId: Ref<string> }) {
workflowsStore.setWorkflowExecutionData(null);
nodeHelpers.updateNodesExecutionIssues();
params.messages.value = [];
params.currentSessionId.value = uuid().replace(/-/g, '');
}
// Event handlers
const handleDisplayExecution = (executionId: string) => {
displayExecution({
router,
workflowId: workflow.value.id,
executionId,
});
};
const handleRefreshSession = () => {
refreshSession({
messages,
currentSessionId,
});
};
const closePanel = () => {
workflowsStore.setPanelOpen('chat', false);
};
async function onRunChatWorkflow(payload: RunWorkflowChatPayload) {
const response = await runWorkflow({
triggerNode: payload.triggerNode,
nodeData: payload.nodeData,
source: payload.source,
});
workflowsStore.appendChatMessage(payload.message);
return response;
}
// Initialize chat config
const { chatConfig, chatOptions } = createChatConfig({
messages,
sendMessage,
currentSessionId,
isLoading,
isDisabled,
allowFileUploads,
locale: useI18n(),
});
// Provide chat context
provide(ChatSymbol, chatConfig);
provide(ChatOptionsSymbol, chatOptions);
// Watchers
watch(
() => isChatOpen.value,
(isOpen) => {
if (isOpen) {
setChatTriggerNode();
setConnectedNode();
if (messages.value.length === 0) {
messages.value = getChatMessages();
}
setTimeout(() => {
onWindowResize();
chatEventBus.emit('focusInput');
}, 0);
}
},
{ immediate: true },
);
watch(
() => allConnections.value,
() => {
if (canvasStore.isLoading) return;
setTimeout(() => {
if (!chatTriggerNode.value) {
setChatTriggerNode();
}
setConnectedNode();
}, 0);
},
{ deep: true },
);
watchEffect(() => {
canvasStore.setPanelHeight(isChatOpen.value || isLogsOpen.value ? height.value : 0);
});
</script>
<template>
<n8n-resize-wrapper
v-if="chatTriggerNode"
:is-resizing-enabled="isChatOpen || isLogsOpen"
:supported-directions="['top']"
:class="[$style.resizeWrapper, !isChatOpen && !isLogsOpen && $style.empty]"
:height="height"
:style="rootStyles"
@resize="onResizeDebounced"
>
<div ref="container" :class="$style.container">
<div v-if="isChatOpen || isLogsOpen" :class="$style.chatResizer">
<n8n-resize-wrapper
v-if="isChatOpen"
:supported-directions="['right']"
:width="chatWidth"
:class="$style.chat"
@resize="onResizeChatDebounced"
>
<div :class="$style.inner">
<ChatMessagesPanel
data-test-id="canvas-chat"
:messages="messages"
:session-id="currentSessionId"
:past-chat-messages="previousChatMessages"
@refresh-session="handleRefreshSession"
@display-execution="handleDisplayExecution"
@send-message="sendMessage"
/>
</div>
</n8n-resize-wrapper>
<div v-if="isLogsOpen && connectedNode" :class="$style.logs">
<ChatLogsPanel
:key="messages.length"
:workflow="workflow"
data-test-id="canvas-chat-logs"
:node="connectedNode"
:slim="logsWidth < 700"
@close="closePanel"
/>
</div>
</div>
</div>
</n8n-resize-wrapper>
</template>
<style lang="scss" module>
.resizeWrapper {
height: var(--panel-height);
min-height: 4rem;
max-height: 90vh;
flex-basis: content;
border-top: 1px solid var(--color-foreground-base);
&.empty {
height: auto;
min-height: 0;
flex-basis: 0;
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chatResizer {
display: flex;
width: 100%;
height: 100%;
max-width: 100%;
}
.footer {
border-top: 1px solid var(--color-foreground-base);
width: 100%;
background-color: var(--color-background-light);
display: flex;
padding: var(--spacing-2xs);
gap: var(--spacing-2xs);
}
.chat {
width: var(--chat-width);
flex-shrink: 0;
border-right: 1px solid var(--color-foreground-base);
max-width: 100%;
&:only-child {
width: 100%;
}
}
.inner {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
width: 100%;
}
.logs {
flex-grow: 1;
flex-shrink: 1;
background-color: var(--color-background-light);
}
</style>

91
packages/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue Normal file
View file

@ -0,0 +1,91 @@
<script setup lang="ts">
import type { INode, Workflow } from 'n8n-workflow';
import RunDataAi from '@/components/RunDataAi/RunDataAi.vue';
import { useI18n } from '@/composables/useI18n';
const emit = defineEmits<{
close: [];
}>();
defineProps<{
node: INode | null;
slim?: boolean;
workflow: Workflow;
}>();
const locale = useI18n();
</script>
<template>
<div :class="$style.logsWrapper" data-test-id="lm-chat-logs">
<header :class="$style.logsHeader">
<div class="meta">
{{ locale.baseText('chat.window.logs') }}
<span v-if="node">
{{
locale.baseText('chat.window.logsFromNode', { interpolate: { nodeName: node.name } })
}}
</span>
</div>
<n8n-icon-button
:class="$style.close"
outline
icon="times"
type="secondary"
size="mini"
@click="emit('close')"
/>
</header>
<div :class="$style.logs">
<RunDataAi
v-if="node"
:class="$style.runData"
:node="node"
:workflow="workflow"
:slim="slim"
/>
</div>
</div>
</template>
<style lang="scss" module>
.logsHeader {
font-size: var(--font-size-s);
font-weight: var(--font-weight-bold);
height: 2.6875rem;
line-height: 18px;
text-align: left;
border-bottom: 1px solid var(--color-foreground-base);
padding: var(--spacing-xs);
background-color: var(--color-foreground-xlight);
display: flex;
justify-content: space-between;
align-items: center;
.close {
border: none;
}
span {
font-weight: 100;
}
}
.logsWrapper {
--node-icon-color: var(--color-text-base);
height: 100%;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
}
.logsTitle {
margin: 0 var(--spacing-s) var(--spacing-s);
}
.logs {
padding: var(--spacing-s) 0;
flex-grow: 1;
overflow: auto;
}
</style>

348
packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue Normal file
View file

@ -0,0 +1,348 @@
<script setup lang="ts">
import type { ChatMessage, ChatMessageText } from '@n8n/chat/types';
import { useI18n } from '@/composables/useI18n';
import MessagesList from '@n8n/chat/components/MessagesList.vue';
import MessageOptionTooltip from './MessageOptionTooltip.vue';
import MessageOptionAction from './MessageOptionAction.vue';
import { chatEventBus } from '@n8n/chat/event-buses';
import type { ArrowKeyDownPayload } from '@n8n/chat/components/Input.vue';
import ChatInput from '@n8n/chat/components/Input.vue';
import { useMessage } from '@/composables/useMessage';
import { MODAL_CONFIRM } from '@/constants';
import { computed, ref } from 'vue';
import { useClipboard } from '@/composables/useClipboard';
import { useToast } from '@/composables/useToast';
interface Props {
pastChatMessages: string[];
messages: ChatMessage[];
sessionId: string;
}
const props = defineProps<Props>();
const emit = defineEmits<{
displayExecution: [id: string];
sendMessage: [message: string];
refreshSession: [];
}>();
const messageComposable = useMessage();
const clipboard = useClipboard();
const locale = useI18n();
const toast = useToast();
const previousMessageIndex = ref(0);
const inputPlaceholder = computed(() => {
if (props.messages.length > 0) {
return locale.baseText('chat.window.chat.placeholder');
}
return locale.baseText('chat.window.chat.placeholderPristine');
});
/** Checks if message is a text message */
function isTextMessage(message: ChatMessage): message is ChatMessageText {
return message.type === 'text' || !message.type;
}
/** Reposts the message */
function repostMessage(message: ChatMessageText) {
void sendMessage(message.text);
}
/** Sets the message in input for reuse */
function reuseMessage(message: ChatMessageText) {
chatEventBus.emit('setInputValue', message.text);
}
function sendMessage(message: string) {
previousMessageIndex.value = 0;
emit('sendMessage', message);
}
async function onRefreshSession() {
// If there are no messages, refresh the session without asking
if (props.messages.length === 0) {
emit('refreshSession');
return;
}
const confirmResult = await messageComposable.confirm(
locale.baseText('chat.window.session.reset.warning'),
{
title: locale.baseText('chat.window.session.reset.title'),
type: 'warning',
confirmButtonText: locale.baseText('chat.window.session.reset.confirm'),
showClose: true,
},
);
if (confirmResult === MODAL_CONFIRM) {
emit('refreshSession');
}
}
function onArrowKeyDown({ currentInputValue, key }: ArrowKeyDownPayload) {
const pastMessages = props.pastChatMessages;
const isCurrentInputEmptyOrMatch =
currentInputValue.length === 0 || pastMessages.includes(currentInputValue);
if (isCurrentInputEmptyOrMatch && (key === 'ArrowUp' || key === 'ArrowDown')) {
// Exit if no messages
if (pastMessages.length === 0) return;
// Temporarily blur to avoid cursor position issues
chatEventBus.emit('blurInput');
if (pastMessages.length === 1) {
previousMessageIndex.value = 0;
} else {
if (key === 'ArrowUp') {
if (currentInputValue.length === 0 && previousMessageIndex.value === 0) {
// Start with most recent message
previousMessageIndex.value = pastMessages.length - 1;
} else {
// Move backwards through history
previousMessageIndex.value =
previousMessageIndex.value === 0
? pastMessages.length - 1
: previousMessageIndex.value - 1;
}
} else if (key === 'ArrowDown') {
// Move forwards through history
previousMessageIndex.value =
previousMessageIndex.value === pastMessages.length - 1
? 0
: previousMessageIndex.value + 1;
}
}
// Get message at current index
const selectedMessage = pastMessages[previousMessageIndex.value];
chatEventBus.emit('setInputValue', selectedMessage);
// Refocus and move cursor to end
chatEventBus.emit('focusInput');
}
// Reset history navigation when typing new content that doesn't match history
if (!isCurrentInputEmptyOrMatch) {
previousMessageIndex.value = 0;
}
}
function copySessionId() {
void clipboard.copy(props.sessionId);
toast.showMessage({
title: locale.baseText('generic.copiedToClipboard'),
message: '',
type: 'success',
});
}
</script>
<template>
<div :class="$style.chat" data-test-id="workflow-lm-chat-dialog">
<header :class="$style.chatHeader">
<span>{{ locale.baseText('chat.window.title') }}</span>
<div :class="$style.session">
<span>{{ locale.baseText('chat.window.session.title') }}</span>
<n8n-tooltip placement="left">
<template #content>
{{ sessionId }}
</template>
<span :class="$style.sessionId" data-test-id="chat-session-id" @click="copySessionId">{{
sessionId
}}</span>
</n8n-tooltip>
<n8n-icon-button
:class="$style.refreshSession"
data-test-id="refresh-session-button"
type="tertiary"
text
size="mini"
icon="undo"
:title="locale.baseText('chat.window.session.reset.confirm')"
@click="onRefreshSession"
/>
</div>
</header>
<main :class="$style.chatBody">
<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press-canvas']">
<template #beforeMessage="{ message }">
<MessageOptionTooltip
v-if="message.sender === 'bot' && !message.id.includes('preload')"
placement="right"
data-test-id="execution-id-tooltip"
>
{{ locale.baseText('chat.window.chat.chatMessageOptions.executionId') }}:
<a href="#" @click="emit('displayExecution', message.id)">{{ message.id }}</a>
</MessageOptionTooltip>
<MessageOptionAction
v-if="isTextMessage(message) && message.sender === 'user'"
data-test-id="repost-message-button"
icon="redo"
:label="locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
placement="left"
@click.once="repostMessage(message)"
/>
<MessageOptionAction
v-if="isTextMessage(message) && message.sender === 'user'"
data-test-id="reuse-message-button"
icon="copy"
:label="locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
placement="left"
@click="reuseMessage(message)"
/>
</template>
</MessagesList>
</main>
<div :class="$style.messagesInput">
<div v-if="pastChatMessages.length > 0" :class="$style.messagesHistory">
<n8n-button
title="Navigate to previous message"
icon="chevron-up"
type="tertiary"
text
size="mini"
@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowUp' })"
/>
<n8n-button
title="Navigate to next message"
icon="chevron-down"
type="tertiary"
text
size="mini"
@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowDown' })"
/>
</div>
<ChatInput
data-test-id="lm-chat-inputs"
:placeholder="inputPlaceholder"
@arrow-key-down="onArrowKeyDown"
/>
</div>
</div>
</template>
<style lang="scss" module>
.chat {
--chat--spacing: var(--spacing-xs);
--chat--message--padding: var(--spacing-xs);
--chat--message--font-size: var(--font-size-s);
--chat--input--font-size: var(--font-size-s);
--chat--message--bot--background: transparent;
--chat--message--user--background: var(--color-text-lighter);
--chat--message--bot--color: var(--color-text-dark);
--chat--message--user--color: var(--color-text-dark);
--chat--message--bot--border: none;
--chat--message--user--border: none;
--chat--color-typing: var(--color-text-light);
--chat--textarea--max-height: calc(var(--panel-height) * 0.5);
--chat--message--pre--background: var(--color-foreground-light);
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--color-background-light);
}
.chatHeader {
font-size: var(--font-size-s);
font-weight: 400;
line-height: 18px;
text-align: left;
border-bottom: 1px solid var(--color-foreground-base);
padding: var(--chat--spacing);
background-color: var(--color-foreground-xlight);
display: flex;
justify-content: space-between;
align-items: center;
}
.session {
display: flex;
align-items: center;
gap: var(--spacing-2xs);
color: var(--color-text-base);
max-width: 70%;
}
.sessionId {
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
}
.refreshSession {
max-height: 1.1rem;
}
.chatBody {
display: flex;
height: 100%;
overflow: auto;
}
.messages {
border-radius: var(--border-radius-base);
height: 100%;
width: 100%;
overflow: auto;
padding-top: 1.5em;
&:not(:last-child) {
margin-right: 1em;
}
}
.messagesInput {
--input-border-color: var(--border-color-base);
--chat--input--border: none;
--chat--input--border-radius: 0.5rem;
--chat--input--send--button--background: transparent;
--chat--input--send--button--color: var(--color-primary);
--chat--input--file--button--background: transparent;
--chat--input--file--button--color: var(--color-primary);
--chat--input--border-active: var(--input-focus-border-color, var(--color-secondary));
--chat--files-spacing: var(--spacing-2xs) 0;
--chat--input--background: transparent;
--chat--input--file--button--color: var(--color-button-secondary-font);
--chat--input--file--button--color-hover: var(--color-primary);
[data-theme='dark'] & {
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
}
@media (prefers-color-scheme: dark) {
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
}
padding: 0 0 0 var(--spacing-xs);
margin: 0 var(--chat--spacing) var(--chat--spacing);
flex-grow: 1;
display: flex;
background: var(--color-lm-chat-bot-background);
border-radius: var(--chat--input--border-radius);
transition: border-color 200ms ease-in-out;
border: var(--input-border-color, var(--border-color-base))
var(--input-border-style, var(--border-style-base))
var(--input-border-width, var(--border-width-base));
&:focus-within {
--input-border-color: #4538a3;
}
}
.messagesHistory {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: var(--spacing-3xs);
button:first-child {
margin-top: var(--spacing-4xs);
margin-bottom: calc(-1 * var(--spacing-4xs));
}
}
</style>

46
packages/editor-ui/src/components/CanvasChat/components/MessageOptionAction.vue Normal file
View file

@ -0,0 +1,46 @@
<script setup lang="ts">
import type { PropType } from 'vue';
defineProps({
label: {
type: String,
required: true,
},
icon: {
type: String,
required: true,
},
placement: {
type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
default: 'top',
},
});
</script>
<template>
<div :class="$style.container">
<n8n-tooltip :placement="placement">
<template #content>
{{ label }}
</template>
<n8n-icon :class="$style.icon" :icon="icon" size="xsmall" @click="$attrs.onClick" />
</n8n-tooltip>
</div>
</template>
<style lang="scss" module>
.container {
display: inline-flex;
align-items: center;
margin: 0 var(--spacing-4xs);
}
.icon {
color: var(--color-foreground-dark);
cursor: pointer;
&:hover {
color: var(--color-primary);
}
}
</style>

40
packages/editor-ui/src/components/CanvasChat/components/MessageOptionTooltip.vue Normal file
View file

@ -0,0 +1,40 @@
<script setup lang="ts">
import type { PropType } from 'vue';
defineProps({
placement: {
type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
default: 'top',
},
});
</script>
<template>
<div :class="$style.container">
<n8n-tooltip :placement="placement">
<template #content>
<slot />
</template>
<span :class="$style.icon">
<n8n-icon icon="info" size="xsmall" />
</span>
</n8n-tooltip>
</div>
</template>
<style lang="scss" module>
.container {
display: inline-flex;
align-items: center;
margin: 0 var(--spacing-4xs);
}
.icon {
color: var(--color-foreground-dark);
cursor: help;
&:hover {
color: var(--color-primary);
}
}
</style>

299
packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts Normal file
View file

@ -0,0 +1,299 @@
import type { ComputedRef, Ref } from 'vue';
import { ref } from 'vue';
import { v4 as uuid } from 'uuid';
import type { ChatMessage, ChatMessageText } from '@n8n/chat/types';
import { NodeConnectionType, CHAT_TRIGGER_NODE_TYPE } from 'n8n-workflow';
import type {
ITaskData,
INodeExecutionData,
IBinaryKeyData,
IDataObject,
IBinaryData,
BinaryFileType,
Workflow,
IRunExecutionData,
} from 'n8n-workflow';
import { useToast } from '@/composables/useToast';
import { useMessage } from '@/composables/useMessage';
import { usePinnedData } from '@/composables/usePinnedData';
import { get, isEmpty, last } from 'lodash-es';
import { MANUAL_CHAT_TRIGGER_NODE_TYPE, MODAL_CONFIRM } from '@/constants';
import { useI18n } from '@/composables/useI18n';
import type { MemoryOutput } from '../types/chat';
import type { IExecutionPushResponse, INodeUi } from '@/Interface';
export type RunWorkflowChatPayload = {
triggerNode: string;
nodeData: ITaskData;
source: string;
message: string;
};
export interface ChatMessagingDependencies {
chatTrigger: Ref<INodeUi | null>;
connectedNode: Ref<INodeUi | null>;
messages: Ref<ChatMessage[]>;
sessionId: Ref<string>;
workflow: ComputedRef<Workflow>;
isLoading: ComputedRef<boolean>;
executionResultData: ComputedRef<IRunExecutionData['resultData'] | undefined>;
getWorkflowResultDataByNodeName: (nodeName: string) => ITaskData[] | null;
onRunChatWorkflow: (
payload: RunWorkflowChatPayload,
) => Promise<IExecutionPushResponse | undefined>;
}
export function useChatMessaging({
chatTrigger,
connectedNode,
messages,
sessionId,
workflow,
isLoading,
executionResultData,
getWorkflowResultDataByNodeName,
onRunChatWorkflow,
}: ChatMessagingDependencies) {
const locale = useI18n();
const { showError } = useToast();
const previousMessageIndex = ref(0);
/** Converts a file to binary data */
async function convertFileToBinaryData(file: File): Promise<IBinaryData> {
const reader = new FileReader();
return await new Promise((resolve, reject) => {
reader.onload = () => {
const binaryData: IBinaryData = {
data: (reader.result as string).split('base64,')?.[1] ?? '',
mimeType: file.type,
fileName: file.name,
fileSize: `${file.size} bytes`,
fileExtension: file.name.split('.').pop() ?? '',
fileType: file.type.split('/')[0] as BinaryFileType,
};
resolve(binaryData);
};
reader.onerror = () => {
reject(new Error('Failed to convert file to binary data'));
};
reader.readAsDataURL(file);
});
}
/** Gets keyed files for the workflow input */
async function getKeyedFiles(files: File[]): Promise<IBinaryKeyData> {
const binaryData: IBinaryKeyData = {};
await Promise.all(
files.map(async (file, index) => {
const data = await convertFileToBinaryData(file);
const key = `data${index}`;
binaryData[key] = data;
}),
);
return binaryData;
}
/** Extracts file metadata */
function extractFileMeta(file: File): IDataObject {
return {
fileName: file.name,
fileSize: `${file.size} bytes`,
fileExtension: file.name.split('.').pop() ?? '',
fileType: file.type.split('/')[0],
mimeType: file.type,
};
}
/** Starts workflow execution with the message */
async function startWorkflowWithMessage(message: string, files?: File[]): Promise<void> {
const triggerNode = chatTrigger.value;
if (!triggerNode) {
showError(new Error('Chat Trigger Node could not be found!'), 'Trigger Node not found');
return;
}
let inputKey = 'chatInput';
if (triggerNode.type === MANUAL_CHAT_TRIGGER_NODE_TYPE && triggerNode.typeVersion < 1.1) {
inputKey = 'input';
}
if (triggerNode.type === CHAT_TRIGGER_NODE_TYPE) {
inputKey = 'chatInput';
}
const inputPayload: INodeExecutionData = {
json: {
sessionId: sessionId.value,
action: 'sendMessage',
[inputKey]: message,
},
};
if (files && files.length > 0) {
const filesMeta = files.map((file) => extractFileMeta(file));
const binaryData = await getKeyedFiles(files);
inputPayload.json.files = filesMeta;
inputPayload.binary = binaryData;
}
const nodeData: ITaskData = {
startTime: new Date().getTime(),
executionTime: 0,
executionStatus: 'success',
data: {
main: [[inputPayload]],
},
source: [null],
};
const response = await onRunChatWorkflow({
triggerNode: triggerNode.name,
nodeData,
source: 'RunData.ManualChatMessage',
message,
});
if (!response?.executionId) {
showError(
new Error('It was not possible to start workflow!'),
'Workflow could not be started',
);
return;
}
waitForExecution(response.executionId);
}
/** Waits for workflow execution to complete */
function waitForExecution(executionId: string) {
const waitInterval = setInterval(() => {
if (!isLoading.value) {
clearInterval(waitInterval);
const lastNodeExecuted = executionResultData.value?.lastNodeExecuted;
if (!lastNodeExecuted) return;
const nodeResponseDataArray =
get(executionResultData.value.runData, lastNodeExecuted) ?? [];
const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
let responseMessage: string;
if (get(nodeResponseData, 'error')) {
responseMessage = '[ERROR: ' + get(nodeResponseData, 'error.message') + ']';
} else {
const responseData = get(nodeResponseData, 'data.main[0][0].json');
responseMessage = extractResponseMessage(responseData);
}
messages.value.push({
text: responseMessage,
sender: 'bot',
createdAt: new Date().toISOString(),
id: executionId ?? uuid(),
});
}
}, 500);
}
/** Extracts response message from workflow output */
function extractResponseMessage(responseData?: IDataObject) {
if (!responseData || isEmpty(responseData)) {
return locale.baseText('chat.window.chat.response.empty');
}
// Paths where the response message might be located
const paths = ['output', 'text', 'response.text'];
const matchedPath = paths.find((path) => get(responseData, path));
if (!matchedPath) return JSON.stringify(responseData, null, 2);
const matchedOutput = get(responseData, matchedPath);
if (typeof matchedOutput === 'object') {
return '```json\n' + JSON.stringify(matchedOutput, null, 2) + '\n```';
}
return matchedOutput?.toString() ?? '';
}
/** Sends a message to the chat */
async function sendMessage(message: string, files?: File[]) {
previousMessageIndex.value = 0;
if (message.trim() === '' && (!files || files.length === 0)) {
showError(
new Error(locale.baseText('chat.window.chat.provideMessage')),
locale.baseText('chat.window.chat.emptyChatMessage'),
);
return;
}
const pinnedChatData = usePinnedData(chatTrigger.value);
if (pinnedChatData.hasData.value) {
const confirmResult = await useMessage().confirm(
locale.baseText('chat.window.chat.unpinAndExecute.description'),
locale.baseText('chat.window.chat.unpinAndExecute.title'),
{
confirmButtonText: locale.baseText('chat.window.chat.unpinAndExecute.confirm'),
cancelButtonText: locale.baseText('chat.window.chat.unpinAndExecute.cancel'),
},
);
if (!(confirmResult === MODAL_CONFIRM)) return;
pinnedChatData.unsetData('unpin-and-send-chat-message-modal');
}
const newMessage: ChatMessage & { sessionId: string } = {
text: message,
sender: 'user',
createdAt: new Date().toISOString(),
sessionId: sessionId.value,
id: uuid(),
files,
};
messages.value.push(newMessage);
await startWorkflowWithMessage(newMessage.text, files);
}
function getChatMessages(): ChatMessageText[] {
if (!connectedNode.value) return [];
const connectedMemoryInputs =
workflow.value.connectionsByDestinationNode?.[connectedNode.value.name]?.[
NodeConnectionType.AiMemory
];
if (!connectedMemoryInputs) return [];
const memoryConnection = (connectedMemoryInputs ?? []).find((i) => i.length > 0)?.[0];
if (!memoryConnection) return [];
const nodeResultData = getWorkflowResultDataByNodeName(memoryConnection.node);
const memoryOutputData = (nodeResultData ?? [])
.map((data) => get(data, ['data', NodeConnectionType.AiMemory, 0, 0, 'json']) as MemoryOutput)
.find((data) => data && data.action === 'saveContext');
return (memoryOutputData?.chatHistory ?? []).map((message, index) => {
return {
createdAt: new Date().toISOString(),
text: message.kwargs.content,
id: `preload__${index}`,
sender: last(message.id) === 'HumanMessage' ? 'user' : 'bot',
};
});
}
return {
previousMessageIndex,
sendMessage,
extractResponseMessage,
waitForExecution,
getChatMessages,
};
}

138
packages/editor-ui/src/components/CanvasChat/composables/useChatTrigger.ts Normal file
View file

@ -0,0 +1,138 @@
import type { ComputedRef, MaybeRef } from 'vue';
import { ref, computed, unref } from 'vue';
import {
CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE,
NodeConnectionType,
NodeHelpers,
} from 'n8n-workflow';
import type { INodeTypeDescription, Workflow, INode, INodeParameters } from 'n8n-workflow';
import {
AI_CATEGORY_AGENTS,
AI_CATEGORY_CHAINS,
AI_CODE_NODE_TYPE,
AI_SUBCATEGORY,
CHAT_TRIGGER_NODE_TYPE,
MANUAL_CHAT_TRIGGER_NODE_TYPE,
} from '@/constants';
import type { INodeUi } from '@/Interface';
export interface ChatTriggerDependencies {
getNodeByName: (name: string) => INodeUi | null;
getNodeType: (type: string, version: number) => INodeTypeDescription | null;
canvasNodes: MaybeRef<INodeUi[]>;
workflow: ComputedRef<Workflow>;
}
export function useChatTrigger({
getNodeByName,
getNodeType,
canvasNodes,
workflow,
}: ChatTriggerDependencies) {
const chatTriggerName = ref<string | null>(null);
const connectedNode = ref<INode | null>(null);
const chatTriggerNode = computed(() =>
chatTriggerName.value ? getNodeByName(chatTriggerName.value) : null,
);
const allowFileUploads = computed(() => {
return (
(chatTriggerNode.value?.parameters?.options as INodeParameters)?.allowFileUploads === true
);
});
const allowedFilesMimeTypes = computed(() => {
return (
(
chatTriggerNode.value?.parameters?.options as INodeParameters
)?.allowedFilesMimeTypes?.toString() ?? ''
);
});
/** Gets the chat trigger node from the workflow */
function setChatTriggerNode() {
const triggerNode = unref(canvasNodes).find((node) =>
[CHAT_TRIGGER_NODE_TYPE, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(node.type),
);
if (!triggerNode) {
return;
}
chatTriggerName.value = triggerNode.name;
}
/** Sets the connected node after finding the trigger */
function setConnectedNode() {
const triggerNode = chatTriggerNode.value;
if (!triggerNode) {
return;
}
const chatChildren = workflow.value.getChildNodes(triggerNode.name);
const chatRootNode = chatChildren
.reverse()
.map((nodeName: string) => getNodeByName(nodeName))
.filter((n): n is INodeUi => n !== null)
// Reverse the nodes to match the last node logs first
.reverse()
.find((storeNode: INodeUi): boolean => {
// Skip summarization nodes
if (storeNode.type === CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE) return false;
const nodeType = getNodeType(storeNode.type, storeNode.typeVersion);
if (!nodeType) return false;
// Check if node is an AI agent or chain based on its metadata
const isAgent =
nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_AGENTS);
const isChain =
nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_CHAINS);
// Handle custom AI Langchain Code nodes that could act as chains or agents
let isCustomChainOrAgent = false;
if (nodeType.name === AI_CODE_NODE_TYPE) {
// Get node connection types for inputs and outputs
const inputs = NodeHelpers.getNodeInputs(workflow.value, storeNode, nodeType);
const inputTypes = NodeHelpers.getConnectionTypes(inputs);
const outputs = NodeHelpers.getNodeOutputs(workflow.value, storeNode, nodeType);
const outputTypes = NodeHelpers.getConnectionTypes(outputs);
// Validate if node has required AI connection types
if (
inputTypes.includes(NodeConnectionType.AiLanguageModel) &&
inputTypes.includes(NodeConnectionType.Main) &&
outputTypes.includes(NodeConnectionType.Main)
) {
isCustomChainOrAgent = true;
}
}
// Skip if node is not an AI component
if (!isAgent && !isChain && !isCustomChainOrAgent) return false;
// Check if this node is connected to the trigger node
const parentNodes = workflow.value.getParentNodes(storeNode.name);
const isChatChild = parentNodes.some(
(parentNodeName) => parentNodeName === triggerNode.name,
);
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const result = Boolean(isChatChild && (isAgent || isChain || isCustomChainOrAgent));
return result;
});
connectedNode.value = chatRootNode ?? null;
}
return {
allowFileUploads,
allowedFilesMimeTypes,
chatTriggerNode,
connectedNode: computed(() => connectedNode.value),
setChatTriggerNode,
setConnectedNode,
};
}

137
packages/editor-ui/src/components/CanvasChat/composables/useResize.ts Normal file
View file

@ -0,0 +1,137 @@
import type { Ref } from 'vue';
import { ref, computed, onMounted, onBeforeUnmount, watchEffect } from 'vue';
import type { ResizeData } from 'n8n-design-system/components/N8nResizeWrapper/ResizeWrapper.vue';
import { useDebounce } from '@/composables/useDebounce';
import type { IChatResizeStyles } from '../types/chat';
import { useStorage } from '@/composables/useStorage';
const LOCAL_STORAGE_PANEL_HEIGHT = 'N8N_CANVAS_CHAT_HEIGHT';
const LOCAL_STORAGE_PANEL_WIDTH = 'N8N_CANVAS_CHAT_WIDTH';
// Percentage of container width for chat panel constraints
const MAX_WIDTH_PERCENTAGE = 0.8;
const MIN_WIDTH_PERCENTAGE = 0.3;
// Percentage of window height for panel constraints
const MIN_HEIGHT_PERCENTAGE = 0.3;
const MAX_HEIGHT_PERCENTAGE = 0.75;
export function useResize(container: Ref<HTMLElement | undefined>) {
const storage = {
height: useStorage(LOCAL_STORAGE_PANEL_HEIGHT),
width: useStorage(LOCAL_STORAGE_PANEL_WIDTH),
};
const dimensions = {
container: ref(0), // Container width
minHeight: ref(0),
maxHeight: ref(0),
chat: ref(0), // Chat panel width
logs: ref(0),
height: ref(0),
};
/** Computed styles for root element based on current dimensions */
const rootStyles = computed<IChatResizeStyles>(() => ({
'--panel-height': `${dimensions.height.value}px`,
'--chat-width': `${dimensions.chat.value}px`,
}));
const panelToContainerRatio = computed(() => {
const chatRatio = dimensions.chat.value / dimensions.container.value;
const containerRatio = dimensions.container.value / window.screen.width;
return {
chat: chatRatio.toFixed(2),
logs: (1 - chatRatio).toFixed(2),
container: containerRatio.toFixed(2),
};
});
/**
* Constrains height to min/max bounds and updates panel height
*/
function onResize(newHeight: number) {
const { minHeight, maxHeight } = dimensions;
dimensions.height.value = Math.min(Math.max(newHeight, minHeight.value), maxHeight.value);
}
function onResizeDebounced(data: ResizeData) {
void useDebounce().callDebounced(onResize, { debounceTime: 10, trailing: true }, data.height);
}
/**
* Constrains chat width to min/max percentage of container width
*/
function onResizeChat(width: number) {
const containerWidth = dimensions.container.value;
const maxWidth = containerWidth * MAX_WIDTH_PERCENTAGE;
const minWidth = containerWidth * MIN_WIDTH_PERCENTAGE;
dimensions.chat.value = Math.min(Math.max(width, minWidth), maxWidth);
dimensions.logs.value = dimensions.container.value - dimensions.chat.value;
}
function onResizeChatDebounced(data: ResizeData) {
void useDebounce().callDebounced(
onResizeChat,
{ debounceTime: 10, trailing: true },
data.width,
);
}
/**
* Initializes dimensions from localStorage if available
*/
function restorePersistedDimensions() {
const persistedHeight = parseInt(storage.height.value ?? '0', 10);
const persistedWidth = parseInt(storage.width.value ?? '0', 10);
if (persistedHeight) onResize(persistedHeight);
if (persistedWidth) onResizeChat(persistedWidth);
}
/**
* Updates container width and height constraints on window resize
*/
function onWindowResize() {
if (!container.value) return;
// Update container width and adjust chat panel if needed
dimensions.container.value = container.value.getBoundingClientRect().width;
onResizeChat(dimensions.chat.value);
// Update height constraints and adjust panel height if needed
dimensions.minHeight.value = window.innerHeight * MIN_HEIGHT_PERCENTAGE;
dimensions.maxHeight.value = window.innerHeight * MAX_HEIGHT_PERCENTAGE;
onResize(dimensions.height.value);
}
// Persist dimensions to localStorage when they change
watchEffect(() => {
const { chat, height } = dimensions;
if (chat.value > 0) storage.width.value = chat.value.toString();
if (height.value > 0) storage.height.value = height.value.toString();
});
// Initialize dimensions when container is available
watchEffect(() => {
if (container.value) {
onWindowResize();
restorePersistedDimensions();
}
});
// Window resize handling
onMounted(() => window.addEventListener('resize', onWindowResize));
onBeforeUnmount(() => window.removeEventListener('resize', onWindowResize));
return {
height: dimensions.height,
chatWidth: dimensions.chat,
logsWidth: dimensions.logs,
rootStyles,
onWindowResize,
onResizeDebounced,
onResizeChatDebounced,
panelToContainerRatio,
};
}

22
packages/editor-ui/src/components/CanvasChat/types/chat.ts Normal file
View file

@ -0,0 +1,22 @@
export interface LangChainMessage {
id: string[];
kwargs: {
content: string;
};
}
export interface MemoryOutput {
action: string;
chatHistory?: LangChainMessage[];
}
export interface IChatMessageResponse {
executionId?: string;
success: boolean;
error?: Error;
}
export interface IChatResizeStyles {
'--panel-height': string;
'--chat-width': string;
}

47
packages/editor-ui/src/components/MainHeader/MainHeader.vue
View file

@ -18,6 +18,8 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
import { useExecutionsStore } from '@/stores/executions.store';
import { usePushConnection } from '@/composables/usePushConnection';
import GithubButton from 'vue-github-button';
const router = useRouter();
const route = useRoute();
const locale = useI18n();
@ -161,7 +163,7 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
</script>
<template>
<div>
<div class="container">
<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
<div v-show="!hideMenuBar" class="top-menu">
<WorkflowDetails
@ -174,18 +176,35 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
:active="workflow.active"
:read-only="readOnly"
/>
<TabBar
v-if="onWorkflowPage"
:items="tabBarItems"
:model-value="activeHeaderTab"
@update:model-value="onTabSelected"
/>
</div>
<TabBar
v-if="onWorkflowPage"
:items="tabBarItems"
:model-value="activeHeaderTab"
@update:model-value="onTabSelected"
/>
</div>
<div class="github-button">
<GithubButton
href="https://github.com/n8n-io/n8n"
:data-color-scheme="uiStore.appliedTheme"
data-size="large"
data-show-count="true"
aria-label="Star n8n-io/n8n on GitHub"
>Star</GithubButton
>
</div>
</div>
</template>
<style lang="scss">
.container {
display: flex;
position: relative;
width: 100%;
align-items: center;
}
.main-header {
background-color: var(--color-background-xlight);
height: $header-height;
@ -201,6 +220,18 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
font-size: 0.9em;
height: $header-height;
font-weight: 400;
padding: 0 var(--spacing-m) 0 var(--spacing-xs);
padding: 0 var(--spacing-m) 0 var(--spacing-m);
}
.github-button {
display: flex;
position: relative;
align-items: center;
height: $header-height;
padding-left: var(--spacing-m);
padding-right: var(--spacing-m);
background-color: var(--color-background-xlight);
border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
border-left: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
}
</style>

6
packages/editor-ui/src/components/Modals.vue
View file

@ -18,7 +18,6 @@ import {
NEW_ASSISTANT_SESSION_MODAL,
VERSIONS_MODAL_KEY,
WORKFLOW_ACTIVE_MODAL_KEY,
WORKFLOW_LM_CHAT_MODAL_KEY,
WORKFLOW_SETTINGS_MODAL_KEY,
WORKFLOW_SHARE_MODAL_KEY,
IMPORT_CURL_MODAL_KEY,
@ -51,7 +50,6 @@ import WorkflowTagsManager from '@/components/TagsManager/WorkflowTagsManager.vu
import AnnotationTagsManager from '@/components/TagsManager/AnnotationTagsManager.ee.vue';
import UpdatesPanel from '@/components/UpdatesPanel.vue';
import NpsSurvey from '@/components/NpsSurvey.vue';
import WorkflowLMChat from '@/components/WorkflowLMChat/WorkflowLMChat.vue';
import WorkflowSettings from '@/components/WorkflowSettings.vue';
import DeleteUserModal from '@/components/DeleteUserModal.vue';
import ActivationModal from '@/components/ActivationModal.vue';
@ -125,10 +123,6 @@ import type { EventBus } from 'n8n-design-system';
</template>
</ModalRoot>
<ModalRoot :name="WORKFLOW_LM_CHAT_MODAL_KEY">
<WorkflowLMChat />
</ModalRoot>
<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
<WorkflowSettings />
</ModalRoot>

25
packages/editor-ui/src/components/Node/NodeCreator/composables/useActions.ts
View file

@ -19,7 +19,6 @@ import {
AI_CATEGORY_LANGUAGE_MODELS,
BASIC_CHAIN_NODE_TYPE,
CHAT_TRIGGER_NODE_TYPE,
MANUAL_CHAT_TRIGGER_NODE_TYPE,
MANUAL_TRIGGER_NODE_TYPE,
NODE_CREATOR_OPEN_SOURCES,
NO_OP_NODE_TYPE,
@ -204,8 +203,6 @@ export const useActions = () => {
);
}
function shouldPrependChatTrigger(addedNodes: AddedNode[]): boolean {
const { allNodes } = useWorkflowsStore();
const COMPATIBLE_CHAT_NODES = [
QA_CHAIN_NODE_TYPE,
AGENT_NODE_TYPE,
@ -214,13 +211,25 @@ export const useActions = () => {
OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE,
];
const isChatTriggerMissing =
allNodes.find((node) =>
[MANUAL_CHAT_TRIGGER_NODE_TYPE, CHAT_TRIGGER_NODE_TYPE].includes(node.type),
) === undefined;
const isCompatibleNode = addedNodes.some((node) => COMPATIBLE_CHAT_NODES.includes(node.type));
return isCompatibleNode && isChatTriggerMissing;
if (!isCompatibleNode) return false;
const { allNodes, getNodeTypes } = useWorkflowsStore();
const { getByNameAndVersion } = getNodeTypes();
// We want to add a trigger if there are no triggers other than Manual Triggers
// Performance here should be fine as `getByNameAndVersion` fetches nodeTypes once in bulk
// and `every` aborts on first `false`
const shouldAddChatTrigger = allNodes.every((node) => {
const nodeType = getByNameAndVersion(node.type, node.typeVersion);
return (
!nodeType.description.group.includes('trigger') || node.type === MANUAL_TRIGGER_NODE_TYPE
);
});
return shouldAddChatTrigger;
}
// AI-226: Prepend LLM Chain node when adding a language model

100
packages/editor-ui/src/components/Node/NodeCreator/useActions.test.ts
View file

@ -5,6 +5,8 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useActions } from './composables/useActions';
import {
AGENT_NODE_TYPE,
GITHUB_TRIGGER_NODE_TYPE,
HTTP_REQUEST_NODE_TYPE,
MANUAL_TRIGGER_NODE_TYPE,
NODE_CREATOR_OPEN_SOURCES,
@ -15,6 +17,7 @@ import {
TRIGGER_NODE_CREATOR_VIEW,
WEBHOOK_NODE_TYPE,
} from '@/constants';
import { CHAT_TRIGGER_NODE_TYPE } from 'n8n-workflow';
describe('useActions', () => {
beforeAll(() => {
@ -54,6 +57,9 @@ describe('useActions', () => {
vi.spyOn(workflowsStore, 'workflowTriggerNodes', 'get').mockReturnValue([
{ type: SCHEDULE_TRIGGER_NODE_TYPE } as never,
]);
vi.spyOn(workflowsStore, 'getNodeTypes').mockReturnValue({
getByNameAndVersion: () => ({ description: { group: ['trigger'] } }),
} as never);
vi.spyOn(nodeCreatorStore, 'openSource', 'get').mockReturnValue(
NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
);
@ -67,6 +73,100 @@ describe('useActions', () => {
});
});
test('should insert a ChatTrigger node when an AI Agent is added without trigger', () => {
const workflowsStore = useWorkflowsStore();
vi.spyOn(workflowsStore, 'workflowTriggerNodes', 'get').mockReturnValue([]);
const { getAddedNodesAndConnections } = useActions();
expect(getAddedNodesAndConnections([{ type: AGENT_NODE_TYPE }])).toEqual({
connections: [
{
from: {
nodeIndex: 0,
},
to: {
nodeIndex: 1,
},
},
],
nodes: [
{ type: CHAT_TRIGGER_NODE_TYPE, isAutoAdd: true },
{ type: AGENT_NODE_TYPE, openDetail: true },
],
});
});
test('should insert a ChatTrigger node when an AI Agent is added with only a Manual Trigger', () => {
const workflowsStore = useWorkflowsStore();
vi.spyOn(workflowsStore, 'workflowTriggerNodes', 'get').mockReturnValue([
{ type: MANUAL_TRIGGER_NODE_TYPE } as never,
]);
vi.spyOn(workflowsStore, 'getNodeTypes').mockReturnValue({
getByNameAndVersion: () => ({ description: { group: ['trigger'] } }),
} as never);
const { getAddedNodesAndConnections } = useActions();
expect(getAddedNodesAndConnections([{ type: AGENT_NODE_TYPE }])).toEqual({
connections: [
{
from: {
nodeIndex: 0,
},
to: {
nodeIndex: 1,
},
},
],
nodes: [
{ type: CHAT_TRIGGER_NODE_TYPE, isAutoAdd: true },
{ type: AGENT_NODE_TYPE, openDetail: true },
],
});
});
test('should not insert a ChatTrigger node when an AI Agent is added with a trigger already present', () => {
const workflowsStore = useWorkflowsStore();
vi.spyOn(workflowsStore, 'allNodes', 'get').mockReturnValue([
{ type: GITHUB_TRIGGER_NODE_TYPE } as never,
]);
vi.spyOn(workflowsStore, 'getNodeTypes').mockReturnValue({
getByNameAndVersion: () => ({ description: { group: ['trigger'] } }),
} as never);
const { getAddedNodesAndConnections } = useActions();
expect(getAddedNodesAndConnections([{ type: AGENT_NODE_TYPE }])).toEqual({
connections: [],
nodes: [{ type: AGENT_NODE_TYPE, openDetail: true }],
});
});
test('should not insert a ChatTrigger node when an AI Agent is added with a Chat Trigger already present', () => {
const workflowsStore = useWorkflowsStore();
vi.spyOn(workflowsStore, 'workflowTriggerNodes', 'get').mockReturnValue([
{ type: CHAT_TRIGGER_NODE_TYPE } as never,
]);
vi.spyOn(workflowsStore, 'allNodes', 'get').mockReturnValue([
{ type: CHAT_TRIGGER_NODE_TYPE } as never,
]);
vi.spyOn(workflowsStore, 'getNodeTypes').mockReturnValue({
getByNameAndVersion: () => ({ description: { group: ['trigger'] } }),
} as never);
const { getAddedNodesAndConnections } = useActions();
expect(getAddedNodesAndConnections([{ type: AGENT_NODE_TYPE }])).toEqual({
connections: [],
nodes: [{ type: AGENT_NODE_TYPE, openDetail: true }],
});
});
test('should insert a No Op node when a Loop Over Items Node is added', () => {
const workflowsStore = useWorkflowsStore();
const nodeCreatorStore = useNodeCreatorStore();

31
packages/editor-ui/src/components/NodeSettings.vue
View file

@ -22,11 +22,7 @@ import type {
IUpdateInformation,
} from '@/Interface';
import {
COMMUNITY_NODES_INSTALLATION_DOCS_URL,
CUSTOM_NODES_DOCS_URL,
SHOULD_CLEAR_NODE_OUTPUTS,
} from '@/constants';
import { COMMUNITY_NODES_INSTALLATION_DOCS_URL, CUSTOM_NODES_DOCS_URL } from '@/constants';
import NodeTitle from '@/components/NodeTitle.vue';
import ParameterInputList from '@/components/ParameterInputList.vue';
@ -47,11 +43,11 @@ import { useCredentialsStore } from '@/stores/credentials.store';
import type { EventBus } from 'n8n-design-system';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { useToast } from '@/composables/useToast';
import { useI18n } from '@/composables/useI18n';
import { useTelemetry } from '@/composables/useTelemetry';
import { importCurlEventBus, ndvEventBus } from '@/event-bus';
import { ProjectTypes } from '@/types/projects.types';
import { updateDynamicConnections } from '@/utils/nodeSettingsUtils';
const props = withDefaults(
defineProps<{
@ -94,7 +90,6 @@ const telemetry = useTelemetry();
const nodeHelpers = useNodeHelpers();
const externalHooks = useExternalHooks();
const i18n = useI18n();
const { showMessage } = useToast();
const nodeValid = ref(true);
const openPanel = ref<'params' | 'settings'>('params');
@ -483,20 +478,6 @@ const valueChanged = (parameterData: IUpdateInformation) => {
return;
}
if (
parameterData.type &&
workflowsStore.nodeHasOutputConnection(_node.name) &&
SHOULD_CLEAR_NODE_OUTPUTS[nodeType.name]?.eventTypes.includes(parameterData.type) &&
SHOULD_CLEAR_NODE_OUTPUTS[nodeType.name]?.parameterPaths.includes(parameterData.name)
) {
workflowsStore.removeAllNodeConnection(_node, { preserveInputConnections: true });
showMessage({
type: 'warning',
title: i18n.baseText('nodeSettings.outputCleared.title'),
message: i18n.baseText('nodeSettings.outputCleared.message'),
});
}
// Get only the parameters which are different to the defaults
let nodeParameters = NodeHelpers.getNodeParameters(
nodeType.properties,
@ -566,6 +547,14 @@ const valueChanged = (parameterData: IUpdateInformation) => {
value: nodeParameters,
};
const connections = workflowsStore.allConnections;
const updatedConnections = updateDynamicConnections(_node, connections, parameterData);
if (updatedConnections) {
workflowsStore.setConnections(updatedConnections, true);
}
workflowsStore.setNodeParameters(updateInformation);
void externalHooks.run('nodeSettings.valueChanged', {

7
packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
View file

@ -145,7 +145,12 @@ function onKeyDown(e: KeyboardEvent) {
}
}
} else if (e.key === 'Enter') {
emit('update:modelValue', sortedResources.value[hoverIndex.value].value);
const selected = sortedResources.value[hoverIndex.value]?.value;
// Selected resource can be empty when loading or empty results
if (selected) {
emit('update:modelValue', selected);
}
}
}

63
packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
View file

@ -24,7 +24,7 @@ const contentParsers = useAiContentParsers();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
const isExpanded = ref(getInitialExpandedState());
const isShowRaw = ref(false);
const renderType = ref<'rendered' | 'json'>('rendered');
const contentParsed = ref(false);
const parsedRun = ref(undefined as ParsedAiContent | undefined);
function getInitialExpandedState() {
@ -134,6 +134,10 @@ function onCopyToClipboard(content: IDataObject | IDataObject[]) {
} catch (err) {}
}
function onRenderTypeChange(value: 'rendered' | 'json') {
renderType.value = value;
}
onMounted(() => {
parsedRun.value = parseAiRunData(props.runData);
if (parsedRun.value) {
@ -146,16 +150,19 @@ onMounted(() => {
<div :class="$style.block">
<header :class="$style.blockHeader" @click="onBlockHeaderClick">
<button :class="$style.blockToggle">
<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-up'" size="lg" />
<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-right'" size="lg" />
</button>
<p :class="$style.blockTitle">{{ capitalize(runData.inOut) }}</p>
<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
<el-switch
v-if="contentParsed && !error"
v-model="isShowRaw"
<n8n-radio-buttons
v-if="contentParsed && !error && isExpanded"
size="small"
:model-value="renderType"
:class="$style.rawSwitch"
active-text="RAW JSON"
@click.stop
:options="[
{ label: 'Rendered', value: 'rendered' },
{ label: 'JSON', value: 'json' },
]"
@update:model-value="onRenderTypeChange"
/>
</header>
<main
@ -172,7 +179,7 @@ onMounted(() => {
:class="$style.contentText"
:data-content-type="parsedContent?.type"
>
<template v-if="parsedContent && !isShowRaw">
<template v-if="parsedContent && renderType === 'rendered'">
<template v-if="parsedContent.type === 'json'">
<VueMarkdown
:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
@ -226,17 +233,17 @@ onMounted(() => {
white-space: pre-wrap;
h1 {
font-size: var(--font-size-xl);
font-size: var(--font-size-l);
line-height: var(--font-line-height-xloose);
}
h2 {
font-size: var(--font-size-l);
font-size: var(--font-size-m);
line-height: var(--font-line-height-loose);
}
h3 {
font-size: var(--font-size-m);
font-size: var(--font-size-s);
line-height: var(--font-line-height-regular);
}
@ -252,17 +259,16 @@ onMounted(() => {
}
.contentText {
padding-top: var(--spacing-s);
font-size: var(--font-size-xs);
// max-height: 100%;
padding-left: var(--spacing-m);
font-size: var(--font-size-s);
}
.block {
border: 1px solid var(--color-foreground-base);
background: var(--color-background-xlight);
padding: var(--spacing-xs);
border-radius: 4px;
margin-bottom: var(--spacing-2xs);
padding: 0 0 var(--spacing-2xs) var(--spacing-2xs);
background: var(--color-foreground-light);
margin-top: var(--spacing-xl);
border-radius: var(--border-radius-base);
}
.blockContent {
:root .blockContent {
height: 0;
overflow: hidden;
@ -271,14 +277,17 @@ onMounted(() => {
}
}
.runText {
line-height: var(--font-line-height-regular);
line-height: var(--font-line-height-xloose);
white-space: pre-line;
}
.rawSwitch {
opacity: 0;
height: fit-content;
margin-left: auto;
margin-right: var(--spacing-2xs);
& * {
font-size: var(--font-size-2xs);
.block:hover & {
opacity: 1;
}
}
.blockHeader {
@ -287,21 +296,25 @@ onMounted(() => {
cursor: pointer;
/* This hack is needed to make the whole surface of header clickable */
margin: calc(-1 * var(--spacing-xs));
padding: var(--spacing-xs);
padding: var(--spacing-2xs) var(--spacing-xs);
align-items: center;
& * {
user-select: none;
}
}
.blockTitle {
font-size: var(--font-size-2xs);
font-size: var(--font-size-s);
color: var(--color-text-dark);
margin: 0;
padding-bottom: var(--spacing-4xs);
}
.blockToggle {
border: none;
background: none;
padding: 0;
color: var(--color-text-base);
margin-top: calc(-1 * var(--spacing-3xs));
}
.error {
padding: var(--spacing-s) 0;

154
packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
View file

@ -25,7 +25,6 @@ interface TreeNode {
export interface Props {
node: INodeUi;
runIndex?: number;
hideTitle?: boolean;
slim?: boolean;
workflow: Workflow;
}
@ -204,7 +203,7 @@ const aiData = computed<AIResult[]>(() => {
const executionTree = computed<TreeNode[]>(() => {
const rootNode = props.node;
const tree = getTreeNodeData(rootNode.name, 1);
const tree = getTreeNodeData(rootNode.name, 0);
return tree || [];
});
@ -212,66 +211,73 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
</script>
<template>
<div v-if="aiData.length > 0" :class="$style.container">
<div :class="{ [$style.tree]: true, [$style.slim]: slim }">
<ElTree
:data="executionTree"
:props="{ label: 'node' }"
default-expand-all
:indent="12"
:expand-on-click-node="false"
data-test-id="lm-chat-logs-tree"
@node-click="onItemClick"
>
<template #default="{ node, data }">
<div
:class="{
[$style.treeNode]: true,
[$style.isSelected]: isTreeNodeSelected(data),
}"
:data-tree-depth="data.depth"
:style="{ '--item-depth': data.depth }"
>
<button
v-if="data.children.length"
:class="$style.treeToggle"
@click="toggleTreeItem(node)"
<div :class="$style.container">
<template v-if="aiData.length > 0">
<div :class="{ [$style.tree]: true, [$style.slim]: slim }">
<ElTree
:data="executionTree"
:props="{ label: 'node' }"
default-expand-all
:indent="12"
:expand-on-click-node="false"
data-test-id="lm-chat-logs-tree"
@node-click="onItemClick"
>
<template #default="{ node, data }">
<div
:class="{
[$style.treeNode]: true,
[$style.isSelected]: isTreeNodeSelected(data),
}"
:data-tree-depth="data.depth"
:style="{ '--item-depth': data.depth }"
>
<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-up'" />
</button>
<n8n-tooltip :disabled="!slim" placement="right">
<template #content>
{{ node.label }}
</template>
<span :class="$style.leafLabel">
<NodeIcon :node-type="getNodeType(data.node)!" :size="17" />
<span v-if="!slim" v-text="node.label" />
</span>
</n8n-tooltip>
</div>
</template>
</ElTree>
</div>
<div :class="$style.runData">
<div v-if="selectedRun.length === 0" :class="$style.empty">
<n8n-text size="large">
{{
$locale.baseText('ndv.output.ai.empty', {
interpolate: {
node: props.node.name,
},
})
}}
</n8n-text>
<button
v-if="data.children.length"
:class="$style.treeToggle"
@click="toggleTreeItem(node)"
>
<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-right'" />
</button>
<n8n-tooltip :disabled="!slim" placement="right">
<template #content>
{{ node.label }}
</template>
<span :class="$style.leafLabel">
<NodeIcon
:node-type="getNodeType(data.node)!"
:size="17"
:class="$style.nodeIcon"
/>
<span v-if="!slim" v-text="node.label" />
</span>
</n8n-tooltip>
</div>
</template>
</ElTree>
</div>
<div
v-for="(data, index) in selectedRun"
:key="`${data.node}__${data.runIndex}__index`"
data-test-id="lm-chat-logs-entry"
>
<RunDataAiContent :input-data="data" :content-index="index" />
<div :class="$style.runData">
<div v-if="selectedRun.length === 0" :class="$style.empty">
<n8n-text size="large">
{{
$locale.baseText('ndv.output.ai.empty', {
interpolate: {
node: props.node.name,
},
})
}}
</n8n-text>
</div>
<div
v-for="(data, index) in selectedRun"
:key="`${data.node}__${data.runIndex}__index`"
data-test-id="lm-chat-logs-entry"
>
<RunDataAiContent :input-data="data" :content-index="index" />
</div>
</div>
</div>
</template>
<div v-else :class="$style.noData">{{ $locale.baseText('ndv.output.ai.waiting') }}</div>
</div>
</template>
@ -288,6 +294,13 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
align-items: center;
gap: var(--spacing-3xs);
}
.noData {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
color: var(--color-text-light);
}
.empty {
padding: var(--spacing-l);
}
@ -297,9 +310,9 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
}
.tree {
flex-shrink: 0;
min-width: 12.8rem;
min-width: 8rem;
height: 100%;
border-right: 1px solid var(--color-foreground-base);
padding-right: var(--spacing-xs);
padding-left: var(--spacing-2xs);
&.slim {
@ -338,20 +351,30 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
margin-left: var(--spacing-xs);
}
}
.nodeIcon {
padding: var(--spacing-3xs) var(--spacing-3xs);
border-radius: var(--border-radius-base);
margin-right: var(--spacing-4xs);
}
.isSelected {
background-color: var(--color-foreground-base);
.nodeIcon {
background-color: var(--color-foreground-base);
}
}
.treeNode {
display: inline-flex;
border-radius: var(--border-radius-base);
align-items: center;
gap: var(--spacing-3xs);
padding: var(--spacing-4xs) var(--spacing-3xs);
font-size: var(--font-size-xs);
padding-right: var(--spacing-3xs);
margin: var(--spacing-4xs) 0;
font-size: var(--font-size-2xs);
color: var(--color-text-dark);
margin-bottom: var(--spacing-3xs);
cursor: pointer;
&.isSelected {
font-weight: var(--font-weight-bold);
}
&:hover {
background-color: var(--color-foreground-base);
}
@ -367,6 +390,7 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
height: 0.125rem;
left: 0.75rem;
width: calc(var(--item-depth) * 0.625rem);
margin-top: var(--spacing-3xs);
}
}
</style>

10
packages/editor-ui/src/components/RunDataAi/useAiContentParsers.ts
View file

@ -134,13 +134,6 @@ const outputTypeParsers: {
} else if (content.id.includes('SystemMessage')) {
message = `**System Message:** ${message}`;
}
if (
execData.action &&
typeof execData.action !== 'object' &&
execData.action !== 'getMessages'
) {
message = `## Action: ${execData.action}\n\n${message}`;
}
return message;
}
@ -148,6 +141,9 @@ const outputTypeParsers: {
})
.join('\n\n');
if (responseText.length === 0) {
return fallbackParser(execData);
}
return {
type: 'markdown',
data: responseText,

31
packages/editor-ui/src/components/WorkflowLMChat/MessageOptionAction.vue
View file

@ -1,31 +0,0 @@
<script setup lang="ts">
const emit = defineEmits<{
click: [];
}>();
defineProps<{
label: string;
icon: string;
placement: 'left' | 'right' | 'top' | 'bottom';
}>();
</script>
<template>
<N8nTooltip :placement="placement">
<button :class="$style.button" :style="{ color: '#aaa' }" @click="emit('click')">
<N8nIcon :icon="icon" size="small" />
</button>
<template #content>
{{ label }}
</template>
</N8nTooltip>
</template>
<style module>
.button {
background: none;
border: none;
cursor: pointer;
padding: 0;
}
</style>

15
packages/editor-ui/src/components/WorkflowLMChat/MessageOptionTooltip.vue
View file

@ -1,15 +0,0 @@
<script setup lang="ts">
defineProps<{
placement: 'left' | 'right';
}>();
</script>
<template>
<n8n-info-tip type="tooltip" theme="info-light" :tooltip-placement="placement">
<n8n-text :bold="true" size="small">
<slot />
</n8n-text>
</n8n-info-tip>
</template>
<style module lang="scss"></style>

697
packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
View file

@ -1,697 +0,0 @@
<script setup lang="ts">
import type { Ref } from 'vue';
import { defineAsyncComponent, provide, ref, computed, onMounted, nextTick } from 'vue';
import { v4 as uuid } from 'uuid';
import Modal from '@/components/Modal.vue';
import {
AI_CATEGORY_AGENTS,
AI_CATEGORY_CHAINS,
AI_CODE_NODE_TYPE,
AI_SUBCATEGORY,
CHAT_EMBED_MODAL_KEY,
CHAT_TRIGGER_NODE_TYPE,
MANUAL_CHAT_TRIGGER_NODE_TYPE,
MODAL_CONFIRM,
WORKFLOW_LM_CHAT_MODAL_KEY,
} from '@/constants';
import { useUsersStore } from '@/stores/users.store';
// eslint-disable-next-line import/no-unresolved
import MessagesList from '@n8n/chat/components/MessagesList.vue';
import type { ArrowKeyDownPayload } from '@n8n/chat/components/Input.vue';
import ChatInput from '@n8n/chat/components/Input.vue';
import { useRouter } from 'vue-router';
import { useRunWorkflow } from '@/composables/useRunWorkflow';
import type { Chat, ChatMessage, ChatMessageText, ChatOptions } from '@n8n/chat/types';
import { useI18n } from '@/composables/useI18n';
import { ChatOptionsSymbol, ChatSymbol } from '@n8n/chat/constants';
import MessageOptionTooltip from './MessageOptionTooltip.vue';
import MessageOptionAction from './MessageOptionAction.vue';
import type {
BinaryFileType,
IBinaryData,
IBinaryKeyData,
IDataObject,
INode,
INodeExecutionData,
INodeParameters,
INodeType,
ITaskData,
IUser,
} from 'n8n-workflow';
import {
CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE,
NodeConnectionType,
NodeHelpers,
} from 'n8n-workflow';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useToast } from '@/composables/useToast';
import type { INodeUi } from '@/Interface';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { createEventBus } from 'n8n-design-system';
import { useUIStore } from '@/stores/ui.store';
import { useMessage } from '@/composables/useMessage';
import { usePinnedData } from '@/composables/usePinnedData';
import { get, last } from 'lodash-es';
import { isEmpty } from '@/utils/typesUtils';
import { chatEventBus } from '@n8n/chat/event-buses';
import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
const LazyRunDataAi = defineAsyncComponent(
async () => await import('@/components/RunDataAi/RunDataAi.vue'),
);
// TODO: Add proper type
interface LangChainMessage {
id: string[];
kwargs: {
content: string;
};
}
interface MemoryOutput {
action: string;
chatHistory?: LangChainMessage[];
}
const router = useRouter();
const { runWorkflow } = useRunWorkflow({ router });
const workflowsStore = useWorkflowsStore();
const nodeTypesStore = useNodeTypesStore();
const uiStore = useUIStore();
const executionHelpers = useExecutionHelpers();
const { showError } = useToast();
const messages: Ref<ChatMessage[]> = ref([]);
const currentSessionId = ref<string>(String(Date.now()));
const isDisabled = ref(false);
const connectedNode = ref<INode | null>(null);
const chatTrigger = ref<INode | null>(null);
const modalBus = createEventBus();
const node = ref<INode | null>(null);
const previousMessageIndex = ref(0);
const isLoading = computed(() => uiStore.isActionActive.workflowRunning);
const allowFileUploads = computed(() => {
return (chatTrigger.value?.parameters?.options as INodeParameters)?.allowFileUploads === true;
});
const allowedFilesMimeTypes = computed(() => {
return (
(
chatTrigger.value?.parameters?.options as INodeParameters
)?.allowedFilesMimeTypes?.toString() ?? ''
);
});
const locale = useI18n();
const chatOptions: ChatOptions = {
i18n: {
en: {
title: '',
footer: '',
subtitle: '',
inputPlaceholder: locale.baseText('chat.window.chat.placeholder'),
getStarted: '',
closeButtonTooltip: '',
},
},
webhookUrl: '',
mode: 'window',
showWindowCloseButton: true,
disabled: isDisabled,
allowFileUploads,
allowedFilesMimeTypes,
};
const chatConfig: Chat = {
messages,
sendMessage,
initialMessages: ref([]),
currentSessionId,
waitingForResponse: isLoading,
};
const messageVars = {
'--chat--message--bot--background': 'var(--color-lm-chat-bot-background)',
'--chat--message--user--background': 'var(--color-lm-chat-user-background)',
'--chat--message--bot--color': 'var(--color-text-dark)',
'--chat--message--user--color': 'var(--color-lm-chat-user-color)',
'--chat--message--bot--border': 'none',
'--chat--message--user--border': 'none',
'--chat--color-typing': 'var(--color-text-dark)',
};
const workflow = computed(() => workflowsStore.getCurrentWorkflow());
function getTriggerNode() {
const triggerNode = workflow.value.queryNodes((nodeType: INodeType) =>
[CHAT_TRIGGER_NODE_TYPE, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(nodeType.description.name),
);
if (!triggerNode.length) {
chatTrigger.value = null;
}
chatTrigger.value = triggerNode[0];
}
function setNode() {
const triggerNode = chatTrigger.value;
if (!triggerNode) {
return;
}
const childNodes = workflow.value.getChildNodes(triggerNode.name);
for (const childNode of childNodes) {
// Look for the first connected node with metadata
// TODO: Allow later users to change that in the UI
const connectedSubNodes = workflow.value.getParentNodes(childNode, 'ALL_NON_MAIN');
const resultData = connectedSubNodes.map(workflowsStore.getWorkflowResultDataByNodeName);
if (!resultData && !Array.isArray(resultData)) {
continue;
}
if (resultData.some((data) => data?.[0].metadata)) {
node.value = workflowsStore.getNodeByName(childNode);
break;
}
}
}
function setConnectedNode() {
const triggerNode = chatTrigger.value;
if (!triggerNode) {
showError(new Error('Chat Trigger Node could not be found!'), 'Trigger Node not found');
return;
}
const chatNode = workflowsStore.getNodes().find((storeNode: INodeUi): boolean => {
if (storeNode.type === CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE) return false;
const nodeType = nodeTypesStore.getNodeType(storeNode.type, storeNode.typeVersion);
if (!nodeType) return false;
const isAgent = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_AGENTS);
const isChain = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_CHAINS);
let isCustomChainOrAgent = false;
if (nodeType.name === AI_CODE_NODE_TYPE) {
const inputs = NodeHelpers.getNodeInputs(workflow.value, storeNode, nodeType);
const inputTypes = NodeHelpers.getConnectionTypes(inputs);
const outputs = NodeHelpers.getNodeOutputs(workflow.value, storeNode, nodeType);
const outputTypes = NodeHelpers.getConnectionTypes(outputs);
if (
inputTypes.includes(NodeConnectionType.AiLanguageModel) &&
inputTypes.includes(NodeConnectionType.Main) &&
outputTypes.includes(NodeConnectionType.Main)
) {
isCustomChainOrAgent = true;
}
}
if (!isAgent && !isChain && !isCustomChainOrAgent) return false;
const parentNodes = workflow.value.getParentNodes(storeNode.name);
const isChatChild = parentNodes.some((parentNodeName) => parentNodeName === triggerNode.name);
return Boolean(isChatChild && (isAgent || isChain || isCustomChainOrAgent));
});
if (!chatNode) {
return;
}
connectedNode.value = chatNode;
}
async function convertFileToBinaryData(file: File): Promise<IBinaryData> {
const reader = new FileReader();
return await new Promise((resolve, reject) => {
reader.onload = () => {
const binaryData: IBinaryData = {
data: (reader.result as string).split('base64,')?.[1] ?? '',
mimeType: file.type,
fileName: file.name,
fileSize: `${file.size} bytes`,
fileExtension: file.name.split('.').pop() ?? '',
fileType: file.type.split('/')[0] as BinaryFileType,
};
resolve(binaryData);
};
reader.onerror = () => {
reject(new Error('Failed to convert file to binary data'));
};
reader.readAsDataURL(file);
});
}
async function getKeyedFiles(files: File[]): Promise<IBinaryKeyData> {
const binaryData: IBinaryKeyData = {};
await Promise.all(
files.map(async (file, index) => {
const data = await convertFileToBinaryData(file);
const key = `data${index}`;
binaryData[key] = data;
}),
);
return binaryData;
}
function extractFileMeta(file: File): IDataObject {
return {
fileName: file.name,
fileSize: `${file.size} bytes`,
fileExtension: file.name.split('.').pop() ?? '',
fileType: file.type.split('/')[0],
mimeType: file.type,
};
}
async function startWorkflowWithMessage(message: string, files?: File[]): Promise<void> {
const triggerNode = chatTrigger.value;
if (!triggerNode) {
showError(new Error('Chat Trigger Node could not be found!'), 'Trigger Node not found');
return;
}
let inputKey = 'chatInput';
if (triggerNode.type === MANUAL_CHAT_TRIGGER_NODE_TYPE && triggerNode.typeVersion < 1.1) {
inputKey = 'input';
}
if (triggerNode.type === CHAT_TRIGGER_NODE_TYPE) {
inputKey = 'chatInput';
}
const usersStore = useUsersStore();
const currentUser = usersStore.currentUser ?? ({} as IUser);
const inputPayload: INodeExecutionData = {
json: {
sessionId: `test-${currentUser.id || 'unknown'}`,
action: 'sendMessage',
[inputKey]: message,
},
};
if (files && files.length > 0) {
const filesMeta = files.map((file) => extractFileMeta(file));
const binaryData = await getKeyedFiles(files);
inputPayload.json.files = filesMeta;
inputPayload.binary = binaryData;
}
const nodeData: ITaskData = {
startTime: new Date().getTime(),
executionTime: 0,
executionStatus: 'success',
data: {
main: [[inputPayload]],
},
source: [null],
};
const response = await runWorkflow({
triggerNode: triggerNode.name,
nodeData,
source: 'RunData.ManualChatMessage',
});
workflowsStore.appendChatMessage(message);
if (!response) {
showError(new Error('It was not possible to start workflow!'), 'Workflow could not be started');
return;
}
waitForExecution(response.executionId);
}
function waitForExecution(executionId?: string) {
const waitInterval = setInterval(() => {
if (!isLoading.value) {
clearInterval(waitInterval);
const lastNodeExecuted =
workflowsStore.getWorkflowExecution?.data?.resultData.lastNodeExecuted;
if (!lastNodeExecuted) return;
const nodeResponseDataArray =
get(workflowsStore.getWorkflowExecution?.data?.resultData.runData, lastNodeExecuted) ?? [];
const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
let responseMessage: string;
if (get(nodeResponseData, 'error')) {
responseMessage = '[ERROR: ' + get(nodeResponseData, 'error.message') + ']';
} else {
const responseData = get(nodeResponseData, 'data.main[0][0].json');
responseMessage = extractResponseMessage(responseData);
}
messages.value.push({
text: responseMessage,
sender: 'bot',
createdAt: new Date().toISOString(),
id: executionId ?? uuid(),
});
void nextTick(setNode);
}
}, 500);
}
function extractResponseMessage(responseData?: IDataObject) {
if (!responseData || isEmpty(responseData)) {
return locale.baseText('chat.window.chat.response.empty');
}
// Paths where the response message might be located
const paths = ['output', 'text', 'response.text'];
const matchedPath = paths.find((path) => get(responseData, path));
if (!matchedPath) return JSON.stringify(responseData, null, 2);
const matchedOutput = get(responseData, matchedPath);
if (typeof matchedOutput === 'object') {
return '```json\n' + JSON.stringify(matchedOutput, null, 2) + '\n```';
}
return matchedOutput?.toString() ?? '';
}
async function sendMessage(message: string, files?: File[]) {
previousMessageIndex.value = 0;
if (message.trim() === '' && (!files || files.length === 0)) {
showError(
new Error(locale.baseText('chat.window.chat.provideMessage')),
locale.baseText('chat.window.chat.emptyChatMessage'),
);
return;
}
const pinnedChatData = usePinnedData(chatTrigger.value);
if (pinnedChatData.hasData.value) {
const confirmResult = await useMessage().confirm(
locale.baseText('chat.window.chat.unpinAndExecute.description'),
locale.baseText('chat.window.chat.unpinAndExecute.title'),
{
confirmButtonText: locale.baseText('chat.window.chat.unpinAndExecute.confirm'),
cancelButtonText: locale.baseText('chat.window.chat.unpinAndExecute.cancel'),
},
);
if (!(confirmResult === MODAL_CONFIRM)) return;
pinnedChatData.unsetData('unpin-and-send-chat-message-modal');
}
const newMessage: ChatMessage = {
text: message,
sender: 'user',
createdAt: new Date().toISOString(),
id: uuid(),
files,
};
messages.value.push(newMessage);
await startWorkflowWithMessage(newMessage.text, files);
}
function displayExecution(executionId: string) {
executionHelpers.openExecutionInNewTab(executionId, workflow.value.id);
}
function isTextMessage(message: ChatMessage): message is ChatMessageText {
return message.type === 'text' || !message.type;
}
function repostMessage(message: ChatMessageText) {
void sendMessage(message.text);
}
function reuseMessage(message: ChatMessageText) {
chatEventBus.emit('setInputValue', message.text);
}
function getChatMessages(): ChatMessageText[] {
if (!connectedNode.value) return [];
const connectedMemoryInputs =
workflow.value.connectionsByDestinationNode[connectedNode.value.name][
NodeConnectionType.AiMemory
];
if (!connectedMemoryInputs) return [];
const memoryConnection = (connectedMemoryInputs ?? []).find((i) => i.length > 0)?.[0];
if (!memoryConnection) return [];
const nodeResultData = workflowsStore.getWorkflowResultDataByNodeName(memoryConnection.node);
const memoryOutputData = (nodeResultData ?? [])
.map((data) => get(data, ['data', NodeConnectionType.AiMemory, 0, 0, 'json']) as MemoryOutput)
.find((data) => data.action === 'saveContext');
return (memoryOutputData?.chatHistory ?? []).map((message, index) => {
return {
createdAt: new Date().toISOString(),
text: message.kwargs.content,
id: `preload__${index}`,
sender: last(message.id) === 'HumanMessage' ? 'user' : 'bot',
};
});
}
function onArrowKeyDown({ currentInputValue, key }: ArrowKeyDownPayload) {
const pastMessages = workflowsStore.getPastChatMessages;
const isCurrentInputEmptyOrMatch =
currentInputValue.length === 0 || pastMessages.includes(currentInputValue);
if (isCurrentInputEmptyOrMatch && (key === 'ArrowUp' || key === 'ArrowDown')) {
// Blur the input when the user presses the up or down arrow key
chatEventBus.emit('blurInput');
if (pastMessages.length === 1) {
previousMessageIndex.value = 0;
} else if (key === 'ArrowUp') {
previousMessageIndex.value = (previousMessageIndex.value + 1) % pastMessages.length;
} else if (key === 'ArrowDown') {
previousMessageIndex.value =
(previousMessageIndex.value - 1 + pastMessages.length) % pastMessages.length;
}
chatEventBus.emit(
'setInputValue',
pastMessages[pastMessages.length - 1 - previousMessageIndex.value] ?? '',
);
// Refocus to move the cursor to the end of the input
chatEventBus.emit('focusInput');
}
}
provide(ChatSymbol, chatConfig);
provide(ChatOptionsSymbol, chatOptions);
onMounted(() => {
getTriggerNode();
setConnectedNode();
messages.value = getChatMessages();
setNode();
setTimeout(() => chatEventBus.emit('focusInput'), 0);
});
</script>
<template>
<Modal
:name="WORKFLOW_LM_CHAT_MODAL_KEY"
width="80%"
max-height="80%"
:title="
locale.baseText('chat.window.title', {
interpolate: {
nodeName: connectedNode?.name || locale.baseText('chat.window.noChatNode'),
},
})
"
:event-bus="modalBus"
:scrollable="false"
@keydown.stop
>
<template #content>
<div
:class="$style.workflowLmChat"
data-test-id="workflow-lm-chat-dialog"
:style="messageVars"
>
<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press-canvas']">
<template #beforeMessage="{ message }">
<MessageOptionTooltip
v-if="message.sender === 'bot' && !message.id.includes('preload')"
placement="right"
>
{{ locale.baseText('chat.window.chat.chatMessageOptions.executionId') }}:
<a href="#" @click="displayExecution(message.id)">{{ message.id }}</a>
</MessageOptionTooltip>
<MessageOptionAction
v-if="isTextMessage(message) && message.sender === 'user'"
data-test-id="repost-message-button"
icon="redo"
:label="locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
placement="left"
@click="repostMessage(message)"
/>
<MessageOptionAction
v-if="isTextMessage(message) && message.sender === 'user'"
data-test-id="reuse-message-button"
icon="copy"
:label="locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
placement="left"
@click="reuseMessage(message)"
/>
</template>
</MessagesList>
<div v-if="node" :class="$style.logsWrapper" data-test-id="lm-chat-logs">
<n8n-text :class="$style.logsTitle" tag="p" size="large">{{
locale.baseText('chat.window.logs')
}}</n8n-text>
<div :class="$style.logs">
<LazyRunDataAi
:key="messages.length"
:node="node"
hide-title
slim
:workflow="workflow"
/>
</div>
</div>
</div>
</template>
<template #footer>
<ChatInput
:class="$style.messagesInput"
data-test-id="lm-chat-inputs"
@arrow-key-down="onArrowKeyDown"
/>
<n8n-info-tip class="mt-s">
{{ locale.baseText('chatEmbed.infoTip.description') }}
<a @click="uiStore.openModal(CHAT_EMBED_MODAL_KEY)">
{{ locale.baseText('chatEmbed.infoTip.link') }}
</a>
</n8n-info-tip>
</template>
</Modal>
</template>
<style lang="scss">
.chat-message-markdown ul,
.chat-message-markdown ol {
padding: 0 0 0 1em;
}
</style>
<style module lang="scss">
.no-node-connected {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.workflowLmChat {
--chat--spacing: var(--spacing-m);
--chat--message--padding: var(--spacing-xs);
display: flex;
height: 100%;
z-index: 9999;
min-height: 10rem;
@media (min-height: 34rem) {
min-height: 14.5rem;
}
@media (min-height: 47rem) {
min-height: 25rem;
}
& ::-webkit-scrollbar {
width: 4px;
}
& ::-webkit-scrollbar-thumb {
border-radius: var(--border-radius-base);
background: var(--color-foreground-dark);
border: 1px solid white;
}
& ::-webkit-scrollbar-thumb:hover {
background: var(--color-foreground-xdark);
}
}
.logsWrapper {
--node-icon-color: var(--color-text-base);
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-base);
height: 100%;
overflow: auto;
width: 100%;
padding: var(--spacing-xs) 0;
}
.logsTitle {
margin: 0 var(--spacing-s) var(--spacing-s);
}
.messages {
background-color: var(--color-lm-chat-messages-background);
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-base);
height: 100%;
width: 100%;
overflow: auto;
padding-top: 1.5em;
&:not(:last-child) {
margin-right: 1em;
}
& * {
font-size: var(--font-size-s);
}
}
.messagesInput {
--chat--input--border: var(--input-border-color, var(--border-color-base))
var(--input-border-style, var(--border-style-base))
var(--input-border-width, var(--border-width-base));
--chat--input--border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
--chat--input--send--button--background: transparent;
--chat--input--send--button--color: var(--color-button-secondary-font);
--chat--input--send--button--color-hover: var(--color-primary);
--chat--input--border-active: var(--input-focus-border-color, var(--color-secondary));
--chat--files-spacing: var(--spacing-2xs) 0;
--chat--input--background: var(--color-lm-chat-bot-background);
[data-theme='dark'] & {
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
}
@media (prefers-color-scheme: dark) {
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
}
border-bottom-right-radius: var(--border-radius-base);
border-top-right-radius: var(--border-radius-base);
overflow: hidden;
}
</style>

127
packages/editor-ui/src/components/WorkflowLMChatModal.test.ts
View file

@ -1,127 +0,0 @@
import { createPinia, setActivePinia } from 'pinia';
import { fireEvent, waitFor } from '@testing-library/vue';
import { mock } from 'vitest-mock-extended';
import { NodeConnectionType } from 'n8n-workflow';
import type { IConnections, INode } from 'n8n-workflow';
import WorkflowLMChatModal from '@/components/WorkflowLMChat/WorkflowLMChat.vue';
import { WORKFLOW_LM_CHAT_MODAL_KEY } from '@/constants';
import type { IWorkflowDb } from '@/Interface';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useSettingsStore } from '@/stores/settings.store';
import { useUIStore } from '@/stores/ui.store';
import { useUsersStore } from '@/stores/users.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { createComponentRenderer } from '@/__tests__/render';
import { setupServer } from '@/__tests__/server';
import { defaultNodeDescriptions, mockNodes } from '@/__tests__/mocks';
import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
const connections: IConnections = {
'Chat Trigger': {
main: [
[
{
node: 'Agent',
type: NodeConnectionType.Main,
index: 0,
},
],
],
},
};
const renderComponent = createComponentRenderer(WorkflowLMChatModal, {
props: {
teleported: false,
appendToBody: false,
},
});
async function createPiniaWithAINodes(options = { withConnections: true, withAgentNode: true }) {
const { withConnections, withAgentNode } = options;
const chatTriggerNode = mockNodes[4];
const agentNode = mockNodes[5];
const nodes: INode[] = [chatTriggerNode];
if (withAgentNode) nodes.push(agentNode);
const workflow = mock<IWorkflowDb>({
nodes,
...(withConnections ? { connections } : {}),
});
const pinia = createPinia();
setActivePinia(pinia);
const workflowsStore = useWorkflowsStore();
const nodeTypesStore = useNodeTypesStore();
const uiStore = useUIStore();
nodeTypesStore.setNodeTypes(defaultNodeDescriptions);
workflowsStore.workflow = workflow;
await useSettingsStore().getSettings();
await useUsersStore().loginWithCookie();
uiStore.openModal(WORKFLOW_LM_CHAT_MODAL_KEY);
return pinia;
}
describe('WorkflowLMChatModal', () => {
let server: ReturnType<typeof setupServer>;
beforeAll(() => {
server = setupServer();
});
beforeEach(() => {
createAppModals();
});
afterEach(() => {
cleanupAppModals();
vi.clearAllMocks();
});
afterAll(() => {
server.shutdown();
});
it('should render correctly', async () => {
const { getByTestId } = renderComponent({
pinia: await createPiniaWithAINodes(),
});
await waitFor(() => expect(getByTestId('lmChat-modal')).toBeInTheDocument());
expect(getByTestId('workflow-lm-chat-dialog')).toBeInTheDocument();
});
it('should send and display chat message', async () => {
const { getByTestId } = renderComponent({
pinia: await createPiniaWithAINodes({
withConnections: true,
withAgentNode: true,
}),
});
await waitFor(() => expect(getByTestId('lmChat-modal')).toBeInTheDocument());
const chatDialog = getByTestId('workflow-lm-chat-dialog');
const chatInputsContainer = getByTestId('lm-chat-inputs');
const chatSendButton = chatInputsContainer.querySelector('.chat-input-send-button');
const chatInput = chatInputsContainer.querySelector('textarea');
if (chatInput && chatSendButton) {
await fireEvent.update(chatInput, 'Hello!');
await fireEvent.click(chatSendButton);
}
await waitFor(() =>
expect(chatDialog.querySelectorAll('.chat-message-from-user')).toHaveLength(1),
);
expect(chatDialog.querySelector('.chat-message-from-user')).toHaveTextContent('Hello!');
});
});

8
packages/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue
View file

@ -1,9 +1,17 @@
<script lang="ts" setup>
export interface Props {
outline?: boolean;
}
defineProps<Props>();
</script>
<template>
<N8nButton
label="Chat"
size="large"
icon="comment"
type="primary"
:outline="outline"
data-test-id="workflow-chat-button"
/>
</template>

15
packages/editor-ui/src/composables/useRunWorkflow.ts
View file

@ -22,12 +22,7 @@ import { FORM_NODE_TYPE, NodeConnectionType } from 'n8n-workflow';
import { useToast } from '@/composables/useToast';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
import {
CHAT_TRIGGER_NODE_TYPE,
FORM_TRIGGER_NODE_TYPE,
WAIT_NODE_TYPE,
WORKFLOW_LM_CHAT_MODAL_KEY,
} from '@/constants';
import { CHAT_TRIGGER_NODE_TYPE, FORM_TRIGGER_NODE_TYPE, WAIT_NODE_TYPE } from '@/constants';
import { useRootStore } from '@/stores/root.store';
import { useUIStore } from '@/stores/ui.store';
@ -55,7 +50,6 @@ export function useRunWorkflow(useRunWorkflowOpts: { router: ReturnType<typeof u
const uiStore = useUIStore();
const workflowsStore = useWorkflowsStore();
const executionsStore = useExecutionsStore();
// Starts to execute a workflow on server
async function runWorkflowApi(runData: IStartRunData): Promise<IExecutionPushResponse> {
if (!rootStore.pushConnectionActive) {
@ -175,7 +169,7 @@ export function useRunWorkflow(useRunWorkflowOpts: { router: ReturnType<typeof u
// If the chat node has no input data or pin data, open the chat modal
// and halt the execution
if (!chatHasInputData && !chatHasPinData) {
uiStore.openModal(WORKFLOW_LM_CHAT_MODAL_KEY);
workflowsStore.setPanelOpen('chat', true);
return;
}
}
@ -359,7 +353,10 @@ export function useRunWorkflow(useRunWorkflowOpts: { router: ReturnType<typeof u
let isFormShown =
!options.destinationNode &&
workflowsStore.allNodes.some((node) => node.type === FORM_TRIGGER_NODE_TYPE);
workflowsStore.allNodes.some(
(node) =>
node.type === FORM_TRIGGER_NODE_TYPE && !workflowsStore?.pinnedWorkflowData?.[node.name],
);
const resolveWaitingNodesData = async (): Promise<void> => {
return await new Promise<void>((resolve) => {

6
packages/editor-ui/src/composables/useToast.ts
View file

@ -10,6 +10,7 @@ import { useExternalHooks } from './useExternalHooks';
import { VIEWS } from '@/constants';
import type { ApplicationError } from 'n8n-workflow';
import { useStyles } from './useStyles';
import { useCanvasStore } from '@/stores/canvas.store';
import { useSettingsStore } from '@/stores/settings.store';
export interface NotificationErrorWithNodeAndDescription extends ApplicationError {
@ -29,12 +30,13 @@ export function useToast() {
const i18n = useI18n();
const settingsStore = useSettingsStore();
const { APP_Z_INDEXES } = useStyles();
const canvasStore = useCanvasStore();
const messageDefaults: Partial<Omit<NotificationOptions, 'message'>> = {
dangerouslyUseHTMLString: false,
position: 'bottom-right',
zIndex: APP_Z_INDEXES.TOASTS, // above NDV and modal overlays
offset: settingsStore.isAiAssistantEnabled ? 64 : 0,
offset: settingsStore.isAiAssistantEnabled || workflowsStore.isChatPanelOpen ? 64 : 0,
appendTo: '#app-grid',
customClass: 'content-toast',
};
@ -43,6 +45,8 @@ export function useToast() {
const { message, title } = messageData;
const params = { ...messageDefaults, ...messageData };
params.offset = +canvasStore.panelHeight;
if (typeof message === 'string') {
params.message = sanitizeHtml(message);
}

1
packages/editor-ui/src/constants.ts
View file

@ -51,7 +51,6 @@ export const TAGS_MANAGER_MODAL_KEY = 'tagsManager';
export const ANNOTATION_TAGS_MANAGER_MODAL_KEY = 'annotationTagsManager';
export const VERSIONS_MODAL_KEY = 'versions';
export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
export const WORKFLOW_LM_CHAT_MODAL_KEY = 'lmChat';
export const WORKFLOW_SHARE_MODAL_KEY = 'workflowShare';
export const PERSONALIZATION_MODAL_KEY = 'personalization';
export const CONTACT_PROMPT_MODAL_KEY = 'contactPrompt';

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

@ -169,11 +169,13 @@
"binaryDataDisplay.backToOverviewPage": "Back to overview page",
"binaryDataDisplay.noDataFoundToDisplay": "No data found to display",
"binaryDataDisplay.yourBrowserDoesNotSupport": "Your browser does not support the video element. Kindly update it to latest version.",
"chat.window.title": "Chat Window ({nodeName})",
"chat.window.logs": "Log (for last message)",
"chat.window.title": "Chat",
"chat.window.logs": "Latest Logs",
"chat.window.logsFromNode": "from {nodeName} node",
"chat.window.noChatNode": "No Chat Node",
"chat.window.noExecution": "Nothing got executed yet",
"chat.window.chat.placeholder": "Type a message, or press ‘up’ arrow for previous one",
"chat.window.chat.placeholderPristine": "Type a message",
"chat.window.chat.sendButtonText": "Send",
"chat.window.chat.provideMessage": "Please provide a message",
"chat.window.chat.emptyChatMessage": "Empty chat message",
@ -185,6 +187,10 @@
"chat.window.chat.unpinAndExecute.confirm": "Unpin and send",
"chat.window.chat.unpinAndExecute.cancel": "Cancel",
"chat.window.chat.response.empty": "[No response. Make sure the last executed node outputs the content to display here]",
"chat.window.session.title": "Session",
"chat.window.session.reset.title": "Reset session?",
"chat.window.session.reset.warning": "This will clear all chat messages and the current execution data",
"chat.window.session.reset.confirm": "Reset",
"chatEmbed.infoTip.description": "Add chat to external applications using the n8n chat package.",
"chatEmbed.infoTip.link": "More info",
"chatEmbed.title": "Embed Chat in your website",
@ -951,7 +957,8 @@
"ndv.input.disabled": "The '{nodeName}' node is disabled and won’t execute.",
"ndv.input.disabled.cta": "Enable it",
"ndv.output": "Output",
"ndv.output.ai.empty": "👈 This is {node}’s AI Logs. Click on a node to see the input it received and data it outputted.",
"ndv.output.ai.empty": "👈 Use these logs to see information on how the {node} node completed processing. You can click on a node to see the input it received and data it output.",
"ndv.output.ai.waiting": "Waiting for message",
"ndv.output.outType.logs": "Logs",
"ndv.output.outType.regular": "Output",
"ndv.output.edit": "Edit Output",

3
packages/editor-ui/src/router.ts
View file

@ -24,6 +24,7 @@ const ErrorView = async () => await import('./views/ErrorView.vue');
const ForgotMyPasswordView = async () => await import('./views/ForgotMyPasswordView.vue');
const MainHeader = async () => await import('@/components/MainHeader/MainHeader.vue');
const MainSidebar = async () => await import('@/components/MainSidebar.vue');
const CanvasChat = async () => await import('@/components/CanvasChat/CanvasChat.vue');
const NodeView = async () => await import('@/views/NodeViewSwitcher.vue');
const WorkflowExecutionsView = async () => await import('@/views/WorkflowExecutionsView.vue');
const WorkflowExecutionsLandingPage = async () =>
@ -301,6 +302,7 @@ export const routes: RouteRecordRaw[] = [
default: NodeView,
header: MainHeader,
sidebar: MainSidebar,
footer: CanvasChat,
},
meta: {
nodeView: true,
@ -333,6 +335,7 @@ export const routes: RouteRecordRaw[] = [
default: NodeView,
header: MainHeader,
sidebar: MainSidebar,
footer: CanvasChat,
},
meta: {
nodeView: true,

10
packages/editor-ui/src/stores/canvas.store.ts
View file

@ -54,8 +54,8 @@ export const useCanvasStore = defineStore('canvas', () => {
const jsPlumbInstanceRef = ref<BrowserJsPlumbInstance>();
const isDragging = ref<boolean>(false);
const lastSelectedConnection = ref<Connection>();
const newNodeInsertPosition = ref<XYPosition | null>(null);
const panelHeight = ref(0);
const nodes = computed<INodeUi[]>(() => workflowStore.allNodes);
const triggerNodes = computed<INodeUi[]>(() =>
@ -109,9 +109,9 @@ export const useCanvasStore = defineStore('canvas', () => {
const manualTriggerNode = nodeTypesStore.getNodeType(MANUAL_TRIGGER_NODE_TYPE);
if (!manualTriggerNode) {
console.error('Could not find the manual trigger node');
return null;
}
return {
id: uuid(),
name: manualTriggerNode.defaults.name?.toString() ?? manualTriggerNode.displayName,
@ -324,6 +324,10 @@ export const useCanvasStore = defineStore('canvas', () => {
watch(readOnlyEnv, setReadOnly);
function setPanelHeight(height: number) {
panelHeight.value = height;
}
return {
isDemo,
nodeViewScale,
@ -333,6 +337,8 @@ export const useCanvasStore = defineStore('canvas', () => {
isLoading: loadingService.isLoading,
aiNodes,
lastSelectedConnection: lastSelectedConnectionComputed,
panelHeight: computed(() => panelHeight.value),
setPanelHeight,
setReadOnly,
setLastSelectedConnection,
startLoading: loadingService.startLoading,

2
packages/editor-ui/src/stores/ui.store.ts
View file

@ -23,7 +23,6 @@ import {
VERSIONS_MODAL_KEY,
VIEWS,
WORKFLOW_ACTIVE_MODAL_KEY,
WORKFLOW_LM_CHAT_MODAL_KEY,
WORKFLOW_SETTINGS_MODAL_KEY,
WORKFLOW_SHARE_MODAL_KEY,
EXTERNAL_SECRETS_PROVIDER_MODAL_KEY,
@ -104,7 +103,6 @@ export const useUIStore = defineStore(STORES.UI, () => {
ANNOTATION_TAGS_MANAGER_MODAL_KEY,
NPS_SURVEY_MODAL_KEY,
VERSIONS_MODAL_KEY,
WORKFLOW_LM_CHAT_MODAL_KEY,
WORKFLOW_SETTINGS_MODAL_KEY,
WORKFLOW_SHARE_MODAL_KEY,
WORKFLOW_ACTIVE_MODAL_KEY,

24
packages/editor-ui/src/stores/workflows.store.ts
View file

@ -139,6 +139,8 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
const nodeMetadata = ref<NodeMetadataMap>({});
const isInDebugMode = ref(false);
const chatMessages = ref<string[]>([]);
const isChatPanelOpen = ref(false);
const isLogsPanelOpen = ref(false);
const workflowName = computed(() => workflow.value.name);
@ -1052,8 +1054,12 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
}, {});
}
function setConnections(connections: IConnections): void {
function setConnections(connections: IConnections, updateWorkflow = false): void {
workflow.value.connections = connections;
if (updateWorkflow) {
updateCachedWorkflow();
}
}
function resetAllNodesIssues(): boolean {
@ -1123,6 +1129,11 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
const { [node.name]: removedNodeMetadata, ...remainingNodeMetadata } = nodeMetadata.value;
nodeMetadata.value = remainingNodeMetadata;
// If chat trigger node is removed, close chat
if (node.type === CHAT_TRIGGER_NODE_TYPE) {
setPanelOpen('chat', false);
}
if (workflow.value.pinData && workflow.value.pinData.hasOwnProperty(node.name)) {
const { [node.name]: removedPinData, ...remainingPinData } = workflow.value.pinData;
workflow.value = {
@ -1621,6 +1632,14 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
// End Canvas V2 Functions
//
function setPanelOpen(panel: 'chat' | 'logs', isOpen: boolean) {
if (panel === 'chat') {
isChatPanelOpen.value = isOpen;
}
// Logs panel open/close is tied to the chat panel open/close
isLogsPanelOpen.value = isOpen;
}
return {
workflow,
usedCredentials,
@ -1665,6 +1684,9 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
getWorkflowExecution,
getTotalFinishedExecutionsCount,
getPastChatMessages,
isChatPanelOpen: computed(() => isChatPanelOpen.value),
isLogsPanelOpen: computed(() => isLogsPanelOpen.value),
setPanelOpen,
outgoingConnectionsByNodeName,
incomingConnectionsByNodeName,
nodeHasOutputConnection,

162
packages/editor-ui/src/utils/nodeSettingsUtils.test.ts Normal file
View file

@ -0,0 +1,162 @@
import { describe, it, expect, afterAll } from 'vitest';
import { mock } from 'vitest-mock-extended';
import type { IConnections, NodeParameterValueType } from 'n8n-workflow';
import { updateDynamicConnections } from './nodeSettingsUtils';
import { SWITCH_NODE_TYPE } from '@/constants';
import type { INodeUi, IUpdateInformation } from '@/Interface';
describe('updateDynamicConnections', () => {
afterAll(() => {
vi.clearAllMocks();
});
it('should remove extra outputs when the number of outputs decreases', () => {
const node = mock<INodeUi>({
name: 'TestNode',
type: SWITCH_NODE_TYPE,
parameters: { numberOutputs: 3 },
});
const connections = mock<IConnections>({
TestNode: {
main: [[{ node: 'Node1' }], [{ node: 'Node2' }], [{ node: 'Node3' }]],
},
});
const parameterData = mock<IUpdateInformation<number>>({
name: 'parameters.numberOutputs',
value: 2,
});
const updatedConnections = updateDynamicConnections(node, connections, parameterData);
expect(updatedConnections?.TestNode.main).toHaveLength(2);
});
it('should splice connections when a rule is removed', () => {
const node = mock<INodeUi>({
name: 'TestNode',
type: SWITCH_NODE_TYPE,
parameters: {
rules: { values: [{}, {}, {}] },
options: {},
},
});
const connections = mock<IConnections>({
TestNode: {
main: [[{ node: 'Node1' }], [{ node: 'Node2' }], [{ node: 'Node3' }]],
},
});
const parameterData = mock<IUpdateInformation<number>>({
name: 'parameters.rules.values[1]',
value: undefined,
});
const updatedConnections = updateDynamicConnections(node, connections, parameterData);
expect(updatedConnections?.TestNode.main).toHaveLength(2);
expect(updatedConnections?.TestNode.main[1][0].node).toEqual('Node3');
});
it('should handle fallbackOutput === "extra" and all rules removed', () => {
const node = mock<INodeUi>({
name: 'TestNode',
type: SWITCH_NODE_TYPE,
parameters: {
options: { fallbackOutput: 'extra' },
},
});
const connections = mock<IConnections>({
TestNode: {
main: [[{ node: 'Node1' }], [{ node: 'Node2' }], [{ node: 'Node3' }]],
},
});
const parameterData = mock<IUpdateInformation<number>>({
name: 'parameters.rules.values',
value: undefined,
});
const updatedConnections = updateDynamicConnections(node, connections, parameterData);
expect(updatedConnections?.TestNode.main).toHaveLength(1);
expect(updatedConnections?.TestNode.main[0][0].node).toEqual('Node3');
});
it('should add a new connection when a rule is added', () => {
const node = mock<INodeUi>({
name: 'TestNode',
type: SWITCH_NODE_TYPE,
parameters: {
rules: { values: [{}, {}] },
options: { fallbackOutput: 'none' },
},
});
const connections = mock<IConnections>({
TestNode: {
main: [[{ node: 'Node1' }], [{ node: 'Node2' }]],
},
});
const parameterData = mock<IUpdateInformation<NodeParameterValueType>>({
name: 'parameters.rules.values',
value: [{}, {}, {}],
});
const updatedConnections = updateDynamicConnections(node, connections, parameterData);
expect(updatedConnections?.TestNode.main).toHaveLength(3);
expect(updatedConnections?.TestNode.main[2]).toEqual([]);
});
it('should handle extra output when rule is added and fallbackOutput is extra', () => {
const node = mock<INodeUi>({
name: 'TestNode',
type: SWITCH_NODE_TYPE,
parameters: {
rules: { values: [{}, {}] },
options: { fallbackOutput: 'extra' },
},
});
const connections = mock<IConnections>({
TestNode: {
main: [[{ node: 'Node1' }], [{ node: 'Node2' }], [{ node: 'Node3' }]],
},
});
const parameterData = mock<IUpdateInformation<NodeParameterValueType>>({
name: 'parameters.rules.values',
value: [{}, {}, {}],
});
const updatedConnections = updateDynamicConnections(node, connections, parameterData);
expect(updatedConnections?.TestNode.main).toHaveLength(4);
expect(updatedConnections?.TestNode.main[2]).toEqual([]);
expect(updatedConnections?.TestNode.main[3][0].node).toEqual('Node3');
});
it('should return null if no conditions are met', () => {
const node = mock<INodeUi>({
name: 'TestNode',
type: 'otherNodeType',
});
const connections = mock<IConnections>({
TestNode: { main: [] },
});
const parameterData = mock<IUpdateInformation<number>>({
name: 'parameters.otherParameter',
value: 3,
});
const result = updateDynamicConnections(node, connections, parameterData);
expect(result).toBeNull();
});
});

133
packages/editor-ui/src/utils/nodeSettingsUtils.ts Normal file
View file

@ -0,0 +1,133 @@
import type {
IConnection,
IConnections,
IDataObject,
NodeInputConnections,
NodeParameterValueType,
} from 'n8n-workflow';
import type { INodeUi, IUpdateInformation } from '@/Interface';
import { SWITCH_NODE_TYPE } from '@/constants';
import { isEqual } from 'lodash-es';
import { captureException } from '@sentry/vue';
export function updateDynamicConnections(
node: INodeUi,
workflowConnections: IConnections,
parameterData: IUpdateInformation<NodeParameterValueType>,
) {
const connections = { ...workflowConnections };
try {
if (parameterData.name.includes('conditions') || !connections[node.name]?.main) return null;
if (node.type === SWITCH_NODE_TYPE && parameterData.name === 'parameters.numberOutputs') {
const curentNumberOutputs = node.parameters?.numberOutputs as number;
const newNumberOutputs = parameterData.value as number;
// remove extra outputs
if (newNumberOutputs < curentNumberOutputs) {
connections[node.name].main = connections[node.name].main.slice(0, newNumberOutputs);
return connections;
}
}
if (
node.type === SWITCH_NODE_TYPE &&
parameterData.name === 'parameters.options.fallbackOutput'
) {
const curentFallbackOutput = (node.parameters?.options as { fallbackOutput: string })
?.fallbackOutput as string;
if (curentFallbackOutput === 'extra') {
if (!parameterData.value || parameterData.value !== 'extra') {
connections[node.name].main = connections[node.name].main.slice(0, -1);
return connections;
}
}
}
if (node.type === SWITCH_NODE_TYPE && parameterData.name.includes('parameters.rules.values')) {
const { fallbackOutput } = node.parameters?.options as { fallbackOutput: string };
if (parameterData.value === undefined) {
function extractIndex(path: string): number | null {
const match = path.match(/parameters\.rules\.values\[(\d+)\]$/);
return match ? parseInt(match[1], 10) : null;
}
const index = extractIndex(parameterData.name);
// rule was removed
if (index !== null) {
connections[node.name].main.splice(index, 1);
return connections;
}
// all rules were removed
if (parameterData.name === 'parameters.rules.values') {
if (fallbackOutput === 'extra') {
connections[node.name].main = [
connections[node.name].main[connections[node.name].main.length - 1],
];
} else {
connections[node.name].main = [];
}
return connections;
}
} else if (parameterData.name === 'parameters.rules.values') {
const curentRulesvalues = (node.parameters?.rules as { values: IDataObject[] })?.values;
let lastConnection: IConnection[] | undefined = undefined;
if (
fallbackOutput === 'extra' &&
connections[node.name].main.length === curentRulesvalues.length + 1
) {
lastConnection = connections[node.name].main.pop();
}
// rule was added
const currentRulesLength = (node.parameters?.rules as { values: IDataObject[] })?.values
?.length;
const newRulesLength = (parameterData.value as IDataObject[])?.length;
if (newRulesLength - currentRulesLength === 1) {
connections[node.name].main = [...connections[node.name].main, []];
if (lastConnection) {
connections[node.name].main.push(lastConnection);
}
return connections;
} else {
// order was changed
const newRulesvalues = parameterData.value as IDataObject[];
const updatedConnectionsIndex: number[] = [];
for (const rule of curentRulesvalues) {
const index = newRulesvalues.findIndex((newRule) => isEqual(rule, newRule));
if (index !== -1) {
updatedConnectionsIndex.push(index);
}
}
const reorderedConnections: NodeInputConnections = [];
for (const index of updatedConnectionsIndex) {
reorderedConnections.push(connections[node.name].main[index] ?? []);
}
if (lastConnection) {
reorderedConnections.push(lastConnection);
}
connections[node.name].main = reorderedConnections;
return connections;
}
}
}
} catch (error) {
captureException(error);
}
return null;
}

11
packages/editor-ui/src/views/NodeView.v2.vue
View file

@ -60,7 +60,6 @@ import {
STICKY_NODE_TYPE,
VALID_WORKFLOW_IMPORT_URL_REGEX,
VIEWS,
WORKFLOW_LM_CHAT_MODAL_KEY,
} from '@/constants';
import { useSourceControlStore } from '@/stores/sourceControl.store';
import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
@ -249,6 +248,8 @@ const keyBindingsEnabled = computed(() => {
return !ndvStore.activeNode && uiStore.activeModals.length === 0;
});
const isChatOpen = computed(() => workflowsStore.isChatPanelOpen);
/**
* Initialization
*/
@ -1207,7 +1208,7 @@ const chatTriggerNodePinnedData = computed(() => {
});
async function onOpenChat() {
uiStore.openModal(WORKFLOW_LM_CHAT_MODAL_KEY);
workflowsStore.setPanelOpen('chat', !workflowsStore.isChatPanelOpen);
const payload = {
workflow_id: workflowId.value,
@ -1633,7 +1634,11 @@ onBeforeUnmount(() => {
@mouseleave="onRunWorkflowButtonMouseLeave"
@click="onRunWorkflow"
/>
<CanvasChatButton v-if="containsChatTriggerNodes" @click="onOpenChat" />
<CanvasChatButton
v-if="containsChatTriggerNodes"
:outline="isChatOpen === false"
@click="onOpenChat"
/>
<CanvasStopCurrentExecutionButton
v-if="isStopExecutionButtonVisible"
:stopping="isStoppingExecution"

13
packages/editor-ui/src/views/NodeView.vue
View file

@ -34,7 +34,6 @@ import {
NODE_CREATOR_OPEN_SOURCES,
CHAT_TRIGGER_NODE_TYPE,
MANUAL_CHAT_TRIGGER_NODE_TYPE,
WORKFLOW_LM_CHAT_MODAL_KEY,
AI_NODE_CREATOR_VIEW,
DRAG_EVENT_DATA_KEY,
UPDATE_WEBHOOK_ID_NODE_TYPES,
@ -455,14 +454,14 @@ export default defineComponent({
)
);
},
canvasChatNode() {
return this.nodes.find((node) => node.type === CHAT_TRIGGER_NODE_TYPE);
},
isManualChatOnly(): boolean {
if (!this.canvasChatNode) return false;
return this.containsChatNodes && this.triggerNodes.length === 1 && !this.pinnedChatNodeData;
},
canvasChatNode() {
return this.nodes.find((node) => node.type === CHAT_TRIGGER_NODE_TYPE);
},
pinnedChatNodeData() {
if (!this.canvasChatNode) return null;
@ -513,6 +512,9 @@ export default defineComponent({
: (this.projectsStore.currentProject ?? this.projectsStore.personalProject);
return getResourcePermissions(project?.scopes);
},
isChatOpen() {
return this.workflowsStore.isChatPanelOpen;
},
},
watch: {
// Listen to route changes and load the workflow accordingly
@ -863,7 +865,7 @@ export default defineComponent({
};
this.$telemetry.track('User clicked chat open button', telemetryPayload);
void this.externalHooks.run('nodeView.onOpenChat', telemetryPayload);
this.uiStore.openModal(WORKFLOW_LM_CHAT_MODAL_KEY);
this.workflowsStore.setPanelOpen('chat', !this.workflowsStore.isChatPanelOpen);
},
async onRunWorkflow() {
@ -4651,6 +4653,7 @@ export default defineComponent({
size="large"
icon="comment"
type="primary"
:outline="isChatOpen === false"
data-test-id="workflow-chat-button"
@click.stop="onOpenChat"
/>

2
packages/node-dev/package.json
View file

@ -1,6 +1,6 @@
{
"name": "n8n-node-dev",
"version": "1.67.0",
"version": "1.68.0",
"description": "CLI to simplify n8n credentials/node development",
"main": "dist/src/index",
"types": "dist/src/index.d.ts",

5
packages/nodes-base/nodes/FacebookLeadAds/FacebookLeadAdsTrigger.node.ts
View file

@ -273,7 +273,10 @@ export class FacebookLeadAdsTrigger implements INodeType {
return {
id: lead.id,
data: lead.field_data.reduce(
(acc, field) => ({ ...acc, [field.name]: field.values[0] }),
(acc, field) => ({
...acc,
[field.name]: field.values && field.values.length > 0 ? field.values[0] : null,
}),
{},
),
form: {

6
packages/nodes-base/nodes/FacebookLeadAds/GenericFunctions.ts
View file

@ -33,7 +33,7 @@ export async function facebookApiRequest(
qs,
body,
gzip: true,
uri: `https://graph.facebook.com/v17.0${resource}`,
uri: `https://graph.facebook.com/v21.0${resource}`,
json: true,
};
@ -89,7 +89,7 @@ export async function facebookAppApiRequest(
method,
qs,
gzip: true,
uri: `https://graph.facebook.com/v17.0${resource}`,
uri: `https://graph.facebook.com/v21.0${resource}`,
json: true,
};
@ -181,7 +181,7 @@ export async function facebookPageApiRequest(
qs,
body,
gzip: true,
uri: `https://graph.facebook.com/v17.0${resource}`,
uri: `https://graph.facebook.com/v21.0${resource}`,
json: true,
};

1
packages/nodes-base/nodes/Google/BigQuery/v2/actions/database/insert.operation.ts
View file

@ -275,6 +275,7 @@ export async function execute(this: IExecuteFunctions): Promise<INodeExecutionDa
: '';
throw new NodeOperationError(this.getNode(), `${failedMessage}${stoppedMessage}`, {
description: errors.join('\n, '),
itemIndex: i,
});
}

72
packages/nodes-base/nodes/Google/Drive/test/v2/node/file/upload.test.ts
View file

@ -6,7 +6,7 @@ import * as upload from '../../../../v2/actions/file/upload.operation';
import * as transport from '../../../../v2/transport';
import * as utils from '../../../../v2/helpers/utils';
import { createMockExecuteFunction, driveNode } from '../helpers';
import { createMockExecuteFunction, createTestStream, driveNode } from '../helpers';
jest.mock('../../../../v2/transport', () => {
const originalModule = jest.requireActual('../../../../v2/transport');
@ -30,7 +30,7 @@ jest.mock('../../../../v2/helpers/utils', () => {
getItemBinaryData: jest.fn(async function () {
return {
contentLength: '123',
fileContent: 'Hello Drive!',
fileContent: Buffer.from('Hello Drive!'),
originalFilename: 'original.txt',
mimeType: 'text/plain',
};
@ -43,13 +43,17 @@ describe('test GoogleDriveV2: file upload', () => {
nock.disableNetConnect();
});
beforeEach(() => {
jest.clearAllMocks();
});
afterAll(() => {
nock.restore();
jest.unmock('../../../../v2/transport');
jest.unmock('../../../../v2/helpers/utils');
});
it('should be called with', async () => {
it('should upload buffers', async () => {
const nodeParameters = {
name: 'newFile.txt',
folderId: {
@ -73,10 +77,10 @@ describe('test GoogleDriveV2: file upload', () => {
expect(transport.googleApiRequest).toHaveBeenCalledWith(
'POST',
'/upload/drive/v3/files',
expect.any(Buffer),
{ uploadType: 'media' },
undefined,
{ uploadType: 'resumable' },
undefined,
{ returnFullResponse: true },
{ headers: { 'Content-Length': '123', 'Content-Type': 'text/plain' } },
);
expect(transport.googleApiRequest).toHaveBeenCalledWith(
'PATCH',
@ -94,4 +98,60 @@ describe('test GoogleDriveV2: file upload', () => {
expect(utils.getItemBinaryData).toBeCalledTimes(1);
expect(utils.getItemBinaryData).toHaveBeenCalled();
});
it('should stream large files in 2MB chunks', async () => {
const nodeParameters = {
name: 'newFile.jpg',
folderId: {
__rl: true,
value: 'folderIDxxxxxx',
mode: 'list',
cachedResultName: 'testFolder 3',
cachedResultUrl: 'https://drive.google.com/drive/folders/folderIDxxxxxx',
},
options: {
simplifyOutput: true,
},
};
const fakeExecuteFunction = createMockExecuteFunction(nodeParameters, driveNode);
const httpRequestSpy = jest.spyOn(fakeExecuteFunction.helpers, 'httpRequest');
const fileSize = 7 * 1024 * 1024; // 7MB
jest.mocked(utils.getItemBinaryData).mockResolvedValue({
mimeType: 'image/jpg',
originalFilename: 'test.jpg',
contentLength: fileSize,
fileContent: createTestStream(fileSize),
});
await upload.execute.call(fakeExecuteFunction, 0);
// 4 chunks: 7MB = 3x2MB + 1x1MB
expect(httpRequestSpy).toHaveBeenCalledTimes(4);
expect(httpRequestSpy).toHaveBeenCalledWith(
expect.objectContaining({ body: expect.any(Buffer) }),
);
expect(transport.googleApiRequest).toBeCalledTimes(2);
expect(transport.googleApiRequest).toHaveBeenCalledWith(
'POST',
'/upload/drive/v3/files',
undefined,
{ uploadType: 'resumable' },
undefined,
{ returnFullResponse: true },
);
expect(transport.googleApiRequest).toHaveBeenCalledWith(
'PATCH',
'/drive/v3/files/undefined',
{ mimeType: 'image/jpg', name: 'newFile.jpg', originalFilename: 'test.jpg' },
{
addParents: 'folderIDxxxxxx',
supportsAllDrives: true,
corpora: 'allDrives',
includeItemsFromAllDrives: true,
spaces: 'appDataFolder, drive',
},
);
});
});

23
packages/nodes-base/nodes/Google/Drive/test/v2/node/helpers.ts
View file

@ -2,6 +2,7 @@ import type { IDataObject, IExecuteFunctions, IGetNodeParameterOptions, INode }
import { get } from 'lodash';
import { constructExecutionMetaData, returnJsonArray } from 'n8n-core';
import { Readable } from 'stream';
export const driveNode: INode = {
id: '11',
@ -40,3 +41,25 @@ export const createMockExecuteFunction = (
} as unknown as IExecuteFunctions;
return fakeExecuteFunction;
};
export function createTestStream(byteSize: number) {
let bytesSent = 0;
const CHUNK_SIZE = 64 * 1024; // 64kB chunks (default NodeJS highWaterMark)
return new Readable({
read() {
const remainingBytes = byteSize - bytesSent;
if (remainingBytes <= 0) {
this.push(null);
return;
}
const chunkSize = Math.min(CHUNK_SIZE, remainingBytes);
const chunk = Buffer.alloc(chunkSize, 'A'); // Test data just a string of "A"
bytesSent += chunkSize;
this.push(chunk);
},
});
}

13
packages/nodes-base/nodes/Google/Drive/v2/actions/file/upload.operation.ts
View file

@ -12,6 +12,7 @@ import {
setFileProperties,
setUpdateCommonParams,
setParentFolder,
processInChunks,
} from '../../helpers/utils';
import { updateDisplayOptions } from '@utils/utilities';
@ -129,16 +130,17 @@ export async function execute(this: IExecuteFunctions, i: number): Promise<INode
const uploadUrl = resumableUpload.headers.location;
let offset = 0;
for await (const chunk of fileContent) {
const nextOffset = offset + Number(chunk.length);
// 2MB chunks, needs to be a multiple of 256kB for Google Drive API
const chunkSizeBytes = 2048 * 1024;
await processInChunks(fileContent, chunkSizeBytes, async (chunk, offset) => {
try {
const response = await this.helpers.httpRequest({
method: 'PUT',
url: uploadUrl,
headers: {
'Content-Length': chunk.length,
'Content-Range': `bytes ${offset}-${nextOffset - 1}/${contentLength}`,
'Content-Range': `bytes ${offset}-${offset + chunk.byteLength - 1}/${contentLength}`,
},
body: chunk,
});
@ -146,8 +148,7 @@ export async function execute(this: IExecuteFunctions, i: number): Promise<INode
} catch (error) {
if (error.response?.status !== 308) throw error;
}
offset = nextOffset;
}
});
}
const options = this.getNodeParameter('options', i, {});

26
packages/nodes-base/nodes/Google/Drive/v2/helpers/utils.ts
View file

@ -131,3 +131,29 @@ export function setParentFolder(
return 'root';
}
}
export async function processInChunks(
stream: Readable,
chunkSize: number,
process: (chunk: Buffer, offset: number) => void | Promise<void>,
) {
let buffer = Buffer.alloc(0);
let offset = 0;
for await (const chunk of stream) {
buffer = Buffer.concat([buffer, chunk]);
while (buffer.length >= chunkSize) {
const chunkToProcess = buffer.subarray(0, chunkSize);
await process(chunkToProcess, offset);
buffer = buffer.subarray(chunkSize);
offset += chunkSize;
}
}
// Process last chunk, could be smaller than chunkSize
if (buffer.length > 0) {
await process(buffer, offset);
}
}

24
packages/nodes-base/nodes/Notion/shared/GenericFunctions.ts
View file

@ -575,7 +575,7 @@ export function mapFilters(filtersList: IDataObject[], timezone: string) {
}
return Object.assign(obj, {
['property']: getNameAndType(value.key as string).name,
['property']: getNameAndType(value.key as string)?.name,
[key]: { [`${value.condition}`]: valuePropertyName },
});
}, {});
@ -606,7 +606,7 @@ function simplifyProperty(property: any) {
) {
result = property[type];
} else if (['created_by', 'last_edited_by', 'select'].includes(property.type as string)) {
result = property[type] ? property[type].name : null;
result = property[type] ? property[type]?.name : null;
} else if (['people'].includes(property.type as string)) {
if (Array.isArray(property[type])) {
result = property[type].map((person: any) => person.person?.email || {});
@ -615,35 +615,35 @@ function simplifyProperty(property: any) {
}
} else if (['multi_select'].includes(property.type as string)) {
if (Array.isArray(property[type])) {
result = property[type].map((e: IDataObject) => e.name || {});
result = property[type].map((e: IDataObject) => e?.name || {});
} else {
result = property[type].options.map((e: IDataObject) => e.name || {});
result = property[type].options.map((e: IDataObject) => e?.name || {});
}
} else if (['relation'].includes(property.type as string)) {
if (Array.isArray(property[type])) {
result = property[type].map((e: IDataObject) => e.id || {});
result = property[type].map((e: IDataObject) => e?.id || {});
} else {
result = property[type].database_id;
result = property[type]?.database_id;
}
} else if (['formula'].includes(property.type as string)) {
result = property[type][property[type].type];
result = property[type]?.[property[type]?.type];
} else if (['rollup'].includes(property.type as string)) {
const rollupFunction = property[type].function as string;
const rollupFunction = property[type]?.function as string;
if (rollupFunction.startsWith('count') || rollupFunction.includes('empty')) {
result = property[type].number;
result = property[type]?.number;
if (rollupFunction.includes('percent')) {
result = result * 100;
}
} else if (rollupFunction.startsWith('show') && property[type].type === 'array') {
} else if (rollupFunction.startsWith('show') && property[type]?.type === 'array') {
const elements = property[type].array.map(simplifyProperty).flat();
result = rollupFunction === 'show_unique' ? [...new Set(elements as string)] : elements;
}
} else if (['files'].includes(property.type as string)) {
result = property[type].map(
(file: { type: string; [key: string]: any }) => file[file.type].url,
(file: { type: string; [key: string]: any }) => file[file.type]?.url,
);
} else if (['status'].includes(property.type as string)) {
result = property[type].name;
result = property[type]?.name;
}
return result;
}

2
packages/nodes-base/package.json
View file

@ -1,6 +1,6 @@
{
"name": "n8n-nodes-base",
"version": "1.67.0",
"version": "1.68.0",
"description": "Base nodes of n8n",
"main": "index.js",
"scripts": {

2
packages/workflow/package.json
View file

@ -1,6 +1,6 @@
{
"name": "n8n-workflow",
"version": "1.66.0",
"version": "1.67.0",
"description": "Workflow base code of n8n",
"main": "dist/index.js",
"module": "src/index.ts",

3
packages/workflow/src/Interfaces.ts
View file

@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { CallbackManager as CallbackManagerLC } from '@langchain/core/callbacks/manager';
import type { AxiosProxyConfig } from 'axios';
import type { AxiosProxyConfig, GenericAbortSignal } from 'axios';
import type * as express from 'express';
import type FormData from 'form-data';
import type { PathLike } from 'fs';
@ -530,6 +530,7 @@ export interface IHttpRequestOptions {
};
timeout?: number;
json?: boolean;
abortSignal?: GenericAbortSignal;
}
/**

158
pnpm-lock.yaml
View file

@ -265,7 +265,7 @@ importers:
version: 4.0.7
axios:
specifier: 'catalog:'
version: 1.7.4
version: 1.7.4(debug@4.3.7)
dotenv:
specifier: 8.6.0
version: 8.6.0
@ -333,7 +333,7 @@ importers:
dependencies:
axios:
specifier: 'catalog:'
version: 1.7.4
version: 1.7.4(debug@4.3.7)
packages/@n8n/codemirror-lang:
dependencies:
@ -407,7 +407,7 @@ importers:
version: 3.666.0(@aws-sdk/client-sts@3.666.0)
'@getzep/zep-cloud':
specifier: 1.0.12
version: 1.0.12(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(langchain@0.3.5(7umjwzmwnymi4lyinuvazmp6ki))
version: 1.0.12(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(langchain@0.3.5(4ubssgvn2k3t3hxnzmxuoc2aja))
'@getzep/zep-js':
specifier: 0.9.0
version: 0.9.0
@ -434,7 +434,7 @@ importers:
version: 0.3.1(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
'@langchain/community':
specifier: 0.3.11
version: 0.3.11(simkpjwqw7qnwbripe37u5qu7a)
version: 0.3.11(tzffvezibmkr4px5bpuitcp7xu)
'@langchain/core':
specifier: 'catalog:'
version: 0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8))
@ -521,7 +521,7 @@ importers:
version: 23.0.1
langchain:
specifier: 0.3.5
version: 0.3.5(7umjwzmwnymi4lyinuvazmp6ki)
version: 0.3.5(4ubssgvn2k3t3hxnzmxuoc2aja)
lodash:
specifier: 'catalog:'
version: 4.17.21
@ -774,7 +774,7 @@ importers:
version: 1.11.0
axios:
specifier: 'catalog:'
version: 1.7.4
version: 1.7.4(debug@4.3.7)
bcryptjs:
specifier: 2.4.3
version: 2.4.3
@ -1093,7 +1093,7 @@ importers:
dependencies:
'@langchain/core':
specifier: 'catalog:'
version: 0.3.15(openai@4.69.0(zod@3.23.8))
version: 0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8))
'@n8n/client-oauth2':
specifier: workspace:*
version: link:../@n8n/client-oauth2
@ -1105,7 +1105,7 @@ importers:
version: 1.11.0
axios:
specifier: 'catalog:'
version: 1.7.4
version: 1.7.4(debug@4.3.7)
concat-stream:
specifier: 2.0.0
version: 2.0.0
@ -1395,7 +1395,7 @@ importers:
version: 10.11.0(vue@3.5.11(typescript@5.6.2))
axios:
specifier: 'catalog:'
version: 1.7.4
version: 1.7.4(debug@4.3.7)
bowser:
specifier: 2.11.0
version: 2.11.0
@ -1477,6 +1477,9 @@ importers:
vue-chartjs:
specifier: ^5.2.0
version: 5.2.0(chart.js@4.4.0)(vue@3.5.11(typescript@5.6.2))
vue-github-button:
specifier: ^3.1.3
version: 3.1.3
vue-i18n:
specifier: ^9.2.2
version: 9.2.2(vue@3.5.11(typescript@5.6.2))
@ -1872,7 +1875,7 @@ importers:
version: 0.15.2
axios:
specifier: 'catalog:'
version: 1.7.4
version: 1.7.4(debug@4.3.7)
callsites:
specifier: 3.1.0
version: 3.1.0
@ -1918,7 +1921,7 @@ importers:
devDependencies:
'@langchain/core':
specifier: 'catalog:'
version: 0.3.15(openai@4.69.0)
version: 0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8))
'@types/deep-equal':
specifier: ^1.0.1
version: 1.0.1
@ -5392,6 +5395,7 @@ packages:
'@xmldom/xmldom@0.8.6':
resolution: {integrity: sha512-uRjjusqpoqfmRkTaNuLJ2VohVr67Q5YwDATW3VU7PfzTj6IRaihGrYI7zckGZjxQPBIp63nfvJbM+Yu5ICh0Bg==}
engines: {node: '>=10.0.0'}
deprecated: this version has critical issues, please update to the latest version
a-sync-waterfall@1.0.1:
resolution: {integrity: sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==}
@ -7632,6 +7636,9 @@ packages:
getpass@0.1.7:
resolution: {integrity: sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==}
github-buttons@2.29.1:
resolution: {integrity: sha512-TV3YgAKda5hPz75n7QXmGCsSzgVya1vvmBieebg3EB5ScmashTZ0FldViG1aU2d4V5rcAGrtQ7k5uAaCo0A4PA==}
github-from-package@0.0.0:
resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
@ -12074,6 +12081,9 @@ packages:
peerDependencies:
eslint: '>=6.0.0'
vue-github-button@3.1.3:
resolution: {integrity: sha512-ZdOnUuYJL/wUsxISsC96TARzCdf1twaWooZoI14+g4RHsJltPY+Agw6Ox6pjuMqMX0uhSK1JOMFUFNCQGlcZGA==}
vue-i18n@9.2.2:
resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
engines: {node: '>= 14'}
@ -14066,7 +14076,7 @@ snapshots:
'@gar/promisify@1.1.3':
optional: true
'@getzep/zep-cloud@1.0.12(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(langchain@0.3.5(7umjwzmwnymi4lyinuvazmp6ki))':
'@getzep/zep-cloud@1.0.12(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(langchain@0.3.5(4ubssgvn2k3t3hxnzmxuoc2aja))':
dependencies:
form-data: 4.0.0
node-fetch: 2.7.0(encoding@0.1.13)
@ -14075,7 +14085,7 @@ snapshots:
zod: 3.23.8
optionalDependencies:
'@langchain/core': 0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8))
langchain: 0.3.5(7umjwzmwnymi4lyinuvazmp6ki)
langchain: 0.3.5(4ubssgvn2k3t3hxnzmxuoc2aja)
transitivePeerDependencies:
- encoding
@ -14542,7 +14552,7 @@ snapshots:
- aws-crt
- encoding
'@langchain/community@0.3.11(simkpjwqw7qnwbripe37u5qu7a)':
'@langchain/community@0.3.11(tzffvezibmkr4px5bpuitcp7xu)':
dependencies:
'@ibm-cloud/watsonx-ai': 1.1.2
'@langchain/core': 0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8))
@ -14552,7 +14562,7 @@ snapshots:
flat: 5.0.2
ibm-cloud-sdk-core: 5.1.0
js-yaml: 4.1.0
langchain: 0.3.5(7umjwzmwnymi4lyinuvazmp6ki)
langchain: 0.3.5(4ubssgvn2k3t3hxnzmxuoc2aja)
langsmith: 0.2.3(openai@4.69.0(encoding@0.1.13)(zod@3.23.8))
uuid: 10.0.0
zod: 3.23.8
@ -14565,7 +14575,7 @@ snapshots:
'@aws-sdk/client-s3': 3.666.0
'@aws-sdk/credential-provider-node': 3.666.0(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)
'@azure/storage-blob': 12.18.0(encoding@0.1.13)
'@getzep/zep-cloud': 1.0.12(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(langchain@0.3.5(7umjwzmwnymi4lyinuvazmp6ki))
'@getzep/zep-cloud': 1.0.12(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(langchain@0.3.5(4ubssgvn2k3t3hxnzmxuoc2aja))
'@getzep/zep-js': 0.9.0
'@google-ai/generativelanguage': 2.6.0(encoding@0.1.13)
'@google-cloud/storage': 7.12.1(encoding@0.1.13)
@ -14629,38 +14639,6 @@ snapshots:
transitivePeerDependencies:
- openai
'@langchain/core@0.3.15(openai@4.69.0(zod@3.23.8))':
dependencies:
ansi-styles: 5.2.0
camelcase: 6.3.0
decamelize: 1.2.0
js-tiktoken: 1.0.12
langsmith: 0.2.3(openai@4.69.0(zod@3.23.8))
mustache: 4.2.0
p-queue: 6.6.2
p-retry: 4.6.2
uuid: 10.0.0
zod: 3.23.8
zod-to-json-schema: 3.23.3(zod@3.23.8)
transitivePeerDependencies:
- openai
'@langchain/core@0.3.15(openai@4.69.0)':
dependencies:
ansi-styles: 5.2.0
camelcase: 6.3.0
decamelize: 1.2.0
js-tiktoken: 1.0.12
langsmith: 0.2.3(openai@4.69.0)
mustache: 4.2.0
p-queue: 6.6.2
p-retry: 4.6.2
uuid: 10.0.0
zod: 3.23.8
zod-to-json-schema: 3.23.3(zod@3.23.8)
transitivePeerDependencies:
- openai
'@langchain/google-common@0.1.1(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(zod@3.23.8)':
dependencies:
'@langchain/core': 0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8))
@ -15278,7 +15256,7 @@ snapshots:
'@rudderstack/rudder-sdk-node@2.0.9(tslib@2.6.2)':
dependencies:
axios: 1.7.4
axios: 1.7.4(debug@4.3.7)
axios-retry: 3.7.0
component-type: 1.2.1
join-component: 1.1.0
@ -17534,23 +17512,7 @@ snapshots:
'@babel/runtime': 7.24.7
is-retry-allowed: 2.2.0
axios@1.7.4:
dependencies:
follow-redirects: 1.15.6(debug@4.3.6)
form-data: 4.0.0
proxy-from-env: 1.1.0
transitivePeerDependencies:
- debug
axios@1.7.4(debug@4.3.7):
dependencies:
follow-redirects: 1.15.6(debug@4.3.7)
form-data: 4.0.0
proxy-from-env: 1.1.0
transitivePeerDependencies:
- debug
axios@1.7.7:
dependencies:
follow-redirects: 1.15.6(debug@4.3.6)
form-data: 4.0.0
@ -19226,7 +19188,7 @@ snapshots:
eslint-import-resolver-node@0.3.9:
dependencies:
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
is-core-module: 2.13.1
resolve: 1.22.8
transitivePeerDependencies:
@ -19251,7 +19213,7 @@ snapshots:
eslint-module-utils@2.8.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
dependencies:
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
optionalDependencies:
'@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.6.2)
eslint: 8.57.0
@ -19271,7 +19233,7 @@ snapshots:
array.prototype.findlastindex: 1.2.3
array.prototype.flat: 1.3.2
array.prototype.flatmap: 1.3.2
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
doctrine: 2.1.0
eslint: 8.57.0
eslint-import-resolver-node: 0.3.9
@ -19983,6 +19945,8 @@ snapshots:
dependencies:
assert-plus: 1.0.0
github-buttons@2.29.1: {}
github-from-package@0.0.0: {}
github-slugger@2.0.0: {}
@ -20062,7 +20026,7 @@ snapshots:
array-parallel: 0.1.3
array-series: 0.1.5
cross-spawn: 4.0.2
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
transitivePeerDependencies:
- supports-color
@ -20448,7 +20412,7 @@ snapshots:
infisical-node@1.3.0:
dependencies:
axios: 1.7.7
axios: 1.7.7(debug@4.3.6)
dotenv: 16.3.1
tweetnacl: 1.0.3
tweetnacl-util: 0.15.1
@ -21378,7 +21342,7 @@ snapshots:
kuler@2.0.0: {}
langchain@0.3.5(7umjwzmwnymi4lyinuvazmp6ki):
langchain@0.3.5(4ubssgvn2k3t3hxnzmxuoc2aja):
dependencies:
'@langchain/core': 0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8))
'@langchain/openai': 0.3.11(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
@ -21402,7 +21366,7 @@ snapshots:
'@langchain/groq': 0.1.2(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
'@langchain/mistralai': 0.1.1(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
'@langchain/ollama': 0.1.1(@langchain/core@0.3.15(openai@4.69.0(encoding@0.1.13)(zod@3.23.8)))
axios: 1.7.4
axios: 1.7.4(debug@4.3.7)
cheerio: 1.0.0
handlebars: 4.7.8
transitivePeerDependencies:
@ -21421,28 +21385,6 @@ snapshots:
optionalDependencies:
openai: 4.69.0(encoding@0.1.13)(zod@3.23.8)
langsmith@0.2.3(openai@4.69.0(zod@3.23.8)):
dependencies:
'@types/uuid': 10.0.0
commander: 10.0.1
p-queue: 6.6.2
p-retry: 4.6.2
semver: 7.6.0
uuid: 10.0.0
optionalDependencies:
openai: 4.69.0(zod@3.23.8)
langsmith@0.2.3(openai@4.69.0):
dependencies:
'@types/uuid': 10.0.0
commander: 10.0.1
p-queue: 6.6.2
p-retry: 4.6.2
semver: 7.6.0
uuid: 10.0.0
optionalDependencies:
openai: 4.69.0(zod@3.23.8)
lazy-ass@1.6.0: {}
ldapts@4.2.6:
@ -22777,22 +22719,6 @@ snapshots:
- encoding
- supports-color
openai@4.69.0(zod@3.23.8):
dependencies:
'@types/node': 18.16.16
'@types/node-fetch': 2.6.4
abort-controller: 3.0.0
agentkeepalive: 4.2.1
form-data-encoder: 1.7.2
formdata-node: 4.4.1
node-fetch: 2.7.0(encoding@0.1.13)
optionalDependencies:
zod: 3.23.8
transitivePeerDependencies:
- encoding
- supports-color
optional: true
openapi-sampler@1.5.1:
dependencies:
'@types/json-schema': 7.0.15
@ -22973,7 +22899,7 @@ snapshots:
pdf-parse@1.1.1:
dependencies:
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
node-ensure: 0.0.0
transitivePeerDependencies:
- supports-color
@ -23175,7 +23101,7 @@ snapshots:
posthog-node@3.2.1:
dependencies:
axios: 1.7.7
axios: 1.7.7(debug@4.3.6)
rusha: 0.8.14
transitivePeerDependencies:
- debug
@ -23804,7 +23730,7 @@ snapshots:
rhea@1.0.24:
dependencies:
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
transitivePeerDependencies:
- supports-color
@ -24180,7 +24106,7 @@ snapshots:
asn1.js: 5.4.1
asn1.js-rfc2560: 5.0.1(asn1.js@5.4.1)
asn1.js-rfc5280: 3.0.0
axios: 1.7.7
axios: 1.7.7(debug@4.3.6)
big-integer: 1.6.51
bignumber.js: 9.1.2
binascii: 0.0.2
@ -25420,6 +25346,10 @@ snapshots:
transitivePeerDependencies:
- supports-color
vue-github-button@3.1.3:
dependencies:
github-buttons: 2.29.1
vue-i18n@9.2.2(vue@3.5.11(typescript@5.6.2)):
dependencies:
'@intlify/core-base': 9.2.2