feat: Add Ask AI to HTTP Request Node (#8917)

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

@@ -0,0 +1,216 @@
+<template>
+	<Modal
+		width="700px"
+		:title="i18n.baseText('generateCurlModal.title')"
+		:event-bus="modalBus"
+		:name="GENERATE_CURL_MODAL_KEY"
+		:center="true"
+	>
+		<template #content>
+			<div :class="$style.container">
+				<N8nFormInputs
+					:inputs="formInputs"
+					:event-bus="formBus"
+					column-view
+					@update="onUpdate"
+					@submit="onSubmit"
+				/>
+			</div>
+		</template>
+		<template #footer>
+			<div :class="$style.modalFooter">
+				<N8nNotice
+					:class="$style.notice"
+					:content="i18n.baseText('generateCurlModal.notice.content')"
+				/>
+				<div>
+					<N8nButton
+						float="right"
+						:loading="loading"
+						:label="i18n.baseText('generateCurlModal.button.label')"
+						@click="onGenerate"
+					/>
+				</div>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts" setup>
+import Modal from '@/components/Modal.vue';
+import { GENERATE_CURL_MODAL_KEY } from '@/constants';
+import { ref } from 'vue';
+import { createEventBus } from 'n8n-design-system/utils';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useI18n } from '@/composables/useI18n';
+import { useAIStore } from '@/stores/ai.store';
+import type { IFormInput } from 'n8n-design-system';
+import { useToast } from '@/composables/useToast';
+import { useImportCurlCommand } from '@/composables/useImportCurlCommand';
+import { useUIStore } from '@/stores/ui.store';
+import { useNDVStore } from '@/stores/ndv.store';
+
+const telemetry = useTelemetry();
+const i18n = useI18n();
+const toast = useToast();
+
+const uiStore = useUIStore();
+const aiStore = useAIStore();
+const ndvStore = useNDVStore();
+
+const modalBus = createEventBus();
+const formBus = createEventBus();
+
+const initialServiceValue = uiStore.getModalData(GENERATE_CURL_MODAL_KEY)?.service as string;
+const initialRequestValue = uiStore.getModalData(GENERATE_CURL_MODAL_KEY)?.request as string;
+
+const formInputs: IFormInput[] = [
+	{
+		name: 'service',
+		initialValue: initialServiceValue,
+		properties: {
+			label: i18n.baseText('generateCurlModal.service.label'),
+			placeholder: i18n.baseText('generateCurlModal.service.placeholder'),
+			type: 'text',
+			required: true,
+			capitalize: true,
+		},
+	},
+	{
+		name: 'request',
+		initialValue: initialRequestValue,
+		properties: {
+			label: i18n.baseText('generateCurlModal.request.label'),
+			placeholder: i18n.baseText('generateCurlModal.request.placeholder'),
+			type: 'text',
+			required: true,
+			capitalize: true,
+		},
+	},
+];
+
+const formValues = ref<{ service: string; request: string }>({
+	service: initialServiceValue ?? '',
+	request: initialRequestValue ?? '',
+});
+
+const loading = ref(false);
+
+const { importCurlCommand } = useImportCurlCommand({
+	onImportSuccess,
+	onImportFailure,
+	onAfterImport,
+	i18n: {
+		invalidCurCommand: {
+			title: 'generateCurlModal.invalidCurlCommand.title',
+			message: 'generateCurlModal.invalidCurlCommand.message',
+		},
+	},
+});
+
+function closeDialog(): void {
+	modalBus.emit('close');
+}
+
+function onImportSuccess() {
+	sendImportCurlTelemetry();
+
+	toast.showMessage({
+		title: i18n.baseText('generateCurlModal.success.title'),
+		message: i18n.baseText('generateCurlModal.success.message'),
+		type: 'success',
+	});
+
+	closeDialog();
+}
+
+function onImportFailure(data: { invalidProtocol: boolean; protocol?: string }) {
+	sendImportCurlTelemetry({ valid: false, ...data });
+}
+
+function onAfterImport() {
+	uiStore.setModalData({
+		name: GENERATE_CURL_MODAL_KEY,
+		data: {
+			service: formValues.value.service,
+			request: formValues.value.request,
+		},
+	});
+}
+
+function sendImportCurlTelemetry(
+	data: { valid: boolean; invalidProtocol: boolean; protocol?: string } = {
+		valid: true,
+		invalidProtocol: false,
+		protocol: '',
+	},
+): void {
+	const service = formValues.value.service;
+	const request = formValues.value.request;
+
+	telemetry.track(
+		'User generated curl command using AI',
+		{
+			request,
+			request_service_name: service,
+			valid_curl_response: data.valid,
+			api_docs_returned: false,
+			invalidProtocol: data.invalidProtocol,
+			protocol: data.protocol,
+			node_type: ndvStore.activeNode?.type,
+			node_name: ndvStore.activeNode?.name,
+		},
+		{ withPostHog: true },
+	);
+}
+
+async function onUpdate(field: { name: string; value: string }) {
+	formValues.value = {
+		...formValues.value,
+		[field.name]: field.value,
+	};
+}
+
+async function onGenerate() {
+	formBus.emit('submit');
+}
+
+async function onSubmit() {
+	const service = formValues.value.service;
+	const request = formValues.value.request;
+
+	try {
+		loading.value = true;
+
+		const data = await aiStore.generateCurl({
+			service,
+			request,
+		});
+
+		await importCurlCommand(data.curl);
+	} catch (error) {
+		toast.showError(error, i18n.baseText('error'));
+	} finally {
+		loading.value = false;
+	}
+}
+</script>
+
+<style module lang="scss">
+.modalFooter {
+	justify-content: space-between;
+	display: flex;
+	flex-direction: row;
+}
+
+.notice {
+	margin: 0;
+}
+
+.container > * {
+	margin-bottom: var(--spacing-s);
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+</style>