feat(AI Transform Node): UX improvements

packages/design-system/src/components/N8nInput/Input.vue

@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<InputProps>(), {
 	readonly: false,
 	clearable: false,
 	rows: 2,
-	maxlength: Infinity,
+	maxlength: undefined,
 	title: '',
 	name: () => uid('input'),
 	autocomplete: 'off',
@@ -81,6 +81,7 @@ defineExpose({ focus, blur, select });
 		:clearable="clearable"
 		:rows="rows"
 		:title="title"
+		:maxlength="maxlength"
 		v-bind="$attrs"
 	>
 		<template v-if="$slots.prepend" #prepend>

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

@@ -1,21 +1,16 @@
 <script setup lang="ts">
-import { ApplicationError, type INodeProperties, type NodePropertyAction } from 'n8n-workflow';
+import { type INodeProperties, type NodePropertyAction } from 'n8n-workflow';
 import type { INodeUi, IUpdateInformation } from '@/Interface';
 import { ref, computed, onMounted } from 'vue';
 import { N8nButton, N8nInput, N8nTooltip } from 'n8n-design-system/components';
 import { useI18n } from '@/composables/useI18n';
 import { useToast } from '@/composables/useToast';
 import { useNDVStore } from '@/stores/ndv.store';
-import { getSchemas, getParentNodes } from './utils';
-import { useRootStore } from '@/stores/root.store';
+import { getParentNodes, generateCodeForAiTransform } from './utils';
 import { useTelemetry } from '@/composables/useTelemetry';
-import { generateCodeForPrompt } from '@/api/ai';
+import { useUIStore } from '@/stores/ui.store';
 
-import { format } from 'prettier';
-import jsParser from 'prettier/plugins/babel';
-import * as estree from 'prettier/plugins/estree';
-import { useSettingsStore } from '@/stores/settings.store';
-import type { AskAiRequest } from '@/types/assistant.types';
+const AI_TRANSFORM_CODE_GENERATED_FOR_PROMPT = 'codeGeneratedForPrompt';
 
 const emit = defineEmits<{
 	valueChanged: [value: IUpdateInformation];
@@ -27,8 +22,7 @@ const props = defineProps<{
 	path: string;
 }>();
 
-const rootStore = useRootStore();
-const settingsStore = useSettingsStore();
+const { activeNode } = useNDVStore();
 
 const i18n = useI18n();
 
@@ -53,6 +47,11 @@ const isSubmitEnabled = computed(() => {
 
 	return true;
 });
+const promptUpdated = computed(() => {
+	const lastPrompt = activeNode?.parameters[AI_TRANSFORM_CODE_GENERATED_FOR_PROMPT] as string;
+	if (!lastPrompt) return false;
+	return lastPrompt.trim() !== prompt.value.trim();
+});
 
 function startLoading() {
 	isLoading.value = true;
@@ -69,7 +68,6 @@ function getPath(parameter: string) {
 }
 
 async function onSubmit() {
-	const { activeNode } = useNDVStore();
 	const { showMessage } = useToast();
 	const action: string | NodePropertyAction | undefined =
 		props.parameter.typeOptions?.buttonConfig?.action;
@@ -93,46 +91,26 @@ async function onSubmit() {
 	startLoading();
 
 	try {
-		const schemas = getSchemas();
-
-		const payload: AskAiRequest.RequestPayload = {
-			question: prompt.value,
-			context: {
-				schema: schemas.parentNodesSchemas,
-				inputSchema: schemas.inputSchema!,
-				ndvPushRef: useNDVStore().pushRef,
-				pushRef: rootStore.pushRef,
-			},
-			forNode: 'transform',
-		};
 		switch (type) {
 			case 'askAiCodeGeneration':
-				let value;
-				if (settingsStore.isAskAiEnabled) {
-					const { restApiContext } = useRootStore();
-					const { code } = await generateCodeForPrompt(restApiContext, payload);
-					value = code;
-				} else {
-					throw new ApplicationError('AI code generation is not enabled');
-				}
+				const updateInformation = await generateCodeForAiTransform(
+					prompt.value,
+					getPath(target as string),
+				);
+				if (!updateInformation) return;
 
-				if (value === undefined) return;
+				//updade code parameter
+				emit('valueChanged', updateInformation);
 
-				const formattedCode = await format(String(value), {
-					parser: 'babel',
-					plugins: [jsParser, estree],
+				//update code generated for prompt parameter
+				emit('valueChanged', {
+					name: getPath(AI_TRANSFORM_CODE_GENERATED_FOR_PROMPT),
+					value: prompt.value,
 				});
 
-				const updateInformation = {
-					name: getPath(target as string),
-					value: formattedCode,
-				};
-
-				emit('valueChanged', updateInformation);
-
 				useTelemetry().trackAiTransform('generationFinished', {
 					prompt: prompt.value,
-					code: formattedCode,
+					code: updateInformation.value,
 				});
 				break;
 			default:
@@ -168,6 +146,16 @@ function onPromptInput(inputValue: string) {
 	});
 }
 
+function useDarkBackdrop(): string {
+	const theme = useUIStore().appliedTheme;
+
+	if (theme === 'light') {
+		return 'background-color: var(--color-background-xlight);';
+	} else {
+		return 'background-color: var(--color-background-light);';
+	}
+}
+
 onMounted(() => {
 	parentNodes.value = getParentNodes();
 });
@@ -185,13 +173,18 @@ onMounted(() => {
 		>
 		</n8n-input-label>
 		<div :class="$style.inputContainer" :hidden="!hasInputField">
-			<div :class="$style.meta">
+			<div :class="$style.meta" :style="useDarkBackdrop()">
 				<span
 					v-if="inputFieldMaxLength"
 					v-show="prompt.length > 1"
 					:class="$style.counter"
 					v-text="`${prompt.length} / ${inputFieldMaxLength}`"
 				/>
+				<span
+					v-if="promptUpdated"
+					:class="$style['warning-text']"
+					v-text="'Instructions changed. Click \'Generate code\' before running this node again'"
+				/>
 			</div>
 			<N8nInput
 				v-model="prompt"
@@ -255,9 +248,15 @@ onMounted(() => {
 	display: flex;
 	justify-content: space-between;
 	position: absolute;
-	bottom: var(--spacing-2xs);
+	padding-bottom: var(--spacing-2xs);
+	padding-top: var(--spacing-2xs);
+	margin: 1px;
+	margin-right: var(--spacing-s);
+	bottom: 0;
 	left: var(--spacing-xs);
 	right: var(--spacing-xs);
+	gap: 10px;
+	align-items: end;
 	z-index: 1;
 
 	* {
@@ -267,10 +266,15 @@ onMounted(() => {
 }
 .counter {
 	color: var(--color-text-light);
+	flex-shrink: 0;
 }
 .controls {
 	padding: var(--spacing-2xs) 0;
 	display: flex;
 	justify-content: flex-end;
 }
+.warning-text {
+	color: var(--color-warning);
+	line-height: 1.2;
+}
 </style>

packages/editor-ui/src/components/ButtonParameter/utils.ts

@@ -1,9 +1,16 @@
 import type { Schema } from '@/Interface';
-import type { INodeExecutionData } from 'n8n-workflow';
+import { ApplicationError, type INodeExecutionData } from 'n8n-workflow';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useDataSchema } from '@/composables/useDataSchema';
 import { executionDataToJson } from '@/utils/nodeTypesUtils';
+import { generateCodeForPrompt } from '../../api/ai';
+import { useRootStore } from '../../stores/root.store';
+import { type AskAiRequest } from '../../types/assistant.types';
+import { useSettingsStore } from '../../stores/settings.store';
+import { format } from 'prettier';
+import jsParser from 'prettier/plugins/babel';
+import * as estree from 'prettier/plugins/estree';
 
 export function getParentNodes() {
 	const activeNode = useNDVStore().activeNode;
@@ -44,3 +51,41 @@ export function getSchemas() {
 		parentNodesSchemas,
 	};
 }
+
+export async function generateCodeForAiTransform(prompt: string, path: string) {
+	const schemas = getSchemas();
+
+	const payload: AskAiRequest.RequestPayload = {
+		question: prompt,
+		context: {
+			schema: schemas.parentNodesSchemas,
+			inputSchema: schemas.inputSchema!,
+			ndvPushRef: useNDVStore().pushRef,
+			pushRef: useRootStore().pushRef,
+		},
+		forNode: 'transform',
+	};
+
+	let value;
+	if (useSettingsStore().isAskAiEnabled) {
+		const { restApiContext } = useRootStore();
+		const { code } = await generateCodeForPrompt(restApiContext, payload);
+		value = code;
+	} else {
+		throw new ApplicationError('AI code generation is not enabled');
+	}
+
+	if (value === undefined) return;
+
+	const formattedCode = await format(String(value), {
+		parser: 'babel',
+		plugins: [jsParser, estree],
+	});
+
+	const updateInformation = {
+		name: path,
+		value: formattedCode,
+	};
+
+	return updateInformation;
+}