@n8n/design-system 1.104.0 → 1.104.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @n8n/design-system@1.104.0 build /home/runner/work/n8n/n8n/packages/frontend/@n8n/design-system
+> @n8n/design-system@1.104.1 build /home/runner/work/n8n/n8n/packages/frontend/@n8n/design-system
 > vite build
 
 rolldown-vite v7.1.16 building for production...
@@ -9,10 +9,10 @@ computing gzip size...
 dist/design-system.css          109.69 kB │ gzip:  17.41 kB
 dist/en-BIzD-hdW.js               0.08 kB │ gzip:   0.08 kB
 dist/en-DaqoBz3R.js               4.79 kB │ gzip:   1.71 kB
-dist/n8n-design-system.es.js  1,623.97 kB │ gzip: 410.53 kB
+dist/n8n-design-system.es.js  1,624.27 kB │ gzip: 410.61 kB
 
 rendering chunks...
 computing gzip size...
 dist/design-system.css           109.69 kB │ gzip:  17.41 kB
-dist/n8n-design-system.umd.js  1,225.83 kB │ gzip: 363.00 kB
-✓ built in 19.12s
+dist/n8n-design-system.umd.js  1,226.05 kB │ gzip: 363.05 kB
+✓ built in 16.33s

package/dist/n8n-design-system.es.js

@@ -28434,7 +28434,7 @@ var ScrollAreaScrollbarX_default = /* @__PURE__ */ defineComponent({
 		modelValue: { default: "" },
 		placeholder: { default: "" },
 		maxLength: { default: 5e3 },
-		maxLinesBeforeScroll: { default: 6 },
+		maxLinesBeforeScroll: { default: 10 },
 		minLines: { default: 1 },
 		streaming: {
 			type: Boolean,
@@ -28464,95 +28464,100 @@ var ScrollAreaScrollbarX_default = /* @__PURE__ */ defineComponent({
 		"upgrade-click"
 	],
 	setup(e, { expose: n, emit: r }) {
-		let o = e, s = r, { t: l } = useI18n(), d = ref(), f = ref(), k = ref(!1), $ = ref(o.modelValue || ""), j7 = ref(o.minLines > 1 ? lineHeight * o.minLines : singleLineHeight), M7 = ref(o.minLines > 1), N7 = computed(() => o.maxLinesBeforeScroll * 18), { characterCount: P7, isOverLimit: F7, isAtLimit: I7 } = useCharacterLimit({
-			value: $,
+		let o = e, s = r, { t: l } = useI18n(), d = ref(), f = ref(), k = ref(), $ = ref(!1), j7 = ref(o.modelValue || ""), M7 = ref(o.minLines > 1 ? lineHeight * o.minLines : singleLineHeight), N7 = ref(o.minLines > 1), P7 = computed(() => o.maxLinesBeforeScroll * 18), { characterCount: F7, isOverLimit: I7, isAtLimit: L7 } = useCharacterLimit({
+			value: j7,
 			maxLength: toRef(o, "maxLength")
-		}), L7 = computed(() => I7.value), R7 = computed(() => !$.value.trim() || o.streaming || o.disabled || F7.value || o.creditsRemaining === 0), z7 = computed(() => ({ minHeight: M7.value ? "80px" : "40px" })), B7 = computed(() => o.creditsQuota !== void 0 && o.creditsRemaining !== void 0 && o.creditsQuota !== INFINITE_CREDITS), V7 = computed(() => !B7.value || o.creditsRemaining === void 0 ? "" : l("promptInput.creditsInfo", {
+		}), R7 = computed(() => L7.value), z7 = computed(() => !j7.value.trim() || o.streaming || o.disabled || I7.value || o.creditsRemaining === 0), B7 = computed(() => ({ minHeight: N7.value ? "80px" : "40px" })), V7 = computed(() => o.creditsQuota !== void 0 && o.creditsRemaining !== void 0 && o.creditsQuota !== INFINITE_CREDITS), H7 = computed(() => !V7.value || o.creditsRemaining === void 0 ? "" : l("promptInput.creditsInfo", {
 			remaining: o.creditsRemaining,
 			total: o.creditsQuota
-		})), H7 = () => {
+		})), G7 = () => {
 			let e = /* @__PURE__ */ new Date();
 			return new Date(e.getFullYear(), e.getMonth() + 1, 1).toLocaleDateString("en-US", {
 				month: "long",
 				day: "numeric",
 				year: "numeric"
 			});
-		}, G7 = computed(() => {
-			if (!B7.value) return "";
-			let e = H7();
+		}, q7 = computed(() => {
+			if (!V7.value) return "";
+			let e = G7();
 			return [
 				l("promptInput.remainingCredits", { count: o.creditsRemaining ?? 0 }),
 				l("promptInput.monthlyCredits", { count: o.creditsQuota ?? 0 }),
 				l("promptInput.creditsRenew", { date: e }),
 				l("promptInput.creditsExpire", { date: e })
 			].join("<br />");
-		}), q7 = computed(() => B7.value && o.creditsRemaining === 0), J7 = computed(() => M7.value ? {
-			height: `${Math.min(j7.value, N7.value)}px`,
+		}), J7 = computed(() => V7.value && o.creditsRemaining === 0), Y7 = computed(() => N7.value ? {
+			height: `${M7.value}px`,
 			overflowY: "hidden"
 		} : {});
-		function Y7() {
-			let e = document.activeElement === d.value, n = M7.value, r = o.minLines > 1 ? lineHeight * o.minLines : singleLineHeight;
-			if (!$.value || $.value === "") {
-				o.minLines > 1 ? (M7.value = !0, j7.value = r, d.value && (d.value.style.height = `${r}px`)) : (M7.value = !1, j7.value = singleLineHeight, d.value && (d.value.style.height = `${singleLineHeight}px`));
+		function Z7() {
+			let e = document.activeElement === d.value, n = N7.value, r = o.minLines > 1 ? lineHeight * o.minLines : singleLineHeight;
+			if (!j7.value || j7.value === "") {
+				o.minLines > 1 ? (N7.value = !0, M7.value = r, d.value && (d.value.style.height = `${r}px`)) : (N7.value = !1, M7.value = singleLineHeight, d.value && (d.value.style.height = `${singleLineHeight}px`));
 				return;
 			}
 			if (!d.value) return;
-			d.value.style.height = "0";
-			let i = d.value.scrollHeight, s = o.minLines > 1 || i > singleLineHeight || $.value.includes("\n");
-			j7.value = Math.max(i, r), M7.value = s, M7.value ? d.value.style.height = `${Math.max(i, r)}px` : d.value.style.height = `${singleLineHeight}px`, (n !== M7.value || e) && nextTick(() => {
+			let i = null, s = 0;
+			n && k.value && (i = k.value.$el?.querySelector("[data-reka-scroll-area-viewport]"), i && (s = i.scrollTop));
+			let l = d.value.style.height;
+			d.value.style.height = "auto";
+			let f = d.value.scrollHeight;
+			d.value.style.height = l;
+			let p = o.minLines > 1 || f > singleLineHeight || j7.value.includes("\n"), _ = Math.max(f, r);
+			M7.value = _, N7.value = p, N7.value ? (d.value.style.height = `${_}px`, i && n && s > 0 && (i.scrollTop = s)) : d.value.style.height = `${singleLineHeight}px`, (n !== N7.value || e) && nextTick(() => {
 				d.value?.focus();
 			});
 		}
 		watch(() => o.modelValue, async (e) => {
-			$.value = e || "", await nextTick(), await new Promise(requestAnimationFrame), Y7();
-		}), watch($, (e, n) => {
-			s("update:modelValue", e), e !== n && nextTick(() => Y7());
+			j7.value = e || "", await nextTick(), await new Promise(requestAnimationFrame), Z7();
+		}), watch(j7, (e, n) => {
+			s("update:modelValue", e), e !== n && nextTick(() => Z7());
 		});
-		async function Z7() {
-			await nextTick(), await new Promise(requestAnimationFrame), d.value?.focus();
-		}
 		async function Q7() {
-			s("submit"), o.refocusAfterSend && await Z7();
+			await nextTick(), await new Promise(requestAnimationFrame), d.value?.focus();
 		}
 		async function $7() {
-			s("stop"), o.refocusAfterSend && await Z7();
+			s("submit"), o.refocusAfterSend && await Q7();
+		}
+		async function t9() {
+			s("stop"), o.refocusAfterSend && await Q7();
 		}
-		async function t9(e) {
-			let n = e.ctrlKey || e.metaKey, r = e.key.length === 1 && !n, i = e.key === "Backspace" || e.key === "Delete", s = P7.value >= o.maxLength, l = e.key === "Enter" && !e.shiftKey, f = e.key === "Enter" && e.shiftKey;
+		async function n9(e) {
+			let n = e.ctrlKey || e.metaKey, r = e.key.length === 1 && !n, i = e.key === "Backspace" || e.key === "Delete", s = F7.value >= o.maxLength, l = e.key === "Enter" && !e.shiftKey, f = e.key === "Enter" && e.shiftKey;
 			if (s && r && !i) {
 				e.preventDefault();
 				return;
 			}
-			if (l && (e.preventDefault(), R7.value || await Q7()), f) {
+			if (l && (e.preventDefault(), z7.value || await $7()), f) {
 				e.preventDefault();
 				let n = e.target, r = n.selectionStart, i = n.selectionEnd;
-				$.value = $.value.substring(0, r) + "\n" + $.value.substring(i), await nextTick(), d.value && (d.value.selectionStart = d.value.selectionEnd = r + 1);
+				j7.value = j7.value.substring(0, r) + "\n" + j7.value.substring(i), await nextTick(), d.value && (d.value.selectionStart = d.value.selectionEnd = r + 1);
 			}
 		}
-		function n9(e) {
-			k.value = !0, s("focus", e);
-		}
 		function r9(e) {
-			k.value = !1, s("blur", e);
+			$.value = !0, s("focus", e);
+		}
+		function i9(e) {
+			$.value = !1, s("blur", e);
 		}
-		function i9() {
+		function a9() {
 			d.value?.focus();
 		}
 		return onMounted(() => {
-			nextTick(() => Y7());
-		}), n({ focusInput: i9 }), (e, n) => {
+			nextTick(() => Z7());
+		}), n({ focusInput: a9 }), (e, n) => {
 			let r = resolveDirective("n8n-html");
 			return openBlock(), createElementBlock("div", { class: normalizeClass(e.$style.wrapper) }, [createElementVNode("div", {
 				ref_key: "containerRef",
 				ref: f,
 				class: normalizeClass([e.$style.container, {
-					[e.$style.focused]: k.value,
-					[e.$style.multiline]: M7.value,
-					[e.$style.disabled]: e.disabled || q7.value,
-					[e.$style.withBottomBorder]: !!B7.value
+					[e.$style.focused]: $.value,
+					[e.$style.multiline]: N7.value,
+					[e.$style.disabled]: e.disabled || J7.value,
+					[e.$style.withBottomBorder]: !!V7.value
 				}]),
-				style: normalizeStyle(z7.value)
-			}, [L7.value ? (openBlock(), createBlock(Callout_default, {
+				style: normalizeStyle(B7.value)
+			}, [R7.value ? (openBlock(), createBlock(Callout_default, {
 				key: 0,
 				slim: "",
 				icon: "info",
@@ -28561,67 +28566,69 @@ var ScrollAreaScrollbarX_default = /* @__PURE__ */ defineComponent({
 			}, {
 				default: withCtx(() => [createTextVNode(toDisplayString(unref(l)("assistantChat.characterLimit", { limit: e.maxLength.toString() })), 1)]),
 				_: 1
-			}, 8, ["class"])) : createCommentVNode("", !0), M7.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(N8nScrollArea_default$1, {
+			}, 8, ["class"])) : createCommentVNode("", !0), N7.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(N8nScrollArea_default$1, {
+				ref_key: "scrollAreaRef",
+				ref: k,
 				class: normalizeClass(e.$style.scrollAreaWrapper),
-				"max-height": `${N7.value}px`,
+				"max-height": `${P7.value}px`,
 				type: "auto"
 			}, {
 				default: withCtx(() => [withDirectives(createElementVNode("textarea", {
 					ref_key: "textareaRef",
 					ref: d,
-					"onUpdate:modelValue": n[1] ||= (e) => $.value = e,
+					"onUpdate:modelValue": n[1] ||= (e) => j7.value = e,
 					class: normalizeClass([
 						e.$style.multilineTextarea,
 						"ignore-key-press-node-creator",
 						"ignore-key-press-canvas"
 					]),
-					style: normalizeStyle(J7.value),
-					placeholder: q7.value ? "" : e.placeholder,
-					disabled: e.disabled || q7.value,
+					style: normalizeStyle(Y7.value),
+					placeholder: J7.value ? "" : e.placeholder,
+					disabled: e.disabled || J7.value,
 					maxlength: e.maxLength,
-					onKeydown: t9,
-					onFocus: n9,
-					onBlur: r9,
-					onInput: Y7
-				}, null, 46, _hoisted_2$20), [[vModelText, $.value]])]),
+					onKeydown: n9,
+					onFocus: r9,
+					onBlur: i9,
+					onInput: Z7
+				}, null, 46, _hoisted_2$20), [[vModelText, j7.value]])]),
 				_: 1
 			}, 8, ["class", "max-height"]), createElementVNode("div", { class: normalizeClass(e.$style.bottomActions) }, [createVNode(unref(N8nSendStopButton_default), {
 				"data-test-id": "send-message-button",
 				streaming: e.streaming,
-				disabled: R7.value,
-				onSend: Q7,
-				onStop: $7
+				disabled: z7.value,
+				onSend: $7,
+				onStop: t9
 			}, null, 8, ["streaming", "disabled"])], 2)], 64)) : (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(e.$style.singleLineWrapper)
 			}, [withDirectives(createElementVNode("textarea", {
 				ref_key: "textareaRef",
 				ref: d,
-				"onUpdate:modelValue": n[0] ||= (e) => $.value = e,
+				"onUpdate:modelValue": n[0] ||= (e) => j7.value = e,
 				class: normalizeClass([
 					e.$style.singleLineTextarea,
 					"ignore-key-press-node-creator",
 					"ignore-key-press-canvas"
 				]),
-				placeholder: q7.value ? "" : e.placeholder,
-				disabled: e.disabled || q7.value,
+				placeholder: J7.value ? "" : e.placeholder,
+				disabled: e.disabled || J7.value,
 				maxlength: e.maxLength,
 				rows: "1",
-				onKeydown: t9,
-				onFocus: n9,
-				onBlur: r9,
-				onInput: Y7
-			}, null, 42, _hoisted_1$32), [[vModelText, $.value]]), createElementVNode("div", { class: normalizeClass(e.$style.inlineActions) }, [createVNode(unref(N8nSendStopButton_default), {
+				onKeydown: n9,
+				onFocus: r9,
+				onBlur: i9,
+				onInput: Z7
+			}, null, 42, _hoisted_1$32), [[vModelText, j7.value]]), createElementVNode("div", { class: normalizeClass(e.$style.inlineActions) }, [createVNode(unref(N8nSendStopButton_default), {
 				"data-test-id": "send-message-button",
 				streaming: e.streaming,
-				disabled: R7.value,
-				onSend: Q7,
-				onStop: $7
-			}, null, 8, ["streaming", "disabled"])], 2)], 2))], 6), B7.value ? (openBlock(), createElementBlock("div", {
+				disabled: z7.value,
+				onSend: $7,
+				onStop: t9
+			}, null, 8, ["streaming", "disabled"])], 2)], 2))], 6), V7.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(e.$style.creditsBar)
-			}, [createElementVNode("div", { class: normalizeClass(e.$style.creditsInfoWrapper) }, [withDirectives(createElementVNode("span", { class: normalizeClass({ [e.$style.noCredits]: q7.value }) }, null, 2), [[r, V7.value]]), createVNode(Tooltip_default, {
-				content: G7.value,
+			}, [createElementVNode("div", { class: normalizeClass(e.$style.creditsInfoWrapper) }, [withDirectives(createElementVNode("span", { class: normalizeClass({ [e.$style.noCredits]: J7.value }) }, null, 2), [[r, H7.value]]), createVNode(Tooltip_default, {
+				content: q7.value,
 				"popper-class": e.$style.infoPopper,
 				placement: "top"
 			}, {