From d7d3d33d1a072372a7930290eb060371e0b466e8 Mon Sep 17 00:00:00 2001
From: Jaakko Husso <jaakko@n8n.io>
Date: Wed, 14 May 2025 15:18:50 +0300
Subject: [PATCH] fix(editor): Fix resizing NDV output panel when closing
 assistant (#15313)

---
 .../src/components/transitions/SlideTransition.vue     |  1 +
 packages/frontend/editor-ui/src/constants.ts           |  1 +
 .../frontend/editor-ui/src/stores/assistant.store.ts   |  4 +++-
 .../frontend/editor-ui/src/stores/builder.store.ts     | 10 ++++++++--
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/transitions/SlideTransition.vue b/packages/frontend/editor-ui/src/components/transitions/SlideTransition.vue
index e2bb7b4749..8c305fa55b 100644
--- a/packages/frontend/editor-ui/src/components/transitions/SlideTransition.vue
+++ b/packages/frontend/editor-ui/src/components/transitions/SlideTransition.vue
@@ -7,6 +7,7 @@
 <style lang="scss" scoped>
 .slide-leave-active,
 .slide-enter-active {
+	// Keep this in sync with ASK_AI_SLIDE_OUT_DURATION_MS
 	transition: 200ms ease;
 }
 .slide-leave-to,
diff --git a/packages/frontend/editor-ui/src/constants.ts b/packages/frontend/editor-ui/src/constants.ts
index 8199908144..5a8ae6ff33 100644
--- a/packages/frontend/editor-ui/src/constants.ts
+++ b/packages/frontend/editor-ui/src/constants.ts
@@ -842,6 +842,7 @@ export const nonExistingJsonPath = '_!^&*';
 export const ASK_AI_MAX_PROMPT_LENGTH = 600;
 export const ASK_AI_MIN_PROMPT_LENGTH = 15;
 export const ASK_AI_LOADING_DURATION_MS = 12000;
+export const ASK_AI_SLIDE_OUT_DURATION_MS = 200;
 
 export const APPEND_ATTRIBUTION_DEFAULT_PATH = 'parameters.options.appendAttribution';
 
diff --git a/packages/frontend/editor-ui/src/stores/assistant.store.ts b/packages/frontend/editor-ui/src/stores/assistant.store.ts
index e236b811b6..fd0c210707 100644
--- a/packages/frontend/editor-ui/src/stores/assistant.store.ts
+++ b/packages/frontend/editor-ui/src/stores/assistant.store.ts
@@ -5,6 +5,7 @@ import {
 	STORES,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	CREDENTIAL_EDIT_MODAL_KEY,
+	ASK_AI_SLIDE_OUT_DURATION_MS,
 } from '@/constants';
 import type { ChatRequest } from '@/types/assistant.types';
 import type { ChatUI } from '@n8n/design-system/types/assistant';
@@ -147,6 +148,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
 	function closeChat() {
 		chatWindowOpen.value = false;
 		// Looks smoother if we wait for slide animation to finish before updating the grid width
+		// Has to wait for longer than SlideTransition duration
 		setTimeout(() => {
 			uiStore.appGridDimensions = {
 				...uiStore.appGridDimensions,
@@ -156,7 +158,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
 			if (isSessionEnded.value) {
 				resetAssistantChat();
 			}
-		}, 200);
+		}, ASK_AI_SLIDE_OUT_DURATION_MS + 50);
 	}
 
 	function addAssistantMessages(newMessages: ChatRequest.MessageResponse[], id: string) {
diff --git a/packages/frontend/editor-ui/src/stores/builder.store.ts b/packages/frontend/editor-ui/src/stores/builder.store.ts
index c505d50557..af579d0343 100644
--- a/packages/frontend/editor-ui/src/stores/builder.store.ts
+++ b/packages/frontend/editor-ui/src/stores/builder.store.ts
@@ -1,6 +1,11 @@
 import { chatWithBuilder } from '@/api/ai';
 import type { VIEWS } from '@/constants';
-import { EDITABLE_CANVAS_VIEWS, STORES, WORKFLOW_BUILDER_EXPERIMENT } from '@/constants';
+import {
+	ASK_AI_SLIDE_OUT_DURATION_MS,
+	EDITABLE_CANVAS_VIEWS,
+	STORES,
+	WORKFLOW_BUILDER_EXPERIMENT,
+} from '@/constants';
 import type { ChatRequest } from '@/types/assistant.types';
 import type { ChatUI } from '@n8n/design-system/types/assistant';
 import { defineStore } from 'pinia';
@@ -88,12 +93,13 @@ export const useBuilderStore = defineStore(STORES.BUILDER, () => {
 	function closeChat() {
 		chatWindowOpen.value = false;
 		// Looks smoother if we wait for slide animation to finish before updating the grid width
+		// Has to wait for longer than SlideTransition duration
 		setTimeout(() => {
 			uiStore.appGridDimensions = {
 				...uiStore.appGridDimensions,
 				width: window.innerWidth,
 			};
-		}, 200);
+		}, ASK_AI_SLIDE_OUT_DURATION_MS + 50);
 	}
 
 	function clearMessages() {