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/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue

@@ -1,5 +1,21 @@
 <template>
-	<div ref="codeNodeEditor" class="ph-no-capture"></div>
+	<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>