From 12d7a9fd12c0ca320e9d6eaaa34cd393dd01d26b Mon Sep 17 00:00:00 2001
From: Michael Drury <me@michaeldrury.co.uk>
Date: Thu, 25 Sep 2025 15:02:47 +0100
Subject: [PATCH] feat(editor): T2W canvas and assistant prompt design
 improvements (no-changelog) (#19897)

---
 .../frontend/@n8n/design-system/package.json  |   3 +-
 .../AskAssistantChat/AskAssistantChat.test.ts |  81 ++-
 .../AskAssistantChat/AskAssistantChat.vue     | 210 ++++---
 .../AskAssistantChat.test.ts.snap             | 518 +++++++++++-------
 .../N8nIcon/custom/filled-square.svg          |   3 +
 .../src/components/N8nIcon/icons.ts           |   2 +
 .../N8nPromptInput/N8nPromptInput.stories.ts  | 282 ++++++++++
 .../N8nPromptInput/N8nPromptInput.test.ts     | 514 +++++++++++++++++
 .../N8nPromptInput/N8nPromptInput.vue         | 435 +++++++++++++++
 .../__snapshots__/N8nPromptInput.test.ts.snap | 120 ++++
 .../src/components/N8nPromptInput/index.ts    |   3 +
 .../N8nSendStopButton.stories.ts              | 299 ++++++++++
 .../N8nSendStopButton.test.ts                 | 262 +++++++++
 .../N8nSendStopButton/N8nSendStopButton.vue   |  62 +++
 .../src/components/N8nSendStopButton/index.ts |   5 +
 .../design-system/src/components/index.ts     |   2 +
 .../src/composables/useCharacterLimit.ts      |  33 ++
 .../design-system/src/composables/useI18n.ts  |   3 +-
 .../@n8n/design-system/src/locale/lang/en.ts  |   1 +
 .../frontend/@n8n/i18n/src/locales/en.json    |   3 +-
 .../Agent/AskAssistantBuild.test.ts           |  65 ++-
 .../AskAssistant/Agent/AskAssistantBuild.vue  |   5 +-
 .../render-types/CanvasNodeAIPrompt.test.ts   |  57 +-
 .../nodes/render-types/CanvasNodeAIPrompt.vue | 103 +---
 .../CanvasNodeAIPrompt.test.ts.snap           |  36 +-
 .../playwright/pages/AIAssistantPage.ts       |   2 +-
 pnpm-lock.yaml                                | 147 +----
 pnpm-workspace.yaml                           |   1 +
 28 files changed, 2698 insertions(+), 559 deletions(-)
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/filled-square.svg
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.test.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.vue
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nPromptInput/__snapshots__/N8nPromptInput.test.ts.snap
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nPromptInput/index.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.test.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.vue
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/index.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/composables/useCharacterLimit.ts

diff --git a/packages/frontend/@n8n/design-system/package.json b/packages/frontend/@n8n/design-system/package.json
index d648f0e4791..dcf8a052c62 100644
--- a/packages/frontend/@n8n/design-system/package.json
+++ b/packages/frontend/@n8n/design-system/package.json
@@ -47,7 +47,8 @@
     "vite": "catalog:",
     "vitest": "catalog:",
     "vitest-mock-extended": "catalog:",
-    "vue-tsc": "catalog:frontend"
+    "vue-tsc": "catalog:frontend",
+    "@vue/test-utils": "catalog:frontend"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.test.ts b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.test.ts
index 5eacff3d361..3d9eb38e5d8 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.test.ts
@@ -1,4 +1,5 @@
 import { render } from '@testing-library/vue';
+import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 
 import AskAssistantChat from './AskAssistantChat.vue';
@@ -239,7 +240,7 @@ describe('AskAssistantChat', () => {
 		expect(wrapper.queryByTestId('error-retry-button')).not.toBeInTheDocument();
 	});
 
-	it('limits maximum input length when maxLength prop is specified', async () => {
+	it('limits maximum input length when maxCharacterLength prop is specified', async () => {
 		const wrapper = render(AskAssistantChat, {
 			global: {
 				directives: {
@@ -249,13 +250,14 @@ describe('AskAssistantChat', () => {
 			},
 			props: {
 				user: { firstName: 'Kobi', lastName: 'Dog' },
-				maxLength: 100,
+				maxCharacterLength: 100,
 			},
 		});
 
 		expect(wrapper.container).toMatchSnapshot();
-		const textarea = wrapper.queryByTestId('chat-input');
-		expect(textarea).toHaveAttribute('maxLength', '100');
+		// The maxCharacterLength prop is passed to the N8nPromptInput component
+		// but the textarea element itself doesn't have this attribute
+		// We can verify the component receives the prop via snapshot
 	});
 
 	describe('collapseToolMessages', () => {
@@ -981,4 +983,75 @@ describe('AskAssistantChat', () => {
 			expect(wrapper.container.textContent).not.toContain('Quick reply');
 		});
 	});
+
+	describe('onSendMessage', () => {
+		it('should emit message when N8nPromptInput submits', async () => {
+			const wrapper = mount(AskAssistantChat, {
+				global: {
+					directives: { n8nHtml },
+					stubs: {
+						...Object.fromEntries(stubs.map((stub) => [stub, true])),
+						N8nPromptInput: {
+							name: 'N8nPromptInput',
+							props: [
+								'modelValue',
+								'inputPlaceholder',
+								'disabled',
+								'streaming',
+								'maxCharacterLength',
+							],
+							emits: ['update:modelValue', 'submit', 'stop'],
+							setup(
+								_: unknown,
+								{
+									emit,
+									expose,
+								}: {
+									emit: (event: string, ...args: unknown[]) => void;
+									expose: (exposed: Record<string, unknown>) => void;
+								},
+							) {
+								const focusInput = vi.fn();
+
+								expose({ focusInput });
+
+								return {
+									handleSubmit: () => emit('submit'),
+									updateValue: (e: Event) => {
+										const target = e.target as HTMLTextAreaElement;
+										emit('update:modelValue', target.value);
+									},
+								};
+							},
+							template: `
+								<div data-test-id="chat-input" class="prompt-input-stub">
+									<textarea :value="modelValue" @input="updateValue"></textarea>
+									<button @click="handleSubmit">Send</button>
+								</div>
+							`,
+						},
+					},
+				},
+				props: {
+					user: { firstName: 'Test', lastName: 'User' },
+				},
+			});
+
+			const textarea = wrapper.find('[data-test-id="chat-input"] textarea');
+			await textarea.setValue('Test message');
+
+			await textarea.trigger('input');
+
+			const sendButton = wrapper.find('[data-test-id="chat-input"] button');
+			await sendButton.trigger('click');
+
+			// Verify message was emitted with the correct value
+			expect(wrapper.emitted('message')).toBeTruthy();
+			const messageEvents = wrapper.emitted('message');
+			expect(messageEvents?.[0]).toEqual(['Test message']);
+
+			await wrapper.vm.$nextTick();
+			wrapper.unmount();
+		});
+	});
 });
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
index f88c9f525f7..df571d39f5e 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import MessageWrapper from './messages/MessageWrapper.vue';
 import { useI18n } from '../../composables/useI18n';
@@ -11,12 +11,11 @@ import AssistantText from '../AskAssistantText/AssistantText.vue';
 import InlineAskAssistantButton from '../InlineAskAssistantButton/InlineAskAssistantButton.vue';
 import N8nButton from '../N8nButton';
 import N8nIcon from '../N8nIcon';
+import N8nPromptInput from '../N8nPromptInput';
 import { getSupportedMessageComponent } from './messages/helpers';
 
 const { t } = useI18n();
 
-const MAX_CHAT_INPUT_HEIGHT = 100;
-
 interface Props {
 	user?: {
 		firstName: string;
@@ -28,10 +27,10 @@ interface Props {
 	loadingMessage?: string;
 	sessionId?: string;
 	title?: string;
-	placeholder?: string;
+	inputPlaceholder?: string;
 	scrollOnNewMessage?: boolean;
 	showStop?: boolean;
-	maxLength?: number;
+	maxCharacterLength?: number;
 }
 
 const emit = defineEmits<{
@@ -55,6 +54,8 @@ const props = withDefaults(defineProps<Props>(), {
 	loadingMessage: undefined,
 	sessionId: undefined,
 	scrollOnNewMessage: false,
+	maxCharacterLength: undefined,
+	inputPlaceholder: undefined,
 });
 
 function normalizeMessages(messages: ChatUI.AssistantMessage[]): ChatUI.AssistantMessage[] {
@@ -159,9 +160,10 @@ const lastMessageQuickReplies = computed(() => {
 });
 
 const textInputValue = ref<string>('');
+const promptInputRef = ref<InstanceType<typeof N8nPromptInput>>();
 
-const chatInput = ref<HTMLTextAreaElement | null>(null);
 const messagesRef = ref<HTMLDivElement | null>(null);
+const inputWrapperRef = ref<HTMLDivElement | null>(null);
 
 const sessionEnded = computed(() => {
 	return isEndOfSessionEvent(props.messages?.[props.messages.length - 1]);
@@ -184,19 +186,8 @@ function onQuickReply(opt: ChatUI.QuickReply) {
 }
 
 function onSendMessage() {
-	if (sendDisabled.value) return;
 	emit('message', textInputValue.value);
 	textInputValue.value = '';
-	if (chatInput.value) {
-		chatInput.value.style.height = 'auto';
-	}
-}
-
-function growInput() {
-	if (!chatInput.value) return;
-	chatInput.value.style.height = 'auto';
-	const scrollHeight = chatInput.value.scrollHeight;
-	chatInput.value.style.height = `${Math.min(scrollHeight, MAX_CHAT_INPUT_HEIGHT)}px`;
 }
 
 function onRateMessage(feedback: RatingFeedback) {
@@ -211,9 +202,29 @@ function scrollToBottom() {
 		});
 	}
 }
+
+function isScrolledToBottom(): boolean {
+	if (!messagesRef.value) return false;
+
+	const threshold = 10; // Allow for small rounding errors
+	const isAtBottom =
+		Math.abs(
+			messagesRef.value.scrollHeight - messagesRef.value.scrollTop - messagesRef.value.clientHeight,
+		) <= threshold;
+
+	return isAtBottom;
+}
+
+function scrollToBottomImmediate() {
+	if (messagesRef.value) {
+		messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
+	}
+}
+
 watch(sendDisabled, () => {
-	chatInput.value?.focus();
+	promptInputRef.value?.focusInput();
 });
+
 watch(
 	() => props.messages,
 	async (messages) => {
@@ -230,10 +241,68 @@ watch(
 	{ immediate: true, deep: true },
 );
 
+// Setup ResizeObserver to maintain scroll position when input height changes
+let resizeObserver: ResizeObserver | null = null;
+let scrollLockActive = false;
+let scrollHandler: (() => void) | null = null;
+
+onMounted(() => {
+	if (inputWrapperRef.value && messagesRef.value && 'ResizeObserver' in window) {
+		// Track user scroll to determine if they want to stay at bottom
+		let userIsAtBottom = true;
+
+		// Create scroll handler function so we can remove it later
+		scrollHandler = () => {
+			if (!scrollLockActive) {
+				userIsAtBottom = isScrolledToBottom();
+			}
+		};
+
+		// Monitor user scrolling
+		messagesRef.value.addEventListener('scroll', scrollHandler);
+
+		// Monitor input size changes
+		resizeObserver = new ResizeObserver(() => {
+			// Only maintain scroll if user was at bottom
+			if (userIsAtBottom) {
+				scrollLockActive = true;
+				// Double RAF for layout stability
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						scrollToBottomImmediate();
+						// Check if we're still at bottom after auto-scroll
+						userIsAtBottom = isScrolledToBottom();
+						scrollLockActive = false;
+					});
+				});
+			}
+		});
+
+		resizeObserver.observe(inputWrapperRef.value);
+
+		// Start at bottom
+		scrollToBottomImmediate();
+	}
+});
+
+onUnmounted(() => {
+	// Remove scroll event listener to prevent memory leak
+	if (scrollHandler && messagesRef.value) {
+		messagesRef.value.removeEventListener('scroll', scrollHandler);
+		scrollHandler = null;
+	}
+
+	// Disconnect ResizeObserver
+	if (resizeObserver) {
+		resizeObserver.disconnect();
+		resizeObserver = null;
+	}
+});
+
 // Expose focusInput method to parent components
 defineExpose({
 	focusInput: () => {
-		chatInput.value?.focus();
+		promptInputRef.value?.focusInput();
 	},
 });
 </script>
@@ -339,51 +408,26 @@ defineExpose({
 			</div>
 		</div>
 		<div
+			ref="inputWrapperRef"
 			:class="{ [$style.inputWrapper]: true, [$style.disabledInput]: sessionEnded }"
 			data-test-id="chat-input-wrapper"
 		>
 			<div v-if="$slots.inputPlaceholder" :class="$style.inputPlaceholder">
 				<slot name="inputPlaceholder" />
 			</div>
-			<template v-else>
-				<textarea
-					ref="chatInput"
-					v-model="textInputValue"
-					class="ignore-key-press-node-creator ignore-key-press-canvas"
-					:class="{ [$style.disabled]: sessionEnded || streaming || disabled }"
-					:disabled="sessionEnded || streaming || disabled"
-					:placeholder="placeholder ?? t('assistantChat.inputPlaceholder')"
-					rows="1"
-					wrap="hard"
-					:maxlength="maxLength"
-					data-test-id="chat-input"
-					@keydown.enter.exact.prevent="onSendMessage"
-					@input.prevent="growInput"
-					@keydown.stop
-				/>
-				<N8nButton
-					v-if="showStop && streaming"
-					:class="$style.stopButton"
-					icon="square"
-					size="large"
-					type="danger"
-					outline
-					square
-					data-test-id="send-message-button"
-					@click="emit('stop')"
-				/>
-				<N8nButton
-					v-else
-					:class="$style.sendButton"
-					icon="send"
-					:text="true"
-					size="large"
-					square
-					data-test-id="send-message-button"
-					:disabled="sendDisabled"
-					@click="onSendMessage"
-				/>
-			</template>
+			<N8nPromptInput
+				v-else
+				ref="promptInputRef"
+				v-model="textInputValue"
+				:placeholder="inputPlaceholder || t('assistantChat.inputPlaceholder')"
+				:disabled="sessionEnded || disabled"
+				:streaming="streaming"
+				:max-length="maxCharacterLength"
+				:refocus-after-send="true"
+				data-test-id="chat-input"
+				@submit="onSendMessage"
+				@stop="emit('stop')"
+			/>
 		</div>
 	</div>
 </template>
@@ -394,10 +438,9 @@ defineExpose({
 	position: relative;
 	display: grid;
 	grid-template-rows: auto 1fr auto;
+	background-color: var(--color-background-light);
 }
-:root .stopButton {
-	--button-border-color: transparent;
-}
+
 .header {
 	height: 65px; // same as header height in editor
 	padding: 0 var(--spacing-l);
@@ -420,6 +463,7 @@ defineExpose({
 	background-color: var(--color-background-light);
 	border: var(--border-base);
 	border-top: 0;
+	border-bottom: 0;
 	position: relative;
 
 	pre,
@@ -439,6 +483,7 @@ defineExpose({
 	width: 100%;
 	height: 100%;
 	padding: var(--spacing-xs);
+	padding-bottom: var(--spacing-xl); // Extra padding for fade area
 	overflow-y: auto;
 
 	@supports not (selector(::-webkit-scrollbar)) {
@@ -511,30 +556,24 @@ defineExpose({
 }
 
 .inputWrapper {
-	display: flex;
-	background-color: var(--color-foreground-xlight);
-	border: var(--border-base);
+	padding: var(--spacing-4xs) var(--spacing-2xs) var(--spacing-xs);
+	background-color: transparent;
 	width: 100%;
-	border-top: 0;
+	position: relative;
+	border-left: var(--border-base);
+	border-right: var(--border-base);
 
-	textarea {
-		border: none;
-		background-color: transparent;
-		width: 100%;
-		font-size: var(--spacing-xs);
-		padding: var(--spacing-xs);
-		outline: none;
-		color: var(--color-text-dark);
-		resize: none;
-		font-family: inherit;
-	}
-}
-
-.sendButton {
-	color: var(--color-text-base) !important;
-
-	&[disabled] {
-		color: var(--color-text-light) !important;
+	// Add a gradient fade from the chat to the input
+	&::before {
+		content: '';
+		position: absolute;
+		top: calc(-1 * var(--spacing-m));
+		left: 0;
+		right: var(--spacing-xs);
+		height: var(--spacing-m);
+		background: linear-gradient(to bottom, transparent 0%, var(--color-background-light) 100%);
+		pointer-events: none;
+		z-index: 1;
 	}
 }
 
@@ -546,11 +585,6 @@ defineExpose({
 	}
 }
 
-textarea.disabled {
-	background-color: var(--color-foreground-base);
-	cursor: not-allowed;
-}
-
 .inputPlaceholder {
 	width: 100%;
 }
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
index 5d007c2b03b..c7b518d9322 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
@@ -165,37 +165,53 @@ exports[`AskAssistantChat > does not render retry button if no error is present
       class="inputWrapper"
       data-test-id="chat-input-wrapper"
     >
-      
-      <textarea
-        class="ignore-key-press-node-creator ignore-key-press-canvas"
+      <div
+        class="container"
         data-test-id="chat-input"
-        placeholder="Enter your response..."
-        rows="1"
-        wrap="hard"
-      />
-      <n8n-button-stub
-        active="false"
-        block="false"
-        class="sendButton"
-        data-test-id="send-message-button"
-        disabled="true"
-        element="button"
-        icon="send"
-        label=""
-        loading="false"
-        outline="false"
-        size="large"
-        square="true"
-        text="true"
-        type="primary"
-      />
-      
+        style="min-height: 40px;"
+      >
+        <!-- Warning banner when character limit is reached -->
+        <!--v-if-->
+        <!-- Single line mode: input and button side by side -->
+        <div
+          class="singleLineWrapper"
+        >
+          <textarea
+            class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+            data-test-id="chat-input-textarea"
+            maxlength="1000"
+            placeholder="Enter your response..."
+            rows="1"
+          />
+          <div
+            class="inlineActions"
+          >
+            <n8n-button-stub
+              active="false"
+              block="false"
+              class="sendButton"
+              data-test-id="send-message-button"
+              disabled="true"
+              element="button"
+              icon="arrow-up"
+              iconsize="large"
+              label=""
+              loading="false"
+              outline="false"
+              size="small"
+              square="true"
+              text="false"
+              type="primary"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`AskAssistantChat > limits maximum input length when maxLength prop is specified 1`] = `
+exports[`AskAssistantChat > limits maximum input length when maxCharacterLength prop is specified 1`] = `
 <div>
   <div
     class="container"
@@ -350,32 +366,47 @@ exports[`AskAssistantChat > limits maximum input length when maxLength prop is s
       class="inputWrapper"
       data-test-id="chat-input-wrapper"
     >
-      
-      <textarea
-        class="ignore-key-press-node-creator ignore-key-press-canvas"
+      <div
+        class="container"
         data-test-id="chat-input"
-        maxlength="100"
-        placeholder="Enter your response..."
-        rows="1"
-        wrap="hard"
-      />
-      <n8n-button-stub
-        active="false"
-        block="false"
-        class="sendButton"
-        data-test-id="send-message-button"
-        disabled="true"
-        element="button"
-        icon="send"
-        label=""
-        loading="false"
-        outline="false"
-        size="large"
-        square="true"
-        text="true"
-        type="primary"
-      />
-      
+        style="min-height: 40px;"
+      >
+        <!-- Warning banner when character limit is reached -->
+        <!--v-if-->
+        <!-- Single line mode: input and button side by side -->
+        <div
+          class="singleLineWrapper"
+        >
+          <textarea
+            class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+            data-test-id="chat-input-textarea"
+            maxlength="100"
+            placeholder="Enter your response..."
+            rows="1"
+          />
+          <div
+            class="inlineActions"
+          >
+            <n8n-button-stub
+              active="false"
+              block="false"
+              class="sendButton"
+              data-test-id="send-message-button"
+              disabled="true"
+              element="button"
+              icon="arrow-up"
+              iconsize="large"
+              label=""
+              loading="false"
+              outline="false"
+              size="small"
+              square="true"
+              text="false"
+              type="primary"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -1182,31 +1213,47 @@ Testing more code
       class="inputWrapper"
       data-test-id="chat-input-wrapper"
     >
-      
-      <textarea
-        class="ignore-key-press-node-creator ignore-key-press-canvas"
+      <div
+        class="container"
         data-test-id="chat-input"
-        placeholder="Enter your response..."
-        rows="1"
-        wrap="hard"
-      />
-      <n8n-button-stub
-        active="false"
-        block="false"
-        class="sendButton"
-        data-test-id="send-message-button"
-        disabled="true"
-        element="button"
-        icon="send"
-        label=""
-        loading="false"
-        outline="false"
-        size="large"
-        square="true"
-        text="true"
-        type="primary"
-      />
-      
+        style="min-height: 40px;"
+      >
+        <!-- Warning banner when character limit is reached -->
+        <!--v-if-->
+        <!-- Single line mode: input and button side by side -->
+        <div
+          class="singleLineWrapper"
+        >
+          <textarea
+            class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+            data-test-id="chat-input-textarea"
+            maxlength="1000"
+            placeholder="Enter your response..."
+            rows="1"
+          />
+          <div
+            class="inlineActions"
+          >
+            <n8n-button-stub
+              active="false"
+              block="false"
+              class="sendButton"
+              data-test-id="send-message-button"
+              disabled="true"
+              element="button"
+              icon="arrow-up"
+              iconsize="large"
+              label=""
+              loading="false"
+              outline="false"
+              size="small"
+              square="true"
+              text="false"
+              type="primary"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -1367,31 +1414,47 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
       class="inputWrapper"
       data-test-id="chat-input-wrapper"
     >
-      
-      <textarea
-        class="ignore-key-press-node-creator ignore-key-press-canvas"
+      <div
+        class="container"
         data-test-id="chat-input"
-        placeholder="Enter your response..."
-        rows="1"
-        wrap="hard"
-      />
-      <n8n-button-stub
-        active="false"
-        block="false"
-        class="sendButton"
-        data-test-id="send-message-button"
-        disabled="true"
-        element="button"
-        icon="send"
-        label=""
-        loading="false"
-        outline="false"
-        size="large"
-        square="true"
-        text="true"
-        type="primary"
-      />
-      
+        style="min-height: 40px;"
+      >
+        <!-- Warning banner when character limit is reached -->
+        <!--v-if-->
+        <!-- Single line mode: input and button side by side -->
+        <div
+          class="singleLineWrapper"
+        >
+          <textarea
+            class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+            data-test-id="chat-input-textarea"
+            maxlength="1000"
+            placeholder="Enter your response..."
+            rows="1"
+          />
+          <div
+            class="inlineActions"
+          >
+            <n8n-button-stub
+              active="false"
+              block="false"
+              class="sendButton"
+              data-test-id="send-message-button"
+              disabled="true"
+              element="button"
+              icon="arrow-up"
+              iconsize="large"
+              label=""
+              loading="false"
+              outline="false"
+              size="small"
+              square="true"
+              text="false"
+              type="primary"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -1643,32 +1706,48 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
       class="inputWrapper disabledInput"
       data-test-id="chat-input-wrapper"
     >
-      
-      <textarea
-        class="ignore-key-press-node-creator ignore-key-press-canvas disabled"
+      <div
+        class="container disabled"
         data-test-id="chat-input"
-        disabled=""
-        placeholder="Enter your response..."
-        rows="1"
-        wrap="hard"
-      />
-      <n8n-button-stub
-        active="false"
-        block="false"
-        class="sendButton"
-        data-test-id="send-message-button"
-        disabled="true"
-        element="button"
-        icon="send"
-        label=""
-        loading="false"
-        outline="false"
-        size="large"
-        square="true"
-        text="true"
-        type="primary"
-      />
-      
+        style="min-height: 40px;"
+      >
+        <!-- Warning banner when character limit is reached -->
+        <!--v-if-->
+        <!-- Single line mode: input and button side by side -->
+        <div
+          class="singleLineWrapper"
+        >
+          <textarea
+            class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+            data-test-id="chat-input-textarea"
+            disabled=""
+            maxlength="1000"
+            placeholder="Enter your response..."
+            rows="1"
+          />
+          <div
+            class="inlineActions"
+          >
+            <n8n-button-stub
+              active="false"
+              block="false"
+              class="sendButton"
+              data-test-id="send-message-button"
+              disabled="true"
+              element="button"
+              icon="arrow-up"
+              iconsize="large"
+              label=""
+              loading="false"
+              outline="false"
+              size="small"
+              square="true"
+              text="false"
+              type="primary"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -1853,31 +1932,47 @@ exports[`AskAssistantChat > renders error message correctly with retry button 1`
       class="inputWrapper"
       data-test-id="chat-input-wrapper"
     >
-      
-      <textarea
-        class="ignore-key-press-node-creator ignore-key-press-canvas"
+      <div
+        class="container"
         data-test-id="chat-input"
-        placeholder="Enter your response..."
-        rows="1"
-        wrap="hard"
-      />
-      <n8n-button-stub
-        active="false"
-        block="false"
-        class="sendButton"
-        data-test-id="send-message-button"
-        disabled="true"
-        element="button"
-        icon="send"
-        label=""
-        loading="false"
-        outline="false"
-        size="large"
-        square="true"
-        text="true"
-        type="primary"
-      />
-      
+        style="min-height: 40px;"
+      >
+        <!-- Warning banner when character limit is reached -->
+        <!--v-if-->
+        <!-- Single line mode: input and button side by side -->
+        <div
+          class="singleLineWrapper"
+        >
+          <textarea
+            class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+            data-test-id="chat-input-textarea"
+            maxlength="1000"
+            placeholder="Enter your response..."
+            rows="1"
+          />
+          <div
+            class="inlineActions"
+          >
+            <n8n-button-stub
+              active="false"
+              block="false"
+              class="sendButton"
+              data-test-id="send-message-button"
+              disabled="true"
+              element="button"
+              icon="arrow-up"
+              iconsize="large"
+              label=""
+              loading="false"
+              outline="false"
+              size="small"
+              square="true"
+              text="false"
+              type="primary"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -2118,31 +2213,47 @@ catch(e) {
       class="inputWrapper"
       data-test-id="chat-input-wrapper"
     >
-      
-      <textarea
-        class="ignore-key-press-node-creator ignore-key-press-canvas"
+      <div
+        class="container"
         data-test-id="chat-input"
-        placeholder="Enter your response..."
-        rows="1"
-        wrap="hard"
-      />
-      <n8n-button-stub
-        active="false"
-        block="false"
-        class="sendButton"
-        data-test-id="send-message-button"
-        disabled="true"
-        element="button"
-        icon="send"
-        label=""
-        loading="false"
-        outline="false"
-        size="large"
-        square="true"
-        text="true"
-        type="primary"
-      />
-      
+        style="min-height: 40px;"
+      >
+        <!-- Warning banner when character limit is reached -->
+        <!--v-if-->
+        <!-- Single line mode: input and button side by side -->
+        <div
+          class="singleLineWrapper"
+        >
+          <textarea
+            class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+            data-test-id="chat-input-textarea"
+            maxlength="1000"
+            placeholder="Enter your response..."
+            rows="1"
+          />
+          <div
+            class="inlineActions"
+          >
+            <n8n-button-stub
+              active="false"
+              block="false"
+              class="sendButton"
+              data-test-id="send-message-button"
+              disabled="true"
+              element="button"
+              icon="arrow-up"
+              iconsize="large"
+              label=""
+              loading="false"
+              outline="false"
+              size="small"
+              square="true"
+              text="false"
+              type="primary"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -2315,32 +2426,47 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
       class="inputWrapper"
       data-test-id="chat-input-wrapper"
     >
-      
-      <textarea
-        class="ignore-key-press-node-creator ignore-key-press-canvas disabled"
+      <div
+        class="container"
         data-test-id="chat-input"
-        disabled=""
-        placeholder="Enter your response..."
-        rows="1"
-        wrap="hard"
-      />
-      <n8n-button-stub
-        active="false"
-        block="false"
-        class="sendButton"
-        data-test-id="send-message-button"
-        disabled="true"
-        element="button"
-        icon="send"
-        label=""
-        loading="false"
-        outline="false"
-        size="large"
-        square="true"
-        text="true"
-        type="primary"
-      />
-      
+        style="min-height: 40px;"
+      >
+        <!-- Warning banner when character limit is reached -->
+        <!--v-if-->
+        <!-- Single line mode: input and button side by side -->
+        <div
+          class="singleLineWrapper"
+        >
+          <textarea
+            class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+            data-test-id="chat-input-textarea"
+            maxlength="1000"
+            placeholder="Enter your response..."
+            rows="1"
+          />
+          <div
+            class="inlineActions"
+          >
+            <n8n-button-stub
+              active="false"
+              block="false"
+              class="stopButton"
+              data-test-id="send-message-button"
+              disabled="false"
+              element="button"
+              icon="filled-square"
+              iconsize="small"
+              label=""
+              loading="false"
+              outline="false"
+              size="small"
+              square="true"
+              text="false"
+              type="primary"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/filled-square.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/filled-square.svg
new file mode 100644
index 00000000000..5f645159e1c
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/filled-square.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 10 10" fill="currentColor" overflow="hidden" xmlns="http://www.w3.org/2000/svg">
+	<rect x="0" y="0" width="10" height="10" rx="2" ry="2"/>
+</svg>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
index 0b7dce764ee..62e42b188d0 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
@@ -2,6 +2,7 @@ import Binary from './custom/binary.svg';
 import BoltFilled from './custom/bolt-filled.svg';
 import Continue from './custom/continue.svg';
 import EmptyOutput from './custom/empty-output.svg';
+import FilledSquare from './custom/filled-square.svg';
 import GripLinesVertical from './custom/grip-lines-vertical.svg';
 import Mcp from './custom/mcp.svg';
 import NodeDirty from './custom/node-dirty.svg';
@@ -415,6 +416,7 @@ export const updatedIconSet = {
 	// custom icons
 	// NOTE: ensure to replace any colors with "currentColor" in SVG
 	'bolt-filled': BoltFilled,
+	'filled-square': FilledSquare,
 	'grip-lines-vertical': GripLinesVertical,
 	variable: IconLucideVariable,
 	'pop-out': PopOut,
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts
new file mode 100644
index 00000000000..a2bc4020214
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts
@@ -0,0 +1,282 @@
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import N8nPromptInput from './N8nPromptInput.vue';
+
+export default {
+	title: 'Atoms/PromptInput',
+	component: N8nPromptInput,
+	argTypes: {
+		modelValue: {
+			control: 'text',
+		},
+		placeholder: {
+			control: 'text',
+		},
+		maxLength: {
+			control: 'number',
+		},
+		maxLinesBeforeScroll: {
+			control: 'number',
+		},
+		minLines: {
+			control: 'number',
+		},
+		streaming: {
+			control: 'boolean',
+		},
+		disabled: {
+			control: 'boolean',
+		},
+		refocusAfterSend: {
+			control: 'boolean',
+		},
+	},
+	parameters: {
+		backgrounds: { default: '--color-background-light' },
+	},
+};
+
+const methods = {
+	onUpdateModelValue: action('update:modelValue'),
+	onSubmit: action('submit'),
+	onStop: action('stop'),
+	onFocus: action('focus'),
+	onBlur: action('blur'),
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	components: {
+		N8nPromptInput,
+	},
+	template: `
+		<div style="width: 500px; max-width: 100%;">
+			<n8n-prompt-input
+				v-bind="args"
+				:modelValue="val"
+				@update:modelValue="handleUpdateModelValue"
+				@submit="onSubmit"
+				@stop="onStop"
+				@focus="onFocus"
+				@blur="onBlur"
+			/>
+		</div>
+	`,
+	data() {
+		return {
+			val: this.args.modelValue || '',
+		};
+	},
+	watch: {
+		args: {
+			handler(newArgs) {
+				if (newArgs.modelValue !== undefined) {
+					this.val = newArgs.modelValue;
+				}
+			},
+			deep: true,
+			immediate: true,
+		},
+	},
+	methods: {
+		...methods,
+		handleUpdateModelValue(value: string) {
+			this.val = value;
+			this.onUpdateModelValue(value);
+		},
+	},
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	placeholder: 'Type your message here...',
+	maxLength: 1000,
+};
+
+export const SingleLine = Template.bind({});
+SingleLine.args = {
+	placeholder: 'Type your message here...',
+	maxLength: 1000,
+	minLines: 1,
+};
+
+export const MultiLine = Template.bind({});
+MultiLine.args = {
+	placeholder: 'Type your message here...',
+	maxLength: 1000,
+	minLines: 3,
+};
+
+export const Streaming = Template.bind({});
+Streaming.args = {
+	modelValue: 'This is currently being processed...',
+	placeholder: 'Type your message here...',
+	streaming: true,
+	maxLength: 1000,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	placeholder: 'This input is disabled',
+	disabled: true,
+	maxLength: 1000,
+};
+
+export const WithInitialText = Template.bind({});
+WithInitialText.args = {
+	modelValue:
+		'Hello, this is some initial text that spans multiple lines\nto show how the component handles existing content.',
+	placeholder: 'Type your message here...',
+	maxLength: 1000,
+};
+
+export const AtCharacterLimit = Template.bind({});
+AtCharacterLimit.args = {
+	modelValue: 'This message is exactly at the character limit!!',
+	placeholder: 'Type your message here...',
+	maxLength: 48,
+};
+
+export const WithRefocusAfterSend = Template.bind({});
+WithRefocusAfterSend.args = {
+	placeholder: 'Input will refocus after send...',
+	maxLength: 1000,
+	refocusAfterSend: true,
+};
+
+const InteractiveTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	components: {
+		N8nPromptInput,
+	},
+	template: `
+		<div>
+			<div style="width: 500px; max-width: 100%; margin-bottom: 20px;">
+				<n8n-prompt-input
+					v-bind="args"
+					:modelValue="val"
+					:streaming="streaming"
+					@update:modelValue="handleUpdateModelValue"
+					@submit="handleSubmit"
+					@stop="handleStop"
+					@focus="onFocus"
+					@blur="onBlur"
+				/>
+			</div>
+			<div style="padding: 10px; background: #f0f0f0; border-radius: 4px;">
+				<p><strong>Current value:</strong> {{ val }}</p>
+				<p><strong>Character count:</strong> {{ val.length }} / {{ args.maxLength }}</p>
+				<p><strong>Streaming:</strong> {{ streaming }}</p>
+				<button @click="streaming = !streaming" style="margin-top: 10px;">
+					Toggle Streaming (Current: {{ streaming ? 'ON' : 'OFF' }})
+				</button>
+			</div>
+		</div>
+	`,
+	data() {
+		return {
+			val: this.args.modelValue || '',
+			streaming: false,
+		};
+	},
+	watch: {
+		args: {
+			handler(newArgs) {
+				if (newArgs.modelValue !== undefined) {
+					this.val = newArgs.modelValue;
+				}
+			},
+			deep: true,
+			immediate: true,
+		},
+	},
+	methods: {
+		...methods,
+		handleUpdateModelValue(value: string) {
+			this.val = value;
+			this.onUpdateModelValue(value);
+		},
+		handleSubmit() {
+			this.onSubmit();
+			// Simulate processing
+			this.streaming = true;
+			setTimeout(() => {
+				this.streaming = false;
+				// Clear after "processing"
+				this.val = '';
+			}, 2000);
+		},
+		handleStop() {
+			this.onStop();
+			this.streaming = false;
+		},
+	},
+});
+
+export const Interactive = InteractiveTemplate.bind({});
+Interactive.args = {
+	placeholder: 'Type a message and press Enter to send...',
+	maxLength: 500,
+	refocusAfterSend: true,
+};
+
+const MultipleInstancesTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	components: {
+		N8nPromptInput,
+	},
+	template: `
+		<div style="display: flex; flex-direction: column; gap: 20px;">
+			<div>
+				<h3>Single Line (minLines: 1)</h3>
+				<div style="width: 500px; max-width: 100%;">
+					<n8n-prompt-input
+						:modelValue="val1"
+						@update:modelValue="val1 = $event"
+						:placeholder="'Single line input...'"
+						:min-lines="1"
+						:max-length="1000"
+					/>
+				</div>
+			</div>
+			<div>
+				<h3>Two Lines (minLines: 2)</h3>
+				<div style="width: 500px; max-width: 100%;">
+					<n8n-prompt-input
+						:modelValue="val2"
+						@update:modelValue="val2 = $event"
+						:placeholder="'Two line input...'"
+						:min-lines="2"
+						:max-length="1000"
+					/>
+				</div>
+			</div>
+			<div>
+				<h3>Three Lines (minLines: 3)</h3>
+				<div style="width: 500px; max-width: 100%;">
+					<n8n-prompt-input
+						:modelValue="val3"
+						@update:modelValue="val3 = $event"
+						:placeholder="'Three line input...'"
+						:min-lines="3"
+						:max-length="1000"
+					/>
+				</div>
+			</div>
+		</div>
+	`,
+	data() {
+		return {
+			val1: '',
+			val2: '',
+			val3: '',
+		};
+	},
+});
+
+export const DifferentSizes = MultipleInstancesTemplate.bind({});
+DifferentSizes.args = {};
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.test.ts
new file mode 100644
index 00000000000..de4eb095dcb
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.test.ts
@@ -0,0 +1,514 @@
+import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/vue';
+import { mount } from '@vue/test-utils';
+
+import { createComponentRenderer } from '@n8n/design-system/__tests__/render';
+
+import N8nPromptInput from './N8nPromptInput.vue';
+
+const renderComponent = createComponentRenderer(N8nPromptInput);
+
+describe('N8nPromptInput', () => {
+	describe('rendering', () => {
+		it('should render correctly with default props', () => {
+			const { container } = renderComponent({
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+			expect(container).toMatchSnapshot();
+		});
+
+		it('should render with non-default placeholder', () => {
+			const { container } = renderComponent({
+				props: {
+					placeholder: 'Type your message here...',
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+			const textarea = container.querySelector('textarea');
+			expect(textarea).toHaveAttribute('placeholder', 'Type your message here...');
+		});
+
+		it('should render streaming state without disabling textarea', () => {
+			const { container } = renderComponent({
+				props: {
+					streaming: true,
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+			const textarea = container.querySelector('textarea');
+			// Textarea should NOT be disabled during streaming
+			expect(textarea).not.toHaveAttribute('disabled');
+			expect(container).toMatchSnapshot();
+		});
+	});
+
+	describe('mode switching', () => {
+		it('should start in single-line mode', () => {
+			const { container } = renderComponent({
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+			expect(container.querySelector('.singleLineWrapper')).toBeTruthy();
+			expect(container.querySelector('.multilineTextarea')).toBeFalsy();
+		});
+
+		it('should switch to multiline mode when text contains newlines', async () => {
+			// Store original descriptor
+			const originalDescriptor = Object.getOwnPropertyDescriptor(
+				HTMLTextAreaElement.prototype,
+				'scrollHeight',
+			);
+
+			// Mock scrollHeight to simulate text that needs multiple lines
+			// The component checks if scrollHeight > 24 (single line height)
+			Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {
+				configurable: true,
+				get(this: HTMLTextAreaElement) {
+					// Return larger height when text contains newlines
+					return this.value?.includes('\n') ? 72 : 24;
+				},
+			});
+
+			try {
+				const { container } = renderComponent({
+					props: {
+						modelValue: '',
+					},
+					global: {
+						stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+					},
+				});
+
+				// Initially should be single-line
+				expect(container.querySelector('.singleLineWrapper')).toBeTruthy();
+				expect(container.querySelector('.multilineTextarea')).toBeFalsy();
+
+				const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+
+				// Update the textarea value with newlines
+				textarea.value = 'Line 1\nLine 2\nLine 3';
+
+				// Trigger the input event which calls adjustHeight
+				await fireEvent.input(textarea);
+
+				// Wait for Vue to update the DOM
+				await vi.waitFor(() => {
+					// After adjustHeight runs, should be in multiline mode
+					return container.querySelector('.multilineTextarea');
+				});
+
+				// Verify we're now in multiline mode
+				expect(container.querySelector('.multilineTextarea')).toBeTruthy();
+				expect(container.querySelector('.singleLineWrapper')).toBeFalsy();
+			} finally {
+				// Always restore original descriptor or delete the mock
+				if (originalDescriptor) {
+					Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', originalDescriptor);
+				} else {
+					// If there was no original descriptor, delete the mocked property
+					// Use Reflect.deleteProperty for type-safe deletion
+					Reflect.deleteProperty(HTMLTextAreaElement.prototype, 'scrollHeight');
+				}
+			}
+		});
+
+		it('should handle clearing text', async () => {
+			const render = renderComponent({
+				props: {
+					modelValue: 'Some text',
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = render.container.querySelector('textarea');
+			expect(textarea).toHaveValue('Some text');
+
+			// Clear the text
+			await render.rerender({
+				modelValue: '',
+			});
+
+			// Should have empty value
+			expect(textarea).toHaveValue('');
+			// Should always have single line wrapper when empty
+			expect(render.container.querySelector('.singleLineWrapper')).toBeTruthy();
+		});
+	});
+
+	describe('character limit', () => {
+		it('should show warning banner when at character limit', () => {
+			const { container } = renderComponent({
+				props: {
+					// Start at max length to trigger warning
+					modelValue: '1234567890',
+					maxLength: 10,
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			// Warning should appear - look for actual element with class
+			const callout = container.querySelector('.warningCallout');
+			expect(callout).toBeTruthy();
+		});
+
+		it('should set maxlength attribute on textarea', () => {
+			const { container } = renderComponent({
+				props: {
+					maxLength: 100,
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+			const textarea = container.querySelector('textarea');
+			expect(textarea).toHaveAttribute('maxlength', '100');
+		});
+
+		it('should truncate pasted text that exceeds limit', async () => {
+			const user = userEvent.setup();
+			const render = renderComponent({
+				props: {
+					modelValue: '',
+					maxLength: 5,
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
+			await user.click(textarea);
+			await user.paste('1234567890');
+
+			// Browser should enforce maxlength, but we emit the truncated value
+			expect(render.emitted('update:modelValue')).toBeTruthy();
+		});
+
+		it('should prevent input when at max length', async () => {
+			const render = renderComponent({
+				props: {
+					modelValue: '12345',
+					maxLength: 5,
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
+
+			// Try to type when at max length
+			await fireEvent.keyDown(textarea, { key: 'a' });
+
+			// Should not emit update since we're at max
+			const updates = render.emitted('update:modelValue');
+			expect(updates).toBeFalsy();
+		});
+	});
+
+	describe('user interactions', () => {
+		it('should emit submit on Enter key in single-line mode', async () => {
+			const render = renderComponent({
+				props: {
+					modelValue: 'Test message',
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
+
+			expect(render.emitted('submit')).toBeTruthy();
+		});
+
+		it('should not emit submit on Shift+Enter', async () => {
+			const render = renderComponent({
+				props: {
+					modelValue: 'Test message',
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
+			await fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true });
+
+			expect(render.emitted('submit')).toBeFalsy();
+		});
+
+		it('should emit update:modelValue when typing', async () => {
+			const user = userEvent.setup();
+			const render = renderComponent({
+				props: {
+					modelValue: '',
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
+			await user.type(textarea, 'Hello');
+
+			const updateEvents = render.emitted('update:modelValue');
+			expect(updateEvents).toBeTruthy();
+			expect(updateEvents?.length).toBeGreaterThan(0);
+		});
+
+		it('should emit focus event', async () => {
+			const render = renderComponent({
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
+			await fireEvent.focus(textarea);
+
+			expect(render.emitted('focus')).toBeTruthy();
+		});
+
+		it('should emit blur event', async () => {
+			const render = renderComponent({
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
+			await fireEvent.focus(textarea);
+			await fireEvent.blur(textarea);
+
+			expect(render.emitted('blur')).toBeTruthy();
+		});
+	});
+
+	describe('button states', () => {
+		it('should disable send button when text is empty', () => {
+			const { container } = renderComponent({
+				props: {
+					modelValue: '',
+				},
+				global: {
+					stubs: {
+						N8nCallout: true,
+						N8nScrollArea: true,
+						N8nSendStopButton: {
+							props: ['disabled', 'streaming'],
+							template:
+								'<button :disabled="disabled" :class="{sendButton: !streaming, stopButton: streaming}"></button>',
+						},
+					},
+				},
+			});
+
+			const button = container.querySelector('button');
+			expect(button).toHaveAttribute('disabled');
+		});
+
+		it('should enable send button when text is present', () => {
+			const { container } = renderComponent({
+				props: {
+					modelValue: 'Some text',
+				},
+				global: {
+					stubs: {
+						N8nCallout: true,
+						N8nScrollArea: true,
+						N8nSendStopButton: {
+							props: ['disabled', 'streaming'],
+							template:
+								'<button :disabled="disabled" :class="{sendButton: !streaming, stopButton: streaming}"></button>',
+						},
+					},
+				},
+			});
+
+			const button = container.querySelector('button');
+			expect(button).not.toHaveAttribute('disabled');
+		});
+
+		it('should show stop button when streaming', () => {
+			const { container } = renderComponent({
+				props: {
+					modelValue: 'Some text',
+					streaming: true,
+				},
+				global: {
+					stubs: {
+						N8nCallout: true,
+						N8nScrollArea: true,
+						N8nSendStopButton: {
+							props: ['disabled', 'streaming'],
+							template:
+								'<button :disabled="disabled" :class="{sendButton: !streaming, stopButton: streaming}"></button>',
+						},
+					},
+				},
+			});
+
+			const button = container.querySelector('button');
+			expect(button).toHaveClass('stopButton');
+			expect(button).not.toHaveClass('sendButton');
+		});
+
+		it('should emit stop event when stop button is clicked', async () => {
+			const render = renderComponent({
+				props: {
+					modelValue: 'Some text',
+					streaming: true,
+				},
+				global: {
+					stubs: {
+						N8nCallout: true,
+						N8nScrollArea: true,
+						N8nSendStopButton: {
+							props: ['disabled', 'streaming'],
+							template:
+								'<button @click="$emit(\'stop\')" :class="{stopButton: streaming}">Stop</button>',
+							emits: ['stop'],
+						},
+					},
+				},
+			});
+
+			const stopButton = render.container.querySelector('.stopButton') as HTMLButtonElement;
+			expect(stopButton).toBeTruthy();
+
+			// Click the stop button
+			await fireEvent.click(stopButton);
+
+			// Verify stop event was emitted
+			expect(render.emitted('stop')).toBeTruthy();
+			expect(render.emitted('stop')?.[0]).toEqual([]);
+		});
+
+		it('should handle stop event from N8nSendStopButton component', async () => {
+			const wrapper = mount(N8nPromptInput, {
+				props: {
+					modelValue: 'Test message',
+					streaming: true,
+				},
+				global: {
+					stubs: {
+						N8nCallout: true,
+						N8nScrollArea: true,
+						N8nSendStopButton: {
+							name: 'N8nSendStopButton',
+							props: ['disabled', 'streaming'],
+							template: '<button @click="$emit(\'stop\')" class="stop-button-stub">Stop</button>',
+							emits: ['stop'],
+						},
+					},
+				},
+			});
+
+			// Find the stop button and click it
+			const stopButton = wrapper.find('.stop-button-stub');
+			expect(stopButton.exists()).toBe(true);
+			await stopButton.trigger('click');
+
+			// Check that N8nPromptInput emitted the stop event
+			expect(wrapper.emitted('stop')).toBeTruthy();
+			expect(wrapper.emitted('stop')?.[0]).toEqual([]);
+
+			wrapper.unmount();
+		});
+	});
+
+	describe('exposed methods', () => {
+		it('should expose focusInput method and focus the textarea', async () => {
+			const wrapper = mount(N8nPromptInput, {
+				props: {
+					modelValue: 'test',
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			// Get the textarea element
+			const textarea = wrapper.find('textarea').element as HTMLTextAreaElement;
+
+			// Spy on the focus method
+			const focusSpy = vi.spyOn(textarea, 'focus');
+
+			// Call the exposed focusInput method
+			await wrapper.vm.focusInput();
+
+			// Verify focus was called
+			expect(focusSpy).toHaveBeenCalled();
+
+			wrapper.unmount();
+		});
+
+		it('should focus input through ref access', () => {
+			const wrapper = renderComponent({
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = wrapper.container.querySelector('textarea') as HTMLTextAreaElement;
+
+			// The component should have a focusInput method that focuses the textarea
+			// Since we can't directly test the exposed method in this testing setup,
+			// we verify that the textarea element exists and can be focused
+			expect(textarea).toBeTruthy();
+
+			const focusSpy = vi.spyOn(textarea, 'focus');
+			textarea.focus();
+			expect(focusSpy).toHaveBeenCalled();
+		});
+	});
+
+	describe('edge cases', () => {
+		it('should handle very long single line text', () => {
+			const longText = 'a'.repeat(500);
+			const { container } = renderComponent({
+				props: {
+					modelValue: longText,
+					maxLength: 1000,
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			const textarea = container.querySelector('textarea');
+			expect(textarea).toHaveValue(longText);
+		});
+
+		it('should apply maxLinesBeforeScroll prop', () => {
+			// This prop affects the computed textAreaMaxHeight value
+			// which is used in multiline mode. We can test that the prop is accepted.
+			const { container } = renderComponent({
+				props: {
+					modelValue: 'Test',
+					maxLinesBeforeScroll: 2,
+				},
+				global: {
+					stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
+				},
+			});
+
+			// Component should render without errors
+			const textarea = container.querySelector('textarea');
+			expect(textarea).toBeTruthy();
+		});
+	});
+});
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.vue b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.vue
new file mode 100644
index 00000000000..20d55771e2e
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.vue
@@ -0,0 +1,435 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue';
+
+import { useCharacterLimit } from '../../composables/useCharacterLimit';
+import { useI18n } from '../../composables/useI18n';
+import N8nCallout from '../N8nCallout/Callout.vue';
+import N8nScrollArea from '../N8nScrollArea/N8nScrollArea.vue';
+import N8nSendStopButton from '../N8nSendStopButton';
+
+export interface N8nPromptInputProps {
+	modelValue?: string;
+	placeholder?: string;
+	maxLength?: number;
+	maxLinesBeforeScroll?: number;
+	minLines?: number;
+	streaming?: boolean;
+	disabled?: boolean;
+	refocusAfterSend?: boolean;
+}
+
+const props = withDefaults(defineProps<N8nPromptInputProps>(), {
+	modelValue: '',
+	placeholder: '',
+	maxLength: 1000,
+	maxLinesBeforeScroll: 6,
+	minLines: 1,
+	streaming: false,
+	disabled: false,
+	refocusAfterSend: false,
+});
+
+const emit = defineEmits<{
+	'update:modelValue': [value: string];
+	submit: [];
+	stop: [];
+	focus: [event: FocusEvent];
+	blur: [event: FocusEvent];
+}>();
+
+const { t } = useI18n();
+
+const textareaRef = ref<HTMLTextAreaElement>();
+const containerRef = ref<HTMLDivElement>();
+const isFocused = ref(false);
+const textValue = ref(props.modelValue || '');
+const singleLineHeight = 24;
+const lineHeight = 18; // Height per line in multiline mode
+const textareaHeight = ref<number>(
+	props.minLines > 1 ? lineHeight * props.minLines : singleLineHeight,
+);
+const isMultiline = ref(props.minLines > 1);
+
+const textAreaMaxHeight = computed(() => {
+	return props.maxLinesBeforeScroll * 18;
+});
+
+const { characterCount, isOverLimit, isAtLimit } = useCharacterLimit({
+	value: textValue,
+	maxLength: toRef(props, 'maxLength'),
+});
+
+const showWarningBanner = computed(() => isAtLimit.value);
+const sendDisabled = computed(
+	() => !textValue.value.trim() || props.streaming || props.disabled || isOverLimit.value,
+);
+
+const containerStyle = computed(() => {
+	return { minHeight: isMultiline.value ? '80px' : '40px' };
+});
+
+const textareaStyle = computed<{ height?: string; overflowY?: 'hidden' }>(() => {
+	if (!isMultiline.value) {
+		return {};
+	}
+
+	const height = Math.min(textareaHeight.value, textAreaMaxHeight.value);
+	return {
+		height: `${height}px`,
+		overflowY: 'hidden',
+	};
+});
+
+function adjustHeight() {
+	// Store focus state and scroll position before potential mode change
+	const wasFocused = document.activeElement === textareaRef.value;
+	const wasMultiline = isMultiline.value;
+	const minHeight = props.minLines > 1 ? lineHeight * props.minLines : singleLineHeight;
+
+	// If text is completely empty (not just whitespace), use minimum height
+	if (!textValue.value || textValue.value === '') {
+		// Respect minLines prop
+		if (props.minLines > 1) {
+			isMultiline.value = true;
+			textareaHeight.value = minHeight;
+			if (textareaRef.value) {
+				textareaRef.value.style.height = `${minHeight}px`;
+			}
+		} else {
+			isMultiline.value = false;
+			textareaHeight.value = singleLineHeight;
+			if (textareaRef.value) {
+				textareaRef.value.style.height = `${singleLineHeight}px`;
+			}
+		}
+		return;
+	}
+
+	// Measure the natural height
+	if (!textareaRef.value) return;
+	textareaRef.value.style.height = '0';
+	const scrollHeight = textareaRef.value.scrollHeight;
+
+	// Check if we need multiline mode
+	// Switch to multiline when text would wrap, when there's actual line breaks, or when minLines > 1
+	const shouldBeMultiline =
+		props.minLines > 1 || scrollHeight > singleLineHeight || textValue.value.includes('\n');
+
+	// Update height tracking - use at least the minimum height
+	textareaHeight.value = Math.max(scrollHeight, minHeight);
+	isMultiline.value = shouldBeMultiline;
+
+	// Apply the appropriate height
+	if (!isMultiline.value) {
+		textareaRef.value.style.height = `${singleLineHeight}px`;
+	} else {
+		// For multiline, set at least minHeight
+		textareaRef.value.style.height = `${Math.max(scrollHeight, minHeight)}px`;
+	}
+
+	// Restore focus if mode changed or if scrollbar appeared/disappeared
+	if (wasMultiline !== isMultiline.value || wasFocused) {
+		void nextTick(() => {
+			textareaRef.value?.focus();
+		});
+	}
+}
+
+watch(
+	() => props.modelValue,
+	(newValue) => {
+		textValue.value = newValue || '';
+		void nextTick(() => adjustHeight());
+	},
+);
+
+watch(textValue, (newValue, oldValue) => {
+	emit('update:modelValue', newValue);
+	// Only adjust height if value actually changed
+	if (newValue !== oldValue) {
+		void nextTick(() => adjustHeight());
+	}
+});
+
+async function refocusTextArea() {
+	await nextTick();
+	await new Promise(requestAnimationFrame);
+	textareaRef.value?.focus();
+}
+
+async function handleSubmit() {
+	emit('submit');
+	if (props.refocusAfterSend) {
+		await refocusTextArea();
+	}
+}
+
+async function handleStop() {
+	emit('stop');
+	if (props.refocusAfterSend) {
+		await refocusTextArea();
+	}
+}
+
+async function handleKeyDown(event: KeyboardEvent) {
+	const hasModifier = event.ctrlKey || event.metaKey;
+	const isPrintableChar = event.key.length === 1 && !hasModifier;
+	const isDeletionKey = event.key === 'Backspace' || event.key === 'Delete';
+	const atMaxLength = characterCount.value >= props.maxLength;
+	const isPlainEnter = event.key === 'Enter' && !event.shiftKey && !event.metaKey && !event.ctrlKey;
+
+	// Prevent adding characters if at max length (but allow deletions/navigation)
+	if (atMaxLength && isPrintableChar && !isDeletionKey) {
+		event.preventDefault();
+		return;
+	}
+
+	// Submit on plain Enter (no Shift/Ctrl/Meta). If send disabled, don't submit.
+	if (isPlainEnter) {
+		event.preventDefault();
+		if (!sendDisabled.value) {
+			await handleSubmit();
+		}
+	}
+}
+
+function handleFocus(event: FocusEvent) {
+	isFocused.value = true;
+	emit('focus', event);
+}
+
+function handleBlur(event: FocusEvent) {
+	isFocused.value = false;
+	emit('blur', event);
+}
+
+function focusInput() {
+	textareaRef.value?.focus();
+}
+
+onMounted(() => {
+	// Adjust height on mount to respect minLines or initial content
+	void nextTick(() => adjustHeight());
+});
+
+defineExpose({
+	focusInput,
+});
+</script>
+
+<template>
+	<div
+		ref="containerRef"
+		:class="[
+			$style.container,
+			{
+				[$style.focused]: isFocused,
+				[$style.multiline]: isMultiline,
+				[$style.disabled]: disabled,
+			},
+		]"
+		:style="containerStyle"
+	>
+		<!-- Warning banner when character limit is reached -->
+		<N8nCallout
+			slim
+			v-if="showWarningBanner"
+			icon="info"
+			theme="warning"
+			:class="$style.warningCallout"
+		>
+			{{ t('assistantChat.characterLimit', { limit: maxLength.toString() }) }}
+		</N8nCallout>
+
+		<!-- Single line mode: input and button side by side -->
+		<div v-if="!isMultiline" :class="$style.singleLineWrapper">
+			<textarea
+				ref="textareaRef"
+				v-model="textValue"
+				data-test-id="chat-input-textarea"
+				:class="[
+					$style.singleLineTextarea,
+					'ignore-key-press-node-creator',
+					'ignore-key-press-canvas',
+				]"
+				:placeholder="placeholder"
+				:disabled="disabled"
+				:maxlength="maxLength"
+				rows="1"
+				@keydown="handleKeyDown"
+				@focus="handleFocus"
+				@blur="handleBlur"
+				@input="adjustHeight"
+			/>
+			<div :class="$style.inlineActions">
+				<N8nSendStopButton
+					data-test-id="send-message-button"
+					:streaming="streaming"
+					:disabled="sendDisabled"
+					@send="handleSubmit"
+					@stop="handleStop"
+				/>
+			</div>
+		</div>
+
+		<!-- Multiline mode: textarea full width with button below -->
+		<template v-else>
+			<!-- Use ScrollArea when content exceeds max height -->
+			<N8nScrollArea
+				:class="$style.scrollAreaWrapper"
+				:max-height="`${textAreaMaxHeight}px`"
+				type="auto"
+			>
+				<textarea
+					ref="textareaRef"
+					v-model="textValue"
+					data-test-id="chat-input-textarea"
+					:class="[
+						$style.multilineTextarea,
+						'ignore-key-press-node-creator',
+						'ignore-key-press-canvas',
+					]"
+					:style="textareaStyle"
+					:placeholder="placeholder"
+					:disabled="disabled"
+					:maxlength="maxLength"
+					@keydown="handleKeyDown"
+					@focus="handleFocus"
+					@blur="handleBlur"
+					@input="adjustHeight"
+				/>
+			</N8nScrollArea>
+			<div :class="$style.bottomActions">
+				<N8nSendStopButton
+					data-test-id="send-message-button"
+					:streaming="streaming"
+					:disabled="sendDisabled"
+					@send="handleSubmit"
+					@stop="handleStop"
+				/>
+			</div>
+		</template>
+	</div>
+</template>
+
+<style lang="scss" module>
+.container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background: var(--color-background-xlight);
+	border: 1px solid var(--color-foreground-base);
+	border-radius: var(--border-radius-large);
+	transition:
+		border-color 0.2s ease,
+		box-shadow 0.2s ease;
+	padding: var(--spacing-2xs);
+	box-sizing: border-box;
+
+	&.focused {
+		border-color: var(--color-secondary);
+		box-shadow: 0 0 0 1px var(--color-secondary-tint-2);
+	}
+
+	&.multiline {
+		padding-bottom: 0;
+	}
+
+	&.disabled {
+		background-color: var(--color-foreground-xlight);
+		cursor: not-allowed;
+
+		textarea {
+			cursor: not-allowed;
+			color: var(--color-text-light);
+		}
+	}
+}
+
+.warningCallout {
+	margin: 0 var(--spacing-3xs) var(--spacing-2xs) var(--spacing-3xs);
+}
+
+// Single line mode
+.singleLineWrapper {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2xs);
+	width: 100%;
+}
+
+.singleLineTextarea {
+	flex: 1;
+	border: none;
+	background: transparent;
+	resize: none;
+	outline: none;
+	font-family: var(--font-family), sans-serif;
+	font-size: var(--font-size-2xs);
+	line-height: 24px;
+	color: var(--color-text-dark);
+	padding: 0 var(--spacing-2xs);
+	height: 24px;
+	overflow: hidden;
+	box-sizing: border-box;
+	display: block;
+
+	&::placeholder {
+		color: var(--color-text-light);
+	}
+}
+
+.inlineActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+}
+
+// Multiline mode
+.scrollAreaWrapper {
+	width: 100%;
+	margin-bottom: 0;
+}
+
+.multilineTextarea {
+	width: 100%;
+	border: none;
+	background: transparent;
+	resize: none;
+	outline: none;
+	font-family: var(--font-family), sans-serif;
+	font-size: var(--font-size-2xs);
+	line-height: 18px;
+	color: var(--color-text-dark);
+	padding: var(--spacing-3xs);
+	margin-bottom: 0;
+	box-sizing: border-box;
+	display: block;
+	overflow-y: hidden;
+
+	&::placeholder {
+		color: var(--color-text-light);
+	}
+}
+
+.bottomActions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--spacing-3xs);
+	padding: var(--spacing-2xs) 0 var(--spacing-2xs) var(--spacing-2xs);
+	margin-top: auto;
+}
+
+// Common styles
+.characterCount {
+	font-size: var(--font-size-3xs);
+	color: var(--color-text-light);
+	padding: 0 var(--spacing-3xs);
+
+	.overLimit {
+		color: var(--color-danger);
+		font-weight: var(--font-weight-bold);
+	}
+}
+</style>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/__snapshots__/N8nPromptInput.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/__snapshots__/N8nPromptInput.test.ts.snap
new file mode 100644
index 00000000000..0cae6aafae6
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/__snapshots__/N8nPromptInput.test.ts.snap
@@ -0,0 +1,120 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`N8nPromptInput > rendering > should render correctly with default props 1`] = `
+<div>
+  <div
+    class="container"
+    style="min-height: 40px;"
+  >
+    <!-- Warning banner when character limit is reached -->
+    <!--v-if-->
+    <!-- Single line mode: input and button side by side -->
+    <div
+      class="singleLineWrapper"
+    >
+      <textarea
+        class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+        data-test-id="chat-input-textarea"
+        maxlength="1000"
+        placeholder=""
+        rows="1"
+      />
+      <div
+        class="inlineActions"
+      >
+        <button
+          aria-disabled="true"
+          aria-live="polite"
+          class="button button primary small disabled withIcon square sendButton sendButton"
+          data-test-id="send-message-button"
+          disabled=""
+        >
+          <span
+            class="icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="n8n-icon"
+              data-icon="arrow-up"
+              focusable="false"
+              height="16px"
+              role="img"
+              viewBox="0 0 24 24"
+              width="16px"
+            >
+              <path
+                d="m5 12l7-7l7 7m-7 7V5"
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              />
+            </svg>
+          </span>
+          <!--v-if-->
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`N8nPromptInput > rendering > should render streaming state without disabling textarea 1`] = `
+<div>
+  <div
+    class="container"
+    style="min-height: 40px;"
+  >
+    <!-- Warning banner when character limit is reached -->
+    <!--v-if-->
+    <!-- Single line mode: input and button side by side -->
+    <div
+      class="singleLineWrapper"
+    >
+      <textarea
+        class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
+        data-test-id="chat-input-textarea"
+        maxlength="1000"
+        placeholder=""
+        rows="1"
+      />
+      <div
+        class="inlineActions"
+      >
+        <button
+          aria-live="polite"
+          class="button button primary small withIcon square stopButton stopButton"
+          data-test-id="send-message-button"
+        >
+          <span
+            class="icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="n8n-icon"
+              data-icon="filled-square"
+              fill="currentColor"
+              focusable="false"
+              height="12px"
+              overflow="hidden"
+              role="img"
+              viewBox="0 0 10 10"
+              width="12px"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="10"
+                rx="2"
+                ry="2"
+                width="10"
+              />
+            </svg>
+          </span>
+          <!--v-if-->
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/index.ts b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/index.ts
new file mode 100644
index 00000000000..77223d2aa72
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/index.ts
@@ -0,0 +1,3 @@
+import N8nPromptInput from './N8nPromptInput.vue';
+
+export default N8nPromptInput;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts
new file mode 100644
index 00000000000..686849fc3f0
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts
@@ -0,0 +1,299 @@
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import N8nSendStopButton from './N8nSendStopButton.vue';
+
+export default {
+	title: 'Atoms/SendStopButton',
+	component: N8nSendStopButton,
+	argTypes: {
+		streaming: {
+			control: 'boolean',
+		},
+		disabled: {
+			control: 'boolean',
+		},
+		size: {
+			control: {
+				type: 'select',
+				options: ['mini', 'small', 'medium', 'large'],
+			},
+		},
+	},
+	parameters: {
+		backgrounds: { default: '--color-background-light' },
+	},
+};
+
+const methods = {
+	onSend: action('send'),
+	onStop: action('stop'),
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	components: {
+		N8nSendStopButton,
+	},
+	template: `
+		<div style="display: flex; align-items: center; gap: 20px;">
+			<n8n-send-stop-button
+				v-bind="args"
+				@send="onSend"
+				@stop="onStop"
+			/>
+		</div>
+	`,
+	methods,
+});
+
+export const SendButton = Template.bind({});
+SendButton.args = {
+	streaming: false,
+	disabled: false,
+	size: 'small',
+};
+
+export const SendButtonDisabled = Template.bind({});
+SendButtonDisabled.args = {
+	streaming: false,
+	disabled: true,
+	size: 'small',
+};
+
+export const StopButton = Template.bind({});
+StopButton.args = {
+	streaming: true,
+	disabled: false,
+	size: 'small',
+};
+
+export const SmallSize = Template.bind({});
+SmallSize.args = {
+	streaming: false,
+	disabled: false,
+	size: 'small',
+};
+
+export const MediumSize = Template.bind({});
+MediumSize.args = {
+	streaming: false,
+	disabled: false,
+	size: 'medium',
+};
+
+export const LargeSize = Template.bind({});
+LargeSize.args = {
+	streaming: false,
+	disabled: false,
+	size: 'large',
+};
+
+const AllSizesTemplate: StoryFn = () => ({
+	components: {
+		N8nSendStopButton,
+	},
+	template: `
+		<div style="display: flex; flex-direction: column; gap: 20px;">
+			<div style="display: flex; align-items: center; gap: 20px;">
+				<n8n-send-stop-button size="mini" @send="onSend" />
+				<span style="color: var(--color-text-base)">Mini</span>
+			</div>
+			<div style="display: flex; align-items: center; gap: 20px;">
+				<n8n-send-stop-button size="small" @send="onSend" />
+				<span style="color: var(--color-text-base)">Small</span>
+			</div>
+			<div style="display: flex; align-items: center; gap: 20px;">
+				<n8n-send-stop-button size="medium" @send="onSend" />
+				<span style="color: var(--color-text-base)">Medium</span>
+			</div>
+			<div style="display: flex; align-items: center; gap: 20px;">
+				<n8n-send-stop-button size="large" @send="onSend" />
+				<span style="color: var(--color-text-base)">Large</span>
+			</div>
+		</div>
+	`,
+	methods,
+});
+
+export const AllSizes = AllSizesTemplate.bind({});
+
+const InteractiveTemplate: StoryFn = () => ({
+	components: {
+		N8nSendStopButton,
+	},
+	template: `
+		<div style="display: flex; flex-direction: column; gap: 30px;">
+			<div>
+				<h3 style="margin-bottom: 15px; color: var(--color-text-dark);">Interactive Demo</h3>
+				<div style="display: flex; align-items: center; gap: 20px;">
+					<n8n-send-stop-button
+						:streaming="streaming"
+						:disabled="disabled"
+						:size="size"
+						@send="handleSend"
+						@stop="handleStop"
+					/>
+					<span style="color: var(--color-text-base)">
+						{{ streaming ? 'Click to stop' : 'Click to send' }}
+					</span>
+				</div>
+			</div>
+
+			<div style="display: flex; flex-direction: column; gap: 10px;">
+				<label style="color: var(--color-text-base);">
+					<input type="checkbox" v-model="streaming" />
+					Streaming ({{ streaming ? 'ON' : 'OFF' }})
+				</label>
+				<label style="color: var(--color-text-base);">
+					<input type="checkbox" v-model="disabled" />
+					Disabled ({{ disabled ? 'ON' : 'OFF' }})
+				</label>
+				<label style="color: var(--color-text-base);">
+					Size:
+					<select v-model="size" style="margin-left: 10px;">
+						<option value="mini">Mini</option>
+						<option value="small">Small</option>
+						<option value="medium">Medium</option>
+						<option value="large">Large</option>
+					</select>
+				</label>
+			</div>
+
+			<div style="padding: 10px; background: var(--color-background-xlight); border-radius: 4px;">
+				<p style="color: var(--color-text-base); margin: 0;">Last action: {{ lastAction }}</p>
+			</div>
+		</div>
+	`,
+	data() {
+		return {
+			streaming: false,
+			disabled: false,
+			size: 'small' as const,
+			lastAction: 'None',
+		};
+	},
+	methods: {
+		handleSend() {
+			this.lastAction = 'Send clicked';
+			// Simulate starting streaming
+			this.streaming = true;
+			// Auto-stop after 2 seconds for demo
+			setTimeout(() => {
+				this.streaming = false;
+				this.lastAction = 'Auto-stopped after 2s';
+			}, 2000);
+		},
+		handleStop() {
+			this.lastAction = 'Stop clicked';
+			this.streaming = false;
+		},
+	},
+});
+
+export const Interactive = InteractiveTemplate.bind({});
+
+const StatesTemplate: StoryFn = () => ({
+	components: {
+		N8nSendStopButton,
+	},
+	template: `
+		<div style="display: grid; grid-template-columns: repeat(2, 200px); gap: 20px;">
+			<div style="text-align: center;">
+				<n8n-send-stop-button :streaming="false" :disabled="false" />
+				<p style="color: var(--color-text-base); margin-top: 10px;">Send (Enabled)</p>
+			</div>
+			<div style="text-align: center;">
+				<n8n-send-stop-button :streaming="false" :disabled="true" />
+				<p style="color: var(--color-text-base); margin-top: 10px;">Send (Disabled)</p>
+			</div>
+			<div style="text-align: center;">
+				<n8n-send-stop-button :streaming="true" :disabled="false" />
+				<p style="color: var(--color-text-base); margin-top: 10px;">Stop (Streaming)</p>
+			</div>
+			<div style="text-align: center;">
+				<div style="background: var(--color-background-dark); padding: 20px; border-radius: 4px;">
+					<n8n-send-stop-button :streaming="false" :disabled="false" />
+				</div>
+				<p style="color: var(--color-text-base); margin-top: 10px;">On Dark Background</p>
+			</div>
+		</div>
+	`,
+});
+
+export const AllStates = StatesTemplate.bind({});
+
+const UsageExampleTemplate: StoryFn = () => ({
+	components: {
+		N8nSendStopButton,
+	},
+	template: `
+		<div style="width: 400px;">
+			<h3 style="margin-bottom: 15px; color: var(--color-text-dark);">Chat Input Example</h3>
+			<div style="
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				padding: 8px;
+				background: var(--color-background-xlight);
+				border: 1px solid var(--color-foreground-base);
+				border-radius: var(--border-radius-large);
+			">
+				<input
+					v-model="message"
+					type="text"
+					placeholder="Type a message..."
+					:disabled="streaming"
+					@keydown.enter="handleSend"
+					style="
+						flex: 1;
+						border: none;
+						background: transparent;
+						outline: none;
+						padding: 4px 8px;
+						font-size: 14px;
+					"
+				/>
+				<n8n-send-stop-button
+					:streaming="streaming"
+					:disabled="!message.trim() && !streaming"
+					@send="handleSend"
+					@stop="handleStop"
+				/>
+			</div>
+			<div v-if="response" style="margin-top: 15px; padding: 10px; background: var(--color-background-light); border-radius: 4px;">
+				<p style="color: var(--color-text-base); margin: 0;">{{ response }}</p>
+			</div>
+		</div>
+	`,
+	data() {
+		return {
+			message: '',
+			streaming: false,
+			response: '',
+		};
+	},
+	methods: {
+		handleSend() {
+			if (!this.message.trim()) return;
+
+			this.response = 'Processing: "' + this.message + '"...';
+			this.streaming = true;
+			const msg = this.message;
+			this.message = '';
+
+			// Simulate response
+			setTimeout(() => {
+				this.response = 'Response to: "' + msg + '"';
+				this.streaming = false;
+			}, 2000);
+		},
+		handleStop() {
+			this.response = 'Stopped!';
+			this.streaming = false;
+		},
+	},
+});
+
+export const UsageExample = UsageExampleTemplate.bind({});
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.test.ts
new file mode 100644
index 00000000000..8dc5aa02233
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.test.ts
@@ -0,0 +1,262 @@
+import { fireEvent } from '@testing-library/vue';
+
+import { createComponentRenderer } from '@n8n/design-system/__tests__/render';
+
+import N8nSendStopButton from './N8nSendStopButton.vue';
+
+const renderComponent = createComponentRenderer(N8nSendStopButton);
+
+describe('N8nSendStopButton', () => {
+	describe('rendering', () => {
+		it('should render send button by default', () => {
+			const { container } = renderComponent({
+				global: {
+					stubs: ['N8nButton'],
+				},
+			});
+
+			const sendButton = container.querySelector('.sendButton');
+			expect(sendButton).toBeTruthy();
+
+			const stopButton = container.querySelector('.stopButton');
+			expect(stopButton).toBeFalsy();
+		});
+
+		it('should render stop button when streaming', () => {
+			const { container } = renderComponent({
+				props: {
+					streaming: true,
+				},
+				global: {
+					stubs: ['N8nButton'],
+				},
+			});
+
+			const sendButton = container.querySelector('.sendButton');
+			expect(sendButton).toBeFalsy();
+
+			const stopButton = container.querySelector('.stopButton');
+			expect(stopButton).toBeTruthy();
+		});
+
+		it('should render with custom size', () => {
+			const { container } = renderComponent({
+				props: {
+					size: 'large',
+				},
+				global: {
+					stubs: {
+						N8nButton: {
+							props: ['size', 'type', 'square', 'disabled', 'icon', 'iconSize'],
+							template: '<button :class="{sendButton: true}" :data-size="size"></button>',
+						},
+					},
+				},
+			});
+
+			const button = container.querySelector('button');
+			expect(button).toHaveAttribute('data-size', 'large');
+		});
+
+		it('should disable send button when disabled prop is true', () => {
+			const { container } = renderComponent({
+				props: {
+					disabled: true,
+				},
+				global: {
+					stubs: {
+						N8nButton: {
+							props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
+							template: '<button :disabled="disabled" :class="{sendButton: true}"></button>',
+						},
+					},
+				},
+			});
+
+			const button = container.querySelector('button');
+			expect(button).toHaveAttribute('disabled');
+		});
+	});
+
+	describe('events', () => {
+		it('should emit send event when send button is clicked', async () => {
+			const render = renderComponent({
+				global: {
+					stubs: {
+						N8nButton: {
+							props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
+							template: '<button @click="$emit(\'click\')" :class="{sendButton: true}"></button>',
+							emits: ['click'],
+						},
+					},
+				},
+			});
+
+			const button = render.container.querySelector('button') as HTMLButtonElement;
+			await fireEvent.click(button);
+
+			expect(render.emitted('send')).toBeTruthy();
+			expect(render.emitted('send')?.[0]).toEqual([]);
+		});
+
+		it('should emit stop event when stop button is clicked', async () => {
+			const render = renderComponent({
+				props: {
+					streaming: true,
+				},
+				global: {
+					stubs: {
+						N8nButton: {
+							props: ['type', 'square', 'size', 'icon', 'iconSize'],
+							template: '<button @click="$emit(\'click\')" :class="{stopButton: true}"></button>',
+							emits: ['click'],
+						},
+					},
+				},
+			});
+
+			const button = render.container.querySelector('button') as HTMLButtonElement;
+			await fireEvent.click(button);
+
+			expect(render.emitted('stop')).toBeTruthy();
+			expect(render.emitted('stop')?.[0]).toEqual([]);
+		});
+
+		it('should not emit send event when button is disabled', async () => {
+			const render = renderComponent({
+				props: {
+					disabled: true,
+				},
+				global: {
+					stubs: {
+						N8nButton: {
+							props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
+							template:
+								'<button :disabled="disabled" @click="!disabled && $emit(\'click\')" :class="{sendButton: true}"></button>',
+							emits: ['click'],
+						},
+					},
+				},
+			});
+
+			const button = render.container.querySelector('button') as HTMLButtonElement;
+			await fireEvent.click(button);
+
+			expect(render.emitted('send')).toBeFalsy();
+		});
+	});
+
+	describe('button properties', () => {
+		it('should pass correct props to send button', () => {
+			const { container } = renderComponent({
+				props: {
+					size: 'medium',
+					disabled: false,
+				},
+				global: {
+					stubs: {
+						N8nButton: {
+							props: ['type', 'size', 'iconSize', 'square', 'icon', 'disabled'],
+							template: `
+								<button
+									:data-type="type"
+									:data-size="size"
+									:data-icon-size="iconSize"
+									:data-square="square"
+									:data-icon="icon"
+									:disabled="disabled"
+									:class="{sendButton: true}"
+								></button>`,
+						},
+					},
+				},
+			});
+
+			const button = container.querySelector('button');
+			expect(button).toHaveAttribute('data-type', 'primary');
+			expect(button).toHaveAttribute('data-size', 'medium');
+			expect(button).toHaveAttribute('data-icon-size', 'large');
+			expect(button).toHaveAttribute('data-square', '');
+			expect(button).toHaveAttribute('data-icon', 'arrow-up');
+			expect(button).not.toHaveAttribute('disabled');
+		});
+
+		it('should pass correct props to stop button', () => {
+			const { container } = renderComponent({
+				props: {
+					streaming: true,
+					size: 'small',
+				},
+				global: {
+					stubs: {
+						N8nButton: {
+							props: ['type', 'size', 'square'],
+							template: `
+								<button
+									:data-type="type"
+									:data-size="size"
+									:data-square="square"
+									:class="{stopButton: true}"
+								></button>`,
+						},
+					},
+				},
+			});
+
+			const button = container.querySelector('button');
+			expect(button).toHaveAttribute('data-type', 'primary');
+			expect(button).toHaveAttribute('data-size', 'small');
+			expect(button).toHaveAttribute('data-square', '');
+		});
+	});
+
+	describe('default props', () => {
+		it('should use default size of small', () => {
+			const { container } = renderComponent({
+				global: {
+					stubs: {
+						N8nButton: {
+							props: ['size', 'type', 'square', 'icon', 'iconSize', 'disabled'],
+							template: '<button :data-size="size" :class="{sendButton: true}"></button>',
+						},
+					},
+				},
+			});
+
+			const button = container.querySelector('button');
+			expect(button).toHaveAttribute('data-size', 'small');
+		});
+
+		it('should default to not streaming', () => {
+			const { container } = renderComponent({
+				global: {
+					stubs: ['N8nButton'],
+				},
+			});
+
+			const sendButton = container.querySelector('.sendButton');
+			expect(sendButton).toBeTruthy();
+
+			const stopButton = container.querySelector('.stopButton');
+			expect(stopButton).toBeFalsy();
+		});
+
+		it('should default to not disabled', () => {
+			const { container } = renderComponent({
+				global: {
+					stubs: {
+						N8nButton: {
+							props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
+							template:
+								'<button :disabled="disabled" :data-disabled="disabled" :class="{sendButton: true}"></button>',
+						},
+					},
+				},
+			});
+
+			const button = container.querySelector('button');
+			expect(button).not.toHaveAttribute('disabled');
+			expect(button).toHaveAttribute('data-disabled', 'false');
+		});
+	});
+});
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.vue b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.vue
new file mode 100644
index 00000000000..c938c766787
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import N8nButton from '../N8nButton';
+
+export interface N8nSendStopButtonProps {
+	streaming?: boolean;
+	disabled?: boolean;
+	size?: 'mini' | 'small' | 'medium' | 'large';
+}
+
+withDefaults(defineProps<N8nSendStopButtonProps>(), {
+	streaming: false,
+	disabled: false,
+	size: 'small',
+});
+
+const emit = defineEmits<{
+	send: [];
+	stop: [];
+}>();
+
+function handleSend() {
+	emit('send');
+}
+
+function handleStop() {
+	emit('stop');
+}
+</script>
+
+<template>
+	<N8nButton
+		v-if="streaming"
+		:class="$style.stopButton"
+		type="primary"
+		:size="size"
+		icon="filled-square"
+		icon-size="small"
+		square
+		@click="handleStop"
+	/>
+	<N8nButton
+		v-else
+		:class="$style.sendButton"
+		type="primary"
+		:size="size"
+		icon-size="large"
+		square
+		icon="arrow-up"
+		:disabled="disabled"
+		@click="handleSend"
+	/>
+</template>
+
+<style lang="scss" module>
+.sendButton {
+	--button-border-radius: var(--border-radius-large);
+}
+
+.stopButton {
+	--button-border-radius: var(--border-radius-large);
+}
+</style>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/index.ts b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/index.ts
new file mode 100644
index 00000000000..63981a0d9d9
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/index.ts
@@ -0,0 +1,5 @@
+import N8nSendStopButton from './N8nSendStopButton.vue';
+
+export type { N8nSendStopButtonProps } from './N8nSendStopButton.vue';
+
+export default N8nSendStopButton;
diff --git a/packages/frontend/@n8n/design-system/src/components/index.ts b/packages/frontend/@n8n/design-system/src/components/index.ts
index ba4eb484b57..c4fdce97c35 100644
--- a/packages/frontend/@n8n/design-system/src/components/index.ts
+++ b/packages/frontend/@n8n/design-system/src/components/index.ts
@@ -37,7 +37,9 @@ export { default as N8nOption } from './N8nOption';
 export { default as N8nSelectableList } from './N8nSelectableList';
 export { default as N8nPopover } from './N8nPopover';
 export { default as N8nPopoverReka } from './N8nPopoverReka';
+export { default as N8nPromptInput } from './N8nPromptInput';
 export { default as N8nPulse } from './N8nPulse';
+export { default as N8nSendStopButton } from './N8nSendStopButton';
 export { default as N8nRadioButtons } from './N8nRadioButtons';
 export { default as N8nRoute } from './N8nRoute';
 export { default as N8nRecycleScroller } from './N8nRecycleScroller';
diff --git a/packages/frontend/@n8n/design-system/src/composables/useCharacterLimit.ts b/packages/frontend/@n8n/design-system/src/composables/useCharacterLimit.ts
new file mode 100644
index 00000000000..8768b005afb
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/composables/useCharacterLimit.ts
@@ -0,0 +1,33 @@
+import { computed, type ComputedRef, type Ref } from 'vue';
+
+interface UseCharacterLimitOptions {
+	value: Ref<string>;
+	maxLength: Ref<number>;
+}
+
+interface UseCharacterLimitReturn {
+	characterCount: ComputedRef<number>;
+	remainingCharacters: ComputedRef<number>;
+	isOverLimit: ComputedRef<boolean>;
+	isAtLimit: ComputedRef<boolean>;
+}
+
+export function useCharacterLimit({
+	value,
+	maxLength,
+}: UseCharacterLimitOptions): UseCharacterLimitReturn {
+	const characterCount = computed(() => value.value.length);
+
+	const remainingCharacters = computed(() => maxLength.value - characterCount.value);
+
+	const isOverLimit = computed(() => characterCount.value > maxLength.value);
+
+	const isAtLimit = computed(() => characterCount.value >= maxLength.value);
+
+	return {
+		characterCount,
+		remainingCharacters,
+		isOverLimit,
+		isAtLimit,
+	};
+}
diff --git a/packages/frontend/@n8n/design-system/src/composables/useI18n.ts b/packages/frontend/@n8n/design-system/src/composables/useI18n.ts
index 9c18f3e6aca..af87f428d77 100644
--- a/packages/frontend/@n8n/design-system/src/composables/useI18n.ts
+++ b/packages/frontend/@n8n/design-system/src/composables/useI18n.ts
@@ -1,7 +1,8 @@
 import { t } from '../locale';
+import { type N8nLocaleTranslateFnOptions } from '../types/i18n';
 
 export function useI18n() {
 	return {
-		t: (path: string, options: string[] = []) => t(path, options),
+		t: (path: string, options?: N8nLocaleTranslateFnOptions) => t(path, options),
 	};
 }
diff --git a/packages/frontend/@n8n/design-system/src/locale/lang/en.ts b/packages/frontend/@n8n/design-system/src/locale/lang/en.ts
index 52db3808f34..a3b908bdcac 100644
--- a/packages/frontend/@n8n/design-system/src/locale/lang/en.ts
+++ b/packages/frontend/@n8n/design-system/src/locale/lang/en.ts
@@ -67,6 +67,7 @@ export default {
 	'assistantChat.inputPlaceholder': 'Enter your response...',
 	'assistantChat.copy': 'Copy',
 	'assistantChat.copied': 'Copied',
+	'assistantChat.characterLimit': "You've reached the {limit} character limit",
 	'aiAssistant.builder.canvas.thinking': 'Working...',
 	'inlineAskAssistantButton.asked': 'Asked',
 	'iconPicker.button.defaultToolTip': 'Choose icon',
diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json
index 636329b1852..2e7624b1081 100644
--- a/packages/frontend/@n8n/i18n/src/locales/en.json
+++ b/packages/frontend/@n8n/i18n/src/locales/en.json
@@ -200,13 +200,14 @@
 	"aiAssistant.tabs.build": "Build",
 	"aiAssistant.builder.mode": "AI Builder",
 	"aiAssistant.builder.placeholder": "Ask n8n to build...",
+	"aiAssistant.builder.assistantPlaceholder": "What would you like to modify or add?",
+	"aiAssistant.builder.characterLimit": "You've reached the { limit } character limit",
 	"aiAssistant.builder.generateNew": "Generate new workflow",
 	"aiAssistant.builder.newWorkflowNotice": "The created workflow will be added to the editor",
 	"aiAssistant.builder.feedbackPrompt": "Is this workflow helpful?",
 	"aiAssistant.builder.invalidPrompt": "Prompt validation failed. Please try again with a clearer description of your workflow requirements and supported integrations.",
 	"aiAssistant.builder.workflowParsingError.title": "Unable to insert workflow",
 	"aiAssistant.builder.workflowParsingError.content": "The workflow returned by AI could not be parsed. Please try again.",
-	"aiAssistant.builder.canvasPrompt.buildWorkflow": "Create workflow",
 	"aiAssistant.builder.canvasPrompt.title": "What would you like to automate?",
 	"aiAssistant.builder.canvasPrompt.confirmTitle": "Replace current prompt?",
 	"aiAssistant.builder.canvasPrompt.confirmMessage": "This will replace your current prompt. Are you sure?",
diff --git a/packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.test.ts b/packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.test.ts
index c1af60d006d..cf98dcf7a75 100644
--- a/packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.test.ts
+++ b/packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.test.ts
@@ -136,11 +136,12 @@ describe('AskAssistantBuild', () => {
 
 			// Type message into the chat input
 			const chatInput = getByTestId('chat-input');
-			await fireEvent.update(chatInput, testMessage);
+			const textarea = chatInput.querySelector('textarea');
+			if (!textarea) throw new Error('Textarea not found');
+			await fireEvent.update(textarea, testMessage);
 
-			// Click the send button
-			const sendButton = getByTestId('send-message-button');
-			sendButton.click();
+			// Trigger submit using Enter key (N8nPromptInput submits on Enter)
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			await flushPromises();
 
@@ -332,9 +333,10 @@ describe('AskAssistantBuild', () => {
 			// Send initial message to start generation
 			const testMessage = 'Create a workflow to send emails';
 			const chatInput = await findByTestId('chat-input');
-			await fireEvent.update(chatInput, testMessage);
-			const sendButton = await findByTestId('send-message-button');
-			await fireEvent.click(sendButton);
+			const textarea = chatInput.querySelector('textarea');
+			if (!textarea) throw new Error('Textarea not found');
+			await fireEvent.update(textarea, testMessage);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			expect(builderStore.sendChatMessage).toHaveBeenCalledWith({
 				initialGeneration: true,
@@ -403,9 +405,10 @@ describe('AskAssistantBuild', () => {
 			// Send message to modify existing workflow
 			const testMessage = 'Add an HTTP node';
 			const chatInput = await findByTestId('chat-input');
-			await fireEvent.update(chatInput, testMessage);
-			const sendButton = await findByTestId('send-message-button');
-			await fireEvent.click(sendButton);
+			const textarea = chatInput.querySelector('textarea');
+			if (!textarea) throw new Error('Textarea not found');
+			await fireEvent.update(textarea, testMessage);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			expect(builderStore.sendChatMessage).toHaveBeenCalledWith({
 				initialGeneration: false,
@@ -459,9 +462,10 @@ describe('AskAssistantBuild', () => {
 			// Send initial message
 			const testMessage = 'Create a workflow';
 			const chatInput = await findByTestId('chat-input');
-			await fireEvent.update(chatInput, testMessage);
-			const sendButton = await findByTestId('send-message-button');
-			await fireEvent.click(sendButton);
+			const textarea = chatInput.querySelector('textarea');
+			if (!textarea) throw new Error('Textarea not found');
+			await fireEvent.update(textarea, testMessage);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			// The component should have set initialGeneration to true since workflow was empty
 			await flushPromises();
@@ -513,9 +517,10 @@ describe('AskAssistantBuild', () => {
 			// Send initial message
 			const testMessage = 'Create a workflow';
 			const chatInput = await findByTestId('chat-input');
-			await fireEvent.update(chatInput, testMessage);
-			const sendButton = await findByTestId('send-message-button');
-			await fireEvent.click(sendButton);
+			const textarea = chatInput.querySelector('textarea');
+			if (!textarea) throw new Error('Textarea not found');
+			await fireEvent.update(textarea, testMessage);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			// Simulate streaming starts
 			builderStore.$patch({ streaming: true });
@@ -564,9 +569,10 @@ describe('AskAssistantBuild', () => {
 			// Send initial message
 			const testMessage = 'Create a workflow';
 			const chatInput = await findByTestId('chat-input');
-			await fireEvent.update(chatInput, testMessage);
-			const sendButton = await findByTestId('send-message-button');
-			await fireEvent.click(sendButton);
+			const textarea = chatInput.querySelector('textarea');
+			if (!textarea) throw new Error('Textarea not found');
+			await fireEvent.update(textarea, testMessage);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			await flushPromises();
 
@@ -593,9 +599,10 @@ describe('AskAssistantBuild', () => {
 			// Send new message in existing session
 			const testMessage = 'Add email nodes';
 			const chatInput = await findByTestId('chat-input');
-			await fireEvent.update(chatInput, testMessage);
-			const sendButton = await findByTestId('send-message-button');
-			await fireEvent.click(sendButton);
+			const textarea = chatInput.querySelector('textarea');
+			if (!textarea) throw new Error('Textarea not found');
+			await fireEvent.update(textarea, testMessage);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			// Simulate streaming starts
 			builderStore.$patch({ streaming: true, initialGeneration: true });
@@ -664,9 +671,10 @@ describe('AskAssistantBuild', () => {
 			// Send message to generate new workflow
 			const testMessage = 'Create a new workflow';
 			const chatInput = await findByTestId('chat-input');
-			await fireEvent.update(chatInput, testMessage);
-			const sendButton = await findByTestId('send-message-button');
-			await fireEvent.click(sendButton);
+			const textarea = chatInput.querySelector('textarea');
+			if (!textarea) throw new Error('Textarea not found');
+			await fireEvent.update(textarea, testMessage);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			expect(builderStore.sendChatMessage).toHaveBeenCalledWith({
 				initialGeneration: true,
@@ -725,9 +733,10 @@ describe('AskAssistantBuild', () => {
 			// Send message
 			const testMessage = 'Create a workflow';
 			const chatInput = await findByTestId('chat-input');
-			await fireEvent.update(chatInput, testMessage);
-			const sendButton = await findByTestId('send-message-button');
-			await fireEvent.click(sendButton);
+			const textarea = chatInput.querySelector('textarea');
+			if (!textarea) throw new Error('Textarea not found');
+			await fireEvent.update(textarea, testMessage);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			// Simulate streaming starts
 			builderStore.$patch({ streaming: true });
diff --git a/packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.vue b/packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.vue
index 9582323b5f3..75cfaae14d5 100644
--- a/packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.vue
+++ b/packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.vue
@@ -190,8 +190,7 @@ watch(currentRoute, () => {
 			:title="'n8n AI'"
 			:show-stop="true"
 			:scroll-on-new-message="true"
-			:placeholder="i18n.baseText('aiAssistant.builder.placeholder')"
-			:max-length="1000"
+			:inputPlaceholder="i18n.baseText('aiAssistant.builder.assistantPlaceholder')"
 			@close="emit('close')"
 			@message="onUserMessage"
 			@feedback="onFeedback"
@@ -202,7 +201,7 @@ watch(currentRoute, () => {
 			</template>
 			<template #placeholder>
 				<n8n-text :class="$style.topText">{{
-					i18n.baseText('aiAssistant.builder.placeholder')
+					i18n.baseText('aiAssistant.builder.assistantPlaceholder')
 				}}</n8n-text>
 			</template>
 		</AskAssistantChat>
diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.test.ts b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.test.ts
index eea3c85a7b3..a1d23cd5d51 100644
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.test.ts
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.test.ts
@@ -89,32 +89,47 @@ describe('CanvasNodeAIPrompt', () => {
 	});
 
 	describe('disabled state', () => {
-		it('should disable textarea when builder is streaming', () => {
+		it('should NOT disable textarea when builder is streaming', () => {
 			streaming.value = true;
 			const { container } = renderComponent();
 
 			const textarea = container.querySelector('textarea');
-			expect(textarea).toHaveAttribute('disabled');
+			// Textarea should remain enabled during streaming
+			expect(textarea).not.toHaveAttribute('disabled');
 		});
 
-		it('should disable submit button when builder is streaming', () => {
+		it('should show stop button when builder is streaming', () => {
 			streaming.value = true;
 			const { container } = renderComponent();
 
-			const submitButton = container.querySelector('button[type="submit"]');
-			expect(submitButton).toHaveAttribute('disabled');
+			// When streaming, the button changes to a stop button
+			// The N8nSendStopButton component changes its icon when streaming
+			// We check that there's a button present when streaming
+			const buttons = container.querySelectorAll('button');
+			// Should have at least the stop button
+			expect(buttons.length).toBeGreaterThan(0);
 		});
 
 		it('should disable submit button when prompt is empty', () => {
 			const { container } = renderComponent();
 
-			const submitButton = container.querySelector('button[type="submit"]');
-			expect(submitButton).toHaveAttribute('disabled');
+			// The send button should be disabled when prompt is empty
+			// It's nested inside the N8nPromptInput component
+			// Look for any disabled button element
+			const disabledButtons = container.querySelectorAll('button[disabled]');
+
+			// There should be at least one disabled button (the send button)
+			expect(disabledButtons.length).toBeGreaterThan(0);
+
+			// Verify the first disabled button is the send button
+			const sendButton = disabledButtons[0];
+			expect(sendButton).toBeTruthy();
+			expect(sendButton).toHaveAttribute('disabled');
 		});
 	});
 
 	describe('form submission', () => {
-		it('should submit form on Cmd+Enter keyboard shortcut', async () => {
+		it('should submit on Enter keyboard shortcut', async () => {
 			const { container } = renderComponent();
 			const textarea = container.querySelector('textarea');
 
@@ -123,8 +138,8 @@ describe('CanvasNodeAIPrompt', () => {
 			// Type in textarea
 			await fireEvent.update(textarea, 'Test prompt');
 
-			// Fire Cmd+Enter
-			await fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true });
+			// Fire Enter (without modifiers - N8nPromptInput submits on plain Enter)
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			await waitFor(() => {
 				expect(openChat).toHaveBeenCalled();
@@ -138,11 +153,12 @@ describe('CanvasNodeAIPrompt', () => {
 
 		it('should not submit when prompt is empty', async () => {
 			const { container } = renderComponent();
-			const form = container.querySelector('form');
+			const textarea = container.querySelector('textarea');
 
-			if (!form) throw new Error('Form not found');
+			if (!textarea) throw new Error('Textarea not found');
 
-			await fireEvent.submit(form);
+			// Try to submit with empty prompt
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			expect(openChat).not.toHaveBeenCalled();
 		});
@@ -151,13 +167,12 @@ describe('CanvasNodeAIPrompt', () => {
 			streaming.value = true;
 			const { container } = renderComponent();
 			const textarea = container.querySelector('textarea');
-			const form = container.querySelector('form');
 
-			if (!textarea || !form) throw new Error('Elements not found');
+			if (!textarea) throw new Error('Textarea not found');
 
 			// Even with content, submission should be blocked
 			await fireEvent.update(textarea, 'Test prompt');
-			await fireEvent.submit(form);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			expect(openChat).not.toHaveBeenCalled();
 		});
@@ -165,12 +180,11 @@ describe('CanvasNodeAIPrompt', () => {
 		it('should open AI assistant panel and send message on submit', async () => {
 			const { container } = renderComponent();
 			const textarea = container.querySelector('textarea');
-			const form = container.querySelector('form');
 
-			if (!textarea || !form) throw new Error('Elements not found');
+			if (!textarea) throw new Error('Textarea not found');
 
 			await fireEvent.update(textarea, 'Test workflow prompt');
-			await fireEvent.submit(form);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			await waitFor(() => {
 				expect(openChat).toHaveBeenCalled();
@@ -186,12 +200,11 @@ describe('CanvasNodeAIPrompt', () => {
 			isNewWorkflow.value = true;
 			const { container } = renderComponent();
 			const textarea = container.querySelector('textarea');
-			const form = container.querySelector('form');
 
-			if (!textarea || !form) throw new Error('Elements not found');
+			if (!textarea) throw new Error('Textarea not found');
 
 			await fireEvent.update(textarea, 'Test prompt');
-			await fireEvent.submit(form);
+			await fireEvent.keyDown(textarea, { key: 'Enter' });
 
 			await waitFor(() => {
 				expect(saveCurrentWorkflow).toHaveBeenCalled();
diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.vue b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.vue
index d771015d74f..7b55966798a 100644
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { useI18n } from '@n8n/i18n';
+import N8nPromptInput from '@n8n/design-system/components/N8nPromptInput/N8nPromptInput.vue';
 import { useBuilderStore } from '@/stores/builder.store';
 import { useRouter } from 'vue-router';
 import { useWorkflowSaving } from '@/composables/useWorkflowSaving';
@@ -29,7 +30,6 @@ const workflowSaver = useWorkflowSaving({ router });
 // Component state
 const prompt = ref('');
 const userEditedPrompt = ref(false);
-const isFocused = ref(false);
 const isLoading = ref(false);
 
 // Computed properties
@@ -111,40 +111,26 @@ function onAddNodeClick() {
 
 		<!-- Prompt input section -->
 		<section
-			:class="[$style.promptContainer, { [$style.focused]: isFocused }]"
+			:class="$style.promptContainer"
 			@click.stop
 			@dblclick.stop
 			@mousedown.stop
 			@scroll.stop
 			@wheel.stop
 		>
-			<form :class="$style.form" @submit.prevent="onSubmit">
-				<n8n-input
-					v-model="prompt"
-					name="aiBuilderPrompt"
-					:class="$style.formTextarea"
-					type="textarea"
-					:disabled="isLoading || builderStore.streaming"
-					:placeholder="i18n.baseText('aiAssistant.builder.placeholder')"
-					:read-only="false"
-					:rows="15"
-					:maxlength="1000"
-					@focus="isFocused = true"
-					@blur="isFocused = false"
-					@keydown.meta.enter.stop="onSubmit"
-					@input="userEditedPrompt = true"
-				/>
-				<footer :class="$style.formFooter">
-					<n8n-button
-						native-type="submit"
-						:disabled="!hasContent || builderStore.streaming"
-						:loading="isLoading"
-						@keydown.enter="onSubmit"
-					>
-						{{ i18n.baseText('aiAssistant.builder.canvasPrompt.buildWorkflow') }}
-					</n8n-button>
-				</footer>
-			</form>
+			<N8nPromptInput
+				v-model="prompt"
+				:class="$style.promptInput"
+				:disabled="isLoading"
+				:streaming="builderStore.streaming"
+				:placeholder="i18n.baseText('aiAssistant.builder.placeholder')"
+				:max-lines-before-scroll="4"
+				:min-lines="2"
+				data-test-id="ai-builder-prompt"
+				@submit="onSubmit"
+				@stop="builderStore.stopStreaming"
+				@input="userEditedPrompt = true"
+			/>
 		</section>
 
 		<!-- Suggestion pills section -->
@@ -208,70 +194,13 @@ function onAddNodeClick() {
 /* Prompt Input Section */
 .promptContainer {
 	display: flex;
-	height: 128px;
-	padding: var(--spacing-xs);
-	padding-left: var(--spacing-s);
 	flex-direction: column;
-	justify-content: flex-end;
-	align-items: flex-end;
 	gap: var(--spacing-s);
 	align-self: stretch;
-	border-radius: var(--border-radius-large);
-	border: 1px solid var(--color-foreground-xdark);
-	background: var(--color-background-xlight);
-	transition: border-color 0.2s ease;
-
-	&.focused {
-		border-color: var(--prim-color-secondary);
-	}
 }
 
-.form {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
+.promptInput {
 	width: 100%;
-	gap: var(--spacing-xs);
-}
-
-.formTextarea {
-	display: flex;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	border: 0;
-
-	:global(.el-textarea__inner) {
-		height: 100%;
-		min-height: 0;
-		overflow-y: auto;
-		border: 0;
-		background: transparent;
-		resize: none;
-		font-family: var(--font-family);
-		padding: 0;
-
-		/* Custom scrollbar styles */
-		@supports not (selector(::-webkit-scrollbar)) {
-			scrollbar-width: thin;
-		}
-		@supports selector(::-webkit-scrollbar) {
-			&::-webkit-scrollbar {
-				width: var(--spacing-2xs);
-			}
-			&::-webkit-scrollbar-thumb {
-				border-radius: var(--spacing-xs);
-				background: var(--color-foreground-dark);
-				border: var(--spacing-5xs) solid white;
-			}
-		}
-	}
-}
-
-.formFooter {
-	display: flex;
-	justify-content: flex-end;
 }
 
 /* Suggestion Pills Section */
diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeAIPrompt.test.ts.snap b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeAIPrompt.test.ts.snap
index 3d1714e9c31..66e1923a2ab 100644
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeAIPrompt.test.ts.snap
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeAIPrompt.test.ts.snap
@@ -6,16 +6,36 @@ exports[`CanvasNodeAIPrompt > should render component correctly 1`] = `
     <h2 class="title">What would you like to automate?</h2>
   </header><!-- Prompt input section -->
   <section class="promptContainer">
-    <form class="form">
-      <div class="el-textarea el-input--large n8n-input formTextarea formTextarea">
-        <!-- input -->
-        <!-- textarea --><textarea class="el-textarea__inner" name="aiBuilderPrompt" rows="15" title="" maxlength="1000" read-only="false" tabindex="0" autocomplete="off" placeholder="Ask n8n to build..."></textarea>
+    <div class="container multiline promptInput" style="min-height: 80px;" data-test-id="ai-builder-prompt">
+      <!-- Warning banner when character limit is reached -->
+      <!--v-if-->
+      <!-- Single line mode: input and button side by side -->
+      <!-- Multiline mode: textarea full width with button below -->
+      <!-- Use ScrollArea when content exceeds max height -->
+      <div dir="ltr" style="position: relative; --reka-scroll-area-corner-width: 0px; --reka-scroll-area-corner-height: 0px;" class="scrollAreaRoot scrollAreaWrapper">
+        <div data-reka-scroll-area-viewport="" style="overflow-x: hidden; overflow-y: hidden; max-height: 72px;" class="viewport" tabindex="0">
+          <div><textarea data-test-id="chat-input-textarea" class="multilineTextarea ignore-key-press-node-creator ignore-key-press-canvas" style="height: 36px; overflow-y: hidden;" placeholder="Ask n8n to build..." maxlength="1000"></textarea></div>
+        </div>
+        <style>
+          /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+          [data-reka-scroll-area-viewport] {
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+            -webkit-overflow-scrolling: touch;
+          }
+
+          [data-reka-scroll-area-viewport]::-webkit-scrollbar {
+            display: none;
+          }
+        </style>
+        <!---->
+        <!--v-if-->
         <!--v-if-->
       </div>
-      <footer class="formFooter"><button class="button button primary medium disabled" disabled="" aria-disabled="true" aria-live="polite" type="submit">
-          <!--v-if-->Create workflow
-        </button></footer>
-    </form>
+      <div class="bottomActions"><button class="button button primary small disabled withIcon square sendButton sendButton" disabled="" aria-disabled="true" aria-live="polite" data-test-id="send-message-button"><span class="icon"><svg viewBox="0 0 24 24" width="16px" height="16px" class="n8n-icon" aria-hidden="true" focusable="false" role="img" data-icon="arrow-up"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 12l7-7l7 7m-7 7V5"></path></svg></span>
+          <!--v-if-->
+        </button></div>
+    </div>
   </section><!-- Suggestion pills section -->
   <section class="pillsContainer" role="group" aria-label="Workflow suggestions"><button class="suggestionPill" type="button">Invoice processing pipeline</button><button class="suggestionPill" type="button">Daily AI news digest</button><button class="suggestionPill" type="button">RAG knowledge assistant</button><button class="suggestionPill" type="button">Summarize emails with AI</button><button class="suggestionPill" type="button">YouTube video chapters</button><button class="suggestionPill" type="button">Pizza delivery chatbot</button><button class="suggestionPill" type="button">Lead qualification and call scheduling</button><button class="suggestionPill" type="button">Multi-agent research workflow</button></section><!-- Divider -->
   <div class="orDivider" role="separator"><span class="orText">or</span></div><!-- Manual node creation section -->
diff --git a/packages/testing/playwright/pages/AIAssistantPage.ts b/packages/testing/playwright/pages/AIAssistantPage.ts
index 613818c4b7b..eff84f40e4d 100644
--- a/packages/testing/playwright/pages/AIAssistantPage.ts
+++ b/packages/testing/playwright/pages/AIAssistantPage.ts
@@ -18,7 +18,7 @@ export class AIAssistantPage extends BasePage {
 	}
 
 	getChatInput() {
-		return this.page.getByTestId('chat-input');
+		return this.page.getByTestId('chat-input').locator('textarea');
 	}
 
 	getSendMessageButton() {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5aa31fe1448..805813d5a27 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -148,6 +148,9 @@ catalogs:
     '@vitejs/plugin-vue':
       specifier: ^5.2.4
       version: 5.2.4
+    '@vue/test-utils':
+      specifier: ^2.4.6
+      version: 2.4.6
     '@vue/tsconfig':
       specifier: ^0.7.0
       version: 0.7.0
@@ -2235,6 +2238,9 @@ importers:
       '@vitest/coverage-v8':
         specifier: 'catalog:'
         version: 3.2.4(vitest@3.1.3(@types/debug@4.1.12)(@types/node@20.19.11)(jiti@1.21.7)(jsdom@23.0.1(bufferutil@4.0.9)(utf-8-validate@5.0.10))(sass@1.89.2)(terser@5.16.1)(tsx@4.19.3))
+      '@vue/test-utils':
+        specifier: catalog:frontend
+        version: 2.4.6
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.49)
@@ -3779,10 +3785,6 @@ packages:
     resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.25.9':
-    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -3807,11 +3809,6 @@ packages:
     resolution: {integrity: sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.26.10':
-    resolution: {integrity: sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   '@babel/parser@7.27.5':
     resolution: {integrity: sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==}
     engines: {node: '>=6.0.0'}
@@ -4267,10 +4264,6 @@ packages:
     resolution: {integrity: sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.26.10':
-    resolution: {integrity: sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.27.6':
     resolution: {integrity: sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==}
     engines: {node: '>=6.9.0'}
@@ -5160,9 +5153,6 @@ packages:
   '@jridgewell/source-map@0.3.11':
     resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
 
-  '@jridgewell/sourcemap-codec@1.5.0':
-    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
-
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
@@ -10615,14 +10605,6 @@ packages:
   fd-slicer@1.1.0:
     resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
 
-  fdir@6.4.6:
-    resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
-    peerDependencies:
-      picomatch: ^3 || ^4
-    peerDependenciesMeta:
-      picomatch:
-        optional: true
-
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -11117,9 +11099,6 @@ packages:
     engines: {node: '>=0.4.7'}
     hasBin: true
 
-  has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-
   has-bigints@1.1.0:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
@@ -11474,17 +11453,10 @@ packages:
     resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
     engines: {node: '>= 0.4'}
 
-  is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-
   is-bigint@1.1.0:
     resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
     engines: {node: '>= 0.4'}
 
-  is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
-    engines: {node: '>= 0.4'}
-
   is-boolean-object@1.2.2:
     resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
@@ -11515,10 +11487,6 @@ packages:
     resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
     engines: {node: '>= 0.4'}
 
-  is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
-
   is-date-object@1.1.0:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
@@ -11584,10 +11552,6 @@ packages:
   is-node-process@1.2.0:
     resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
 
-  is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-
   is-number-object@1.1.1:
     resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
     engines: {node: '>= 0.4'}
@@ -11676,10 +11640,6 @@ packages:
     resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
 
-  is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-
   is-symbol@1.1.1:
     resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
     engines: {node: '>= 0.4'}
@@ -16401,8 +16361,8 @@ packages:
   vue-component-type-helpers@2.2.12:
     resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
 
-  vue-component-type-helpers@3.1.0-alpha.0:
-    resolution: {integrity: sha512-K1guwS1Oy0gNfBdIdIn8JMkUV+S38sriR1zf5dP+KkPS7/r5nHnPZUL74meY2CYlxYBH4qSQ+k7bpHfwiRvaMg==}
+  vue-component-type-helpers@3.0.8:
+    resolution: {integrity: sha512-WyR30Eq15Y/+odrUUMax6FmPbZwAp/HnC7qgR1r3lVFAcqwQ4wUoV79Mbh4SxDy3NiqDa+G4TOKD5xXSgBHo5A==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -16602,9 +16562,6 @@ packages:
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
-  which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -18181,8 +18138,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-string-parser@7.25.9': {}
-
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.27.1': {}
@@ -18204,10 +18159,6 @@ snapshots:
       '@babel/template': 7.26.9
       '@babel/types': 7.27.6
 
-  '@babel/parser@7.26.10':
-    dependencies:
-      '@babel/types': 7.26.10
-
   '@babel/parser@7.27.5':
     dependencies:
       '@babel/types': 7.27.6
@@ -18760,11 +18711,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.26.10':
-    dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.27.1
-
   '@babel/types@7.27.6':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
@@ -19838,8 +19784,6 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.30
 
-  '@jridgewell/sourcemap-codec@1.5.0': {}
-
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
   '@jridgewell/trace-mapping@0.3.30':
@@ -21842,7 +21786,7 @@ snapshots:
       storybook: 9.1.7(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(utf-8-validate@5.0.10)(vite@7.0.0(@types/node@20.19.11)(jiti@1.21.7)(sass@1.89.2)(terser@5.16.1)(tsx@4.19.3))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.1.0-alpha.0
+      vue-component-type-helpers: 3.0.8
 
   '@stylistic/eslint-plugin@5.0.0(eslint@9.29.0(jiti@1.21.7))':
     dependencies:
@@ -22190,7 +22134,7 @@ snapshots:
 
   '@types/http-proxy@1.17.16':
     dependencies:
-      '@types/node': 20.19.10
+      '@types/node': 20.19.11
 
   '@types/humanize-duration@3.27.1': {}
 
@@ -23380,7 +23324,7 @@ snapshots:
   array-buffer-byte-length@1.0.1:
     dependencies:
       call-bind: 1.0.8
-      is-array-buffer: 3.0.4
+      is-array-buffer: 3.0.5
 
   array-buffer-byte-length@1.0.2:
     dependencies:
@@ -23451,8 +23395,8 @@ snapshots:
       es-abstract: 1.24.0
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
-      is-array-buffer: 3.0.4
-      is-shared-array-buffer: 1.0.3
+      is-array-buffer: 3.0.5
+      is-shared-array-buffer: 1.0.4
 
   arraybuffer.prototype.slice@1.0.4:
     dependencies:
@@ -25537,8 +25481,8 @@ snapshots:
   es-to-primitive@1.2.1:
     dependencies:
       is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
 
   es-to-primitive@1.3.0:
     dependencies:
@@ -26184,10 +26128,6 @@ snapshots:
     dependencies:
       pend: 1.2.0
 
-  fdir@6.4.6(picomatch@4.0.3):
-    optionalDependencies:
-      picomatch: 4.0.3
-
   fdir@6.5.0(picomatch@4.0.3):
     optionalDependencies:
       picomatch: 4.0.3
@@ -26276,7 +26216,7 @@ snapshots:
 
   find-test-names@1.29.7(@babel/core@7.26.10):
     dependencies:
-      '@babel/parser': 7.26.10
+      '@babel/parser': 7.27.5
       '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.10)
       acorn-walk: 8.3.4
       debug: 4.4.1(supports-color@8.1.1)
@@ -26824,8 +26764,6 @@ snapshots:
     optionalDependencies:
       uglify-js: 3.17.4
 
-  has-bigints@1.0.2: {}
-
   has-bigints@1.1.0: {}
 
   has-flag@3.0.0: {}
@@ -27262,19 +27200,10 @@ snapshots:
       has-tostringtag: 1.0.2
       safe-regex-test: 1.1.0
 
-  is-bigint@1.0.4:
-    dependencies:
-      has-bigints: 1.0.2
-
   is-bigint@1.1.0:
     dependencies:
       has-bigints: 1.1.0
 
-  is-boolean-object@1.1.2:
-    dependencies:
-      call-bind: 1.0.8
-      has-tostringtag: 1.0.2
-
   is-boolean-object@1.2.2:
     dependencies:
       call-bound: 1.0.4
@@ -27298,7 +27227,7 @@ snapshots:
 
   is-data-view@1.0.1:
     dependencies:
-      is-typed-array: 1.1.13
+      is-typed-array: 1.1.15
 
   is-data-view@1.0.2:
     dependencies:
@@ -27306,10 +27235,6 @@ snapshots:
       get-intrinsic: 1.3.0
       is-typed-array: 1.1.15
 
-  is-date-object@1.0.5:
-    dependencies:
-      has-tostringtag: 1.0.2
-
   is-date-object@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -27366,10 +27291,6 @@ snapshots:
 
   is-node-process@1.2.0: {}
 
-  is-number-object@1.0.7:
-    dependencies:
-      has-tostringtag: 1.0.2
-
   is-number-object@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -27436,10 +27357,6 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-symbol@1.0.4:
-    dependencies:
-      has-symbols: 1.1.0
-
   is-symbol@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -27448,7 +27365,7 @@ snapshots:
 
   is-typed-array@1.1.13:
     dependencies:
-      which-typed-array: 1.1.15
+      which-typed-array: 1.1.19
 
   is-typed-array@1.1.15:
     dependencies:
@@ -28694,7 +28611,7 @@ snapshots:
 
   magic-string@0.30.17:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/sourcemap-codec': 1.5.5
 
   magicast@0.3.5:
     dependencies:
@@ -30606,7 +30523,7 @@ snapshots:
       '@protobufjs/path': 1.1.2
       '@protobufjs/pool': 1.1.0
       '@protobufjs/utf8': 1.1.0
-      '@types/node': 20.19.10
+      '@types/node': 20.19.11
       long: 5.3.2
 
   proxy-addr@2.0.7:
@@ -32467,7 +32384,7 @@ snapshots:
 
   tinyglobby@0.2.14:
     dependencies:
-      fdir: 6.4.6(picomatch@4.0.3)
+      fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
   tinypool@1.1.1: {}
@@ -32835,7 +32752,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       es-errors: 1.3.0
-      is-typed-array: 1.1.13
+      is-typed-array: 1.1.15
 
   typed-array-buffer@1.0.3:
     dependencies:
@@ -32849,7 +32766,7 @@ snapshots:
       for-each: 0.3.5
       gopd: 1.2.0
       has-proto: 1.0.3
-      is-typed-array: 1.1.13
+      is-typed-array: 1.1.15
 
   typed-array-byte-length@1.0.3:
     dependencies:
@@ -32866,7 +32783,7 @@ snapshots:
       for-each: 0.3.5
       gopd: 1.2.0
       has-proto: 1.0.3
-      is-typed-array: 1.1.13
+      is-typed-array: 1.1.15
 
   typed-array-byte-offset@1.0.4:
     dependencies:
@@ -32884,7 +32801,7 @@ snapshots:
       for-each: 0.3.5
       gopd: 1.2.0
       has-proto: 1.0.3
-      is-typed-array: 1.1.13
+      is-typed-array: 1.1.15
       possible-typed-array-names: 1.0.0
 
   typed-array-length@1.0.7:
@@ -32931,9 +32848,9 @@ snapshots:
   unbox-primitive@1.0.2:
     dependencies:
       call-bind: 1.0.8
-      has-bigints: 1.0.2
+      has-bigints: 1.1.0
       has-symbols: 1.1.0
-      which-boxed-primitive: 1.0.2
+      which-boxed-primitive: 1.1.1
 
   unbox-primitive@1.1.0:
     dependencies:
@@ -33346,7 +33263,7 @@ snapshots:
 
   vue-component-type-helpers@2.2.12: {}
 
-  vue-component-type-helpers@3.1.0-alpha.0: {}
+  vue-component-type-helpers@3.0.8: {}
 
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
     dependencies:
@@ -33577,14 +33494,6 @@ snapshots:
       tr46: 1.0.1
       webidl-conversions: 4.0.2
 
-  which-boxed-primitive@1.0.2:
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.1.1
-      is-symbol: 1.0.4
-
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index be36dde1b27..b3b1ba2bf0e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -65,6 +65,7 @@ catalogs:
     '@testing-library/jest-dom': ^6.6.3
     '@testing-library/user-event': ^14.6.1
     '@testing-library/vue': ^8.1.0
+    '@vue/test-utils': ^2.4.6
     '@vue/tsconfig': ^0.7.0
     '@vueuse/core': ^10.11.0
     '@vitejs/plugin-vue': ^5.2.4