From 1e25774541461c86da5c4af8efec792e2814eeb1 Mon Sep 17 00:00:00 2001
From: oleg <me@olegivaniv.com>
Date: Fri, 29 Nov 2024 11:24:17 +0100
Subject: [PATCH] feat(editor): Canvas chat UI & UX improvements (#11924)

---
 packages/@n8n/chat/src/components/Input.vue   |  25 ++--
 packages/@n8n/chat/src/components/Message.vue |   6 +-
 packages/@n8n/chat/src/css/markdown.scss      |  16 ++-
 .../nodes-langchain/utils/descriptions.ts     |   2 +-
 .../components/CanvasChat/CanvasChat.test.ts  | 124 ++++++++++--------
 .../src/components/CanvasChat/CanvasChat.vue  |  88 +++++++++----
 .../components/ChatMessagesPanel.vue          |  93 +++++++------
 .../composables/useChatMessaging.ts           |  63 ++++-----
 .../ExpressionEditorModalInput.vue            |   2 +-
 .../InlineExpressionEditorInput.vue           |   2 +-
 .../RunDataAi/AiRunContentBlock.vue           |   7 +-
 .../src/components/RunDataAi/RunDataAi.vue    |  18 +--
 .../elements/buttons/CanvasChatButton.vue     |   9 +-
 .../CanvasChatButton.test.ts.snap             |   6 +-
 .../src/plugins/i18n/locales/en.json          |   1 +
 packages/editor-ui/src/views/NodeView.v2.vue  |   3 +-
 packages/editor-ui/src/views/NodeView.vue     |   5 +-
 17 files changed, 258 insertions(+), 212 deletions(-)

diff --git a/packages/@n8n/chat/src/components/Input.vue b/packages/@n8n/chat/src/components/Input.vue
index 4abfc76849c1d..1b9e0b96081d6 100644
--- a/packages/@n8n/chat/src/components/Input.vue
+++ b/packages/@n8n/chat/src/components/Input.vue
@@ -38,12 +38,12 @@ const isSubmitting = ref(false);
 const resizeObserver = ref<ResizeObserver | null>(null);
 
 const isSubmitDisabled = computed(() => {
-	return input.value === '' || waitingForResponse.value || options.disabled?.value === true;
+	return input.value === '' || unref(waitingForResponse) || options.disabled?.value === true;
 });
 
 const isInputDisabled = computed(() => options.disabled?.value === true);
 const isFileUploadDisabled = computed(
-	() => isFileUploadAllowed.value && waitingForResponse.value && !options.disabled?.value,
+	() => isFileUploadAllowed.value && unref(waitingForResponse) && !options.disabled?.value,
 );
 const isFileUploadAllowed = computed(() => unref(options.allowFileUploads) === true);
 const allowedFileTypes = computed(() => unref(options.allowedFilesMimeTypes));
@@ -194,10 +194,13 @@ function adjustHeight(event: Event) {
 <template>
 	<div class="chat-input" :style="styleVars" @keydown.stop="onKeyDown">
 		<div class="chat-inputs">
+			<div v-if="$slots.leftPanel" class="chat-input-left-panel">
+				<slot name="leftPanel" />
+			</div>
 			<textarea
 				ref="chatTextArea"
-				data-test-id="chat-input"
 				v-model="input"
+				data-test-id="chat-input"
 				:disabled="isInputDisabled"
 				:placeholder="t(props.placeholder)"
 				@keydown.enter="onSubmitKeydown"
@@ -251,7 +254,7 @@ function adjustHeight(event: Event) {
 	width: 100%;
 	display: flex;
 	justify-content: center;
-	align-items: center;
+	align-items: flex-end;
 
 	textarea {
 		font-family: inherit;
@@ -259,8 +262,7 @@ function adjustHeight(event: Event) {
 		width: 100%;
 		border: var(--chat--input--border, 0);
 		border-radius: var(--chat--input--border-radius, 0);
-		padding: 0.8rem;
-		padding-right: calc(0.8rem + (var(--controls-count, 1) * var(--chat--textarea--height)));
+		padding: var(--chat--input--padding, 0.8rem);
 		min-height: var(--chat--textarea--height, 2.5rem); // Set a smaller initial height
 		max-height: var(--chat--textarea--max-height, 30rem);
 		height: var(--chat--textarea--height, 2.5rem); // Set initial height same as min-height
@@ -271,6 +273,9 @@ function adjustHeight(event: Event) {
 		outline: none;
 		line-height: var(--chat--input--line-height, 1.5);
 
+		&::placeholder {
+			font-size: var(--chat--input--placeholder--font-size, var(--chat--input--font-size, inherit));
+		}
 		&:focus,
 		&:hover {
 			border-color: var(--chat--input--border-active, 0);
@@ -279,9 +284,6 @@ function adjustHeight(event: Event) {
 }
 .chat-inputs-controls {
 	display: flex;
-	position: absolute;
-	right: 0.5rem;
-	bottom: 0;
 }
 .chat-input-send-button,
 .chat-input-file-button {
@@ -340,4 +342,9 @@ function adjustHeight(event: Event) {
 	gap: 0.5rem;
 	padding: var(--chat--files-spacing, 0.25rem);
 }
+
+.chat-input-left-panel {
+	width: var(--chat--input--left--panel--width, 2rem);
+	margin-left: 0.4rem;
+}
 </style>
diff --git a/packages/@n8n/chat/src/components/Message.vue b/packages/@n8n/chat/src/components/Message.vue
index 123bcb6040d17..4ee4514632529 100644
--- a/packages/@n8n/chat/src/components/Message.vue
+++ b/packages/@n8n/chat/src/components/Message.vue
@@ -136,7 +136,8 @@ onMounted(async () => {
 	font-size: var(--chat--message--font-size, 1rem);
 	padding: var(--chat--message--padding, var(--chat--spacing));
 	border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
-	scroll-margin: 100px;
+	scroll-margin: 3rem;
+
 	.chat-message-actions {
 		position: absolute;
 		bottom: calc(100% - 0.5rem);
@@ -151,9 +152,6 @@ onMounted(async () => {
 		left: auto;
 		right: 0;
 	}
-	&.chat-message-from-bot .chat-message-actions {
-		bottom: calc(100% - 1rem);
-	}
 
 	&:hover {
 		.chat-message-actions {
diff --git a/packages/@n8n/chat/src/css/markdown.scss b/packages/@n8n/chat/src/css/markdown.scss
index 6bcf13ba7403d..1feb199d23a60 100644
--- a/packages/@n8n/chat/src/css/markdown.scss
+++ b/packages/@n8n/chat/src/css/markdown.scss
@@ -37,8 +37,7 @@ body {
 		4. Prevent font size adjustment after orientation changes (IE, iOS)
 		5. Prevent overflow from long words (all)
 	*/
-	font-size: 110%; /* 2 */
-	line-height: 1.6; /* 3 */
+	line-height: 1.4; /* 3 */
 	-webkit-text-size-adjust: 100%; /* 4 */
 	word-break: break-word; /* 5 */
 
@@ -407,7 +406,7 @@ body {
 	h4,
 	h5,
 	h6 {
-		margin: 3.2rem 0 0.8em;
+		margin: 2rem 0 0.8em;
 	}
 
 	/*
@@ -641,4 +640,15 @@ body {
 	body > a:first-child:focus {
 		top: 1rem;
 	}
+
+	// Lists
+	ul,
+	ol {
+		padding-left: 1.5rem;
+		margin-bottom: 1rem;
+
+		li {
+			margin-bottom: 0.5rem;
+		}
+	}
 }
diff --git a/packages/@n8n/nodes-langchain/utils/descriptions.ts b/packages/@n8n/nodes-langchain/utils/descriptions.ts
index 4a22e368942c8..ef683df3e9539 100644
--- a/packages/@n8n/nodes-langchain/utils/descriptions.ts
+++ b/packages/@n8n/nodes-langchain/utils/descriptions.ts
@@ -66,7 +66,7 @@ export const inputSchemaField: INodeProperties = {
 };
 
 export const promptTypeOptions: INodeProperties = {
-	displayName: 'Prompt Source',
+	displayName: 'Prompt Source (User Message)',
 	name: 'promptType',
 	type: 'options',
 	options: [
diff --git a/packages/editor-ui/src/components/CanvasChat/CanvasChat.test.ts b/packages/editor-ui/src/components/CanvasChat/CanvasChat.test.ts
index 9dd9fb3f6669d..47869583a4cf1 100644
--- a/packages/editor-ui/src/components/CanvasChat/CanvasChat.test.ts
+++ b/packages/editor-ui/src/components/CanvasChat/CanvasChat.test.ts
@@ -4,6 +4,7 @@ import { waitFor } from '@testing-library/vue';
 import { userEvent } from '@testing-library/user-event';
 import { createRouter, createWebHistory } from 'vue-router';
 import { computed, ref } from 'vue';
+import type { INodeTypeDescription } from 'n8n-workflow';
 import { NodeConnectionType } from 'n8n-workflow';
 
 import CanvasChat from './CanvasChat.vue';
@@ -15,7 +16,6 @@ import { ChatOptionsSymbol, ChatSymbol } from '@n8n/chat/constants';
 import { chatEventBus } from '@n8n/chat/event-buses';
 
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useUIStore } from '@/stores/ui.store';
 import { useCanvasStore } from '@/stores/canvas.store';
 import * as useChatMessaging from './composables/useChatMessaging';
 import * as useChatTrigger from './composables/useChatTrigger';
@@ -23,6 +23,7 @@ import { useToast } from '@/composables/useToast';
 
 import type { IExecutionResponse, INodeUi } from '@/Interface';
 import type { ChatMessage } from '@n8n/chat/types';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
 vi.mock('@/composables/useToast', () => {
 	const showMessage = vi.fn();
@@ -61,6 +62,26 @@ const mockNodes: INodeUi[] = [
 		position: [960, 860],
 	},
 ];
+const mockNodeTypes: INodeTypeDescription[] = [
+	{
+		displayName: 'AI Agent',
+		name: '@n8n/n8n-nodes-langchain.agent',
+		properties: [],
+		defaults: {
+			name: 'AI Agent',
+		},
+		inputs: [NodeConnectionType.Main],
+		outputs: [NodeConnectionType.Main],
+		version: 0,
+		group: [],
+		description: '',
+		codex: {
+			subcategories: {
+				AI: ['Agents'],
+			},
+		},
+	},
+];
 
 const mockConnections = {
 	'When chat message received': {
@@ -110,8 +131,8 @@ describe('CanvasChat', () => {
 	});
 
 	let workflowsStore: ReturnType<typeof mockedStore<typeof useWorkflowsStore>>;
-	let uiStore: ReturnType<typeof mockedStore<typeof useUIStore>>;
 	let canvasStore: ReturnType<typeof mockedStore<typeof useCanvasStore>>;
+	let nodeTypeStore: ReturnType<typeof mockedStore<typeof useNodeTypesStore>>;
 
 	beforeEach(() => {
 		const pinia = createTestingPinia({
@@ -131,8 +152,8 @@ describe('CanvasChat', () => {
 		setActivePinia(pinia);
 
 		workflowsStore = mockedStore(useWorkflowsStore);
-		uiStore = mockedStore(useUIStore);
 		canvasStore = mockedStore(useCanvasStore);
+		nodeTypeStore = mockedStore(useNodeTypesStore);
 
 		// Setup default mocks
 		workflowsStore.getCurrentWorkflow.mockReturnValue(
@@ -141,12 +162,21 @@ describe('CanvasChat', () => {
 				connections: mockConnections,
 			}),
 		);
-		workflowsStore.getNodeByName.mockImplementation(
-			(name) => mockNodes.find((node) => node.name === name) ?? null,
-		);
+		workflowsStore.getNodeByName.mockImplementation((name) => {
+			const matchedNode = mockNodes.find((node) => node.name === name) ?? null;
+
+			return matchedNode;
+		});
 		workflowsStore.isChatPanelOpen = true;
+		workflowsStore.isLogsPanelOpen = true;
 		workflowsStore.getWorkflowExecution = mockWorkflowExecution as unknown as IExecutionResponse;
 		workflowsStore.getPastChatMessages = ['Previous message 1', 'Previous message 2'];
+
+		nodeTypeStore.getNodeType = vi.fn().mockImplementation((nodeTypeName) => {
+			return mockNodeTypes.find((node) => node.name === nodeTypeName) ?? null;
+		});
+
+		workflowsStore.runWorkflow.mockResolvedValue({ executionId: 'test-execution-issd' });
 	});
 
 	afterEach(() => {
@@ -190,6 +220,10 @@ describe('CanvasChat', () => {
 			// Verify message and response
 			expect(await findByText('Hello AI!')).toBeInTheDocument();
 			await waitFor(async () => {
+				workflowsStore.getWorkflowExecution = {
+					...(mockWorkflowExecution as unknown as IExecutionResponse),
+					status: 'success',
+				};
 				expect(await findByText('AI response message')).toBeInTheDocument();
 			});
 
@@ -231,11 +265,12 @@ describe('CanvasChat', () => {
 			await userEvent.type(input, 'Test message');
 			await userEvent.keyboard('{Enter}');
 
-			// Verify loading states
-			uiStore.isActionActive = { workflowRunning: true };
 			await waitFor(() => expect(queryByTestId('chat-message-typing')).toBeInTheDocument());
 
-			uiStore.isActionActive = { workflowRunning: false };
+			workflowsStore.getWorkflowExecution = {
+				...(mockWorkflowExecution as unknown as IExecutionResponse),
+				status: 'success',
+			};
 			await waitFor(() => expect(queryByTestId('chat-message-typing')).not.toBeInTheDocument());
 		});
 
@@ -269,7 +304,7 @@ describe('CanvasChat', () => {
 				sendMessage: vi.fn(),
 				extractResponseMessage: vi.fn(),
 				previousMessageIndex: ref(0),
-				waitForExecution: vi.fn(),
+				isLoading: computed(() => false),
 			});
 		});
 
@@ -339,7 +374,7 @@ describe('CanvasChat', () => {
 				sendMessage: vi.fn(),
 				extractResponseMessage: vi.fn(),
 				previousMessageIndex: ref(0),
-				waitForExecution: vi.fn(),
+				isLoading: computed(() => false),
 			});
 
 			workflowsStore.isChatPanelOpen = true;
@@ -437,7 +472,7 @@ describe('CanvasChat', () => {
 				sendMessage: sendMessageSpy,
 				extractResponseMessage: vi.fn(),
 				previousMessageIndex: ref(0),
-				waitForExecution: vi.fn(),
+				isLoading: computed(() => false),
 			});
 			workflowsStore.messages = mockMessages;
 		});
@@ -449,26 +484,25 @@ describe('CanvasChat', () => {
 			await userEvent.click(repostButton);
 
 			expect(sendMessageSpy).toHaveBeenCalledWith('Original message');
-			//   expect.objectContaining({
-			//     runData: expect.objectContaining({
-			//       'When chat message received': expect.arrayContaining([
-			//         expect.objectContaining({
-			//           data: expect.objectContaining({
-			//             main: expect.arrayContaining([
-			//               expect.arrayContaining([
-			//                 expect.objectContaining({
-			//                   json: expect.objectContaining({
-			//                     chatInput: 'Original message',
-			//                   }),
-			//                 }),
-			//               ]),
-			//             ]),
-			//           }),
-			//         }),
-			//       ]),
-			//     }),
-			//   }),
-			// );
+			expect.objectContaining({
+				runData: expect.objectContaining({
+					'When chat message received': expect.arrayContaining([
+						expect.objectContaining({
+							data: expect.objectContaining({
+								main: expect.arrayContaining([
+									expect.arrayContaining([
+										expect.objectContaining({
+											json: expect.objectContaining({
+												chatInput: 'Original message',
+											}),
+										}),
+									]),
+								]),
+							}),
+						}),
+					]),
+				}),
+			});
 		});
 
 		it('should show message options only for appropriate messages', async () => {
@@ -494,32 +528,6 @@ describe('CanvasChat', () => {
 		});
 	});
 
-	describe('execution handling', () => {
-		it('should update UI when execution is completed', async () => {
-			const { findByTestId, queryByTestId } = renderComponent();
-
-			// Start execution
-			const input = await findByTestId('chat-input');
-			await userEvent.type(input, 'Test message');
-			await userEvent.keyboard('{Enter}');
-
-			// Simulate execution completion
-			uiStore.isActionActive = { workflowRunning: true };
-			await waitFor(() => {
-				expect(queryByTestId('chat-message-typing')).toBeInTheDocument();
-			});
-
-			uiStore.isActionActive = { workflowRunning: false };
-			workflowsStore.setWorkflowExecutionData(
-				mockWorkflowExecution as unknown as IExecutionResponse,
-			);
-
-			await waitFor(() => {
-				expect(queryByTestId('chat-message-typing')).not.toBeInTheDocument();
-			});
-		});
-	});
-
 	describe('panel state synchronization', () => {
 		it('should update canvas height when chat or logs panel state changes', async () => {
 			renderComponent();
diff --git a/packages/editor-ui/src/components/CanvasChat/CanvasChat.vue b/packages/editor-ui/src/components/CanvasChat/CanvasChat.vue
index b6fb7edf05902..7b27cf4b3d23d 100644
--- a/packages/editor-ui/src/components/CanvasChat/CanvasChat.vue
+++ b/packages/editor-ui/src/components/CanvasChat/CanvasChat.vue
@@ -25,11 +25,9 @@ import type { Chat, ChatMessage, ChatOptions } from '@n8n/chat/types';
 import type { RunWorkflowChatPayload } from './composables/useChatMessaging';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useCanvasStore } from '@/stores/canvas.store';
-import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 
 const workflowsStore = useWorkflowsStore();
-const uiStore = useUIStore();
 const canvasStore = useCanvasStore();
 const nodeTypesStore = useNodeTypesStore();
 const nodeHelpers = useNodeHelpers();
@@ -43,10 +41,7 @@ const container = ref<HTMLElement>();
 
 // Computed properties
 const workflow = computed(() => workflowsStore.getCurrentWorkflow());
-const isLoading = computed(() => {
-	const result = uiStore.isActionActive.workflowRunning;
-	return result;
-});
+
 const allConnections = computed(() => workflowsStore.allConnections);
 const isChatOpen = computed(() => {
 	const result = workflowsStore.isChatPanelOpen;
@@ -55,34 +50,38 @@ const isChatOpen = computed(() => {
 const canvasNodes = computed(() => workflowsStore.allNodes);
 const isLogsOpen = computed(() => workflowsStore.isLogsPanelOpen);
 const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
-
+const resultData = computed(() => workflowsStore.getWorkflowRunData);
 // Expose internal state for testing
 defineExpose({
 	messages,
 	currentSessionId,
 	isDisabled,
 	workflow,
-	isLoading,
 });
 
 const { runWorkflow } = useRunWorkflow({ router });
 
 // Initialize features with injected dependencies
-const { chatTriggerNode, connectedNode, allowFileUploads, setChatTriggerNode, setConnectedNode } =
-	useChatTrigger({
-		workflow,
-		canvasNodes,
-		getNodeByName: workflowsStore.getNodeByName,
-		getNodeType: nodeTypesStore.getNodeType,
-	});
+const {
+	chatTriggerNode,
+	connectedNode,
+	allowFileUploads,
+	allowedFilesMimeTypes,
+	setChatTriggerNode,
+	setConnectedNode,
+} = useChatTrigger({
+	workflow,
+	canvasNodes,
+	getNodeByName: workflowsStore.getNodeByName,
+	getNodeType: nodeTypesStore.getNodeType,
+});
 
-const { sendMessage, getChatMessages } = useChatMessaging({
+const { sendMessage, getChatMessages, isLoading } = useChatMessaging({
 	chatTrigger: chatTriggerNode,
 	connectedNode,
 	messages,
 	sessionId: currentSessionId,
 	workflow,
-	isLoading,
 	executionResultData: computed(() => workflowsStore.getWorkflowExecution?.data?.resultData),
 	getWorkflowResultDataByNodeName: workflowsStore.getWorkflowResultDataByNodeName,
 	onRunChatWorkflow,
@@ -132,7 +131,7 @@ function createChatConfig(params: {
 		showWindowCloseButton: true,
 		disabled: params.isDisabled,
 		allowFileUploads: params.allowFileUploads,
-		allowedFilesMimeTypes: '',
+		allowedFilesMimeTypes,
 	};
 
 	return { chatConfig, chatOptions };
@@ -173,15 +172,50 @@ const closePanel = () => {
 	workflowsStore.setPanelOpen('chat', false);
 };
 
-async function onRunChatWorkflow(payload: RunWorkflowChatPayload) {
-	const response = await runWorkflow({
-		triggerNode: payload.triggerNode,
-		nodeData: payload.nodeData,
-		source: payload.source,
+// This function creates a promise that resolves when the workflow execution completes
+// It's used to handle the loading state while waiting for the workflow to finish
+async function createExecutionPromise() {
+	let resolvePromise: () => void;
+	const promise = new Promise<void>((resolve) => {
+		resolvePromise = resolve;
 	});
 
-	workflowsStore.appendChatMessage(payload.message);
-	return response;
+	// Watch for changes in the workflow execution status
+	const stopWatch = watch(
+		() => workflowsStore.getWorkflowExecution?.status,
+		(newStatus) => {
+			// If the status is no longer 'running', resolve the promise
+			if (newStatus && newStatus !== 'running') {
+				resolvePromise();
+				// Stop the watcher when the promise is resolved
+				stopWatch();
+			}
+		},
+		{ immediate: true }, // Check the status immediately when the watcher is set up
+	);
+
+	// Return the promise, which will resolve when the workflow execution is complete
+	// This allows the caller to await the execution and handle the loading state appropriately
+	return await promise;
+}
+
+async function onRunChatWorkflow(payload: RunWorkflowChatPayload) {
+	try {
+		const response = await runWorkflow({
+			triggerNode: payload.triggerNode,
+			nodeData: payload.nodeData,
+			source: payload.source,
+		});
+
+		if (response) {
+			await createExecutionPromise();
+			workflowsStore.appendChatMessage(payload.message);
+			return response;
+		}
+		return;
+	} catch (error) {
+		throw error;
+	}
 }
 
 // Initialize chat config
@@ -264,6 +298,8 @@ watchEffect(() => {
 							:messages="messages"
 							:session-id="currentSessionId"
 							:past-chat-messages="previousChatMessages"
+							:show-close-button="!connectedNode"
+							@close="closePanel"
 							@refresh-session="handleRefreshSession"
 							@display-execution="handleDisplayExecution"
 							@send-message="sendMessage"
@@ -272,7 +308,7 @@ watchEffect(() => {
 				</n8n-resize-wrapper>
 				<div v-if="isLogsOpen && connectedNode" :class="$style.logs">
 					<ChatLogsPanel
-						:key="messages.length"
+						:key="`${resultData?.length ?? messages?.length}`"
 						:workflow="workflow"
 						data-test-id="canvas-chat-logs"
 						:node="connectedNode"
diff --git a/packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue b/packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
index 9e5fb155673f8..d0c20af6a9010 100644
--- a/packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
+++ b/packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
@@ -17,6 +17,7 @@ interface Props {
 	pastChatMessages: string[];
 	messages: ChatMessage[];
 	sessionId: string;
+	showCloseButton?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -25,6 +26,7 @@ const emit = defineEmits<{
 	displayExecution: [id: string];
 	sendMessage: [message: string];
 	refreshSession: [];
+	close: [];
 }>();
 
 const messageComposable = useMessage();
@@ -142,7 +144,7 @@ function copySessionId() {
 <template>
 	<div :class="$style.chat" data-test-id="workflow-lm-chat-dialog">
 		<header :class="$style.chatHeader">
-			<span>{{ locale.baseText('chat.window.title') }}</span>
+			<span :class="$style.chatTitle">{{ locale.baseText('chat.window.title') }}</span>
 			<div :class="$style.session">
 				<span>{{ locale.baseText('chat.window.session.title') }}</span>
 				<n8n-tooltip placement="left">
@@ -154,15 +156,24 @@ function copySessionId() {
 					}}</span>
 				</n8n-tooltip>
 				<n8n-icon-button
-					:class="$style.refreshSession"
+					:class="$style.headerButton"
 					data-test-id="refresh-session-button"
-					type="tertiary"
-					text
+					outline
+					type="secondary"
 					size="mini"
 					icon="undo"
 					:title="locale.baseText('chat.window.session.reset.confirm')"
 					@click="onRefreshSession"
 				/>
+				<n8n-icon-button
+					v-if="showCloseButton"
+					:class="$style.headerButton"
+					outline
+					type="secondary"
+					size="mini"
+					icon="times"
+					@click="emit('close')"
+				/>
 			</div>
 		</header>
 		<main :class="$style.chatBody">
@@ -199,29 +210,32 @@ function copySessionId() {
 		</main>
 
 		<div :class="$style.messagesInput">
-			<div v-if="pastChatMessages.length > 0" :class="$style.messagesHistory">
-				<n8n-button
-					title="Navigate to previous message"
-					icon="chevron-up"
-					type="tertiary"
-					text
-					size="mini"
-					@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowUp' })"
-				/>
-				<n8n-button
-					title="Navigate to next message"
-					icon="chevron-down"
-					type="tertiary"
-					text
-					size="mini"
-					@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowDown' })"
-				/>
-			</div>
 			<ChatInput
 				data-test-id="lm-chat-inputs"
 				:placeholder="inputPlaceholder"
 				@arrow-key-down="onArrowKeyDown"
-			/>
+			>
+				<template v-if="pastChatMessages.length > 0" #leftPanel>
+					<div :class="$style.messagesHistory">
+						<n8n-button
+							title="Navigate to previous message"
+							icon="chevron-up"
+							type="tertiary"
+							text
+							size="mini"
+							@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowUp' })"
+						/>
+						<n8n-button
+							title="Navigate to next message"
+							icon="chevron-down"
+							type="tertiary"
+							text
+							size="mini"
+							@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowDown' })"
+						/>
+					</div>
+				</template>
+			</ChatInput>
 		</div>
 	</div>
 </template>
@@ -229,19 +243,22 @@ function copySessionId() {
 <style lang="scss" module>
 .chat {
 	--chat--spacing: var(--spacing-xs);
-	--chat--message--padding: var(--spacing-xs);
-	--chat--message--font-size: var(--font-size-s);
+	--chat--message--padding: var(--spacing-2xs);
+	--chat--message--font-size: var(--font-size-xs);
 	--chat--input--font-size: var(--font-size-s);
+	--chat--input--placeholder--font-size: var(--font-size-xs);
 	--chat--message--bot--background: transparent;
 	--chat--message--user--background: var(--color-text-lighter);
 	--chat--message--bot--color: var(--color-text-dark);
 	--chat--message--user--color: var(--color-text-dark);
 	--chat--message--bot--border: none;
 	--chat--message--user--border: none;
+	--chat--message--user--border: none;
+	--chat--input--padding: var(--spacing-xs);
 	--chat--color-typing: var(--color-text-light);
-	--chat--textarea--max-height: calc(var(--panel-height) * 0.5);
+	--chat--textarea--max-height: calc(var(--panel-height) * 0.3);
 	--chat--message--pre--background: var(--color-foreground-light);
-
+	--chat--textarea--height: 2.5rem;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
@@ -260,6 +277,9 @@ function copySessionId() {
 	justify-content: space-between;
 	align-items: center;
 }
+.chatTitle {
+	font-weight: 600;
+}
 .session {
 	display: flex;
 	align-items: center;
@@ -275,8 +295,9 @@ function copySessionId() {
 
 	cursor: pointer;
 }
-.refreshSession {
+.headerButton {
 	max-height: 1.1rem;
+	border: none;
 }
 .chatBody {
 	display: flex;
@@ -306,7 +327,7 @@ function copySessionId() {
 	--chat--input--file--button--background: transparent;
 	--chat--input--file--button--color: var(--color-primary);
 	--chat--input--border-active: var(--input-focus-border-color, var(--color-secondary));
-	--chat--files-spacing: var(--spacing-2xs) 0;
+	--chat--files-spacing: var(--spacing-2xs);
 	--chat--input--background: transparent;
 	--chat--input--file--button--color: var(--color-button-secondary-font);
 	--chat--input--file--button--color-hover: var(--color-primary);
@@ -318,7 +339,7 @@ function copySessionId() {
 		--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
 	}
 
-	padding: 0 0 0 var(--spacing-xs);
+	padding: var(--spacing-5xs);
 	margin: 0 var(--chat--spacing) var(--chat--spacing);
 	flex-grow: 1;
 	display: flex;
@@ -333,16 +354,4 @@ function copySessionId() {
 		--input-border-color: #4538a3;
 	}
 }
-
-.messagesHistory {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	margin-bottom: var(--spacing-3xs);
-
-	button:first-child {
-		margin-top: var(--spacing-4xs);
-		margin-bottom: calc(-1 * var(--spacing-4xs));
-	}
-}
 </style>
diff --git a/packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts b/packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts
index 2ceec6b54d5d7..4f09135b20aba 100644
--- a/packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts
+++ b/packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { v4 as uuid } from 'uuid';
 import type { ChatMessage, ChatMessageText } from '@n8n/chat/types';
 import { NodeConnectionType, CHAT_TRIGGER_NODE_TYPE } from 'n8n-workflow';
@@ -34,7 +34,6 @@ export interface ChatMessagingDependencies {
 	messages: Ref<ChatMessage[]>;
 	sessionId: Ref<string>;
 	workflow: ComputedRef<Workflow>;
-	isLoading: ComputedRef<boolean>;
 	executionResultData: ComputedRef<IRunExecutionData['resultData'] | undefined>;
 	getWorkflowResultDataByNodeName: (nodeName: string) => ITaskData[] | null;
 	onRunChatWorkflow: (
@@ -48,7 +47,6 @@ export function useChatMessaging({
 	messages,
 	sessionId,
 	workflow,
-	isLoading,
 	executionResultData,
 	getWorkflowResultDataByNodeName,
 	onRunChatWorkflow,
@@ -56,6 +54,7 @@ export function useChatMessaging({
 	const locale = useI18n();
 	const { showError } = useToast();
 	const previousMessageIndex = ref(0);
+	const isLoading = ref(false);
 
 	/** Converts a file to binary data */
 	async function convertFileToBinaryData(file: File): Promise<IBinaryData> {
@@ -147,57 +146,45 @@ export function useChatMessaging({
 			},
 			source: [null],
 		};
-
+		isLoading.value = true;
 		const response = await onRunChatWorkflow({
 			triggerNode: triggerNode.name,
 			nodeData,
 			source: 'RunData.ManualChatMessage',
 			message,
 		});
-
+		isLoading.value = false;
 		if (!response?.executionId) {
-			showError(
-				new Error('It was not possible to start workflow!'),
-				'Workflow could not be started',
-			);
 			return;
 		}
 
-		waitForExecution(response.executionId);
+		processExecutionResultData(response.executionId);
 	}
 
-	/** Waits for workflow execution to complete */
-	function waitForExecution(executionId: string) {
-		const waitInterval = setInterval(() => {
-			if (!isLoading.value) {
-				clearInterval(waitInterval);
-
-				const lastNodeExecuted = executionResultData.value?.lastNodeExecuted;
+	function processExecutionResultData(executionId: string) {
+		const lastNodeExecuted = executionResultData.value?.lastNodeExecuted;
 
-				if (!lastNodeExecuted) return;
+		if (!lastNodeExecuted) return;
 
-				const nodeResponseDataArray =
-					get(executionResultData.value.runData, lastNodeExecuted) ?? [];
+		const nodeResponseDataArray = get(executionResultData.value.runData, lastNodeExecuted) ?? [];
 
-				const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
+		const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
 
-				let responseMessage: string;
+		let responseMessage: string;
 
-				if (get(nodeResponseData, 'error')) {
-					responseMessage = '[ERROR: ' + get(nodeResponseData, 'error.message') + ']';
-				} else {
-					const responseData = get(nodeResponseData, 'data.main[0][0].json');
-					responseMessage = extractResponseMessage(responseData);
-				}
-
-				messages.value.push({
-					text: responseMessage,
-					sender: 'bot',
-					createdAt: new Date().toISOString(),
-					id: executionId ?? uuid(),
-				});
-			}
-		}, 500);
+		if (get(nodeResponseData, 'error')) {
+			responseMessage = '[ERROR: ' + get(nodeResponseData, 'error.message') + ']';
+		} else {
+			const responseData = get(nodeResponseData, 'data.main[0][0].json');
+			responseMessage = extractResponseMessage(responseData);
+		}
+		isLoading.value = false;
+		messages.value.push({
+			text: responseMessage,
+			sender: 'bot',
+			createdAt: new Date().toISOString(),
+			id: executionId ?? uuid(),
+		});
 	}
 
 	/** Extracts response message from workflow output */
@@ -291,9 +278,9 @@ export function useChatMessaging({
 
 	return {
 		previousMessageIndex,
+		isLoading: computed(() => isLoading.value),
 		sendMessage,
 		extractResponseMessage,
-		waitForExecution,
 		getChatMessages,
 	};
 }
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
index 70c1abc78cf01..bae21c58fe182 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -114,7 +114,7 @@ defineExpose({ editor });
 	:global(.cm-content) {
 		border-radius: var(--border-radius-base);
 		&[aria-readonly='true'] {
-			--disabled-fill: var(--color-background-medium);
+			--disabled-fill: var(--color-background-base);
 			background-color: var(--disabled-fill, var(--color-background-light));
 			color: var(--disabled-color, var(--color-text-base));
 			cursor: not-allowed;
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index 643af5980c757..593a0aa0289b2 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -134,7 +134,7 @@ defineExpose({
 	padding-left: 0;
 }
 :deep(.cm-content) {
-	--disabled-fill: var(--color-background-medium);
+	--disabled-fill: var(--color-background-base);
 	padding-left: var(--spacing-2xs);
 
 	&[aria-readonly='true'] {
diff --git a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
index b30ae7082c0da..a3d6cab8e8a68 100644
--- a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
+++ b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
@@ -260,12 +260,13 @@ onMounted(() => {
 .contentText {
 	padding-top: var(--spacing-s);
 	padding-left: var(--spacing-m);
+	padding-right: var(--spacing-m);
 	font-size: var(--font-size-s);
 }
 .block {
-	padding: 0 0 var(--spacing-2xs) var(--spacing-2xs);
-	background: var(--color-foreground-light);
-	margin-top: var(--spacing-xl);
+	padding: var(--spacing-s) 0 var(--spacing-2xs) var(--spacing-2xs);
+	border: 1px solid var(--color-foreground-light);
+	margin-top: var(--spacing-s);
 	border-radius: var(--border-radius-base);
 }
 :root .blockContent {
diff --git a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
index d1ce4c5824bf9..2f90ca0faa5c2 100644
--- a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
+++ b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
@@ -167,10 +167,6 @@ function getTreeNodeData(nodeName: string, currentDepth: number): TreeNode[] {
 const aiData = computed<AIResult[]>(() => {
 	const result: AIResult[] = [];
 	const connectedSubNodes = props.workflow.getParentNodes(props.node.name, 'ALL_NON_MAIN');
-	const rootNodeResult = workflowsStore.getWorkflowResultDataByNodeName(props.node.name);
-	const rootNodeStartTime = rootNodeResult?.[props.runIndex ?? 0]?.startTime ?? 0;
-	const rootNodeEndTime =
-		rootNodeStartTime + (rootNodeResult?.[props.runIndex ?? 0]?.executionTime ?? 0);
 
 	connectedSubNodes.forEach((nodeName) => {
 		const nodeRunData = workflowsStore.getWorkflowResultDataByNodeName(nodeName) ?? [];
@@ -193,15 +189,7 @@ const aiData = computed<AIResult[]>(() => {
 		return aTime - bTime;
 	});
 
-	// Only show data that is within the root node's execution time
-	// This is because sub-node could be connected to multiple root nodes
-	const currentNodeResult = result.filter((r) => {
-		const startTime = r.data?.metadata?.startTime ?? 0;
-
-		return startTime >= rootNodeStartTime && startTime < rootNodeEndTime;
-	});
-
-	return currentNodeResult;
+	return result;
 });
 
 const executionTree = computed<TreeNode[]>(() => {
@@ -361,9 +349,7 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
 	margin-right: var(--spacing-4xs);
 }
 .isSelected {
-	.nodeIcon {
-		background-color: var(--color-foreground-base);
-	}
+	background-color: var(--color-foreground-base);
 }
 .treeNode {
 	display: inline-flex;
diff --git a/packages/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue b/packages/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue
index 034b16752a615..92a1ff8128797 100644
--- a/packages/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue
+++ b/packages/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue
@@ -1,17 +1,16 @@
 <script lang="ts" setup>
 export interface Props {
-	outline?: boolean;
+	type: 'primary' | 'tertiary';
+	label: string;
 }
-
 defineProps<Props>();
 </script>
 <template>
 	<N8nButton
-		label="Chat"
+		:label="label"
 		size="large"
 		icon="comment"
-		type="primary"
-		:outline="outline"
+		:type="type"
 		data-test-id="workflow-chat-button"
 	/>
 </template>
diff --git a/packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasChatButton.test.ts.snap b/packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasChatButton.test.ts.snap
index d5e08f213edbb..b2fe2141e0b2d 100644
--- a/packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasChatButton.test.ts.snap
+++ b/packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasChatButton.test.ts.snap
@@ -1,3 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CanvasChatButton > should render correctly 1`] = `"<button class="button button primary large withIcon" aria-live="polite" data-test-id="workflow-chat-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-comment fa-w-16 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comment" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z"></path></svg></span></span><span>Chat</span></button>"`;
+exports[`CanvasChatButton > should render correctly 1`] = `
+"<button class="button button primary large withIcon" aria-live="polite" data-test-id="workflow-chat-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-comment fa-w-16 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comment" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z"></path></svg></span></span>
+  <!--v-if-->
+</button>"
+`;
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index fd17df3433faf..bd6ac9736f613 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -170,6 +170,7 @@
 	"binaryDataDisplay.backToOverviewPage": "Back to overview page",
 	"binaryDataDisplay.noDataFoundToDisplay": "No data found to display",
 	"binaryDataDisplay.yourBrowserDoesNotSupport": "Your browser does not support the video element. Kindly update it to latest version.",
+	"chat.hide": "Hide chat",
 	"chat.window.title": "Chat",
 	"chat.window.logs": "Latest Logs",
 	"chat.window.logsFromNode": "from {nodeName} node",
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 2377c6cad9005..cc8bbf13ed937 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -1616,7 +1616,8 @@ onBeforeUnmount(() => {
 			/>
 			<CanvasChatButton
 				v-if="containsChatTriggerNodes"
-				:outline="isChatOpen === false"
+				:type="isChatOpen ? 'tertiary' : 'primary'"
+				:label="isChatOpen ? i18n.baseText('chat.hide') : i18n.baseText('chat.window.title')"
 				@click="onOpenChat"
 			/>
 			<CanvasStopCurrentExecutionButton
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 4dfdedf322814..72347a5d4e1cc 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -4626,11 +4626,10 @@ export default defineComponent({
 
 				<n8n-button
 					v-if="containsChatNodes"
-					label="Chat"
+					:label="isChatOpen ? i18n.baseText('chat.hide') : i18n.baseText('chat.window.title')"
 					size="large"
 					icon="comment"
-					type="primary"
-					:outline="isChatOpen === false"
+					:type="isChatOpen ? 'tertiary' : 'primary'"
 					data-test-id="workflow-chat-button"
 					@click.stop="onOpenChat"
 				/>