feat(editor): Implement AI Assistant chat UI (#9300)

packages/@n8n/chat/README.md

@@ -210,12 +210,31 @@ The Chat window is entirely customizable using CSS variables.
 	--chat--window--width: 400px;
 	--chat--window--height: 600px;
 
+	--chat--header-height: auto;
+	--chat--header--padding: var(--chat--spacing);
+	--chat--header--background: var(--chat--color-dark);
+	--chat--header--color: var(--chat--color-light);
+	--chat--header--border-top: none;
+	--chat--header--border-bottom: none;
+	--chat--header--border-bottom: none;
+	--chat--header--border-bottom: none;
+	--chat--heading--font-size: 2em;
+	--chat--header--color: var(--chat--color-light);
+	--chat--subtitle--font-size: inherit;
+	--chat--subtitle--line-height: 1.8;
+
 	--chat--textarea--height: 50px;
 
+	--chat--message--font-size: 1rem;
+	--chat--message--padding: var(--chat--spacing);
+	--chat--message--border-radius: var(--chat--border-radius);
+	--chat--message-line-height: 1.8;
 	--chat--message--bot--background: var(--chat--color-white);
 	--chat--message--bot--color: var(--chat--color-dark);
+	--chat--message--bot--border: none;
 	--chat--message--user--background: var(--chat--color-secondary);
 	--chat--message--user--color: var(--chat--color-white);
+	--chat--message--user--border: none;
 	--chat--message--pre--background: rgba(0, 0, 0, 0.05);
 
 	--chat--toggle--background: var(--chat--color-primary);

packages/@n8n/chat/package.json

@@ -42,7 +42,7 @@
     "highlight.js": "^11.8.0",
     "markdown-it-link-attributes": "^4.0.1",
     "uuid": "^8.3.2",
-    "vue": "^3.3.4",
+    "vue": "^3.4.21",
     "vue-markdown-render": "^2.1.1"
   },
   "devDependencies": {

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { nextTick, onMounted } from 'vue';
+// eslint-disable-next-line import/no-unresolved
+import Close from 'virtual:icons/mdi/close';
+import { computed, nextTick, onMounted } from 'vue';
 import Layout from '@n8n/chat/components/Layout.vue';
 import GetStarted from '@n8n/chat/components/GetStarted.vue';
 import GetStartedFooter from '@n8n/chat/components/GetStartedFooter.vue';
@@ -14,20 +16,32 @@ const chatStore = useChat();
 const { messages, currentSessionId } = chatStore;
 const { options } = useOptions();
 
+const showCloseButton = computed(() => options.mode === 'window' && options.showWindowCloseButton);
+
 async function getStarted() {
+	if (!chatStore.startNewSession) {
+		return;
+	}
 	void chatStore.startNewSession();
 	void nextTick(() => {
 		chatEventBus.emit('scrollToBottom');
 	});
 }
 
 async function initialize() {
+	if (!chatStore.loadPreviousSession) {
+		return;
+	}
 	await chatStore.loadPreviousSession();
 	void nextTick(() => {
 		chatEventBus.emit('scrollToBottom');
 	});
 }
 
+function closeChat() {
+	chatEventBus.emit('close');
+}
+
 onMounted(async () => {
 	await initialize();
 	if (!options.showWelcomeScreen && !currentSessionId.value) {
@@ -39,8 +53,20 @@ onMounted(async () => {
 <template>
 	<Layout class="chat-wrapper">
 		<template #header>
-			<h1>{{ t('title') }}</h1>
-			<p>{{ t('subtitle') }}</p>
+			<div class="chat-heading">
+				<h1>
+					{{ t('title') }}
+				</h1>
+				<button
+					v-if="showCloseButton"
+					class="chat-close-button"
+					:title="t('closeButtonTooltip')"
+					@click="closeChat"
+				>
+					<Close height="18" width="18" />
+				</button>
+			</div>
+			<p v-if="t('subtitle')">{{ t('subtitle') }}</p>
 		</template>
 		<GetStarted v-if="!currentSessionId && options.showWelcomeScreen" @click:button="getStarted" />
 		<MessagesList v-else :messages="messages" />
@@ -50,3 +76,22 @@ onMounted(async () => {
 		</template>
 	</Layout>
 </template>
+
+<style lang="scss">
+.chat-heading {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.chat-close-button {
+	display: flex;
+	border: none;
+	background: none;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--chat--close--button--color-hover, var(--chat--color-primary));
+	}
+}
+</style>

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

@@ -1,17 +1,30 @@
 <script setup lang="ts">
 // eslint-disable-next-line import/no-unresolved
 import IconSend from 'virtual:icons/mdi/send';
-import { computed, ref } from 'vue';
-import { useI18n, useChat } from '@n8n/chat/composables';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n, useChat, useOptions } from '@n8n/chat/composables';
+import { chatEventBus } from '@n8n/chat/event-buses';
 
+const { options } = useOptions();
 const chatStore = useChat();
 const { waitingForResponse } = chatStore;
 const { t } = useI18n();
 
+const chatTextArea = ref<HTMLTextAreaElement | null>(null);
 const input = ref('');
 
 const isSubmitDisabled = computed(() => {
-	return input.value === '' || waitingForResponse.value;
+	return input.value === '' || waitingForResponse.value || options.disabled?.value === true;
+});
+
+const isInputDisabled = computed(() => options.disabled?.value === true);
+
+onMounted(() => {
+	chatEventBus.on('focusInput', () => {
+		if (chatTextArea.value) {
+			chatTextArea.value.focus();
+		}
+	});
 });
 
 async function onSubmit(event: MouseEvent | KeyboardEvent) {
@@ -38,8 +51,10 @@ async function onSubmitKeydown(event: KeyboardEvent) {
 <template>
 	<div class="chat-input">
 		<textarea
+			ref="chatTextArea"
 			v-model="input"
 			rows="1"
+			:disabled="isInputDisabled"
 			:placeholder="t('inputPlaceholder')"
 			@keydown.enter="onSubmitKeydown"
 		/>
@@ -55,10 +70,11 @@ async function onSubmitKeydown(event: KeyboardEvent) {
 	justify-content: center;
 	align-items: center;
 	width: 100%;
+	background: white;
 
 	textarea {
 		font-family: inherit;
-		font-size: inherit;
+		font-size: var(--chat--input--font-size, inherit);
 		width: 100%;
 		border: 0;
 		padding: var(--chat--spacing);
@@ -71,7 +87,7 @@ async function onSubmitKeydown(event: KeyboardEvent) {
 		width: var(--chat--textarea--height);
 		background: white;
 		cursor: pointer;
-		color: var(--chat--color-secondary);
+		color: var(--chat--input--send--button--color, var(--chat--color-secondary));
 		border: 0;
 		font-size: 24px;
 		display: inline-flex;

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

@@ -58,9 +58,26 @@ onBeforeUnmount(() => {
 	);
 
 	.chat-header {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 1em;
+		height: var(--chat--header-height, auto);
 		padding: var(--chat--header--padding, var(--chat--spacing));
 		background: var(--chat--header--background, var(--chat--color-dark));
 		color: var(--chat--header--color, var(--chat--color-light));
+		border-top: var(--chat--header--border-top, none);
+		border-bottom: var(--chat--header--border-bottom, none);
+		border-left: var(--chat--header--border-left, none);
+		border-right: var(--chat--header--border-right, none);
+		h1 {
+			font-size: var(--chat--heading--font-size);
+			color: var(--chat--header--color, var(--chat--color-light));
+		}
+		p {
+			font-size: var(--chat--subtitle--font-size, inherit);
+			line-height: var(--chat--subtitle--line-height, 1.8);
+		}
 	}
 
 	.chat-body {

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

@@ -6,7 +6,8 @@ import VueMarkdown from 'vue-markdown-render';
 import hljs from 'highlight.js/lib/core';
 import markdownLink from 'markdown-it-link-attributes';
 import type MarkdownIt from 'markdown-it';
-import type { ChatMessage } from '@n8n/chat/types';
+import type { ChatMessage, ChatMessageText } from '@n8n/chat/types';
+import { useOptions } from '@n8n/chat/composables';
 
 const props = defineProps({
 	message: {
@@ -16,15 +17,17 @@ const props = defineProps({
 });
 
 const { message } = toRefs(props);
+const { options } = useOptions();
 
 const messageText = computed(() => {
-	return message.value.text || '<Empty response>';
+	return (message.value as ChatMessageText).text || '<Empty response>';
 });
 
 const classes = computed(() => {
 	return {
 		'chat-message-from-user': message.value.sender === 'user',
 		'chat-message-from-bot': message.value.sender === 'bot',
+		'chat-message-transparent': message.value.transparent === true,
 	};
 });
 
@@ -48,11 +51,17 @@ const markdownOptions = {
 		return ''; // use external default escaping
 	},
 };
+
+const messageComponents = options.messageComponents ?? {};
 </script>
 <template>
 	<div class="chat-message" :class="classes">
 		<slot>
+			<template v-if="message.type === 'component' && messageComponents[message.key]">
+				<component :is="messageComponents[message.key]" v-bind="message.arguments" />
+			</template>
 			<VueMarkdown
+				v-else
 				class="chat-message-markdown"
 				:source="messageText"
 				:options="markdownOptions"
@@ -66,21 +75,40 @@ const markdownOptions = {
 .chat-message {
 	display: block;
 	max-width: 80%;
+	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));
 
+	p {
+		line-height: var(--chat--message-line-height, 1.8);
+		word-wrap: break-word;
+	}
+
+	// Default message gap is half of the spacing
 	+ .chat-message {
 		margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 0.5));
 	}
 
+	// Spacing between messages from different senders is double the individual message gap
+	&.chat-message-from-user + &.chat-message-from-bot,
+	&.chat-message-from-bot + &.chat-message-from-user {
+		margin-top: var(--chat--spacing);
+	}
+
 	&.chat-message-from-bot {
-		background-color: var(--chat--message--bot--background);
+		&:not(.chat-message-transparent) {
+			background-color: var(--chat--message--bot--background);
+			border: var(--chat--message--bot--border, none);
+		}
 		color: var(--chat--message--bot--color);
 		border-bottom-left-radius: 0;
 	}
 
 	&.chat-message-from-user {
-		background-color: var(--chat--message--user--background);
+		&:not(.chat-message-transparent) {
+			background-color: var(--chat--message--user--background);
+			border: var(--chat--message--user--border, none);
+		}
 		color: var(--chat--message--user--color);
 		margin-left: auto;
 		border-bottom-right-radius: 0;

packages/@n8n/chat/src/composables/useI18n.ts

@@ -1,11 +1,16 @@
+import { isRef } from 'vue';
 import { useOptions } from '@n8n/chat/composables/useOptions';
 
 export function useI18n() {
 	const { options } = useOptions();
 	const language = options?.defaultLanguage ?? 'en';
 
 	function t(key: string): string {
-		return options?.i18n?.[language]?.[key] ?? key;
+		const val = options?.i18n?.[language]?.[key];
+		if (isRef(val)) {
+			return val.value as string;
+		}
+		return val ?? key;
 	}
 
 	function te(key: string): boolean {

packages/@n8n/chat/src/constants/defaults.ts

@@ -21,6 +21,7 @@ export const defaultOptions: ChatOptions = {
 			footer: '',
 			getStarted: 'New Conversation',
 			inputPlaceholder: 'Type your question..',
+			closeButtonTooltip: 'Close chat',
 		},
 	},
 	theme: {},

packages/@n8n/chat/src/css/_tokens.scss

@@ -33,4 +33,6 @@
 	--chat--toggle--active--background: var(--chat--color-primary-shade-100);
 	--chat--toggle--color: var(--chat--color-white);
 	--chat--toggle--size: 64px;
+
+	--chat--heading--font-size: 2em;
 }

packages/@n8n/chat/src/types/chat.ts

@@ -6,7 +6,7 @@ export interface Chat {
 	messages: Ref<ChatMessage[]>;
 	currentSessionId: Ref<string | null>;
 	waitingForResponse: Ref<boolean>;
-	loadPreviousSession: () => Promise<string | undefined>;
-	startNewSession: () => Promise<void>;
+	loadPreviousSession?: () => Promise<string | undefined>;
+	startNewSession?: () => Promise<void>;
 	sendMessage: (text: string) => Promise<void>;
 }

packages/@n8n/chat/src/types/messages.ts

@@ -1,6 +1,19 @@
-export interface ChatMessage {
-	id: string;
+export type ChatMessage<T = Record<string, unknown>> = ChatMessageComponent<T> | ChatMessageText;
+
+export interface ChatMessageComponent<T = Record<string, unknown>> extends ChatMessageBase {
+	type: 'component';
+	key: string;
+	arguments: T;
+}
+
+export interface ChatMessageText extends ChatMessageBase {
+	type?: 'text';
 	text: string;
+}
+
+interface ChatMessageBase {
+	id: string;
 	createdAt: string;
+	transparent?: boolean;
 	sender: 'user' | 'bot';
 }