From 34b0fc70b65df6b98e9bf717e4ea4ef332337d00 Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <me@olegivaniv.com>
Date: Mon, 28 Oct 2024 08:30:29 +0100
Subject: [PATCH] WIP: Refactor to composables

---
 package.json                                  |   1 +
 packages/@n8n/chat/src/components/Message.vue |   4 +-
 packages/editor-ui/src/App.vue                |  33 +-
 .../src/components/CanvasChat/CanvasChat.vue  | 183 +++--
 .../CanvasChat/MessageOptionAction.vue        |  31 +
 .../CanvasChat/MessageOptionTooltip.vue       |  15 +
 .../components/CanvasChat/WorkflowLMChat.vue  | 696 ++++++++++++++++++
 .../CanvasChat/components/ChatLogsPanel.vue   |  81 ++
 .../components/ChatMessagesPanel.vue          | 166 +++++
 .../components/MessageOptionAction.vue        |  49 ++
 .../components/MessageOptionTooltip.vue       |  41 ++
 .../composables/useChatMessaging.ts           | 291 ++++++++
 .../CanvasChat/composables/useChatTrigger.ts  | 146 ++++
 .../CanvasChat/composables/useResize.ts       |  92 +++
 .../src/components/CanvasChat/types/chat.ts   |  22 +
 .../RunDataAi/AiRunContentBlock.vue           |  57 +-
 .../src/components/RunDataAi/RunDataAi.vue    |  28 +-
 .../ExecuteCommand/ExecuteCommand.node.ts     |   1 +
 18 files changed, 1845 insertions(+), 92 deletions(-)
 create mode 100644 packages/editor-ui/src/components/CanvasChat/MessageOptionAction.vue
 create mode 100644 packages/editor-ui/src/components/CanvasChat/MessageOptionTooltip.vue
 create mode 100644 packages/editor-ui/src/components/CanvasChat/WorkflowLMChat.vue
 create mode 100644 packages/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue
 create mode 100644 packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
 create mode 100644 packages/editor-ui/src/components/CanvasChat/components/MessageOptionAction.vue
 create mode 100644 packages/editor-ui/src/components/CanvasChat/components/MessageOptionTooltip.vue
 create mode 100644 packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts
 create mode 100644 packages/editor-ui/src/components/CanvasChat/composables/useChatTrigger.ts
 create mode 100644 packages/editor-ui/src/components/CanvasChat/composables/useResize.ts
 create mode 100644 packages/editor-ui/src/components/CanvasChat/types/chat.ts

diff --git a/package.json b/package.json
index 09c576a8c3..e77655456b 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "build:nodes": "turbo run build:nodes",
     "typecheck": "turbo typecheck",
     "dev": "turbo run dev --parallel --env-mode=loose --filter=!n8n-design-system --filter=!@n8n/chat --filter=!@n8n/task-runner",
+    "dev:be": "turbo run dev --parallel --env-mode=loose --filter=!n8n-design-system --filter=!@n8n/chat --filter=!@n8n/task-runner --filter=!n8n-editor-ui",
     "dev:ai": "turbo run dev --parallel --env-mode=loose --filter=@n8n/nodes-langchain --filter=n8n --filter=n8n-core",
     "clean": "turbo run clean --parallel",
     "reset": "node scripts/ensure-zx.mjs && zx scripts/reset.mjs",
diff --git a/packages/@n8n/chat/src/components/Message.vue b/packages/@n8n/chat/src/components/Message.vue
index f584516332..fa54835931 100644
--- a/packages/@n8n/chat/src/components/Message.vue
+++ b/packages/@n8n/chat/src/components/Message.vue
@@ -132,7 +132,7 @@ onMounted(async () => {
 .chat-message {
 	display: block;
 	position: relative;
-	max-width: 80%;
+	max-width: fit-content;
 	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));
@@ -159,7 +159,7 @@ onMounted(async () => {
 	}
 
 	p {
-		line-height: var(--chat--message-line-height, 1.8);
+		line-height: var(--chat--message-line-height, 1.5);
 		word-wrap: break-word;
 	}
 
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index f11c423dc2..68c29e8058 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -31,15 +31,11 @@ const loading = ref(true);
 const defaultLocale = computed(() => rootStore.defaultLocale);
 const isDemoMode = computed(() => route.name === VIEWS.DEMO);
 const showAssistantButton = computed(() => assistantStore.canShowAssistantButtonsOnCanvas);
-
+const hasContentFooter = ref(false);
 const appGrid = ref<Element | null>(null);
 
 const assistantSidebarWidth = computed(() => assistantStore.chatWidth);
 
-watch(defaultLocale, (newLocale) => {
-	void loadLanguage(newLocale);
-});
-
 onMounted(async () => {
 	logHiringBanner();
 	void useExternalHooks().run('app.mount');
@@ -52,11 +48,6 @@ onBeforeUnmount(() => {
 	window.removeEventListener('resize', updateGridWidth);
 });
 
-// As assistant sidebar width changes, recalculate the total width regularly
-watch(assistantSidebarWidth, async () => {
-	await updateGridWidth();
-});
-
 const logHiringBanner = () => {
 	if (settingsStore.isHiringBannerEnabled && !isDemoMode.value) {
 		console.log(HIRING_BANNER);
@@ -69,6 +60,21 @@ const updateGridWidth = async () => {
 		uiStore.appGridWidth = appGrid.value.clientWidth;
 	}
 };
+
+// As assistant sidebar width changes, recalculate the total width regularly
+watch(assistantSidebarWidth, async () => {
+	await updateGridWidth();
+});
+
+watch(route, (r) => {
+	hasContentFooter.value = r.matched.some(
+		(matchedRoute) => matchedRoute.components?.footer !== undefined,
+	);
+});
+
+watch(defaultLocale, (newLocale) => {
+	void loadLanguage(newLocale);
+});
 </script>
 
 <template>
@@ -98,7 +104,7 @@ const updateGridWidth = async () => {
 					</keep-alive>
 					<component :is="Component" v-else />
 				</router-view>
-				<div :class="$style.contentFooter">
+				<div :class="$style.contentFooter" v-if="hasContentFooter">
 					<router-view name="footer" />
 				</div>
 			</div>
@@ -149,6 +155,7 @@ const updateGridWidth = async () => {
 	width: 100%;
 	justify-content: center;
 	flex-direction: column;
+	align-items: center;
 
 	main {
 		width: 100%;
@@ -157,9 +164,9 @@ const updateGridWidth = async () => {
 
 	.contentFooter {
 		height: auto;
-		z-index: 1000000;
+		z-index: 10;
+		width: 100%;
 		background: white;
-		border: 1px solid red;
 	}
 }
 
diff --git a/packages/editor-ui/src/components/CanvasChat/CanvasChat.vue b/packages/editor-ui/src/components/CanvasChat/CanvasChat.vue
index 1d874c6186..5f909582e7 100644
--- a/packages/editor-ui/src/components/CanvasChat/CanvasChat.vue
+++ b/packages/editor-ui/src/components/CanvasChat/CanvasChat.vue
@@ -1,48 +1,115 @@
 <script setup lang="ts">
-import { useAssistantStore } from '@/stores/assistant.store';
-import { useDebounce } from '@/composables/useDebounce';
-import { useUsersStore } from '@/stores/users.store';
-import { computed, ref } from 'vue';
-import SlideTransition from '@/components/transitions/SlideTransition.vue';
-import AskAssistantChat from 'n8n-design-system/components/AskAssistantChat/AskAssistantChat.vue';
-import { useTelemetry } from '@/composables/useTelemetry';
+import { provide, watch, computed, ref } from 'vue';
+import { ChatOptionsSymbol, ChatSymbol } from '@n8n/chat/constants';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useRouter } from 'vue-router';
+import { chatEventBus } from '@n8n/chat/event-buses';
+import { useCanvasStore } from '@/stores/canvas.store';
+import { VIEWS } from '@/constants';
+import ChatMessagesPanel from './components/ChatMessagesPanel.vue';
+import ChatLogsPanel from './components/ChatLogsPanel.vue';
+import { useChatTrigger } from './composables/useChatTrigger';
+import { useChatMessaging } from './composables/useChatMessaging';
+import { useResize } from './composables/useResize';
+import type { Chat, ChatMessage, ChatOptions } from '@n8n/chat/types';
+import { useUIStore } from '@/stores/ui.store';
+import { useI18n } from '@/composables/useI18n';
 
-const assistantStore = useAssistantStore();
-const usersStore = useUsersStore();
-const telemetry = useTelemetry();
+const router = useRouter();
+const uiStore = useUIStore();
+const locale = useI18n();
+const { getCurrentWorkflow } = useWorkflowHelpers({ router });
 
-const height = ref(0);
+const messages = ref<ChatMessage[]>([]);
+const currentSessionId = ref<string>(String(Date.now()));
+const isDisabled = ref(false);
+const container = ref<HTMLElement>();
+const {
+	chatTrigger,
+	node,
+	allowFileUploads,
+	setChatTriggerNode,
+	setConnectedNode,
+	setLogsSourceNode,
+} = useChatTrigger({ router });
 
-const chatWidth = ref(0);
-const logsWidth = ref(0);
+const {
+	sendMessage,
+	getChatMessages,
+	// extractResponseMessage,
+	// waitForExecution,
+	// onArrowKeyDown,
+} = useChatMessaging({ chatTrigger, messages, router });
 
-const rootStyles = computed(() => {
-	return {
-		'--chat-width': chatWidth.value + 'px',
-		'--logs-width': logsWidth.value + 'px',
-		'--panel-height': height.value + 'px',
-	};
-});
-function onResize(data) {
-	console.log('🚀 ~ onResize ~ direction:', data);
-	height.value = data.height;
-	// assistantStore.updateWindowWidth(data.width);
+const { height, chatWidth, rootStyles, onResizeDebounced, onResizeChat } = useResize(container);
+
+const isLoading = computed(() => uiStore.isActionActive.workflowRunning);
+
+const chatConfig: Chat = {
+	messages,
+	sendMessage,
+	initialMessages: ref([]),
+	currentSessionId,
+	waitingForResponse: isLoading,
+};
+
+const chatOptions: ChatOptions = {
+	i18n: {
+		en: {
+			title: '',
+			footer: '',
+			subtitle: '',
+			inputPlaceholder: locale.baseText('chat.window.chat.placeholder'),
+			getStarted: '',
+			closeButtonTooltip: '',
+		},
+	},
+	webhookUrl: '',
+	mode: 'window',
+	showWindowCloseButton: true,
+	disabled: isDisabled,
+	allowFileUploads: false,
+	allowedFilesMimeTypes: '',
+};
+
+watch(
+	() => allowFileUploads.value,
+	(newValue) => {
+		chatOptions.allowFileUploads = newValue;
+	},
+);
+
+function displayExecution(executionId: string) {
+	const workflow = getCurrentWorkflow();
+	const route = router.resolve({
+		name: VIEWS.EXECUTION_PREVIEW,
+		params: { name: workflow.id, executionId },
+	});
+	window.open(route.href, '_blank');
 }
 
-function onResizeDebounced(data: { direction: string; x: number; width: number }) {
-	void useDebounce().callDebounced(onResize, { debounceTime: 10, trailing: true }, data);
-}
+provide(ChatSymbol, chatConfig);
+provide(ChatOptionsSymbol, chatOptions);
 
-function onResizeHorizontal(
-	component: 'chat' | 'logs',
-	data: { direction: string; x: number; width: number },
-) {
-	if (component === 'chat') {
-		chatWidth.value = data.width;
-	} else {
-		logsWidth.value = data.width;
-	}
-}
+const canvasStore = useCanvasStore();
+watch(
+	() => canvasStore.isLoading,
+	() => {
+		setChatTriggerNode();
+		setConnectedNode();
+		messages.value = getChatMessages();
+
+		setTimeout(() => chatEventBus.emit('focusInput'), 0);
+	},
+);
+
+// Update logs source node when messages change
+watch(
+	() => messages.value.length,
+	() => {
+		setLogsSourceNode();
+	},
+);
 </script>
 
 <template>
@@ -52,20 +119,28 @@ function onResizeHorizontal(
 		:class="$style.container"
 		:height="height"
 		data-test-id="ask-assistant-sidebar"
-		@resize="onResizeDebounced"
 		:style="rootStyles"
+		@resize="onResizeDebounced"
 	>
-		<div :class="$style.content">
+		<div ref="container" :class="$style.content">
 			<n8n-resize-wrapper
 				v-show="true"
 				:supported-directions="['right']"
 				:width="chatWidth"
 				:class="$style.chat"
-				@resize="(data) => onResizeHorizontal('chat', data)"
+				@resize="onResizeChat"
 			>
-				Chat
+				<div :class="$style.inner">
+					<ChatMessagesPanel
+						:messages="messages"
+						@display-execution="displayExecution"
+						@send-message="sendMessage"
+					/>
+				</div>
 			</n8n-resize-wrapper>
-			<div :class="$style.logs" @resize="(data) => onResizeHorizontal('logs', data)">Logs</div>
+			<div :class="$style.logs">
+				<ChatLogsPanel :node="node" :messages-length="messages.length" />
+			</div>
 		</div>
 	</n8n-resize-wrapper>
 </template>
@@ -73,22 +148,36 @@ function onResizeHorizontal(
 <style lang="scss" module>
 .container {
 	height: var(--panel-height);
-	min-height: 3rem;
+	min-height: 4rem;
 	flex-basis: content;
 	z-index: 300;
-	// transform: translateY(-18rem);
+	border-top: 1px solid var(--color-foreground-base);
 }
+
 .content {
 	display: flex;
 	width: 100%;
 	height: 100%;
+	max-width: 100%;
+	overflow: hidden;
 }
+
 .chat {
 	width: var(--chat-width);
-	min-width: 5rem;
-	border-right: 2px solid var(--color-foreground-base);
+	border-right: 1px solid var(--color-foreground-base);
+	flex-shrink: 0;
+	flex-grow: 0;
 }
+
+.inner {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	height: 100%;
+	width: 100%;
+}
+
 .logs {
-	width: var(--logs-width);
+	flex-grow: 1;
 }
 </style>
diff --git a/packages/editor-ui/src/components/CanvasChat/MessageOptionAction.vue b/packages/editor-ui/src/components/CanvasChat/MessageOptionAction.vue
new file mode 100644
index 0000000000..69bb16737d
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/MessageOptionAction.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+	click: [];
+}>();
+
+defineProps<{
+	label: string;
+	icon: string;
+	placement: 'left' | 'right' | 'top' | 'bottom';
+}>();
+</script>
+
+<template>
+	<N8nTooltip :placement="placement">
+		<button :class="$style.button" :style="{ color: '#aaa' }" @click="emit('click')">
+			<N8nIcon :icon="icon" size="small" />
+		</button>
+		<template #content>
+			{{ label }}
+		</template>
+	</N8nTooltip>
+</template>
+
+<style module>
+.button {
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+}
+</style>
diff --git a/packages/editor-ui/src/components/CanvasChat/MessageOptionTooltip.vue b/packages/editor-ui/src/components/CanvasChat/MessageOptionTooltip.vue
new file mode 100644
index 0000000000..008993fee5
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/MessageOptionTooltip.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+	placement: 'left' | 'right';
+}>();
+</script>
+
+<template>
+	<n8n-info-tip type="tooltip" theme="info-light" :tooltip-placement="placement">
+		<n8n-text :bold="true" size="small">
+			<slot />
+		</n8n-text>
+	</n8n-info-tip>
+</template>
+
+<style module lang="scss"></style>
diff --git a/packages/editor-ui/src/components/CanvasChat/WorkflowLMChat.vue b/packages/editor-ui/src/components/CanvasChat/WorkflowLMChat.vue
new file mode 100644
index 0000000000..cd889278f8
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/WorkflowLMChat.vue
@@ -0,0 +1,696 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { defineAsyncComponent, provide, ref, computed, onMounted, nextTick } from 'vue';
+import { v4 as uuid } from 'uuid';
+import Modal from '@/components/Modal.vue';
+import {
+	AI_CATEGORY_AGENTS,
+	AI_CATEGORY_CHAINS,
+	AI_CODE_NODE_TYPE,
+	AI_SUBCATEGORY,
+	CHAT_EMBED_MODAL_KEY,
+	CHAT_TRIGGER_NODE_TYPE,
+	MANUAL_CHAT_TRIGGER_NODE_TYPE,
+	MODAL_CONFIRM,
+	VIEWS,
+	WORKFLOW_LM_CHAT_MODAL_KEY,
+} from '@/constants';
+
+import { useUsersStore } from '@/stores/users.store';
+
+// eslint-disable-next-line import/no-unresolved
+import MessagesList from '@n8n/chat/components/MessagesList.vue';
+import type { ArrowKeyDownPayload } from '@n8n/chat/components/Input.vue';
+import ChatInput from '@n8n/chat/components/Input.vue';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useRouter } from 'vue-router';
+import { useRunWorkflow } from '@/composables/useRunWorkflow';
+import type { Chat, ChatMessage, ChatMessageText, ChatOptions } from '@n8n/chat/types';
+import { useI18n } from '@/composables/useI18n';
+import { ChatOptionsSymbol, ChatSymbol } from '@n8n/chat/constants';
+import MessageOptionTooltip from './MessageOptionTooltip.vue';
+import MessageOptionAction from './MessageOptionAction.vue';
+
+import type {
+	BinaryFileType,
+	IBinaryData,
+	IBinaryKeyData,
+	IDataObject,
+	INode,
+	INodeExecutionData,
+	INodeParameters,
+	INodeType,
+	ITaskData,
+	IUser,
+} from 'n8n-workflow';
+import {
+	CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE,
+	NodeConnectionType,
+	NodeHelpers,
+} from 'n8n-workflow';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useToast } from '@/composables/useToast';
+import type { INodeUi } from '@/Interface';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { createEventBus } from 'n8n-design-system';
+import { useUIStore } from '@/stores/ui.store';
+import { useMessage } from '@/composables/useMessage';
+import { usePinnedData } from '@/composables/usePinnedData';
+import { get, last } from 'lodash-es';
+import { isEmpty } from '@/utils/typesUtils';
+import { chatEventBus } from '@n8n/chat/event-buses';
+
+const LazyRunDataAi = defineAsyncComponent(
+	async () => await import('@/components/RunDataAi/RunDataAi.vue'),
+);
+
+// TODO: Add proper type
+interface LangChainMessage {
+	id: string[];
+	kwargs: {
+		content: string;
+	};
+}
+
+interface MemoryOutput {
+	action: string;
+	chatHistory?: LangChainMessage[];
+}
+
+const router = useRouter();
+const workflowHelpers = useWorkflowHelpers({ router });
+const { runWorkflow } = useRunWorkflow({ router });
+const workflowsStore = useWorkflowsStore();
+const nodeTypesStore = useNodeTypesStore();
+const uiStore = useUIStore();
+
+const { showError } = useToast();
+const messages: Ref<ChatMessage[]> = ref([]);
+const currentSessionId = ref<string>(String(Date.now()));
+const isDisabled = ref(false);
+
+const connectedNode = ref<INode | null>(null);
+const chatTrigger = ref<INode | null>(null);
+const modalBus = createEventBus();
+const node = ref<INode | null>(null);
+const previousMessageIndex = ref(0);
+
+const isLoading = computed(() => uiStore.isActionActive.workflowRunning);
+const allowFileUploads = computed(() => {
+	return (chatTrigger.value?.parameters?.options as INodeParameters)?.allowFileUploads === true;
+});
+const allowedFilesMimeTypes = computed(() => {
+	return (
+		(
+			chatTrigger.value?.parameters?.options as INodeParameters
+		)?.allowedFilesMimeTypes?.toString() ?? ''
+	);
+});
+const locale = useI18n();
+
+const chatOptions: ChatOptions = {
+	i18n: {
+		en: {
+			title: '',
+			footer: '',
+			subtitle: '',
+			inputPlaceholder: locale.baseText('chat.window.chat.placeholder'),
+			getStarted: '',
+			closeButtonTooltip: '',
+		},
+	},
+	webhookUrl: '',
+	mode: 'window',
+	showWindowCloseButton: true,
+	disabled: isDisabled,
+	allowFileUploads,
+	allowedFilesMimeTypes,
+};
+
+const chatConfig: Chat = {
+	messages,
+	sendMessage,
+	initialMessages: ref([]),
+	currentSessionId,
+	waitingForResponse: isLoading,
+};
+
+const messageVars = {
+	'--chat--message--bot--background': 'var(--color-lm-chat-bot-background)',
+	'--chat--message--user--background': 'var(--color-lm-chat-user-background)',
+	'--chat--message--bot--color': 'var(--color-text-dark)',
+	'--chat--message--user--color': 'var(--color-lm-chat-user-color)',
+	'--chat--message--bot--border': 'none',
+	'--chat--message--user--border': 'none',
+	'--chat--color-typing': 'var(--color-text-dark)',
+};
+
+function getTriggerNode() {
+	const workflow = workflowHelpers.getCurrentWorkflow();
+	const triggerNode = workflow.queryNodes((nodeType: INodeType) =>
+		[CHAT_TRIGGER_NODE_TYPE, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(nodeType.description.name),
+	);
+
+	if (!triggerNode.length) {
+		chatTrigger.value = null;
+	}
+
+	chatTrigger.value = triggerNode[0];
+}
+
+function setNode() {
+	const triggerNode = chatTrigger.value;
+	if (!triggerNode) {
+		return;
+	}
+
+	const workflow = workflowHelpers.getCurrentWorkflow();
+	const childNodes = workflow.getChildNodes(triggerNode.name);
+
+	for (const childNode of childNodes) {
+		// Look for the first connected node with metadata
+		// TODO: Allow later users to change that in the UI
+		const resultData = workflowsStore.getWorkflowResultDataByNodeName(childNode);
+
+		if (!resultData && !Array.isArray(resultData)) {
+			continue;
+		}
+
+		if (resultData[resultData.length - 1].metadata) {
+			node.value = workflowsStore.getNodeByName(childNode);
+			break;
+		}
+	}
+}
+
+function setConnectedNode() {
+	const triggerNode = chatTrigger.value;
+
+	if (!triggerNode) {
+		showError(new Error('Chat Trigger Node could not be found!'), 'Trigger Node not found');
+		return;
+	}
+	const workflow = workflowHelpers.getCurrentWorkflow();
+
+	const chatNode = workflowsStore.getNodes().find((storeNode: INodeUi): boolean => {
+		if (storeNode.type === CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE) return false;
+		const nodeType = nodeTypesStore.getNodeType(storeNode.type, storeNode.typeVersion);
+		if (!nodeType) return false;
+
+		const isAgent = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_AGENTS);
+		const isChain = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_CHAINS);
+
+		let isCustomChainOrAgent = false;
+		if (nodeType.name === AI_CODE_NODE_TYPE) {
+			const inputs = NodeHelpers.getNodeInputs(workflow, storeNode, nodeType);
+			const inputTypes = NodeHelpers.getConnectionTypes(inputs);
+
+			const outputs = NodeHelpers.getNodeOutputs(workflow, storeNode, nodeType);
+			const outputTypes = NodeHelpers.getConnectionTypes(outputs);
+
+			if (
+				inputTypes.includes(NodeConnectionType.AiLanguageModel) &&
+				inputTypes.includes(NodeConnectionType.Main) &&
+				outputTypes.includes(NodeConnectionType.Main)
+			) {
+				isCustomChainOrAgent = true;
+			}
+		}
+
+		if (!isAgent && !isChain && !isCustomChainOrAgent) return false;
+
+		const parentNodes = workflow.getParentNodes(storeNode.name);
+		const isChatChild = parentNodes.some((parentNodeName) => parentNodeName === triggerNode.name);
+
+		return Boolean(isChatChild && (isAgent || isChain || isCustomChainOrAgent));
+	});
+
+	if (!chatNode) {
+		return;
+	}
+
+	connectedNode.value = chatNode;
+}
+
+async function convertFileToBinaryData(file: File): Promise<IBinaryData> {
+	const reader = new FileReader();
+	return await new Promise((resolve, reject) => {
+		reader.onload = () => {
+			const binaryData: IBinaryData = {
+				data: (reader.result as string).split('base64,')?.[1] ?? '',
+				mimeType: file.type,
+				fileName: file.name,
+				fileSize: `${file.size} bytes`,
+				fileExtension: file.name.split('.').pop() ?? '',
+				fileType: file.type.split('/')[0] as BinaryFileType,
+			};
+			resolve(binaryData);
+		};
+		reader.onerror = () => {
+			reject(new Error('Failed to convert file to binary data'));
+		};
+		reader.readAsDataURL(file);
+	});
+}
+
+async function getKeyedFiles(files: File[]): Promise<IBinaryKeyData> {
+	const binaryData: IBinaryKeyData = {};
+
+	await Promise.all(
+		files.map(async (file, index) => {
+			const data = await convertFileToBinaryData(file);
+			const key = `data${index}`;
+
+			binaryData[key] = data;
+		}),
+	);
+
+	return binaryData;
+}
+
+function extractFileMeta(file: File): IDataObject {
+	return {
+		fileName: file.name,
+		fileSize: `${file.size} bytes`,
+		fileExtension: file.name.split('.').pop() ?? '',
+		fileType: file.type.split('/')[0],
+		mimeType: file.type,
+	};
+}
+
+async function startWorkflowWithMessage(message: string, files?: File[]): Promise<void> {
+	const triggerNode = chatTrigger.value;
+
+	if (!triggerNode) {
+		showError(new Error('Chat Trigger Node could not be found!'), 'Trigger Node not found');
+		return;
+	}
+
+	let inputKey = 'chatInput';
+	if (triggerNode.type === MANUAL_CHAT_TRIGGER_NODE_TYPE && triggerNode.typeVersion < 1.1) {
+		inputKey = 'input';
+	}
+	if (triggerNode.type === CHAT_TRIGGER_NODE_TYPE) {
+		inputKey = 'chatInput';
+	}
+
+	const usersStore = useUsersStore();
+	const currentUser = usersStore.currentUser ?? ({} as IUser);
+
+	const inputPayload: INodeExecutionData = {
+		json: {
+			sessionId: `test-${currentUser.id || 'unknown'}`,
+			action: 'sendMessage',
+			[inputKey]: message,
+		},
+	};
+
+	if (files && files.length > 0) {
+		const filesMeta = files.map((file) => extractFileMeta(file));
+		const binaryData = await getKeyedFiles(files);
+
+		inputPayload.json.files = filesMeta;
+		inputPayload.binary = binaryData;
+	}
+	const nodeData: ITaskData = {
+		startTime: new Date().getTime(),
+		executionTime: 0,
+		executionStatus: 'success',
+		data: {
+			main: [[inputPayload]],
+		},
+		source: [null],
+	};
+
+	const response = await runWorkflow({
+		triggerNode: triggerNode.name,
+		nodeData,
+		source: 'RunData.ManualChatMessage',
+	});
+
+	workflowsStore.appendChatMessage(message);
+	if (!response) {
+		showError(new Error('It was not possible to start workflow!'), 'Workflow could not be started');
+		return;
+	}
+
+	waitForExecution(response.executionId);
+}
+
+function waitForExecution(executionId?: string) {
+	const waitInterval = setInterval(() => {
+		if (!isLoading.value) {
+			clearInterval(waitInterval);
+
+			const lastNodeExecuted =
+				workflowsStore.getWorkflowExecution?.data?.resultData.lastNodeExecuted;
+
+			if (!lastNodeExecuted) return;
+
+			const nodeResponseDataArray =
+				get(workflowsStore.getWorkflowExecution?.data?.resultData.runData, lastNodeExecuted) ?? [];
+
+			const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
+
+			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(),
+			});
+
+			void nextTick(setNode);
+		}
+	}, 500);
+}
+
+function extractResponseMessage(responseData?: IDataObject) {
+	if (!responseData || isEmpty(responseData)) {
+		return locale.baseText('chat.window.chat.response.empty');
+	}
+
+	// Paths where the response message might be located
+	const paths = ['output', 'text', 'response.text'];
+	const matchedPath = paths.find((path) => get(responseData, path));
+
+	if (!matchedPath) return JSON.stringify(responseData, null, 2);
+
+	const matchedOutput = get(responseData, matchedPath);
+	if (typeof matchedOutput === 'object') {
+		return '```json\n' + JSON.stringify(matchedOutput, null, 2) + '\n```';
+	}
+
+	return matchedOutput?.toString() ?? '';
+}
+
+async function sendMessage(message: string, files?: File[]) {
+	previousMessageIndex.value = 0;
+	if (message.trim() === '' && (!files || files.length === 0)) {
+		showError(
+			new Error(locale.baseText('chat.window.chat.provideMessage')),
+			locale.baseText('chat.window.chat.emptyChatMessage'),
+		);
+		return;
+	}
+
+	const pinnedChatData = usePinnedData(chatTrigger.value);
+	if (pinnedChatData.hasData.value) {
+		const confirmResult = await useMessage().confirm(
+			locale.baseText('chat.window.chat.unpinAndExecute.description'),
+			locale.baseText('chat.window.chat.unpinAndExecute.title'),
+			{
+				confirmButtonText: locale.baseText('chat.window.chat.unpinAndExecute.confirm'),
+				cancelButtonText: locale.baseText('chat.window.chat.unpinAndExecute.cancel'),
+			},
+		);
+
+		if (!(confirmResult === MODAL_CONFIRM)) return;
+
+		pinnedChatData.unsetData('unpin-and-send-chat-message-modal');
+	}
+
+	const newMessage: ChatMessage = {
+		text: message,
+		sender: 'user',
+		createdAt: new Date().toISOString(),
+		id: uuid(),
+		files,
+	};
+	messages.value.push(newMessage);
+
+	await startWorkflowWithMessage(newMessage.text, files);
+}
+
+function displayExecution(executionId: string) {
+	const workflow = workflowHelpers.getCurrentWorkflow();
+	const route = router.resolve({
+		name: VIEWS.EXECUTION_PREVIEW,
+		params: { name: workflow.id, executionId },
+	});
+	window.open(route.href, '_blank');
+}
+function isTextMessage(message: ChatMessage): message is ChatMessageText {
+	return message.type === 'text' || !message.type;
+}
+
+function repostMessage(message: ChatMessageText) {
+	void sendMessage(message.text);
+}
+function reuseMessage(message: ChatMessageText) {
+	chatEventBus.emit('setInputValue', message.text);
+}
+
+function getChatMessages(): ChatMessageText[] {
+	if (!connectedNode.value) return [];
+
+	const workflow = workflowHelpers.getCurrentWorkflow();
+	const connectedMemoryInputs =
+		workflow.connectionsByDestinationNode[connectedNode.value.name][NodeConnectionType.AiMemory];
+	if (!connectedMemoryInputs) return [];
+
+	const memoryConnection = (connectedMemoryInputs ?? []).find((i) => i.length > 0)?.[0];
+
+	if (!memoryConnection) return [];
+
+	const nodeResultData = workflowsStore.getWorkflowResultDataByNodeName(memoryConnection.node);
+
+	const memoryOutputData = (nodeResultData ?? [])
+		.map((data) => get(data, ['data', NodeConnectionType.AiMemory, 0, 0, 'json']) as MemoryOutput)
+		.find((data) => data.action === 'saveContext');
+
+	return (memoryOutputData?.chatHistory ?? []).map((message, index) => {
+		return {
+			createdAt: new Date().toISOString(),
+			text: message.kwargs.content,
+			id: `preload__${index}`,
+			sender: last(message.id) === 'HumanMessage' ? 'user' : 'bot',
+		};
+	});
+}
+
+function onArrowKeyDown({ currentInputValue, key }: ArrowKeyDownPayload) {
+	const pastMessages = workflowsStore.getPastChatMessages;
+	const isCurrentInputEmptyOrMatch =
+		currentInputValue.length === 0 || pastMessages.includes(currentInputValue);
+
+	if (isCurrentInputEmptyOrMatch && (key === 'ArrowUp' || key === 'ArrowDown')) {
+		// Blur the input when the user presses the up or down arrow key
+		chatEventBus.emit('blurInput');
+
+		if (pastMessages.length === 1) {
+			previousMessageIndex.value = 0;
+		} else if (key === 'ArrowUp') {
+			previousMessageIndex.value = (previousMessageIndex.value + 1) % pastMessages.length;
+		} else if (key === 'ArrowDown') {
+			previousMessageIndex.value =
+				(previousMessageIndex.value - 1 + pastMessages.length) % pastMessages.length;
+		}
+
+		chatEventBus.emit(
+			'setInputValue',
+			pastMessages[pastMessages.length - 1 - previousMessageIndex.value] ?? '',
+		);
+
+		// Refocus to move the cursor to the end of the input
+		chatEventBus.emit('focusInput');
+	}
+}
+
+provide(ChatSymbol, chatConfig);
+provide(ChatOptionsSymbol, chatOptions);
+onMounted(() => {
+	getTriggerNode();
+	setConnectedNode();
+	messages.value = getChatMessages();
+	setNode();
+
+	setTimeout(() => chatEventBus.emit('focusInput'), 0);
+});
+</script>
+
+<template>
+	<Modal
+		:name="WORKFLOW_LM_CHAT_MODAL_KEY"
+		width="80%"
+		max-height="80%"
+		:title="
+			locale.baseText('chat.window.title', {
+				interpolate: {
+					nodeName: connectedNode?.name || locale.baseText('chat.window.noChatNode'),
+				},
+			})
+		"
+		:event-bus="modalBus"
+		:scrollable="false"
+		@keydown.stop
+	>
+		<template #content>
+			<div
+				:class="$style.workflowLmChat"
+				data-test-id="workflow-lm-chat-dialog"
+				:style="messageVars"
+			>
+				<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press']">
+					<template #beforeMessage="{ message }">
+						<MessageOptionTooltip
+							v-if="message.sender === 'bot' && !message.id.includes('preload')"
+							placement="right"
+						>
+							{{ locale.baseText('chat.window.chat.chatMessageOptions.executionId') }}:
+							<a href="#" @click="displayExecution(message.id)">{{ message.id }}</a>
+						</MessageOptionTooltip>
+
+						<MessageOptionAction
+							v-if="isTextMessage(message) && message.sender === 'user'"
+							data-test-id="repost-message-button"
+							icon="redo"
+							:label="locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
+							placement="left"
+							@click="repostMessage(message)"
+						/>
+
+						<MessageOptionAction
+							v-if="isTextMessage(message) && message.sender === 'user'"
+							data-test-id="reuse-message-button"
+							icon="copy"
+							:label="locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
+							placement="left"
+							@click="reuseMessage(message)"
+						/>
+					</template>
+				</MessagesList>
+				<div v-if="node" :class="$style.logsWrapper" data-test-id="lm-chat-logs">
+					<n8n-text :class="$style.logsTitle" tag="p" size="large">{{
+						locale.baseText('chat.window.logs')
+					}}</n8n-text>
+					<div :class="$style.logs">
+						<LazyRunDataAi :key="messages.length" :node="node" hide-title slim />
+					</div>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<ChatInput
+				:class="$style.messagesInput"
+				data-test-id="lm-chat-inputs"
+				@arrow-key-down="onArrowKeyDown"
+			/>
+			<n8n-info-tip class="mt-s">
+				{{ locale.baseText('chatEmbed.infoTip.description') }}
+				<a @click="uiStore.openModal(CHAT_EMBED_MODAL_KEY)">
+					{{ locale.baseText('chatEmbed.infoTip.link') }}
+				</a>
+			</n8n-info-tip>
+		</template>
+	</Modal>
+</template>
+
+<style lang="scss">
+.chat-message-markdown ul,
+.chat-message-markdown ol {
+	padding: 0 0 0 1em;
+}
+</style>
+<style module lang="scss">
+.no-node-connected {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.workflowLmChat {
+	--chat--spacing: var(--spacing-m);
+	--chat--message--padding: var(--spacing-xs);
+
+	display: flex;
+	height: 100%;
+	z-index: 9999;
+	min-height: 10rem;
+
+	@media (min-height: 34rem) {
+		min-height: 14.5rem;
+	}
+	@media (min-height: 47rem) {
+		min-height: 25rem;
+	}
+	& ::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	& ::-webkit-scrollbar-thumb {
+		border-radius: var(--border-radius-base);
+		background: var(--color-foreground-dark);
+		border: 1px solid white;
+	}
+
+	& ::-webkit-scrollbar-thumb:hover {
+		background: var(--color-foreground-xdark);
+	}
+}
+
+.logsWrapper {
+	--node-icon-color: var(--color-text-base);
+	border: 1px solid var(--color-foreground-base);
+	border-radius: var(--border-radius-base);
+	height: 100%;
+	overflow: auto;
+	width: 100%;
+	padding: var(--spacing-xs) 0;
+}
+
+.logsTitle {
+	margin: 0 var(--spacing-s) var(--spacing-s);
+}
+
+.messages {
+	background-color: var(--color-lm-chat-messages-background);
+	border: 1px solid var(--color-foreground-base);
+	border-radius: var(--border-radius-base);
+	height: 100%;
+	width: 100%;
+	overflow: auto;
+	padding-top: 1.5em;
+
+	&:not(:last-child) {
+		margin-right: 1em;
+	}
+
+	& * {
+		font-size: var(--font-size-s);
+	}
+}
+.messagesInput {
+	--chat--input--border: var(--input-border-color, var(--border-color-base))
+		var(--input-border-style, var(--border-style-base))
+		var(--input-border-width, var(--border-width-base));
+
+	--chat--input--border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
+	--chat--input--send--button--background: transparent;
+	--chat--input--send--button--color: var(--color-button-secondary-font);
+	--chat--input--send--button--color-hover: var(--color-primary);
+	--chat--input--border-active: var(--input-focus-border-color, var(--color-secondary));
+	--chat--files-spacing: var(--spacing-2xs) 0;
+	--chat--input--background: var(--color-lm-chat-bot-background);
+
+	[data-theme='dark'] & {
+		--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
+	}
+	@media (prefers-color-scheme: dark) {
+		--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
+	}
+
+	border-bottom-right-radius: var(--border-radius-base);
+	border-top-right-radius: var(--border-radius-base);
+	overflow: hidden;
+}
+</style>
diff --git a/packages/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue b/packages/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue
new file mode 100644
index 0000000000..d0fec5189b
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { INode } from 'n8n-workflow';
+import { useI18n } from '@/composables/useI18n';
+import { defineAsyncComponent } from 'vue';
+
+const LazyRunDataAi = defineAsyncComponent(
+	async () => await import('@/components/RunDataAi/RunDataAi.vue'),
+);
+
+defineProps<{
+	node: INode | null;
+	messagesLength: number;
+}>();
+</script>
+
+<template>
+	<div :class="$style.logsWrapper" data-test-id="lm-chat-logs">
+		<header :class="$style.logsHeader">
+			Latest Logs <span v-if="node">from {{ node?.name }} node</span>
+		</header>
+		<div :class="$style.logs">
+			<LazyRunDataAi
+				v-if="node"
+				:class="$style.runData"
+				:key="messagesLength"
+				:node="node"
+				hide-title
+				slim
+			/>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.logsHeader {
+	font-size: var(--font-size-m);
+	font-weight: 400;
+	line-height: 18px;
+	text-align: left;
+	border-bottom: 1px solid var(--color-foreground-base);
+	padding: var(--spacing-xs);
+	background-color: var(--color-foreground-xlight);
+
+	> span {
+		font-size: var(--font-size-s);
+		color: var(--color-text-base);
+	}
+}
+.logsWrapper {
+	--node-icon-color: var(--color-text-base);
+
+	height: 100%;
+	overflow: hidden;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.logsTitle {
+	margin: 0 var(--spacing-s) var(--spacing-s);
+}
+.logs {
+	padding: var(--spacing-s) 0;
+	flex-grow: 1;
+	overflow: auto;
+
+	& ::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	& ::-webkit-scrollbar-thumb {
+		border-radius: var(--border-radius-base);
+		background: var(--color-foreground-dark);
+		border: 1px solid white;
+	}
+
+	& ::-webkit-scrollbar-thumb:hover {
+		background: var(--color-foreground-xdark);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue b/packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
new file mode 100644
index 0000000000..c65df4c53f
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { ChatMessage, ChatMessageText } from '@n8n/chat/types';
+import { useI18n } from '@/composables/useI18n';
+import MessagesList from '@n8n/chat/components/MessagesList.vue';
+import MessageOptionTooltip from './MessageOptionTooltip.vue';
+import MessageOptionAction from './MessageOptionAction.vue';
+import { chatEventBus } from '@n8n/chat/event-buses';
+import ChatInput from '@n8n/chat/components/Input.vue';
+
+interface Props {
+	messages: ChatMessage[];
+}
+
+defineProps<Props>();
+const emit = defineEmits<{
+	displayExecution: [id: string];
+	sendMessage: [message: string];
+}>();
+
+const locale = useI18n();
+
+/** Checks if message is a text message */
+function isTextMessage(message: ChatMessage): message is ChatMessageText {
+	return message.type === 'text' || !message.type;
+}
+
+/** Reposts the message */
+function repostMessage(message: ChatMessageText) {
+	void sendMessage(message.text);
+}
+
+/** Sets the message in input for reuse */
+function reuseMessage(message: ChatMessageText) {
+	chatEventBus.emit('setInputValue', message.text);
+}
+
+function sendMessage(message: string) {
+	emit('sendMessage', message);
+}
+</script>
+
+<template>
+	<div :class="$style.chat" data-test-id="workflow-lm-chat-dialog">
+		<header :class="$style.chatHeader">Chat</header>
+		<main :class="$style.chatBody">
+			<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press']">
+				<template #beforeMessage="{ message }">
+					<MessageOptionTooltip
+						v-if="message.sender === 'bot' && !message.id.includes('preload')"
+						placement="right"
+					>
+						{{ locale.baseText('chat.window.chat.chatMessageOptions.executionId') }}:
+						<a href="#" @click="emit('displayExecution', message.id)">{{ message.id }}</a>
+					</MessageOptionTooltip>
+
+					<MessageOptionAction
+						v-if="isTextMessage(message) && message.sender === 'user'"
+						data-test-id="repost-message-button"
+						icon="redo"
+						:label="locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
+						placement="left"
+						@click="repostMessage(message)"
+					/>
+
+					<MessageOptionAction
+						v-if="isTextMessage(message) && message.sender === 'user'"
+						data-test-id="reuse-message-button"
+						icon="copy"
+						:label="locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
+						placement="left"
+						@click="reuseMessage(message)"
+					/>
+				</template>
+			</MessagesList>
+		</main>
+		<ChatInput :class="$style.messagesInput" data-test-id="lm-chat-inputs" />
+	</div>
+</template>
+
+<style lang="scss" module>
+.chat {
+	--chat--spacing: var(--spacing-xs);
+	--chat--message--padding: var(--spacing-xs);
+	--chat--message--font-size: var(--font-size-2xs);
+	--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--color-typing: var(--color-text-dark);
+
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	background-color: var(--color-background-light);
+}
+.chatHeader {
+	font-size: var(--font-size-m);
+	font-weight: 400;
+	line-height: 18px;
+	text-align: left;
+	border-bottom: 1px solid var(--color-foreground-base);
+	padding: var(--chat--spacing);
+	background-color: var(--color-foreground-xlight);
+}
+.chatBody {
+	display: flex;
+	height: 100%;
+	overflow: auto;
+
+	& ::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	& ::-webkit-scrollbar-thumb {
+		border-radius: var(--border-radius-base);
+		background: var(--color-foreground-dark);
+		border: 1px solid white;
+	}
+
+	& ::-webkit-scrollbar-thumb:hover {
+		background: var(--color-foreground-xdark);
+	}
+}
+
+.messages {
+	border-radius: var(--border-radius-base);
+	height: 100%;
+	width: 100%;
+	overflow: auto;
+	padding-top: 1.5em;
+
+	&:not(:last-child) {
+		margin-right: 1em;
+	}
+}
+
+.messagesInput {
+	--input-border-color: #4538a3;
+	--chat--input--border: var(--input-border-color, var(--border-color-base))
+		var(--input-border-style, var(--border-style-base))
+		var(--input-border-width, var(--border-width-base));
+
+	--chat--input--border-radius: 1.5rem;
+	--chat--input--send--button--background: transparent;
+	--chat--input--send--button--color: var(--color-button-secondary-font);
+	--chat--input--send--button--color-hover: var(--color-primary);
+	--chat--input--border-active: var(--input-focus-border-color, var(--color-secondary));
+	--chat--files-spacing: var(--spacing-2xs) 0;
+	--chat--input--background: var(--color-lm-chat-bot-background);
+
+	[data-theme='dark'] & {
+		--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
+	}
+	@media (prefers-color-scheme: dark) {
+		--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
+	}
+	border-radius: 5rem;
+	padding: var(--chat--spacing);
+	margin-bottom: var(--spacing-4xs);
+	overflow: hidden;
+	flex-grow: 1;
+}
+</style>
diff --git a/packages/editor-ui/src/components/CanvasChat/components/MessageOptionAction.vue b/packages/editor-ui/src/components/CanvasChat/components/MessageOptionAction.vue
new file mode 100644
index 0000000000..23346446b2
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/components/MessageOptionAction.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+defineProps({
+	/** Tooltip label */
+	label: {
+		type: String,
+		required: true,
+	},
+	/** Icon name */
+	icon: {
+		type: String,
+		required: true,
+	},
+	/** Placement of the tooltip */
+	placement: {
+		type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
+		default: 'top',
+	},
+});
+</script>
+
+<template>
+	<div :class="$style.container">
+		<n8n-tooltip :placement="placement">
+			<template #content>
+				{{ label }}
+			</template>
+			<n8n-icon :class="$style.icon" :icon="icon" size="xsmall" @click="$emit('click')" />
+		</n8n-tooltip>
+	</div>
+</template>
+
+<style lang="scss" module>
+.container {
+	display: inline-flex;
+	align-items: center;
+	margin: 0 var(--spacing-4xs);
+}
+
+.icon {
+	color: var(--color-foreground-dark);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--color-primary);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/CanvasChat/components/MessageOptionTooltip.vue b/packages/editor-ui/src/components/CanvasChat/components/MessageOptionTooltip.vue
new file mode 100644
index 0000000000..e443eb45dc
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/components/MessageOptionTooltip.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+defineProps({
+	/** Placement of the tooltip */
+	placement: {
+		type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
+		default: 'top',
+	},
+});
+</script>
+
+<template>
+	<div :class="$style.container">
+		<n8n-tooltip :placement="placement">
+			<template #content>
+				<slot />
+			</template>
+			<span :class="$style.icon">
+				<n8n-icon icon="info" size="xsmall" />
+			</span>
+		</n8n-tooltip>
+	</div>
+</template>
+
+<style lang="scss" module>
+.container {
+	display: inline-flex;
+	align-items: center;
+	margin: 0 var(--spacing-4xs);
+}
+
+.icon {
+	color: var(--color-foreground-dark);
+	cursor: help;
+
+	&:hover {
+		color: var(--color-primary);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts b/packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts
new file mode 100644
index 0000000000..7129e2d7e6
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts
@@ -0,0 +1,291 @@
+import type { 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';
+import type {
+	IUser,
+	ITaskData,
+	type INode,
+	type INodeExecutionData,
+	type IBinaryKeyData,
+	type IDataObject,
+	IBinaryData,
+	BinaryFileType,
+} from 'n8n-workflow';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useRunWorkflow } from '@/composables/useRunWorkflow';
+import { useToast } from '@/composables/useToast';
+import { useMessage } from '@/composables/useMessage';
+import { usePinnedData } from '@/composables/usePinnedData';
+import { useUsersStore } from '@/stores/users.store';
+import { get, isEmpty, last } from 'lodash-es';
+import { MANUAL_CHAT_TRIGGER_NODE_TYPE, MODAL_CONFIRM } from '@/constants';
+import { useI18n } from '@/composables/useI18n';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import type { useRouter } from 'vue-router';
+import type { MemoryOutput } from '../types/chat';
+import { useUIStore } from '@/stores/ui.store';
+
+export function useChatMessaging({
+	router,
+	chatTrigger,
+	messages,
+}: {
+	router: ReturnType<typeof useRouter>;
+	chatTrigger: Ref<INode | null>;
+	messages: Ref<ChatMessage[]>;
+}) {
+	const previousMessageIndex = ref(0);
+	const workflowsStore = useWorkflowsStore();
+	const { runWorkflow } = useRunWorkflow({ router });
+	const workflowHelpers = useWorkflowHelpers({ router });
+	const { showError } = useToast();
+	const uiStore = useUIStore();
+	const locale = useI18n();
+
+	const isLoading = computed(() => uiStore.isActionActive.workflowRunning);
+	/** Converts a file to binary data */
+	async function convertFileToBinaryData(file: File): Promise<IBinaryData> {
+		const reader = new FileReader();
+		return await new Promise((resolve, reject) => {
+			reader.onload = () => {
+				const binaryData: IBinaryData = {
+					data: (reader.result as string).split('base64,')?.[1] ?? '',
+					mimeType: file.type,
+					fileName: file.name,
+					fileSize: `${file.size} bytes`,
+					fileExtension: file.name.split('.').pop() ?? '',
+					fileType: file.type.split('/')[0] as BinaryFileType,
+				};
+				resolve(binaryData);
+			};
+			reader.onerror = () => {
+				reject(new Error('Failed to convert file to binary data'));
+			};
+			reader.readAsDataURL(file);
+		});
+	}
+
+	/** Gets keyed files for the workflow input */
+	async function getKeyedFiles(files: File[]): Promise<IBinaryKeyData> {
+		const binaryData: IBinaryKeyData = {};
+
+		await Promise.all(
+			files.map(async (file, index) => {
+				const data = await convertFileToBinaryData(file);
+				const key = `data${index}`;
+
+				binaryData[key] = data;
+			}),
+		);
+
+		return binaryData;
+	}
+
+	/** Extracts file metadata */
+	function extractFileMeta(file: File): IDataObject {
+		return {
+			fileName: file.name,
+			fileSize: `${file.size} bytes`,
+			fileExtension: file.name.split('.').pop() ?? '',
+			fileType: file.type.split('/')[0],
+			mimeType: file.type,
+		};
+	}
+
+	/** Starts workflow execution with the message */
+	async function startWorkflowWithMessage(message: string, files?: File[]): Promise<void> {
+		const triggerNode = chatTrigger.value;
+
+		if (!triggerNode) {
+			showError(new Error('Chat Trigger Node could not be found!'), 'Trigger Node not found');
+			return;
+		}
+
+		let inputKey = 'chatInput';
+		if (triggerNode.type === MANUAL_CHAT_TRIGGER_NODE_TYPE && triggerNode.typeVersion < 1.1) {
+			inputKey = 'input';
+		}
+		if (triggerNode.type === CHAT_TRIGGER_NODE_TYPE) {
+			inputKey = 'chatInput';
+		}
+
+		const usersStore = useUsersStore();
+		const currentUser = usersStore.currentUser ?? ({} as IUser);
+
+		const inputPayload: INodeExecutionData = {
+			json: {
+				sessionId: `test-${currentUser.id || 'unknown'}`,
+				action: 'sendMessage',
+				[inputKey]: message,
+			},
+		};
+
+		if (files && files.length > 0) {
+			const filesMeta = files.map((file) => extractFileMeta(file));
+			const binaryData = await getKeyedFiles(files);
+
+			inputPayload.json.files = filesMeta;
+			inputPayload.binary = binaryData;
+		}
+		const nodeData: ITaskData = {
+			startTime: new Date().getTime(),
+			executionTime: 0,
+			executionStatus: 'success',
+			data: {
+				main: [[inputPayload]],
+			},
+			source: [null],
+		};
+
+		const response = await runWorkflow({
+			triggerNode: triggerNode.name,
+			nodeData,
+			source: 'RunData.ManualChatMessage',
+		});
+
+		workflowsStore.appendChatMessage(message);
+		if (!response?.executionId) {
+			showError(
+				new Error('It was not possible to start workflow!'),
+				'Workflow could not be started',
+			);
+			return;
+		}
+
+		console.log('DEBUG: Wait for execution');
+		waitForExecution(response.executionId);
+	}
+
+	/** Waits for workflow execution to complete */
+	function waitForExecution(executionId: string) {
+		const waitInterval = setInterval(() => {
+			if (!isLoading.value) {
+				clearInterval(waitInterval);
+
+				const lastNodeExecuted =
+					workflowsStore.getWorkflowExecution?.data?.resultData.lastNodeExecuted;
+
+				if (!lastNodeExecuted) return;
+
+				const nodeResponseDataArray =
+					get(workflowsStore.getWorkflowExecution?.data?.resultData.runData, lastNodeExecuted) ??
+					[];
+
+				const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
+
+				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);
+	}
+
+	/** Extracts response message from workflow output */
+	function extractResponseMessage(responseData?: IDataObject) {
+		if (!responseData || isEmpty(responseData)) {
+			return locale.baseText('chat.window.chat.response.empty');
+		}
+
+		// Paths where the response message might be located
+		const paths = ['output', 'text', 'response.text'];
+		const matchedPath = paths.find((path) => get(responseData, path));
+
+		if (!matchedPath) return JSON.stringify(responseData, null, 2);
+
+		const matchedOutput = get(responseData, matchedPath);
+		if (typeof matchedOutput === 'object') {
+			return '```json\n' + JSON.stringify(matchedOutput, null, 2) + '\n```';
+		}
+
+		return matchedOutput?.toString() ?? '';
+	}
+
+	/** Sends a message to the chat */
+	async function sendMessage(message: string, files?: File[]) {
+		previousMessageIndex.value = 0;
+		if (message.trim() === '' && (!files || files.length === 0)) {
+			showError(
+				new Error(locale.baseText('chat.window.chat.provideMessage')),
+				locale.baseText('chat.window.chat.emptyChatMessage'),
+			);
+			return;
+		}
+
+		const pinnedChatData = usePinnedData(chatTrigger.value);
+		if (pinnedChatData.hasData.value) {
+			const confirmResult = await useMessage().confirm(
+				locale.baseText('chat.window.chat.unpinAndExecute.description'),
+				locale.baseText('chat.window.chat.unpinAndExecute.title'),
+				{
+					confirmButtonText: locale.baseText('chat.window.chat.unpinAndExecute.confirm'),
+					cancelButtonText: locale.baseText('chat.window.chat.unpinAndExecute.cancel'),
+				},
+			);
+
+			if (!(confirmResult === MODAL_CONFIRM)) return;
+
+			pinnedChatData.unsetData('unpin-and-send-chat-message-modal');
+		}
+
+		const newMessage: ChatMessage = {
+			text: message,
+			sender: 'user',
+			createdAt: new Date().toISOString(),
+			id: uuid(),
+			files,
+		};
+		messages.value.push(newMessage);
+
+		await startWorkflowWithMessage(newMessage.text, files);
+	}
+
+	function getChatMessages(): ChatMessageText[] {
+		if (!chatTrigger.value) return [];
+
+		const workflow = workflowHelpers.getCurrentWorkflow();
+		const connectedMemoryInputs =
+			workflow.connectionsByDestinationNode[chatTrigger.value.name]?.[NodeConnectionType.AiMemory];
+		if (!connectedMemoryInputs) return [];
+
+		const memoryConnection = (connectedMemoryInputs ?? []).find((i) => i.length > 0)?.[0];
+
+		if (!memoryConnection) return [];
+
+		const nodeResultData = workflowsStore.getWorkflowResultDataByNodeName(memoryConnection.node);
+
+		const memoryOutputData = (nodeResultData ?? [])
+			.map((data) => get(data, ['data', NodeConnectionType.AiMemory, 0, 0, 'json']) as MemoryOutput)
+			.find((data) => data.action === 'saveContext');
+
+		return (memoryOutputData?.chatHistory ?? []).map((message, index) => {
+			return {
+				createdAt: new Date().toISOString(),
+				text: message.kwargs.content,
+				id: `preload__${index}`,
+				sender: last(message.id) === 'HumanMessage' ? 'user' : 'bot',
+			};
+		});
+	}
+
+	return {
+		previousMessageIndex,
+		sendMessage,
+		extractResponseMessage,
+		waitForExecution,
+		getChatMessages,
+	};
+}
diff --git a/packages/editor-ui/src/components/CanvasChat/composables/useChatTrigger.ts b/packages/editor-ui/src/components/CanvasChat/composables/useChatTrigger.ts
new file mode 100644
index 0000000000..14cefbcec9
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/composables/useChatTrigger.ts
@@ -0,0 +1,146 @@
+import type { Ref } from 'vue';
+import { ref, computed } from 'vue';
+import {
+	CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE,
+	NodeConnectionType,
+	NodeHelpers,
+	type INode,
+	type INodeParameters,
+	type INodeType,
+} from 'n8n-workflow';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import {
+	AI_CATEGORY_AGENTS,
+	AI_CATEGORY_CHAINS,
+	AI_CODE_NODE_TYPE,
+	AI_SUBCATEGORY,
+	CHAT_TRIGGER_NODE_TYPE,
+	MANUAL_CHAT_TRIGGER_NODE_TYPE,
+} from '@/constants';
+import { useToast } from '@/composables/useToast';
+import type { INodeUi } from '@/Interface';
+import type { useRouter } from 'vue-router';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+
+export function useChatTrigger({ router }: { router: ReturnType<typeof useRouter> }) {
+	const chatTrigger = ref<INode | null>(null);
+	const connectedNode = ref<INode | null>(null);
+	const node = ref<INode | null>(null);
+	const workflowsStore = useWorkflowsStore();
+	const nodeTypesStore = useNodeTypesStore();
+	const workflowHelpers = useWorkflowHelpers({ router });
+	const { showError } = useToast();
+
+	const allowFileUploads = computed(() => {
+		return (chatTrigger.value?.parameters?.options as INodeParameters)?.allowFileUploads === true;
+	});
+
+	const allowedFilesMimeTypes = computed(() => {
+		return (
+			(
+				chatTrigger.value?.parameters?.options as INodeParameters
+			)?.allowedFilesMimeTypes?.toString() ?? ''
+		);
+	});
+
+	/** Gets the chat trigger node from the workflow */
+	function setChatTriggerNode() {
+		const triggerNode = workflowHelpers
+			.getCurrentWorkflow()
+			.queryNodes((nodeType: INodeType) =>
+				[CHAT_TRIGGER_NODE_TYPE, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(nodeType.description.name),
+			);
+
+		chatTrigger.value = triggerNode[0] || null;
+	}
+
+	/** Sets the connected node after finding the trigger */
+	function setConnectedNode() {
+		const workflow = workflowHelpers.getCurrentWorkflow();
+		console.log('Set connected node');
+		const triggerNode = chatTrigger.value;
+
+		if (!triggerNode) {
+			// showError(new Error('Chat Trigger Node could not be found!'), 'Trigger Node not found');
+			return;
+		}
+
+		const chatNode = workflowsStore.getNodes().find((storeNode: INodeUi): boolean => {
+			if (storeNode.type === CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE) return false;
+			const nodeType = nodeTypesStore.getNodeType(storeNode.type, storeNode.typeVersion);
+			if (!nodeType) return false;
+
+			const isAgent = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_AGENTS);
+			const isChain = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_CHAINS);
+
+			let isCustomChainOrAgent = false;
+			if (nodeType.name === AI_CODE_NODE_TYPE) {
+				const inputs = NodeHelpers.getNodeInputs(workflow, storeNode, nodeType);
+				const inputTypes = NodeHelpers.getConnectionTypes(inputs);
+
+				const outputs = NodeHelpers.getNodeOutputs(workflow, storeNode, nodeType);
+				const outputTypes = NodeHelpers.getConnectionTypes(outputs);
+
+				if (
+					inputTypes.includes(NodeConnectionType.AiLanguageModel) &&
+					inputTypes.includes(NodeConnectionType.Main) &&
+					outputTypes.includes(NodeConnectionType.Main)
+				) {
+					isCustomChainOrAgent = true;
+				}
+			}
+
+			if (!isAgent && !isChain && !isCustomChainOrAgent) return false;
+
+			const parentNodes = workflow.getParentNodes(storeNode.name);
+			const isChatChild = parentNodes.some((parentNodeName) => parentNodeName === triggerNode.name);
+
+			return Boolean(isChatChild && (isAgent || isChain || isCustomChainOrAgent));
+		});
+
+		console.log('🚀 ~ setConnectedNode ~ chatNode:', chatNode);
+		if (!chatNode) {
+			return;
+		}
+
+		connectedNode.value = chatNode;
+	}
+
+	/** Sets the node that contains metadata */
+	function setLogsSourceNode() {
+		const triggerNode = chatTrigger.value;
+		if (!triggerNode) {
+			return;
+		}
+
+		const workflow = workflowHelpers.getCurrentWorkflow();
+		const childNodes = workflow.getChildNodes(triggerNode.name);
+
+		for (const childNode of childNodes) {
+			// Look for the first connected node with metadata
+			// TODO: Allow later users to change that in the UI
+			const resultData = workflowsStore.getWorkflowResultDataByNodeName(childNode);
+
+			if (!resultData && !Array.isArray(resultData)) {
+				continue;
+			}
+
+			if (resultData[resultData.length - 1].metadata) {
+				node.value = workflowsStore.getNodeByName(childNode);
+				break;
+			}
+		}
+	}
+
+	return {
+		chatTrigger,
+		connectedNode,
+		node,
+		allowFileUploads,
+		allowedFilesMimeTypes,
+		setChatTriggerNode,
+		setConnectedNode,
+		setLogsSourceNode,
+	};
+}
diff --git a/packages/editor-ui/src/components/CanvasChat/composables/useResize.ts b/packages/editor-ui/src/components/CanvasChat/composables/useResize.ts
new file mode 100644
index 0000000000..54b491776c
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/composables/useResize.ts
@@ -0,0 +1,92 @@
+import type { Ref } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, watchEffect } from 'vue';
+import type { ResizeData } from 'n8n-design-system/components/N8nResizeWrapper/ResizeWrapper.vue';
+import { useDebounce } from '@/composables/useDebounce';
+import type { IChatResizeStyles } from '../types/chat';
+import { watch } from 'fs';
+
+export function useResize(container: Ref<HTMLElement | undefined>) {
+	console.log('🚀 ~ useResize ~ container:', container);
+	const chatWidth = ref(0);
+	const maxWidth = ref(0);
+	const minHeight = ref(0);
+	const maxHeight = ref(0);
+	const height = ref(0);
+
+	const rootStyles = computed<IChatResizeStyles>(() => ({
+		'--panel-height': `${height.value}px`,
+		'--chat-width': `${chatWidth.value}px`,
+	}));
+
+	function onResize(data: ResizeData) {
+		if (data.height < minHeight.value) {
+			data.height = minHeight.value;
+			return;
+		}
+
+		if (data.height > maxHeight.value) {
+			data.height = maxHeight.value;
+			return;
+		}
+		height.value = data.height;
+	}
+
+	function onResizeDebounced(data: ResizeData) {
+		void useDebounce().callDebounced(onResize, { debounceTime: 10, trailing: true }, data);
+	}
+
+	function onResizeChat(data: ResizeData) {
+		// Maximum width is 90% of the container width
+		if (data.width > maxWidth.value * 0.9) {
+			data.width = maxWidth.value;
+			return;
+		}
+
+		// Minimum width is 30% of the container width
+		if (data.width < maxWidth.value * 0.3) {
+			data.width = maxWidth.value * 0.2;
+			return;
+		}
+
+		chatWidth.value = data.width;
+	}
+
+	function onWindowResize() {
+		if (container.value) {
+			const { width } = container.value.getBoundingClientRect();
+			maxWidth.value = width;
+
+			if (chatWidth.value === 0) {
+				onResizeChat({ width: maxWidth.value * 0.5 });
+			}
+		}
+
+		// Min height is 30% of the window height
+		minHeight.value = window.innerHeight * 0.2;
+		maxHeight.value = window.innerHeight * 0.75;
+		if (height.value === 0) {
+			onResize({ height: minHeight.value });
+		}
+	}
+	watchEffect(() => {
+		if (container.value) {
+			onWindowResize();
+		}
+	});
+	onMounted(() => {
+		window.addEventListener('resize', onWindowResize);
+	});
+
+	onBeforeUnmount(() => {
+		window.removeEventListener('resize', onWindowResize);
+	});
+
+	return {
+		height,
+		chatWidth,
+		rootStyles,
+		onResize,
+		onResizeDebounced,
+		onResizeChat,
+	};
+}
diff --git a/packages/editor-ui/src/components/CanvasChat/types/chat.ts b/packages/editor-ui/src/components/CanvasChat/types/chat.ts
new file mode 100644
index 0000000000..6eb6e2c2ad
--- /dev/null
+++ b/packages/editor-ui/src/components/CanvasChat/types/chat.ts
@@ -0,0 +1,22 @@
+export interface LangChainMessage {
+	id: string[];
+	kwargs: {
+		content: string;
+	};
+}
+
+export interface MemoryOutput {
+	action: string;
+	chatHistory?: LangChainMessage[];
+}
+
+export interface IChatMessageResponse {
+	executionId?: string;
+	success: boolean;
+	error?: Error;
+}
+
+export interface IChatResizeStyles {
+	'--panel-height': string;
+	'--chat-width': string;
+}
diff --git a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
index 9458f75380..c117ba9d14 100644
--- a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
+++ b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { IAiDataContent } from '@/Interface';
 import { capitalize } from 'lodash-es';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, Ref } from 'vue';
 import type { ParsedAiContent } from './useAiContentParsers';
 import { useAiContentParsers } from './useAiContentParsers';
 import VueMarkdown from 'vue-markdown-render';
@@ -24,7 +24,7 @@ const contentParsers = useAiContentParsers();
 
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 const isExpanded = ref(getInitialExpandedState());
-const isShowRaw = ref(false);
+const renderType = ref<'rendered' | 'json'>('rendered');
 const contentParsed = ref(false);
 const parsedRun = ref(undefined as ParsedAiContent | undefined);
 function getInitialExpandedState() {
@@ -134,6 +134,10 @@ function onCopyToClipboard(content: IDataObject | IDataObject[]) {
 	} catch (err) {}
 }
 
+function onRenderTypeChange(value: 'rendered' | 'json') {
+	renderType.value = value;
+}
+
 onMounted(() => {
 	parsedRun.value = parseAiRunData(props.runData);
 	if (parsedRun.value) {
@@ -149,13 +153,16 @@ onMounted(() => {
 				<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-up'" size="lg" />
 			</button>
 			<p :class="$style.blockTitle">{{ capitalize(runData.inOut) }}</p>
-			<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
-			<el-switch
-				v-if="contentParsed && !error"
-				v-model="isShowRaw"
+			<n8n-radio-buttons
+				v-if="contentParsed && !error && isExpanded"
+				size="small"
+				:model-value="renderType"
 				:class="$style.rawSwitch"
-				active-text="RAW JSON"
-				@click.stop
+				:options="[
+					{ label: 'Rendered', value: 'rendered' },
+					{ label: 'JSON', value: 'json' },
+				]"
+				@update:model-value="onRenderTypeChange"
 			/>
 		</header>
 		<main
@@ -172,7 +179,7 @@ onMounted(() => {
 				:class="$style.contentText"
 				:data-content-type="parsedContent?.type"
 			>
-				<template v-if="parsedContent && !isShowRaw">
+				<template v-if="parsedContent && renderType === 'rendered'">
 					<template v-if="parsedContent.type === 'json'">
 						<VueMarkdown
 							:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
@@ -252,17 +259,18 @@ onMounted(() => {
 }
 .contentText {
 	padding-top: var(--spacing-s);
-	font-size: var(--font-size-xs);
+	padding-left: var(--spacing-m);
+	font-size: var(--font-size-m);
 	// max-height: 100%;
 }
 .block {
-	border: 1px solid var(--color-foreground-base);
-	background: var(--color-background-xlight);
-	padding: var(--spacing-xs);
-	border-radius: 4px;
-	margin-bottom: var(--spacing-2xs);
+	// border: 1px solid var(--color-foreground-base);
+	// background: var(--color-background-xlight);
+	// padding: var(--spacing-xs);
+	// border-radius: 4px;
+	margin-top: var(--spacing-xl);
 }
-.blockContent {
+:root .blockContent {
 	height: 0;
 	overflow: hidden;
 
@@ -271,15 +279,11 @@ onMounted(() => {
 	}
 }
 .runText {
-	line-height: var(--font-line-height-regular);
+	line-height: var(--font-line-height-xloose);
 	white-space: pre-line;
 }
 .rawSwitch {
-	margin-left: auto;
-
-	& * {
-		font-size: var(--font-size-2xs);
-	}
+	height: fit-content;
 }
 .blockHeader {
 	display: flex;
@@ -287,15 +291,20 @@ onMounted(() => {
 	cursor: pointer;
 	/* This hack is needed to make the whole surface of header clickable  */
 	margin: calc(-1 * var(--spacing-xs));
-	padding: var(--spacing-xs);
+	padding: var(--spacing-4xs) var(--spacing-xs);
+	align-items: center;
 
 	& * {
 		user-select: none;
 	}
 }
 .blockTitle {
-	font-size: var(--font-size-2xs);
+	font-size: var(--font-size-m);
 	color: var(--color-text-dark);
+	font-weight: var(--font-weight-bold);
+	margin: 0;
+	// Visually center the title
+	padding-bottom: var(--spacing-4xs);
 }
 .blockToggle {
 	border: none;
diff --git a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
index 48f4c2448e..59f2a8e5a2 100644
--- a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
+++ b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
@@ -238,7 +238,11 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
 								{{ node.label }}
 							</template>
 							<span :class="$style.leafLabel">
-								<NodeIcon :node-type="getNodeType(data.node)!" :size="17" />
+								<NodeIcon
+									:node-type="getNodeType(data.node)!"
+									:size="17"
+									:class="$style.nodeIcon"
+								/>
 								<span v-if="!slim" v-text="node.label" />
 							</span>
 						</n8n-tooltip>
@@ -293,7 +297,7 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
 	flex-shrink: 0;
 	min-width: 12.8rem;
 	height: 100%;
-	border-right: 1px solid var(--color-foreground-base);
+
 	padding-right: var(--spacing-xs);
 	padding-left: var(--spacing-2xs);
 	&.slim {
@@ -332,20 +336,31 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
 		margin-left: var(--spacing-xs);
 	}
 }
+.nodeIcon {
+	padding: var(--spacing-3xs) var(--spacing-3xs);
+	border-radius: var(--border-radius-base);
+	margin-right: var(--spacing-4xs);
+}
 .isSelected {
-	background-color: var(--color-foreground-base);
+	.nodeIcon {
+		background-color: var(--color-foreground-base);
+	}
 }
 .treeNode {
 	display: inline-flex;
 	border-radius: var(--border-radius-base);
 	align-items: center;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-4xs) var(--spacing-3xs);
-	font-size: var(--font-size-xs);
+	// gap: var(--spacing-3xs);
+	padding-right: var(--spacing-3xs);
+	margin: var(--spacing-4xs) 0;
+	font-size: var(--font-size-2xs);
 	color: var(--color-text-dark);
 	margin-bottom: var(--spacing-3xs);
 	cursor: pointer;
 
+	&.isSelected {
+		font-weight: var(--font-weight-bold);
+	}
 	&:hover {
 		background-color: var(--color-foreground-base);
 	}
@@ -361,6 +376,7 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
 		height: 0.125rem;
 		left: 0.75rem;
 		width: calc(var(--item-depth) * 0.625rem);
+		margin-top: var(--spacing-3xs);
 	}
 }
 </style>
diff --git a/packages/nodes-base/nodes/ExecuteCommand/ExecuteCommand.node.ts b/packages/nodes-base/nodes/ExecuteCommand/ExecuteCommand.node.ts
index 657cd8ffa8..bcd980cda2 100644
--- a/packages/nodes-base/nodes/ExecuteCommand/ExecuteCommand.node.ts
+++ b/packages/nodes-base/nodes/ExecuteCommand/ExecuteCommand.node.ts
@@ -57,6 +57,7 @@ export class ExecuteCommand implements INodeType {
 		},
 		inputs: [NodeConnectionType.Main],
 		outputs: [NodeConnectionType.Main],
+		usableAsTool: true,
 		properties: [
 			{
 				displayName: 'Execute Once',