fix(editor): Fix resizing NDV output panel when closing assistant (#15313)

This commit is contained in:
Jaakko Husso
2025-05-14 15:18:50 +03:00
committed by GitHub
parent 37b37304d5
commit d7d3d33d1a
4 changed files with 13 additions and 3 deletions

View File

@@ -7,6 +7,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.slide-leave-active, .slide-leave-active,
.slide-enter-active { .slide-enter-active {
// Keep this in sync with ASK_AI_SLIDE_OUT_DURATION_MS
transition: 200ms ease; transition: 200ms ease;
} }
.slide-leave-to, .slide-leave-to,

View File

@@ -842,6 +842,7 @@ export const nonExistingJsonPath = '_!^&*';
export const ASK_AI_MAX_PROMPT_LENGTH = 600; export const ASK_AI_MAX_PROMPT_LENGTH = 600;
export const ASK_AI_MIN_PROMPT_LENGTH = 15; export const ASK_AI_MIN_PROMPT_LENGTH = 15;
export const ASK_AI_LOADING_DURATION_MS = 12000; 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'; export const APPEND_ATTRIBUTION_DEFAULT_PATH = 'parameters.options.appendAttribution';

View File

@@ -5,6 +5,7 @@ import {
STORES, STORES,
PLACEHOLDER_EMPTY_WORKFLOW_ID, PLACEHOLDER_EMPTY_WORKFLOW_ID,
CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY,
ASK_AI_SLIDE_OUT_DURATION_MS,
} from '@/constants'; } from '@/constants';
import type { ChatRequest } from '@/types/assistant.types'; import type { ChatRequest } from '@/types/assistant.types';
import type { ChatUI } from '@n8n/design-system/types/assistant'; import type { ChatUI } from '@n8n/design-system/types/assistant';
@@ -147,6 +148,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
function closeChat() { function closeChat() {
chatWindowOpen.value = false; chatWindowOpen.value = false;
// Looks smoother if we wait for slide animation to finish before updating the grid width // Looks smoother if we wait for slide animation to finish before updating the grid width
// Has to wait for longer than SlideTransition duration
setTimeout(() => { setTimeout(() => {
uiStore.appGridDimensions = { uiStore.appGridDimensions = {
...uiStore.appGridDimensions, ...uiStore.appGridDimensions,
@@ -156,7 +158,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
if (isSessionEnded.value) { if (isSessionEnded.value) {
resetAssistantChat(); resetAssistantChat();
} }
}, 200); }, ASK_AI_SLIDE_OUT_DURATION_MS + 50);
} }
function addAssistantMessages(newMessages: ChatRequest.MessageResponse[], id: string) { function addAssistantMessages(newMessages: ChatRequest.MessageResponse[], id: string) {

View File

@@ -1,6 +1,11 @@
import { chatWithBuilder } from '@/api/ai'; import { chatWithBuilder } from '@/api/ai';
import type { VIEWS } from '@/constants'; 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 { ChatRequest } from '@/types/assistant.types';
import type { ChatUI } from '@n8n/design-system/types/assistant'; import type { ChatUI } from '@n8n/design-system/types/assistant';
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
@@ -88,12 +93,13 @@ export const useBuilderStore = defineStore(STORES.BUILDER, () => {
function closeChat() { function closeChat() {
chatWindowOpen.value = false; chatWindowOpen.value = false;
// Looks smoother if we wait for slide animation to finish before updating the grid width // Looks smoother if we wait for slide animation to finish before updating the grid width
// Has to wait for longer than SlideTransition duration
setTimeout(() => { setTimeout(() => {
uiStore.appGridDimensions = { uiStore.appGridDimensions = {
...uiStore.appGridDimensions, ...uiStore.appGridDimensions,
width: window.innerWidth, width: window.innerWidth,
}; };
}, 200); }, ASK_AI_SLIDE_OUT_DURATION_MS + 50);
} }
function clearMessages() { function clearMessages() {