@atom8n/n8n-editor-ui 2.2.0

package/dist/assets/SettingsChatHubView-gWh2X6vX.js

@@ -0,0 +1,285 @@
+import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, M as createVNode, P as defineComponent, T as createBlock, Z as onMounted, bt as withCtx, et as openBlock, j as createTextVNode, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import { Ct as N8nActionBox_default, at as N8nLoading_default, bn as N8nText_default, ht as N8nTooltip_default, it as N8nActionToggle_default, u as N8nDataTableServer_default, vn as N8nHeading_default, xn as N8nButton_default } from "./src-jviYSG25.js";
+import "./en-CF30SCh2.js";
+import "./preload-helper-dyVz7ck7.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import "./truncate-C0KYt7i3.js";
+import { Er as useUsersStore, Xn as useDocumentTitle, _n as useCredentialsStore, aa as useUIStore, k as useTelemetry, ms as useSettingsStore, y as useToast } from "./builder.store-Czk2ipDE.js";
+import "./empty-BuGRxzl4.js";
+import "./get-BcEmeOxn.js";
+import "./sanitize-html-CbW56HUN.js";
+import "./CalendarDate-DgQUMbNo.js";
+import "./path-browserify-RUt2u7iT.js";
+import "./_MapCache-CcdIl4Ae.js";
+import { Yr as PROVIDER_CREDENTIAL_TYPE_MAP } from "./constants-C8OH4tTq.js";
+import "./merge-DhuTk1HM.js";
+import "./_baseOrderBy-N8Be_6z6.js";
+import "./dateformat-hG8NERse.js";
+import "./useDebounce-Br5_1ug-.js";
+import "./retry-BgHaYzbB.js";
+import { t as CredentialIcon_default } from "./CredentialIcon-8YdTTFZ1.js";
+import { t as TimeAgo_default } from "./TimeAgo-C6EN4lCs.js";
+import { m as providerDisplayNames, o as CHAT_PROVIDER_SETTINGS_MODAL_KEY } from "./constants-DMrsrpD7.js";
+import { t as useChatStore } from "./chat.store-290YeyrQ.js";
+import "./fileUtils-CRWqOQje.js";
+var _hoisted_1 = { key: 0 };
+var TRUNCATE_MODELS_AFTER = 4;
+var ChatProvidersTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ChatProvidersTable",
+	props: {
+		settings: {},
+		loading: { type: Boolean },
+		disabled: { type: Boolean }
+	},
+	emits: ["editProvider", "refresh"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const i18n = useI18n();
+		const tableHeaders = ref([
+			{
+				title: i18n.baseText("settings.chatHub.providers.table.provider"),
+				key: "provider",
+				width: 120,
+				disableSort: true,
+				value() {}
+			},
+			{
+				title: i18n.baseText("settings.chatHub.providers.table.models"),
+				key: "models",
+				width: 300,
+				disableSort: true,
+				value() {}
+			},
+			{
+				title: i18n.baseText("settings.chatHub.providers.table.updatedAt"),
+				key: "updatedAt",
+				disableSort: true,
+				width: 80,
+				value() {}
+			},
+			{
+				title: "",
+				key: "actions",
+				align: "end",
+				width: 50,
+				disableSort: true,
+				value() {}
+			}
+		]);
+		const tableActions = computed(() => [{
+			label: i18n.baseText("settings.chatHub.providers.table.action.editProvider"),
+			value: "editProvider",
+			disabled: props.disabled
+		}]);
+		const settingItems = computed(() => {
+			return props.settings ? Object.values(props.settings) : [];
+		});
+		const modelsText = (settings) => {
+			if (!settings.enabled) return i18n.baseText("settings.chatHub.providers.table.models.disabled");
+			else if (settings.allowedModels.length === 0) return i18n.baseText("settings.chatHub.providers.table.models.allModels");
+			else {
+				if (settings.allowedModels.length > TRUNCATE_MODELS_AFTER) return settings.allowedModels.slice(0, TRUNCATE_MODELS_AFTER).map((m) => m.displayName).join(", ") + i18n.baseText("settings.chatHub.providers.table.models.more", { interpolate: { count: settings.allowedModels.length - TRUNCATE_MODELS_AFTER } });
+				return settings.allowedModels.map((m) => m.displayName).join(", ");
+			}
+		};
+		const onTableAction = (action, settings) => {
+			switch (action) {
+				case "editProvider":
+					emit("editProvider", settings);
+					break;
+				default: break;
+			}
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.tableContainer) }, [props.loading ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(N8nLoading_default), {
+				loading: props.loading,
+				variant: "h1",
+				class: normalizeClass(_ctx.$style.header)
+			}, null, 8, ["loading", "class"]), createVNode(unref(N8nLoading_default), {
+				loading: props.loading,
+				variant: "p",
+				rows: 5,
+				"shrink-last": false
+			}, null, 8, ["loading"])])) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(_ctx.$style.container)
+			}, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.header) }, [createVNode(unref(N8nHeading_default), {
+				size: "medium",
+				bold: true
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("settings.chatHub.providers.table.title")), 1)]),
+				_: 1
+			}), createBaseVNode("div", { class: normalizeClass(_ctx.$style.actions) }, [createVNode(unref(N8nTooltip_default), { content: unref(i18n).baseText("settings.chatHub.providers.table.refresh.tooltip") }, {
+				default: withCtx(() => [createVNode(unref(N8nButton_default), {
+					size: "small",
+					type: "tertiary",
+					icon: "refresh-cw",
+					square: true,
+					onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("refresh"))
+				})]),
+				_: 1
+			}, 8, ["content"])], 2)], 2), !props.settings ? (openBlock(), createBlock(unref(N8nActionBox_default), {
+				key: 0,
+				heading: unref(i18n).baseText("settings.chatHub.providers.table.empty.title"),
+				description: unref(i18n).baseText("settings.chatHub.providers.table.empty.description")
+			}, null, 8, ["heading", "description"])) : (openBlock(), createBlock(unref(N8nDataTableServer_default), {
+				key: 1,
+				class: normalizeClass(_ctx.$style.chatProvidersTable),
+				headers: tableHeaders.value,
+				items: settingItems.value,
+				"items-length": settingItems.value.length
+			}, {
+				[`item.provider`]: withCtx(({ item }) => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.providerCell) }, [item.provider in unref(PROVIDER_CREDENTIAL_TYPE_MAP) ? (openBlock(), createBlock(CredentialIcon_default, {
+					key: 0,
+					"credential-type-name": unref(PROVIDER_CREDENTIAL_TYPE_MAP)[item.provider],
+					size: 16,
+					class: normalizeClass(_ctx.$style.menuIcon)
+				}, null, 8, ["credential-type-name", "class"])) : createCommentVNode("", true), createVNode(unref(N8nText_default), { bold: "" }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(providerDisplayNames)[item.provider]), 1)]),
+					_: 2
+				}, 1024)], 2)]),
+				[`item.models`]: withCtx(({ item }) => [item.allowedModels?.length && item.allowedModels?.length > TRUNCATE_MODELS_AFTER ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+					key: 0,
+					content: item.allowedModels?.map((m) => m.displayName).join(", ")
+				}, {
+					default: withCtx(() => [createVNode(unref(N8nText_default), { color: item.enabled ? "text-base" : "primary" }, {
+						default: withCtx(() => [createTextVNode(toDisplayString(modelsText(item)), 1)]),
+						_: 2
+					}, 1032, ["color"])]),
+					_: 2
+				}, 1032, ["content"])) : (openBlock(), createBlock(unref(N8nText_default), {
+					key: 1,
+					color: item.enabled ? "text-base" : "primary"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(modelsText(item)), 1)]),
+					_: 2
+				}, 1032, ["color"]))]),
+				[`item.updatedAt`]: withCtx(({ item }) => [createBaseVNode("span", null, [item.updatedAt ? (openBlock(), createBlock(TimeAgo_default, {
+					key: 0,
+					date: item.updatedAt
+				}, null, 8, ["date"])) : (openBlock(), createBlock(unref(N8nText_default), { key: 1 }, {
+					default: withCtx(() => _cache[1] || (_cache[1] = [createTextVNode("-")])),
+					_: 1
+				}))])]),
+				[`item.actions`]: withCtx(({ item }) => [createVNode(unref(N8nActionToggle_default), {
+					placement: "bottom",
+					actions: tableActions.value,
+					theme: "dark",
+					onAction: ($event) => onTableAction($event, item)
+				}, null, 8, ["actions", "onAction"])]),
+				_: 2
+			}, 1032, [
+				"class",
+				"headers",
+				"items",
+				"items-length"
+			]))], 2))], 2);
+		};
+	}
+});
+var ChatProvidersTable_vue_vue_type_style_index_0_lang_module_default = {
+	container: "_container_i795b_123",
+	tableContainer: "_tableContainer_i795b_128",
+	actions: "_actions_i795b_132",
+	header: "_header_i795b_138",
+	chatProvidersTable: "_chatProvidersTable_i795b_145",
+	menuIcon: "_menuIcon_i795b_149",
+	providerCell: "_providerCell_i795b_153"
+};
+var ChatProvidersTable_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatProvidersTable_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatProvidersTable_vue_vue_type_style_index_0_lang_module_default }]]);
+var SettingsChatHubView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SettingsChatHubView",
+	setup(__props) {
+		const i18n = useI18n();
+		const toast = useToast();
+		const documentTitle = useDocumentTitle();
+		const chatStore = useChatStore();
+		const usersStore = useUsersStore();
+		const settingsStore = useSettingsStore();
+		const credentialsStore = useCredentialsStore();
+		const uiStore = useUIStore();
+		const telemetry = useTelemetry();
+		const isOwner = computed(() => usersStore.isInstanceOwner);
+		const isAdmin = computed(() => usersStore.isAdmin);
+		const disabled = computed(() => !isOwner.value && !isAdmin.value);
+		const fetchSettings = async () => {
+			try {
+				await chatStore.fetchAllChatSettings();
+			} catch (error) {
+				toast.showError(error, i18n.baseText("settings.chatHub.providers.fetching.error"));
+			}
+		};
+		function onEditProvider(settings) {
+			uiStore.openModalWithData({
+				name: CHAT_PROVIDER_SETTINGS_MODAL_KEY,
+				data: {
+					provider: settings.provider,
+					disabled: disabled.value,
+					onNewCredential: (provider) => {
+						const credentialType = PROVIDER_CREDENTIAL_TYPE_MAP[provider];
+						telemetry.track("User opened Credential modal", {
+							credential_type: credentialType,
+							source: "chat_hub_settings",
+							new_credential: true,
+							workflow_id: null
+						});
+						uiStore.openNewCredential(credentialType);
+					},
+					onConfirm: async (updatedSettings) => {
+						try {
+							await chatStore.updateProviderSettings(updatedSettings);
+							toast.showMessage({
+								title: i18n.baseText("settings.chatHub.providers.updated.success"),
+								type: "success"
+							});
+							await settingsStore.getModuleSettings();
+						} catch (error) {
+							toast.showError(error, i18n.baseText("settings.chatHub.providers.updated.error"));
+						}
+					},
+					onCancel: () => {}
+				}
+			});
+		}
+		async function onRefreshWorkflows() {
+			await fetchSettings();
+		}
+		onMounted(async () => {
+			documentTitle.set(i18n.baseText("settings.chatHub"));
+			if (!settingsStore.isChatFeatureEnabled) return;
+			await Promise.all([
+				fetchSettings(),
+				credentialsStore.fetchAllCredentials(),
+				credentialsStore.fetchCredentialTypes(false)
+			]);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.container) }, [createVNode(unref(N8nHeading_default), {
+				size: "2xlarge",
+				class: normalizeClass(_ctx.$style.title)
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("settings.chatHub")), 1)]),
+				_: 1
+			}, 8, ["class"]), createBaseVNode("div", { class: normalizeClass(_ctx.$style.container) }, [createVNode(ChatProvidersTable_default, {
+				"data-test-id": "chat-providers-table",
+				settings: unref(chatStore).settings,
+				loading: unref(chatStore).settingsLoading,
+				disabled: disabled.value,
+				onEditProvider,
+				onRefresh: onRefreshWorkflows
+			}, null, 8, [
+				"settings",
+				"loading",
+				"disabled"
+			])], 2)], 2);
+		};
+	}
+});
+var SettingsChatHubView_vue_vue_type_style_index_0_lang_module_default = {
+	container: "_container_1g3bj_123",
+	title: "_title_1g3bj_129"
+};
+var SettingsChatHubView_default = /* @__PURE__ */ __plugin_vue_export_helper_default(SettingsChatHubView_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": SettingsChatHubView_vue_vue_type_style_index_0_lang_module_default }]]);
+export { SettingsChatHubView_default as default };

package/dist/assets/SettingsCommunityNodesView-D8VQtpGY.js

@@ -0,0 +1,349 @@
+import { o as __toESM } from "./chunk-6z4oVpB-.js";
+import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, J as onBeforeUnmount, M as createVNode, P as defineComponent, T as createBlock, Z as onMounted, _ as Fragment, _t as watch, bt as withCtx, et as openBlock, it as renderList, j as createTextVNode, q as onBeforeMount, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import { Cn as N8nIcon_default, Ct as N8nActionBox_default, at as N8nLoading_default, bn as N8nText_default, ht as N8nTooltip_default, it as N8nActionToggle_default, vn as N8nHeading_default, xn as N8nButton_default } from "./src-jviYSG25.js";
+import "./en-CF30SCh2.js";
+import "./preload-helper-dyVz7ck7.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import "./truncate-C0KYt7i3.js";
+import { Pt as useNodeTypesStore, Xn as useDocumentTitle, aa as useUIStore, k as useTelemetry, ma as COMMUNITY_PACKAGE_MANAGE_ACTIONS, ms as useSettingsStore, pa as COMMUNITY_PACKAGE_INSTALL_MODAL_KEY, ua as COMMUNITY_NODES_INSTALLATION_DOCS_URL, x as useExternalHooks, y as useToast } from "./builder.store-Czk2ipDE.js";
+import "./empty-BuGRxzl4.js";
+import { v as useRouter } from "./get-BcEmeOxn.js";
+import "./sanitize-html-CbW56HUN.js";
+import "./CalendarDate-DgQUMbNo.js";
+import "./path-browserify-RUt2u7iT.js";
+import "./_MapCache-CcdIl4Ae.js";
+import { b as NPM_PACKAGE_DOCS_BASE_URL } from "./constants-C8OH4tTq.js";
+import "./merge-DhuTk1HM.js";
+import "./_baseOrderBy-N8Be_6z6.js";
+import "./dateformat-hG8NERse.js";
+import "./useDebounce-Br5_1ug-.js";
+import "./assistant.store-CNywgN4S.js";
+import "./retry-BgHaYzbB.js";
+import "./executions.store-B9uRYwgv.js";
+import { i as usePushConnectionStore } from "./useRunWorkflow-LO7ffLp9.js";
+import "./usePinnedData-BhZkqttf.js";
+import "./nodeCreator.store-Bpnrwp2l.js";
+import "./nodeIcon-D6X-ENYt.js";
+import "./useClipboard-DvjhVHqJ.js";
+import "./useCanvasOperations-8ULLtMkY.js";
+import "./folders.store-yAFj-5Vl.js";
+import "./banners.store-CGEcBTDn.js";
+import { n as useCommunityNodesStore, t as require_semver } from "./semver-Bk6DGseV.js";
+import "./schemaPreview.store-DUgN1yVE.js";
+import { t as usePushConnection } from "./usePushConnection-DMS-F_IW.js";
+import "./aiTemplatesStarterCollection.store-nL9nePkK.js";
+import "./readyToRun.store-YEMvPUqo.js";
+var import_semver = /* @__PURE__ */ __toESM(require_semver());
+var _hoisted_1 = { key: 0 };
+var CommunityPackageCard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CommunityPackageCard",
+	props: {
+		communityPackage: { default: null },
+		loading: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { openCommunityPackageUpdateConfirmModal, openCommunityPackageUninstallConfirmModal } = useUIStore();
+		const i18n = useI18n();
+		const telemetry = useTelemetry();
+		const settingsStore = useSettingsStore();
+		const nodeTypesStore = useNodeTypesStore();
+		const latestVerifiedVersion = ref();
+		const currVersion = computed(() => props.communityPackage?.installedVersion || "");
+		const hasUnverifiedPackagesUpdate = computed(() => {
+			return settingsStore.isUnverifiedPackagesEnabled && props.communityPackage?.updateAvailable;
+		});
+		const hasVerifiedPackageUpdate = computed(() => {
+			const canUpdate = latestVerifiedVersion.value && import_semver.default.gt(latestVerifiedVersion.value || "", currVersion.value);
+			return settingsStore.isCommunityNodesFeatureEnabled && canUpdate;
+		});
+		const packageActions = [{
+			label: i18n.baseText("settings.communityNodes.viewDocsAction.label"),
+			value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS,
+			type: "external-link"
+		}, {
+			label: i18n.baseText("settings.communityNodes.uninstallAction.label"),
+			value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL
+		}];
+		async function onAction(value) {
+			if (!props.communityPackage) return;
+			switch (value) {
+				case COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS:
+					telemetry.track("user clicked to browse the cnr package documentation", {
+						package_name: props.communityPackage.packageName,
+						package_version: props.communityPackage.installedVersion
+					});
+					window.open(`${NPM_PACKAGE_DOCS_BASE_URL}${props.communityPackage.packageName}`, "_blank");
+					break;
+				case COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL:
+					openCommunityPackageUninstallConfirmModal(props.communityPackage.packageName);
+					break;
+				default: break;
+			}
+		}
+		function onUpdateClick() {
+			if (!props.communityPackage) return;
+			openCommunityPackageUpdateConfirmModal(props.communityPackage.packageName, "instance settings");
+		}
+		watch(() => props.communityPackage?.packageName, async (packageName) => {
+			if (packageName) {
+				await nodeTypesStore.loadNodeTypesIfNotLoaded();
+				const nodeType = nodeTypesStore.visibleNodeTypes.find((node) => node.name.includes(packageName));
+				const attributes = await nodeTypesStore.getCommunityNodeAttributes(nodeType?.name || "");
+				if (attributes?.npmVersion) latestVerifiedVersion.value = attributes.npmVersion;
+			}
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(_ctx.$style.cardContainer),
+				"data-test-id": "community-package-card"
+			}, [_ctx.loading ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(_ctx.$style.cardSkeleton)
+			}, [createVNode(unref(N8nLoading_default), {
+				class: normalizeClass(_ctx.$style.loader),
+				variant: "p",
+				rows: 1
+			}, null, 8, ["class"]), createVNode(unref(N8nLoading_default), {
+				class: normalizeClass(_ctx.$style.loader),
+				variant: "p",
+				rows: 1
+			}, null, 8, ["class"])], 2)) : _ctx.communityPackage ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(_ctx.$style.packageCard)
+			}, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.cardInfoContainer) }, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.cardTitle) }, [createVNode(unref(N8nText_default), {
+				bold: true,
+				size: "large"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(_ctx.communityPackage.packageName), 1)]),
+				_: 1
+			})], 2), createBaseVNode("div", { class: normalizeClass(_ctx.$style.cardSubtitle) }, [createVNode(unref(N8nText_default), {
+				bold: true,
+				size: "small",
+				color: "text-light"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("settings.communityNodes.packageNodes.label", { adjustToNumber: _ctx.communityPackage.installedNodes.length })) + ":\xA0 ", 1)]),
+				_: 1
+			}), createVNode(unref(N8nText_default), {
+				size: "small",
+				color: "text-light"
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.communityPackage.installedNodes, (node, index) => {
+					return openBlock(), createElementBlock("span", { key: node.name }, [createTextVNode(toDisplayString(node.name), 1), index != _ctx.communityPackage.installedNodes.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_1, ",")) : createCommentVNode("", true)]);
+				}), 128))]),
+				_: 1
+			})], 2)], 2), createBaseVNode("div", { class: normalizeClass(_ctx.$style.cardControlsContainer) }, [
+				createVNode(unref(N8nText_default), {
+					bold: true,
+					size: "large",
+					color: "text-light"
+				}, {
+					default: withCtx(() => [createTextVNode(" v" + toDisplayString(_ctx.communityPackage.installedVersion), 1)]),
+					_: 1
+				}),
+				_ctx.communityPackage.failedLoading === true ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+					key: 0,
+					placement: "top"
+				}, {
+					content: withCtx(() => [createBaseVNode("div", null, toDisplayString(unref(i18n).baseText("settings.communityNodes.failedToLoad.tooltip")), 1)]),
+					default: withCtx(() => [createVNode(unref(N8nIcon_default), {
+						icon: "triangle-alert",
+						color: "danger",
+						size: "large"
+					})]),
+					_: 1
+				})) : hasUnverifiedPackagesUpdate.value || hasVerifiedPackageUpdate.value ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+					key: 1,
+					placement: "top"
+				}, {
+					content: withCtx(() => [createBaseVNode("div", null, toDisplayString(unref(i18n).baseText("settings.communityNodes.updateAvailable.tooltip")), 1)]),
+					default: withCtx(() => [createVNode(unref(N8nButton_default), {
+						outline: "",
+						label: "Update",
+						onClick: onUpdateClick
+					})]),
+					_: 1
+				})) : (openBlock(), createBlock(unref(N8nTooltip_default), {
+					key: 2,
+					placement: "top"
+				}, {
+					content: withCtx(() => [createBaseVNode("div", null, toDisplayString(unref(i18n).baseText("settings.communityNodes.upToDate.tooltip")), 1)]),
+					default: withCtx(() => [createVNode(unref(N8nIcon_default), {
+						icon: "circle-check",
+						color: "text-light",
+						size: "large"
+					})]),
+					_: 1
+				})),
+				createBaseVNode("div", { class: normalizeClass(_ctx.$style.cardActions) }, [createVNode(unref(N8nActionToggle_default), {
+					actions: packageActions,
+					onAction
+				})], 2)
+			], 2)], 2)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+var CommunityPackageCard_vue_vue_type_style_index_0_lang_module_default = {
+	cardContainer: "_cardContainer_1jgjz_123",
+	packageCard: "_packageCard_1jgjz_131",
+	cardSkeleton: "_cardSkeleton_1jgjz_132",
+	loader: "_loader_1jgjz_146",
+	cardInfoContainer: "_cardInfoContainer_1jgjz_157",
+	cardTitle: "_cardTitle_1jgjz_162",
+	cardSubtitle: "_cardSubtitle_1jgjz_169",
+	cardControlsContainer: "_cardControlsContainer_1jgjz_174",
+	cardActions: "_cardActions_1jgjz_180"
+};
+var CommunityPackageCard_default = /* @__PURE__ */ __plugin_vue_export_helper_default(CommunityPackageCard_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": CommunityPackageCard_vue_vue_type_style_index_0_lang_module_default }]]);
+var PACKAGE_COUNT_THRESHOLD = 31;
+var SettingsCommunityNodesView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SettingsCommunityNodesView",
+	setup(__props) {
+		const loading = ref(false);
+		const pushConnection = usePushConnection({ router: useRouter() });
+		const pushStore = usePushConnectionStore();
+		const externalHooks = useExternalHooks();
+		const i18n = useI18n();
+		const telemetry = useTelemetry();
+		const toast = useToast();
+		const documentTitle = useDocumentTitle();
+		const communityNodesStore = useCommunityNodesStore();
+		const uiStore = useUIStore();
+		const settingsStore = useSettingsStore();
+		const getEmptyStateTitle = computed(() => {
+			if (!settingsStore.isUnverifiedPackagesEnabled) return i18n.baseText("settings.communityNodes.empty.verified.only.title");
+			return i18n.baseText("settings.communityNodes.empty.title");
+		});
+		const getEmptyStateDescription = computed(() => {
+			if (!settingsStore.isUnverifiedPackagesEnabled) return i18n.baseText("settings.communityNodes.empty.verified.only.description");
+			const packageCount = communityNodesStore.availablePackageCount;
+			return packageCount < PACKAGE_COUNT_THRESHOLD ? i18n.baseText("settings.communityNodes.empty.description.no-packages", { interpolate: { docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL } }) : i18n.baseText("settings.communityNodes.empty.description", { interpolate: {
+				docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+				count: (Math.floor(packageCount / 10) * 10).toString()
+			} });
+		});
+		const getEmptyStateButtonText = computed(() => {
+			if (!settingsStore.isUnverifiedPackagesEnabled) return "";
+			return i18n.baseText("settings.communityNodes.empty.installPackageLabel");
+		});
+		const actionBoxConfig = computed(() => {
+			return {
+				calloutText: "",
+				calloutTheme: void 0,
+				hideButton: false
+			};
+		});
+		const onClickEmptyStateButton = () => {
+			openInstallModal();
+		};
+		const openInstallModal = () => {
+			const telemetryPayload = { is_empty_state: communityNodesStore.getInstalledPackages.length === 0 };
+			telemetry.track("user clicked cnr install button", telemetryPayload);
+			externalHooks.run("settingsCommunityNodesView.openInstallModal", telemetryPayload);
+			uiStore.openModal(COMMUNITY_PACKAGE_INSTALL_MODAL_KEY);
+		};
+		onBeforeMount(() => {
+			pushConnection.initialize();
+			pushStore.pushConnect();
+		});
+		onMounted(async () => {
+			documentTitle.set(i18n.baseText("settings.communityNodes"));
+			try {
+				loading.value = true;
+				await communityNodesStore.fetchInstalledPackages();
+				const installedPackages = communityNodesStore.getInstalledPackages;
+				const packagesToUpdate = installedPackages.filter((p) => p.updateAvailable);
+				telemetry.track("user viewed cnr settings page", {
+					num_of_packages_installed: installedPackages.length,
+					installed_packages: installedPackages.map((p) => {
+						return {
+							package_name: p.packageName,
+							package_version: p.installedVersion,
+							package_nodes: p.installedNodes.map((node) => `${node.name}-v${node.latestVersion}`),
+							is_update_available: p.updateAvailable !== void 0
+						};
+					}),
+					packages_to_update: packagesToUpdate.map((p) => {
+						return {
+							package_name: p.packageName,
+							package_version_current: p.installedVersion,
+							package_version_available: p.updateAvailable
+						};
+					}),
+					number_of_updates_available: packagesToUpdate.length
+				});
+			} catch (error) {
+				toast.showError(error, i18n.baseText("settings.communityNodes.fetchError.title"), i18n.baseText("settings.communityNodes.fetchError.message"));
+			} finally {
+				loading.value = false;
+			}
+			try {
+				await communityNodesStore.fetchAvailableCommunityPackageCount();
+			} finally {
+				loading.value = false;
+			}
+		});
+		onBeforeUnmount(() => {
+			pushStore.pushDisconnect();
+			pushConnection.terminate();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.container) }, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.headingContainer) }, [createVNode(unref(N8nHeading_default), { size: "2xlarge" }, {
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("settings.communityNodes")), 1)]),
+				_: 1
+			}), unref(settingsStore).isUnverifiedPackagesEnabled && unref(communityNodesStore).getInstalledPackages.length > 0 && !loading.value ? (openBlock(), createBlock(unref(N8nButton_default), {
+				key: 0,
+				label: unref(i18n).baseText("settings.communityNodes.installModal.installButton.label"),
+				size: "large",
+				onClick: openInstallModal
+			}, null, 8, ["label"])) : createCommentVNode("", true)], 2), loading.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(_ctx.$style.cardsContainer)
+			}, [(openBlock(), createElementBlock(Fragment, null, renderList(2, (n) => {
+				return createVNode(CommunityPackageCard_default, {
+					key: "index-" + n,
+					loading: true
+				});
+			}), 64))], 2)) : unref(communityNodesStore).getInstalledPackages.length === 0 ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(_ctx.$style.actionBoxContainer)
+			}, [createVNode(unref(N8nActionBox_default), {
+				heading: getEmptyStateTitle.value,
+				description: getEmptyStateDescription.value,
+				"button-text": getEmptyStateButtonText.value,
+				"button-disabled": !unref(settingsStore).isUnverifiedPackagesEnabled,
+				"callout-text": actionBoxConfig.value.calloutText,
+				"callout-theme": actionBoxConfig.value.calloutTheme,
+				"onClick:button": onClickEmptyStateButton
+			}, null, 8, [
+				"heading",
+				"description",
+				"button-text",
+				"button-disabled",
+				"callout-text",
+				"callout-theme"
+			])], 2)) : (openBlock(), createElementBlock("div", {
+				key: 2,
+				class: normalizeClass(_ctx.$style.cardsContainer)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(communityNodesStore).getInstalledPackages, (communityPackage) => {
+				return openBlock(), createBlock(CommunityPackageCard_default, {
+					key: communityPackage.packageName,
+					"community-package": communityPackage
+				}, null, 8, ["community-package"]);
+			}), 128))], 2))], 2);
+		};
+	}
+});
+var SettingsCommunityNodesView_vue_vue_type_style_index_0_lang_module_default = {
+	container: "_container_it0uc_123",
+	headingContainer: "_headingContainer_it0uc_131",
+	loadingContainer: "_loadingContainer_it0uc_136",
+	actionBoxContainer: "_actionBoxContainer_it0uc_141",
+	cardsContainer: "_cardsContainer_it0uc_145"
+};
+var SettingsCommunityNodesView_default = /* @__PURE__ */ __plugin_vue_export_helper_default(SettingsCommunityNodesView_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": SettingsCommunityNodesView_vue_vue_type_style_index_0_lang_module_default }]]);
+export { SettingsCommunityNodesView_default as default };