feat(editor): Ask AI

cypress/e2e/6-code-node.cy.ts

@@ -5,48 +5,43 @@ const WorkflowPage = new WorkflowPageClass();
 const ndv = new NDV();
 
 describe('Code node', () => {
-	beforeEach(() => {
-		WorkflowPage.actions.visit();
-	});
-
-	it('should execute the placeholder in all-items mode successfully', () => {
-		WorkflowPage.actions.addInitialNodeToCanvas('Manual');
-		WorkflowPage.actions.addNodeToCanvas('Code');
-		WorkflowPage.actions.openNode('Code');
+	describe('Code editor', () => {
+		beforeEach(() => {
+			WorkflowPage.actions.visit();
+			WorkflowPage.actions.addInitialNodeToCanvas('Manual');
+			WorkflowPage.actions.addNodeToCanvas('Code', true, true);
+		});
 
-		ndv.actions.execute();
+		it('should show correct placeholders switching modes', () => {
+			cy.contains("// Loop over input items and add a new field").should('be.visible');
 
-		WorkflowPage.getters.successToast().contains('Node executed successfully');
-	});
+			ndv.getters.parameterInput('mode').click();
+			ndv.actions.selectOptionInParameterDropdown('mode', 'Run Once for Each Item');
 
-	it('should execute the placeholder in each-item mode successfully', () => {
-		WorkflowPage.actions.addInitialNodeToCanvas('Manual');
-		WorkflowPage.actions.addNodeToCanvas('Code');
-		WorkflowPage.actions.openNode('Code');
-		ndv.getters.parameterInput('mode').click();
-		ndv.actions.selectOptionInParameterDropdown('mode', 'Run Once for Each Item');
+			cy.contains("// Add a new field called 'myNewField'").should('be.visible');
 
-		ndv.actions.execute();
+			ndv.getters.parameterInput('mode').click();
+			ndv.actions.selectOptionInParameterDropdown('mode', 'Run Once for All Items');
+			cy.contains("// Loop over input items and add a new field").should('be.visible');
+		})
 
-		WorkflowPage.getters.successToast().contains('Node executed successfully');
-	});
+		it('should execute the placeholder successfully in both modes', () => {
+			ndv.actions.execute();
 
-	it('should execute the placeholder in each-item mode successfully', () => {
-		WorkflowPage.actions.addInitialNodeToCanvas('Manual');
-		WorkflowPage.actions.addNodeToCanvas('Code');
-		WorkflowPage.actions.openNode('Code');
-		ndv.getters.parameterInput('mode').click();
-		ndv.actions.selectOptionInParameterDropdown('mode', 'Run Once for Each Item');
+			WorkflowPage.getters.successToast().contains('Node executed successfully');
+			ndv.getters.parameterInput('mode').click();
+			ndv.actions.selectOptionInParameterDropdown('mode', 'Run Once for Each Item');
 
-		ndv.actions.execute();
+			ndv.actions.execute();
 
-		WorkflowPage.getters.successToast().contains('Node executed successfully');
-	});
+			WorkflowPage.getters.successToast().contains('Node executed successfully');
+		});
+	})
 
 	describe('Ask AI', () => {
-		it('tab should not exist if control or no feature flag', () => {
+		it('tab should display based on experiment', () => {
+			WorkflowPage.actions.visit();
 			cy.window().then((win) => {
-				// cy.clearAllLocalStorage();
 				win.featureFlags.override('011_ask_AI', 'control');
 				WorkflowPage.actions.addInitialNodeToCanvas('Manual');
 				WorkflowPage.actions.addNodeToCanvas('Code');
@@ -63,15 +58,15 @@ describe('Code node', () => {
 
 		describe('Enabled', () => {
 			beforeEach(() => {
+				WorkflowPage.actions.visit();
 				cy.window().then((win) => {
 					win.featureFlags.override('011_ask_AI', 'gpt3');
 					WorkflowPage.actions.addInitialNodeToCanvas('Manual');
-					WorkflowPage.actions.addNodeToCanvas('Code');
-					WorkflowPage.actions.openNode('Code');
+					WorkflowPage.actions.addNodeToCanvas('Code', true, true);
 				})
 			})
 
-			it('tab should exist if model selected and be selectable', () => {
+			it('tab should exist if experiment selected and be selectable', () => {
 					cy.getByTestId('code-node-tab-ai').should('exist');
 					cy.get('#tab-ask-ai').click();
 					cy.contains('Hey AI, generate JavaScript').should('exist');

packages/design-system/src/components/N8nCircleLoader/CircleLoader.stories.ts

@@ -0,0 +1,50 @@
+import N8nCircleLoader from './CircleLoader.vue';
+import type { StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Atoms/CircleLoader',
+	component: N8nCircleLoader,
+	argTypes: {
+		radius: {
+			control: {
+				type: 'number',
+			},
+		},
+		progress: {
+			control: {
+				type: 'number',
+			},
+		},
+		strokeWidth: {
+			control: {
+				type: 'number',
+			},
+		},
+	},
+};
+
+interface Args {
+	radius: number;
+	progress: number;
+	strokeWidth: number;
+}
+
+const template: StoryFn<Args> = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	components: {
+		N8nCircleLoader,
+	},
+	template: `
+		<div>
+			<n8n-circle-loader v-bind="args" />
+		</div>
+	`,
+});
+
+export const defaultCircleLoader = template.bind({});
+defaultCircleLoader.args = {
+	radius: 20,
+	progress: 42,
+	strokeWidth: 10,
+};

packages/design-system/src/components/N8nCircleLoader/__tests__/CircleLoader.spec.ts

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/vue';
+import N8NCircleLoader from '../CircleLoader.vue';
+
+describe('N8NCircleLoader', () => {
+	it('should render correctly', () => {
+		const wrapper = render(N8NCircleLoader, {
+			props: {
+				radius: 20,
+				progress: 42,
+				strokeWidth: 10,
+			},
+		});
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

packages/design-system/src/components/N8nCircleLoader/__tests__/__snapshots__/CircleLoader.spec.ts.snap

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`N8NCircleLoader > should render correctly 1`] = `
+"<div class=\\"progress-circle\\"><svg class=\\"progress-ring\\" width=\\"60\\" height=\\"60\\">
+    <circle class=\\"progressRingCircle\\" stroke-width=\\"10\\" stroke=\\"#DCDFE6\\" fill=\\"transparent\\" r=\\"20\\" cx=\\"30\\" cy=\\"30\\"></circle>
+    <circle class=\\"progressRingCircle\\" stroke=\\"#5C4EC2\\" stroke-width=\\"10\\" fill=\\"transparent\\" r=\\"20\\" cx=\\"30\\" cy=\\"30\\" style=\\"stroke-dasharray: 125.66370614359172; stroke-dashoffset: 72.8849495632832;\\"></circle>
+  </svg></div>"
+`;

packages/design-system/src/components/N8nCircleLoader/index.ts

@@ -0,0 +1,3 @@
+import N8nCircleLoader from './CircleLoader.vue';
+
+export default N8nCircleLoader;

packages/design-system/src/components/index.ts

@@ -9,6 +9,7 @@ export { default as N8nButton } from './N8nButton';
 export { default as N8nCallout } from './N8nCallout';
 export { default as N8nCard } from './N8nCard';
 export { default as N8nCheckbox } from './N8nCheckbox';
+export { default as N8nCircleLoader } from './N8nCircleLoader';
 export { default as N8nColorPicker } from './N8nColorPicker';
 export { default as N8nDatatable } from './N8nDatatable';
 export { default as N8nFormBox } from './N8nFormBox';

packages/design-system/src/plugin.ts

@@ -12,6 +12,7 @@ import {
 	N8nCallout,
 	N8nCard,
 	N8nCheckbox,
+	N8nCircleLoader,
 	N8nColorPicker,
 	N8nDatatable,
 	N8nFormBox,
@@ -66,6 +67,7 @@ export const N8nPlugin: Plugin<{}> = {
 		app.component('n8n-callout', N8nCallout);
 		app.component('n8n-card', N8nCard);
 		app.component('n8n-checkbox', N8nCheckbox);
+		app.component('n8n-circle-loader', N8nCircleLoader);
 		app.component('n8n-color-picker', N8nColorPicker);
 		app.component('n8n-datatable', N8nDatatable);
 		app.component('n8n-form-box', N8nFormBox);

packages/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue

@@ -18,7 +18,6 @@ import {
 	ASK_AI_MIN_PROMPT_LENGTH,
 	ASK_AI_LOADING_DURATION_MS,
 } from '@/constants';
-import CircleLoader from './CircleLoader.vue';
 
 const emit = defineEmits<{
 	(e: 'submit', code: string): void;
@@ -150,6 +149,7 @@ async function onSubmit() {
 	}
 
 	startLoading();
+
 	try {
 		const version = useRootStore().versionCli;
 		const model =
@@ -273,7 +273,7 @@ onMounted(() => {
 				<transition name="text-fade-in-out" mode="out-in">
 					<div v-text="loadingString" :key="loadingPhraseIndex" />
 				</transition>
-				<CircleLoader :radius="8" :progress="loaderProgress" :stroke-width="3" />
+				<n8n-circle-loader :radius="8" :progress="loaderProgress" :stroke-width="3" />
 			</div>
 			<n8n-tooltip :disabled="isSubmitEnabled" v-else>
 				<div>

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

@@ -29,8 +29,8 @@
 					@replaceCode="onReplaceCode"
 					:has-changes="hasChanges"
 					:key="activeTab"
-					@started-loading="isLoading = true"
-					@finished-loading="isLoading = false"
+					@started-loading="isLoadingAIResponse = true"
+					@finished-loading="isLoadingAIResponse = false"
 				/>
 			</el-tab-pane>
 		</el-tabs>
@@ -112,7 +112,7 @@ export default defineComponent({
 			tabs: ['code', 'ask-ai'],
 			activeTab: 'code',
 			hasChanges: false,
-			isLoading: false,
+			isLoadingAIResponse: false,
 		};
 	},
 	watch: {
@@ -150,20 +150,13 @@ export default defineComponent({
 	},
 	computed: {
 		...mapStores(useRootStore, usePostHog),
-		content(): string {
-			if (!this.editor) return '';
-
-			return this.editor.state.doc.toString();
-		},
 		aiEnabled(): boolean {
-			// AI is enabled only via Posthog experiment. So if user doesn't have feature flag
-			// we fallback to control which is no-show variant
-			const isAiExperimentDisabled =
-				(this.posthogStore.getVariant(ASK_AI_EXPERIMENT.name) ?? ASK_AI_EXPERIMENT.control) ===
-				ASK_AI_EXPERIMENT.control;
+			const isAiExperimentEnabled = [ASK_AI_EXPERIMENT.gpt3, ASK_AI_EXPERIMENT.gpt4].includes(
+				(this.posthogStore.getVariant(ASK_AI_EXPERIMENT.name) ?? '') as string,
+			);
 
 			return (
-				!isAiExperimentDisabled &&
+				isAiExperimentEnabled &&
 				this.settingsStore.settings.ai.enabled &&
 				this.language === 'javaScript'
 			);
@@ -184,9 +177,12 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		getCurrentEditorContent() {
+			return this.editor?.state.doc.toString() ?? '';
+		},
 		async onBeforeTabLeave(_activeName: string, oldActiveName: string) {
 			// Confirm dialog if leaving ask-ai tab during loading
-			if (oldActiveName === 'ask-ai' && this.isLoading) {
+			if (oldActiveName === 'ask-ai' && this.isLoadingAIResponse) {
 				const confirmModal = await this.alert(
 					this.$locale.baseText('codeNodeEditor.askAi.sureLeaveTab'),
 					{
@@ -213,7 +209,7 @@ export default defineComponent({
 			});
 
 			this.editor?.dispatch({
-				changes: { from: 0, to: (this.modelValue || '').length, insert: formattedCode },
+				changes: { from: 0, to: this.getCurrentEditorContent().length, insert: formattedCode },
 			});
 
 			this.activeTab = 'code';
@@ -364,40 +360,22 @@ export default defineComponent({
 
 		// empty on first load, default param value
 		if (!this.modelValue) {
+			this.refreshPlaceholder();
 			this.$emit('update:modelValue', this.placeholder);
 		}
 	},
 });
 </script>
 
-<style lang="scss" module>
-:global(.el-tabs) {
-	:global(.el-tabs__content) {
-		border: 1px solid var(--color-foreground-base);
-		border-radius: 0px var(--border-radius-base) var(--border-radius-base);
-	}
-	:global(.el-tabs__header) {
-		border-bottom: 0 !important;
-	}
-	:global(.el-tabs__nav) {
-		padding: 0;
-	}
-	:global(.el-tabs__item) {
-		padding: var(--spacing-5xs) var(--spacing-2xs) !important;
-		height: auto;
-		line-height: var(--font-line-height-xloose);
-		font-weight: var(--font-weight-regular);
-		font-size: var(--font-size-2xs);
-
-		&:not([aria-selected='true']) {
-			background-color: var(--color-background-base);
-			border-bottom: 1px solid var(--color-foreground-base) !important;
-		}
-	}
-	:global(.code-editor-tabs .cm-editor) {
+<style scoped lang="scss">
+:deep(.el-tabs) {
+	.code-editor-tabs .cm-editor {
 		border: 0;
 	}
 }
+</style>
+
+<style lang="scss" module>
 .code-node-editor-container {
 	position: relative;
 

packages/editor-ui/src/constants.ts

@@ -523,21 +523,14 @@ export const KEEP_AUTH_IN_NDV_FOR_NODES = [
 export const MAIN_AUTH_FIELD_NAME = 'authentication';
 export const NODE_RESOURCE_FIELD_NAME = 'resource';
 
-export const TEMPLATES_EXPERIMENT = {
-	name: '008_template_variants',
-	control: 'control',
-	variant: 'variant',
-	variantIds: ['1932', '1930', '1931', '1933', '1750', '1748', '1435'],
-};
-
 export const ASK_AI_EXPERIMENT = {
 	name: '011_ask_AI',
 	control: 'control',
 	gpt3: 'gpt3',
 	gpt4: 'gpt4',
 };
 
-export const EXPERIMENTS_TO_TRACK = [TEMPLATES_EXPERIMENT.name, ASK_AI_EXPERIMENT.name];
+export const EXPERIMENTS_TO_TRACK = [ASK_AI_EXPERIMENT.name];
 
 export const NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND = [FILTER_NODE_TYPE];
 

packages/editor-ui/src/n8n-theme.scss

@@ -128,6 +128,30 @@
 	font-weight: bold;
 }
 
+.el-tabs__content {
+	border: 1px solid var(--color-foreground-base);
+	border-radius: 0px var(--border-radius-base) var(--border-radius-base);
+}
+.el-tabs__header {
+	border-bottom: 0 !important;
+}
+.el-tabs__nav {
+	padding: 0;
+	overflow: hidden;
+}
+.el-tabs__item {
+	padding: var(--spacing-5xs) var(--spacing-2xs) !important;
+	height: auto;
+	line-height: var(--font-line-height-xloose);
+	font-weight: var(--font-weight-regular);
+	font-size: var(--font-size-2xs);
+
+	&:not([aria-selected='true']) {
+		background-color: var(--color-background-base);
+		border-bottom: 1px solid var(--color-foreground-base) !important;
+	}
+}
+
 // Loading Indicator
 .el-loading-mask {
 	background-color: var(--color-foreground-xlight);