@n8n/chat 0.9.1 → 0.11.0

package/src/__tests__/index.spec.ts

@@ -0,0 +1,218 @@
+import { fireEvent, waitFor } from '@testing-library/vue';
+import {
+	createFetchResponse,
+	createGetLatestMessagesResponse,
+	createSendMessageResponse,
+	getChatInputSendButton,
+	getChatInputTextarea,
+	getChatMessage,
+	getChatMessageByText,
+	getChatMessages,
+	getChatMessageTyping,
+	getChatWindowToggle,
+	getChatWindowWrapper,
+	getChatWrapper,
+	getGetStartedButton,
+	getMountingTarget,
+} from '@n8n/chat/__tests__/utils';
+import { createChat } from '@n8n/chat/index';
+
+describe('createChat()', () => {
+	let app: ReturnType<typeof createChat>;
+
+	afterEach(() => {
+		vi.clearAllMocks();
+
+		app.unmount();
+	});
+
+	describe('mode', () => {
+		it('should create fullscreen chat app with default options', () => {
+			const fetchSpy = vi.spyOn(window, 'fetch');
+			fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
+
+			app = createChat({
+				mode: 'fullscreen',
+			});
+
+			expect(getMountingTarget()).toBeVisible();
+			expect(getChatWrapper()).toBeVisible();
+			expect(getChatWindowWrapper()).not.toBeInTheDocument();
+		});
+
+		it('should create window chat app with default options', () => {
+			const fetchSpy = vi.spyOn(window, 'fetch');
+			fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
+
+			app = createChat({
+				mode: 'window',
+			});
+
+			expect(getMountingTarget()).toBeDefined();
+			expect(getChatWindowWrapper()).toBeVisible();
+			expect(getChatWrapper()).not.toBeVisible();
+		});
+
+		it('should open window chat app using toggle button', async () => {
+			const fetchSpy = vi.spyOn(window, 'fetch');
+			fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
+
+			app = createChat();
+
+			expect(getMountingTarget()).toBeVisible();
+			expect(getChatWindowWrapper()).toBeVisible();
+
+			const trigger = getChatWindowToggle();
+			await fireEvent.click(trigger as HTMLElement);
+
+			expect(getChatWrapper()).toBeVisible();
+		});
+	});
+
+	describe('loadPreviousMessages', () => {
+		it('should load previous messages on mount', async () => {
+			const fetchSpy = vi.spyOn(global, 'fetch');
+			fetchSpy.mockImplementation(createFetchResponse(createGetLatestMessagesResponse()));
+
+			app = createChat({
+				mode: 'fullscreen',
+				showWelcomeScreen: true,
+			});
+
+			const getStartedButton = getGetStartedButton();
+			await fireEvent.click(getStartedButton as HTMLElement);
+
+			expect(fetchSpy.mock.calls[0][1]).toEqual(
+				expect.objectContaining({
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: expect.stringContaining('"action":"loadPreviousSession"') as unknown,
+					mode: 'cors',
+					cache: 'no-cache',
+				}),
+			);
+		});
+	});
+
+	describe('initialMessages', () => {
+		it.each(['fullscreen', 'window'] as Array<'fullscreen' | 'window'>)(
+			'should show initial default messages in %s mode',
+			async (mode) => {
+				const fetchSpy = vi.spyOn(window, 'fetch');
+				fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
+
+				const initialMessages = ['Hello tester!', 'How are you?'];
+				app = createChat({
+					mode,
+					initialMessages,
+				});
+
+				if (mode === 'window') {
+					const trigger = getChatWindowToggle();
+					await fireEvent.click(trigger as HTMLElement);
+				}
+
+				expect(getChatMessages().length).toBe(initialMessages.length);
+				expect(getChatMessageByText(initialMessages[0])).toBeInTheDocument();
+				expect(getChatMessageByText(initialMessages[1])).toBeInTheDocument();
+			},
+		);
+	});
+
+	describe('sendMessage', () => {
+		it.each(['window', 'fullscreen'] as Array<'fullscreen' | 'window'>)(
+			'should send a message and render a text message in %s mode',
+			async (mode) => {
+				const input = 'Hello User World!';
+				const output = 'Hello Bot World!';
+
+				const fetchSpy = vi.spyOn(window, 'fetch');
+				fetchSpy
+					.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse))
+					.mockImplementationOnce(createFetchResponse(createSendMessageResponse(output)));
+
+				app = createChat({
+					mode,
+				});
+
+				if (mode === 'window') {
+					const trigger = getChatWindowToggle();
+					await fireEvent.click(trigger as HTMLElement);
+				}
+
+				expect(getChatMessageTyping()).not.toBeInTheDocument();
+				expect(getChatMessages().length).toBe(2);
+
+				await waitFor(() => expect(getChatInputTextarea()).toBeInTheDocument());
+
+				const textarea = getChatInputTextarea();
+				const sendButton = getChatInputSendButton();
+				await fireEvent.update(textarea as HTMLElement, input);
+				expect(sendButton).not.toBeDisabled();
+				await fireEvent.click(sendButton as HTMLElement);
+
+				expect(fetchSpy.mock.calls[1][1]).toEqual(
+					expect.objectContaining({
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+						},
+						body: expect.stringMatching(/"action":"sendMessage"/) as unknown,
+						mode: 'cors',
+						cache: 'no-cache',
+					}),
+				);
+				expect(fetchSpy.mock.calls[1][1]?.body).toContain(`"${input}"`);
+
+				expect(getChatMessages().length).toBe(3);
+				expect(getChatMessageByText(input)).toBeInTheDocument();
+				expect(getChatMessageTyping()).toBeVisible();
+
+				await waitFor(() => expect(getChatMessageTyping()).not.toBeInTheDocument());
+				expect(getChatMessageByText(output)).toBeInTheDocument();
+			},
+		);
+
+		it.each(['fullscreen', 'window'] as Array<'fullscreen' | 'window'>)(
+			'should send a message and render a code markdown message in %s mode',
+			async (mode) => {
+				const input = 'Teach me javascript!';
+				const output = '# Code\n```js\nconsole.log("Hello World!");\n```';
+
+				const fetchSpy = vi.spyOn(window, 'fetch');
+				fetchSpy
+					.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse))
+					.mockImplementationOnce(createFetchResponse(createSendMessageResponse(output)));
+
+				app = createChat({
+					mode,
+				});
+
+				if (mode === 'window') {
+					const trigger = getChatWindowToggle();
+					await fireEvent.click(trigger as HTMLElement);
+				}
+
+				await waitFor(() => expect(getChatInputTextarea()).toBeInTheDocument());
+
+				const textarea = getChatInputTextarea();
+				const sendButton = getChatInputSendButton();
+				await fireEvent.update(textarea as HTMLElement, input);
+				await fireEvent.click(sendButton as HTMLElement);
+
+				expect(getChatMessageByText(input)).toBeInTheDocument();
+				expect(getChatMessages().length).toBe(3);
+
+				await waitFor(() => expect(getChatMessageTyping()).not.toBeInTheDocument());
+
+				const lastMessage = getChatMessage(-1);
+				expect(lastMessage).toBeInTheDocument();
+
+				expect(lastMessage.querySelector('h1')).toHaveTextContent('Code');
+				expect(lastMessage.querySelector('code')).toHaveTextContent('console.log("Hello World!");');
+			},
+		);
+	});
+});

package/src/__tests__/utils/create.ts

@@ -0,0 +1,16 @@
+import { createChat } from '@n8n/chat/index';
+
+export function createTestChat(options: Parameters<typeof createChat>[0] = {}): {
+	unmount: () => void;
+	container: Element;
+} {
+	const app = createChat(options);
+
+	const container = app._container as Element;
+	const unmount = () => app.unmount();
+
+	return {
+		unmount,
+		container,
+	};
+}

package/src/__tests__/utils/fetch.ts

@@ -0,0 +1,18 @@
+import type { LoadPreviousSessionResponse, SendMessageResponse } from '@n8n/chat/types';
+
+export function createFetchResponse<T>(data: T) {
+	return async () =>
+		({
+			json: async () => await new Promise<T>((resolve) => resolve(data)),
+		}) as Response;
+}
+
+export const createGetLatestMessagesResponse = (
+	data: LoadPreviousSessionResponse['data'] = [],
+): LoadPreviousSessionResponse => ({ data });
+
+export const createSendMessageResponse = (
+	output: SendMessageResponse['output'],
+): SendMessageResponse => ({
+	output,
+});

package/src/__tests__/utils/selectors.ts

@@ -0,0 +1,53 @@
+import { screen } from '@testing-library/vue';
+import { defaultMountingTarget } from '@n8n/chat/constants';
+
+export function getMountingTarget(target = defaultMountingTarget) {
+	return document.querySelector(target);
+}
+
+export function getChatWindowWrapper() {
+	return document.querySelector('.chat-window-wrapper');
+}
+
+export function getChatWindowToggle() {
+	return document.querySelector('.chat-window-toggle');
+}
+
+export function getChatWrapper() {
+	return document.querySelector('.chat-wrapper');
+}
+
+export function getChatMessages() {
+	return document.querySelectorAll('.chat-message:not(.chat-message-typing)');
+}
+
+export function getChatMessage(index: number) {
+	const messages = getChatMessages();
+	return index < 0 ? messages[messages.length + index] : messages[index];
+}
+
+export function getChatMessageByText(text: string) {
+	return screen.queryByText(text, {
+		selector: '.chat-message:not(.chat-message-typing) .chat-message-markdown p',
+	});
+}
+
+export function getChatMessageTyping() {
+	return document.querySelector('.chat-message-typing');
+}
+
+export function getGetStartedButton() {
+	return document.querySelector('.chat-get-started .chat-button');
+}
+
+export function getChatInput() {
+	return document.querySelector('.chat-input');
+}
+
+export function getChatInputTextarea() {
+	return document.querySelector('.chat-input textarea');
+}
+
+export function getChatInputSendButton() {
+	return document.querySelector('.chat-input .chat-input-send-button');
+}

package/src/api/generic.ts

@@ -0,0 +1,63 @@
+async function getAccessToken() {
+	return '';
+}
+
+export async function authenticatedFetch<T>(...args: Parameters<typeof fetch>): Promise<T> {
+	const accessToken = await getAccessToken();
+
+	const response = await fetch(args[0], {
+		...args[1],
+		mode: 'cors',
+		cache: 'no-cache',
+		headers: {
+			'Content-Type': 'application/json',
+			...(accessToken ? { authorization: `Bearer ${accessToken}` } : {}),
+			...args[1]?.headers,
+		},
+	});
+
+	return (await response.json()) as T;
+}
+
+export async function get<T>(url: string, query: object = {}, options: RequestInit = {}) {
+	let resolvedUrl = url;
+	if (Object.keys(query).length > 0) {
+		resolvedUrl = `${resolvedUrl}?${new URLSearchParams(
+			query as Record<string, string>,
+		).toString()}`;
+	}
+
+	return await authenticatedFetch<T>(resolvedUrl, { ...options, method: 'GET' });
+}
+
+export async function post<T>(url: string, body: object = {}, options: RequestInit = {}) {
+	return await authenticatedFetch<T>(url, {
+		...options,
+		method: 'POST',
+		body: JSON.stringify(body),
+	});
+}
+
+export async function put<T>(url: string, body: object = {}, options: RequestInit = {}) {
+	return await authenticatedFetch<T>(url, {
+		...options,
+		method: 'PUT',
+		body: JSON.stringify(body),
+	});
+}
+
+export async function patch<T>(url: string, body: object = {}, options: RequestInit = {}) {
+	return await authenticatedFetch<T>(url, {
+		...options,
+		method: 'PATCH',
+		body: JSON.stringify(body),
+	});
+}
+
+export async function del<T>(url: string, body: object = {}, options: RequestInit = {}) {
+	return await authenticatedFetch<T>(url, {
+		...options,
+		method: 'DELETE',
+		body: JSON.stringify(body),
+	});
+}

package/src/api/message.ts

@@ -0,0 +1,37 @@
+import { get, post } from '@n8n/chat/api/generic';
+import type {
+	ChatOptions,
+	LoadPreviousSessionResponse,
+	SendMessageResponse,
+} from '@n8n/chat/types';
+
+export async function loadPreviousSession(sessionId: string, options: ChatOptions) {
+	const method = options.webhookConfig?.method === 'POST' ? post : get;
+	return await method<LoadPreviousSessionResponse>(
+		`${options.webhookUrl}`,
+		{
+			action: 'loadPreviousSession',
+			[options.chatSessionKey as string]: sessionId,
+			...(options.metadata ? { metadata: options.metadata } : {}),
+		},
+		{
+			headers: options.webhookConfig?.headers,
+		},
+	);
+}
+
+export async function sendMessage(message: string, sessionId: string, options: ChatOptions) {
+	const method = options.webhookConfig?.method === 'POST' ? post : get;
+	return await method<SendMessageResponse>(
+		`${options.webhookUrl}`,
+		{
+			action: 'sendMessage',
+			[options.chatSessionKey as string]: sessionId,
+			[options.chatInputKey as string]: message,
+			...(options.metadata ? { metadata: options.metadata } : {}),
+		},
+		{
+			headers: options.webhookConfig?.headers,
+		},
+	);
+}

package/src/components/Button.vue

@@ -0,0 +1,41 @@
+<template>
+	<button class="chat-button">
+		<slot />
+	</button>
+</template>
+<style lang="scss">
+.chat-button {
+	display: inline-flex;
+	text-align: center;
+	vertical-align: middle;
+	user-select: none;
+	color: var(--chat--button--color, var(--chat--color-light));
+	background-color: var(--chat--button--background, var(--chat--color-primary));
+	border: 1px solid transparent;
+	padding: var(--chat--button--padding, calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing));
+	font-size: 1rem;
+	line-height: 1.5;
+	border-radius: var(--chat--button--border-radius, var(--chat--border-radius));
+	transition:
+		color var(--chat--transition-duration) ease-in-out,
+		background-color var(--chat--transition-duration) ease-in-out,
+		border-color var(--chat--transition-duration) ease-in-out,
+		box-shadow var(--chat--transition-duration) ease-in-out;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--chat--button--hover--color, var(--chat--color-light));
+		background-color: var(--chat--button--hover--background, var(--chat--color-primary-shade-50));
+		text-decoration: none;
+	}
+
+	&:focus {
+		outline: 0;
+		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+	}
+
+	&:disabled {
+		opacity: 0.65;
+	}
+}
+</style>

package/src/components/ChatWindow.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+// eslint-disable-next-line import/no-unresolved
+import IconChat from 'virtual:icons/mdi/chat';
+// eslint-disable-next-line import/no-unresolved
+import IconChevronDown from 'virtual:icons/mdi/chevron-down';
+import { nextTick, ref } from 'vue';
+import Chat from '@n8n/chat/components/Chat.vue';
+import { chatEventBus } from '@n8n/chat/event-buses';
+
+const isOpen = ref(false);
+
+function toggle() {
+	isOpen.value = !isOpen.value;
+
+	if (isOpen.value) {
+		void nextTick(() => {
+			chatEventBus.emit('scrollToBottom');
+		});
+	}
+}
+</script>
+
+<template>
+	<div class="chat-window-wrapper">
+		<Transition name="chat-window-transition">
+			<div v-show="isOpen" class="chat-window">
+				<Chat />
+			</div>
+		</Transition>
+		<div class="chat-window-toggle" @click="toggle">
+			<Transition name="chat-window-toggle-transition" mode="out-in">
+				<IconChat v-if="!isOpen" height="32" width="32" />
+				<IconChevronDown v-else height="32" width="32" />
+			</Transition>
+		</div>
+	</div>
+</template>
+
+<style lang="scss">
+.chat-window-wrapper {
+	position: fixed;
+	display: flex;
+	flex-direction: column;
+	bottom: var(--chat--window--bottom, var(--chat--spacing));
+	right: var(--chat--window--right, var(--chat--spacing));
+	z-index: var(--chat--window--z-index, 9999);
+
+	max-width: calc(100% - var(--chat--window--right, var(--chat--spacing)) * 2);
+	max-height: calc(100% - var(--chat--window--bottom, var(--chat--spacing)) * 2);
+
+	.chat-window {
+		display: flex;
+		width: var(--chat--window--width);
+		height: var(--chat--window--height);
+		max-width: 100%;
+		max-height: 100%;
+		border: var(--chat--window--border, 1px solid var(--chat--color-light-shade-100));
+		border-radius: var(--chat--window--border-radius, var(--chat--border-radius));
+		margin-bottom: var(--chat--window--margin-bottom, var(--chat--spacing));
+		overflow: hidden;
+		transform-origin: bottom right;
+
+		.chat-layout {
+			width: auto;
+			height: auto;
+			flex: 1;
+		}
+	}
+
+	.chat-window-toggle {
+		flex: 0 0 auto;
+		background: var(--chat--toggle--background);
+		color: var(--chat--toggle--color);
+		cursor: pointer;
+		width: var(--chat--toggle--width, var(--chat--toggle--size));
+		height: var(--chat--toggle--height, var(--chat--toggle--size));
+		border-radius: var(--chat--toggle--border-radius, 50%);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		transition:
+			transform var(--chat--transition-duration) ease,
+			background var(--chat--transition-duration) ease;
+
+		&:hover,
+		&:focus {
+			transform: scale(1.05);
+			background: var(--chat--toggle--hover--background);
+		}
+
+		&:active {
+			transform: scale(0.95);
+			background: var(--chat--toggle--active--background);
+		}
+	}
+}
+
+.chat-window-transition {
+	&-enter-active,
+	&-leave-active {
+		transition:
+			transform var(--chat--transition-duration) ease,
+			opacity var(--chat--transition-duration) ease;
+	}
+
+	&-enter-from,
+	&-leave-to {
+		transform: scale(0);
+		opacity: 0;
+	}
+}
+
+.chat-window-toggle-transition {
+	&-enter-active,
+	&-leave-active {
+		transition: opacity var(--chat--transition-duration) ease;
+	}
+
+	&-enter-from,
+	&-leave-to {
+		opacity: 0;
+	}
+}
+</style>

package/{components → src/components}/GetStarted.vue

@@ -12,13 +12,13 @@ const { t } = useI18n();
 	</div>
 </template>
 
-<style>
+<style lang="scss">
 .chat-get-started {
-  padding-top: var(--chat--spacing);
-  padding-bottom: var(--chat--spacing);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
+	padding-top: var(--chat--spacing);
+	padding-bottom: var(--chat--spacing);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
 }
 </style>

package/{components → src/components}/GetStartedFooter.vue

@@ -13,8 +13,8 @@ const { t, te } = useI18n();
 	</div>
 </template>
 
-<style>
+<style lang="scss">
 .chat-get-started-footer {
-  padding: var(--chat--spacing);
+	padding: var(--chat--spacing);
 }
 </style>

package/{components → src/components}/Input.vue

@@ -49,40 +49,45 @@ async function onSubmitKeydown(event: KeyboardEvent) {
 	</div>
 </template>
 
-<style>
+<style lang="scss">
 .chat-input {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-.chat-input textarea {
-  font-family: inherit;
-  font-size: inherit;
-  width: 100%;
-  border: 0;
-  padding: var(--chat--spacing);
-  max-height: var(--chat--textarea--height);
-  resize: none;
-}
-.chat-input .chat-input-send-button {
-  height: var(--chat--textarea--height);
-  width: var(--chat--textarea--height);
-  background: white;
-  cursor: pointer;
-  color: var(--chat--color-secondary);
-  border: 0;
-  font-size: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: color var(--chat--transition-duration) ease;
-}
-.chat-input .chat-input-send-button:hover, .chat-input .chat-input-send-button:focus {
-  color: var(--chat--color-secondary-shade-50);
-}
-.chat-input .chat-input-send-button[disabled] {
-  cursor: default;
-  color: var(--chat--color-disabled);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+
+	textarea {
+		font-family: inherit;
+		font-size: inherit;
+		width: 100%;
+		border: 0;
+		padding: var(--chat--spacing);
+		max-height: var(--chat--textarea--height);
+		resize: none;
+	}
+
+	.chat-input-send-button {
+		height: var(--chat--textarea--height);
+		width: var(--chat--textarea--height);
+		background: white;
+		cursor: pointer;
+		color: var(--chat--color-secondary);
+		border: 0;
+		font-size: 24px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		transition: color var(--chat--transition-duration) ease;
+
+		&:hover,
+		&:focus {
+			color: var(--chat--color-secondary-shade-50);
+		}
+
+		&[disabled] {
+			cursor: default;
+			color: var(--chat--color-disabled);
+		}
+	}
 }
 </style>