From c17f5b61fe2126df985e577fb0a62e32ed6d25da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Mon, 20 Apr 2026 14:19:13 +0200
Subject: [PATCH] fix(editor): Prevent chat window jump when hovering prompt
 suggestions (no-changelog) (#28683)

---
 .../features/ai/instanceAi/InstanceAiView.vue |  4 +--
 .../__tests__/InstanceAiView.test.ts          |  4 +--
 .../instanceAi/components/InstanceAiInput.vue |  8 +++++
 .../ai/shared/components/ChatInputBase.vue    | 31 ++++++++++++-------
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue b/packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue
index 722275670db..c70823198ec 100644
--- a/packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue
+++ b/packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue
@@ -116,7 +116,7 @@ watch(
 	},
 );
 const showCreditBanner = computed(() => store.isLowCredits && !creditBannerDismissed.value);
-const showEmptyStateLayout = computed(() => !store.hasMessages && !store.isHydratingThread);
+const showEmptyStateLayout = computed(() => !props.threadId);
 
 // Load persisted threads from Mastra storage on mount
 onMounted(() => {
@@ -746,9 +746,9 @@ function handleStop() {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	justify-content: center;
 	gap: var(--spacing--lg);
 	padding: var(--spacing--lg);
+	padding-top: 20vh;
 }
 
 .centeredInput {
diff --git a/packages/frontend/editor-ui/src/features/ai/instanceAi/__tests__/InstanceAiView.test.ts b/packages/frontend/editor-ui/src/features/ai/instanceAi/__tests__/InstanceAiView.test.ts
index a265d88f605..005dc8d77b7 100644
--- a/packages/frontend/editor-ui/src/features/ai/instanceAi/__tests__/InstanceAiView.test.ts
+++ b/packages/frontend/editor-ui/src/features/ai/instanceAi/__tests__/InstanceAiView.test.ts
@@ -107,14 +107,14 @@ describe('InstanceAiView', () => {
 			},
 		] as typeof store.messages;
 
-		const { getByTestId } = renderView();
+		const { getByTestId } = renderView({ props: { threadId: 'thread-1' } });
 		expect(getByTestId('instance-ai-input-stub')).toHaveTextContent('unset');
 	});
 
 	it('does not pass suggestions while an existing thread is hydrating', () => {
 		store.isHydratingThread = true;
 
-		const { getByTestId } = renderView();
+		const { getByTestId } = renderView({ props: { threadId: 'thread-1' } });
 		expect(getByTestId('instance-ai-input-stub')).toHaveTextContent('unset');
 	});
 
diff --git a/packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiInput.vue b/packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiInput.vue
index a14a77446ed..2fd25a539a9 100644
--- a/packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiInput.vue
+++ b/packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiInput.vue
@@ -173,6 +173,13 @@ function handleSuggestionSubmit(payload: {
 	});
 	submitComposerMessage(i18n.baseText(payload.promptKey));
 }
+
+const resizable = computed(() => {
+	if (previewPromptKey.value) {
+		return { minRows: 2, maxRows: 2 };
+	}
+	return undefined;
+});
 </script>
 
 <template>
@@ -183,6 +190,7 @@ function handleSuggestionSubmit(payload: {
 			:placeholder="placeholder"
 			:is-streaming="props.isStreaming"
 			:can-submit="canSubmit"
+			:autosize="resizable"
 			show-voice
 			show-attach
 			@submit="handleSubmit"
diff --git a/packages/frontend/editor-ui/src/features/ai/shared/components/ChatInputBase.vue b/packages/frontend/editor-ui/src/features/ai/shared/components/ChatInputBase.vue
index e701b747e60..83bb3610079 100644
--- a/packages/frontend/editor-ui/src/features/ai/shared/components/ChatInputBase.vue
+++ b/packages/frontend/editor-ui/src/features/ai/shared/components/ChatInputBase.vue
@@ -4,16 +4,24 @@ import { N8nIconButton, N8nInput, N8nTooltip } from '@n8n/design-system';
 import { useI18n } from '@n8n/i18n';
 import { useSpeechRecognition } from '@vueuse/core';
 
-const props = defineProps<{
-	modelValue: string;
-	placeholder?: string;
-	isStreaming: boolean;
-	canSubmit: boolean;
-	disabled?: boolean;
-	showVoice?: boolean;
-	showAttach?: boolean;
-	acceptedMimeTypes?: string;
-}>();
+const props = withDefaults(
+	defineProps<{
+		modelValue: string;
+		placeholder?: string;
+		isStreaming: boolean;
+		canSubmit: boolean;
+		disabled?: boolean;
+		showVoice?: boolean;
+		showAttach?: boolean;
+		acceptedMimeTypes?: string;
+		autosize?: boolean | { minRows: number; maxRows: number };
+	}>(),
+	{
+		placeholder: undefined,
+		acceptedMimeTypes: undefined,
+		autosize: () => ({ minRows: 2, maxRows: 6 }),
+	},
+);
 
 const emit = defineEmits<{
 	'update:modelValue': [value: string];
@@ -122,14 +130,13 @@ defineExpose({
 		/>
 
 		<slot name="attachments" />
-
 		<N8nInput
 			ref="inputRef"
 			:model-value="modelValue"
 			type="textarea"
 			:placeholder="placeholder"
 			autocomplete="off"
-			:autosize="{ minRows: 1, maxRows: 6 }"
+			:autosize="autosize"
 			:disabled="disabled"
 			@update:model-value="emit('update:modelValue', $event)"
 			@keydown="handleKeydown"