n8n-editor-ui
Version:
Workflow Editor UI for n8n
1,286 lines • 63.1 kB
JavaScript
import { o as __toESM } from "./chunk-6z4oVpB-.js";
import { A as createStaticVNode, C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, Ht as toRefs, It as ref, J as onBeforeUnmount, M as createVNode, P as defineComponent, Pt as reactive, Q as onUnmounted, St as withMemo, T as createBlock, W as mergeProps, Z as onMounted, _ as Fragment, _t as watch, at as renderSlot, bn as normalizeStyle, bt as withCtx, et as openBlock, h as withModifiers, j as createTextVNode, k as createSlots, n as Transition, st as resolveDirective, vn as normalizeClass, w as createBaseVNode, xt as withDirectives, yn as normalizeProps } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
import { _t as useI18n, g as onClickOutside, mt as i18n } from "./_MapCache-ficiegRb.js";
import { R as N8nInfoTip_default, Sn as N8nButton_default, bn as N8nCallout_default, ht as N8nTooltip_default, k as N8nNotice_default, mt as N8nLink_default, wn as N8nIcon_default, xn as N8nText_default, xt as N8nIconButton_default } from "./src-DgvumQTi.js";
import "./en-CF30SCh2.js";
import "./preload-helper-CR0ecmWK.js";
import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
import "./truncate-B1HVeveJ.js";
import { $t as transformNodeType, Dr as useUsersStore, It as filterAndSearchNodes, Jt as removePreviewToken, Kt as isNodePreviewKey, Nt as useNodeTypesStore, O as useTelemetry, Pt as useActionsGenerator, Rt as flattenCreateElements, Ut as getRootSearchCallouts, Vt as getHumanInTheLoopActions, Xt as shouldShowCommunityNodeDetails, b as useExternalHooks, gn as useCredentialsStore, oa as useUIStore, qt as prepareCommunityNodeDetailsViewStack, zt as getActiveViewCallouts } from "./builder.store-sBTWwxRU.js";
import "./empty-BuGRxzl4.js";
import "./sanitize-html-Cc45ZKm8.js";
import "./CalendarDate-zWqgZMlk.js";
import "./path-browserify-BtCDmZ3_.js";
import { At as TRIGGER_NODE_CREATOR_VIEW, Bn as OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE, Dt as REQUEST_NODE_FORM_URL, Et as REGULAR_NODE_CREATOR_VIEW, F as CUSTOM_API_CALL_KEY, L as DRAG_EVENT_DATA_KEY, Ta as isCommunityPackageName, Vn as OPEN_AI_NODE_TYPE, bt as HITL_SUBCATEGORY, dt as AI_OTHERS_NODE_CREATOR_VIEW, hr as WEBHOOK_NODE_TYPE, lt as AI_EVALUATION, mn as HTTP_REQUEST_NODE_TYPE, pt as AI_UNCATEGORIZED_CATEGORY, ut as AI_NODE_CREATOR_VIEW, wt as PRE_BUILT_AGENTS_COLLECTION } from "./constants-BbpucWL4.js";
import "./merge-k8vSyyXH.js";
import "./_baseOrderBy-B_6CV8x6.js";
import "./dateformat-CM9k0--B.js";
import { t as useDebounce } from "./useDebounce-Bnb8W2LR.js";
import "./assistant.store-bS9AHOoo.js";
import { t as useChatPanelStore } from "./chatPanel.store-4qGv1TCZ.js";
import { i as SlideTransition_default, n as CategorizedItemsRenderer_default, r as verified_default, t as ItemsRenderer_default } from "./ItemsRenderer-DHxSclsD.js";
import "./executions.store-CXjGPxs0.js";
import "./usePinnedData-CL2qWhwp.js";
import { _ as useCalloutHelpers, d as useViewStacks, f as useKeyboardNavigation, g as TriggerView, h as RegularView, m as AIView, p as AINodesView, t as useNodeCreatorStore, v as require_camelCase } from "./nodeCreator.store-FJrC_Pu6.js";
import { t as getNodeIconSource } from "./nodeIcon-DI2Acud1.js";
import "./useCanvasOperations-CAHezq7d.js";
import "./folders.store-BjAwtSH4.js";
import { t as NodeIcon_default } from "./NodeIcon-BVhrZNYI.js";
import { t as useBannersStore } from "./banners.store-C9sgKjcT.js";
import { n as captureException } from "./exports-hpMZaOPT.js";
import "./semver-CVsBQkSJ.js";
import { a as useInstallNode, i as useInstalledCommunityPackage, n as CommunityNodeFooter_default, r as ContactAdministratorToInstall_default, t as CommunityNodeUpdateInfo_default } from "./CommunityNodeUpdateInfo-Cd_-b5Xu.js";
import { t as useActions } from "./useActions-O8-gYbRP.js";
var _hoisted_1$5 = ["placeholder", "value"];
var SearchBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "SearchBar",
props: {
placeholder: { default: "" },
modelValue: { default: "" }
},
emits: ["update:modelValue"],
setup(__props, { expose: __expose, emit: __emit }) {
const emit = __emit;
const state = reactive({ inputRef: null });
const externalHooks = useExternalHooks();
function focus() {
state.inputRef?.focus();
}
function onInput(event) {
const input = event.target;
emit("update:modelValue", input.value.trim());
}
function clear$1() {
emit("update:modelValue", "");
}
onMounted(() => {
externalHooks.run("nodeCreatorSearchBar.mount", { inputRef: state.inputRef });
setTimeout(focus, 0);
});
onBeforeUnmount(() => {
state.inputRef?.remove();
});
const { inputRef } = toRefs(state);
__expose({ focus });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.$style.searchContainer),
"data-test-id": "search-bar"
}, [
createBaseVNode("div", { class: normalizeClass({
[_ctx.$style.prefix]: true,
[_ctx.$style.active]: _ctx.modelValue.length > 0
}) }, [createVNode(unref(N8nIcon_default), {
icon: "search",
size: "small"
})], 2),
createBaseVNode("div", { class: normalizeClass(_ctx.$style.text) }, [createBaseVNode("input", {
ref_key: "inputRef",
ref: inputRef,
placeholder: _ctx.placeholder,
value: _ctx.modelValue,
class: normalizeClass(_ctx.$style.input),
autofocus: "",
"data-test-id": "node-creator-search-bar",
tabindex: "0",
onInput
}, null, 42, _hoisted_1$5)], 2),
_ctx.modelValue.length > 0 ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass([_ctx.$style.suffix, _ctx.$style.clickable]),
onClick: clear$1
}, [createVNode(unref(N8nIcon_default), {
size: "small",
icon: "circle-x"
})], 2)) : createCommentVNode("", true)
], 2);
};
}
});
var SearchBar_vue_vue_type_style_index_0_lang_module_default = {
searchContainer: "_searchContainer_1mhzr_123",
prefix: "_prefix_1mhzr_139",
active: "_active_1mhzr_144",
text: "_text_1mhzr_148",
suffix: "_suffix_1mhzr_164",
clear: "_clear_1mhzr_170",
clickable: "_clickable_1mhzr_183"
};
var SearchBar_default = /* @__PURE__ */ __plugin_vue_export_helper_default(SearchBar_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": SearchBar_vue_vue_type_style_index_0_lang_module_default }]]);
var OrderSwitcher_default = /* @__PURE__ */ defineComponent({
__name: "OrderSwitcher",
props: { rootView: {} },
setup(__props) {
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", null, [_ctx.rootView === unref("Regular") ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [renderSlot(_ctx.$slots, "actions"), renderSlot(_ctx.$slots, "triggers")], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [renderSlot(_ctx.$slots, "triggers"), renderSlot(_ctx.$slots, "actions")], 64))]);
};
}
});
var _hoisted_1$4 = {
viewBox: "0 0 512 512",
width: "1.2em",
height: "1.2em"
};
function render(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [createBaseVNode("path", {
fill: "currentColor",
d: "m466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3c11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3M256.1 446.3l-.1-381l175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7"
}, null, -1)]));
}
var shield_alt_default = {
name: "fa-solid-shield-alt",
render
};
var _hoisted_1$3 = { key: 2 };
var _hoisted_2$2 = { key: 3 };
var CommunityNodeInfo_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "CommunityNodeInfo",
setup(__props) {
const { activeViewStack } = useViewStacks();
const { communityNodeDetails } = activeViewStack;
const publisherName = ref(void 0);
const downloads = ref(null);
const verified = ref(false);
const official = ref(false);
const { installedPackage, initInstalledPackage, isUpdateCheckAvailable } = useInstalledCommunityPackage(computed(() => communityNodeDetails?.packageName));
const nodeTypesStore = useNodeTypesStore();
const isOwner = computed(() => useUsersStore().isInstanceOwner);
const formatNumber = (number) => {
if (!number) return null;
return new Intl.NumberFormat("en-US").format(number);
};
async function fetchPackageInfo(packageName) {
const communityNodeAttributes = await nodeTypesStore.getCommunityNodeAttributes(activeViewStack.communityNodeDetails?.key || "");
let packageInfo = installedPackage.value;
if (communityNodeDetails?.installed && !packageInfo) packageInfo = await initInstalledPackage();
if (communityNodeAttributes) {
publisherName.value = communityNodeAttributes.companyName ?? communityNodeAttributes.authorName;
downloads.value = formatNumber(communityNodeAttributes.numberOfDownloads);
official.value = communityNodeAttributes.isOfficialNode;
if (!packageInfo) verified.value = true;
else verified.value = (communityNodeAttributes.nodeVersions?.map((v) => v.npmVersion) ?? []).includes(packageInfo.installedVersion);
return;
}
const url = `https://registry.npmjs.org/${packageName}`;
try {
const response = await fetch(url);
if (!response.ok) {
captureException(/* @__PURE__ */ new Error("Could not get metadata for package"), { extra: { packageName } });
return;
}
publisherName.value = (await response.json()).maintainers?.[0]?.name;
const downloadsUrl = `https://api.npmjs.org/downloads/range/2022-01-01:${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}/${packageName}`;
const downloadsResponse = await fetch(downloadsUrl);
if (!downloadsResponse.ok) {
captureException(/* @__PURE__ */ new Error("Could not get downloads for package"), { extra: { packageName } });
return;
}
const downloadsData = await downloadsResponse.json();
if (!downloadsData.downloads?.length) return;
downloads.value = formatNumber(downloadsData.downloads.reduce((sum, day) => sum + day.downloads, 0));
} catch (error) {
captureException(error, { extra: { packageName } });
}
}
onMounted(async () => {
if (communityNodeDetails?.packageName) await fetchPackageInfo(communityNodeDetails.packageName);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.container) }, [
createVNode(unref(N8nText_default), {
class: normalizeClass(_ctx.$style.description),
color: "text-base",
size: "medium"
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(communityNodeDetails)?.description), 1)]),
_: 1
}, 8, ["class"]),
unref(isUpdateCheckAvailable) && unref(installedPackage)?.updateAvailable ? (openBlock(), createBlock(CommunityNodeUpdateInfo_default, {
key: 0,
"data-test-id": "update-available",
"package-name": unref(communityNodeDetails)?.packageName,
source: "node creator panel"
}, null, 8, ["package-name"])) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(_ctx.$style.separator)
}, null, 2)),
createBaseVNode("div", { class: normalizeClass(_ctx.$style.info) }, [
verified.value ? (openBlock(), createBlock(unref(N8nTooltip_default), {
key: 0,
placement: "top"
}, {
content: withCtx(() => [createTextVNode(toDisplayString(official.value ? unref(i18n).baseText("communityNodeInfo.officialApproved") : unref(i18n).baseText("communityNodeInfo.approved")), 1)]),
default: withCtx(() => [createBaseVNode("div", null, [createVNode(unref(shield_alt_default), { class: normalizeClass(_ctx.$style.tooltipIcon) }, null, 8, ["class"]), createVNode(unref(N8nText_default), {
color: "text-light",
size: "xsmall",
bold: "",
"data-test-id": "verified-tag"
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.approved.label")), 1)]),
_: 1
})])]),
_: 1
})) : (openBlock(), createBlock(unref(N8nTooltip_default), {
key: 1,
placement: "top"
}, {
content: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.unverified")), 1)]),
default: withCtx(() => [createBaseVNode("div", null, [createVNode(unref(N8nIcon_default), {
class: normalizeClass(_ctx.$style.tooltipIcon),
icon: "box"
}, null, 8, ["class"]), createVNode(unref(N8nText_default), {
color: "text-light",
size: "xsmall",
bold: ""
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.unverified.label")), 1)]),
_: 1
})])]),
_: 1
})),
downloads.value ? (openBlock(), createElementBlock("div", _hoisted_1$3, [createVNode(unref(N8nIcon_default), {
class: normalizeClass(_ctx.$style.tooltipIcon),
icon: "hard-drive-download"
}, null, 8, ["class"]), createVNode(unref(N8nText_default), {
color: "text-light",
size: "xsmall",
bold: "",
"data-test-id": "number-of-downloads"
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.downloads", { interpolate: { downloads: downloads.value } })), 1)]),
_: 1
})])) : createCommentVNode("", true),
publisherName.value ? (openBlock(), createElementBlock("div", _hoisted_2$2, [createVNode(unref(N8nIcon_default), {
class: normalizeClass(_ctx.$style.tooltipIcon),
icon: "user"
}, null, 8, ["class"]), createVNode(unref(N8nText_default), {
color: "text-light",
size: "xsmall",
bold: "",
"data-test-id": "publisher-name"
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.publishedBy", { interpolate: { publisherName: publisherName.value } })), 1)]),
_: 1
})])) : createCommentVNode("", true)
], 2),
!isOwner.value && !unref(communityNodeDetails)?.installed ? (openBlock(), createBlock(ContactAdministratorToInstall_default, { key: 2 })) : createCommentVNode("", true)
], 2);
};
}
});
var CommunityNodeInfo_vue_vue_type_style_index_0_lang_module_default = {
container: "_container_169ak_123",
nodeIcon: "_nodeIcon_169ak_132",
description: "_description_169ak_137",
separator: "_separator_169ak_141",
info: "_info_169ak_147",
tooltipIcon: "_tooltipIcon_169ak_162",
contactOwnerHint: "_contactOwnerHint_169ak_168"
};
var CommunityNodeInfo_default = /* @__PURE__ */ __plugin_vue_export_helper_default(CommunityNodeInfo_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": CommunityNodeInfo_vue_vue_type_style_index_0_lang_module_default }]]);
var ActionsMode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "ActionsMode",
emits: ["nodeTypeSelected"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const telemetry = useTelemetry();
const i18n$1 = useI18n();
const { userActivated, isInstanceOwner } = useUsersStore();
const { popViewStack, updateCurrentViewStack } = useViewStacks();
const { registerKeyHook } = useKeyboardNavigation();
const { setAddedNodeActionParameters, getActionData, actionDataToNodeTypeSelectedPayload, getPlaceholderTriggerActions, parseCategoryActions, actionsCategoryLocales } = useActions();
const nodeCreatorStore = useNodeCreatorStore();
const calloutHelpers = useCalloutHelpers();
const parsedTriggerActions = computed(() => parseActions(actions.value, actionsCategoryLocales.value.triggers, false));
const parsedActionActions = computed(() => parseActions(actions.value, actionsCategoryLocales.value.actions, !search.value));
const parsedTriggerActionsBaseline = computed(() => parseActions(useViewStacks().activeViewStack.baselineItems || [], actionsCategoryLocales.value.triggers, false));
const parsedActionActionsBaseline = computed(() => parseActions(useViewStacks().activeViewStack.baselineItems || [], actionsCategoryLocales.value.actions, !search.value));
const triggerCategoryName = computed(() => parsedTriggerActions.value.length || search.value ? actionsCategoryLocales.value.triggers : `${actionsCategoryLocales.value.triggers} (${placeholderTriggerActions.length})`);
const actions = computed(() => {
return (useViewStacks().activeViewStack.items || []).filter((p) => p.properties.actionKey !== CUSTOM_API_CALL_KEY);
});
const search = computed(() => useViewStacks().activeViewStack.search);
const subcategory = computed(() => useViewStacks().activeViewStack.subcategory);
const rootView = computed(() => useViewStacks().activeViewStack.rootView);
const communityNodeDetails = computed(() => useViewStacks().activeViewStack?.communityNodeDetails);
const placeholderTriggerActions = getPlaceholderTriggerActions(subcategory.value || "");
const hasNoTriggerActions = computed(() => parseCategoryActions(useViewStacks().activeViewStack.baselineItems || [], actionsCategoryLocales.value.triggers, !search.value).length === 0);
const containsAPIAction = computed(() => {
return (useViewStacks().activeViewStack.baselineItems || []).some((p) => {
return (p.properties.actionKey ?? "") === CUSTOM_API_CALL_KEY;
});
});
const isTriggerRootView = computed(() => rootView.value === TRIGGER_NODE_CREATOR_VIEW);
const shouldShowTriggers = computed(() => {
if (communityNodeDetails.value && !parsedTriggerActions.value.length) return !isNodePreviewKey(useViewStacks().activeViewStack?.items?.[0].key) && isTriggerRootView.value;
return isTriggerRootView.value || parsedTriggerActionsBaseline.value.length !== 0;
});
registerKeyHook("ActionsKeyRight", {
keyboardKeys: ["ArrowRight", "Enter"],
condition: (type) => type === "action",
handler: onKeySelect
});
registerKeyHook("ActionsKeyLeft", {
keyboardKeys: ["ArrowLeft"],
condition: (type) => type === "action",
handler: arrowLeft
});
function parseActions(base, locale, withLabels = false) {
return parseCategoryActions(base, locale, withLabels);
}
function arrowLeft() {
popViewStack();
}
function onKeySelect(activeItemId) {
const activeAction = [...actions.value, ...placeholderTriggerActions].find((a) => a.uuid === activeItemId);
if (activeAction) onSelected(activeAction);
}
function onSelected(actionCreateElement) {
if (actionCreateElement.type === "openTemplate") calloutHelpers.openSampleWorkflowTemplate(actionCreateElement.properties.templateId, { telemetry: {
source: "nodeCreator",
section: useViewStacks().activeViewStack.title
} });
if (actionCreateElement.type !== "action") return;
const actionData = getActionData(actionCreateElement.properties);
if (placeholderTriggerActions.some((p) => p.key === actionCreateElement.key) && isTriggerRootView.value) {
const actionNode = actions.value[0]?.key;
if (actionNode) emit("nodeTypeSelected", [{ type: actionData.key }, { type: actionNode }]);
} else if (actionData?.key === "@n8n/n8n-nodes-langchain.openAi" && (actionData?.value)?.resource === "assistant" && (actionData?.value)?.operation === "message") emit("nodeTypeSelected", [{ type: OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE }]);
else if (isNodePreviewKey(actionData?.key)) return;
else emit("nodeTypeSelected", [actionDataToNodeTypeSelectedPayload(actionData)]);
if (telemetry) setAddedNodeActionParameters(actionData, telemetry, rootView.value);
}
function trackActionsView() {
const activeViewStack = useViewStacks().activeViewStack;
const trigger_action_count = (activeViewStack.baselineItems || [])?.filter((action$1) => action$1.key.toLowerCase().includes("trigger")).length;
const trackingPayload = {
app_identifier: [...actions.value, ...placeholderTriggerActions][0].key,
actions: (activeViewStack.baselineItems || [])?.map((action$1) => action$1.properties.displayName),
regular_action_count: (activeViewStack.baselineItems || [])?.length - trigger_action_count,
trigger_action_count
};
useExternalHooks().run("nodeCreateList.onViewActions", trackingPayload);
nodeCreatorStore.onViewActions(trackingPayload);
}
function resetSearch$1() {
updateCurrentViewStack({ search: "" });
}
function addHttpNode() {
const updateData = {
name: "",
key: HTTP_REQUEST_NODE_TYPE,
value: { authentication: "predefinedCredentialType" }
};
emit("nodeTypeSelected", [{ type: HTTP_REQUEST_NODE_TYPE }]);
if (telemetry) setAddedNodeActionParameters(updateData);
const app_identifier = actions.value[0]?.key;
if (!app_identifier) return;
useExternalHooks().run("nodeCreateList.onActionsCustmAPIClicked", { app_identifier });
nodeCreatorStore.onActionsCustomAPIClicked({ app_identifier });
}
onMounted(() => {
trackActionsView();
});
const callouts = computed(() => getActiveViewCallouts(useViewStacks().activeViewStack.title, calloutHelpers.isPreBuiltAgentsCalloutVisible.value, calloutHelpers.getPreBuiltAgentNodeCreatorItems()));
return (_ctx, _cache) => {
const _directive_n8n_html = resolveDirective("n8n-html");
return openBlock(), createElementBlock("div", { class: normalizeClass({
[_ctx.$style.container]: true,
[_ctx.$style.containerPaddingBottom]: !communityNodeDetails.value
}) }, [
createVNode(ItemsRenderer_default, {
elements: callouts.value,
class: normalizeClass(_ctx.$style.items),
onSelected
}, null, 8, ["elements", "class"]),
communityNodeDetails.value ? (openBlock(), createBlock(CommunityNodeInfo_default, { key: 0 })) : createCommentVNode("", true),
rootView.value ? (openBlock(), createBlock(OrderSwitcher_default, {
key: 1,
"root-view": rootView.value
}, createSlots({ _: 2 }, [shouldShowTriggers.value ? {
name: "triggers",
fn: withCtx(() => [withMemo([search.value], () => createVNode(CategorizedItemsRenderer_default, {
elements: parsedTriggerActions.value,
category: triggerCategoryName.value,
"mouse-over-tooltip": unref(i18n$1).baseText("nodeCreator.actionsTooltip.triggersStartWorkflow"),
"is-trigger-category": "",
expanded: isTriggerRootView.value || parsedActionActions.value.length === 0,
onSelected
}, createSlots({ _: 2 }, [hasNoTriggerActions.value ? {
name: "empty",
fn: withCtx(() => [hasNoTriggerActions.value ? (openBlock(), createBlock(unref(N8nCallout_default), {
key: 0,
theme: "info",
iconless: "",
slim: "",
"data-test-id": "actions-panel-no-triggers-callout"
}, {
default: withCtx(() => [withDirectives(createBaseVNode("span", null, null, 512), [[_directive_n8n_html, unref(i18n$1).baseText("nodeCreator.actionsCallout.noTriggerItems", { interpolate: { nodeName: subcategory.value ?? "" } })]])]),
_: 1
})) : createCommentVNode("", true), createVNode(ItemsRenderer_default, {
elements: unref(placeholderTriggerActions),
onSelected
}, null, 8, ["elements"])]),
key: "0"
} : {
name: "empty",
fn: withCtx(() => [withDirectives(createBaseVNode("p", {
class: normalizeClass(_ctx.$style.resetSearch),
onClick: resetSearch$1
}, null, 2), [[_directive_n8n_html, unref(i18n$1).baseText("nodeCreator.actionsCategory.noMatchingTriggers")]])]),
key: "1"
}]), 1032, [
"elements",
"category",
"mouse-over-tooltip",
"expanded"
]), _cache, 0)]),
key: "0"
} : void 0, !isTriggerRootView.value || parsedActionActionsBaseline.value.length !== 0 ? {
name: "actions",
fn: withCtx(() => [withMemo([search.value], () => createVNode(CategorizedItemsRenderer_default, {
elements: parsedActionActions.value,
category: unref(actionsCategoryLocales).actions,
"mouse-over-tooltip": unref(i18n$1).baseText("nodeCreator.actionsTooltip.actionsPerformStep"),
expanded: !isTriggerRootView.value || parsedTriggerActions.value.length === 0,
onSelected
}, {
empty: withCtx(() => [!search.value ? (openBlock(), createBlock(unref(N8nInfoTip_default), {
key: 0,
theme: "info",
type: "note",
class: normalizeClass(_ctx.$style.actionsEmpty)
}, {
default: withCtx(() => [withDirectives(createBaseVNode("span", null, null, 512), [[_directive_n8n_html, unref(i18n$1).baseText("nodeCreator.actionsCallout.noActionItems", { interpolate: { nodeName: subcategory.value ?? "" } })]])]),
_: 1
}, 8, ["class"])) : withDirectives((openBlock(), createElementBlock("p", {
key: 1,
class: normalizeClass(_ctx.$style.resetSearch),
"data-test-id": "actions-panel-no-matching-actions",
onClick: resetSearch$1
}, null, 2)), [[_directive_n8n_html, unref(i18n$1).baseText("nodeCreator.actionsCategory.noMatchingActions")]])]),
default: withCtx(() => [!unref(userActivated) && isTriggerRootView.value ? (openBlock(), createBlock(unref(N8nCallout_default), {
key: 0,
theme: "info",
iconless: "",
slim: "",
"data-test-id": "actions-panel-activation-callout"
}, {
default: withCtx(() => [withDirectives(createBaseVNode("span", null, null, 512), [[_directive_n8n_html, unref(i18n$1).baseText("nodeCreator.actionsCallout.triggersStartWorkflow")]])]),
_: 1
})) : createCommentVNode("", true)]),
_: 1
}, 8, [
"elements",
"category",
"mouse-over-tooltip",
"expanded"
]), _cache, 1)]),
key: "1"
} : void 0]), 1032, ["root-view"])) : createCommentVNode("", true),
containsAPIAction.value && !communityNodeDetails.value ? (openBlock(), createElementBlock("div", {
key: 2,
class: normalizeClass(_ctx.$style.apiHint)
}, [withDirectives(createBaseVNode("span", { onClick: withModifiers(addHttpNode, ["prevent"]) }, null, 512), [[_directive_n8n_html, unref(i18n$1).baseText("nodeCreator.actionsList.apiCall", { interpolate: { node: subcategory.value ?? "" } })]])], 2)) : createCommentVNode("", true),
communityNodeDetails.value ? (openBlock(), createBlock(CommunityNodeFooter_default, {
key: 3,
class: normalizeClass(_ctx.$style.communityNodeFooter),
"package-name": communityNodeDetails.value.packageName,
"show-manage": communityNodeDetails.value.installed && unref(isInstanceOwner)
}, null, 8, [
"class",
"package-name",
"show-manage"
])) : createCommentVNode("", true)
], 2);
};
}
});
var ActionsMode_vue_vue_type_style_index_0_lang_module_default = {
container: "_container_12w99_123",
containerPaddingBottom: "_containerPaddingBottom_12w99_129",
communityNodeFooter: "_communityNodeFooter_12w99_133",
resetSearch: "_resetSearch_12w99_137",
actionsEmpty: "_actionsEmpty_12w99_151",
apiHint: "_apiHint_12w99_159"
};
var ActionsMode_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ActionsMode_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ActionsMode_vue_vue_type_style_index_0_lang_module_default }]]);
var import_camelCase = /* @__PURE__ */ __toESM(require_camelCase());
var _sfc_main = {};
var _hoisted_1$2 = {
width: "75px",
height: "75px",
viewBox: "0 0 75 75",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink"
};
function _sfc_render(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [createStaticVNode("<title>no-nodes-keyart</title><g id=\"Nodes-panel-prototype-V2.1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"nodes-panel-(component)\" transform=\"translate(-2085.000000, -352.000000)\"><g id=\"nodes_panel\" transform=\"translate(1880.000000, 151.000000)\"><g id=\"Panel\" transform=\"translate(50.000000, 0.000000)\"><g id=\"Group-3\" transform=\"translate(105.000000, 171.000000)\"><g id=\"no-nodes-keyart\" transform=\"translate(50.000000, 30.000000)\"><rect id=\"Rectangle\" x=\"0\" y=\"0\" width=\"75\" height=\"75\"></rect><g id=\"Group\" transform=\"translate(6.562500, 8.164062)\" fill=\"#C4C8D1\" fill-rule=\"nonzero\"><polygon id=\"Rectangle\" transform=\"translate(49.192016, 45.302553) rotate(-45.000000) translate(-49.192016, -45.302553) \" points=\"44.5045606 32.0526802 53.8794707 32.0526802 53.8794707 58.5524261 44.5045606 58.5524261\"></polygon><path id=\"Path\" d=\"M48.125,23.0859375 C54.15625,23.0859375 59.0625,18.1796875 59.0625,12.1484375 C59.0625,10.3359375 58.5625,8.6484375 57.78125,7.1484375 L49.34375,15.5859375 L44.6875,10.9296875 L53.125,2.4921875 C51.625,1.7109375 49.9375,1.2109375 48.125,1.2109375 C42.09375,1.2109375 37.1875,6.1171875 37.1875,12.1484375 C37.1875,13.4296875 37.4375,14.6484375 37.84375,15.7734375 L32.0625,21.5546875 L26.5,15.9921875 L28.71875,13.7734375 L24.3125,9.3671875 L30.9375,2.7421875 C27.28125,-0.9140625 21.34375,-0.9140625 17.6875,2.7421875 L6.625,13.8046875 L11.03125,18.2109375 L2.21875,18.2109375 L1.38777878e-15,20.4296875 L11.0625,31.4921875 L13.28125,29.2734375 L13.28125,20.4296875 L17.6875,24.8359375 L19.90625,22.6171875 L25.46875,28.1796875 L2.3125,51.3359375 L8.9375,57.9609375 L44.5,22.4296875 C45.625,22.8359375 46.84375,23.0859375 48.125,23.0859375 Z\"></path></g></g></g></g></g></g></g>", 2)]));
}
var NoResultsIcon_default = /* @__PURE__ */ __plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
var _hoisted_1$1 = ["textContent"];
var _hoisted_2$1 = ["textContent"];
var NoResults_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "NoResults",
props: {
showIcon: { type: Boolean },
showRequest: { type: Boolean },
rootView: {}
},
setup(__props) {
const i18n$1 = useI18n();
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass({
[_ctx.$style.noResults]: true,
[_ctx.$style.iconless]: !_ctx.showIcon
}),
"data-test-id": "node-creator-no-results"
}, [
_ctx.showIcon ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.$style.icon)
}, [createVNode(NoResultsIcon_default)], 2)) : createCommentVNode("", true),
createBaseVNode("div", { class: normalizeClass(_ctx.$style.title) }, [
renderSlot(_ctx.$slots, "title"),
createBaseVNode("p", { textContent: toDisplayString(unref(i18n$1).baseText("nodeCreator.noResults.weDidntMakeThatYet")) }, null, 8, _hoisted_1$1),
_ctx.rootView === unref("Regular") || _ctx.rootView === unref("Trigger") ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.$style.action)
}, [
createTextVNode(toDisplayString(unref(i18n$1).baseText("nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe")) + " ", 1),
_ctx.rootView === unref("Regular") ? (openBlock(), createBlock(unref(N8nLink_default), {
key: 0,
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("addHttpNode"))
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n$1).baseText("nodeCreator.noResults.httpRequest")), 1)]),
_: 1
})) : createCommentVNode("", true),
_ctx.rootView === unref("Trigger") ? (openBlock(), createBlock(unref(N8nLink_default), {
key: 1,
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("addWebhookNode"))
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n$1).baseText("nodeCreator.noResults.webhook")), 1)]),
_: 1
})) : createCommentVNode("", true),
createTextVNode(" " + toDisplayString(unref(i18n$1).baseText("nodeCreator.noResults.node")), 1)
], 2)) : createCommentVNode("", true)
], 2),
_ctx.showRequest ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(_ctx.$style.request)
}, [createBaseVNode("p", { textContent: toDisplayString(unref(i18n$1).baseText("nodeCreator.noResults.wantUsToMakeItFaster")) }, null, 8, _hoisted_2$1), createBaseVNode("div", null, [createVNode(unref(N8nLink_default), { to: unref(REQUEST_NODE_FORM_URL) }, {
default: withCtx(() => [
createBaseVNode("span", null, toDisplayString(unref(i18n$1).baseText("nodeCreator.noResults.requestTheNode")), 1),
_cache[2] || (_cache[2] = createTextVNode("\xA0 ")),
createBaseVNode("span", null, [createVNode(unref(N8nIcon_default), {
class: normalizeClass(_ctx.$style.external),
icon: "external-link",
title: unref(i18n$1).baseText("nodeCreator.noResults.requestTheNode")
}, null, 8, ["class", "title"])])
]),
_: 1
}, 8, ["to"])])], 2)) : createCommentVNode("", true)
], 2);
};
}
});
var NoResults_vue_vue_type_style_index_0_lang_module_default = {
noResults: "_noResults_1w8hr_123",
title: "_title_1w8hr_136",
action: "_action_1w8hr_145",
request: "_request_1w8hr_146",
icon: "_icon_1w8hr_162",
external: "_external_1w8hr_168"
};
var NoResults_default = /* @__PURE__ */ __plugin_vue_export_helper_default(NoResults_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": NoResults_vue_vue_type_style_index_0_lang_module_default }]]);
var NodesMode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "NodesMode",
emits: ["nodeTypeSelected"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const i18n$1 = useI18n();
const calloutHelpers = useCalloutHelpers();
const { mergedNodes, actions, onSubcategorySelected } = useNodeCreatorStore();
const { pushViewStack, popViewStack, isAiSubcategoryView } = useViewStacks();
const { setAddedNodeActionParameters, nodeCreateElementToNodeTypeSelectedPayload } = useActions();
const { registerKeyHook } = useKeyboardNavigation();
const activeViewStack = computed(() => useViewStacks().activeViewStack);
const globalSearchItemsDiff = computed(() => useViewStacks().globalSearchItemsDiff);
const communityNodesAndActions = computed(() => useNodeTypesStore().communityNodesAndActions);
const moreFromCommunity = computed(() => {
return filterAndSearchNodes(communityNodesAndActions.value.mergedNodes, activeViewStack.value.search ?? "", isAiSubcategoryView(activeViewStack.value));
});
const isSearchResultEmpty = computed(() => {
return (activeViewStack.value.items || []).length === 0 && globalCallouts.value.length + globalSearchItemsDiff.value.length + moreFromCommunity.value.length === 0;
});
function getFilteredActions(node, actions$1) {
const nodeActions = actions$1?.[node.key] || [];
if (activeViewStack.value.subcategory === "Human in the Loop") return getHumanInTheLoopActions(nodeActions);
if (activeViewStack.value.actionsFilter) return activeViewStack.value.actionsFilter(nodeActions);
return nodeActions;
}
function onSelected(item) {
if (item.key === "pre-built-agents-collection") {
calloutHelpers.openPreBuiltAgentsCollection({
telemetry: {
source: "nodeCreator",
section: activeViewStack.value.title
},
resetStacks: false
});
return;
}
if (item.type === "subcategory") {
const subcategoryKey = (0, import_camelCase.default)(item.properties.title);
const title$3 = i18n$1.baseText(`nodeCreator.subcategoryNames.${subcategoryKey}`);
const infoKey = `nodeCreator.subcategoryInfos.${subcategoryKey}`;
const info$2 = i18n$1.baseText(infoKey);
const extendedInfo = info$2 !== infoKey ? { info: info$2 } : {};
const nodeIcon$3 = item.properties.icon ? {
type: "icon",
name: item.properties.icon
} : void 0;
pushViewStack({
subcategory: item.key,
mode: "nodes",
title: title$3,
nodeIcon: nodeIcon$3,
...extendedInfo,
...item.properties.panelClass ? { panelClass: item.properties.panelClass } : {},
rootView: activeViewStack.value.rootView,
forceIncludeNodes: item.properties.forceIncludeNodes,
baseFilter: baseSubcategoriesFilter,
itemsMapper: subcategoriesMapper,
sections: item.properties.sections
});
onSubcategorySelected({ subcategory: item.key });
}
if (item.type === "node") {
let nodeActions = getFilteredActions(item, actions);
if (shouldShowCommunityNodeDetails(isCommunityPackageName(item.key), activeViewStack.value)) {
if (!nodeActions.length) nodeActions = getFilteredActions(item, communityNodesAndActions.value.actions);
pushViewStack(prepareCommunityNodeDetailsViewStack(item, getNodeIconSource(item.properties), activeViewStack.value.rootView, nodeActions));
return;
}
const payload = nodeCreateElementToNodeTypeSelectedPayload(item);
if (nodeActions.length === 1) {
emit("nodeTypeSelected", [payload]);
setAddedNodeActionParameters({
name: nodeActions[0].defaults.name ?? item.properties.displayName,
key: item.key,
value: nodeActions[0].values
});
return;
}
if (nodeActions.length === 0 || activeViewStack.value.hideActions) {
emit("nodeTypeSelected", [payload]);
return;
}
const transformedActions = nodeActions?.map((a) => transformNodeType(a, item.properties.displayName, "action"));
pushViewStack({
subcategory: item.properties.displayName,
title: item.properties.displayName,
nodeIcon: getNodeIconSource(item.properties),
rootView: activeViewStack.value.rootView,
hasSearch: true,
mode: "actions",
items: transformedActions
});
}
if (item.type === "view") {
const views = {
[TRIGGER_NODE_CREATOR_VIEW]: TriggerView,
[REGULAR_NODE_CREATOR_VIEW]: RegularView,
["AI"]: AIView,
[AI_OTHERS_NODE_CREATOR_VIEW]: AINodesView
};
const itemKey = item.key;
const matchedView = views[itemKey];
if (!matchedView) {
console.warn(`No view found for ${itemKey}`);
return;
}
const view = matchedView(mergedNodes);
pushViewStack({
title: view.title,
subtitle: view?.subtitle ?? "",
info: view?.info ?? "",
items: view.items,
hasSearch: true,
rootView: view.value,
mode: "nodes",
searchItems: mergedNodes
});
}
if (item.type === "link") window.open(item.properties.url, "_blank");
if (item.type === "openTemplate") calloutHelpers.openSampleWorkflowTemplate(item.properties.templateId, { telemetry: {
source: "nodeCreator",
section: activeViewStack.value.title
} });
}
function subcategoriesMapper(item) {
if (item.type !== "node") return item;
const hasTriggerGroup = item.properties.group.includes("trigger");
const hasActions = getFilteredActions(item, actions).length > 0;
if (hasTriggerGroup && hasActions) {
if (item.properties?.codex) item.properties.codex.alias = [...item.properties.codex?.alias || [], item.properties.displayName];
item.properties.displayName = item.properties.displayName.replace(" Trigger", "");
}
return item;
}
function baseSubcategoriesFilter(item) {
if (item.type === "section") return true;
if (item.type !== "node") return false;
const hasTriggerGroup = item.properties.group.includes("trigger");
const hasActions = getFilteredActions(item, actions).length > 0;
if (activeViewStack.value.rootView === "Trigger") return hasActions || hasTriggerGroup;
return hasActions || !hasTriggerGroup;
}
const globalCallouts = computed(() => [...getRootSearchCallouts(activeViewStack.value.search ?? "", { isRagStarterCalloutVisible: calloutHelpers.isRagStarterCalloutVisible.value }), ...getActiveViewCallouts(activeViewStack.value.title, calloutHelpers.isPreBuiltAgentsCalloutVisible.value, calloutHelpers.getPreBuiltAgentNodeCreatorItems())]);
function arrowLeft() {
popViewStack();
}
function onKeySelect(activeItemId) {
const item = flattenCreateElements([
...globalCallouts.value ?? [],
...activeViewStack.value.items ?? [],
...globalSearchItemsDiff.value ?? [],
...moreFromCommunity.value ?? []
]).find((i) => i.uuid === activeItemId);
if (!item) return;
onSelected(item);
}
registerKeyHook("MainViewArrowRight", {
keyboardKeys: ["ArrowRight", "Enter"],
condition: (type) => [
"subcategory",
"node",
"link",
"view",
"openTemplate"
].includes(type),
handler: onKeySelect
});
registerKeyHook("MainViewArrowLeft", {
keyboardKeys: ["ArrowLeft"],
condition: (type) => [
"subcategory",
"node",
"link",
"view",
"openTemplate"
].includes(type),
handler: arrowLeft
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("span", null, [
createVNode(ItemsRenderer_default, {
elements: globalCallouts.value,
class: normalizeClass(_ctx.$style.items),
onSelected
}, null, 8, ["elements", "class"]),
withMemo([activeViewStack.value.search], () => createVNode(ItemsRenderer_default, {
elements: activeViewStack.value.items,
class: normalizeClass(_ctx.$style.items),
onSelected
}, createSlots({ _: 2 }, [isSearchResultEmpty.value ? {
name: "empty",
fn: withCtx(() => [createVNode(NoResults_default, {
"root-view": activeViewStack.value.rootView,
"show-icon": "",
"show-request": "",
onAddWebhookNode: _cache[0] || (_cache[0] = ($event) => emit("nodeTypeSelected", [{ type: unref("n8n-nodes-base.webhook") }])),
onAddHttpNode: _cache[1] || (_cache[1] = ($event) => emit("nodeTypeSelected", [{ type: unref("n8n-nodes-base.httpRequest") }]))
}, null, 8, ["root-view"])]),
key: "0"
} : void 0]), 1032, ["elements", "class"]), _cache, 2),
globalSearchItemsDiff.value.length > 0 ? (openBlock(), createBlock(CategorizedItemsRenderer_default, {
key: 0,
elements: globalSearchItemsDiff.value,
category: unref(i18n$1).baseText("nodeCreator.categoryNames.otherCategories"),
expanded: true,
onSelected
}, null, 8, ["elements", "category"])) : createCommentVNode("", true),
moreFromCommunity.value.length > 0 ? (openBlock(), createBlock(CategorizedItemsRenderer_default, {
key: 1,
elements: moreFromCommunity.value,
category: unref(i18n$1).baseText("nodeCreator.categoryNames.moreFromCommunity"),
expanded: true,
onSelected
}, null, 8, ["elements", "category"])) : createCommentVNode("", true)
]);
};
}
});
var NodesMode_vue_vue_type_style_index_0_lang_module_default = { items: "_items_bf97l_123" };
var NodesMode_default = /* @__PURE__ */ __plugin_vue_export_helper_default(NodesMode_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": NodesMode_vue_vue_type_style_index_0_lang_module_default }]]);
var CommunityNodeDetails_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "CommunityNodeDetails",
setup(__props) {
const { activeViewStack, pushViewStack, popViewStack, getAllNodeCreateElements, updateCurrentViewStack } = useViewStacks();
const { communityNodeDetails } = activeViewStack;
const nodeCreatorStore = useNodeCreatorStore();
const { installNode, loading } = useInstallNode();
const isOwner = computed(() => useUsersStore().isInstanceOwner);
const updateViewStack = (key) => {
const installedNodeKey = removePreviewToken(key);
const installedNode = getAllNodeCreateElements().find((node) => node.key === installedNodeKey);
if (installedNode) {
const nodeActions = nodeCreatorStore.actions?.[installedNode.key] || [];
popViewStack();
updateCurrentViewStack({ searchItems: nodeCreatorStore.mergedNodes });
pushViewStack(prepareCommunityNodeDetailsViewStack(installedNode, getNodeIconSource(installedNode.properties), activeViewStack.rootView, nodeActions), { transitionDirection: "none" });
} else {
const viewStack = { ...activeViewStack };
viewStack.communityNodeDetails.installed = true;
pushViewStack(activeViewStack, { resetStacks: true });
}
};
const updateStoresAndViewStack = (key) => {
updateViewStack(key);
nodeCreatorStore.removeNodeFromMergedNodes(key);
};
const onInstall = async () => {
if (isOwner.value && activeViewStack.communityNodeDetails && !communityNodeDetails?.installed) {
const { key, packageName } = activeViewStack.communityNodeDetails;
if ((await installNode({
type: "verified",
packageName,
nodeType: key
})).success) updateStoresAndViewStack(key);
}
};
return (_ctx, _cache) => {
return unref(communityNodeDetails) ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.$style.container)
}, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.header) }, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.title) }, [
unref(communityNodeDetails).nodeIcon ? (openBlock(), createBlock(NodeIcon_default, {
key: 0,
class: normalizeClass(_ctx.$style.nodeIcon),
"icon-source": unref(communityNodeDetails).nodeIcon,
circle: false,
"show-tooltip": false
}, null, 8, ["class", "icon-source"])) : createCommentVNode("", true),
createBaseVNode("span", null, toDisplayString(unref(communityNodeDetails).title), 1),
unref(communityNodeDetails).official ? (openBlock(), createBlock(unref(N8nTooltip_default), {
key: 1,
placement: "bottom",
"show-after": 500
}, {
content: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("generic.officialNode.tooltip", { interpolate: { author: unref(communityNodeDetails).companyName ?? unref(communityNodeDetails).title } })), 1)]),
default: withCtx(() => [createVNode(unref(verified_default), { class: normalizeClass(_ctx.$style.officialIcon) }, null, 8, ["class"])]),
_: 1
})) : createCommentVNode("", true)
], 2), createBaseVNode("div", null, [unref(communityNodeDetails).installed ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.$style.installed)
}, [!unref(communityNodeDetails).official ? (openBlock(), createBlock(unref(N8nIcon_default), {
key: 0,
class: normalizeClass(_ctx.$style.installedIcon),
icon: "box"
}, null, 8, ["class"])) : createCommentVNode("", true), createVNode(unref(N8nText_default), {
color: "text-light",
size: "small",
bold: ""
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeDetails.installed")), 1)]),
_: 1
})], 2)) : createCommentVNode("", true), isOwner.value && !unref(communityNodeDetails).installed ? (openBlock(), createBlock(unref(N8nButton_default), {
key: 1,
loading: unref(loading),
disabled: unref(loading),
label: unref(i18n).baseText("communityNodeDetails.install"),
size: "small",
"data-test-id": "install-community-node-button",
onClick: onInstall
}, null, 8, [
"loading",
"disabled",
"label"
])) : createCommentVNode("", true)])], 2)], 2)) : createCommentVNode("", true);
};
}
});
var CommunityNodeDetails_vue_vue_type_style_index_0_lang_module_default = {
container: "_container_1ibv8_123",
header: "_header_1ibv8_131",
title: "_title_1ibv8_138",
nodeIcon: "_nodeIcon_1ibv8_146",
installedIcon: "_installedIcon_1ibv8_151",
officialIcon: "_officialIcon_1ibv8_157",
installed: "_installed_1ibv8_151"
};
var CommunityNodeDetails_default = /* @__PURE__ */ __plugin_vue_export_helper_default(CommunityNodeDetails_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": CommunityNodeDetails_vue_vue_type_style_index_0_lang_module_default }]]);
var CommunityNodeDocsLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "CommunityNodeDocsLink",
props: { packageName: {} },
setup(__props) {
const props = __props;
const openCommunityNodeDocsPage = () => {
const newTab = window.open(`https://www.npmjs.com/package/${props.packageName}`, "_blank");
if (newTab) newTab.opener = null;
};
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(N8nLink_default), {
theme: "text",
class: normalizeClass(_ctx.$style.container),
title: unref(i18n).baseText("communityNodesDocsLink.link.title"),
onClick: openCommunityNodeDocsPage
}, {
default: withCtx(() => [createVNode(unref(N8nText_default), {
size: "small",
bold: "",
style: { "margin-right": "5px" }
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("communityNodesDocsLink.title")), 1)]),
_: 1
}), createVNode(unref(N8nIcon_default), { icon: "external-link" })]),
_: 1
}, 8, ["class", "title"]);
};
}
});
var CommunityNodeDocsLink_vue_vue_type_style_index_0_lang_module_default = { container: "_container_1ms6i_123" };
var CommunityNodeDocsLink_default = /* @__PURE__ */ __plugin_vue_export_helper_default(CommunityNodeDocsLink_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": CommunityNodeDocsLink_vue_vue_type_style_index_0_lang_module_default }]]);
var _hoisted_1 = ["textContent"];
var _hoisted_2 = ["textContent"];
var NodesListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "NodesListPanel",
setup(__props) {
const i18n$1 = useI18n();
const { callDebounced } = useDebounce();
const { mergedNodes } = useNodeCreatorStore();
const { pushViewStack, popViewStack, updateCurrentViewStack } = useViewStacks();
const { setActiveItemIndex, attachKeydownEvent, detachKeydownEvent } = useKeyboardNavigation();
const nodeCreatorStore = useNodeCreatorStore();
const { isInstanceOwner } = useUsersStore();
const activeViewStack = computed(() => useViewStacks().activeViewStack);
const communityNodeDetails = computed(() => activeViewStack.value.communityNodeDetails);
const viewStacks = computed(() => useViewStacks().viewStacks);
const isActionsMode = computed(() => useViewStacks().activeViewStackMode === "actions");
const searchPlaceholder = computed(() => {
let node = activeViewStack.value?.title;
if (communityNodeDetails.value) node = communityNodeDetails.value.title;
if (isActionsMode.value) return i18n$1.baseText("nodeCreator.actionsCategory.searchActions", { interpolate: { node } });
return i18n$1.baseText("nodeCreator.searchBar.searchNodes");
});
const showSearchBar = computed(() => {
if (activeViewStack.value.communityNodeDetails) return false;
return activeViewStack.value.hasSearch;
});
const nodeCreatorView = computed(() => useNodeCreatorStore().selectedView);
const isCommunityNodeActionsMode = computed(() => {
return communityNodeDetails.value && isActionsMode.value && activeViewStack.value.subcategory;
});
function getDefaultActiveIndex(search = "") {
if (activeViewStack.value.mode === "actions") return 1;
else if (activeViewStack.value.sections) return search ? 0 : 1;
return 0;
}
function onSearch(value) {
if (activeViewStack.value.uuid) {
updateCurrentViewStack({ search: value });
setActiveItemIndex(getDefaultActiveIndex(value));
if (value.length) callDebounced(nodeCreatorStore.onNodeFilterChanged, {
trailing: true,
debounceTime: 2e3
}, {
newValue: value,
filteredNodes: activeViewStack.value.items ?? [],
filterMode: activeViewStack.value.rootView ?? "Regular",
subcategory: activeViewStack.value.subcategory,
title: activeViewStack.value.title
});
}
}
function onTransitionEnd() {
setActiveItemIndex(getDefaultActiveIndex());
}
onMounted(() => {
attachKeydownEvent();
setActiveItemIndex(getDefaultActiveIndex());
});
onUnmounted(() => {
detachKeydownEvent();
});
watch(() => nodeCreatorView.value, (selectedView) => {
const views = {
[TRIGGER_NODE_CREATOR_VIEW]: TriggerView,
[REGULAR_NODE_CREATOR_VIEW]: RegularView,
["AI"]: AIView,
[AI_OTHERS_NODE_CREATOR_VIEW]: AINodesView,
[AI_UNCATEGORIZED_CATEGORY]: AINodesView,
[AI_EVALUATION]: AINodesView
};
const itemKey = selectedView;
const matchedView = views[itemKey];
if (!matchedView) {
console.warn(`No view found for ${itemKey}`);
return;
}
const view = matchedView(mergedNodes);
pushViewStack({
title: view.title,
subtitle: view?.subtitle ?? "",
items: view.items,
info: view.info,
hasSearch: true,
mode: "nodes",
rootView: selectedView,
searchItems: mergedNodes
});
}, { immediate: true });
function onBackButton() {
popViewStack();
}
return (_ctx, _cache) => {
return viewStacks.value.length > 0 ? (openBlock(), createBlock(Transition, {
key: 0,
name: `panel-slide-${activeViewStack.value.transitionDirection}`,
onAfterLeave: onTransitionEnd
}, {
default: withCtx(() => [(openBlock(), createElementBlock("aside", {
key: `${activeViewStack.value.uuid}`,
class: normalizeClass([_ctx.$style.nodesListPanel, activeViewStack.value.panelClass]),
onKeydownCapture: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
}, [
createBaseVNode("header", {
class: normalizeClass({
[_ctx.$style.header]: true,
[_ctx.$style.hasBg]: !activeViewStack.value.subtitle,
"nodes-list-panel-header": true
}),
"data-test-id": "nodes-list-header"
}, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.top) }, [
viewStacks.value.length > 1 && !activeViewStack.value.preventBack ? (openBlock(), createElementBlock("button", {
key: 0,
class: normalizeClass(_ctx.$style.backButton),
onClick: onBackButton
}, [createVNode(unref(N8nIcon_default), {
class: normalizeClass(_ctx.$style.backButtonIcon),
icon: "arrow-left",
size: 22
}, null, 8, ["class"])], 2)) : createCommentVNode("", true),
activeViewStack.value.nodeIcon ? (openBlock(), createBlock(NodeIcon_default, {
key: 1,
class: normalizeClass(_ctx.$style.nodeIcon),
"icon-source": activeViewStack.value.nodeIcon,
circle: false,
"show-tooltip": false,
size: 20
}, null, 8, ["class", "icon-source"])) : createCommentVNode("", true),
activeViewStack.value.title ? (openBlock(), createElementBlock("p", {
key: 2,
class: normalizeClass(_ctx.$style.title),
textContent: toDisplayString(activeViewStack.value.title)
}, null, 10, _hoisted_1)) : createCommentVNode("", true),
communityNodeDetails.value ? (openBlock(), createBlock(CommunityNodeDocsLink_default, {
key: 3,
"package-name": communityNodeDetails.value.packageName
}, null, 8, ["package-name"])) : createCommentVNode("", true)
], 2), activeViewStack.value.subtitle ? (openBlock(), createElementBlock("p", {
key: 0,
class: normalizeClass({
[_ctx.$style.subtitle]: true,
[_ctx.$style.offsetSubtitle]: viewStacks.value.length > 1
}),
textContent: toDisplayString(activeViewStack.value.subtitle)
}, null, 10, _hoisted_2)) : createCommentVNode("", true)], 2),
showSearchBar.value ? (openBlock(), createBlock(SearchBar_default, {
key: 0,
class: normalizeClass(_ctx.$style.searchBar),
placeholder: searchPlaceholder.value ? searchPlaceholder.value : unref(i18n$1).baseText("nodeCreator.searchBar.searchNodes"),
"model-value": activeViewStack.value.search,
"onUpdate:modelValue": onSearch
}, null, 8, [
"class",
"placeholder",
"model-value"
])) : createCommentVNode("", true),
communityNodeDetails.value ? (openBlock(), createBlock(CommunityNodeDetails_default, { key: 1 })) : createCommentVNode("", true),
communityNodeDetails.value && !isActionsMode.value ? (openBlock(), createBlock(CommunityNodeInfo_default, { key: 2 })) : createCommentVNode("", true),
createBaseVNode("div", { class: normalizeClass(_ctx.$style.renderedItems) }, [activeViewStack.value.info && !activeViewStack.value.search ? (openBlock(), createBlock(unref(N8nNotice_default), {
key: 0,
class: normalizeClass(_ctx.$style.info),
content: activeViewStack.value.info,
theme: "warning"
}, null, 8, ["class", "content"])) : createCommentVNode("", true), isActionsMode.value && activeViewStack.value.subcategory ? (openBlock(), createBlock(ActionsMode_default, normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)), null, 16)) : (openBlock(), createBlock(NodesMode_default, mergeProps({
key: 2,
"root-view": nodeCreatorView.value
}, _ctx.$attrs), null, 16, ["root-view"]))], 2),
communityNodeDetails.value && !isCommunityNodeActionsMode.value ? (openBlock(), createBlock(CommunityNodeFooter_default, {
key: 3,
"package-name": communityNodeDetails.value.packageName,
"show-manage": communityNodeDetails.value.installed && unref(isInstanceOwner)
}, null, 8, ["package-name", "show-manage"])) : createCommentVNode("", true)
], 34))]),
_: 1
}, 8, ["name"])) : createCommentVNode("", true);
};
}
});
var NodesListPanel_vue_vue_type_style_index_0_lang_module_default = {
info: "_info_aetc2_145",
backButton: "_backButton_aetc2_149",
backButtonIcon: "_backButtonIcon_aetc2_156",
nodeIcon: "_nodeIcon_aetc2_161",
renderedItems: "_renderedItems_aetc2_167",
searchBar: "_searchBar_aetc2_179",
nodesListPanel: "_nodesListPanel_aetc2_183",
footer: "_footer_aetc2_201",
top: "_top_aetc2_212",
header: "_header_aetc2_217",
hasBg: "_hasBg_aetc2_223",
title: "_title_aetc2_228",
subtitle: "_subtitle_aetc2_239",
offsetSubtitle: "_offsetSubtitle_aetc2_247"
};
var NodesListPanel_default = /* @__PURE__ */ __plugin_vue_export_helper_default(NodesListPanel_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": NodesListPanel_vue_vue_type_style_index_0_lang_module_default }]]);
var NodeCreator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "NodeCreator",
props: {
active: { type: Boolean },
onNodeTypeSelected: { type: Function }
},
emits: ["closeNodeCreator", "nodeTypeSelected"],
setup(__props, { emit: __emit }) {
const OUTSIDE_CLICK_WHITELIST = [".el-overlay-dialog"];
const props = __props;
const { resetViewStacks } = useViewStacks();
const { registerKeyHook } = useKeyboardNavigation();
const emit = __emit;
const uiStore = useUIStore();
const bannersStore = useBannersStore();
const chatPanelStore = useChatPanelStore();
const { setShowScrim, setActions, setMergeNodes } = useNodeCreatorStore();
const { generateMergedNodesAndActions } = useActionsGenerator();
const state = reactive({
nodeCreator: null,
mousedownInsideEvent: null
});
const showScrim = computed(() => useNodeCreatorStore().showScrim);
const viewStacksLength = computed(() => useViewStacks().viewStacks.length);
const nodeCreatorInlineStyle = computed(() => {
const rightPosition = getRightOffset();
return {
top: `${bannersStore.bannersHeight + uiStore.headerHeight}px`,
right: `${rightPosition}px`
};
});
function getRightOffset() {
if (chatPanelStore.isOpen) return chatPanelStore.width;
return 0;
}
function onMouseUpOutside() {
if (state.mousedownInsideEvent) {
const clickEvent = new MouseEvent("click", {
bubbles: true,
cancelable: true
});
state.mousedownInsideEvent.target?.dispatchEvent(clickEvent);
state.mousedownInsideEvent = null;
unBindOnMouseUpOutside();
}
}
function unBindOnMouseUpOutside() {
document.removeEventListener("mouseup", onMouseUpOutside);
document.removeEventListener("touchstart", onMouseUpOutside);
}
function onMouseUp() {
state.mousedownInsideEvent = null;
unBindOnMouseUpOutside();
}
function onMouseDown(event) {
state.mousedownInsideEvent = event;
document.addEventListener("mouseup", onMouseUpOutside);
document.addEventListener("touchstart", onMouseUpOutside);
}
function onDragOver(event) {
event.preventDefault();
}
function onDrop(event) {
if (!event.dataTransfer) return;
const dragData = event.dataTransfer.getData(DRAG_EVENT_DATA_KEY);
const nodeCreatorBoundingRect = state.nodeCreator.getBoundingClientRect();
if (dragData && event.pageX >= nodeCreatorBoundingRect.x && event.pageY >= nodeCreatorBoundingRect.y) event.stopPropagation();
}
watch(() => props.active, (isActive) => {
if (!isActive) {
setShowScrim(false);
resetViewStacks();
}
});
watch(viewStacksLength, (value) => {
if (value === 0) {
emit("closeNodeCreator");
setShowScrim(false);
}
});
registerKeyHook("NodeCreatorCloseEscape", {
keyboardKeys: ["Escape"],
handler: () => emit("closeNodeCreator")
});
registerKeyHook("NodeCreatorCloseTab", {
keyboardKeys: ["Tab"],
handler: () => emit("closeNodeCreator")
});
watch(() => ({
httpOnlyCredentials: useCredentialsStore().httpOnlyCredentialTypes,
nodeTypes: useNodeTypesStore().visibleNodeTypes
}), ({ nodeTypes, httpOnlyCredentials }) => {
const { actions, mergedNodes } = generateMergedNodesAndActions(nodeTypes, httpOnlyCredentials);
setActions(actions);
setMergeNodes(mergedNodes);
}, { immediate: true });
const { nodeCreator: nodeCreator$1 } = toRefs(state);
onBeforeUnmount(() => {
unBindOnMouseUpOutside();
});
onClickOutside(nodeCreator$1, () => {
emit("closeNodeCreator");
}, { ignore: OUTSIDE_CLICK_WHITELIST });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", null, [
createBaseVNode("aside", { class: normalizeClass({
[_ctx.$style.nodeCreatorScrim]: true,
[_ctx.$style.active]: showScrim.value
}) }, null, 2),
_ctx.active ? (openBlock(), createBlock(unref(N8nIconButton_default), {
key: 0,
class: normalizeClass(_ctx.$style.close),
type: "secondary",
icon: "x",
"aria-label": "Close Node Creator",
onClick: _cache[0] || (_cache[0] = ($event) => emit("closeNodeCreator"))
}, null, 8, ["class"])) : createCommentVNode("", true),
createVNode(SlideTransition_default, null, {
default: withCtx(() => [_ctx.active ? (openBlock(), createElementBlock("div", {
key: 0,
ref_key: "nodeCreator",
ref: nodeCreator$1,
class: normalizeClass({ [_ctx.$style.nodeCreator]: true }),
style: normalizeStyle(nodeCreatorInlineStyle.value),
"data-test-id": "node-creator",
onDragover: onDragOver,
onDrop,
onMousedown: onMouseDown,
onMouseup: onMouseUp
}, [createVNode(NodesListPanel_default, { onNodeTypeSelected: _ctx.onNodeTypeSelected }, null, 8, ["onNodeTypeSelected"])], 38)) : createCommentVNode("", true)]),
_: 1
})
]);
};
}
});
var NodeCreator_vue_vue_type_style_index_0_lang_module_default = {
nodeCreator: "_nodeCreator_1htj5_127",
nodeCreatorScrim: "_nodeCreatorScrim_1htj5_139",
active: "_active_1htj5_151",
close: "_close_1htj5_155"
};
var NodeCreator_default = /* @__PURE__ */ __plugin_vue_export_helper_default(NodeCreator_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": NodeCreator_vue_vue_type_style_index_0_lang_module_default }]]);
export { NodeCreator_default as default };