n8n-editor-ui 1.117.1 → 1.118.0

package/dist/assets/{ChatView-09XG3Dk0.js → ChatView-Bpfv5CaB.js}

@@ -1,132 +1,32 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/es-C9hyaXz6.js","assets/core-DfWDGJ3H.js","assets/chunk-6z4oVpB-.js","assets/languageModules-ByRkY5Ff.js","assets/xml-BZFrCZxf.js"])))=>i.map(i=>d[i]);
+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]);
 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, gt as useI18n, j as useLocalStorage } from "./_MapCache-CaP4mhI9.js";
-import { An as N8nHeading_default, Fn as N8nIcon_default, G as N8nOption_default, M as Logo_default, Mn as N8nText_default, Nn as N8nButton_default, O as N8nNavigationDropdown_default, W as N8nSelect_default, _t as N8nInput_default, bt as N8nIconButton_default, ft as N8nTooltip_default, pt as require_markdown_it_link_attributes, r as N8nScrollArea_default } from "./src-Dc6OvOR1.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 "./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-Zm7rqMgr.js";
-import "./icon-bktrs2EQ.js";
-import "./overlay-CVAnTAPu.js";
+import { b as useRouter, x as createEventBus, y as useRoute } from "./truncate-Dc79aML5.js";
+import "./icon-C8yfF1LY.js";
+import "./overlay-DeoWJ8oB.js";
 import "./empty-BuGRxzl4.js";
-import "./dialog-BA_5sIqy.js";
-import { Ht as useCredentialsStore, Li as useUIStore, ir as useUsersStore, kn as useDocumentTitle, yc as v4_default, zo as useSettingsStore } from "./useTelemetry-DMMCGp2b.js";
-import { t as useToast } from "./useToast-C1ZpPbXg.js";
+import "./dialog-B1U4ND70.js";
+import { Ht as useCredentialsStore, Li as useUIStore, ir as useUsersStore, kn as useDocumentTitle, yc as v4_default } from "./useTelemetry-C-PPHLYt.js";
+import { t as useToast } from "./useToast-DT24R-_J.js";
 import "./sanitize-html-BuXr7o4T.js";
 import "./path-browserify-DsmB_HMK.js";
-import { $a as PROVIDER_CREDENTIAL_TYPE_MAP, Co as nullType, Fn as LOCAL_STORAGE_CHAT_HUB_CREDENTIALS, In as LOCAL_STORAGE_CHAT_HUB_SELECTED_MODEL, To as stringType, eo as chatHubConversationModelSchema, to as chatHubProviderSchema, wo as recordType } from "./constants-yBDcqULv.js";
-import "./merge-BONzxfgw.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-CO7BXe8z.js";
+import "./merge-Db6rb1_m.js";
 import "./dateformat-D7TIhVd4.js";
-import "./useDebounce-BDOVCaxX.js";
-import "./useExternalHooks-zp0_PYje.js";
-import { t as useClipboard } from "./useClipboard-Bo6m_x4c.js";
-import { t as Modal_default } from "./Modal-ykm6-05k.js";
-import { t as CredentialIcon_default } from "./CredentialIcon-OH0fpAxA.js";
-import { a as providerDisplayNames, i as MOBILE_MEDIA_QUERY, r as CHAT_VIEW, t as CHAT_CONVERSATION_VIEW } from "./constants-BlMVf5I9.js";
-import { t as VueMarkdown_default } from "./VueMarkdown-D7xE_eXp.js";
-import { n as useChatStore, r as findOneFromModelsResponse, t as useChatHubSidebarState } from "./useChatHubSidebarState-CVPEM_x0.js";
-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 }]]);
+import "./useDebounce-BRhQZVIC.js";
+import "./useExternalHooks-DA3PzQce.js";
+import "./retry-sDkwzrPY.js";
+import { t as useClipboard } from "./useClipboard-Ds1DthAm.js";
+import { t as Modal_default } from "./Modal-3SRv9esg.js";
+import { t as CredentialIcon_default } from "./CredentialIcon-BcBcgIsH.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-B3pC_PWc.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: {
@@ -135,55 +35,66 @@ var ModelSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		credentialsName: {}
 	},
 	emits: ["change", "configure"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const menu = computed(() => chatHubProviderSchema.options.map((provider) => {
+		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) => ({
-				id: `${provider}::${model.name}`,
-				title: model.name,
-				disabled: false
-			})) : 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: modelOptions.concat([...modelOptions.length > 0 ? [{
-					isDivider: true,
-					id: "divider"
-				}] : [], {
-					id: `${provider}::configure`,
-					icon: "settings",
-					title: "Configure credentials...",
-					disabled: false
-				}])
+				submenu
 			};
 		}));
 		const selectedLabel = computed(() => {
 			if (!props.selectedModel) return "Select model";
-			return props.selectedModel.model;
+			return props.selectedModel.name;
 		});
 		function onSelect(id) {
-			const [provider, model] = id.split("::");
+			const [provider, identifier] = id.split("::");
 			const parsedProvider = chatHubProviderSchema.safeParse(provider).data;
 			if (!parsedProvider) return;
-			if (model === "configure") {
+			if (identifier === "configure" && parsedProvider !== "n8n") {
 				emit("configure", parsedProvider);
 				return;
 			}
-			emit("change", {
-				provider: parsedProvider,
-				model,
-				workflowId: null
-			});
+			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
 			}, {
@@ -199,7 +110,7 @@ var ModelSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					text: ""
 				}, {
 					default: withCtx(() => [
-						_ctx.selectedModel ? (openBlock(), createBlock(CredentialIcon_default, {
+						_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,
@@ -244,30 +155,20 @@ var ChatConversationHeader_vue_vue_type_script_setup_true_lang_default = /* @__P
 	},
 	emits: [
 		"selectModel",
-		"selectCredentials",
+		"setCredentials",
 		"renameConversation"
 	],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
 		const sidebar = useChatHubSidebarState();
 		const chatStore = useChatStore();
-		const uiStore = useUIStore();
 		const credentialsStore = useCredentialsStore();
 		const router = useRouter();
-		const credentialSelectorProvider = ref(null);
+		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);
 		}
-		function onConfigure(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 onNewChat() {
 			sidebar.toggleOpen(false);
 			router.push({
@@ -275,12 +176,7 @@ var ChatConversationHeader_vue_vue_type_script_setup_true_lang_default = /* @__P
 				force: true
 			});
 		}
-		function onCredentialSelected(provider, credentialsId) {
-			emit("selectCredentials", provider, credentialsId);
-		}
-		function onCreateNewCredential(provider) {
-			uiStore.openNewCredential(PROVIDER_CREDENTIAL_TYPE_MAP[provider]);
-		}
+		__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), {
@@ -302,23 +198,18 @@ var ChatConversationHeader_vue_vue_type_script_setup_true_lang_default = /* @__P
 					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
+					onConfigure: _cache[1] || (_cache[1] = ($event) => emit("setCredentials", $event))
 				}, null, 8, [
 					"models",
 					"selected-model",
 					"credentials-name"
-				]),
-				credentialSelectorProvider.value ? (openBlock(), createBlock(CredentialSelectorModal_default, {
-					key: credentialSelectorProvider.value,
-					provider: credentialSelectorProvider.value,
-					"initial-value": _ctx.credentials[credentialSelectorProvider.value] ?? null,
-					onSelect: onCredentialSelected,
-					onCreateNew: onCreateNewCredential
-				}, null, 8, ["provider", "initial-value"])) : createCommentVNode("", true)
+				])
 			], 2);
 		};
 	}
@@ -495,7 +386,7 @@ function useChatHubMarkdownOptions() {
 		try {
 			asyncImport = {
 				status: "inProgress",
-				promise: Promise.all([__vitePreload(() => import("./es-C9hyaXz6.js"), __vite__mapDeps([0,1,2])), __vitePreload(() => import("./languageModules-ByRkY5Ff.js"), __vite__mapDeps([3,4]))])
+				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" };
@@ -541,7 +432,7 @@ var ChatMessage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			volume: 1
 		});
 		const credentialTypeName = computed(() => {
-			if (__props.message.type !== "ai" || !__props.message.provider) return null;
+			if (__props.message.type !== "ai" || !__props.message.provider || __props.message.provider === "n8n") return null;
 			return PROVIDER_CREDENTIAL_TYPE_MAP[__props.message.provider] ?? null;
 		});
 		async function handleCopy() {
@@ -559,7 +450,7 @@ var ChatMessage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			emit("cancelEdit");
 		}
 		function handleConfirmEdit() {
-			if (__props.message.type === "ai" || !editedText.value.trim()) return;
+			if (!editedText.value.trim()) return;
 			emit("update", {
 				...__props.message,
 				content: editedText.value
@@ -707,11 +598,16 @@ var ChatMessage_default = /* @__PURE__ */ __plugin_vue_export_helper_default(Cha
 var ChatPrompt_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ChatPrompt",
 	props: {
-		placeholder: {},
-		disabled: { type: Boolean },
-		isResponding: { type: Boolean }
+		isResponding: { type: Boolean },
+		selectedModel: {},
+		isMissingCredentials: { type: Boolean }
 	},
-	emits: ["submit", "stop"],
+	emits: [
+		"submit",
+		"stop",
+		"selectModel",
+		"setCredentials"
+	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
 		const inputRef = useTemplateRef("inputRef");
@@ -722,9 +618,13 @@ var ChatPrompt_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			interimResults: true,
 			lang: navigator.language
 		});
-		function onAttach() {}
+		const placeholder = computed(() => {
+			if (!__props.selectedModel) return "Select a model";
+			return `Message ${__props.selectedModel.name}`;
+		});
 		function onMic() {
-			speechInput.isListening.value ? speechInput.stop() : speechInput.start();
+			if (speechInput.isListening.value) speechInput.stop();
+			else speechInput.start();
 		}
 		function onStop() {
 			emit("stop");
@@ -767,42 +667,62 @@ var ChatPrompt_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			return openBlock(), createElementBlock("form", {
 				class: normalizeClass(_ctx.$style.prompt),
 				onSubmit: withModifiers(handleSubmitForm, ["prevent"])
-			}, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.inputWrap) }, [createVNode(unref(N8nInput_default), {
-				ref_key: "inputRef",
-				ref: inputRef,
-				modelValue: message$1.value,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => message$1.value = $event),
-				class: normalizeClass(_ctx.$style.input),
-				type: "textarea",
-				placeholder: _ctx.placeholder,
-				autocomplete: "off",
-				autosize: {
-					minRows: 1,
-					maxRows: 6
-				},
-				autofocus: "",
-				onKeydown: handleKeydownTextarea
-			}, null, 8, [
-				"modelValue",
-				"class",
-				"placeholder"
-			]), createBaseVNode("div", { class: normalizeClass(_ctx.$style.actions) }, [
-				createVNode(unref(N8nIconButton_default), {
-					"native-type": "button",
-					type: "secondary",
-					title: "Attach",
-					disabled: _ctx.disabled,
-					icon: "paperclip",
-					"icon-size": "large",
-					text: "",
-					onClick: onAttach
-				}, null, 8, ["disabled"]),
-				unref(speechInput).isSupported ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+			}, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.inputWrap) }, [
+				!_ctx.selectedModel ? (openBlock(), createBlock(unref(N8nText_default), {
+					key: 0,
+					class: normalizeClass(_ctx.$style.callout)
+				}, {
+					default: withCtx(() => [
+						_cache[3] || (_cache[3] = 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 "))
+					]),
+					_: 1
+				}, 8, ["class"])) : _ctx.isMissingCredentials ? (openBlock(), createBlock(unref(N8nText_default), {
+					key: 1,
+					class: normalizeClass(_ctx.$style.callout)
+				}, {
+					default: withCtx(() => [
+						_cache[5] || (_cache[5] = createTextVNode(" Please ")),
+						createBaseVNode("a", {
+							href: "",
+							onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("setCredentials", _ctx.selectedModel.provider), ["prevent"]))
+						}, " set credentials "),
+						createTextVNode(" for " + toDisplayString(unref(providerDisplayNames)[_ctx.selectedModel.provider]) + " to start a conversation ", 1)
+					]),
+					_: 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),
+					class: normalizeClass(_ctx.$style.input),
+					type: "textarea",
+					placeholder: placeholder.value,
+					autocomplete: "off",
+					autosize: {
+						minRows: 1,
+						maxRows: 6
+					},
+					autofocus: "",
+					disabled: _ctx.isMissingCredentials || !_ctx.selectedModel,
+					onKeydown: handleKeydownTextarea
+				}, null, 8, [
+					"modelValue",
+					"class",
+					"placeholder",
+					"disabled"
+				]),
+				createBaseVNode("div", { class: normalizeClass(_ctx.$style.actions) }, [unref(speechInput).isSupported ? (openBlock(), createBlock(unref(N8nIconButton_default), {
 					key: 0,
 					"native-type": "button",
 					title: unref(speechInput).isListening.value ? "Stop recording" : "Voice input",
 					type: "secondary",
-					disabled: _ctx.disabled,
+					disabled: _ctx.isMissingCredentials || !_ctx.selectedModel || _ctx.isResponding,
 					icon: unref(speechInput).isListening.value ? "square" : "mic",
 					class: normalizeClass({ [_ctx.$style.recording]: unref(speechInput).isListening.value }),
 					"icon-size": "large",
@@ -812,11 +732,10 @@ var ChatPrompt_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"disabled",
 					"icon",
 					"class"
-				])) : createCommentVNode("", true),
-				!_ctx.isResponding ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+				])) : createCommentVNode("", true), !_ctx.isResponding ? (openBlock(), createBlock(unref(N8nIconButton_default), {
 					key: 1,
 					"native-type": "submit",
-					disabled: _ctx.disabled || !message$1.value.trim(),
+					disabled: _ctx.isMissingCredentials || !_ctx.selectedModel || !message$1.value.trim(),
 					title: "Send",
 					icon: "arrow-up",
 					"icon-size": "large"
@@ -827,18 +746,19 @@ var ChatPrompt_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					icon: "square",
 					"icon-size": "large",
 					onClick: onStop
-				}))
-			], 2)], 2)], 34);
+				}))], 2)
+			], 2)], 34);
 		};
 	}
 });
 var ChatPrompt_vue_vue_type_style_index_0_lang_module_default = {
-	prompt: "_prompt_16ldr_123",
-	inputWrap: "_inputWrap_16ldr_128",
-	input: "_input_16ldr_128",
-	actions: "_actions_16ldr_146",
-	recording: "_recording_16ldr_159",
-	chatHubPromptRecordingPulse: "_chatHubPromptRecordingPulse_16ldr_1"
+	prompt: "_prompt_l0yq4_123",
+	inputWrap: "_inputWrap_l0yq4_128",
+	callout: "_callout_l0yq4_136",
+	input: "_input_l0yq4_128",
+	actions: "_actions_l0yq4_164",
+	recording: "_recording_l0yq4_177",
+	chatHubPromptRecordingPulse: "_chatHubPromptRecordingPulse_l0yq4_1"
 };
 var ChatPrompt_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatPrompt_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatPrompt_vue_vue_type_style_index_0_lang_module_default }]]);
 var ChatStarter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -846,21 +766,16 @@ var ChatStarter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	props: { isMobileDevice: { type: Boolean } },
 	setup(__props) {
 		const userStore = useUsersStore();
-		const settingsStore = useSettingsStore();
 		const greetings = computed(() => `Hello, ${userStore.currentUser?.firstName ?? userStore.currentUser?.fullName ?? "User"}!`);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass([_ctx.$style.starter, { [_ctx.$style.isMobileDevice]: _ctx.isMobileDevice }]) }, [createVNode(Logo_default, {
-				size: "large",
-				collapsed: "",
-				"release-channel": unref(settingsStore).settings.releaseChannel
-			}, null, 8, ["release-channel"]), createBaseVNode("div", { class: normalizeClass(_ctx.$style.header) }, [createVNode(unref(N8nHeading_default), {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([_ctx.$style.starter, { [_ctx.$style.isMobileDevice]: _ctx.isMobileDevice }]) }, [createVNode(unref(N8nHeading_default), {
 				tag: "h2",
 				bold: "",
 				size: "xlarge"
 			}, {
 				default: withCtx(() => [createTextVNode(toDisplayString(greetings.value), 1)]),
 				_: 1
-			})], 2)], 2);
+			})], 2);
 		};
 	}
 });
@@ -872,6 +787,107 @@ var ChatStarter_vue_vue_type_style_index_0_lang_module_default = {
 };
 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) {
@@ -883,6 +899,8 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const toast = useToast();
 		const isMobileDevice$1 = useMediaQuery(MOBILE_MEDIA_QUERY);
 		const documentTitle = useDocumentTitle();
+		const uiStore = useUIStore();
+		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);
@@ -923,6 +941,7 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			}
 		});
 		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(() => ({
@@ -931,12 +950,24 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		}));
 		const chatMessages = computed(() => chatStore.getActiveMessages(sessionId.value));
 		const isNewChat$1 = computed(() => route.name === CHAT_VIEW);
-		const inputPlaceholder = computed(() => {
-			if (!selectedModel.value) return "Select a model";
-			return `Message ${selectedModel.value.model}`;
+		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 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);
 		function scrollToBottom(smooth) {
 			scrollContainerRef.value?.scrollTo({
 				top: scrollableRef.value?.scrollHeight,
@@ -961,6 +992,7 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		watch(mergedCredentials, async (credentials) => {
 			const models = await chatStore.fetchChatModels(credentials);
 			if (selectedModel.value === null) selectedModel.value = findOneFromModelsResponse(models) ?? null;
+			initialization.value.modelsFetched = true;
 		}, { immediate: true });
 		watch([sessionId, isNewSession], async ([id, isNew]) => {
 			didSubmitInCurrentSession.value = false;
@@ -977,15 +1009,17 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		}, { 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) return;
-			const credentialsId = selectedModel.value ? mergedCredentials.value[selectedModel.value.provider] : void 0;
+			if (!message$1.trim() || chatStore.isResponding || !selectedModel.value || isMissingSelectedCredential.value) return;
 			didSubmitInCurrentSession.value = true;
-			chatStore.sendMessage(sessionId.value, message$1, selectedModel.value, selectedModel.value && credentialsId ? { [PROVIDER_CREDENTIAL_TYPE_MAP[selectedModel.value.provider]]: {
-				id: credentialsId,
+			const credentials = {};
+			if (selectedModel.value.provider !== "n8n" && credentialsId.value) Object.assign(credentials, { [PROVIDER_CREDENTIAL_TYPE_MAP[selectedModel.value.provider]]: {
+				id: credentialsId.value,
 				name: ""
-			} } : null);
+			} });
+			chatStore.sendMessage(sessionId.value, message$1, selectedModel.value, credentials);
 			inputRef.value?.setText("");
 			if (isNewSession.value) router.push({
 				name: CHAT_CONVERSATION_VIEW,
@@ -1002,111 +1036,139 @@ var ChatView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			editingMessageId.value = void 0;
 		}
 		function handleEditMessage(message$1) {
-			if (chatStore.isResponding || message$1.type !== "human" || !selectedModel.value) return;
-			const credentialsId = mergedCredentials.value[selectedModel.value.provider];
-			if (!credentialsId) return;
-			const mesasgeToEdit = message$1.revisionOfMessageId ?? message$1.id;
-			chatStore.editMessage(sessionId.value, mesasgeToEdit, message$1.content, selectedModel.value, { [PROVIDER_CREDENTIAL_TYPE_MAP[selectedModel.value.provider]]: {
-				id: credentialsId,
+			if (chatStore.isResponding || !["human", "ai"].includes(message$1.type) || !selectedModel.value || !credentialsId.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: ""
 			} });
 			editingMessageId.value = void 0;
 		}
 		function handleRegenerateMessage(message$1) {
-			if (chatStore.isResponding || message$1.type !== "ai" || !selectedModel.value) return;
-			const credentialsId = mergedCredentials.value[selectedModel.value.provider];
-			if (!credentialsId) return;
+			if (chatStore.isResponding || message$1.type !== "ai" || !selectedModel.value || !credentialsId.value) return;
 			const messageToRetry = message$1.retryOfMessageId ?? message$1.id;
-			chatStore.regenerateMessage(sessionId.value, messageToRetry, selectedModel.value, { [PROVIDER_CREDENTIAL_TYPE_MAP[selectedModel.value.provider]]: {
-				id: credentialsId,
+			chatStore.regenerateMessage(sessionId.value, messageToRetry, selectedModel.value, selectedModel.value.provider === "n8n" ? {} : { [PROVIDER_CREDENTIAL_TYPE_MAP[selectedModel.value.provider]]: {
+				id: credentialsId.value,
 				name: ""
 			} });
 		}
 		function handleSelectModel(selection) {
 			selectedModel.value = selection;
 		}
-		function handleSelectCredentials(provider, credentialsId) {
+		function handleSelectCredentials(provider, id) {
 			selectedCredentials.value = {
 				...selectedCredentials.value,
-				[provider]: credentialsId
+				[provider]: id
 			};
 		}
 		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 handleConfigureModel() {
+			headerRef.value?.openModelSelector();
+		}
+		function handleCreateNewCredential(provider) {
+			uiStore.openNewCredential(PROVIDER_CREDENTIAL_TYPE_MAP[provider]);
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass([_ctx.$style.component, {
 				[_ctx.$style.isNewChat]: isNewChat$1.value,
 				[_ctx.$style.isMobileDevice]: unref(isMobileDevice$1)
-			}]) }, [createVNode(ChatConversationHeader_default, {
-				"selected-model": unref(selectedModel),
-				credentials: mergedCredentials.value,
-				onSelectModel: handleSelectModel,
-				onSelectCredentials: handleSelectCredentials
-			}, null, 8, ["selected-model", "credentials"]), createVNode(unref(N8nScrollArea_default), {
-				type: "scroll",
-				"enable-vertical-scroll": true,
-				"enable-horizontal-scroll": false,
-				"as-child": "",
-				class: normalizeClass(_ctx.$style.scrollArea)
-			}, {
-				default: withCtx(() => [createBaseVNode("div", {
-					class: normalizeClass(_ctx.$style.scrollable),
-					ref: "scrollable"
-				}, [isNewChat$1.value ? (openBlock(), createBlock(ChatStarter_default, {
+			}]) }, [
+				isInitialized.value ? (openBlock(), createBlock(ChatConversationHeader_default, {
 					key: 0,
-					class: normalizeClass(_ctx.$style.starter),
-					"is-mobile-device": unref(isMobileDevice$1)
-				}, null, 8, ["class", "is-mobile-device"])) : (openBlock(), createElementBlock("div", {
-					key: 1,
-					role: "log",
-					"aria-live": "polite",
-					class: normalizeClass(_ctx.$style.messageList)
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(chatMessages.value, (message$1, index) => {
-					return openBlock(), createBlock(ChatMessage_default, {
-						key: message$1.id,
-						message: message$1,
-						compact: unref(isMobileDevice$1),
-						"is-editing": editingMessageId.value === message$1.id,
-						"is-streaming": unref(chatStore).streamingMessageId === message$1.id,
-						"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,
-						onRegenerate: handleRegenerateMessage,
-						onUpdate: handleEditMessage,
-						onSwitchAlternative: handleSwitchAlternative
+					ref_key: "headerRef",
+					ref: headerRef,
+					"selected-model": unref(selectedModel),
+					credentials: mergedCredentials.value,
+					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,
+					type: "scroll",
+					"enable-vertical-scroll": true,
+					"enable-horizontal-scroll": false,
+					"as-child": "",
+					class: normalizeClass(_ctx.$style.scrollArea)
+				}, {
+					default: withCtx(() => [createBaseVNode("div", {
+						class: normalizeClass(_ctx.$style.scrollable),
+						ref: "scrollable"
+					}, [isNewChat$1.value ? (openBlock(), createBlock(ChatStarter_default, {
+						key: 0,
+						class: normalizeClass(_ctx.$style.starter),
+						"is-mobile-device": unref(isMobileDevice$1)
+					}, null, 8, ["class", "is-mobile-device"])) : (openBlock(), createElementBlock("div", {
+						key: 1,
+						role: "log",
+						"aria-live": "polite",
+						class: normalizeClass(_ctx.$style.messageList)
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(chatMessages.value, (message$1, index) => {
+						return openBlock(), createBlock(ChatMessage_default, {
+							key: message$1.id,
+							message: message$1,
+							compact: unref(isMobileDevice$1),
+							"is-editing": editingMessageId.value === message$1.id,
+							"is-streaming": unref(chatStore).streamingMessageId === message$1.id,
+							"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,
+							onRegenerate: handleRegenerateMessage,
+							onUpdate: handleEditMessage,
+							onSwitchAlternative: handleSwitchAlternative
+						}, null, 8, [
+							"message",
+							"compact",
+							"is-editing",
+							"is-streaming",
+							"min-height",
+							"onStartEdit"
+						]);
+					}), 128))], 2)), createBaseVNode("div", { class: normalizeClass(_ctx.$style.promptContainer) }, [!unref(arrivedState).bottom && !isNewChat$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,
+						ref_key: "inputRef",
+						ref: inputRef,
+						class: normalizeClass(_ctx.$style.prompt),
+						"is-responding": unref(chatStore).isResponding,
+						"selected-model": unref(selectedModel),
+						"is-missing-credentials": isMissingSelectedCredential.value,
+						onSubmit,
+						onStop,
+						onSelectModel: handleConfigureModel,
+						onSetCredentials: handleConfigureCredentials
 					}, null, 8, [
-						"message",
-						"compact",
-						"is-editing",
-						"is-streaming",
-						"min-height",
-						"onStartEdit"
-					]);
-				}), 128))], 2)), createBaseVNode("div", { class: normalizeClass(_ctx.$style.promptContainer) }, [!unref(arrivedState).bottom && !isNewChat$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), createVNode(ChatPrompt_default, {
-					ref_key: "inputRef",
-					ref: inputRef,
-					class: normalizeClass(_ctx.$style.prompt),
-					placeholder: inputPlaceholder.value,
-					"is-responding": unref(chatStore).isResponding,
-					disabled: unref(chatStore).isResponding,
-					onSubmit,
-					onStop
-				}, null, 8, [
-					"class",
-					"placeholder",
-					"is-responding",
-					"disabled"
-				])], 2)], 2)]),
-				_: 1
-			}, 8, ["class"])], 2);
+						"class",
+						"is-responding",
+						"selected-model",
+						"is-missing-credentials"
+					])) : createCommentVNode("", true)], 2)], 2)]),
+					_: 1
+				}, 8, ["class"])) : createCommentVNode("", true)
+			], 2);
 		};
 	}
 });