mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-14 08:34:07 -08:00
Merge remote-tracking branch 'origin/master' into ADO-2753/feature-add-a-warning-when-no-tool-is-called
This commit is contained in:
commit
374ebcda3b
4
.vscode/launch.json
vendored
4
.vscode/launch.json
vendored
|
@ -47,9 +47,7 @@
|
|||
"request": "launch",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node",
|
||||
"env": {
|
||||
// "N8N_PORT": "5679",
|
||||
},
|
||||
"envFile": "${workspaceFolder}/.env",
|
||||
"outputCapture": "std",
|
||||
"killBehavior": "polite"
|
||||
},
|
||||
|
|
64
CHANGELOG.md
64
CHANGELOG.md
|
@ -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)
|
||||
|
||||
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -11,6 +11,7 @@ export const getAddProjectButton = () =>
|
|||
export const getProjectTabs = () => cy.getByTestId('project-tabs').find('a');
|
||||
export const getProjectTabWorkflows = () => getProjectTabs().filter('a[href$="/workflows"]');
|
||||
export const getProjectTabCredentials = () => getProjectTabs().filter('a[href$="/credentials"]');
|
||||
export const getProjectTabExecutions = () => getProjectTabs().filter('a[href$="/executions"]');
|
||||
export const getProjectTabSettings = () => getProjectTabs().filter('a[href$="/settings"]');
|
||||
export const getProjectSettingsNameInput = () =>
|
||||
cy.getByTestId('project-settings-name-input').find('input');
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -14,7 +14,6 @@ import {
|
|||
} from './../constants';
|
||||
import {
|
||||
closeManualChatModal,
|
||||
getManualChatDialog,
|
||||
getManualChatMessages,
|
||||
getManualChatModal,
|
||||
getManualChatModalLogs,
|
||||
|
@ -170,7 +169,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', () => {
|
||||
|
@ -210,7 +209,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', () => {
|
||||
|
@ -231,8 +230,6 @@ describe('Langchain Integration', () => {
|
|||
|
||||
clickManualChatButton();
|
||||
|
||||
getManualChatModalLogs().should('not.exist');
|
||||
|
||||
const inputMessage = 'Hello!';
|
||||
const outputMessage = 'Hi there! How can I assist you today?';
|
||||
const runData = [
|
||||
|
@ -337,6 +334,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', () => {
|
||||
|
@ -361,6 +360,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();
|
||||
|
|
|
@ -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();
|
||||
|
||||
|
|
|
@ -51,7 +51,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
|
|||
});
|
||||
|
||||
projects.getHomeButton().click();
|
||||
projects.getProjectTabs().should('have.length', 2);
|
||||
projects.getProjectTabs().should('have.length', 3);
|
||||
|
||||
projects.getProjectTabCredentials().click();
|
||||
credentialsPage.getters.credentialCards().should('not.have.length');
|
||||
|
@ -101,7 +101,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
|
|||
|
||||
projects.getMenuItems().first().click();
|
||||
workflowsPage.getters.workflowCards().should('not.have.length');
|
||||
projects.getProjectTabs().should('have.length', 3);
|
||||
projects.getProjectTabs().should('have.length', 4);
|
||||
|
||||
workflowsPage.getters.newWorkflowButtonCard().click();
|
||||
|
||||
|
@ -176,7 +176,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
|
|||
let menuItems = cy.getByTestId('menu-item');
|
||||
|
||||
menuItems.filter('[class*=active_]').should('have.length', 1);
|
||||
menuItems.filter(':contains("Home")[class*=active_]').should('exist');
|
||||
menuItems.filter(':contains("Overview")[class*=active_]').should('exist');
|
||||
|
||||
projects.getMenuItems().first().click();
|
||||
|
||||
|
@ -222,7 +222,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
|
|||
menuItems = cy.getByTestId('menu-item');
|
||||
|
||||
menuItems.filter('[class*=active_]').should('have.length', 1);
|
||||
menuItems.filter(':contains("Home")[class*=active_]').should('exist');
|
||||
menuItems.filter(':contains("Overview")[class*=active_]').should('exist');
|
||||
|
||||
workflowsPage.getters.workflowCards().should('have.length', 2).first().click();
|
||||
|
||||
|
@ -230,7 +230,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
|
|||
cy.getByTestId('execute-workflow-button').should('be.visible');
|
||||
|
||||
menuItems = cy.getByTestId('menu-item');
|
||||
menuItems.filter(':contains("Home")[class*=active_]').should('not.exist');
|
||||
menuItems.filter(':contains("Overview")[class*=active_]').should('not.exist');
|
||||
|
||||
menuItems = cy.getByTestId('menu-item');
|
||||
menuItems.filter('[class*=active_]').should('have.length', 1);
|
||||
|
@ -441,9 +441,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
|
|||
.should('contain.text', 'Notion account personal project');
|
||||
});
|
||||
|
||||
// Skip flaky test
|
||||
// eslint-disable-next-line n8n-local-rules/no-skipped-tests
|
||||
it.skip('should move resources between projects', () => {
|
||||
it('should move resources between projects', () => {
|
||||
cy.signinAsOwner();
|
||||
cy.visit(workflowsPage.url);
|
||||
|
||||
|
@ -686,9 +684,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
|
|||
.should('have.length', 1);
|
||||
});
|
||||
|
||||
// Skip flaky test
|
||||
// eslint-disable-next-line n8n-local-rules/no-skipped-tests
|
||||
it.skip('should allow to change inaccessible credential when the workflow was moved to a team project', () => {
|
||||
it('should allow to change inaccessible credential when the workflow was moved to a team project', () => {
|
||||
cy.signinAsOwner();
|
||||
cy.visit(workflowsPage.url);
|
||||
|
||||
|
@ -701,9 +697,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
|
|||
projects.getHomeButton().click();
|
||||
workflowsPage.getters.workflowCards().should('not.have.length');
|
||||
workflowsPage.getters.newWorkflowButtonCard().click();
|
||||
workflowsPage.getters.workflowCards().should('not.have.length');
|
||||
|
||||
workflowsPage.getters.newWorkflowButtonCard().click();
|
||||
workflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
|
||||
workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME, true, true);
|
||||
ndv.getters.backToCanvas().click();
|
||||
|
@ -789,7 +783,8 @@ describe('Projects', { disableAutoLogin: true }, () => {
|
|||
cy.get('input[name="password"]').type(INSTANCE_MEMBERS[0].password);
|
||||
cy.getByTestId('form-submit-button').click();
|
||||
|
||||
mainSidebar.getters.executions().click();
|
||||
projects.getMenuItems().last().click();
|
||||
projects.getProjectTabExecutions().click();
|
||||
cy.getByTestId('global-execution-list-item').first().find('td:last button').click();
|
||||
getVisibleDropdown()
|
||||
.find('li')
|
||||
|
|
|
@ -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');
|
||||
|
@ -224,6 +225,54 @@ describe('AI Assistant::enabled', () => {
|
|||
.should('contain.text', 'item.json.myNewField = 1');
|
||||
});
|
||||
|
||||
it('Should ignore node execution success and error messages after the node run successfully once', () => {
|
||||
const getParameter = () => ndv.getters.parameterInput('jsCode').should('be.visible');
|
||||
|
||||
const getEditor = () => getParameter().find('.cm-content').should('exist');
|
||||
|
||||
cy.intercept('POST', '/rest/ai/chat', {
|
||||
statusCode: 200,
|
||||
fixture: 'aiAssistant/responses/code_diff_suggestion_response.json',
|
||||
}).as('chatRequest');
|
||||
|
||||
cy.createFixtureWorkflow('aiAssistant/workflows/test_workflow.json');
|
||||
wf.actions.openNode('Code');
|
||||
ndv.getters.nodeExecuteButton().click();
|
||||
aiAssistant.getters.nodeErrorViewAssistantButton().click({ force: true });
|
||||
cy.wait('@chatRequest');
|
||||
|
||||
cy.intercept('POST', '/rest/ai/chat', {
|
||||
statusCode: 200,
|
||||
fixture: 'aiAssistant/responses/node_execution_succeeded_response.json',
|
||||
}).as('chatRequest2');
|
||||
|
||||
getEditor()
|
||||
.type('{selectall}')
|
||||
.paste(
|
||||
'for (const item of $input.all()) {\n item.json.myNewField = 1;\n}\n\nreturn $input.all();',
|
||||
);
|
||||
|
||||
ndv.getters.nodeExecuteButton().click();
|
||||
|
||||
getEditor()
|
||||
.type('{selectall}')
|
||||
.paste(
|
||||
'for (const item of $input.all()) {\n item.json.myNewField = 1aaaa!;\n}\n\nreturn $input.all();',
|
||||
);
|
||||
|
||||
ndv.getters.nodeExecuteButton().click();
|
||||
|
||||
aiAssistant.getters.chatMessagesAssistant().should('have.length', 3);
|
||||
|
||||
aiAssistant.getters
|
||||
.chatMessagesAssistant()
|
||||
.eq(2)
|
||||
.should(
|
||||
'contain.text',
|
||||
'Code node ran successfully, did my solution help resolve your issue?\nQuick reply 👇Yes, thanksNo, I am still stuck',
|
||||
);
|
||||
});
|
||||
|
||||
it('should end chat session when `end_session` event is received', () => {
|
||||
cy.intercept('POST', '/rest/ai/chat', {
|
||||
statusCode: 200,
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"sessionId": "1",
|
||||
"messages": [
|
||||
{
|
||||
"role": "assistant",
|
||||
"type": "message",
|
||||
"text": "**Code** node ran successfully, did my solution help resolve your issue?",
|
||||
"quickReplies": [
|
||||
{
|
||||
"text": "Yes, thanks",
|
||||
"type": "all-good",
|
||||
"isFeedback": true
|
||||
},
|
||||
{
|
||||
"text": "No, I am still stuck",
|
||||
"type": "still-stuck",
|
||||
"isFeedback": true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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(),
|
||||
}));
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@n8n/config",
|
||||
"version": "1.17.0",
|
||||
"version": "1.18.0",
|
||||
"scripts": {
|
||||
"clean": "rimraf dist .turbo",
|
||||
"dev": "pnpm watch",
|
||||
|
|
|
@ -21,7 +21,7 @@ import { sqlAgentAgentProperties } from './agents/SqlAgent/description';
|
|||
import { sqlAgentAgentExecute } from './agents/SqlAgent/execute';
|
||||
import { toolsAgentProperties } from './agents/ToolsAgent/description';
|
||||
import { toolsAgentExecute } from './agents/ToolsAgent/execute';
|
||||
import { promptTypeOptions, textInput } from '../../../utils/descriptions';
|
||||
import { promptTypeOptions, textFromPreviousNode, textInput } from '../../../utils/descriptions';
|
||||
|
||||
// Function used in the inputs expression to figure out which inputs to
|
||||
// display based on the agent type
|
||||
|
@ -341,6 +341,17 @@ export class Agent implements INodeType {
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
...textFromPreviousNode,
|
||||
displayOptions: {
|
||||
show: { promptType: ['auto'], '@version': [{ _cnd: { gte: 1.7 } }] },
|
||||
// SQL Agent has data source and credentials parameters so we need to include this input there manually
|
||||
// to preserve the order
|
||||
hide: {
|
||||
agent: ['sqlAgent'],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
...textInput,
|
||||
displayOptions: {
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
import type { INodeProperties } from 'n8n-workflow';
|
||||
import { promptTypeOptions, textInput } from '../../../../../utils/descriptions';
|
||||
|
||||
import { SQL_PREFIX, SQL_SUFFIX } from './other/prompts';
|
||||
import {
|
||||
promptTypeOptions,
|
||||
textFromPreviousNode,
|
||||
textInput,
|
||||
} from '../../../../../utils/descriptions';
|
||||
|
||||
const dataSourceOptions: INodeProperties = {
|
||||
displayName: 'Data Source',
|
||||
|
@ -114,6 +119,12 @@ export const sqlAgentAgentProperties: INodeProperties[] = [
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
...textFromPreviousNode,
|
||||
displayOptions: {
|
||||
show: { promptType: ['auto'], '@version': [{ _cnd: { gte: 1.7 } }], agent: ['sqlAgent'] },
|
||||
},
|
||||
},
|
||||
{
|
||||
...textInput,
|
||||
displayOptions: {
|
||||
|
|
|
@ -1,3 +1,9 @@
|
|||
import type { BaseChatMemory } from '@langchain/community/memory/chat_memory';
|
||||
import type { BaseLanguageModel } from '@langchain/core/language_models/base';
|
||||
import type { DataSource } from '@n8n/typeorm';
|
||||
import type { SqlCreatePromptArgs } from 'langchain/agents/toolkits/sql';
|
||||
import { SqlToolkit, createSqlAgent } from 'langchain/agents/toolkits/sql';
|
||||
import { SqlDatabase } from 'langchain/sql_db';
|
||||
import {
|
||||
type IExecuteFunctions,
|
||||
type INodeExecutionData,
|
||||
|
@ -6,19 +12,12 @@ import {
|
|||
type IDataObject,
|
||||
} from 'n8n-workflow';
|
||||
|
||||
import { SqlDatabase } from 'langchain/sql_db';
|
||||
import type { SqlCreatePromptArgs } from 'langchain/agents/toolkits/sql';
|
||||
import { SqlToolkit, createSqlAgent } from 'langchain/agents/toolkits/sql';
|
||||
import type { BaseLanguageModel } from '@langchain/core/language_models/base';
|
||||
import type { BaseChatMemory } from '@langchain/community/memory/chat_memory';
|
||||
import type { DataSource } from '@n8n/typeorm';
|
||||
|
||||
import { getMysqlDataSource } from './other/handlers/mysql';
|
||||
import { getPostgresDataSource } from './other/handlers/postgres';
|
||||
import { getSqliteDataSource } from './other/handlers/sqlite';
|
||||
import { SQL_PREFIX, SQL_SUFFIX } from './other/prompts';
|
||||
import { getPromptInputByType, serializeChatHistory } from '../../../../../utils/helpers';
|
||||
import { getTracingConfig } from '../../../../../utils/tracing';
|
||||
import { getSqliteDataSource } from './other/handlers/sqlite';
|
||||
import { getPostgresDataSource } from './other/handlers/postgres';
|
||||
import { SQL_PREFIX, SQL_SUFFIX } from './other/prompts';
|
||||
import { getMysqlDataSource } from './other/handlers/mysql';
|
||||
|
||||
const parseTablesString = (tablesString: string) =>
|
||||
tablesString
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { AgentExecutor } from 'langchain/agents';
|
||||
import { OpenAI as OpenAIClient } from 'openai';
|
||||
import type { OpenAIToolType } from 'langchain/dist/experimental/openai_assistant/schema';
|
||||
import { OpenAIAssistantRunnable } from 'langchain/experimental/openai_assistant';
|
||||
import { NodeConnectionType, NodeOperationError } from 'n8n-workflow';
|
||||
import type {
|
||||
|
@ -8,10 +8,11 @@ import type {
|
|||
INodeType,
|
||||
INodeTypeDescription,
|
||||
} from 'n8n-workflow';
|
||||
import type { OpenAIToolType } from 'langchain/dist/experimental/openai_assistant/schema';
|
||||
import { OpenAI as OpenAIClient } from 'openai';
|
||||
|
||||
import { formatToOpenAIAssistantTool } from './utils';
|
||||
import { getConnectedTools } from '../../../utils/helpers';
|
||||
import { getTracingConfig } from '../../../utils/tracing';
|
||||
import { formatToOpenAIAssistantTool } from './utils';
|
||||
|
||||
export class OpenAiAssistant implements INodeType {
|
||||
description: INodeTypeDescription = {
|
||||
|
|
|
@ -36,6 +36,7 @@ import {
|
|||
getCustomErrorMessage as getCustomOpenAiErrorMessage,
|
||||
isOpenAiError,
|
||||
} from '../../vendors/OpenAi/helpers/error-handling';
|
||||
import { promptTypeOptions, textFromPreviousNode } from '../../../utils/descriptions';
|
||||
|
||||
interface MessagesTemplate {
|
||||
type: string;
|
||||
|
@ -253,7 +254,7 @@ export class ChainLlm implements INodeType {
|
|||
name: 'chainLlm',
|
||||
icon: 'fa:link',
|
||||
group: ['transform'],
|
||||
version: [1, 1.1, 1.2, 1.3, 1.4],
|
||||
version: [1, 1.1, 1.2, 1.3, 1.4, 1.5],
|
||||
description: 'A simple chain to prompt a large language model',
|
||||
defaults: {
|
||||
name: 'Basic LLM Chain',
|
||||
|
@ -315,30 +316,16 @@ export class ChainLlm implements INodeType {
|
|||
},
|
||||
},
|
||||
{
|
||||
displayName: 'Prompt',
|
||||
name: 'promptType',
|
||||
type: 'options',
|
||||
options: [
|
||||
{
|
||||
// eslint-disable-next-line n8n-nodes-base/node-param-display-name-miscased
|
||||
name: 'Take from previous node automatically',
|
||||
value: 'auto',
|
||||
description: 'Looks for an input field called chatInput',
|
||||
},
|
||||
{
|
||||
// eslint-disable-next-line n8n-nodes-base/node-param-display-name-miscased
|
||||
name: 'Define below',
|
||||
value: 'define',
|
||||
description:
|
||||
'Use an expression to reference data in previous nodes or enter static text',
|
||||
},
|
||||
],
|
||||
...promptTypeOptions,
|
||||
displayOptions: {
|
||||
hide: {
|
||||
'@version': [1, 1.1, 1.2, 1.3],
|
||||
},
|
||||
},
|
||||
default: 'auto',
|
||||
},
|
||||
{
|
||||
...textFromPreviousNode,
|
||||
displayOptions: { show: { promptType: ['auto'], '@version': [{ _cnd: { gte: 1.5 } }] } },
|
||||
},
|
||||
{
|
||||
displayName: 'Text',
|
||||
|
|
|
@ -1,3 +1,12 @@
|
|||
import type { BaseLanguageModel } from '@langchain/core/language_models/base';
|
||||
import {
|
||||
ChatPromptTemplate,
|
||||
SystemMessagePromptTemplate,
|
||||
HumanMessagePromptTemplate,
|
||||
PromptTemplate,
|
||||
} from '@langchain/core/prompts';
|
||||
import type { BaseRetriever } from '@langchain/core/retrievers';
|
||||
import { RetrievalQAChain } from 'langchain/chains';
|
||||
import {
|
||||
NodeConnectionType,
|
||||
type IExecuteFunctions,
|
||||
|
@ -7,20 +16,12 @@ import {
|
|||
NodeOperationError,
|
||||
} from 'n8n-workflow';
|
||||
|
||||
import { RetrievalQAChain } from 'langchain/chains';
|
||||
import type { BaseLanguageModel } from '@langchain/core/language_models/base';
|
||||
import type { BaseRetriever } from '@langchain/core/retrievers';
|
||||
import {
|
||||
ChatPromptTemplate,
|
||||
SystemMessagePromptTemplate,
|
||||
HumanMessagePromptTemplate,
|
||||
PromptTemplate,
|
||||
} from '@langchain/core/prompts';
|
||||
import { getTemplateNoticeField } from '../../../utils/sharedFields';
|
||||
import { promptTypeOptions, textFromPreviousNode } from '../../../utils/descriptions';
|
||||
import { getPromptInputByType, isChatInstance } from '../../../utils/helpers';
|
||||
import { getTemplateNoticeField } from '../../../utils/sharedFields';
|
||||
import { getTracingConfig } from '../../../utils/tracing';
|
||||
|
||||
const SYSTEM_PROMPT_TEMPLATE = `Use the following pieces of context to answer the users question.
|
||||
const SYSTEM_PROMPT_TEMPLATE = `Use the following pieces of context to answer the users question.
|
||||
If you don't know the answer, just say that you don't know, don't try to make up an answer.
|
||||
----------------
|
||||
{context}`;
|
||||
|
@ -31,7 +32,7 @@ export class ChainRetrievalQa implements INodeType {
|
|||
name: 'chainRetrievalQa',
|
||||
icon: 'fa:link',
|
||||
group: ['transform'],
|
||||
version: [1, 1.1, 1.2, 1.3],
|
||||
version: [1, 1.1, 1.2, 1.3, 1.4],
|
||||
description: 'Answer questions about retrieved documents',
|
||||
defaults: {
|
||||
name: 'Question and Answer Chain',
|
||||
|
@ -108,30 +109,16 @@ export class ChainRetrievalQa implements INodeType {
|
|||
},
|
||||
},
|
||||
{
|
||||
displayName: 'Prompt',
|
||||
name: 'promptType',
|
||||
type: 'options',
|
||||
options: [
|
||||
{
|
||||
// eslint-disable-next-line n8n-nodes-base/node-param-display-name-miscased
|
||||
name: 'Take from previous node automatically',
|
||||
value: 'auto',
|
||||
description: 'Looks for an input field called chatInput',
|
||||
},
|
||||
{
|
||||
// eslint-disable-next-line n8n-nodes-base/node-param-display-name-miscased
|
||||
name: 'Define below',
|
||||
value: 'define',
|
||||
description:
|
||||
'Use an expression to reference data in previous nodes or enter static text',
|
||||
},
|
||||
],
|
||||
...promptTypeOptions,
|
||||
displayOptions: {
|
||||
hide: {
|
||||
'@version': [{ _cnd: { lte: 1.2 } }],
|
||||
},
|
||||
},
|
||||
default: 'auto',
|
||||
},
|
||||
{
|
||||
...textFromPreviousNode,
|
||||
displayOptions: { show: { promptType: ['auto'], '@version': [{ _cnd: { gte: 1.4 } }] } },
|
||||
},
|
||||
{
|
||||
displayName: 'Text',
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
/* eslint-disable n8n-nodes-base/node-dirname-against-convention */
|
||||
import type { BufferWindowMemoryInput } from 'langchain/memory';
|
||||
import { BufferWindowMemory } from 'langchain/memory';
|
||||
import {
|
||||
NodeConnectionType,
|
||||
type INodeType,
|
||||
|
@ -6,12 +8,16 @@ import {
|
|||
type ISupplyDataFunctions,
|
||||
type SupplyData,
|
||||
} from 'n8n-workflow';
|
||||
import type { BufferWindowMemoryInput } from 'langchain/memory';
|
||||
import { BufferWindowMemory } from 'langchain/memory';
|
||||
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import { logWrapper } from '../../../utils/logWrapper';
|
||||
import { getConnectionHintNoticeField } from '../../../utils/sharedFields';
|
||||
import { sessionIdOption, sessionKeyProperty, contextWindowLengthProperty } from '../descriptions';
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import {
|
||||
sessionIdOption,
|
||||
sessionKeyProperty,
|
||||
contextWindowLengthProperty,
|
||||
expressionSessionKeyProperty,
|
||||
} from '../descriptions';
|
||||
|
||||
class MemoryChatBufferSingleton {
|
||||
private static instance: MemoryChatBufferSingleton;
|
||||
|
@ -72,7 +78,7 @@ export class MemoryBufferWindow implements INodeType {
|
|||
name: 'memoryBufferWindow',
|
||||
icon: 'fa:database',
|
||||
group: ['transform'],
|
||||
version: [1, 1.1, 1.2],
|
||||
version: [1, 1.1, 1.2, 1.3],
|
||||
description: 'Stores in n8n memory, so no credentials required',
|
||||
defaults: {
|
||||
name: 'Window Buffer Memory',
|
||||
|
@ -129,6 +135,7 @@ export class MemoryBufferWindow implements INodeType {
|
|||
},
|
||||
},
|
||||
},
|
||||
expressionSessionKeyProperty(1.3),
|
||||
sessionKeyProperty,
|
||||
contextWindowLengthProperty,
|
||||
],
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
/* eslint-disable n8n-nodes-base/node-dirname-against-convention */
|
||||
import { MotorheadMemory } from '@langchain/community/memory/motorhead_memory';
|
||||
import {
|
||||
NodeConnectionType,
|
||||
type INodeType,
|
||||
|
@ -7,11 +8,10 @@ import {
|
|||
type SupplyData,
|
||||
} from 'n8n-workflow';
|
||||
|
||||
import { MotorheadMemory } from '@langchain/community/memory/motorhead_memory';
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import { logWrapper } from '../../../utils/logWrapper';
|
||||
import { getConnectionHintNoticeField } from '../../../utils/sharedFields';
|
||||
import { sessionIdOption, sessionKeyProperty } from '../descriptions';
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import { expressionSessionKeyProperty, sessionIdOption, sessionKeyProperty } from '../descriptions';
|
||||
|
||||
export class MemoryMotorhead implements INodeType {
|
||||
description: INodeTypeDescription = {
|
||||
|
@ -19,7 +19,7 @@ export class MemoryMotorhead implements INodeType {
|
|||
name: 'memoryMotorhead',
|
||||
icon: 'fa:file-export',
|
||||
group: ['transform'],
|
||||
version: [1, 1.1, 1.2],
|
||||
version: [1, 1.1, 1.2, 1.3],
|
||||
description: 'Use Motorhead Memory',
|
||||
defaults: {
|
||||
name: 'Motorhead',
|
||||
|
@ -82,6 +82,7 @@ export class MemoryMotorhead implements INodeType {
|
|||
},
|
||||
},
|
||||
},
|
||||
expressionSessionKeyProperty(1.3),
|
||||
sessionKeyProperty,
|
||||
],
|
||||
};
|
||||
|
|
|
@ -1,4 +1,9 @@
|
|||
/* eslint-disable n8n-nodes-base/node-dirname-against-convention */
|
||||
import { PostgresChatMessageHistory } from '@langchain/community/stores/message/postgres';
|
||||
import { BufferMemory, BufferWindowMemory } from 'langchain/memory';
|
||||
import type { PostgresNodeCredentials } from 'n8n-nodes-base/dist/nodes/Postgres/v2/helpers/interfaces';
|
||||
import { postgresConnectionTest } from 'n8n-nodes-base/dist/nodes/Postgres/v2/methods/credentialTest';
|
||||
import { configurePostgres } from 'n8n-nodes-base/dist/nodes/Postgres/v2/transport';
|
||||
import type {
|
||||
ISupplyDataFunctions,
|
||||
INodeType,
|
||||
|
@ -6,16 +11,17 @@ import type {
|
|||
SupplyData,
|
||||
} from 'n8n-workflow';
|
||||
import { NodeConnectionType } from 'n8n-workflow';
|
||||
import { BufferMemory, BufferWindowMemory } from 'langchain/memory';
|
||||
import { PostgresChatMessageHistory } from '@langchain/community/stores/message/postgres';
|
||||
import type pg from 'pg';
|
||||
import { configurePostgres } from 'n8n-nodes-base/dist/nodes/Postgres/v2/transport';
|
||||
import type { PostgresNodeCredentials } from 'n8n-nodes-base/dist/nodes/Postgres/v2/helpers/interfaces';
|
||||
import { postgresConnectionTest } from 'n8n-nodes-base/dist/nodes/Postgres/v2/methods/credentialTest';
|
||||
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import { logWrapper } from '../../../utils/logWrapper';
|
||||
import { getConnectionHintNoticeField } from '../../../utils/sharedFields';
|
||||
import { sessionIdOption, sessionKeyProperty, contextWindowLengthProperty } from '../descriptions';
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import {
|
||||
sessionIdOption,
|
||||
sessionKeyProperty,
|
||||
contextWindowLengthProperty,
|
||||
expressionSessionKeyProperty,
|
||||
} from '../descriptions';
|
||||
|
||||
export class MemoryPostgresChat implements INodeType {
|
||||
description: INodeTypeDescription = {
|
||||
|
@ -23,7 +29,7 @@ export class MemoryPostgresChat implements INodeType {
|
|||
name: 'memoryPostgresChat',
|
||||
icon: 'file:postgres.svg',
|
||||
group: ['transform'],
|
||||
version: [1, 1.1],
|
||||
version: [1, 1.1, 1.2, 1.3],
|
||||
description: 'Stores the chat history in Postgres table.',
|
||||
defaults: {
|
||||
name: 'Postgres Chat Memory',
|
||||
|
@ -56,6 +62,7 @@ export class MemoryPostgresChat implements INodeType {
|
|||
properties: [
|
||||
getConnectionHintNoticeField([NodeConnectionType.AiAgent]),
|
||||
sessionIdOption,
|
||||
expressionSessionKeyProperty(1.2),
|
||||
sessionKeyProperty,
|
||||
{
|
||||
displayName: 'Table Name',
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
/* eslint-disable n8n-nodes-base/node-dirname-against-convention */
|
||||
import type { RedisChatMessageHistoryInput } from '@langchain/redis';
|
||||
import { RedisChatMessageHistory } from '@langchain/redis';
|
||||
import { BufferMemory, BufferWindowMemory } from 'langchain/memory';
|
||||
import {
|
||||
NodeOperationError,
|
||||
type INodeType,
|
||||
|
@ -7,15 +10,18 @@ import {
|
|||
type SupplyData,
|
||||
NodeConnectionType,
|
||||
} from 'n8n-workflow';
|
||||
import { BufferMemory, BufferWindowMemory } from 'langchain/memory';
|
||||
import type { RedisChatMessageHistoryInput } from '@langchain/redis';
|
||||
import { RedisChatMessageHistory } from '@langchain/redis';
|
||||
import type { RedisClientOptions } from 'redis';
|
||||
import { createClient } from 'redis';
|
||||
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import { logWrapper } from '../../../utils/logWrapper';
|
||||
import { getConnectionHintNoticeField } from '../../../utils/sharedFields';
|
||||
import { sessionIdOption, sessionKeyProperty, contextWindowLengthProperty } from '../descriptions';
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import {
|
||||
sessionIdOption,
|
||||
sessionKeyProperty,
|
||||
contextWindowLengthProperty,
|
||||
expressionSessionKeyProperty,
|
||||
} from '../descriptions';
|
||||
|
||||
export class MemoryRedisChat implements INodeType {
|
||||
description: INodeTypeDescription = {
|
||||
|
@ -23,7 +29,7 @@ export class MemoryRedisChat implements INodeType {
|
|||
name: 'memoryRedisChat',
|
||||
icon: 'file:redis.svg',
|
||||
group: ['transform'],
|
||||
version: [1, 1.1, 1.2, 1.3],
|
||||
version: [1, 1.1, 1.2, 1.3, 1.4],
|
||||
description: 'Stores the chat history in Redis.',
|
||||
defaults: {
|
||||
name: 'Redis Chat Memory',
|
||||
|
@ -86,6 +92,7 @@ export class MemoryRedisChat implements INodeType {
|
|||
},
|
||||
},
|
||||
},
|
||||
expressionSessionKeyProperty(1.4),
|
||||
sessionKeyProperty,
|
||||
{
|
||||
displayName: 'Session Time To Live',
|
||||
|
@ -120,6 +127,7 @@ export class MemoryRedisChat implements INodeType {
|
|||
socket: {
|
||||
host: credentials.host as string,
|
||||
port: credentials.port as number,
|
||||
tls: credentials.ssl === true,
|
||||
},
|
||||
database: credentials.database as number,
|
||||
};
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
/* eslint-disable n8n-nodes-base/node-dirname-against-convention */
|
||||
import { XataChatMessageHistory } from '@langchain/community/stores/message/xata';
|
||||
import { BaseClient } from '@xata.io/client';
|
||||
import { BufferMemory, BufferWindowMemory } from 'langchain/memory';
|
||||
import { NodeConnectionType, NodeOperationError } from 'n8n-workflow';
|
||||
import type {
|
||||
ISupplyDataFunctions,
|
||||
|
@ -6,13 +9,16 @@ import type {
|
|||
INodeTypeDescription,
|
||||
SupplyData,
|
||||
} from 'n8n-workflow';
|
||||
import { XataChatMessageHistory } from '@langchain/community/stores/message/xata';
|
||||
import { BufferMemory, BufferWindowMemory } from 'langchain/memory';
|
||||
import { BaseClient } from '@xata.io/client';
|
||||
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import { logWrapper } from '../../../utils/logWrapper';
|
||||
import { getConnectionHintNoticeField } from '../../../utils/sharedFields';
|
||||
import { sessionIdOption, sessionKeyProperty, contextWindowLengthProperty } from '../descriptions';
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import {
|
||||
sessionIdOption,
|
||||
sessionKeyProperty,
|
||||
contextWindowLengthProperty,
|
||||
expressionSessionKeyProperty,
|
||||
} from '../descriptions';
|
||||
|
||||
export class MemoryXata implements INodeType {
|
||||
description: INodeTypeDescription = {
|
||||
|
@ -20,7 +26,7 @@ export class MemoryXata implements INodeType {
|
|||
name: 'memoryXata',
|
||||
icon: 'file:xata.svg',
|
||||
group: ['transform'],
|
||||
version: [1, 1.1, 1.2, 1.3],
|
||||
version: [1, 1.1, 1.2, 1.3, 1.4],
|
||||
description: 'Use Xata Memory',
|
||||
defaults: {
|
||||
name: 'Xata',
|
||||
|
@ -86,6 +92,7 @@ export class MemoryXata implements INodeType {
|
|||
},
|
||||
},
|
||||
sessionKeyProperty,
|
||||
expressionSessionKeyProperty(1.4),
|
||||
{
|
||||
...contextWindowLengthProperty,
|
||||
displayOptions: { hide: { '@version': [{ _cnd: { lt: 1.3 } }] } },
|
||||
|
|
|
@ -12,7 +12,7 @@ import { ZepCloudMemory } from '@langchain/community/memory/zep_cloud';
|
|||
|
||||
import { logWrapper } from '../../../utils/logWrapper';
|
||||
import { getConnectionHintNoticeField } from '../../../utils/sharedFields';
|
||||
import { sessionIdOption, sessionKeyProperty } from '../descriptions';
|
||||
import { expressionSessionKeyProperty, sessionIdOption, sessionKeyProperty } from '../descriptions';
|
||||
import { getSessionId } from '../../../utils/helpers';
|
||||
import type { BaseChatMemory } from '@langchain/community/dist/memory/chat_memory';
|
||||
import type { InputValues, MemoryVariables } from '@langchain/core/memory';
|
||||
|
@ -36,7 +36,7 @@ export class MemoryZep implements INodeType {
|
|||
// eslint-disable-next-line n8n-nodes-base/node-class-description-icon-not-svg
|
||||
icon: 'file:zep.png',
|
||||
group: ['transform'],
|
||||
version: [1, 1.1, 1.2],
|
||||
version: [1, 1.1, 1.2, 1.3],
|
||||
description: 'Use Zep Memory',
|
||||
defaults: {
|
||||
name: 'Zep',
|
||||
|
@ -99,6 +99,7 @@ export class MemoryZep implements INodeType {
|
|||
},
|
||||
},
|
||||
},
|
||||
expressionSessionKeyProperty(1.3),
|
||||
sessionKeyProperty,
|
||||
],
|
||||
};
|
||||
|
|
|
@ -21,6 +21,20 @@ export const sessionIdOption: INodeProperties = {
|
|||
default: 'fromInput',
|
||||
};
|
||||
|
||||
export const expressionSessionKeyProperty = (fromVersion: number): INodeProperties => ({
|
||||
displayName: 'Session Key From Previous Node',
|
||||
name: 'sessionKey',
|
||||
type: 'string',
|
||||
default: '={{ $json.sessionId }}',
|
||||
disabledOptions: { show: { sessionIdType: ['fromInput'] } },
|
||||
displayOptions: {
|
||||
show: {
|
||||
sessionIdType: ['fromInput'],
|
||||
'@version': [{ _cnd: { gte: fromVersion } }],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const sessionKeyProperty: INodeProperties = {
|
||||
displayName: 'Key',
|
||||
name: 'sessionKey',
|
||||
|
|
|
@ -35,6 +35,7 @@ describe('OutputParserItemList', () => {
|
|||
|
||||
const { response } = await outputParser.supplyData.call(thisArg, 0);
|
||||
expect(response).toBeInstanceOf(N8nItemListOutputParser);
|
||||
expect((response as any).numberOfItems).toBe(3);
|
||||
});
|
||||
|
||||
it('should create a parser with custom number of items', async () => {
|
||||
|
@ -50,6 +51,20 @@ describe('OutputParserItemList', () => {
|
|||
expect((response as any).numberOfItems).toBe(5);
|
||||
});
|
||||
|
||||
it('should create a parser with unlimited number of items', async () => {
|
||||
thisArg.getNodeParameter.mockImplementation((parameterName) => {
|
||||
if (parameterName === 'options') {
|
||||
return { numberOfItems: -1 };
|
||||
}
|
||||
|
||||
throw new ApplicationError('Not implemented');
|
||||
});
|
||||
|
||||
const { response } = await outputParser.supplyData.call(thisArg, 0);
|
||||
expect(response).toBeInstanceOf(N8nItemListOutputParser);
|
||||
expect((response as any).numberOfItems).toBeUndefined();
|
||||
});
|
||||
|
||||
it('should create a parser with custom separator', async () => {
|
||||
thisArg.getNodeParameter.mockImplementation((parameterName) => {
|
||||
if (parameterName === 'options') {
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
}) {}
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -18,6 +18,7 @@ import {
|
|||
} from 'n8n-workflow';
|
||||
import { OpenAI as OpenAIClient } from 'openai';
|
||||
|
||||
import { promptTypeOptions, textFromPreviousNode } from '../../../../../utils/descriptions';
|
||||
import { getConnectedTools } from '../../../../../utils/helpers';
|
||||
import { getTracingConfig } from '../../../../../utils/tracing';
|
||||
import { formatToOpenAIAssistantTool } from '../../helpers/utils';
|
||||
|
@ -26,24 +27,18 @@ import { assistantRLC } from '../descriptions';
|
|||
const properties: INodeProperties[] = [
|
||||
assistantRLC,
|
||||
{
|
||||
displayName: 'Prompt',
|
||||
...promptTypeOptions,
|
||||
name: 'prompt',
|
||||
type: 'options',
|
||||
options: [
|
||||
{
|
||||
// eslint-disable-next-line n8n-nodes-base/node-param-display-name-miscased
|
||||
name: 'Take from previous node automatically',
|
||||
value: 'auto',
|
||||
description: 'Looks for an input field called chatInput',
|
||||
},
|
||||
{
|
||||
...textFromPreviousNode,
|
||||
disabledOptions: { show: { prompt: ['auto'] } },
|
||||
displayOptions: {
|
||||
show: {
|
||||
prompt: ['auto'],
|
||||
'@version': [{ _cnd: { gte: 1.7 } }],
|
||||
},
|
||||
{
|
||||
// eslint-disable-next-line n8n-nodes-base/node-param-display-name-miscased
|
||||
name: 'Define below',
|
||||
value: 'define',
|
||||
description: 'Use an expression to reference data in previous nodes or enter static text',
|
||||
},
|
||||
],
|
||||
default: 'auto',
|
||||
},
|
||||
},
|
||||
{
|
||||
displayName: 'Text',
|
||||
|
|
|
@ -77,7 +77,7 @@ export const versionDescription: INodeTypeDescription = {
|
|||
name: 'openAi',
|
||||
icon: { light: 'file:openAi.svg', dark: 'file:openAi.dark.svg' },
|
||||
group: ['transform'],
|
||||
version: [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6],
|
||||
version: [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7],
|
||||
subtitle: `={{(${prettifyOperation})($parameter.resource, $parameter.operation)}}`,
|
||||
description: 'Message an assistant or GPT, analyze images, generate audio, etc.',
|
||||
defaults: {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@n8n/n8n-nodes-langchain",
|
||||
"version": "1.67.0",
|
||||
"version": "1.68.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
|
@ -66,7 +66,7 @@ export const inputSchemaField: INodeProperties = {
|
|||
};
|
||||
|
||||
export const promptTypeOptions: INodeProperties = {
|
||||
displayName: 'Prompt',
|
||||
displayName: 'Prompt Source',
|
||||
name: 'promptType',
|
||||
type: 'options',
|
||||
options: [
|
||||
|
@ -97,3 +97,15 @@ export const textInput: INodeProperties = {
|
|||
rows: 2,
|
||||
},
|
||||
};
|
||||
|
||||
export const textFromPreviousNode: INodeProperties = {
|
||||
displayName: 'Text From Previous Node',
|
||||
name: 'text',
|
||||
type: 'string',
|
||||
required: true,
|
||||
default: '={{ $json.chatInput }}',
|
||||
typeOptions: {
|
||||
rows: 2,
|
||||
},
|
||||
disabledOptions: { show: { promptType: ['auto'] } },
|
||||
};
|
||||
|
|
|
@ -3,16 +3,21 @@ import { BaseOutputParser, OutputParserException } from '@langchain/core/output_
|
|||
export class N8nItemListOutputParser extends BaseOutputParser<string[]> {
|
||||
lc_namespace = ['n8n-nodes-langchain', 'output_parsers', 'list_items'];
|
||||
|
||||
private numberOfItems: number = 3;
|
||||
private numberOfItems: number | undefined;
|
||||
|
||||
private separator: string;
|
||||
|
||||
constructor(options: { numberOfItems?: number; separator?: string }) {
|
||||
super();
|
||||
if (options.numberOfItems && options.numberOfItems > 0) {
|
||||
this.numberOfItems = options.numberOfItems;
|
||||
|
||||
const { numberOfItems = 3, separator = '\n' } = options;
|
||||
|
||||
if (numberOfItems && numberOfItems > 0) {
|
||||
this.numberOfItems = numberOfItems;
|
||||
}
|
||||
this.separator = options.separator ?? '\\n';
|
||||
|
||||
this.separator = separator;
|
||||
|
||||
if (this.separator === '\\n') {
|
||||
this.separator = '\n';
|
||||
}
|
||||
|
@ -39,7 +44,7 @@ export class N8nItemListOutputParser extends BaseOutputParser<string[]> {
|
|||
this.numberOfItems ? this.numberOfItems + ' ' : ''
|
||||
}items separated by`;
|
||||
|
||||
const numberOfExamples = this.numberOfItems;
|
||||
const numberOfExamples = this.numberOfItems ?? 3; // Default number of examples in case numberOfItems is not set
|
||||
|
||||
const examples: string[] = [];
|
||||
for (let i = 1; i <= numberOfExamples; i++) {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
199
packages/cli/src/webhooks/__tests__/waiting-forms.test.ts
Normal 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');
|
||||
});
|
||||
});
|
||||
});
|
|
@ -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
74
packages/cli/templates/form-trigger-409.handlebars
Normal 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&utm_medium=form-trigger&'
|
||||
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>
|
|
@ -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",
|
||||
|
|
|
@ -918,6 +918,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;
|
||||
}
|
||||
|
@ -1718,6 +1722,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);
|
||||
|
|
|
@ -1243,7 +1243,7 @@ export class WorkflowExecute {
|
|||
: [];
|
||||
|
||||
while (items.length) {
|
||||
const item = items.pop();
|
||||
const item = items.shift();
|
||||
if (item === undefined) {
|
||||
continue;
|
||||
}
|
||||
|
|
|
@ -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]);
|
||||
|
|
|
@ -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": []
|
||||
}
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1305,6 +1305,7 @@ export type ExecutionFilterType = {
|
|||
|
||||
export type ExecutionsQueryFilter = {
|
||||
status?: ExecutionStatus[];
|
||||
projectId?: string;
|
||||
workflowId?: string;
|
||||
finished?: boolean;
|
||||
waitTill?: boolean;
|
||||
|
|
|
@ -31,7 +31,7 @@ export function createTestProject(data: Partial<Project>): Project {
|
|||
name: faker.lorem.words({ min: 1, max: 3 }),
|
||||
createdAt: faker.date.past().toISOString(),
|
||||
updatedAt: faker.date.recent().toISOString(),
|
||||
type: 'team',
|
||||
type: ProjectTypes.Team,
|
||||
relations: [],
|
||||
scopes: [],
|
||||
...data,
|
||||
|
|
|
@ -54,26 +54,32 @@ export const mockNodeTypeDescription = ({
|
|||
credentials = [],
|
||||
inputs = [NodeConnectionType.Main],
|
||||
outputs = [NodeConnectionType.Main],
|
||||
codex = {},
|
||||
properties = [],
|
||||
}: {
|
||||
name?: INodeTypeDescription['name'];
|
||||
version?: INodeTypeDescription['version'];
|
||||
credentials?: INodeTypeDescription['credentials'];
|
||||
inputs?: INodeTypeDescription['inputs'];
|
||||
outputs?: INodeTypeDescription['outputs'];
|
||||
codex?: INodeTypeDescription['codex'];
|
||||
properties?: INodeTypeDescription['properties'];
|
||||
} = {}) =>
|
||||
mock<INodeTypeDescription>({
|
||||
name,
|
||||
displayName: name,
|
||||
description: '',
|
||||
version,
|
||||
defaults: {
|
||||
name,
|
||||
},
|
||||
defaultVersion: Array.isArray(version) ? version[version.length - 1] : version,
|
||||
properties: [],
|
||||
properties: properties as [],
|
||||
maxNodes: Infinity,
|
||||
group: EXECUTABLE_TRIGGER_NODE_TYPES.includes(name) ? ['trigger'] : [],
|
||||
inputs,
|
||||
outputs,
|
||||
codex,
|
||||
credentials,
|
||||
documentationUrl: 'https://docs',
|
||||
webhooks: undefined,
|
||||
|
|
|
@ -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
586
packages/editor-ui/src/components/CanvasChat/CanvasChat.test.ts
Normal 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
351
packages/editor-ui/src/components/CanvasChat/CanvasChat.vue
Normal 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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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,
|
||||
};
|
||||
}
|
|
@ -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,
|
||||
};
|
||||
}
|
|
@ -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
22
packages/editor-ui/src/components/CanvasChat/types/chat.ts
Normal 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;
|
||||
}
|
|
@ -178,9 +178,9 @@ export const useLinter = (
|
|||
message: i18n.baseText('codeNodeEditor.linter.allItems.unavailableProperty'),
|
||||
actions: [
|
||||
{
|
||||
name: 'Remove',
|
||||
name: 'Fix',
|
||||
apply(view) {
|
||||
view.dispatch({ changes: { from: start - '.'.length, to: end } });
|
||||
view.dispatch({ changes: { from: start, to: end, insert: 'first()' } });
|
||||
},
|
||||
},
|
||||
],
|
||||
|
@ -559,6 +559,76 @@ export const useLinter = (
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Lint for `$(variable)` usage where variable is not a string, in both modes.
|
||||
*
|
||||
* $(nodeName) -> <no autofix>
|
||||
*/
|
||||
const isDollarSignWithVariable = (node: Node) =>
|
||||
node.type === 'CallExpression' &&
|
||||
node.callee.type === 'Identifier' &&
|
||||
node.callee.name === '$' &&
|
||||
node.arguments.length === 1 &&
|
||||
((node.arguments[0].type !== 'Literal' && node.arguments[0].type !== 'TemplateLiteral') ||
|
||||
(node.arguments[0].type === 'TemplateLiteral' && node.arguments[0].expressions.length > 0));
|
||||
|
||||
type TargetCallNode = RangeNode & {
|
||||
callee: { name: string };
|
||||
arguments: Array<{ type: string }>;
|
||||
};
|
||||
|
||||
walk<TargetCallNode>(ast, isDollarSignWithVariable).forEach((node) => {
|
||||
const [start, end] = getRange(node);
|
||||
|
||||
lintings.push({
|
||||
from: start,
|
||||
to: end,
|
||||
severity: 'warning',
|
||||
message: i18n.baseText('codeNodeEditor.linter.bothModes.dollarSignVariable'),
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Lint for $("myNode").item access in runOnceForAllItems mode
|
||||
*
|
||||
* $("myNode").item -> $("myNode").first()
|
||||
*/
|
||||
if (toValue(mode) === 'runOnceForEachItem') {
|
||||
type DollarItemNode = RangeNode & {
|
||||
property: { name: string; type: string } & RangeNode;
|
||||
};
|
||||
|
||||
const isDollarNodeItemAccess = (node: Node) =>
|
||||
node.type === 'MemberExpression' &&
|
||||
!node.computed &&
|
||||
node.object.type === 'CallExpression' &&
|
||||
node.object.callee.type === 'Identifier' &&
|
||||
node.object.callee.name === '$' &&
|
||||
node.object.arguments.length === 1 &&
|
||||
node.object.arguments[0].type === 'Literal' &&
|
||||
node.property.type === 'Identifier' &&
|
||||
node.property.name === 'item';
|
||||
|
||||
walk<DollarItemNode>(ast, isDollarNodeItemAccess).forEach((node) => {
|
||||
const [start, end] = getRange(node.property);
|
||||
|
||||
lintings.push({
|
||||
from: start,
|
||||
to: end,
|
||||
severity: 'warning',
|
||||
message: i18n.baseText('codeNodeEditor.linter.eachItem.preferFirst'),
|
||||
actions: [
|
||||
{
|
||||
name: 'Fix',
|
||||
apply(view) {
|
||||
view.dispatch({ changes: { from: start, to: end, insert: 'first()' } });
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return lintings;
|
||||
}
|
||||
|
||||
|
|
|
@ -74,7 +74,7 @@ const { segments, readEditorValue, editor, hasFocus, focus } = useExpressionEdit
|
|||
editorRef: root,
|
||||
editorValue,
|
||||
extensions,
|
||||
isReadOnly: props.isReadOnly,
|
||||
isReadOnly: computed(() => props.isReadOnly),
|
||||
autocompleteTelemetry: { enabled: true, parameterPath: props.path },
|
||||
});
|
||||
|
||||
|
@ -110,7 +110,15 @@ defineExpose({ editor });
|
|||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
:global(.cm-content) {
|
||||
border-radius: var(--border-radius-base);
|
||||
.editor {
|
||||
:global(.cm-content) {
|
||||
border-radius: var(--border-radius-base);
|
||||
&[aria-readonly='true'] {
|
||||
--disabled-fill: var(--color-background-medium);
|
||||
background-color: var(--disabled-fill, var(--color-background-light));
|
||||
color: var(--disabled-color, var(--color-text-base));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -56,6 +56,7 @@ const extensions = computed(() => [
|
|||
infoBoxTooltips(),
|
||||
]);
|
||||
const editorValue = ref<string>(removeExpressionPrefix(props.modelValue));
|
||||
|
||||
const {
|
||||
editor: editorRef,
|
||||
segments,
|
||||
|
@ -68,7 +69,7 @@ const {
|
|||
editorRef: root,
|
||||
editorValue,
|
||||
extensions,
|
||||
isReadOnly: props.isReadOnly,
|
||||
isReadOnly: computed(() => props.isReadOnly),
|
||||
autocompleteTelemetry: { enabled: true, parameterPath: props.path },
|
||||
additionalData: props.additionalData,
|
||||
});
|
||||
|
@ -133,6 +134,17 @@ defineExpose({
|
|||
padding-left: 0;
|
||||
}
|
||||
:deep(.cm-content) {
|
||||
--disabled-fill: var(--color-background-medium);
|
||||
padding-left: var(--spacing-2xs);
|
||||
|
||||
&[aria-readonly='true'] {
|
||||
background-color: var(--disabled-fill, var(--color-background-light));
|
||||
border-color: var(--disabled-border, var(--border-color-base));
|
||||
color: var(--disabled-color, var(--color-text-base));
|
||||
cursor: not-allowed;
|
||||
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -16,12 +16,14 @@ interface InlineExpressionEditorOutputProps {
|
|||
editorState?: EditorState;
|
||||
selection?: SelectionRange;
|
||||
visible?: boolean;
|
||||
isReadOnly?: boolean;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<InlineExpressionEditorOutputProps>(), {
|
||||
visible: false,
|
||||
editorState: undefined,
|
||||
selection: undefined,
|
||||
isReadOnly: false,
|
||||
unresolvedExpression: undefined,
|
||||
});
|
||||
|
||||
|
@ -51,7 +53,7 @@ onBeforeUnmount(() => {
|
|||
>
|
||||
</ExpressionOutput>
|
||||
</n8n-text>
|
||||
<div :class="$style.footer">
|
||||
<div :class="$style.footer" v-if="!isReadOnly">
|
||||
<InlineExpressionTip
|
||||
:editor-state="editorState"
|
||||
:selection="selection"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -98,13 +98,6 @@ const mainMenuItems = computed(() => [
|
|||
position: 'bottom',
|
||||
route: { to: { name: VIEWS.VARIABLES } },
|
||||
},
|
||||
{
|
||||
id: 'executions',
|
||||
icon: 'tasks',
|
||||
label: locale.baseText('mainSidebar.executions'),
|
||||
position: 'bottom',
|
||||
route: { to: { name: VIEWS.EXECUTIONS } },
|
||||
},
|
||||
{
|
||||
id: 'help',
|
||||
icon: 'question',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -6,7 +6,7 @@ import {
|
|||
EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
|
||||
FORM_TRIGGER_NODE_TYPE,
|
||||
MANUAL_TRIGGER_NODE_TYPE,
|
||||
MANUAL_CHAT_TRIGGER_NODE_TYPE,
|
||||
CHAT_TRIGGER_NODE_TYPE,
|
||||
SCHEDULE_TRIGGER_NODE_TYPE,
|
||||
REGULAR_NODE_CREATOR_VIEW,
|
||||
TRANSFORM_DATA_SUBCATEGORY,
|
||||
|
@ -405,14 +405,14 @@ export function TriggerView() {
|
|||
},
|
||||
},
|
||||
{
|
||||
key: MANUAL_CHAT_TRIGGER_NODE_TYPE,
|
||||
key: CHAT_TRIGGER_NODE_TYPE,
|
||||
type: 'node',
|
||||
category: [CORE_NODES_CATEGORY],
|
||||
properties: {
|
||||
group: [],
|
||||
name: MANUAL_CHAT_TRIGGER_NODE_TYPE,
|
||||
displayName: i18n.baseText('nodeCreator.triggerHelperPanel.manualChatTriggerDisplayName'),
|
||||
description: i18n.baseText('nodeCreator.triggerHelperPanel.manualChatTriggerDescription'),
|
||||
name: CHAT_TRIGGER_NODE_TYPE,
|
||||
displayName: i18n.baseText('nodeCreator.triggerHelperPanel.chatTriggerDisplayName'),
|
||||
description: i18n.baseText('nodeCreator.triggerHelperPanel.chatTriggerDescription'),
|
||||
icon: 'fa:comments',
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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', {
|
||||
|
|
|
@ -983,7 +983,7 @@ watch(remoteParameterOptionsLoading, () => {
|
|||
|
||||
// Focus input field when changing from fixed value to expression
|
||||
watch(isModelValueExpression, async (isExpression, wasExpression) => {
|
||||
if (isExpression && !wasExpression) {
|
||||
if (!props.isReadOnly && isExpression && !wasExpression) {
|
||||
await nextTick();
|
||||
inputField.value?.focus();
|
||||
}
|
||||
|
@ -1497,7 +1497,7 @@ onUpdated(async () => {
|
|||
:disabled="isReadOnly"
|
||||
@update:model-value="valueChanged"
|
||||
/>
|
||||
<div v-if="showDragnDropTip" :class="$style.tip">
|
||||
<div v-if="!isReadOnly && showDragnDropTip" :class="$style.tip">
|
||||
<InlineExpressionTip />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import type { IUpdateInformation } from '@/Interface';
|
||||
|
||||
import DraggableTarget from '@/components/DraggableTarget.vue';
|
||||
|
@ -189,6 +189,16 @@ function onDrop(newParamValue: string) {
|
|||
forceShowExpression.value = false;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// When switching to read-only mode, reset the value to the default value
|
||||
watch(
|
||||
() => props.isReadOnly,
|
||||
(isReadOnly) => {
|
||||
if (isReadOnly) {
|
||||
valueChanged({ name: props.path, value: props.parameter.default });
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -322,7 +322,10 @@ function mustHideDuringCustomApiCall(
|
|||
return !MUST_REMAIN_VISIBLE.includes(parameter.name);
|
||||
}
|
||||
|
||||
function displayNodeParameter(parameter: INodeProperties): boolean {
|
||||
function displayNodeParameter(
|
||||
parameter: INodeProperties,
|
||||
displayKey: 'displayOptions' | 'disabledOptions' = 'displayOptions',
|
||||
): boolean {
|
||||
if (parameter.type === 'hidden') {
|
||||
return false;
|
||||
}
|
||||
|
@ -343,7 +346,7 @@ function displayNodeParameter(parameter: INodeProperties): boolean {
|
|||
return false;
|
||||
}
|
||||
|
||||
if (parameter.displayOptions === undefined) {
|
||||
if (parameter[displayKey] === undefined) {
|
||||
// If it is not defined no need to do a proper check
|
||||
return true;
|
||||
}
|
||||
|
@ -402,13 +405,19 @@ function displayNodeParameter(parameter: INodeProperties): boolean {
|
|||
if (props.path) {
|
||||
rawValues = deepCopy(props.nodeValues);
|
||||
set(rawValues, props.path, nodeValues);
|
||||
return nodeHelpers.displayParameter(rawValues, parameter, props.path, node.value);
|
||||
return nodeHelpers.displayParameter(rawValues, parameter, props.path, node.value, displayKey);
|
||||
} else {
|
||||
return nodeHelpers.displayParameter(nodeValues, parameter, '', node.value);
|
||||
return nodeHelpers.displayParameter(nodeValues, parameter, '', node.value, displayKey);
|
||||
}
|
||||
}
|
||||
|
||||
return nodeHelpers.displayParameter(props.nodeValues, parameter, props.path, node.value);
|
||||
return nodeHelpers.displayParameter(
|
||||
props.nodeValues,
|
||||
parameter,
|
||||
props.path,
|
||||
node.value,
|
||||
displayKey,
|
||||
);
|
||||
}
|
||||
|
||||
function valueChanged(parameterData: IUpdateInformation): void {
|
||||
|
@ -620,7 +629,10 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
|
|||
:value="getParameterValue(parameter.name)"
|
||||
:display-options="shouldShowOptions(parameter)"
|
||||
:path="getPath(parameter.name)"
|
||||
:is-read-only="isReadOnly"
|
||||
:is-read-only="
|
||||
isReadOnly ||
|
||||
(parameter.disabledOptions && displayNodeParameter(parameter, 'disabledOptions'))
|
||||
"
|
||||
:hide-label="false"
|
||||
:node-values="nodeValues"
|
||||
@update="valueChanged"
|
||||
|
|
|
@ -39,7 +39,7 @@ const isDefault = computed(() => props.parameter.default === props.value);
|
|||
const isValueAnExpression = computed(() => isValueExpression(props.parameter, props.value));
|
||||
const isHtmlEditor = computed(() => getArgument('editor') === 'htmlEditor');
|
||||
const shouldShowExpressionSelector = computed(
|
||||
() => !props.parameter.noDataExpression && props.showExpressionSelector,
|
||||
() => !props.parameter.noDataExpression && props.showExpressionSelector && !props.isReadOnly,
|
||||
);
|
||||
const shouldShowOptions = computed(() => {
|
||||
if (props.isReadOnly) {
|
||||
|
|
120
packages/editor-ui/src/components/Projects/ProjectHeader.test.ts
Normal file
120
packages/editor-ui/src/components/Projects/ProjectHeader.test.ts
Normal file
|
@ -0,0 +1,120 @@
|
|||
import { createTestingPinia } from '@pinia/testing';
|
||||
import { createComponentRenderer } from '@/__tests__/render';
|
||||
import { mockedStore } from '@/__tests__/utils';
|
||||
import { createTestProject } from '@/__tests__/data/projects';
|
||||
import { useRoute } from 'vue-router';
|
||||
import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
|
||||
import { useProjectsStore } from '@/stores/projects.store';
|
||||
import type { Project } from '@/types/projects.types';
|
||||
import { ProjectTypes } from '@/types/projects.types';
|
||||
|
||||
vi.mock('vue-router', async () => {
|
||||
const actual = await vi.importActual('vue-router');
|
||||
const params = {};
|
||||
const location = {};
|
||||
return {
|
||||
...actual,
|
||||
useRoute: () => ({
|
||||
params,
|
||||
location,
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const projectTabsSpy = vi.fn().mockReturnValue({
|
||||
render: vi.fn(),
|
||||
});
|
||||
|
||||
const renderComponent = createComponentRenderer(ProjectHeader, {
|
||||
global: {
|
||||
stubs: {
|
||||
ProjectTabs: projectTabsSpy,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
let route: ReturnType<typeof useRoute>;
|
||||
let projectsStore: ReturnType<typeof mockedStore<typeof useProjectsStore>>;
|
||||
|
||||
describe('ProjectHeader', () => {
|
||||
beforeEach(() => {
|
||||
createTestingPinia();
|
||||
route = useRoute();
|
||||
projectsStore = mockedStore(useProjectsStore);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should render the correct icon', async () => {
|
||||
const { container, rerender } = renderComponent();
|
||||
|
||||
expect(container.querySelector('.fa-home')).toBeVisible();
|
||||
|
||||
projectsStore.currentProject = { type: ProjectTypes.Personal } as Project;
|
||||
await rerender({});
|
||||
expect(container.querySelector('.fa-user')).toBeVisible();
|
||||
|
||||
const projectName = 'My Project';
|
||||
projectsStore.currentProject = { name: projectName } as Project;
|
||||
await rerender({});
|
||||
expect(container.querySelector('.fa-layer-group')).toBeVisible();
|
||||
});
|
||||
|
||||
it('should render the correct title', async () => {
|
||||
const { getByText, rerender } = renderComponent();
|
||||
|
||||
expect(getByText('Overview')).toBeVisible();
|
||||
|
||||
projectsStore.currentProject = { type: ProjectTypes.Personal } as Project;
|
||||
await rerender({});
|
||||
expect(getByText('Personal')).toBeVisible();
|
||||
|
||||
const projectName = 'My Project';
|
||||
projectsStore.currentProject = { name: projectName } as Project;
|
||||
await rerender({});
|
||||
expect(getByText(projectName)).toBeVisible();
|
||||
});
|
||||
|
||||
it('should render ProjectTabs Settings if project is team project and user has update scope', () => {
|
||||
route.params.projectId = '123';
|
||||
projectsStore.currentProject = createTestProject({ scopes: ['project:update'] });
|
||||
renderComponent();
|
||||
|
||||
expect(projectTabsSpy).toHaveBeenCalledWith(
|
||||
{
|
||||
'show-settings': true,
|
||||
},
|
||||
null,
|
||||
);
|
||||
});
|
||||
|
||||
it('should render ProjectTabs without Settings if no project update permission', () => {
|
||||
route.params.projectId = '123';
|
||||
projectsStore.currentProject = createTestProject({ scopes: ['project:read'] });
|
||||
renderComponent();
|
||||
|
||||
expect(projectTabsSpy).toHaveBeenCalledWith(
|
||||
{
|
||||
'show-settings': false,
|
||||
},
|
||||
null,
|
||||
);
|
||||
});
|
||||
|
||||
it('should render ProjectTabs without Settings if project is not team project', () => {
|
||||
route.params.projectId = '123';
|
||||
projectsStore.currentProject = createTestProject(
|
||||
createTestProject({ type: ProjectTypes.Personal, scopes: ['project:update'] }),
|
||||
);
|
||||
renderComponent();
|
||||
|
||||
expect(projectTabsSpy).toHaveBeenCalledWith(
|
||||
{
|
||||
'show-settings': false,
|
||||
},
|
||||
null,
|
||||
);
|
||||
});
|
||||
});
|
84
packages/editor-ui/src/components/Projects/ProjectHeader.vue
Normal file
84
packages/editor-ui/src/components/Projects/ProjectHeader.vue
Normal file
|
@ -0,0 +1,84 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { ProjectTypes } from '@/types/projects.types';
|
||||
import { useProjectsStore } from '@/stores/projects.store';
|
||||
import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
|
||||
import { getResourcePermissions } from '@/permissions';
|
||||
|
||||
const route = useRoute();
|
||||
const i18n = useI18n();
|
||||
const projectsStore = useProjectsStore();
|
||||
|
||||
const headerIcon = computed(() => {
|
||||
if (projectsStore.currentProject?.type === ProjectTypes.Personal) {
|
||||
return 'user';
|
||||
} else if (projectsStore.currentProject?.name) {
|
||||
return 'layer-group';
|
||||
} else {
|
||||
return 'home';
|
||||
}
|
||||
});
|
||||
|
||||
const projectName = computed(() => {
|
||||
if (!projectsStore.currentProject) {
|
||||
return i18n.baseText('projects.menu.overview');
|
||||
} else if (projectsStore.currentProject.type === ProjectTypes.Personal) {
|
||||
return i18n.baseText('projects.menu.personal');
|
||||
} else {
|
||||
return projectsStore.currentProject.name;
|
||||
}
|
||||
});
|
||||
|
||||
const projectPermissions = computed(
|
||||
() => getResourcePermissions(projectsStore.currentProject?.scopes).project,
|
||||
);
|
||||
|
||||
const showSettings = computed(
|
||||
() =>
|
||||
!!route?.params?.projectId &&
|
||||
!!projectPermissions.value.update &&
|
||||
projectsStore.currentProject?.type === ProjectTypes.Team,
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div :class="[$style.projectHeader]">
|
||||
<div :class="[$style.icon]">
|
||||
<N8nIcon :icon="headerIcon" color="text-light"></N8nIcon>
|
||||
</div>
|
||||
<div>
|
||||
<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
|
||||
<N8nText v-if="$slots.subtitle" size="small" color="text-light">
|
||||
<slot name="subtitle" />
|
||||
</N8nText>
|
||||
</div>
|
||||
<div v-if="$slots.actions" :class="[$style.actions]">
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<ProjectTabs :show-settings="showSettings" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.projectHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-bottom: var(--spacing-m);
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
border: 1px solid var(--color-foreground-light);
|
||||
padding: 6px;
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
|
@ -27,7 +27,7 @@ const isCreatingProject = ref(false);
|
|||
const isComponentMounted = ref(false);
|
||||
const home = computed<IMenuItem>(() => ({
|
||||
id: 'home',
|
||||
label: locale.baseText('projects.menu.home'),
|
||||
label: locale.baseText('projects.menu.overview'),
|
||||
icon: 'home',
|
||||
route: {
|
||||
to: { name: VIEWS.HOMEPAGE },
|
||||
|
|
|
@ -1,22 +1,14 @@
|
|||
import { createPinia, setActivePinia } from 'pinia';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { createComponentRenderer } from '@/__tests__/render';
|
||||
import { createTestProject } from '@/__tests__/data/projects';
|
||||
import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
|
||||
import { useProjectsStore } from '@/stores/projects.store';
|
||||
import { ProjectTypes } from '@/types/projects.types';
|
||||
|
||||
vi.mock('vue-router', () => {
|
||||
vi.mock('vue-router', async () => {
|
||||
const actual = await vi.importActual('vue-router');
|
||||
const params = {};
|
||||
const push = vi.fn();
|
||||
return {
|
||||
...actual,
|
||||
useRoute: () => ({
|
||||
params,
|
||||
}),
|
||||
useRouter: () => ({
|
||||
push,
|
||||
}),
|
||||
RouterLink: vi.fn(),
|
||||
};
|
||||
});
|
||||
const renderComponent = createComponentRenderer(ProjectTabs, {
|
||||
|
@ -29,54 +21,22 @@ const renderComponent = createComponentRenderer(ProjectTabs, {
|
|||
},
|
||||
});
|
||||
|
||||
let route: ReturnType<typeof useRoute>;
|
||||
let projectsStore: ReturnType<typeof useProjectsStore>;
|
||||
|
||||
describe('ProjectTabs', () => {
|
||||
beforeEach(() => {
|
||||
const pinia = createPinia();
|
||||
setActivePinia(pinia);
|
||||
route = useRoute();
|
||||
projectsStore = useProjectsStore();
|
||||
});
|
||||
|
||||
it('should render home tabs', async () => {
|
||||
const { getByText, queryByText } = renderComponent();
|
||||
|
||||
expect(getByText('Workflows')).toBeInTheDocument();
|
||||
expect(getByText('Credentials')).toBeInTheDocument();
|
||||
expect(getByText('Executions')).toBeInTheDocument();
|
||||
expect(queryByText('Project settings')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render project tab Settings if user has permissions and current project is of type Team', () => {
|
||||
route.params.projectId = '123';
|
||||
projectsStore.setCurrentProject(createTestProject({ scopes: ['project:update'] }));
|
||||
const { getByText } = renderComponent();
|
||||
it('should render project tab Settings', () => {
|
||||
const { getByText } = renderComponent({ props: { showSettings: true } });
|
||||
|
||||
expect(getByText('Workflows')).toBeInTheDocument();
|
||||
expect(getByText('Credentials')).toBeInTheDocument();
|
||||
expect(getByText('Executions')).toBeInTheDocument();
|
||||
expect(getByText('Project settings')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render project tabs without Settings if no permission', () => {
|
||||
route.params.projectId = '123';
|
||||
projectsStore.setCurrentProject(createTestProject({ scopes: ['project:read'] }));
|
||||
const { queryByText, getByText } = renderComponent();
|
||||
|
||||
expect(getByText('Workflows')).toBeInTheDocument();
|
||||
expect(getByText('Credentials')).toBeInTheDocument();
|
||||
expect(queryByText('Project settings')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render project tabs without Settings if project is the Personal project', () => {
|
||||
route.params.projectId = '123';
|
||||
projectsStore.setCurrentProject(
|
||||
createTestProject({ type: ProjectTypes.Personal, scopes: ['project:update'] }),
|
||||
);
|
||||
const { queryByText, getByText } = renderComponent();
|
||||
|
||||
expect(getByText('Workflows')).toBeInTheDocument();
|
||||
expect(getByText('Credentials')).toBeInTheDocument();
|
||||
expect(queryByText('Project settings')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -4,19 +4,15 @@ import type { RouteRecordName } from 'vue-router';
|
|||
import { useRoute } from 'vue-router';
|
||||
import { VIEWS } from '@/constants';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useProjectsStore } from '@/stores/projects.store';
|
||||
import { getResourcePermissions } from '@/permissions';
|
||||
import { ProjectTypes } from '@/types/projects.types';
|
||||
|
||||
const props = defineProps<{
|
||||
showSettings?: boolean;
|
||||
}>();
|
||||
|
||||
const locale = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const projectsStore = useProjectsStore();
|
||||
|
||||
const selectedTab = ref<RouteRecordName | null | undefined>('');
|
||||
const projectPermissions = computed(
|
||||
() => getResourcePermissions(projectsStore.currentProject?.scopes).project,
|
||||
);
|
||||
const options = computed(() => {
|
||||
const projectId = route?.params?.projectId;
|
||||
const to = projectId
|
||||
|
@ -29,6 +25,10 @@ const options = computed(() => {
|
|||
name: VIEWS.PROJECTS_CREDENTIALS,
|
||||
params: { projectId },
|
||||
},
|
||||
executions: {
|
||||
name: VIEWS.PROJECTS_EXECUTIONS,
|
||||
params: { projectId },
|
||||
},
|
||||
}
|
||||
: {
|
||||
workflows: {
|
||||
|
@ -37,6 +37,9 @@ const options = computed(() => {
|
|||
credentials: {
|
||||
name: VIEWS.CREDENTIALS,
|
||||
},
|
||||
executions: {
|
||||
name: VIEWS.EXECUTIONS,
|
||||
},
|
||||
};
|
||||
const tabs = [
|
||||
{
|
||||
|
@ -49,13 +52,14 @@ const options = computed(() => {
|
|||
value: to.credentials.name,
|
||||
to: to.credentials,
|
||||
},
|
||||
{
|
||||
label: locale.baseText('mainSidebar.executions'),
|
||||
value: to.executions.name,
|
||||
to: to.executions,
|
||||
},
|
||||
];
|
||||
|
||||
if (
|
||||
projectId &&
|
||||
projectPermissions.value.update &&
|
||||
projectsStore.currentProject?.type === ProjectTypes.Team
|
||||
) {
|
||||
if (props.showSettings) {
|
||||
tabs.push({
|
||||
label: locale.baseText('projects.settings'),
|
||||
value: VIEWS.PROJECT_SETTINGS,
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -25,7 +25,6 @@ interface TreeNode {
|
|||
export interface Props {
|
||||
node: INodeUi;
|
||||
runIndex?: number;
|
||||
hideTitle?: boolean;
|
||||
slim?: boolean;
|
||||
workflow: Workflow;
|
||||
}
|
||||
|
@ -203,7 +202,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 || [];
|
||||
});
|
||||
|
||||
|
@ -211,66 +210,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>
|
||||
|
||||
|
@ -287,6 +293,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);
|
||||
}
|
||||
|
@ -296,9 +309,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 {
|
||||
|
@ -337,20 +350,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);
|
||||
}
|
||||
|
@ -366,6 +389,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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue