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>
2023-12-08 13:42:32 +01:00
parent dbd62a4992
commit dcf12867b3
32 changed files with 1235 additions and 436 deletions
--- a/packages/editor-ui/src/components/Node.vue
+++ b/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;
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
+++ b/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"
--- a/packages/editor-ui/src/components/Node/NodeCreator/composables/useActions.ts
+++ b/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 },
--- a/packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts
+++ b/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'),
 			},
 		});

--- a/packages/editor-ui/src/components/RunDataAi/useAiContentParsers.ts
+++ b/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?: {
--- a/packages/editor-ui/src/components/WorkflowLMChat.vue
+++ b/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', {