mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alex Grozav
2024-05-02 13:52:15 +03:00
committed by GitHub
parent 7ff24f134b
commit cd9bc44bdd
40 changed files with 3945 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
packages/editor-ui/src/components/GenerateCurlModal.vue Normal file
View File

@@ -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>

223
packages/editor-ui/src/components/ImportCurlModal.vue
View File

@@ -1,37 +1,37 @@
<template>
<Modal
width="700px"
:title="$locale.baseText('importCurlModal.title')"
:title="i18n.baseText('importCurlModal.title')"
:event-bus="modalBus"
:name="IMPORT_CURL_MODAL_KEY"
:center="true"
>
<template #content>
<div :class="$style.container">
<n8n-input-label :label="$locale.baseText('importCurlModal.input.label')" color="text-dark">
<n8n-input
ref="input"
<N8nInputLabel :label="i18n.baseText('importCurlModal.input.label')" color="text-dark">
<N8nInput
ref="inputRef"
:model-value="curlCommand"
type="textarea"
:rows="5"
:placeholder="$locale.baseText('importCurlModal.input.placeholder')"
:placeholder="i18n.baseText('importCurlModal.input.placeholder')"
@update:model-value="onInput"
@focus="$event.target.select()"
/>
</n8n-input-label>
</N8nInputLabel>
</div>
</template>
<template #footer>
<div :class="$style.modalFooter">
<n8n-notice
<N8nNotice
:class="$style.notice"
:content="$locale.baseText('ImportCurlModal.notice.content')"
:content="i18n.baseText('ImportCurlModal.notice.content')"
/>
<div>
<n8n-button
<N8nButton
float="right"
:label="$locale.baseText('importCurlModal.button.label')"
@click="importCurlCommand"
:label="i18n.baseText('importCurlModal.button.label')"
@click="onImport"
/>
</div>
</div>
@@ -39,150 +39,81 @@
</Modal>
</template>
<script lang="ts">
<script lang="ts" setup>
import Modal from '@/components/Modal.vue';
import {
IMPORT_CURL_MODAL_KEY,
CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS,
CURL_IMPORT_NODES_PROTOCOLS,
} from '@/constants';
import { useToast } from '@/composables/useToast';
import { defineComponent } from 'vue';
import type { INodeUi } from '@/Interface';
import { mapStores } from 'pinia';
import { IMPORT_CURL_MODAL_KEY } from '@/constants';
import { onMounted, ref } from 'vue';
import { useUIStore } from '@/stores/ui.store';
import { useNDVStore } from '@/stores/ndv.store';
import { createEventBus } from 'n8n-design-system/utils';
import { useTelemetry } from '@/composables/useTelemetry';
import { useI18n } from '@/composables/useI18n';
import { useImportCurlCommand } from '@/composables/useImportCurlCommand';
export default defineComponent({
name: 'ImportCurlModal',
components: {
Modal,
},
setup() {
return {
...useToast(),
};
},
data() {
return {
IMPORT_CURL_MODAL_KEY,
curlCommand: '',
modalBus: createEventBus(),
};
},
computed: {
...mapStores(useNDVStore, useUIStore),
node(): INodeUi | null {
return this.ndvStore.activeNode;
},
},
mounted() {
this.curlCommand = this.uiStore.getCurlCommand || '';
setTimeout(() => {
(this.$refs.input as HTMLTextAreaElement).focus();
});
},
methods: {
closeDialog(): void {
this.modalBus.emit('close');
},
onInput(value: string): void {
this.curlCommand = value;
},
async importCurlCommand(): Promise<void> {
const curlCommand = this.curlCommand;
if (curlCommand === '') return;
const telemetry = useTelemetry();
const i18n = useI18n();
try {
const parameters = await this.uiStore.getCurlToJson(curlCommand);
const url = parameters['parameters.url'];
const uiStore = useUIStore();
const invalidProtocol = CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS.find((p) =>
url.includes(`${p}://`),
);
const curlCommand = ref('');
const modalBus = createEventBus();
if (!invalidProtocol) {
this.uiStore.setHttpNodeParameters({
name: IMPORT_CURL_MODAL_KEY,
parameters: JSON.stringify(parameters),
});
const inputRef = ref<HTMLTextAreaElement | null>(null);
this.closeDialog();
this.sendTelemetry();
return;
// if we have a node that supports the invalid protocol
// suggest that one
} else if (CURL_IMPORT_NODES_PROTOCOLS[invalidProtocol]) {
const useNode = CURL_IMPORT_NODES_PROTOCOLS[invalidProtocol];
this.showProtocolErrorWithSupportedNode(invalidProtocol, useNode);
// we do not have a node that supports the use protocol
} else {
this.showProtocolError(invalidProtocol);
}
this.sendTelemetry({ success: false, invalidProtocol: true, protocol: invalidProtocol });
} catch (e) {
this.showInvalidcURLCommandError();
this.sendTelemetry({ success: false, invalidProtocol: false });
} finally {
this.uiStore.setCurlCommand({ name: IMPORT_CURL_MODAL_KEY, command: this.curlCommand });
}
},
showProtocolErrorWithSupportedNode(protocol: string, node: string): void {
this.showToast({
title: this.$locale.baseText('importParameter.showError.invalidProtocol1.title', {
interpolate: {
node,
},
}),
message: this.$locale.baseText('importParameter.showError.invalidProtocol.message', {
interpolate: {
protocol: protocol.toUpperCase(),
},
}),
type: 'error',
duration: 0,
});
},
showProtocolError(protocol: string): void {
this.showToast({
title: this.$locale.baseText('importParameter.showError.invalidProtocol2.title'),
message: this.$locale.baseText('importParameter.showError.invalidProtocol.message', {
interpolate: {
protocol,
},
}),
type: 'error',
duration: 0,
});
},
showInvalidcURLCommandError(): void {
this.showToast({
title: this.$locale.baseText('importParameter.showError.invalidCurlCommand.title'),
message: this.$locale.baseText('importParameter.showError.invalidCurlCommand.message'),
type: 'error',
duration: 0,
});
},
sendTelemetry(
data: { success: boolean; invalidProtocol: boolean; protocol?: string } = {
success: true,
invalidProtocol: false,
protocol: '',
},
): void {
this.$telemetry.track('User imported curl command', {
success: data.success,
invalidProtocol: data.invalidProtocol,
protocol: data.protocol,
});
},
},
const { importCurlCommand } = useImportCurlCommand({
onImportSuccess,
onImportFailure,
onAfterImport,
});
onMounted(() => {
curlCommand.value = (uiStore.getModalData(IMPORT_CURL_MODAL_KEY)?.curlCommand as string) ?? '';
setTimeout(() => {
inputRef.value?.focus();
});
});
function onInput(value: string): void {
curlCommand.value = value;
}
function closeDialog(): void {
modalBus.emit('close');
}
function onImportSuccess() {
sendTelemetry();
closeDialog();
}
function onImportFailure(data: { invalidProtocol: boolean; protocol?: string }) {
sendTelemetry({ success: false, ...data });
}
function onAfterImport() {
uiStore.setModalData({
name: IMPORT_CURL_MODAL_KEY,
data: { curlCommand: curlCommand.value },
});
}
function sendTelemetry(
data: { success: boolean; invalidProtocol: boolean; protocol?: string } = {
success: true,
invalidProtocol: false,
protocol: '',
},
): void {
telemetry.track('User imported curl command', {
success: data.success,
invalidProtocol: data.invalidProtocol,
protocol: data.protocol,
});
}
async function onImport() {
await importCurlCommand(curlCommand);
}
</script>
<style module lang="scss">

53
packages/editor-ui/src/components/ImportCurlParameter.vue Normal file
View File

@@ -0,0 +1,53 @@
<script lang="ts" setup>
import { GENERATE_CURL_MODAL_KEY, IMPORT_CURL_MODAL_KEY } from '@/constants';
import { useUIStore } from '@/stores/ui.store';
import { useAIStore } from '@/stores/ai.store';
defineProps({
isReadOnly: {
type: Boolean,
default: false,
},
});
const uiStore = useUIStore();
const aiStore = useAIStore();
function onImportCurlClicked() {
uiStore.openModal(IMPORT_CURL_MODAL_KEY);
}
function onGenerateCurlClicked() {
uiStore.openModal(GENERATE_CURL_MODAL_KEY);
}
</script>
<template>
<div :class="$style.importSection">
<n8n-button
type="secondary"
:label="$locale.baseText('importCurlParameter.label')"
:disabled="isReadOnly"
size="mini"
@click="onImportCurlClicked"
/>
<n8n-button
v-if="aiStore.isGenerateCurlEnabled"
class="mr-2xs"
type="secondary"
:label="$locale.baseText('generateCurlParameter.label')"
:disabled="isReadOnly"
size="mini"
@click="onGenerateCurlClicked"
/>
</div>
</template>
<style module lang="scss">
.importSection {
display: flex;
flex-direction: row-reverse;
margin-top: var(--spacing-xs);
}
</style>

44
packages/editor-ui/src/components/ImportParameter.vue
View File

@@ -1,44 +0,0 @@
<template>
<div :class="$style.importSection">
<n8n-button
type="secondary"
:label="$locale.baseText('importParameter.label')"
:disabled="isReadOnly"
size="mini"
@click="onImportCurlClicked"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { IMPORT_CURL_MODAL_KEY } from '@/constants';
import { useUIStore } from '@/stores/ui.store';
import { mapStores } from 'pinia';
export default defineComponent({
name: 'ImportParameter',
props: {
isReadOnly: {
type: Boolean,
default: false,
},
},
computed: {
...mapStores(useUIStore),
},
methods: {
onImportCurlClicked() {
this.uiStore.openModal(IMPORT_CURL_MODAL_KEY);
},
},
});
</script>
<style module lang="scss">
.importSection {
display: flex;
flex-direction: row-reverse;
margin-top: 10px;
}
</style>

28
packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
View File

@@ -101,11 +101,31 @@ export default defineComponent({
return extensions;
},
},
watch: {
modelValue(newValue: string) {
const editorValue = this.editor?.state?.doc.toString();
// If model value changes from outside the component
if (editorValue && editorValue.length !== newValue.length && editorValue !== newValue) {
this.destroyEditor();
this.createEditor();
}
},
},
mounted() {
const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
const parent = this.$refs.jsonEditor as HTMLDivElement;
this.editor = new EditorView({ parent, state });
this.editorState = this.editor.state;
this.createEditor();
},
methods: {
createEditor() {
const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
const parent = this.$refs.jsonEditor as HTMLDivElement;
this.editor = new EditorView({ parent, state });
this.editorState = this.editor.state;
},
destroyEditor() {
this.editor?.destroy();
},
},
});
</script>

8
packages/editor-ui/src/components/Modals.vue
View File

@@ -95,6 +95,10 @@
<ImportCurlModal />
</ModalRoot>
<ModalRoot :name="GENERATE_CURL_MODAL_KEY">
<GenerateCurlModal />
</ModalRoot>
<ModalRoot :name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY">
<template #default="{ modalName, activeId, mode }">
<CommunityPackageManageConfirmModal
@@ -208,6 +212,7 @@ import {
WORKFLOW_HISTORY_VERSION_RESTORE,
SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY,
SETUP_CREDENTIALS_MODAL_KEY,
GENERATE_CURL_MODAL_KEY,
} from '@/constants';
import AboutModal from './AboutModal.vue';
@@ -231,6 +236,7 @@ import WorkflowSettings from './WorkflowSettings.vue';
import DeleteUserModal from './DeleteUserModal.vue';
import ActivationModal from './ActivationModal.vue';
import ImportCurlModal from './ImportCurlModal.vue';
import GenerateCurlModal from './GenerateCurlModal.vue';
import MfaSetupModal from './MfaSetupModal.vue';
import WorkflowShareModal from './WorkflowShareModal.ee.vue';
import EventDestinationSettingsModal from '@/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue';
@@ -267,6 +273,7 @@ export default defineComponent({
WorkflowSettings,
WorkflowShareModal,
ImportCurlModal,
GenerateCurlModal,
EventDestinationSettingsModal,
SourceControlPushModal,
SourceControlPullModal,
@@ -299,6 +306,7 @@ export default defineComponent({
VALUE_SURVEY_MODAL_KEY,
WORKFLOW_ACTIVE_MODAL_KEY,
IMPORT_CURL_MODAL_KEY,
GENERATE_CURL_MODAL_KEY,
LOG_STREAM_MODAL_KEY,
SOURCE_CONTROL_PUSH_MODAL_KEY,
SOURCE_CONTROL_PULL_MODAL_KEY,

38
packages/editor-ui/src/components/NodeSettings.vue
View File

@@ -207,7 +207,6 @@ import {
COMMUNITY_NODES_INSTALLATION_DOCS_URL,
CUSTOM_NODES_DOCS_URL,
MAIN_NODE_PANEL_WIDTH,
IMPORT_CURL_MODAL_KEY,
SHOULD_CLEAR_NODE_OUTPUTS,
} from '@/constants';
@@ -232,6 +231,7 @@ import { useCredentialsStore } from '@/stores/credentials.store';
import type { EventBus } from 'n8n-design-system';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { importCurlEventBus } from '@/event-bus';
import { useToast } from '@/composables/useToast';
export default defineComponent({
@@ -266,9 +266,6 @@ export default defineComponent({
useWorkflowsStore,
useWorkflowsEEStore,
),
isCurlImportModalOpen(): boolean {
return this.uiStore.isModalOpen(IMPORT_CURL_MODAL_KEY);
},
isReadOnly(): boolean {
return this.readOnly || this.hasForeignCredential;
},
@@ -454,28 +451,6 @@ export default defineComponent({
node(newNode, oldNode) {
this.setNodeValues();
},
isCurlImportModalOpen(newValue, oldValue) {
if (newValue === false) {
let parameters = this.uiStore.getHttpNodeParameters || '';
if (!parameters) return;
try {
parameters = JSON.parse(parameters) as {
[key: string]: unknown;
};
//@ts-ignore
this.valueChanged({
node: this.node.name,
name: 'parameters',
value: parameters,
});
this.uiStore.setHttpNodeParameters({ name: IMPORT_CURL_MODAL_KEY, parameters: '' });
} catch {}
}
},
},
mounted() {
this.populateHiddenIssuesSet();
@@ -484,11 +459,22 @@ export default defineComponent({
this.eventBus?.on('openSettings', this.openSettings);
this.nodeHelpers.updateNodeParameterIssues(this.node as INodeUi, this.nodeType);
importCurlEventBus.on('setHttpNodeParameters', this.setHttpNodeParameters);
},
beforeUnmount() {
this.eventBus?.off('openSettings', this.openSettings);
importCurlEventBus.off('setHttpNodeParameters', this.setHttpNodeParameters);
},
methods: {
setHttpNodeParameters(parameters: Record<string, unknown>) {
try {
this.valueChanged({
node: this.node.name,
name: 'parameters',
value: parameters,
});
} catch {}
},
onSwitchSelectedNode(node: string) {
this.$emit('switchSelectedNode', node);
},

6
packages/editor-ui/src/components/ParameterInputList.vue
View File

@@ -22,7 +22,7 @@
/>
</div>
<ImportParameter
<ImportCurlParameter
v-else-if="parameter.type === 'curlImport'"
:is-read-only="isReadOnly"
@value-changed="valueChanged"
@@ -175,7 +175,7 @@ import { defineAsyncComponent, defineComponent, onErrorCaptured, ref } from 'vue
import type { INodeUi, IUpdateInformation } from '@/Interface';
import ImportParameter from '@/components/ImportParameter.vue';
import ImportCurlParameter from '@/components/ImportCurlParameter.vue';
import MultipleParameter from '@/components/MultipleParameter.vue';
import ParameterInputFull from '@/components/ParameterInputFull.vue';
import ResourceMapper from '@/components/ResourceMapper/ResourceMapper.vue';
@@ -208,7 +208,7 @@ export default defineComponent({
ParameterInputFull,
FixedCollectionParameter,
CollectionParameter,
ImportParameter,
ImportCurlParameter,
ResourceMapper,
FilterConditions,
AssignmentCollection,