feat(editor): Add Ask AI preview (#5916)

* ✨ Add Ask AI preview

* 🐛 Fire event on mousedown

* ⚡ Update to use Alex's event bus

* ✏️ Use i18n

* ⚡ Add telemetry

* ♻️ Change trigger from focus to hover

* ⚡ Ensure focus + hover trigger event

packages/design-system/src/components/N8nButton/Button.vue

@@ -194,7 +194,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
 }
 
 .tertiary {
-	font-weight: var(--font-weight-regular) !important;
+	font-weight: var(--font-weight-bold) !important;
 
 	--button-background-color: var(--color-background-xlight);
 	--button-color: var(--color-text-dark);

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

@@ -0,0 +1,52 @@
+<template>
+	<Modal
+		width="460px"
+		:center="true"
+		:eventBus="modalBus"
+		:name="ASK_AI_MODAL_KEY"
+		:title="$locale.baseText('askAi.dialog.title')"
+	>
+		<template #content>
+			<n8n-text v-html="$locale.baseText('askAi.dialog.body')"></n8n-text>
+		</template>
+
+		<template #footer>
+			<n8n-link :to="ASK_AI_WAITLIST_URL">
+				<n8n-button
+					float="right"
+					:label="$locale.baseText('askAi.dialog.signup')"
+					@click="onAskAiWaitlistClick"
+				/>
+			</n8n-link>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Modal from './Modal.vue';
+import { ASK_AI_MODAL_KEY, ASK_AI_WAITLIST_URL } from '../constants';
+import { createEventBus } from '@/event-bus';
+
+export default Vue.extend({
+	name: 'AskAI',
+	components: {
+		Modal,
+	},
+	data() {
+		return {
+			ASK_AI_WAITLIST_URL,
+			ASK_AI_MODAL_KEY,
+			modalBus: createEventBus(),
+		};
+	},
+	methods: {
+		onAskAiWaitlistClick() {
+			this.$telemetry.track('User clicked join waitlist', { source: 'ask-ai-code' });
+			this.modalBus.emit('close');
+		},
+	},
+});
+</script>
+
+<style module lang="scss"></style>

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

@@ -1,5 +1,21 @@
 <template>
+	<div
+		:class="$style['code-node-editor-container']"
+		@mouseover="onMouseOver"
+		@mouseout="onMouseOut"
+		ref="codeNodeEditorContainer"
+	>
 		<div ref="codeNodeEditor" class="ph-no-capture"></div>
+		<n8n-button
+			v-if="isCloud && (isEditorHovered || isEditorFocused)"
+			size="small"
+			type="tertiary"
+			:class="$style['ask-ai-button']"
+			@mousedown="onAskAiButtonClick"
+		>
+			{{ $locale.baseText('codeNodeEditor.askAi') }}
+		</n8n-button>
+	</div>
 </template>
 
 <script lang="ts">
@@ -14,14 +30,17 @@ import { linterExtension } from './linter';
 import { completerExtension } from './completer';
 import { CODE_NODE_EDITOR_THEME } from './theme';
 import { workflowHelpers } from '@/mixins/workflowHelpers'; // for json field completions
+import { ASK_AI_MODAL_KEY, CODE_NODE_TYPE } from '@/constants';
 import { codeNodeEditorEventBus } from '@/event-bus';
-import { CODE_NODE_TYPE } from '@/constants';
 import { ALL_ITEMS_PLACEHOLDER, EACH_ITEM_PLACEHOLDER } from './constants';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/n8nRootStore';
+import Modal from '../Modal.vue';
+import { useSettingsStore } from '@/stores/settings';
 
 export default mixins(linterExtension, completerExtension, workflowHelpers).extend({
 	name: 'code-node-editor',
+	components: { Modal },
 	props: {
 		mode: {
 			type: String,
@@ -40,6 +59,8 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 		return {
 			editor: null as EditorView | null,
 			linterCompartment: new Compartment(),
+			isEditorHovered: false,
+			isEditorFocused: false,
 		};
 	},
 	watch: {
@@ -50,6 +71,9 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 	},
 	computed: {
 		...mapStores(useRootStore),
+		isCloud() {
+			return useSettingsStore().deploymentType === 'cloud';
+		},
 		content(): string {
 			if (!this.editor) return '';
 
@@ -69,6 +93,23 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 		},
 	},
 	methods: {
+		onMouseOver(event: MouseEvent) {
+			const fromElement = event.relatedTarget as HTMLElement;
+			const ref = this.$refs.codeNodeEditorContainer as HTMLDivElement;
+
+			if (!ref.contains(fromElement)) this.isEditorHovered = true;
+		},
+		onMouseOut(event: MouseEvent) {
+			const fromElement = event.relatedTarget as HTMLElement;
+			const ref = this.$refs.codeNodeEditorContainer as HTMLDivElement;
+
+			if (!ref.contains(fromElement)) this.isEditorHovered = false;
+		},
+		onAskAiButtonClick() {
+			this.$telemetry.track('User clicked ask ai button', { source: 'code' });
+
+			this.uiStore.openModal(ASK_AI_MODAL_KEY);
+		},
 		reloadLinter() {
 			if (!this.editor) return;
 
@@ -141,6 +182,14 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 		const stateBasedExtensions = [
 			this.linterCompartment.of(this.linterExtension()),
 			EditorState.readOnly.of(this.isReadOnly),
+			EditorView.domEventHandlers({
+				focus: () => {
+					this.isEditorFocused = true;
+				},
+				blur: () => {
+					this.isEditorFocused = false;
+				},
+			}),
 			EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
 				if (!viewUpdate.docChanged) return;
 
@@ -174,4 +223,14 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" module>
+.code-node-editor-container {
+	position: relative;
+}
+
+.ask-ai-button {
+	position: absolute;
+	top: var(--spacing-2xs);
+	right: var(--spacing-2xs);
+}
+</style>

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

@@ -15,6 +15,10 @@
 			<AboutModal />
 		</ModalRoot>
 
+		<ModalRoot :name="ASK_AI_MODAL_KEY">
+			<AskAiModal />
+		</ModalRoot>
+
 		<ModalRoot :name="CREDENTIAL_SELECT_MODAL_KEY">
 			<CredentialsSelectModal />
 		</ModalRoot>
@@ -138,10 +142,12 @@ import {
 	WORKFLOW_SHARE_MODAL_KEY,
 	IMPORT_CURL_MODAL_KEY,
 	LOG_STREAM_MODAL_KEY,
+	ASK_AI_MODAL_KEY,
 	USER_ACTIVATION_SURVEY_MODAL,
 } from '@/constants';
 
 import AboutModal from './AboutModal.vue';
+import AskAiModal from './AskAiModal.vue';
 import CommunityPackageManageConfirmModal from './CommunityPackageManageConfirmModal.vue';
 import CommunityPackageInstallModal from './CommunityPackageInstallModal.vue';
 import ChangePasswordModal from './ChangePasswordModal.vue';
@@ -169,6 +175,7 @@ export default Vue.extend({
 	name: 'Modals',
 	components: {
 		AboutModal,
+		AskAiModal,
 		ActivationModal,
 		CommunityPackageInstallModal,
 		CommunityPackageManageConfirmModal,
@@ -199,6 +206,7 @@ export default Vue.extend({
 		CREDENTIAL_EDIT_MODAL_KEY,
 		CREDENTIAL_SELECT_MODAL_KEY,
 		ABOUT_MODAL_KEY,
+		ASK_AI_MODAL_KEY,
 		CHANGE_PASSWORD_MODAL_KEY,
 		DELETE_USER_MODAL_KEY,
 		DUPLICATE_MODAL_KEY,

packages/editor-ui/src/constants.ts

@@ -26,6 +26,7 @@ export const MAX_TAG_NAME_LENGTH = 24;
 
 // modals
 export const ABOUT_MODAL_KEY = 'about';
+export const ASK_AI_MODAL_KEY = 'askAi';
 export const CHANGE_PASSWORD_MODAL_KEY = 'changePassword';
 export const CREDENTIAL_EDIT_MODAL_KEY = 'editCredential';
 export const CREDENTIAL_SELECT_MODAL_KEY = 'selectCredential';
@@ -193,6 +194,7 @@ export const FLOWS_CONTROL_SUBCATEGORY = 'Flow';
 export const HELPERS_SUBCATEGORY = 'Helpers';
 
 export const REQUEST_NODE_FORM_URL = 'https://n8n-community.typeform.com/to/K1fBVTZ3';
+export const ASK_AI_WAITLIST_URL = 'https://n8n-community.typeform.com/to/odKU4oDR';
 
 // General
 export const INSTANCE_ID_HEADER = 'n8n-instance-id';

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

@@ -49,6 +49,9 @@
 	"about.n8nVersion": "n8n Version",
 	"about.sourceCode": "Source Code",
 	"about.instanceID": "Instance ID",
+	"askAi.dialog.title": "'Ask AI' is almost ready",
+	"askAi.dialog.body": "We’re still applying the finishing touches. Soon, you will be able to <strong>automatically generate code from simple text prompts</strong>. Join the waitlist to get early access to this feature.",
+	"askAi.dialog.signup": "Join Waitlist",
 	"activationModal.butYouCanSeeThem": "but you can see them in the",
 	"activationModal.dontShowAgain": "Don't show again",
 	"activationModal.executionList": "execution list",
@@ -110,6 +113,7 @@
 	"binaryDataDisplay.noDataFoundToDisplay": "No data found to display",
 	"binaryDataDisplay.yourBrowserDoesNotSupport": "Your browser does not support the video element. Kindly update it to latest version.",
 	"codeEdit.edit": "Edit",
+	"codeNodeEditor.askAi": "✨ Ask AI",
 	"codeNodeEditor.completer.$()": "Output data of the {nodeName} node",
 	"codeNodeEditor.completer.$execution": "Information about the current execution",
 	"codeNodeEditor.completer.$execution.id": "The ID of the current execution",

packages/editor-ui/src/stores/ui.ts

@@ -5,6 +5,7 @@ import {
 } from '@/api/workflow-webhooks';
 import {
 	ABOUT_MODAL_KEY,
+	ASK_AI_MODAL_KEY,
 	CHANGE_PASSWORD_MODAL_KEY,
 	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
@@ -56,6 +57,9 @@ export const useUIStore = defineStore(STORES.UI, {
 			[ABOUT_MODAL_KEY]: {
 				open: false,
 			},
+			[ASK_AI_MODAL_KEY]: {
+				open: false,
+			},
 			[CHANGE_PASSWORD_MODAL_KEY]: {
 				open: false,
 			},