n8n-editor-ui 1.118.1 → 1.119.0

package/README.md

@@ -41,7 +41,7 @@ pnpm lint
 ### Run your end-to-end tests
 
 ```
-pnpm test:e2e
+pnpm --filter=n8n-playwright test:local
 ```
 
 ### Run your unit tests

package/dist/assets/{AddDataTableModal-i8GQtKYX.js → AddDataTableModal-78UiDOZ6.js}

@@ -1,25 +1,25 @@
 import { Gt as unref, It as ref, M as createVNode, P as defineComponent, Sn as toDisplayString, T as createBlock, Z as onMounted, _n as normalizeClass, bt as withCtx, et as openBlock, m as withKeys, w as createBaseVNode } from "./vue.runtime.esm-bundler-DDuXT-9r.js";
-import { gt as useI18n } from "./_MapCache-BGBKpT5S.js";
-import { In as N8nButton_default, Y as N8nInputLabel_default, bt as N8nInput_default } from "./src-Cl0xZtCE.js";
+import { gt as useI18n } from "./_MapCache-Byd-DTfo.js";
+import { Ct as N8nInput_default, Ln as N8nButton_default, Y as N8nInputLabel_default } from "./src-D6S9Khji.js";
 import "./en-BYTsM8fR.js";
 import "./preload-helper-CR0ecmWK.js";
 import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
-import { b as useRouter, y as useRoute } from "./truncate-Dc79aML5.js";
-import "./icon-C8yfF1LY.js";
-import "./overlay-DeoWJ8oB.js";
+import { b as useRouter, y as useRoute } from "./truncate-DGRsht-H.js";
+import "./icon-DhADuA9N.js";
+import "./overlay-B8MMvNgs.js";
 import "./empty-BuGRxzl4.js";
-import "./dialog-B1U4ND70.js";
-import { Li as useUIStore, t as useTelemetry } from "./useTelemetry-BxbCYDca.js";
-import { t as useToast } from "./useToast-CKD06lpn.js";
+import "./dialog-BMoy5MDa.js";
+import { Ni as useUIStore, t as useTelemetry } from "./useTelemetry-EOV0Llso.js";
+import { t as useToast } from "./useToast-BlMNYwds.js";
 import "./sanitize-html-BuXr7o4T.js";
 import "./path-browserify-DsmB_HMK.js";
-import { Vn as DATA_TABLE_DETAILS, ir as PROJECT_DATA_TABLES } from "./constants-B1JYxPAR.js";
-import "./merge-Db6rb1_m.js";
+import { Vn as DATA_TABLE_DETAILS, ir as PROJECT_DATA_TABLES } from "./constants-DvlTm3U4.js";
+import "./merge-CKEa8BM2.js";
 import "./dateformat-D7TIhVd4.js";
-import "./useDebounce-BRhQZVIC.js";
-import "./useExternalHooks-ChElZw8W.js";
-import { t as useDataTableStore } from "./dataTable.store-Bgg7dsRy.js";
-import { t as Modal_default } from "./Modal-B8k7lYVM.js";
+import "./useDebounce-BgcdaJ78.js";
+import "./useExternalHooks-SxBXYVNW.js";
+import { t as useDataTableStore } from "./dataTable.store-u9fGWest.js";
+import { t as Modal_default } from "./Modal-DwutFKNY.js";
 var AddDataTableModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "AddDataTableModal",
 	props: { modalName: {} },
@@ -91,16 +91,16 @@ var AddDataTableModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					_: 1
 				}, 8, ["label"])], 2)]),
 				footer: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.footer) }, [createVNode(unref(N8nButton_default), {
-					disabled: !dataTableName.value,
-					label: unref(i18n).baseText("generic.create"),
-					"data-test-id": "confirm-add-data-table-button",
-					onClick: onSubmit
-				}, null, 8, ["disabled", "label"]), createVNode(unref(N8nButton_default), {
 					type: "secondary",
 					label: unref(i18n).baseText("generic.cancel"),
 					"data-test-id": "cancel-add-data-table-button",
 					onClick: onCancel
-				}, null, 8, ["label"])], 2)]),
+				}, null, 8, ["label"]), createVNode(unref(N8nButton_default), {
+					disabled: !dataTableName.value,
+					label: unref(i18n).baseText("generic.create"),
+					"data-test-id": "confirm-add-data-table-button",
+					onClick: onSubmit
+				}, null, 8, ["disabled", "label"])], 2)]),
 				_: 1
 			}, 8, ["name"]);
 		};

package/dist/assets/AnimatedSpinner-CoP6Lyme.css

@@ -0,0 +1,39 @@
+
+@keyframes fade-5d3fc1df {
+0% {
+		opacity: 100;
+}
+20% {
+		opacity: 0;
+}
+40% {
+		opacity: 100;
+}
+}
+.line[data-v-5d3fc1df] {
+	animation: fade-5d3fc1df 1.6s infinite;
+}
+.one[data-v-5d3fc1df] {
+	animation-delay: 0s;
+}
+.two[data-v-5d3fc1df] {
+	animation-delay: 0.2s;
+}
+.three[data-v-5d3fc1df] {
+	animation-delay: 0.4s;
+}
+.four[data-v-5d3fc1df] {
+	animation-delay: 0.6s;
+}
+.five[data-v-5d3fc1df] {
+	animation-delay: 0.8s;
+}
+.six[data-v-5d3fc1df] {
+	animation-delay: 1s;
+}
+.seven[data-v-5d3fc1df] {
+	animation-delay: 1.2s;
+}
+.eight[data-v-5d3fc1df] {
+	animation-delay: 1.4s;
+}

package/dist/assets/{AnimatedSpinner-DRB4A7Dx.js → AnimatedSpinner-Dd4F9nQ8.js}

@@ -9,7 +9,7 @@ var _hoisted_1 = {
 	xmlns: "http://www.w3.org/2000/svg"
 };
 function _sfc_render(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [createStaticVNode("<g data-v-7870f87e><path d=\"M7 0L7 3\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line one\" data-v-7870f87e></path><path d=\"M11.9497 2.05031L9.82837 4.17163\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line two\" data-v-7870f87e></path><path d=\"M14 7L11 7\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line three\" data-v-7870f87e></path><path d=\"M11.9497 11.9497L9.82839 9.82839\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line four\" data-v-7870f87e></path><path d=\"M7 14L7 11\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line five\" data-v-7870f87e></path><path d=\"M0 7L3 7\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line seven\" data-v-7870f87e></path><path d=\"M2.05031 2.05031L4.17163 4.17163\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line eight\" data-v-7870f87e></path><path d=\"M2.05029 11.9497L4.17161 9.82839\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line six\" data-v-7870f87e></path></g>", 1)]));
+	return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [createStaticVNode("<g data-v-5d3fc1df><path d=\"M7 0L7 3\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line one\" data-v-5d3fc1df></path><path d=\"M11.9497 2.05031L9.82837 4.17163\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line two\" data-v-5d3fc1df></path><path d=\"M14 7L11 7\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line three\" data-v-5d3fc1df></path><path d=\"M11.9497 11.9497L9.82839 9.82839\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line four\" data-v-5d3fc1df></path><path d=\"M7 14L7 11\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line five\" data-v-5d3fc1df></path><path d=\"M0 7L3 7\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line seven\" data-v-5d3fc1df></path><path d=\"M2.05031 2.05031L4.17163 4.17163\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line eight\" data-v-5d3fc1df></path><path d=\"M2.05029 11.9497L4.17161 9.82839\" stroke=\"currentColor\" stroke-width=\"2\" class=\"line six\" data-v-5d3fc1df></path></g>", 1)]));
 }
-var AnimatedSpinner_default = /* @__PURE__ */ __plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7870f87e"]]);
+var AnimatedSpinner_default = /* @__PURE__ */ __plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5d3fc1df"]]);
 export { AnimatedSpinner_default as t };

package/dist/assets/{AnnotationTagsDropdown.ee-DV_Mobmt.js → AnnotationTagsDropdown.ee-B5SGfmxY.js}

@@ -1,7 +1,6 @@
 import { C as computed, P as defineComponent, T as createBlock, et as openBlock } from "./vue.runtime.esm-bundler-DDuXT-9r.js";
-import { Li as useUIStore, gn as useAnnotationTagsStore } from "./useTelemetry-BxbCYDca.js";
-import { uo as ANNOTATION_TAGS_MANAGER_MODAL_KEY } from "./constants-B1JYxPAR.js";
-import { t as TagsDropdown_default } from "./TagsDropdown-B9w42ULo.js";
+import { Ni as useUIStore, gn as useAnnotationTagsStore, jo as ANNOTATION_TAGS_MANAGER_MODAL_KEY } from "./useTelemetry-EOV0Llso.js";
+import { t as TagsDropdown_default } from "./TagsDropdown-D6CYk5R8.js";
 var AnnotationTagsDropdown_ee_default = /* @__PURE__ */ defineComponent({
 	__name: "AnnotationTagsDropdown.ee",
 	props: {

package/dist/assets/{AuthView-BucJoBVs.js → AuthView-CaCXt20h.js}

@@ -1,11 +1,11 @@
 import { D as createElementBlock, E as createCommentVNode, Gt as unref, M as createVNode, P as defineComponent, Sn as toDisplayString, T as createBlock, W as mergeProps, _n as normalizeClass, bt as withCtx, et as openBlock, j as createTextVNode, w as createBaseVNode } from "./vue.runtime.esm-bundler-DDuXT-9r.js";
-import { gt as useI18n } from "./_MapCache-BGBKpT5S.js";
-import { Fn as N8nText_default, In as N8nButton_default, L as N8nFormBox_default, M as N8nLogo_default } from "./src-Cl0xZtCE.js";
+import { gt as useI18n } from "./_MapCache-Byd-DTfo.js";
+import { In as N8nText_default, L as N8nFormBox_default, Ln as N8nButton_default, M as N8nLogo_default } from "./src-D6S9Khji.js";
 import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
-import { y as useRoute } from "./truncate-Dc79aML5.js";
-import { zo as useSettingsStore } from "./useTelemetry-BxbCYDca.js";
-import { t as useToast } from "./useToast-CKD06lpn.js";
-import { n as useSSOStore } from "./sso.store-BSJgAn6v.js";
+import { y as useRoute } from "./truncate-DGRsht-H.js";
+import { Ro as useSettingsStore } from "./useTelemetry-EOV0Llso.js";
+import { t as useToast } from "./useToast-BlMNYwds.js";
+import { n as useSSOStore } from "./sso.store-qzj82Xj4.js";
 var SSOLogin_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "SSOLogin",
 	setup(__props) {

package/dist/assets/{ChangePasswordView-mVWAZ3kL.js → ChangePasswordView-sh87mWR6.js}

@@ -1,23 +1,23 @@
 import { E as createCommentVNode, It as ref, P as defineComponent, T as createBlock, Z as onMounted, et as openBlock } from "./vue.runtime.esm-bundler-DDuXT-9r.js";
-import { gt as useI18n } from "./_MapCache-BGBKpT5S.js";
-import "./src-Cl0xZtCE.js";
+import { gt as useI18n } from "./_MapCache-Byd-DTfo.js";
+import "./src-D6S9Khji.js";
 import "./en-BYTsM8fR.js";
 import "./preload-helper-CR0ecmWK.js";
 import "./_plugin-vue_export-helper-BwBpWJRZ.js";
-import { b as useRouter } from "./truncate-Dc79aML5.js";
-import "./icon-C8yfF1LY.js";
+import { b as useRouter } from "./truncate-DGRsht-H.js";
+import "./icon-DhADuA9N.js";
 import "./empty-BuGRxzl4.js";
-import { ir as useUsersStore } from "./useTelemetry-BxbCYDca.js";
-import { t as useToast } from "./useToast-CKD06lpn.js";
+import { er as useUsersStore } from "./useTelemetry-EOV0Llso.js";
+import { t as useToast } from "./useToast-BlMNYwds.js";
 import "./sanitize-html-BuXr7o4T.js";
 import "./path-browserify-DsmB_HMK.js";
-import { co as VIEWS, qs as MFA_AUTHENTICATION_CODE_INPUT_MAX_LENGTH } from "./constants-B1JYxPAR.js";
-import "./merge-Db6rb1_m.js";
+import { Qs as MFA_AUTHENTICATION_CODE_INPUT_MAX_LENGTH, mo as VIEWS } from "./constants-DvlTm3U4.js";
+import "./merge-CKEa8BM2.js";
 import "./dateformat-D7TIhVd4.js";
-import "./useDebounce-BRhQZVIC.js";
-import "./useExternalHooks-ChElZw8W.js";
-import "./sso.store-BSJgAn6v.js";
-import { t as AuthView_default } from "./AuthView-BucJoBVs.js";
+import "./useDebounce-BgcdaJ78.js";
+import "./useExternalHooks-SxBXYVNW.js";
+import "./sso.store-qzj82Xj4.js";
+import { t as AuthView_default } from "./AuthView-CaCXt20h.js";
 var ChangePasswordView_default = /* @__PURE__ */ defineComponent({
 	__name: "ChangePasswordView",
 	setup(__props) {

package/dist/assets/ChatAgentsView-4SiYQ9YJ.js

@@ -0,0 +1,339 @@
+import { C as computed, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, M as createVNode, P as defineComponent, Sn as toDisplayString, T as createBlock, _ as Fragment, _n as normalizeClass, _t as watch, bt as withCtx, et as openBlock, h as withModifiers, it as renderList, j as createTextVNode, w as createBaseVNode } from "./vue.runtime.esm-bundler-DDuXT-9r.js";
+import { M as useMediaQuery } from "./_MapCache-Byd-DTfo.js";
+import { Ct as N8nInput_default, G as N8nOption_default, In as N8nText_default, Ln as N8nButton_default, Tt as N8nIconButton_default, W as N8nSelect_default, zn as N8nIcon_default } from "./src-D6S9Khji.js";
+import "./en-BYTsM8fR.js";
+import "./preload-helper-CR0ecmWK.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import { b as useRouter, p as RouterLink } from "./truncate-DGRsht-H.js";
+import "./icon-DhADuA9N.js";
+import "./overlay-B8MMvNgs.js";
+import "./empty-BuGRxzl4.js";
+import { t as useMessage } from "./useMessage-Ceo97RRX.js";
+import "./dialog-BMoy5MDa.js";
+import { Ni as useUIStore, er as useUsersStore } from "./useTelemetry-EOV0Llso.js";
+import { t as useToast } from "./useToast-BlMNYwds.js";
+import "./sanitize-html-BuXr7o4T.js";
+import "./path-browserify-DsmB_HMK.js";
+import { No as MODAL_CONFIRM, mo as VIEWS } from "./constants-DvlTm3U4.js";
+import "./merge-CKEa8BM2.js";
+import "./dateformat-D7TIhVd4.js";
+import "./useDebounce-BgcdaJ78.js";
+import "./useExternalHooks-SxBXYVNW.js";
+import "./retry-sDkwzrPY.js";
+import "./Modal-DwutFKNY.js";
+import "./CredentialIcon-DS3l06t2.js";
+import { t as TimeAgo_default } from "./TimeAgo-Gv5h1Utx.js";
+import { a as MOBILE_MEDIA_QUERY } from "./constants-CPQyU8WO.js";
+import { i as filterAndSortAgents, n as ChatAgentAvatar_default, r as useChatStore, s as getAgentRoute, t as useChatHubSidebarState, u as stringifyModel } from "./useChatHubSidebarState-CM9tokIj.js";
+import { n as AgentEditorModal_default, t as useChatCredentials } from "./useChatCredentials-CMV_NA0l.js";
+var ChatAgentCard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ChatAgentCard",
+	props: { agent: {} },
+	emits: ["edit", "delete"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(RouterLink), {
+				to: unref(getAgentRoute)(_ctx.agent.model),
+				class: normalizeClass(_ctx.$style.card)
+			}, {
+				default: withCtx(() => [
+					createVNode(ChatAgentAvatar_default, {
+						agent: _ctx.agent,
+						size: "lg"
+					}, null, 8, ["agent"]),
+					createBaseVNode("div", { class: normalizeClass(_ctx.$style.content) }, [
+						createVNode(unref(N8nText_default), {
+							tag: "h3",
+							size: "medium",
+							bold: "",
+							class: normalizeClass(_ctx.$style.title)
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(_ctx.agent.name), 1)]),
+							_: 1
+						}, 8, ["class"]),
+						createVNode(unref(N8nText_default), {
+							size: "small",
+							color: "text-light",
+							class: normalizeClass(_ctx.$style.description)
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(_ctx.agent.description || "No description"), 1)]),
+							_: 1
+						}, 8, ["class"]),
+						createBaseVNode("div", { class: normalizeClass(_ctx.$style.metadata) }, [
+							createVNode(unref(N8nText_default), {
+								size: "small",
+								color: "text-light"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(_ctx.agent.model.provider === "n8n" ? "n8n workflow" : "Custom agent"), 1)]),
+								_: 1
+							}),
+							_ctx.agent.updatedAt ? (openBlock(), createBlock(unref(N8nText_default), {
+								key: 0,
+								size: "small",
+								color: "text-light"
+							}, {
+								default: withCtx(() => [_cache[2] || (_cache[2] = createTextVNode(" Last updated ")), createVNode(TimeAgo_default, { date: _ctx.agent.updatedAt }, null, 8, ["date"])]),
+								_: 1
+							})) : createCommentVNode("", true),
+							_ctx.agent.createdAt ? (openBlock(), createBlock(unref(N8nText_default), {
+								key: 1,
+								size: "small",
+								color: "text-light"
+							}, {
+								default: withCtx(() => [_cache[3] || (_cache[3] = createTextVNode(" Created ")), createVNode(TimeAgo_default, { date: _ctx.agent.createdAt }, null, 8, ["date"])]),
+								_: 1
+							})) : createCommentVNode("", true)
+						], 2)
+					], 2),
+					createBaseVNode("div", { class: normalizeClass(_ctx.$style.actions) }, [createVNode(unref(N8nIconButton_default), {
+						icon: "pen",
+						type: "tertiary",
+						size: "medium",
+						title: "Edit",
+						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("edit"), ["prevent"]))
+					}), _ctx.agent.model.provider === "custom-agent" ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+						key: 0,
+						icon: "trash-2",
+						type: "tertiary",
+						size: "medium",
+						title: "More options",
+						onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("delete"), ["prevent"]))
+					})) : createCommentVNode("", true)], 2)
+				]),
+				_: 1
+			}, 8, ["to", "class"]);
+		};
+	}
+});
+var ChatAgentCard_vue_vue_type_style_index_0_lang_module_default = {
+	card: "_card_1q9hn_123",
+	avatar: "_avatar_1q9hn_139",
+	content: "_content_1q9hn_143",
+	title: "_title_1q9hn_151",
+	description: "_description_1q9hn_157",
+	metadata: "_metadata_1q9hn_163",
+	actions: "_actions_1q9hn_180"
+};
+var ChatAgentCard_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatAgentCard_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatAgentCard_vue_vue_type_style_index_0_lang_module_default }]]);
+var ChatAgentsView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ChatAgentsView",
+	setup(__props) {
+		const chatStore = useChatStore();
+		const uiStore = useUIStore();
+		const toast = useToast();
+		const message = useMessage();
+		const usersStore = useUsersStore();
+		const sidebar = useChatHubSidebarState();
+		const router = useRouter();
+		const isMobileDevice$1 = useMediaQuery(MOBILE_MEDIA_QUERY);
+		const editingAgentId = ref(void 0);
+		const agentFilter = ref({
+			search: "",
+			provider: "",
+			sortBy: "updatedAt"
+		});
+		const { credentialsByProvider } = useChatCredentials(usersStore.currentUserId ?? "anonymous");
+		const readyToShowList = computed(() => chatStore.agentsReady);
+		const allModels = computed(() => chatStore.agents.n8n.models.concat(chatStore.agents["custom-agent"].models));
+		const agents = computed(() => filterAndSortAgents(allModels.value, agentFilter.value));
+		const providerOptions = [
+			{
+				label: "All",
+				value: ""
+			},
+			{
+				label: "Custom agents",
+				value: "custom-agent"
+			},
+			{
+				label: "n8n workflows",
+				value: "n8n"
+			}
+		];
+		const sortOptions = [{
+			label: "Sort by last updated",
+			value: "updatedAt"
+		}, {
+			label: "Sort by created",
+			value: "createdAt"
+		}];
+		function handleCreateAgent() {
+			chatStore.currentEditingAgent = null;
+			editingAgentId.value = void 0;
+			uiStore.openModal("agentEditor");
+		}
+		async function handleEditAgent(model) {
+			if (model.provider === "n8n") {
+				const routeData = router.resolve({
+					name: VIEWS.WORKFLOW,
+					params: { name: model.workflowId }
+				});
+				window.open(routeData.href, "_blank");
+				return;
+			}
+			if (model.provider === "custom-agent") try {
+				await chatStore.fetchCustomAgent(model.agentId);
+				editingAgentId.value = model.agentId;
+				uiStore.openModal("agentEditor");
+			} catch (error) {
+				toast.showError(error, "Failed to load agent");
+			}
+		}
+		function handleCloseAgentEditor() {
+			editingAgentId.value = void 0;
+		}
+		async function handleAgentCreatedOrUpdated() {
+			editingAgentId.value = void 0;
+		}
+		async function handleDeleteAgent(agentId) {
+			if (await message.confirm("Are you sure you want to delete this agent?", "Delete agent", {
+				confirmButtonText: "Delete",
+				cancelButtonText: "Cancel"
+			}) !== "confirm" || !credentialsByProvider.value) return;
+			try {
+				await chatStore.deleteCustomAgent(agentId, credentialsByProvider.value);
+				toast.showMessage({
+					type: "success",
+					title: "Agent deleted successfully"
+				});
+			} catch (error) {
+				toast.showError(error, "Could not delete the agent");
+			}
+		}
+		watch(credentialsByProvider, (credentials) => {
+			if (credentials) chatStore.fetchAgents(credentials);
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([_ctx.$style.container, { [_ctx.$style.isMobileDevice]: unref(isMobileDevice$1) }]) }, [
+				createBaseVNode("div", { class: normalizeClass(_ctx.$style.header) }, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.headerContent) }, [createVNode(unref(N8nText_default), {
+					tag: "h1",
+					size: "xlarge",
+					bold: ""
+				}, {
+					default: withCtx(() => _cache[4] || (_cache[4] = [createTextVNode("Custom Agents")])),
+					_: 1
+				}), createVNode(unref(N8nText_default), { color: "text-light" }, {
+					default: withCtx(() => _cache[5] || (_cache[5] = [createTextVNode(" Use n8n workflow agents or create custom AI agents with specific instructions and behaviors ")])),
+					_: 1
+				})], 2), createVNode(unref(N8nButton_default), {
+					icon: "plus",
+					type: "primary",
+					size: "large",
+					onClick: handleCreateAgent
+				}, {
+					default: withCtx(() => _cache[6] || (_cache[6] = [createTextVNode(" New Agent ")])),
+					_: 1
+				})], 2),
+				readyToShowList.value && allModels.value.length > 0 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(_ctx.$style.controls)
+				}, [
+					createVNode(unref(N8nInput_default), {
+						modelValue: agentFilter.value.search,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => agentFilter.value.search = $event),
+						class: normalizeClass(_ctx.$style.search),
+						placeholder: "Search",
+						clearable: ""
+					}, {
+						prefix: withCtx(() => [createVNode(unref(N8nIcon_default), { icon: "search" })]),
+						_: 1
+					}, 8, ["modelValue", "class"]),
+					createVNode(unref(N8nSelect_default), {
+						modelValue: agentFilter.value.provider,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => agentFilter.value.provider = $event),
+						class: normalizeClass(_ctx.$style.filter)
+					}, {
+						default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(providerOptions, (option) => {
+							return createVNode(unref(N8nOption_default), {
+								key: String(option.value),
+								label: option.label,
+								value: option.value
+							}, null, 8, ["label", "value"]);
+						}), 64))]),
+						_: 1
+					}, 8, ["modelValue", "class"]),
+					createVNode(unref(N8nSelect_default), {
+						modelValue: agentFilter.value.sortBy,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => agentFilter.value.sortBy = $event),
+						class: normalizeClass(_ctx.$style.sort),
+						placeholder: "Sort by"
+					}, {
+						default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(sortOptions, (option) => {
+							return createVNode(unref(N8nOption_default), {
+								key: option.value,
+								label: option.label,
+								value: option.value
+							}, null, 8, ["label", "value"]);
+						}), 64))]),
+						_: 1
+					}, 8, ["modelValue", "class"])
+				], 2)) : createCommentVNode("", true),
+				!readyToShowList.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [], 64)) : allModels.value.length === 0 ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(_ctx.$style.empty)
+				}, [createVNode(unref(N8nText_default), {
+					color: "text-light",
+					size: "medium"
+				}, {
+					default: withCtx(() => _cache[7] || (_cache[7] = [createTextVNode(" No agents available. Create your first custom agent to get started. ")])),
+					_: 1
+				})], 2)) : agents.value.length === 0 ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(_ctx.$style.empty)
+				}, [createVNode(unref(N8nText_default), {
+					color: "text-light",
+					size: "medium"
+				}, {
+					default: withCtx(() => _cache[8] || (_cache[8] = [createTextVNode(" No agents match your search criteria. ")])),
+					_: 1
+				})], 2)) : (openBlock(), createElementBlock("div", {
+					key: 4,
+					class: normalizeClass(_ctx.$style.agentsGrid)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(agents.value, (agent) => {
+					return openBlock(), createBlock(ChatAgentCard_default, {
+						key: unref(stringifyModel)(agent.model),
+						agent,
+						onEdit: ($event) => handleEditAgent(agent.model),
+						onDelete: ($event) => agent.model.provider === "custom-agent" ? handleDeleteAgent(agent.model.agentId) : void 0
+					}, null, 8, [
+						"agent",
+						"onEdit",
+						"onDelete"
+					]);
+				}), 128))], 2)),
+				unref(credentialsByProvider) ? (openBlock(), createBlock(AgentEditorModal_default, {
+					key: 5,
+					"agent-id": editingAgentId.value,
+					credentials: unref(credentialsByProvider),
+					onCreateCustomAgent: handleAgentCreatedOrUpdated,
+					onClose: handleCloseAgentEditor
+				}, null, 8, ["agent-id", "credentials"])) : createCommentVNode("", true),
+				!unref(sidebar).isStatic.value ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+					key: 6,
+					class: normalizeClass(_ctx.$style.menuButton),
+					type: "secondary",
+					icon: "panel-left",
+					text: "",
+					"icon-size": "large",
+					onClick: _cache[3] || (_cache[3] = ($event) => unref(sidebar).toggleOpen(true))
+				}, null, 8, ["class"])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+var ChatAgentsView_vue_vue_type_style_index_0_lang_module_default = {
+	container: "_container_15w0c_123",
+	menuButton: "_menuButton_15w0c_135",
+	isMobileDevice: "_isMobileDevice_15w0c_141",
+	header: "_header_15w0c_145",
+	headerContent: "_headerContent_15w0c_153",
+	controls: "_controls_15w0c_159",
+	search: "_search_15w0c_165",
+	filter: "_filter_15w0c_170",
+	sort: "_sort_15w0c_174",
+	empty: "_empty_15w0c_178",
+	agentsGrid: "_agentsGrid_15w0c_187"
+};
+var ChatAgentsView_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatAgentsView_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatAgentsView_vue_vue_type_style_index_0_lang_module_default }]]);
+export { ChatAgentsView_default as default };