Design feedback

packages/@n8n/chat/src/components/Input.vue

@@ -2,7 +2,7 @@
 import { useFileDialog } from '@vueuse/core';
 import IconFilePlus from 'virtual:icons/mdi/filePlus';
 import IconSend from 'virtual:icons/mdi/send';
-import { computed, onMounted, onUnmounted, ref, unref } from 'vue';
+import { computed, onMounted, onUnmounted, ref, unref, watch } from 'vue';
 
 import { useI18n, useChat, useOptions } from '@n8n/chat/composables';
 import { chatEventBus } from '@n8n/chat/event-buses';
@@ -26,6 +26,7 @@ const files = ref<FileList | null>(null);
 const chatTextArea = ref<HTMLTextAreaElement | null>(null);
 const input = ref('');
 const isSubmitting = ref(false);
+const resizeObserver = ref<ResizeObserver | null>(null);
 
 const isSubmitDisabled = computed(() => {
 	return input.value === '' || waitingForResponse.value || options.disabled?.value === true;
@@ -76,7 +77,16 @@ onMounted(() => {
 	chatEventBus.on('setInputValue', setInputValue);
 
 	if (chatTextArea.value) {
-		adjustHeight({ target: chatTextArea.value } as unknown as Event);
+		resizeObserver.value = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.target === chatTextArea.value) {
+					adjustHeight({ target: chatTextArea.value } as unknown as Event);
+				}
+			}
+		});
+
+		// Start observing the textarea
+		resizeObserver.value.observe(chatTextArea.value);
 	}
 });
 
@@ -84,6 +94,11 @@ onUnmounted(() => {
 	chatEventBus.off('focusInput', focusChatInput);
 	chatEventBus.off('blurInput', blurChatInput);
 	chatEventBus.off('setInputValue', setInputValue);
+
+	if (resizeObserver.value) {
+		resizeObserver.value.disconnect();
+		resizeObserver.value = null;
+	}
 });
 
 function blurChatInput() {
@@ -253,7 +268,7 @@ function adjustHeight(event: Event) {
 	display: flex;
 	position: absolute;
 	right: 0.5rem;
-	top: 0;
+	bottom: 0;
 }
 .chat-input-send-button {
 	height: var(--chat--textarea--height);

packages/editor-ui/src/components/CanvasChat/CanvasChat.vue

@@ -100,6 +100,11 @@ function toggleChat() {
 function toggleLogs() {
 	canvasStore.setPanelOpen('logs', !isLogsOpen.value);
 }
+
+function closeLogs() {
+	canvasStore.setPanelOpen('logs', false);
+}
+
 provide(ChatSymbol, chatConfig);
 provide(ChatOptionsSymbol, chatOptions);
 
@@ -170,33 +175,9 @@ watchEffect(() => {
 					</div>
 				</n8n-resize-wrapper>
 				<div v-if="isLogsOpen && connectedNode" :class="$style.logs">
-					<ChatLogsPanel :key="messages.length" :node="connectedNode" />
+					<ChatLogsPanel :key="messages.length" :node="connectedNode" @close="closeLogs" />
 				</div>
 			</div>
-
-			<div :class="$style.footer">
-				<n8n-button
-					type="secondary"
-					:active="isChatOpen"
-					outline
-					size="mini"
-					icon="comment"
-					@click="toggleChat"
-				>
-					Chat
-				</n8n-button>
-				<n8n-button
-					v-if="connectedNode"
-					type="tertiary"
-					:active="isLogsOpen"
-					outline
-					size="mini"
-					icon="tasks"
-					@click="toggleLogs"
-				>
-					Execution Logs
-				</n8n-button>
-			</div>
 		</div>
 	</n8n-resize-wrapper>
 </template>

packages/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue

@@ -4,6 +4,10 @@ import { computed } from 'vue';
 import RunDataAi from '@/components/RunDataAi/RunDataAi.vue';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 
+const emit = defineEmits<{
+	close: [];
+}>();
+
 const workflowsStore = useWorkflowsStore();
 
 const workflow = computed(() => workflowsStore.getCurrentWorkflow());
@@ -15,7 +19,17 @@ defineProps<{
 <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>
+			<div class="meta">
+				Latest Logs <span v-if="node">from {{ node?.name }} node</span>
+			</div>
+			<n8n-icon-button
+				:class="$style.close"
+				outline
+				icon="times"
+				type="secondary"
+				size="mini"
+				@click="emit('close')"
+			/>
 		</header>
 		<div :class="$style.logs">
 			<RunDataAi
@@ -34,11 +48,19 @@ defineProps<{
 .logsHeader {
 	font-size: var(--font-size-m);
 	font-weight: 400;
+	height: 2.6875rem;
 	line-height: 18px;
 	text-align: left;
 	border-bottom: 1px solid var(--color-foreground-base);
 	padding: var(--spacing-xs);
 	background-color: var(--color-foreground-xlight);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.close {
+		border: none;
+	}
 
 	> span {
 		font-size: var(--font-size-s);

packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue

@@ -168,7 +168,7 @@ function copySessionId() {
 		</main>
 
 		<div :class="$style.messagesInput">
-			<div :class="$style.messagesHistory">
+			<div :class="$style.messagesHistory" v-if="pastChatMessages.length > 0">
 				<n8n-button
 					title="Navigate to previous message"
 					icon="chevron-up"
@@ -260,13 +260,14 @@ function copySessionId() {
 }
 
 .messagesInput {
-	--input-border-color: #4538a3;
+	--input-border-color: transparent;
 	--chat--input--border: none;
 
-	--chat--input--border-radius: 1rem;
+	--chat--input--border-radius: 2rem;
 	--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--send--button--color-hover: var(--color-primary);
+	--chat--input--send--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--input--background: transparent;
@@ -284,14 +285,25 @@ function copySessionId() {
 	display: flex;
 	background: var(--color-lm-chat-bot-background);
 	border-radius: var(--chat--input--border-radius);
+	transition: border-color 200ms ease-in-out;
 	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));
+
+	&:focus-within {
+		--input-border-color: #4538a3;
+	}
 }
 
 .messagesHistory {
 	display: flex;
 	flex-direction: column;
-	margin-top: var(--spacing-3xs);
+	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>

packages/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue

@@ -1,9 +1,17 @@
+<script lang="ts" setup>
+export interface Props {
+	outline?: boolean;
+}
+
+defineProps<Props>();
+</script>
 <template>
 	<N8nButton
 		label="Chat"
 		size="large"
 		icon="comment"
 		type="primary"
+		:outline="outline"
 		data-test-id="workflow-chat-button"
 	/>
 </template>

packages/editor-ui/src/stores/canvas.store.ts

@@ -329,7 +329,9 @@ export const useCanvasStore = defineStore('canvas', () => {
 	function setPanelOpen(panel: 'chat' | 'logs', isOpen: boolean) {
 		if (panel === 'chat') {
 			isChatPanelOpen.value = isOpen;
+			isLogsPanelOpen.value = isOpen;
 		}
+
 		if (panel === 'logs') {
 			isLogsPanelOpen.value = isOpen;
 		}

packages/editor-ui/src/views/NodeView.v2.vue

@@ -248,6 +248,8 @@ const keyBindingsEnabled = computed(() => {
 	return !ndvStore.activeNode && uiStore.activeModals.length === 0;
 });
 
+const isChatOpen = computed(() => canvasStore.isChatPanelOpen);
+
 /**
  * Initialization
  */
@@ -1203,7 +1205,7 @@ const chatTriggerNodePinnedData = computed(() => {
 });
 
 async function onOpenChat() {
-	canvasStore.setPanelOpen('chat', true);
+	canvasStore.setPanelOpen('chat', !canvasStore.isChatPanelOpen);
 
 	const payload = {
 		workflow_id: workflowId.value,
@@ -1624,7 +1626,11 @@ onBeforeUnmount(() => {
 				@mouseleave="onRunWorkflowButtonMouseLeave"
 				@click="onRunWorkflow"
 			/>
-			<CanvasChatButton v-if="containsChatTriggerNodes" @click="onOpenChat" />
+			<CanvasChatButton
+				v-if="containsChatTriggerNodes"
+				:outline="isChatOpen === false"
+				@click="onOpenChat"
+			/>
 			<CanvasStopCurrentExecutionButton
 				v-if="isStopExecutionButtonVisible"
 				:stopping="isStoppingExecution"

packages/editor-ui/src/views/NodeView.vue

@@ -512,6 +512,9 @@ export default defineComponent({
 				: (this.projectsStore.currentProject ?? this.projectsStore.personalProject);
 			return getResourcePermissions(project?.scopes);
 		},
+		isChatOpen() {
+			return this.canvasStore.isChatPanelOpen;
+		},
 	},
 	watch: {
 		// Listen to route changes and load the workflow accordingly
@@ -4650,6 +4653,7 @@ export default defineComponent({
 					size="large"
 					icon="comment"
 					type="primary"
+					:outline="isChatOpen === false"
 					data-test-id="workflow-chat-button"
 					@click.stop="onOpenChat"
 				/>