feat(core): Update LLM applications building support (no-changelog) (#7710)

extracted out of #7336

---------

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
Co-authored-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Alex Grozav <alex@grozav.com>

packages/editor-ui/src/plugins/codemirror/completions/__tests__/mock.ts

@@ -4,57 +4,45 @@ import type {
 	IConnections,
 	IRunExecutionData,
 	IExecuteData,
-	INodeType,
 	INodeTypeData,
-	INodeTypes,
-	IVersionedNodeType,
 } from 'n8n-workflow';
-import { Workflow, WorkflowDataProxy, NodeHelpers } from 'n8n-workflow';
+import { WorkflowDataProxy } from 'n8n-workflow';
+import { createTestWorkflowObject } from '@/__tests__/mocks';
 
-class NodeTypesClass implements INodeTypes {
-	nodeTypes: INodeTypeData = {
-		'test.set': {
-			sourcePath: '',
-			type: {
-				description: {
-					displayName: 'Set',
-					name: 'set',
-					group: ['input'],
-					version: 1,
-					description: 'Sets a value',
-					defaults: {
-						name: 'Set',
-						color: '#0000FF',
-					},
-					inputs: ['main'],
-					outputs: ['main'],
-					properties: [
-						{
-							displayName: 'Value1',
-							name: 'value1',
-							type: 'string',
-							default: 'default-value1',
-						},
-						{
-							displayName: 'Value2',
-							name: 'value2',
-							type: 'string',
-							default: 'default-value2',
-						},
-					],
+const nodeTypes: INodeTypeData = {
+	'test.set': {
+		sourcePath: '',
+		type: {
+			description: {
+				displayName: 'Set',
+				name: 'set',
+				group: ['input'],
+				version: 1,
+				description: 'Sets a value',
+				defaults: {
+					name: 'Set',
+					color: '#0000FF',
 				},
+				inputs: ['main'],
+				outputs: ['main'],
+				properties: [
+					{
+						displayName: 'Value1',
+						name: 'value1',
+						type: 'string',
+						default: 'default-value1',
+					},
+					{
+						displayName: 'Value2',
+						name: 'value2',
+						type: 'string',
+						default: 'default-value2',
+					},
+				],
 			},
 		},
-	};
-
-	getByName(nodeType: string): INodeType | IVersionedNodeType {
-		return this.nodeTypes[nodeType].type;
-	}
-
-	getByNameAndVersion(nodeType: string, version?: number): INodeType {
-		return NodeHelpers.getVersionedNodeType(this.nodeTypes[nodeType].type, version);
-	}
-}
+	},
+};
 
 const nodes: INode[] = [
 	{
@@ -273,13 +261,13 @@ const runExecutionData: IRunExecutionData = {
 	},
 };
 
-const workflow = new Workflow({
+const workflow = createTestWorkflowObject({
 	id: '123',
 	name: 'test workflow',
 	nodes,
 	connections,
 	active: false,
-	nodeTypes: new NodeTypesClass(),
+	nodeTypes,
 });
 
 const lastNodeName = 'End';

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

@@ -791,6 +791,7 @@
 	"ndv.output.pageSize": "Page Size",
 	"ndv.output.run": "Run",
 	"ndv.output.runNodeHint": "Execute this node to output data",
+	"ndv.output.runNodeHintSubNode": "Output will appear here once the parent node is run",
 	"ndv.output.insertTestData": "insert test data",
 	"ndv.output.staleDataWarning.regular": "Node parameters have changed.<br>Execute node again to refresh output.",
 	"ndv.output.staleDataWarning.pinData": "Node parameter changes will not affect pinned output data.",
@@ -948,6 +949,7 @@
 	"nodeErrorView.dataBelowMayContain": "Data below may contain sensitive information. Proceed with caution when sharing.",
 	"nodeErrorView.details": "Details",
 	"nodeErrorView.error": "ERROR",
+	"nodeErrorView.errorSubNode": "Error in sub-node ‘{node}’",
 	"nodeErrorView.httpCode": "HTTP Code",
 	"nodeErrorView.inParameter": "In or underneath Parameter",
 	"nodeErrorView.itemIndex": "Item Index",
@@ -1240,6 +1242,7 @@
 	"pushConnection.executionFailed": "Execution failed",
 	"pushConnection.executionFailed.message": "There might not be enough memory to finish the execution. Tips for avoiding this <a target=\"_blank\" href=\"https://docs.n8n.io/flow-logic/error-handling/memory-errors/\">here</a>",
 	"pushConnection.executionError": "There was a problem executing the workflow{error}",
+	"pushConnection.executionError.openNode": " <a data-action='openNodeDetail' data-action-parameter-node='{node}'>Open node</a>",
 	"pushConnection.executionError.details": "<br /><strong>{details}</strong>",
 	"resourceLocator.id.placeholder": "Enter ID...",
 	"resourceLocator.mode.id": "By ID",
@@ -1762,6 +1765,7 @@
 	"nodeIssues.credentials.notIdentified": "Credentials with name {name} exist for {type}.",
 	"nodeIssues.credentials.notIdentified.hint": "Credentials are not clearly identified. Please select the correct credentials.",
 	"nodeIssues.input.missing": "No node connected to required input \"{inputName}\"",
+	"nodeIssues.input.missingSubNode": "On the canvas, <a data-action='openSelectiveNodeCreator' data-action-parameter-connectiontype='{inputType}' data-action-parameter-node='{node}'>add a ‘{inputName}’</a> connected to the ‘{node}’ node ",
 	"ndv.trigger.moreInfo": "More info",
 	"ndv.trigger.copiedTestUrl": "Test URL copied to clipboard",
 	"ndv.trigger.webhookBasedNode.executionsHelp.inactive": "<b>While building your workflow</b>, click the 'listen' button, then go to {service} and make an event happen. This will trigger an execution, which will show up in this editor.<br /> <br /> <b>Once you're happy with your workflow</b>, <a data-key=\"activate\">activate</a> it. Then every time there's a matching event in {service}, the workflow will execute. These executions will show up in the <a data-key=\"executions\">executions list</a>, but not in the editor.",

packages/editor-ui/src/plugins/jsplumb/N8nAddInputEndpointRenderer.ts

@@ -16,7 +16,7 @@ export const register = () => {
 			const sizeDifference = (unconnectedPlusSize - unconnectedDiamondWidth) / 2;
 
 			const container = svg.node('g', {
-				style: `--svg-color: var(${endpointInstance.params.color})`,
+				style: `--svg-color: var(--endpoint-svg-color, var(${endpointInstance.params.color}))`,
 				width,
 				height,
 			});

packages/editor-ui/src/plugins/jsplumb/N8nAddInputEndpointType.ts

@@ -46,6 +46,14 @@ export class N8nAddInputEndpoint extends EndpointRepresentation<ComputedN8nAddIn
 		this.instance.unbind(EVENT_ENDPOINT_CLICK, this.fireClickEvent);
 	}
 
+	setError() {
+		this.endpoint.addClass('add-input-endpoint-error');
+	}
+
+	resetError() {
+		this.endpoint.removeClass('add-input-endpoint-error');
+	}
+
 	fireClickEvent = (endpoint: Endpoint) => {
 		if (endpoint === this.endpoint) {
 			this.instance.fire(EVENT_ADD_INPUT_ENDPOINT_CLICK, this.endpoint);