n8n-editor-ui 1.118.1 → 1.119.1

package/dist/assets/{ChatView-BOWzOn2x.js → ChatView-BlkLzP1X.js}

@@ -1,171 +1,55 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/es-BO7MlKL2.js","assets/core-BfCr8skN.js","assets/chunk-6z4oVpB-.js","assets/languageModules-B8UNBljm.js","assets/xml-CcxXd9zY.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/es-BazDU8Wd.js","assets/core-CIkXL_1D.js","assets/chunk-6z4oVpB-.js","assets/languageModules-CNluY7w0.js","assets/xml-F7krcG3E.js"])))=>i.map(i=>d[i]);
 import { o as __toESM } from "./chunk-6z4oVpB-.js";
-import { C as computed, D as createElementBlock, E as createCommentVNode, G as nextTick, Gt as unref, It as ref, M as createVNode, P as defineComponent, Sn as toDisplayString, T as createBlock, Z as onMounted, _ as Fragment, _n as normalizeClass, _t as watch, bt as withCtx, et as openBlock, h as withModifiers, it as renderList, j as createTextVNode, mt as useTemplateRef, q as onBeforeMount, w as createBaseVNode, yn as normalizeStyle } from "./vue.runtime.esm-bundler-DDuXT-9r.js";
-import { I as useSpeechRecognition, L as useSpeechSynthesis, M as useMediaQuery, P as useScroll, g as onClickOutside, gt as useI18n, j as useLocalStorage } from "./_MapCache-BGBKpT5S.js";
-import { Ct as N8nIconButton_default, Fn as N8nText_default, G as N8nOption_default, In as N8nButton_default, Nn as N8nHeading_default, Rn as N8nIcon_default, W as N8nSelect_default, bt as N8nInput_default, gt as require_markdown_it_link_attributes, ht as N8nTooltip_default, i as N8nScrollArea_default, k as N8nNavigationDropdown_default } from "./src-Cl0xZtCE.js";
+import { C as computed, D as createElementBlock, E as createCommentVNode, G as nextTick, 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, mt as useTemplateRef, q as onBeforeMount, w as createBaseVNode, yn as normalizeStyle } from "./vue.runtime.esm-bundler-DDuXT-9r.js";
+import { I as useSpeechRecognition, L as useSpeechSynthesis, M as useMediaQuery, P as useScroll, gt as useI18n, j as useLocalStorage } from "./_MapCache-Byd-DTfo.js";
+import { Ct as N8nInput_default, In as N8nText_default, Ln as N8nButton_default, Pn as N8nHeading_default, Tt as N8nIconButton_default, i as N8nScrollArea_default, mt as N8nLink_default, vt as N8nTooltip_default, yt as require_markdown_it_link_attributes, zn as N8nIcon_default } from "./src-D6S9Khji.js";
 import "./en-BYTsM8fR.js";
 import { t as __vitePreload } from "./preload-helper-CR0ecmWK.js";
 import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
-import { b as useRouter, x as createEventBus, 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 { Ht as useCredentialsStore, Li as useUIStore, ir as useUsersStore, kn as useDocumentTitle, yc as v4_default } from "./useTelemetry-BxbCYDca.js";
-import { t as useToast } from "./useToast-CKD06lpn.js";
+import "./useMessage-Ceo97RRX.js";
+import "./dialog-BMoy5MDa.js";
+import { Ni as useUIStore, Tn as useDocumentTitle, er as useUsersStore, xc as v4_default } from "./useTelemetry-EOV0Llso.js";
+import { t as useToast } from "./useToast-BlMNYwds.js";
 import "./sanitize-html-BuXr7o4T.js";
 import "./path-browserify-DsmB_HMK.js";
-import { Go as LOCAL_STORAGE_CHAT_HUB_CREDENTIALS, Ko as LOCAL_STORAGE_CHAT_HUB_SELECTED_MODEL, Lr as nullType, Rr as recordType, cr as PROVIDER_CREDENTIAL_TYPE_MAP, lr as chatHubConversationModelSchema, ur as chatHubProviderSchema, zr as stringType } from "./constants-B1JYxPAR.js";
-import "./merge-Db6rb1_m.js";
+import { Zo as LOCAL_STORAGE_CHAT_HUB_SELECTED_MODEL, cr as PROVIDER_CREDENTIAL_TYPE_MAP, lr as chatHubConversationModelSchema, mo as VIEWS } from "./constants-DvlTm3U4.js";
+import "./merge-CKEa8BM2.js";
 import "./dateformat-D7TIhVd4.js";
-import "./useDebounce-BRhQZVIC.js";
-import "./useExternalHooks-ChElZw8W.js";
+import "./useDebounce-BgcdaJ78.js";
+import "./useExternalHooks-SxBXYVNW.js";
 import "./retry-sDkwzrPY.js";
-import { t as useClipboard } from "./useClipboard-BPg-srt1.js";
-import { t as Modal_default } from "./Modal-B8k7lYVM.js";
-import { t as CredentialIcon_default } from "./CredentialIcon-BmzfYSyO.js";
-import { a as providerDisplayNames, i as MOBILE_MEDIA_QUERY, r as CHAT_VIEW, t as CHAT_CONVERSATION_VIEW } from "./constants-DlQs6Cav.js";
-import { n as useChatStore, r as findOneFromModelsResponse, t as useChatHubSidebarState } from "./useChatHubSidebarState-CTFhoZRQ.js";
-import { t as VueMarkdown_default } from "./VueMarkdown-70GnkI0W.js";
-var ModelSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "ModelSelector",
-	props: {
-		models: {},
-		selectedModel: {},
-		credentialsName: {}
-	},
-	emits: ["change", "configure"],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const dropdownRef = useTemplateRef("dropdownRef");
-		const menu = computed(() => chatHubProviderSchema.options.filter((provider) => provider !== "n8n").map((provider) => {
-			const models = props.models?.[provider].models ?? [];
-			const error = props.models?.[provider].error;
-			const modelOptions = models.length > 0 ? models.map((model) => {
-				return {
-					id: `${provider}::${model.provider === "n8n" ? model.workflowId : model.model}`,
-					title: model.name,
-					disabled: false
-				};
-			}) : error ? [{
-				id: `${provider}::error`,
-				value: null,
-				disabled: true,
-				title: error
-			}] : [];
-			const submenu = modelOptions.concat([...provider !== "n8n" && modelOptions.length > 0 ? [{
-				isDivider: true,
-				id: "divider"
-			}] : []]);
-			if (provider !== "n8n") submenu.push({
-				id: `${provider}::configure`,
-				icon: "settings",
-				title: "Configure credentials...",
-				disabled: false
-			});
-			return {
-				id: provider,
-				hidden: true,
-				title: providerDisplayNames[provider],
-				submenu
-			};
-		}));
-		const selectedLabel = computed(() => {
-			if (!props.selectedModel) return "Select model";
-			return props.selectedModel.name;
-		});
-		function onSelect(id) {
-			const [provider, identifier] = id.split("::");
-			const parsedProvider = chatHubProviderSchema.safeParse(provider).data;
-			if (!parsedProvider) return;
-			if (identifier === "configure" && parsedProvider !== "n8n") {
-				emit("configure", parsedProvider);
-				return;
-			}
-			const model = parsedProvider === "n8n" ? null : identifier;
-			const workflowId = parsedProvider === "n8n" ? identifier : null;
-			const selected$1 = props.models?.[parsedProvider].models.find((m) => m.provider === "n8n" ? m.workflowId === workflowId : m.model === model);
-			if (!selected$1) return;
-			emit("change", selected$1);
-		}
-		onClickOutside(computed(() => dropdownRef.value?.$el), () => dropdownRef.value?.close());
-		__expose({ open: () => dropdownRef.value?.open() });
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(N8nNavigationDropdown_default), {
-				ref_key: "dropdownRef",
-				ref: dropdownRef,
-				menu: menu.value,
-				onSelect
-			}, {
-				"item-icon": withCtx(({ item }) => [item.id in unref(PROVIDER_CREDENTIAL_TYPE_MAP) ? (openBlock(), createBlock(CredentialIcon_default, {
-					key: 0,
-					"credential-type-name": unref(PROVIDER_CREDENTIAL_TYPE_MAP)[item.id],
-					size: 16,
-					class: normalizeClass(_ctx.$style.menuIcon)
-				}, null, 8, ["credential-type-name", "class"])) : createCommentVNode("", true)]),
-				default: withCtx(() => [createVNode(unref(N8nButton_default), {
-					class: normalizeClass(_ctx.$style.dropdownButton),
-					type: "secondary",
-					text: ""
-				}, {
-					default: withCtx(() => [
-						_ctx.selectedModel && _ctx.selectedModel.provider in unref(PROVIDER_CREDENTIAL_TYPE_MAP) ? (openBlock(), createBlock(CredentialIcon_default, {
-							key: 0,
-							"credential-type-name": unref(PROVIDER_CREDENTIAL_TYPE_MAP)[_ctx.selectedModel.provider],
-							size: _ctx.credentialsName ? 20 : 16,
-							class: normalizeClass(_ctx.$style.icon)
-						}, null, 8, [
-							"credential-type-name",
-							"size",
-							"class"
-						])) : createCommentVNode("", true),
-						createBaseVNode("div", { class: normalizeClass(_ctx.$style.selected) }, [createBaseVNode("div", null, toDisplayString(selectedLabel.value), 1), _ctx.credentialsName ? (openBlock(), createBlock(unref(N8nText_default), {
-							key: 0,
-							size: "xsmall",
-							color: "text-light"
-						}, {
-							default: withCtx(() => [createTextVNode(toDisplayString(_ctx.credentialsName), 1)]),
-							_: 1
-						})) : createCommentVNode("", true)], 2),
-						createVNode(unref(N8nIcon_default), {
-							icon: "chevron-down",
-							size: "medium"
-						})
-					]),
-					_: 1
-				}, 8, ["class"])]),
-				_: 1
-			}, 8, ["menu"]);
-		};
-	}
-});
-var ModelSelector_vue_vue_type_style_index_0_lang_module_default = {
-	dropdownButton: "_dropdownButton_1go3j_123",
-	selected: "_selected_1go3j_131",
-	icon: "_icon_1go3j_144",
-	menuIcon: "_menuIcon_1go3j_149"
-};
-var ModelSelector_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ModelSelector_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ModelSelector_vue_vue_type_style_index_0_lang_module_default }]]);
+import { t as useClipboard } from "./useClipboard-fRnZpGbX.js";
+import "./Modal-DwutFKNY.js";
+import "./CredentialIcon-DS3l06t2.js";
+import { a as MOBILE_MEDIA_QUERY, i as CHAT_VIEW, n as CHAT_CONVERSATION_VIEW, o as providerDisplayNames } from "./constants-CPQyU8WO.js";
+import { a as findOneFromModelsResponse, d as unflattenModel, n as ChatAgentAvatar_default, r as useChatStore, t as useChatHubSidebarState } from "./useChatHubSidebarState-CM9tokIj.js";
+import { n as AgentEditorModal_default, r as ModelSelector_default, t as useChatCredentials } from "./useChatCredentials-CMV_NA0l.js";
+import { t as VueMarkdown_default } from "./VueMarkdown-CiR4a0gO.js";
+import { t as useAgent } from "./useAgent-BHJHCfap.js";
 var ChatConversationHeader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ChatConversationHeader",
 	props: {
 		selectedModel: {},
-		credentials: {}
+		credentials: {},
+		readyToShowModelSelector: { type: Boolean }
 	},
 	emits: [
 		"selectModel",
-		"setCredentials",
-		"renameConversation"
+		"renameConversation",
+		"editCustomAgent",
+		"createCustomAgent",
+		"selectCredential",
+		"openWorkflow"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
 		const sidebar = useChatHubSidebarState();
-		const chatStore = useChatStore();
-		const credentialsStore = useCredentialsStore();
 		const router = useRouter();
 		const modelSelectorRef = useTemplateRef("modelSelectorRef");
-		const credentialsName = computed(() => __props.selectedModel ? credentialsStore.getCredentialById(__props.credentials[__props.selectedModel.provider] ?? "")?.name : void 0);
 		function onModelChange(selection) {
 			emit("selectModel", selection);
 		}
@@ -179,54 +63,124 @@ var ChatConversationHeader_vue_vue_type_script_setup_true_lang_default = /* @__P
 		__expose({ openModelSelector: () => modelSelectorRef.value?.open() });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.component) }, [
-				!unref(sidebar).isStatic.value ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+				createBaseVNode("div", { class: normalizeClass(_ctx.$style.grow) }, [
+					!unref(sidebar).isStatic.value ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+						key: 0,
+						class: normalizeClass(_ctx.$style.menuButton),
+						type: "secondary",
+						icon: "panel-left",
+						text: "",
+						"icon-size": "large",
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(sidebar).toggleOpen(true))
+					}, null, 8, ["class"])) : createCommentVNode("", true),
+					!unref(sidebar).isStatic.value ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+						key: 1,
+						class: normalizeClass(_ctx.$style.menuButton),
+						type: "secondary",
+						icon: "square-pen",
+						text: "",
+						"icon-size": "large",
+						onClick: onNewChat
+					}, null, 8, ["class"])) : createCommentVNode("", true),
+					_ctx.readyToShowModelSelector ? (openBlock(), createBlock(ModelSelector_default, {
+						key: 2,
+						ref_key: "modelSelectorRef",
+						ref: modelSelectorRef,
+						selectedAgent: _ctx.selectedModel,
+						credentials: _ctx.credentials,
+						onChange: onModelChange,
+						onCreateCustomAgent: _cache[1] || (_cache[1] = ($event) => emit("createCustomAgent")),
+						onSelectCredential: _cache[2] || (_cache[2] = (provider, credentialId) => emit("selectCredential", provider, credentialId))
+					}, null, 8, ["selectedAgent", "credentials"])) : createCommentVNode("", true)
+				], 2),
+				_ctx.selectedModel?.model.provider === "custom-agent" ? (openBlock(), createBlock(unref(N8nButton_default), {
 					key: 0,
-					class: normalizeClass(_ctx.$style.menuButton),
+					class: normalizeClass(_ctx.$style.editAgent),
 					type: "secondary",
-					icon: "panel-left",
-					text: "",
-					"icon-size": "large",
-					onClick: _cache[0] || (_cache[0] = ($event) => unref(sidebar).toggleOpen(true))
+					size: "small",
+					icon: "settings",
+					label: "Edit Agent",
+					onClick: _cache[3] || (_cache[3] = ($event) => emit("editCustomAgent", _ctx.selectedModel.model.agentId))
 				}, null, 8, ["class"])) : createCommentVNode("", true),
-				!unref(sidebar).isStatic.value ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+				_ctx.selectedModel?.model.provider === "n8n" ? (openBlock(), createBlock(unref(N8nButton_default), {
 					key: 1,
-					class: normalizeClass(_ctx.$style.menuButton),
+					class: normalizeClass(_ctx.$style.editAgent),
 					type: "secondary",
-					icon: "square-pen",
-					text: "",
-					"icon-size": "large",
-					onClick: onNewChat
-				}, null, 8, ["class"])) : createCommentVNode("", true),
-				createVNode(ModelSelector_default, {
-					ref_key: "modelSelectorRef",
-					ref: modelSelectorRef,
-					models: unref(chatStore).models ?? null,
-					"selected-model": _ctx.selectedModel,
-					"credentials-name": credentialsName.value,
-					onChange: onModelChange,
-					onConfigure: _cache[1] || (_cache[1] = ($event) => emit("setCredentials", $event))
-				}, null, 8, [
-					"models",
-					"selected-model",
-					"credentials-name"
-				])
+					size: "small",
+					icon: "settings",
+					label: "Open Workflow",
+					onClick: _cache[4] || (_cache[4] = ($event) => emit("openWorkflow", _ctx.selectedModel.model.workflowId))
+				}, null, 8, ["class"])) : createCommentVNode("", true)
 			], 2);
 		};
 	}
 });
 var ChatConversationHeader_vue_vue_type_style_index_0_lang_module_default = {
-	component: "_component_k0rp2_123",
-	menuButton: "_menuButton_k0rp2_133",
-	title: "_title_k0rp2_137"
+	component: "_component_1rkfw_123",
+	menuButton: "_menuButton_1rkfw_133",
+	grow: "_grow_1rkfw_137",
+	title: "_title_1rkfw_144",
+	editAgent: "_editAgent_1rkfw_148"
 };
 var ChatConversationHeader_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatConversationHeader_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatConversationHeader_vue_vue_type_style_index_0_lang_module_default }]]);
+var ChatTypingIndicator_vue_vue_type_style_index_0_lang_module_default = {
+	typing: "_typing_9qr9t_123",
+	blink: "_blink_9qr9t_1"
+};
+var _sfc_main = {};
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("span", { class: normalizeClass(_ctx.$style.typing) }, _cache[0] || (_cache[0] = [
+		createBaseVNode("i", null, null, -1),
+		createBaseVNode("i", null, null, -1),
+		createBaseVNode("i", null, null, -1)
+	]), 2);
+}
+var ChatTypingIndicator_default = /* @__PURE__ */ __plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__cssModules", { "$style": ChatTypingIndicator_vue_vue_type_style_index_0_lang_module_default }]]);
+var hljsInstance;
+var asyncImport = { status: "uninitialized" };
+function useChatHubMarkdownOptions() {
+	const forceReRenderKey = ref(0);
+	const markdownOptions = { highlight(str, lang) {
+		if (!lang) return "";
+		const normalizedLang = lang.toLowerCase();
+		if (hljsInstance?.getLanguage(normalizedLang)) try {
+			return hljsInstance.highlight(str, { language: normalizedLang }).value;
+		} catch {}
+		loadLanguageModules();
+		return "";
+	} };
+	async function loadLanguageModules() {
+		if (asyncImport.status === "done") return;
+		if (asyncImport.status === "inProgress") {
+			await asyncImport.promise;
+			forceReRenderKey.value++;
+			return;
+		}
+		try {
+			asyncImport = {
+				status: "inProgress",
+				promise: Promise.all([__vitePreload(() => import("./es-BazDU8Wd.js"), __vite__mapDeps([0,1,2])), __vitePreload(() => import("./languageModules-CNluY7w0.js"), __vite__mapDeps([3,4]))])
+			};
+			const [hljs, languages] = await asyncImport.promise;
+			asyncImport = { status: "done" };
+			hljsInstance = hljs.default.newInstance();
+			for (const [lang, module] of Object.entries(languages)) hljsInstance.registerLanguage(lang, module);
+			forceReRenderKey.value++;
+		} catch (error) {
+			console.warn("Failed to load syntax highlighting modules", error);
+		}
+	}
+	return {
+		markdownOptions,
+		forceReRenderKey
+	};
+}
 var import_markdown_it_link_attributes = /* @__PURE__ */ __toESM(require_markdown_it_link_attributes());
 var ChatMessageActions_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ChatMessageActions",
 	props: {
-		type: {},
 		justCopied: { type: Boolean },
-		messageId: {},
+		message: {},
 		alternatives: {},
 		isSpeechSynthesisAvailable: { type: Boolean },
 		isSpeaking: { type: Boolean }
@@ -240,12 +194,22 @@ var ChatMessageActions_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 	],
 	setup(__props, { emit: __emit }) {
 		const i18n = useI18n();
+		const router = useRouter();
 		const emit = __emit;
 		const copyTooltip = computed(() => {
 			return __props.justCopied ? i18n.baseText("generic.copied") : i18n.baseText("generic.copy");
 		});
 		const currentAlternativeIndex = computed(() => {
-			return __props.alternatives.findIndex((id) => id === __props.messageId);
+			return __props.alternatives.findIndex((id) => id === __props.message.id);
+		});
+		const executionUrl = computed(() => {
+			if (__props.message.type === "ai" && __props.message.provider === "n8n" && __props.message.executionId) return router.resolve({
+				name: VIEWS.EXECUTION_PREVIEW,
+				params: {
+					name: __props.message.workflowId,
+					executionId: __props.message.executionId
+				}
+			}).href;
 		});
 		function handleCopy() {
 			emit("copy");
@@ -275,7 +239,7 @@ var ChatMessageActions_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 					}, null, 8, ["icon"])]),
 					_: 1
 				}),
-				_ctx.isSpeechSynthesisAvailable && _ctx.type === "ai" ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+				_ctx.isSpeechSynthesisAvailable && _ctx.message.type === "ai" ? (openBlock(), createBlock(unref(N8nTooltip_default), {
 					key: 0,
 					placement: "bottom",
 					"show-after": 300
@@ -304,7 +268,7 @@ var ChatMessageActions_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 					})]),
 					_: 1
 				}),
-				_ctx.type === "ai" ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+				_ctx.message.type === "ai" ? (openBlock(), createBlock(unref(N8nTooltip_default), {
 					key: 1,
 					placement: "bottom",
 					"show-after": 300
@@ -319,7 +283,27 @@ var ChatMessageActions_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 					})]),
 					_: 1
 				})) : createCommentVNode("", true),
-				_ctx.alternatives.length > 1 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+				executionUrl.value && _ctx.message.executionId ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+					key: 2,
+					placement: "bottom",
+					"show-after": 300
+				}, {
+					content: withCtx(() => [_cache[4] || (_cache[4] = createTextVNode(" Execution ID: ")), createVNode(unref(N8nLink_default), {
+						to: executionUrl.value,
+						"new-window": true
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(_ctx.message.executionId), 1)]),
+						_: 1
+					}, 8, ["to"])]),
+					default: withCtx(() => [createVNode(unref(N8nIconButton_default), {
+						icon: "info",
+						type: "tertiary",
+						size: "medium",
+						text: ""
+					})]),
+					_: 1
+				})) : createCommentVNode("", true),
+				_ctx.alternatives.length > 1 ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
 					createVNode(unref(N8nIconButton_default), {
 						icon: "chevron-left",
 						type: "tertiary",
@@ -349,59 +333,7 @@ var ChatMessageActions_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 	}
 });
 var ChatMessageActions_vue_vue_type_style_index_0_lang_module_default = { actions: "_actions_1sizk_123" };
-var ChatMessageActions_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatMessageActions_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatMessageActions_vue_vue_type_style_index_0_lang_module_default }], ["__scopeId", "data-v-26250adf"]]);
-var ChatTypingIndicator_vue_vue_type_style_index_0_lang_module_default = {
-	typing: "_typing_9qr9t_123",
-	blink: "_blink_9qr9t_1"
-};
-var _sfc_main = {};
-function _sfc_render(_ctx, _cache) {
-	return openBlock(), createElementBlock("span", { class: normalizeClass(_ctx.$style.typing) }, _cache[0] || (_cache[0] = [
-		createBaseVNode("i", null, null, -1),
-		createBaseVNode("i", null, null, -1),
-		createBaseVNode("i", null, null, -1)
-	]), 2);
-}
-var ChatTypingIndicator_default = /* @__PURE__ */ __plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__cssModules", { "$style": ChatTypingIndicator_vue_vue_type_style_index_0_lang_module_default }]]);
-var hljsInstance;
-var asyncImport = { status: "uninitialized" };
-function useChatHubMarkdownOptions() {
-	const forceReRenderKey = ref(0);
-	const markdownOptions = { highlight(str, lang) {
-		if (!lang) return "";
-		const normalizedLang = lang.toLowerCase();
-		if (hljsInstance?.getLanguage(normalizedLang)) try {
-			return hljsInstance.highlight(str, { language: normalizedLang }).value;
-		} catch {}
-		loadLanguageModules();
-		return "";
-	} };
-	async function loadLanguageModules() {
-		if (asyncImport.status === "done") return;
-		if (asyncImport.status === "inProgress") {
-			await asyncImport.promise;
-			forceReRenderKey.value++;
-			return;
-		}
-		try {
-			asyncImport = {
-				status: "inProgress",
-				promise: Promise.all([__vitePreload(() => import("./es-BO7MlKL2.js"), __vite__mapDeps([0,1,2])), __vitePreload(() => import("./languageModules-B8UNBljm.js"), __vite__mapDeps([3,4]))])
-			};
-			const [hljs, languages] = await asyncImport.promise;
-			asyncImport = { status: "done" };
-			hljsInstance = hljs.default.newInstance();
-			for (const [lang, module] of Object.entries(languages)) hljsInstance.registerLanguage(lang, module);
-			forceReRenderKey.value++;
-		} catch (error) {
-			console.warn("Failed to load syntax highlighting modules", error);
-		}
-	}
-	return {
-		markdownOptions,
-		forceReRenderKey
-	};
-}
+var ChatMessageActions_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatMessageActions_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatMessageActions_vue_vue_type_style_index_0_lang_module_default }], ["__scopeId", "data-v-1a4933d7"]]);
 var _hoisted_1 = ["data-message-id"];
 var ChatMessage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ChatMessage",
@@ -431,10 +363,7 @@ var ChatMessage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			rate: 1,
 			volume: 1
 		});
-		const credentialTypeName = computed(() => {
-			if (__props.message.type !== "ai" || !__props.message.provider || __props.message.provider === "n8n") return null;
-			return PROVIDER_CREDENTIAL_TYPE_MAP[__props.message.provider] ?? null;
-		});
+		const agent = useAgent(computed(() => unflattenModel(__props.message)));
 		async function handleCopy() {
 			const text = __props.message.content;
 			await clipboard.copy(text);
@@ -496,18 +425,12 @@ var ChatMessage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				icon: "user",
 				width: "20",
 				height: "20"
-			})) : _ctx.message.type === "ai" && credentialTypeName.value ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+			})) : unref(agent) ? (openBlock(), createBlock(ChatAgentAvatar_default, {
 				key: 1,
-				"show-after": 100,
-				placement: "left"
-			}, {
-				content: withCtx(() => [createTextVNode(toDisplayString(_ctx.message.model), 1)]),
-				default: withCtx(() => [createVNode(CredentialIcon_default, {
-					size: 20,
-					"credential-type-name": credentialTypeName.value
-				}, null, 8, ["credential-type-name"])]),
-				_: 1
-			})) : (openBlock(), createBlock(unref(N8nIcon_default), {
+				agent: unref(agent),
+				size: "md",
+				tooltip: ""
+			}, null, 8, ["agent"])) : (openBlock(), createBlock(unref(N8nIcon_default), {
 				key: 2,
 				icon: "sparkles",
 				width: "20",
@@ -543,7 +466,7 @@ var ChatMessage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			}, 8, ["disabled"])], 2)], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.chatMessage) }, [(openBlock(), createBlock(unref(VueMarkdown_default), {
 				key: unref(forceReRenderKey),
 				class: normalizeClass([_ctx.$style.chatMessageMarkdown, "chat-message-markdown"]),
-				source: _ctx.message.content,
+				source: _ctx.message.status === "error" && !_ctx.message.content ? "Error: Unknown error occurred" : _ctx.message.content,
 				options: unref(markdownOptions),
 				plugins: [linksNewTabPlugin]
 			}, null, 8, [
@@ -556,12 +479,11 @@ var ChatMessage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				class: normalizeClass(_ctx.$style.typingIndicator)
 			}, null, 8, ["class"])) : (openBlock(), createBlock(ChatMessageActions_default, {
 				key: 1,
-				type: _ctx.message.type,
 				"just-copied": justCopied.value,
 				"is-speech-synthesis-available": unref(speech).isSupported.value,
 				"is-speaking": unref(speech).isPlaying.value,
 				class: normalizeClass(_ctx.$style.actions),
-				"message-id": _ctx.message.id,
+				message: _ctx.message,
 				alternatives: _ctx.message.alternatives,
 				onCopy: handleCopy,
 				onEdit: handleEdit,
@@ -569,12 +491,11 @@ var ChatMessage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				onReadAloud: handleReadAloud,
 				onSwitchAlternative: handleSwitchAlternative
 			}, null, 8, [
-				"type",
 				"just-copied",
 				"is-speech-synthesis-available",
 				"is-speaking",
 				"class",
-				"message-id",
+				"message",
 				"alternatives"
 			]))], 64))], 2)], 14, _hoisted_1);
 		};
@@ -599,6 +520,7 @@ var ChatPrompt_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 	__name: "ChatPrompt",
 	props: {
 		isResponding: { type: Boolean },
+		isNewSession: { type: Boolean },
 		selectedModel: {},
 		isMissingCredentials: { type: Boolean }
 	},
@@ -618,10 +540,8 @@ var ChatPrompt_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			interimResults: true,
 			lang: navigator.language
 		});
-		const placeholder = computed(() => {
-			if (!__props.selectedModel) return "Select a model";
-			return `Message ${__props.selectedModel.name}`;
-		});
+		const placeholder = computed(() => __props.selectedModel ? `Message ${__props.selectedModel.name ?? "a model"}...` : "Select a model");
+		const llmProvider = computed(() => __props.selectedModel?.model.provider === "n8n" || __props.selectedModel?.model.provider === "custom-agent" ? void 0 : __props.selectedModel?.model.provider);
 		function onMic() {
 			if (speechInput.isListening.value) speechInput.stop();
 			else speechInput.start();
@@ -672,34 +592,48 @@ var ChatPrompt_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					key: 0,
 					class: normalizeClass(_ctx.$style.callout)
 				}, {
-					default: withCtx(() => [
-						_cache[3] || (_cache[3] = createTextVNode(" Please ")),
+					default: withCtx(() => [_ctx.isNewSession ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+						_cache[5] || (_cache[5] = createTextVNode(" Please ")),
 						createBaseVNode("a", {
 							href: "",
 							onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("selectModel"), ["prevent"]))
 						}, "select a model"),
-						_cache[4] || (_cache[4] = createTextVNode(" to start a conversation "))
-					]),
+						_cache[6] || (_cache[6] = createTextVNode(" to start a conversation "))
+					], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+						_cache[7] || (_cache[7] = createTextVNode(" Please ")),
+						createBaseVNode("a", {
+							href: "",
+							onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("selectModel"), ["prevent"]))
+						}, "reselect a model"),
+						_cache[8] || (_cache[8] = createTextVNode(" to continue the conversation "))
+					], 64))]),
 					_: 1
-				}, 8, ["class"])) : _ctx.isMissingCredentials ? (openBlock(), createBlock(unref(N8nText_default), {
+				}, 8, ["class"])) : _ctx.isMissingCredentials && llmProvider.value ? (openBlock(), createBlock(unref(N8nText_default), {
 					key: 1,
 					class: normalizeClass(_ctx.$style.callout)
 				}, {
-					default: withCtx(() => [
-						_cache[5] || (_cache[5] = createTextVNode(" Please ")),
+					default: withCtx(() => [_ctx.isNewSession ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+						_cache[9] || (_cache[9] = createTextVNode(" Please ")),
 						createBaseVNode("a", {
 							href: "",
-							onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("setCredentials", _ctx.selectedModel.provider), ["prevent"]))
+							onClick: _cache[2] || (_cache[2] = withModifiers(($event) => emit("setCredentials", llmProvider.value), ["prevent"]))
 						}, " set credentials "),
-						createTextVNode(" for " + toDisplayString(unref(providerDisplayNames)[_ctx.selectedModel.provider]) + " to start a conversation ", 1)
-					]),
+						createTextVNode(" for " + toDisplayString(unref(providerDisplayNames)[llmProvider.value]) + " to start a conversation ", 1)
+					], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+						_cache[10] || (_cache[10] = createTextVNode(" Please ")),
+						createBaseVNode("a", {
+							href: "",
+							onClick: _cache[3] || (_cache[3] = withModifiers(($event) => emit("setCredentials", llmProvider.value), ["prevent"]))
+						}, " set credentials "),
+						createTextVNode(" for " + toDisplayString(unref(providerDisplayNames)[llmProvider.value]) + " to continue the conversation ", 1)
+					], 64))]),
 					_: 1
 				}, 8, ["class"])) : createCommentVNode("", true),
 				createVNode(unref(N8nInput_default), {
 					ref_key: "inputRef",
 					ref: inputRef,
 					modelValue: message$1.value,
-					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => message$1.value = $event),
+					"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => message$1.value = $event),
 					class: normalizeClass(_ctx.$style.input),
 					type: "textarea",
 					placeholder: placeholder.value,
@@ -786,108 +720,6 @@ var ChatStarter_vue_vue_type_style_index_0_lang_module_default = {
 	cardText: "_cardText_1julh_155"
 };
 var ChatStarter_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatStarter_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatStarter_vue_vue_type_style_index_0_lang_module_default }]]);
-const credentialsMapSchema = recordType(chatHubProviderSchema, stringType().or(nullType()));
-var CredentialSelectorModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "CredentialSelectorModal",
-	props: {
-		provider: {},
-		initialValue: {}
-	},
-	emits: ["select", "createNew"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const credentialsStore = useCredentialsStore();
-		const modalBus = ref(createEventBus());
-		const selectedCredentialId = ref(props.initialValue);
-		const availableCredentials = computed(() => {
-			return credentialsStore.getCredentialsByType(PROVIDER_CREDENTIAL_TYPE_MAP[props.provider]);
-		});
-		function onCredentialSelect(credentialId) {
-			selectedCredentialId.value = credentialId;
-		}
-		function onConfirm() {
-			if (selectedCredentialId.value) {
-				emit("select", props.provider, selectedCredentialId.value);
-				modalBus.value.emit("close");
-			}
-		}
-		function onCreateNew() {
-			emit("createNew", props.provider);
-			modalBus.value.emit("close");
-		}
-		function onCancel() {
-			modalBus.value.emit("close");
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Modal_default, {
-				name: "chatCredentialSelector",
-				"event-bus": modalBus.value,
-				width: "50%",
-				center: true,
-				"max-width": "460px",
-				"min-height": "250px"
-			}, {
-				header: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.header) }, [createVNode(CredentialIcon_default, {
-					"credential-type-name": unref(PROVIDER_CREDENTIAL_TYPE_MAP)[_ctx.provider],
-					size: 24,
-					class: normalizeClass(_ctx.$style.icon)
-				}, null, 8, ["credential-type-name", "class"]), createBaseVNode("h2", { class: normalizeClass(_ctx.$style.title) }, "Select " + toDisplayString(unref(providerDisplayNames)[_ctx.provider]) + " Credential", 3)], 2)]),
-				content: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.content) }, [createVNode(unref(N8nText_default), {
-					size: "small",
-					color: "text-base"
-				}, {
-					default: withCtx(() => _cache[0] || (_cache[0] = [createTextVNode(" Choose an existing credential or create a new one ")])),
-					_: 1
-				}), createVNode(unref(N8nSelect_default), {
-					"model-value": selectedCredentialId.value,
-					size: "large",
-					placeholder: "Select credential...",
-					"onUpdate:modelValue": onCredentialSelect
-				}, {
-					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(availableCredentials.value, (credential) => {
-						return openBlock(), createBlock(unref(N8nOption_default), {
-							key: credential.id,
-							value: credential.id,
-							label: credential.name
-						}, null, 8, ["value", "label"]);
-					}), 128))]),
-					_: 1
-				}, 8, ["model-value"])], 2)]),
-				footer: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.footer) }, [createVNode(unref(N8nButton_default), {
-					type: "secondary",
-					onClick: onCreateNew
-				}, {
-					default: withCtx(() => _cache[1] || (_cache[1] = [createTextVNode(" Create New ")])),
-					_: 1
-				}), createBaseVNode("div", { class: normalizeClass(_ctx.$style.footerRight) }, [createVNode(unref(N8nButton_default), {
-					type: "tertiary",
-					onClick: onCancel
-				}, {
-					default: withCtx(() => _cache[2] || (_cache[2] = [createTextVNode(" Cancel ")])),
-					_: 1
-				}), createVNode(unref(N8nButton_default), {
-					type: "primary",
-					disabled: !selectedCredentialId.value,
-					onClick: onConfirm
-				}, {
-					default: withCtx(() => _cache[3] || (_cache[3] = [createTextVNode(" Select ")])),
-					_: 1
-				}, 8, ["disabled"])], 2)], 2)]),
-				_: 1
-			}, 8, ["event-bus"]);
-		};
-	}
-});
-var CredentialSelectorModal_vue_vue_type_style_index_0_lang_module_default = {
-	title: "_title_1hes0_123",
-	content: "_content_1hes0_129",
-	footer: "_footer_1hes0_136",
-	footerRight: "_footerRight_1hes0_143",
-	header: "_header_1hes0_148",
-	icon: "_icon_1hes0_154"
-};
-var CredentialSelectorModal_default = /* @__PURE__ */ __plugin_vue_export_helper_default(CredentialSelectorModal_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": CredentialSelectorModal_vue_vue_type_style_index_0_lang_module_default }]]);
 var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ChatView",
 	setup(__props) {
@@ -895,7 +727,6 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const route = useRoute();
 		const usersStore = useUsersStore();
 		const chatStore = useChatStore();
-		const credentialsStore = useCredentialsStore();
 		const toast = useToast();
 		const isMobileDevice$1 = useMediaQuery(MOBILE_MEDIA_QUERY);
 		const documentTitle = useDocumentTitle();
@@ -903,16 +734,18 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const headerRef = useTemplateRef("headerRef");
 		const inputRef = useTemplateRef("inputRef");
 		const sessionId = computed(() => typeof route.params.id === "string" ? route.params.id : v4_default());
-		const isNewSession = computed(() => sessionId.value !== route.params.id);
+		const isResponding = computed(() => chatStore.isResponding(sessionId.value));
+		const isNewSession$1 = computed(() => sessionId.value !== route.params.id);
 		const scrollableRef = useTemplateRef("scrollable");
 		const scrollContainerRef = computed(() => scrollableRef.value?.parentElement ?? null);
 		const currentConversation = computed(() => sessionId.value ? chatStore.sessions.find((session) => session.id === sessionId.value) : void 0);
 		const currentConversationTitle = computed(() => currentConversation.value?.title);
-		const { arrivedState } = useScroll(scrollContainerRef, {
+		const readyToShowMessages = computed(() => chatStore.agentsReady);
+		const { arrivedState, measure } = useScroll(scrollContainerRef, {
 			throttle: 100,
 			offset: { bottom: 100 }
 		});
-		const selectedModel = useLocalStorage(LOCAL_STORAGE_CHAT_HUB_SELECTED_MODEL(usersStore.currentUserId ?? "anonymous"), null, {
+		const defaultModel = useLocalStorage(LOCAL_STORAGE_CHAT_HUB_SELECTED_MODEL(usersStore.currentUserId ?? "anonymous"), null, {
 			writeDefaults: false,
 			shallow: true,
 			serializer: {
@@ -926,48 +759,47 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				write: (value) => JSON.stringify(value)
 			}
 		});
-		const selectedCredentials = useLocalStorage(LOCAL_STORAGE_CHAT_HUB_CREDENTIALS(usersStore.currentUserId ?? "anonymous"), {}, {
-			writeDefaults: false,
-			shallow: true,
-			serializer: {
-				read: (value) => {
-					try {
-						return credentialsMapSchema.parse(JSON.parse(value));
-					} catch (error) {
-						return {};
-					}
-				},
-				write: (value) => JSON.stringify(value)
+		const modelFromQuery = computed(() => {
+			const agentId = route.query.agentId;
+			const workflowId = route.query.workflowId;
+			if (!isNewSession$1.value) return null;
+			if (typeof agentId === "string") return chatStore.getAgent({
+				provider: "custom-agent",
+				agentId
+			}) ?? null;
+			if (typeof workflowId === "string") return chatStore.getAgent({
+				provider: "n8n",
+				workflowId
+			}) ?? null;
+			return null;
+		});
+		const selectedModel = computed(() => {
+			if (!chatStore.agentsReady) return;
+			if (modelFromQuery.value) return modelFromQuery.value;
+			if (currentConversation.value?.provider) {
+				const model = unflattenModel(currentConversation.value);
+				return model ? chatStore.getAgent(model) : void 0;
 			}
+			if (chatStore.streaming?.sessionId === sessionId.value) return chatStore.getAgent(chatStore.streaming.model);
+			return defaultModel.value ? chatStore.getAgent(defaultModel.value) : void 0;
 		});
-		const autoSelectCredentials = computed(() => Object.fromEntries(chatHubProviderSchema.options.map((provider) => {
-			if (provider === "n8n") return [provider, null];
-			return [provider, credentialsStore.getCredentialsByType(PROVIDER_CREDENTIAL_TYPE_MAP[provider]).toSorted((a, b) => +new Date(b.createdAt) - +new Date(a.createdAt))[0]?.id ?? null];
-		})));
-		const mergedCredentials = computed(() => ({
-			...autoSelectCredentials.value,
-			...selectedCredentials.value
-		}));
+		const { credentialsByProvider, selectCredential } = useChatCredentials(usersStore.currentUserId ?? "anonymous");
 		const chatMessages = computed(() => chatStore.getActiveMessages(sessionId.value));
-		const isNewChat$1 = computed(() => route.name === CHAT_VIEW);
-		const credentialsId = computed(() => selectedModel.value ? mergedCredentials.value[selectedModel.value.provider] : void 0);
-		const modelRequiresCredentials = computed(() => {
-			if (!selectedModel.value) return false;
-			return selectedModel.value?.provider !== "n8n";
-		});
-		const isMissingSelectedCredential = computed(() => {
-			if (!selectedModel.value) return false;
-			if (!modelRequiresCredentials.value) return false;
-			return !credentialsId.value;
+		const credentialsForSelectedProvider = computed(() => {
+			const provider = selectedModel.value?.model.provider;
+			if (!provider) return null;
+			if (provider === "custom-agent" || provider === "n8n") return {};
+			const credentialsId = credentialsByProvider.value?.[provider];
+			if (!credentialsId) return null;
+			return { [PROVIDER_CREDENTIAL_TYPE_MAP[provider]]: {
+				id: credentialsId,
+				name: ""
+			} };
 		});
+		const isMissingSelectedCredential = computed(() => !credentialsForSelectedProvider.value);
 		const editingMessageId = ref();
 		const didSubmitInCurrentSession = ref(false);
-		const initialization = ref({
-			credentialsFetched: false,
-			modelsFetched: false
-		});
-		const credentialSelectorProvider = ref(null);
-		const isInitialized = computed(() => initialization.value.credentialsFetched && initialization.value.modelsFetched);
+		const editingAgentId = ref(void 0);
 		function scrollToBottom(smooth) {
 			scrollContainerRef.value?.scrollTo({
 				top: scrollableRef.value?.scrollHeight,
@@ -977,24 +809,24 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		function scrollToMessage(messageId) {
 			scrollableRef.value?.querySelector(`[data-message-id="${messageId}"]`)?.scrollIntoView({ behavior: "smooth" });
 		}
-		watch(() => chatMessages.value[chatMessages.value.length - 1]?.id, (lastMessageId) => {
-			if (!lastMessageId) return;
-			if (lastMessageId !== chatStore.streamingMessageId) {
-				scrollToBottom(chatStore.streamingMessageId !== void 0);
+		watch([readyToShowMessages, () => chatMessages.value[chatMessages.value.length - 1]?.id], ([ready, lastMessageId]) => {
+			if (!ready || !lastMessageId) return;
+			nextTick(measure);
+			if (chatStore.streaming?.sessionId === sessionId.value) {
+				scrollToMessage(chatStore.streaming.promptId);
 				return;
 			}
-			const message$1 = chatStore.getActiveMessages(sessionId.value).find((message$2) => message$2.id === lastMessageId);
-			if (message$1?.previousMessageId) scrollToMessage(message$1.previousMessageId);
+			scrollToBottom(false);
 		}, {
 			immediate: true,
 			flush: "post"
 		});
-		watch(mergedCredentials, async (credentials) => {
-			const models = await chatStore.fetchChatModels(credentials);
-			if (selectedModel.value === null) selectedModel.value = findOneFromModelsResponse(models) ?? null;
-			initialization.value.modelsFetched = true;
+		watch(() => chatStore.agents, (models) => {
+			if (!models || !!selectedModel.value || !isNewSession$1.value) return;
+			const model = findOneFromModelsResponse(models) ?? null;
+			if (model) handleSelectModel(model);
 		}, { immediate: true });
-		watch([sessionId, isNewSession], async ([id, isNew]) => {
+		watch([sessionId, isNewSession$1], async ([id, isNew]) => {
 			didSubmitInCurrentSession.value = false;
 			if (!isNew && !chatStore.getConversation(id)) try {
 				await chatStore.fetchMessages(id);
@@ -1002,26 +834,22 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				toast.showError(error, "Error fetching a conversation");
 				await router.push({ name: CHAT_VIEW });
 			}
-			inputRef.value?.focus();
 		}, { immediate: true });
-		watch(currentConversationTitle, (title$2) => {
-			documentTitle.set(title$2 ?? "Chat");
+		watch([inputRef, sessionId], ([input$1]) => {
+			input$1?.focus();
+		}, { immediate: true });
+		watch(currentConversationTitle, (title$1) => {
+			documentTitle.set(title$1 ?? "Chat");
+		}, { immediate: true });
+		watch(credentialsByProvider, (credentials) => {
+			if (credentials) chatStore.fetchAgents(credentials);
 		}, { immediate: true });
-		onMounted(async () => {
-			await Promise.all([credentialsStore.fetchCredentialTypes(false), credentialsStore.fetchAllCredentials()]);
-			initialization.value.credentialsFetched = true;
-		});
 		function onSubmit(message$1) {
-			if (!message$1.trim() || chatStore.isResponding || !selectedModel.value || isMissingSelectedCredential.value) return;
+			if (!message$1.trim() || isResponding.value || !selectedModel.value || !credentialsForSelectedProvider.value) return;
 			didSubmitInCurrentSession.value = true;
-			const credentials = {};
-			if (selectedModel.value.provider !== "n8n" && credentialsId.value) Object.assign(credentials, { [PROVIDER_CREDENTIAL_TYPE_MAP[selectedModel.value.provider]]: {
-				id: credentialsId.value,
-				name: ""
-			} });
-			chatStore.sendMessage(sessionId.value, message$1, selectedModel.value, credentials);
+			chatStore.sendMessage(sessionId.value, message$1, selectedModel.value.model, credentialsForSelectedProvider.value);
 			inputRef.value?.setText("");
-			if (isNewSession.value) router.push({
+			if (isNewSession$1.value) router.push({
 				name: CHAT_CONVERSATION_VIEW,
 				params: { id: sessionId.value }
 			});
@@ -1036,72 +864,86 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			editingMessageId.value = void 0;
 		}
 		function handleEditMessage(message$1) {
-			if (chatStore.isResponding || !["human", "ai"].includes(message$1.type) || !selectedModel.value || !credentialsId.value) return;
+			if (isResponding.value || !["human", "ai"].includes(message$1.type) || !selectedModel.value || !credentialsForSelectedProvider.value) return;
 			const messageToEdit = message$1.revisionOfMessageId ?? message$1.id;
-			chatStore.editMessage(sessionId.value, messageToEdit, message$1.content, selectedModel.value, selectedModel.value.provider === "n8n" ? {} : { [PROVIDER_CREDENTIAL_TYPE_MAP[selectedModel.value.provider]]: {
-				id: credentialsId.value,
-				name: ""
-			} });
+			chatStore.editMessage(sessionId.value, messageToEdit, message$1.content, selectedModel.value.model, credentialsForSelectedProvider.value);
 			editingMessageId.value = void 0;
 		}
 		function handleRegenerateMessage(message$1) {
-			if (chatStore.isResponding || message$1.type !== "ai" || !selectedModel.value || !credentialsId.value) return;
+			if (isResponding.value || message$1.type !== "ai" || !selectedModel.value || !credentialsForSelectedProvider.value) return;
 			const messageToRetry = message$1.retryOfMessageId ?? message$1.id;
-			chatStore.regenerateMessage(sessionId.value, messageToRetry, selectedModel.value, selectedModel.value.provider === "n8n" ? {} : { [PROVIDER_CREDENTIAL_TYPE_MAP[selectedModel.value.provider]]: {
-				id: credentialsId.value,
-				name: ""
-			} });
+			chatStore.regenerateMessage(sessionId.value, messageToRetry, selectedModel.value.model, credentialsForSelectedProvider.value);
 		}
-		function handleSelectModel(selection) {
-			selectedModel.value = selection;
-		}
-		function handleSelectCredentials(provider, id) {
-			selectedCredentials.value = {
-				...selectedCredentials.value,
-				[provider]: id
-			};
+		async function handleSelectModel(selection) {
+			if (currentConversation.value) try {
+				await chatStore.updateSessionModel(sessionId.value, selection.model);
+			} catch (error) {
+				toast.showError(error, "Could not update selected model");
+			}
+			else defaultModel.value = selection.model;
 		}
 		function handleSwitchAlternative(messageId) {
 			chatStore.switchAlternative(sessionId.value, messageId);
 		}
-		function handleConfigureCredentials(provider) {
-			const credentialType = PROVIDER_CREDENTIAL_TYPE_MAP[provider];
-			if (credentialsStore.getCredentialsByType(credentialType).length === 0) {
-				uiStore.openNewCredential(credentialType);
-				return;
-			}
-			credentialSelectorProvider.value = provider;
-			uiStore.openModal("chatCredentialSelector");
-		}
+		function handleConfigureCredentials(_provider) {}
 		function handleConfigureModel() {
 			headerRef.value?.openModelSelector();
 		}
-		function handleCreateNewCredential(provider) {
-			uiStore.openNewCredential(PROVIDER_CREDENTIAL_TYPE_MAP[provider]);
+		async function handleEditAgent(agentId) {
+			try {
+				await chatStore.fetchCustomAgent(agentId);
+				editingAgentId.value = agentId;
+				uiStore.openModal("agentEditor");
+			} catch (error) {
+				toast.showError(error, "Failed to load agent");
+			}
+		}
+		function openNewAgentCreator() {
+			chatStore.currentEditingAgent = null;
+			editingAgentId.value = void 0;
+			uiStore.openModal("agentEditor");
+		}
+		function closeAgentEditor() {
+			editingAgentId.value = void 0;
+		}
+		function handleOpenWorkflow(workflowId) {
+			const routeData = router.resolve({
+				name: VIEWS.WORKFLOW,
+				params: { name: workflowId }
+			});
+			window.open(routeData.href, "_blank");
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass([_ctx.$style.component, {
-				[_ctx.$style.isNewChat]: isNewChat$1.value,
+				[_ctx.$style.isNewSession]: isNewSession$1.value,
 				[_ctx.$style.isMobileDevice]: unref(isMobileDevice$1)
 			}]) }, [
-				isInitialized.value ? (openBlock(), createBlock(ChatConversationHeader_default, {
-					key: 0,
+				createVNode(ChatConversationHeader_default, {
 					ref_key: "headerRef",
 					ref: headerRef,
-					"selected-model": unref(selectedModel),
-					credentials: mergedCredentials.value,
+					"selected-model": selectedModel.value ?? null,
+					credentials: unref(credentialsByProvider),
+					"ready-to-show-model-selector": unref(chatStore).agentsReady,
 					onSelectModel: handleSelectModel,
-					onSetCredentials: handleConfigureCredentials
-				}, null, 8, ["selected-model", "credentials"])) : createCommentVNode("", true),
-				credentialSelectorProvider.value && credentialSelectorProvider.value !== "n8n" ? (openBlock(), createBlock(CredentialSelectorModal_default, {
-					key: credentialSelectorProvider.value,
-					provider: credentialSelectorProvider.value,
-					"initial-value": mergedCredentials.value[credentialSelectorProvider.value] ?? null,
-					onSelect: handleSelectCredentials,
-					onCreateNew: handleCreateNewCredential
-				}, null, 8, ["provider", "initial-value"])) : createCommentVNode("", true),
-				isInitialized.value ? (openBlock(), createBlock(unref(N8nScrollArea_default), {
-					key: 2,
+					onEditCustomAgent: handleEditAgent,
+					onCreateCustomAgent: openNewAgentCreator,
+					onSelectCredential: unref(selectCredential),
+					onOpenWorkflow: handleOpenWorkflow
+				}, null, 8, [
+					"selected-model",
+					"credentials",
+					"ready-to-show-model-selector",
+					"onSelectCredential"
+				]),
+				unref(credentialsByProvider) ? (openBlock(), createBlock(AgentEditorModal_default, {
+					key: 0,
+					"agent-id": editingAgentId.value,
+					credentials: unref(credentialsByProvider),
+					onCreateCustomAgent: handleSelectModel,
+					onClose: closeAgentEditor
+				}, null, 8, ["agent-id", "credentials"])) : createCommentVNode("", true),
+				readyToShowMessages.value ? (openBlock(), createBlock(unref(N8nScrollArea_default), {
+					key: 1,
 					type: "scroll",
 					"enable-vertical-scroll": true,
 					"enable-horizontal-scroll": false,
@@ -1111,7 +953,7 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					default: withCtx(() => [createBaseVNode("div", {
 						class: normalizeClass(_ctx.$style.scrollable),
 						ref: "scrollable"
-					}, [isNewChat$1.value ? (openBlock(), createBlock(ChatStarter_default, {
+					}, [isNewSession$1.value ? (openBlock(), createBlock(ChatStarter_default, {
 						key: 0,
 						class: normalizeClass(_ctx.$style.starter),
 						"is-mobile-device": unref(isMobileDevice$1)
@@ -1126,7 +968,7 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							message: message$1,
 							compact: unref(isMobileDevice$1),
 							"is-editing": editingMessageId.value === message$1.id,
-							"is-streaming": unref(chatStore).streamingMessageId === message$1.id,
+							"is-streaming": message$1.status === "running",
 							"min-height": didSubmitInCurrentSession.value && message$1.type === "ai" && index === chatMessages.value.length - 1 && scrollContainerRef.value ? scrollContainerRef.value.offsetHeight - 30 - 200 : void 0,
 							onStartEdit: ($event) => handleStartEditMessage(message$1.id),
 							onCancelEdit: handleCancelEditMessage,
@@ -1141,21 +983,21 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							"min-height",
 							"onStartEdit"
 						]);
-					}), 128))], 2)), createBaseVNode("div", { class: normalizeClass(_ctx.$style.promptContainer) }, [!unref(arrivedState).bottom && !isNewChat$1.value ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+					}), 128))], 2)), createBaseVNode("div", { class: normalizeClass(_ctx.$style.promptContainer) }, [!unref(arrivedState).bottom && !isNewSession$1.value ? (openBlock(), createBlock(unref(N8nIconButton_default), {
 						key: 0,
 						type: "secondary",
 						icon: "arrow-down",
 						class: normalizeClass(_ctx.$style.scrollToBottomButton),
 						title: "Scroll to bottom",
 						onClick: _cache[0] || (_cache[0] = ($event) => scrollToBottom(true))
-					}, null, 8, ["class"])) : createCommentVNode("", true), isInitialized.value ? (openBlock(), createBlock(ChatPrompt_default, {
-						key: 1,
+					}, null, 8, ["class"])) : createCommentVNode("", true), createVNode(ChatPrompt_default, {
 						ref_key: "inputRef",
 						ref: inputRef,
 						class: normalizeClass(_ctx.$style.prompt),
-						"is-responding": unref(chatStore).isResponding,
-						"selected-model": unref(selectedModel),
+						"is-responding": isResponding.value,
+						"selected-model": selectedModel.value ?? null,
 						"is-missing-credentials": isMissingSelectedCredential.value,
+						"is-new-session": isNewSession$1.value,
 						onSubmit,
 						onStop,
 						onSelectModel: handleConfigureModel,
@@ -1164,8 +1006,9 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 						"class",
 						"is-responding",
 						"selected-model",
-						"is-missing-credentials"
-					])) : createCommentVNode("", true)], 2)], 2)]),
+						"is-missing-credentials",
+						"is-new-session"
+					])], 2)], 2)]),
 					_: 1
 				}, 8, ["class"])) : createCommentVNode("", true)
 			], 2);
@@ -1173,17 +1016,17 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	}
 });
 var ChatView_vue_vue_type_style_index_0_lang_module_default = {
-	component: "_component_1wt8h_123",
-	isMobileDevice: "_isMobileDevice_1wt8h_134",
-	scrollArea: "_scrollArea_1wt8h_139",
-	scrollable: "_scrollable_1wt8h_144",
-	isNewChat: "_isNewChat_1wt8h_153",
-	header: "_header_1wt8h_157",
-	starter: "_starter_1wt8h_163",
-	messageList: "_messageList_1wt8h_168",
-	promptContainer: "_promptContainer_1wt8h_184",
-	prompt: "_prompt_1wt8h_184",
-	scrollToBottomButton: "_scrollToBottomButton_1wt8h_206"
+	component: "_component_136cw_123",
+	isMobileDevice: "_isMobileDevice_136cw_134",
+	scrollArea: "_scrollArea_136cw_139",
+	scrollable: "_scrollable_136cw_144",
+	isNewSession: "_isNewSession_136cw_153",
+	header: "_header_136cw_157",
+	starter: "_starter_136cw_163",
+	messageList: "_messageList_136cw_168",
+	promptContainer: "_promptContainer_136cw_184",
+	prompt: "_prompt_136cw_184",
+	scrollToBottomButton: "_scrollToBottomButton_136cw_206"
 };
 var ChatView_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatView_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatView_vue_vue_type_style_index_0_lang_module_default }]]);
 export { ChatView_default as default };