feat: AI nodes usability fixes + Summarization Chain V2 (#7949)

Fixes:
- Refactor connection snapping when dragging and enable it also for
non-main connection types
- Fix propagation of errors from sub-nodes
- Fix chat scrolling when sending/receiving messages
- Prevent empty chat messages
- Fix sub-node selected styles
- Fix output names text overflow

Usability improvements:
- Auto-add manual chat trigger for agents & chain nodes
- Various labels and description updates
- Make the output parser input optional for Basic LLM Chain
- Summarization Chain V2 with a simplified document loader & text
chunking mode

#### How to test the change:
Example workflow showcasing different operation mode of the new
summarization chain:

[Summarization_V2.json](https://github.com/n8n-io/n8n/files/13599901/Summarization_V2.json)


## Issues fixed
Include links to Github issue or Community forum post or **Linear
ticket**:
> Important in order to close automatically and provide context to
reviewers
-
https://www.notion.so/n8n/David-Langchain-Posthog-notes-7a9294938420403095f4508f1a21d31d
- https://linear.app/n8n/issue/N8N-7070/ux-fixes-batch
- https://linear.app/n8n/issue/N8N-7071/ai-sub-node-bugs


## Review / Merge checklist
- [x] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [x] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again. A feature is not complete without tests.
  >
> *(internal)* You can use Slack commands to trigger [e2e
tests](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#a39f9e5ba64a48b58a71d81c837e8227)
or [deploy test
instance](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#f6a177d32bde4b57ae2da0b8e454bfce)
or [deploy early access version on
Cloud](https://www.notion.so/n8n/Cloudbot-3dbe779836004972b7057bc989526998?pvs=4#fef2d36ab02247e1a0f65a74f6fb534e).

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Elias Meire <elias@meire.dev>

packages/editor-ui/src/Interface.ts

@@ -906,6 +906,7 @@ export interface ViewItemProps {
 	title: string;
 	description: string;
 	icon: string;
+	tag?: string;
 }
 export interface LabelItemProps {
 	key: string;

packages/editor-ui/src/__tests__/setup.ts

@@ -10,3 +10,5 @@ window.ResizeObserver =
 		observe: vi.fn(),
 		unobserve: vi.fn(),
 	}));
+
+Element.prototype.scrollIntoView = vi.fn();

packages/editor-ui/src/components/Node.vue

@@ -906,9 +906,6 @@ export default defineComponent({
 		--node-width: 75px;
 		--node-height: 75px;
 
-		& [class*='node-wrapper--connection-type'] {
-			--configurable-node-options: -10px;
-		}
 		.node-default {
 			.node-options {
 				background: color-mix(in srgb, var(--color-canvas-background) 80%, transparent);
@@ -976,7 +973,6 @@ export default defineComponent({
 		);
 		--configurable-node-icon-offset: 40px;
 		--configurable-node-icon-size: 30px;
-		--configurable-node-options: -10px;
 
 		.node-description {
 			top: calc(50%);
@@ -1004,7 +1000,7 @@ export default defineComponent({
 			}
 
 			.node-options {
-				left: var(--configurable-node-options, 65px);
+				left: 0;
 				height: 25px;
 			}
 
@@ -1053,12 +1049,6 @@ export default defineComponent({
 	.node-wrapper--config & {
 		--node--selected--box-shadow-radius: 4px;
 		border-radius: 60px;
-		background-color: hsla(
-			var(--color-foreground-base-h),
-			60%,
-			var(--color-foreground-base-l),
-			80%
-		);
 	}
 }
 
@@ -1442,7 +1432,7 @@ export default defineComponent({
 
 	// Some nodes allow for dynamic connection labels
 	// so we need to make sure the label does not overflow
-	&[data-endpoint-label-length='medium'] {
+	&.node-connection-type-main[data-endpoint-label-length='medium'] {
 		max-width: calc(var(--stalk-size) - (var(--endpoint-size-small)));
 		overflow: hidden;
 		text-overflow: ellipsis;

packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue

@@ -2,6 +2,7 @@
 	<n8n-node-creator-node
 		:class="$style.view"
 		:title="view.title"
+		:tag="view.tag"
 		:isTrigger="false"
 		:description="view.description"
 		:showActionArrow="true"

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

@@ -10,9 +10,14 @@ import type {
 	LabelCreateElement,
 } from '@/Interface';
 import {
+	AGENT_NODE_TYPE,
+	BASIC_CHAIN_NODE_TYPE,
+	MANUAL_CHAT_TRIGGER_NODE_TYPE,
 	MANUAL_TRIGGER_NODE_TYPE,
 	NODE_CREATOR_OPEN_SOURCES,
 	NO_OP_NODE_TYPE,
+	OPEN_AI_ASSISTANT_NODE_TYPE,
+	QA_CHAIN_NODE_TYPE,
 	SCHEDULE_TRIGGER_NODE_TYPE,
 	SPLIT_IN_BATCHES_NODE_TYPE,
 	STICKY_NODE_TYPE,
@@ -34,6 +39,12 @@ export const useActions = () => {
 	const nodeCreatorStore = useNodeCreatorStore();
 	const instance = getCurrentInstance();
 
+	const singleNodeOpenSources = [
+		NODE_CREATOR_OPEN_SOURCES.PLUS_ENDPOINT,
+		NODE_CREATOR_OPEN_SOURCES.NODE_CONNECTION_ACTION,
+		NODE_CREATOR_OPEN_SOURCES.NODE_CONNECTION_DROP,
+	];
+
 	const actionsCategoryLocales = computed(() => {
 		return {
 			actions: instance?.proxy.$locale.baseText('nodeCreator.actionsCategory.actions') ?? '',
@@ -156,11 +167,6 @@ export const useActions = () => {
 		const workflowContainsTrigger = workflowTriggerNodes.length > 0;
 		const isTriggerPanel = selectedView === TRIGGER_NODE_CREATOR_VIEW;
 		const onlyStickyNodes = addedNodes.every((node) => node.type === STICKY_NODE_TYPE);
-		const singleNodeOpenSources = [
-			NODE_CREATOR_OPEN_SOURCES.PLUS_ENDPOINT,
-			NODE_CREATOR_OPEN_SOURCES.NODE_CONNECTION_ACTION,
-			NODE_CREATOR_OPEN_SOURCES.NODE_CONNECTION_DROP,
-		];
 
 		// If the node creator was opened from the plus endpoint, node connection action, or node connection drop
 		// then we do not want to append the manual trigger
@@ -173,6 +179,22 @@ export const useActions = () => {
 			!onlyStickyNodes
 		);
 	}
+	function shouldPrependChatTrigger(addedNodes: AddedNode[]): boolean {
+		const { allNodes } = useWorkflowsStore();
+
+		const COMPATIBLE_CHAT_NODES = [
+			QA_CHAIN_NODE_TYPE,
+			AGENT_NODE_TYPE,
+			BASIC_CHAIN_NODE_TYPE,
+			OPEN_AI_ASSISTANT_NODE_TYPE,
+		];
+
+		const isChatTriggerMissing =
+			allNodes.find((node) => node.type === MANUAL_CHAT_TRIGGER_NODE_TYPE) === undefined;
+		const isCompatibleNode = addedNodes.some((node) => COMPATIBLE_CHAT_NODES.includes(node.type));
+
+		return isCompatibleNode && isChatTriggerMissing;
+	}
 
 	function getAddedNodesAndConnections(addedNodes: AddedNode[]): AddedNodesAndConnections {
 		if (addedNodes.length === 0) {
@@ -188,7 +210,13 @@ export const useActions = () => {
 			nodeToAutoOpen.openDetail = true;
 		}
 
-		if (shouldPrependManualTrigger(addedNodes)) {
+		if (shouldPrependChatTrigger(addedNodes)) {
+			addedNodes.unshift({ type: MANUAL_CHAT_TRIGGER_NODE_TYPE, isAutoAdd: true });
+			connections.push({
+				from: { nodeIndex: 0 },
+				to: { nodeIndex: 1 },
+			});
+		} else if (shouldPrependManualTrigger(addedNodes)) {
 			addedNodes.unshift({ type: MANUAL_TRIGGER_NODE_TYPE, isAutoAdd: true });
 			connections.push({
 				from: { nodeIndex: 0 },

packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts

@@ -76,6 +76,7 @@ export interface NodeViewItem {
 		group?: string[];
 		sections?: NodeViewItemSection[];
 		description?: string;
+		tag?: string;
 		forceIncludeNodes?: string[];
 	};
 	category?: string | string[];
@@ -451,6 +452,7 @@ export function RegularView(nodes: SimplifiedNodeType[]) {
 				title: i18n.baseText('nodeCreator.aiPanel.langchainAiNodes'),
 				icon: 'robot',
 				description: i18n.baseText('nodeCreator.aiPanel.nodesForAi'),
+				tag: i18n.baseText('nodeCreator.aiPanel.newTag'),
 			},
 		});
 

packages/editor-ui/src/components/RunDataAi/useAiContentParsers.ts

@@ -88,7 +88,11 @@ const outputTypeParsers: {
 		if (Array.isArray(chatHistory)) {
 			const responseText = chatHistory
 				.map((content: MemoryMessage) => {
-					if (content.type === 'constructor' && content.id?.includes('schema') && content.kwargs) {
+					if (
+						content.type === 'constructor' &&
+						content.id?.includes('messages') &&
+						content.kwargs
+					) {
 						interface MessageContent {
 							type: string;
 							image_url?: {

packages/editor-ui/src/components/WorkflowLMChat.vue

@@ -16,11 +16,12 @@
 	>
 		<template #content>
 			<div v-loading="isLoading" class="workflow-lm-chat" data-test-id="workflow-lm-chat-dialog">
-				<div class="messages ignore-key-press" ref="messagesContainer">
+				<div class="messages ignore-key-press">
 					<div
 						v-for="message in messages"
 						:key="`${message.executionId}__${message.sender}`"
 						:class="['message', message.sender]"
+						ref="messageContainer"
 					>
 						<div :class="['content', message.sender]">
 							{{ message.text }}
@@ -80,21 +81,29 @@
 					v-model="currentMessage"
 					class="message-input"
 					type="textarea"
+					:minlength="1"
 					ref="inputField"
+					m
 					:placeholder="$locale.baseText('chat.window.chat.placeholder')"
 					data-test-id="workflow-chat-input"
 					@keydown.stop="updated"
 				/>
-				<n8n-button
-					@click.stop="sendChatMessage(currentMessage)"
-					class="send-button"
-					:loading="isLoading"
-					:label="$locale.baseText('chat.window.chat.sendButtonText')"
-					size="large"
-					icon="comment"
-					type="primary"
-					data-test-id="workflow-chat-send-button"
-				/>
+				<n8n-tooltip :disabled="currentMessage.length > 0">
+					<n8n-button
+						@click.stop="sendChatMessage(currentMessage)"
+						class="send-button"
+						:disabled="currentMessage === ''"
+						:loading="isLoading"
+						:label="$locale.baseText('chat.window.chat.sendButtonText')"
+						size="large"
+						icon="comment"
+						type="primary"
+						data-test-id="workflow-chat-send-button"
+					/>
+					<template #content>
+						{{ $locale.baseText('chat.window.chat.provideMessage') }}
+					</template>
+				</n8n-tooltip>
 
 				<n8n-info-tip class="mt-s">
 					{{ $locale.baseText('chatEmbed.infoTip.description') }}
@@ -218,25 +227,22 @@ export default defineComponent({
 			}
 		},
 		async sendChatMessage(message: string) {
+			if (this.currentMessage.trim() === '') {
+				this.showError(
+					new Error(this.$locale.baseText('chat.window.chat.provideMessage')),
+					this.$locale.baseText('chat.window.chat.emptyChatMessage'),
+				);
+				return;
+			}
 			this.messages.push({
 				text: message,
 				sender: 'user',
 			} as ChatMessage);
 
 			this.currentMessage = '';
-
+			await this.$nextTick();
+			this.scrollToLatestMessage();
 			await this.startWorkflowWithMessage(message);
-
-			// Scroll to bottom
-			const containerRef = this.$refs.messagesContainer as HTMLElement | undefined;
-			if (containerRef) {
-				// Wait till message got added else it will not scroll correctly
-				await this.$nextTick();
-				containerRef.scrollTo({
-					top: containerRef.scrollHeight,
-					behavior: 'smooth',
-				});
-			}
 		},
 
 		setConnectedNode() {
@@ -477,10 +483,20 @@ export default defineComponent({
 
 					void this.$nextTick(() => {
 						that.setNode();
+						this.scrollToLatestMessage();
 					});
 				}
 			}, 500);
 		},
+		scrollToLatestMessage() {
+			const containerRef = this.$refs.messageContainer as HTMLElement[] | undefined;
+			if (containerRef) {
+				containerRef[containerRef.length - 1]?.scrollIntoView({
+					behavior: 'smooth',
+					block: 'start',
+				});
+			}
+		},
 		closeDialog() {
 			this.modalBus.emit('close');
 			void this.externalHooks.run('workflowSettings.dialogVisibleChanged', {

packages/editor-ui/src/composables/useGlobalLinkActions.ts

@@ -2,11 +2,12 @@
  * Creates event listeners for `data-action` attribute to allow for actions to be called from locale without using
  * unsafe onclick attribute
  */
-import { reactive, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';
+import { reactive, computed, onMounted, onUnmounted } from 'vue';
 import { globalLinkActionsEventBus } from '@/event-bus';
 
 const state = reactive({
 	customActions: {} as Record<string, Function>,
+	delegatedClickHandler: null as null | ((e: MouseEvent) => void),
 });
 
 export default () => {
@@ -56,15 +57,17 @@ export default () => {
 	}));
 
 	onMounted(() => {
-		const instance = getCurrentInstance();
+		if (state.delegatedClickHandler) return;
+
+		state.delegatedClickHandler = delegateClick;
 		window.addEventListener('click', delegateClick);
 
 		globalLinkActionsEventBus.on('registerGlobalLinkAction', registerCustomAction);
 	});
 
 	onUnmounted(() => {
-		const instance = getCurrentInstance();
 		window.removeEventListener('click', delegateClick);
+		state.delegatedClickHandler = null;
 
 		globalLinkActionsEventBus.off('registerGlobalLinkAction', registerCustomAction);
 	});

packages/editor-ui/src/constants.ts

@@ -127,6 +127,9 @@ export const MICROSOFT_EXCEL_NODE_TYPE = 'n8n-nodes-base.microsoftExcel';
 export const MANUAL_TRIGGER_NODE_TYPE = 'n8n-nodes-base.manualTrigger';
 export const MANUAL_CHAT_TRIGGER_NODE_TYPE = '@n8n/n8n-nodes-langchain.manualChatTrigger';
 export const AGENT_NODE_TYPE = '@n8n/n8n-nodes-langchain.agent';
+export const OPEN_AI_ASSISTANT_NODE_TYPE = '@n8n/n8n-nodes-langchain.openAiAssistant';
+export const BASIC_CHAIN_NODE_TYPE = '@n8n/n8n-nodes-langchain.chainLlm';
+export const QA_CHAIN_NODE_TYPE = '@n8n/n8n-nodes-langchain.chainRetrievalQa';
 export const MICROSOFT_TEAMS_NODE_TYPE = 'n8n-nodes-base.microsoftTeams';
 export const N8N_NODE_TYPE = 'n8n-nodes-base.n8n';
 export const NO_OP_NODE_TYPE = 'n8n-nodes-base.noOp';

packages/editor-ui/src/mixins/workflowHelpers.ts

@@ -572,7 +572,8 @@ export const workflowHelpers = defineComponent({
 						workflow.nodes[nodeName].disabled !== true &&
 						workflow.nodes[nodeName].type === WEBHOOK_NODE_TYPE
 					) {
-						checkWebhook = [nodeName, ...checkWebhook, ...workflow.getChildNodes(nodeName)];
+						const childNodes = workflow.getChildNodes(nodeName);
+						checkWebhook = [nodeName, ...checkWebhook, ...childNodes];
 					}
 				}
 
@@ -582,8 +583,14 @@ export const workflowHelpers = defineComponent({
 					// If no webhook nodes got found try to find another trigger node
 					const startNode = workflow.getStartNode();
 					if (startNode !== undefined) {
-						checkNodes = workflow.getChildNodes(startNode.name);
-						checkNodes.push(startNode.name);
+						checkNodes = [...workflow.getChildNodes(startNode.name), startNode.name];
+
+						// For the short-listed checkNodes, we also need to check them for any
+						// connected sub-nodes
+						for (const nodeName of checkNodes) {
+							const childNodes = workflow.getParentNodes(nodeName, 'ALL_NON_MAIN');
+							checkNodes.push(...childNodes);
+						}
 					}
 				}
 			}

packages/editor-ui/src/mixins/workflowRun.ts

@@ -83,6 +83,7 @@ export const workflowRun = defineComponent({
 
 			try {
 				// Check first if the workflow has any issues before execute it
+				this.refreshNodeIssues();
 				const issuesExist = this.workflowsStore.nodesIssuesExist;
 				if (issuesExist) {
 					// If issues exist get all of the issues of all nodes
@@ -112,7 +113,9 @@ export const workflowRun = defineComponent({
 							};
 
 							for (const nodeIssue of nodeIssues) {
-								errorMessages.push(`<strong>${nodeName}</strong>: ${nodeIssue}`);
+								errorMessages.push(
+									`<a data-action='openNodeDetail' data-action-parameter-node='${nodeName}'>${nodeName}</a>: ${nodeIssue}`,
+								);
 								trackNodeIssue.error = trackNodeIssue.error.concat(', ', nodeIssue);
 							}
 							trackNodeIssues.push(trackNodeIssue);

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

@@ -140,6 +140,8 @@
 	"chat.window.noExecution": "Nothing got executed yet",
 	"chat.window.chat.placeholder": "Type in message",
 	"chat.window.chat.sendButtonText": "Send",
+	"chat.window.chat.provideMessage": "Please provide a message",
+	"chat.window.chat.emptyChatMessage": "Empty chat message",
 	"chat.window.chat.chatMessageOptions.reuseMessage": "Reuse Message",
 	"chat.window.chat.chatMessageOptions.repostMessage": "Repost Message",
 	"chat.window.chat.chatMessageOptions.executionId": "Execution ID",
@@ -925,6 +927,7 @@
 	"nodeCreator.aiPanel.aiOtherNodesDescription": "Embeddings, Vector Stores, LLMs and other AI nodes",
 	"nodeCreator.aiPanel.selectAiNode": "Select an Al Node to add to your workflow",
 	"nodeCreator.aiPanel.nodesForAi": "Build autonomous agents, summarize or interrogate documents, etc.",
+	"nodeCreator.aiPanel.newTag": "New",
 	"nodeCreator.aiPanel.langchainAiNodes": "Advanced AI",
 	"nodeCreator.aiPanel.title": "When should this workflow run?",
 	"nodeCreator.aiPanel.infoBox": "Check out our <a href=\"/collections/8\" target=\"_blank\">templates</a> for workflow examples and inspiration.",

packages/editor-ui/src/utils/nodeViewUtils.ts

@@ -282,9 +282,9 @@ export const getInputNameOverlay = (
 				label.innerHTML += ' <strong style="color: var(--color-primary)">*</strong>';
 			}
 			label.classList.add('node-input-endpoint-label');
+			label.classList.add(`node-connection-type-${inputName ?? 'main'}`);
 			if (inputName !== NodeConnectionType.Main) {
 				label.classList.add('node-input-endpoint-label--data');
-				label.classList.add(`node-connection-type-${inputName}`);
 			}
 			return label;
 		},
@@ -317,9 +317,9 @@ export const getOutputNameOverlay = (
 			if (ep?.__meta?.endpointLabelLength) {
 				label.setAttribute('data-endpoint-label-length', ep?.__meta?.endpointLabelLength);
 			}
+			label.classList.add(`node-connection-type-${getScope(outputName) ?? 'main'}`);
 			if (outputName !== NodeConnectionType.Main) {
 				label.classList.add('node-output-endpoint-label--data');
-				label.classList.add(`node-connection-type-${getScope(outputName)}`);
 			}
 			if (category) {
 				label.classList.add(`node-connection-category-${category}`);
@@ -998,3 +998,61 @@ export const getFixedNodesList = <T extends { position: XYPosition }>(workflowNo
 
 	return nodes;
 };
+
+/**
+ * Calculates the intersecting distances of the mouse event coordinates with the given element's boundaries,
+ * adjusted by the specified offset.
+ *
+ * @param {Element} element - The DOM element to check against.
+ * @param {MouseEvent | TouchEvent} mouseEvent - The mouse or touch event with the coordinates.
+ * @param {number} offset - Offset to adjust the element's boundaries.
+ * @returns { {x: number | null, y: number | null} | null } Object containing intersecting distances along x and y axes or null if no intersection.
+ */
+export function calculateElementIntersection(
+	element: Element,
+	mouseEvent: MouseEvent | TouchEvent,
+	offset: number,
+): { x: number | null; y: number | null } | null {
+	const { top, left, right, bottom } = element.getBoundingClientRect();
+	const [x, y] = getMousePosition(mouseEvent);
+
+	let intersectX: number | null = null;
+	let intersectY: number | null = null;
+
+	if (x >= left - offset && x <= right + offset) {
+		intersectX = Math.min(x - (left - offset), right + offset - x);
+	}
+	if (y >= top - offset && y <= bottom + offset) {
+		intersectY = Math.min(y - (top - offset), bottom + offset - y);
+	}
+
+	if (intersectX === null && intersectY === null) return null;
+
+	return { x: intersectX, y: intersectY };
+}
+
+/**
+ * Checks if the mouse event coordinates intersect with the given element's boundaries,
+ * adjusted by the specified offset.
+ *
+ * @param {Element} element - The DOM element to check against.
+ * @param {MouseEvent | TouchEvent} mouseEvent - The mouse or touch event with the coordinates.
+ * @param {number} offset - Offset to adjust the element's boundaries.
+ * @returns {boolean} True if the mouse coordinates intersect with the element.
+ */
+export function isElementIntersection(
+	element: Element,
+	mouseEvent: MouseEvent | TouchEvent,
+	offset: number,
+): boolean {
+	const intersection = calculateElementIntersection(element, mouseEvent, offset);
+
+	if (intersection === null) {
+		return false;
+	}
+
+	const isWithinVerticalBounds = intersection.y !== null;
+	const isWithinHorizontalBounds = intersection.x !== null;
+
+	return isWithinVerticalBounds && isWithinHorizontalBounds;
+}

packages/editor-ui/src/views/NodeView.vue

@@ -113,6 +113,7 @@
 					@mouseenter="showTriggerMissingToltip(true)"
 					@mouseleave="showTriggerMissingToltip(false)"
 					@click="onRunContainerClick"
+					v-if="!isManualChatOnly"
 				>
 					<keyboard-shortcut-tooltip
 						:label="runButtonText"
@@ -676,6 +677,9 @@ export default defineComponent({
 		containsTrigger(): boolean {
 			return this.triggerNodes.length > 0;
 		},
+		isManualChatOnly(): boolean {
+			return this.containsChatNodes && this.triggerNodes.length === 1;
+		},
 		containsChatNodes(): boolean {
 			return !!this.nodes.find(
 				(node) => node.type === MANUAL_CHAT_TRIGGER_NODE_TYPE && node.disabled !== true,
@@ -2526,28 +2530,35 @@ export default defineComponent({
 					.catch((e) => {});
 			}
 		},
-		onEventConnectionAbort(connection: Connection) {
+		async onEventConnectionAbort(connection: Connection) {
 			try {
 				if (this.dropPrevented) {
 					this.dropPrevented = false;
 					return;
 				}
-
 				if (this.pullConnActiveNodeName) {
 					const sourceNode = this.workflowsStore.getNodeById(connection.parameters.nodeId);
+					const connectionType = connection.parameters.type ?? NodeConnectionType.Main;
+					const overrideTargetEndpoint = connection?.connector
+						?.overrideTargetEndpoint as Endpoint | null;
+
 					if (sourceNode) {
-						const sourceNodeName = sourceNode.name;
+						const isTarget = connection.parameters.connection === 'target';
+						const sourceNodeName = isTarget ? this.pullConnActiveNodeName : sourceNode.name;
+						const targetNodeName = isTarget ? sourceNode.name : this.pullConnActiveNodeName;
 						const outputIndex = connection.parameters.index;
+						NodeViewUtils.resetConnectionAfterPull(connection);
+						await this.$nextTick();
 
 						this.connectTwoNodes(
 							sourceNodeName,
 							outputIndex,
-							this.pullConnActiveNodeName,
-							0,
-							NodeConnectionType.Main,
+							targetNodeName,
+							overrideTargetEndpoint?.parameters?.index ?? 0,
+							connectionType,
 						);
 						this.pullConnActiveNodeName = null;
-						this.dropPrevented = true;
+						this.dropPrevented = false;
 					}
 					return;
 				}
@@ -2894,6 +2905,8 @@ export default defineComponent({
 					const sourceNode = this.workflowsStore.getNodeById(info.connection.parameters.nodeId);
 					const sourceNodeName = sourceNode.name;
 					const outputIndex = info.connection.parameters.index;
+					const overrideTargetEndpoint = info.connection.connector
+						.overrideTargetEndpoint as Endpoint | null;
 
 					if (connectionInfo) {
 						this.historyStore.pushCommandToUndo(new RemoveConnectionCommand(connectionInfo));
@@ -2902,7 +2915,7 @@ export default defineComponent({
 						sourceNodeName,
 						outputIndex,
 						this.pullConnActiveNodeName,
-						0,
+						overrideTargetEndpoint?.parameters?.index ?? 0,
 						NodeConnectionType.Main,
 					);
 					this.pullConnActiveNodeName = null;
@@ -2932,58 +2945,86 @@ export default defineComponent({
 				this.pullConnActiveNodeName = null;
 				this.pullConnActive = true;
 				this.canvasStore.newNodeInsertPosition = null;
+				NodeViewUtils.hideConnectionActions(connection);
 				NodeViewUtils.resetConnection(connection);
 
-				const nodes = [...document.querySelectorAll('.node-wrapper')];
+				const scope = connection.scope as ConnectionTypes;
+				const scopedEndpoints = Array.from(
+					document.querySelectorAll(`[data-jtk-scope-${scope}=true]`),
+				);
+				const connectionType = connection.parameters.connection;
+				const requiredType = connectionType === 'source' ? 'target' : 'source';
+
+				const filteredEndpoints = scopedEndpoints.filter((el) => {
+					const endpoint = el.jtk.endpoint as Endpoint;
+					if (!endpoint) return false;
+
+					// Prevent snapping(but not connecting) to the same node
+					const isSameNode = endpoint.parameters.nodeId === connection.parameters.nodeId;
+					const endpointType = endpoint.parameters.connection;
+
+					return !isSameNode && endpointType === requiredType;
+				});
 
 				const onMouseMove = (e: MouseEvent | TouchEvent) => {
 					if (!connection) {
 						return;
 					}
 
-					const element = document.querySelector('.jtk-endpoint.jtk-drag-hover');
-					if (element) {
-						const endpoint = element.jtk.endpoint;
-						NodeViewUtils.showDropConnectionState(connection, endpoint);
-						return;
-					}
+					const intersectingEndpoints = filteredEndpoints
+						.filter((element: Element) => {
+							const endpoint = element.jtk.endpoint as Endpoint;
 
-					const inputMargin = 24;
-					const intersecting = nodes.find((element: Element) => {
-						const { top, left, right, bottom } = element.getBoundingClientRect();
-						const [x, y] = NodeViewUtils.getMousePosition(e);
-						if (top <= y && bottom >= y && left - inputMargin <= x && right >= x) {
-							const nodeName = (element as HTMLElement).dataset.name as string;
-							const node = this.workflowsStore.getNodeByName(nodeName);
-							if (node) {
-								const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+							if (element.classList.contains('jtk-floating-endpoint')) {
+								return false;
+							}
+							const isEndpointIntersect = NodeViewUtils.isElementIntersection(element, e, 50);
+							const isNodeElementIntersect = NodeViewUtils.isElementIntersection(
+								endpoint.element,
+								e,
+								30,
+							);
 
-								const workflow = this.getCurrentWorkflow();
-								const workflowNode = workflow.getNode(nodeName);
-								const inputs = NodeHelpers.getNodeInputs(workflow, workflowNode!, nodeType);
+							if (isEndpointIntersect || isNodeElementIntersect) {
+								const node = this.workflowsStore.getNodeById(endpoint.parameters.nodeId);
 
-								if (nodeType && inputs.length === 1) {
-									this.pullConnActiveNodeName = node.name;
-									const endpointUUID = this.getInputEndpointUUID(
-										nodeName,
-										connection.parameters.type,
-										0,
-									);
-									if (endpointUUID) {
-										const endpoint = this.instance?.getEndpoint(endpointUUID);
+								if (node) {
+									const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 
-										NodeViewUtils.showDropConnectionState(connection, endpoint);
+									if (!nodeType) return false;
 
-										return true;
-									}
+									return true;
 								}
 							}
-						}
 
-						return false;
-					});
+							return false;
+						})
+						.sort((a, b) => {
+							const aEndpointIntersect = NodeViewUtils.calculateElementIntersection(a, e, 50);
+							const bEndpointIntersect = NodeViewUtils.calculateElementIntersection(b, e, 50);
 
-					if (!intersecting) {
+							// If both intersections are null, treat them as equal
+							if (!aEndpointIntersect?.y && !bEndpointIntersect?.y) {
+								return 0;
+							}
+
+							// If one intersection is null, sort the non-null one first
+							if (!aEndpointIntersect?.y) return 1;
+							if (!bEndpointIntersect?.y) return -1;
+
+							// Otherwise, sort by ascending Y distance
+							return bEndpointIntersect.y - aEndpointIntersect.y;
+						});
+
+					if (intersectingEndpoints.length > 0) {
+						const intersectingEndpoint = intersectingEndpoints[0];
+						const endpoint = intersectingEndpoint.jtk.endpoint as Endpoint;
+						const node = this.workflowsStore.getNodeById(endpoint.parameters.nodeId);
+
+						this.pullConnActiveNodeName = node?.name ?? null;
+
+						NodeViewUtils.showDropConnectionState(connection, endpoint);
+					} else {
 						NodeViewUtils.showPullConnectionState(connection);
 						this.pullConnActiveNodeName = null;
 					}
@@ -4444,6 +4485,23 @@ export default defineComponent({
 					NodeConnectionType.Main,
 				);
 			}
+
+			const lastAddedNode = this.nodes[this.nodes.length - 1];
+			const workflow = this.getCurrentWorkflow();
+			const lastNodeInputs = workflow.getParentNodesByDepth(lastAddedNode.name, 1);
+
+			// If the last added node has multiple inputs, move them down
+			if (lastNodeInputs.length > 1) {
+				lastNodeInputs.slice(1).forEach((node, index) => {
+					const nodeUi = this.workflowsStore.getNodeByName(node.name);
+					if (!nodeUi) return;
+
+					this.onMoveNode({
+						nodeName: nodeUi.name,
+						position: [nodeUi.position[0], nodeUi.position[1] + 100 * (index + 1)],
+					});
+				});
+			}
 		},
 
 		async saveCurrentWorkflowExternal(callback: () => void) {
@@ -4691,25 +4749,37 @@ export default defineComponent({
 
 		this.registerCustomAction({
 			key: 'openSelectiveNodeCreator',
-			action: ({ connectiontype, node }: { connectiontype: NodeConnectionType; node: string }) => {
-				this.onToggleNodeCreator({
-					source: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
-					createNodeActive: true,
-					nodeCreatorView: AI_NODE_CREATOR_VIEW,
-				});
+			action: async ({
+				connectiontype,
+				node,
+				creatorview,
+			}: {
+				connectiontype: NodeConnectionType;
+				node: string;
+				creatorview?: string;
+			}) => {
+				const nodeName = node ?? this.ndvStore.activeNodeName;
+				const nodeData = nodeName ? this.workflowsStore.getNodeByName(nodeName) : null;
 
 				this.ndvStore.activeNodeName = null;
-				// Select the node so that the node creator knows which node to connect to
-				const nodeData = this.workflowsStore.getNodeByName(node);
-				if (connectiontype && nodeData) {
-					this.insertNodeAfterSelected({
-						index: 0,
-						endpointUuid: `${nodeData.id}-input${connectiontype}0`,
-						eventSource: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
-						outputType: connectiontype,
-						sourceId: nodeData.id,
-					});
-				}
+				await this.redrawNode(node);
+				// Wait for UI to update
+				setTimeout(() => {
+					if (creatorview) {
+						this.onToggleNodeCreator({
+							createNodeActive: true,
+							nodeCreatorView: creatorview,
+						});
+					} else if (connectiontype && nodeData) {
+						this.insertNodeAfterSelected({
+							index: 0,
+							endpointUuid: `${nodeData.id}-input${connectiontype}0`,
+							eventSource: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
+							outputType: connectiontype,
+							sourceId: nodeData.id,
+						});
+					}
+				}, 0);
 			},
 		});
 
@@ -4910,14 +4980,14 @@ export default defineComponent({
 				&.connection-drag-scope-active-connection-target {
 					// Apply style to compatible output endpoints
 					.diamond-output-endpoint[data-jtk-scope-#{$node-type}='true'] {
-						transform: scale(1.375) rotate(45deg);
+						transform: scale(1.5) rotate(45deg);
 					}
 
 					.add-input-endpoint[data-jtk-scope-#{$node-type}='true'] {
 						// Apply style to dragged compatible input endpoint
 						&.jtk-dragging {
 							.add-input-endpoint-default {
-								transform: translate(-4px, -4px) scale(1.375);
+								transform: translate(-5px, -5px) scale(1.5);
 							}
 						}
 
@@ -4939,7 +5009,7 @@ export default defineComponent({
 					// Apply style to dragged compatible output endpoint
 					.diamond-output-endpoint[data-jtk-scope-#{$node-type}='true'] {
 						&.jtk-dragging {
-							transform: scale(1.375) rotate(45deg);
+							transform: scale(1.5) rotate(45deg);
 						}
 
 						// Apply style to non-dragged compatible input endpoints
@@ -4951,7 +5021,7 @@ export default defineComponent({
 					// Apply style to compatible output endpoints
 					.add-input-endpoint[data-jtk-scope-#{$node-type}='true'] {
 						.add-input-endpoint-default {
-							transform: translate(-4px, -4px) scale(1.375);
+							transform: translate(-5px, -5px) scale(1.5);
 						}
 					}
 

packages/editor-ui/src/views/TemplatesWorkflowView.vue

@@ -151,7 +151,7 @@ export default defineComponent({
 	async mounted() {
 		this.scrollToTop();
 
-		if (this.template && (this.template as ITemplatesWorkflowFull).full) {
+		if (this.template && this.template.full) {
 			this.loading = false;
 			return;
 		}