@n8n/chat 0.9.1 → 0.10.0

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

@@ -35,32 +35,48 @@ onBeforeUnmount(() => {
 	</main>
 </template>
 
-<style>
+<style lang="scss">
 .chat-layout {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  overflow-y: auto;
-  flex-direction: column;
-  font-family: var(--chat--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
-}
-.chat-layout .chat-header {
-  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));
-}
-.chat-layout .chat-body {
-  background: var(--chat--body--background, var(--chat--color-light));
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  position: relative;
-  min-height: 100px;
-}
-.chat-layout .chat-footer {
-  border-top: 1px solid var(--chat--color-light-shade-100);
-  background: var(--chat--footer--background, var(--chat--color-light));
-  color: var(--chat--footer--color, var(--chat--color-dark));
+	width: 100%;
+	height: 100%;
+	display: flex;
+	overflow-y: auto;
+	flex-direction: column;
+	font-family: var(
+		--chat--font-family,
+		(
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			Oxygen-Sans,
+			Ubuntu,
+			Cantarell,
+			'Helvetica Neue',
+			sans-serif
+		)
+	);
+
+	.chat-header {
+		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));
+	}
+
+	.chat-body {
+		background: var(--chat--body--background, var(--chat--color-light));
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+		position: relative;
+		min-height: 100px;
+	}
+
+	.chat-footer {
+		border-top: 1px solid var(--chat--color-light-shade-100);
+		background: var(--chat--footer--background, var(--chat--color-light));
+		color: var(--chat--footer--color, var(--chat--color-dark));
+	}
 }
 </style>

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

@@ -46,45 +46,52 @@ const markdownOptions = {
 	</div>
 </template>
 
-<style>
+<style lang="scss">
 .chat-message {
-  display: block;
-  max-width: 80%;
-  padding: var(--chat--message--padding, var(--chat--spacing));
-  border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
-}
-.chat-message + .chat-message {
-  margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 0.5));
-}
-.chat-message.chat-message-from-bot {
-  background-color: var(--chat--message--bot--background);
-  color: var(--chat--message--bot--color);
-  border-bottom-left-radius: 0;
-}
-.chat-message.chat-message-from-user {
-  background-color: var(--chat--message--user--background);
-  color: var(--chat--message--user--color);
-  margin-left: auto;
-  border-bottom-right-radius: 0;
-}
-.chat-message > .chat-message-markdown {
-  display: block;
-  box-sizing: border-box;
-}
-.chat-message > .chat-message-markdown > *:first-child {
-  margin-top: 0;
-}
-.chat-message > .chat-message-markdown > *:last-child {
-  margin-bottom: 0;
-}
-.chat-message > .chat-message-markdown pre {
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre-wrap;
-  box-sizing: border-box;
-  padding: var(--chat--spacing);
-  background: var(--chat--message--pre--background);
-  border-radius: var(--chat--border-radius);
+	display: block;
+	max-width: 80%;
+	padding: var(--chat--message--padding, var(--chat--spacing));
+	border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
+
+	+ .chat-message {
+		margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 0.5));
+	}
+
+	&.chat-message-from-bot {
+		background-color: var(--chat--message--bot--background);
+		color: var(--chat--message--bot--color);
+		border-bottom-left-radius: 0;
+	}
+
+	&.chat-message-from-user {
+		background-color: var(--chat--message--user--background);
+		color: var(--chat--message--user--color);
+		margin-left: auto;
+		border-bottom-right-radius: 0;
+	}
+
+	> .chat-message-markdown {
+		display: block;
+		box-sizing: border-box;
+
+		> *:first-child {
+			margin-top: 0;
+		}
+
+		> *:last-child {
+			margin-bottom: 0;
+		}
+
+		pre {
+			font-family: inherit;
+			font-size: inherit;
+			margin: 0;
+			white-space: pre-wrap;
+			box-sizing: border-box;
+			padding: var(--chat--spacing);
+			background: var(--chat--message--pre--background);
+			border-radius: var(--chat--border-radius);
+		}
+	}
 }
 </style>

package/src/components/MessageTyping.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { computed } from 'vue';
+import { Message } from './index';
+import type { ChatMessage } from '@n8n/chat/types';
+
+const props = defineProps({
+	animation: {
+		type: String as PropType<'bouncing' | 'scaling'>,
+		default: 'bouncing',
+	},
+});
+
+const message: ChatMessage = {
+	id: 'typing',
+	text: '',
+	sender: 'bot',
+	createdAt: '',
+};
+
+const classes = computed(() => {
+	return {
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		'chat-message-typing': true,
+		[`chat-message-typing-animation-${props.animation}`]: true,
+	};
+});
+</script>
+<template>
+	<Message :class="classes" :message="message">
+		<div class="chat-message-typing-body">
+			<span class="chat-message-typing-circle"></span>
+			<span class="chat-message-typing-circle"></span>
+			<span class="chat-message-typing-circle"></span>
+		</div>
+	</Message>
+</template>
+<style lang="scss">
+.chat-message-typing {
+	max-width: 80px;
+
+	&.chat-message-typing-animation-scaling .chat-message-typing-circle {
+		animation: chat-message-typing-animation-scaling 800ms ease-in-out infinite;
+		animation-delay: 3600ms;
+	}
+
+	&.chat-message-typing-animation-bouncing .chat-message-typing-circle {
+		animation: chat-message-typing-animation-bouncing 800ms ease-in-out infinite;
+		animation-delay: 3600ms;
+	}
+
+	.chat-message-typing-body {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.chat-message-typing-circle {
+		display: block;
+		height: 10px;
+		width: 10px;
+		border-radius: 50%;
+		background-color: var(--chat--color-typing);
+		margin: 3px;
+
+		&:nth-child(1) {
+			animation-delay: 0ms;
+		}
+
+		&:nth-child(2) {
+			animation-delay: 333ms;
+		}
+
+		&:nth-child(3) {
+			animation-delay: 666ms;
+		}
+	}
+}
+
+@keyframes chat-message-typing-animation-scaling {
+	0% {
+		transform: scale(1);
+	}
+	33% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.4);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes chat-message-typing-animation-bouncing {
+	0% {
+		transform: translateY(0);
+	}
+	33% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-10px);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}
+</style>

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

@@ -28,10 +28,10 @@ const { initialMessages, waitingForResponse } = chatStore;
 	</div>
 </template>
 
-<style>
+<style lang="scss">
 .chat-messages-list {
-  margin-top: auto;
-  display: block;
-  padding: var(--chat--messages-list--padding, var(--chat--spacing));
+	margin-top: auto;
+	display: block;
+	padding: var(--chat--messages-list--padding, var(--chat--spacing));
 }
 </style>

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

@@ -5,12 +5,13 @@
 	</div>
 </template>
 
-<style>
+<style lang="scss">
 .chat-powered-by {
-  text-align: center;
-}
-.chat-powered-by a {
-  color: var(--chat--color-primary);
-  text-decoration: none;
+	text-align: center;
+
+	a {
+		color: var(--chat--color-primary);
+		text-decoration: none;
+	}
 }
 </style>

package/src/composables/useChat.ts

@@ -0,0 +1,7 @@
+import { inject } from 'vue';
+import { ChatSymbol } from '@n8n/chat/constants';
+import type { Chat } from '@n8n/chat/types';
+
+export function useChat() {
+	return inject(ChatSymbol) as Chat;
+}

package/src/composables/useI18n.ts

@@ -0,0 +1,16 @@
+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;
+	}
+
+	function te(key: string): boolean {
+		return !!options?.i18n?.[language]?.[key];
+	}
+
+	return { t, te };
+}

package/src/composables/useOptions.ts

@@ -0,0 +1,11 @@
+import { inject } from 'vue';
+import { ChatOptionsSymbol } from '@n8n/chat/constants';
+import type { ChatOptions } from '@n8n/chat/types';
+
+export function useOptions() {
+	const options = inject(ChatOptionsSymbol) as ChatOptions;
+
+	return {
+		options,
+	};
+}

package/src/constants/defaults.ts

@@ -0,0 +1,29 @@
+import type { ChatOptions } from '@n8n/chat/types';
+
+export const defaultOptions: ChatOptions = {
+	webhookUrl: 'http://localhost:5678',
+	webhookConfig: {
+		method: 'POST',
+		headers: {},
+	},
+	target: '#n8n-chat',
+	mode: 'window',
+	loadPreviousSession: true,
+	chatInputKey: 'chatInput',
+	chatSessionKey: 'sessionId',
+	defaultLanguage: 'en',
+	showWelcomeScreen: false,
+	initialMessages: ['Hi there! 👋', 'My name is Nathan. How can I assist you today?'],
+	i18n: {
+		en: {
+			title: 'Hi there! 👋',
+			subtitle: "Start a chat. We're here to help you 24/7.",
+			footer: '',
+			getStarted: 'New Conversation',
+			inputPlaceholder: 'Type your question..',
+		},
+	},
+	theme: {},
+};
+
+export const defaultMountingTarget = '#n8n-chat';

package/{constants/localStorage.mjs → src/constants/localStorage.ts}

@@ -1,2 +1,2 @@
-export const localStorageNamespace = "n8n-chat";
+export const localStorageNamespace = 'n8n-chat';
 export const localStorageSessionIdKey = `${localStorageNamespace}/sessionId`;

package/src/constants/symbols.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue';
+import type { Chat, ChatOptions } from '@n8n/chat/types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ChatSymbol = 'Chat' as unknown as InjectionKey<Chat>;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ChatOptionsSymbol = 'ChatOptions' as unknown as InjectionKey<ChatOptions>;

package/src/css/_tokens.scss

@@ -0,0 +1,36 @@
+:root {
+	--chat--color-primary: #e74266;
+	--chat--color-primary-shade-50: #db4061;
+	--chat--color-primary-shade-100: #cf3c5c;
+	--chat--color-secondary: #20b69e;
+	--chat--color-secondary-shade-50: #1ca08a;
+	--chat--color-white: #ffffff;
+	--chat--color-light: #f2f4f8;
+	--chat--color-light-shade-50: #e6e9f1;
+	--chat--color-light-shade-100: #c2c5cc;
+	--chat--color-medium: #d2d4d9;
+	--chat--color-dark: #101330;
+	--chat--color-disabled: #777980;
+	--chat--color-typing: #404040;
+
+	--chat--spacing: 1rem;
+	--chat--border-radius: 0.25rem;
+	--chat--transition-duration: 0.15s;
+
+	--chat--window--width: 400px;
+	--chat--window--height: 600px;
+
+	--chat--textarea--height: 50px;
+
+	--chat--message--bot--background: var(--chat--color-white);
+	--chat--message--bot--color: var(--chat--color-dark);
+	--chat--message--user--background: var(--chat--color-secondary);
+	--chat--message--user--color: var(--chat--color-white);
+	--chat--message--pre--background: rgba(0, 0, 0, 0.05);
+
+	--chat--toggle--background: var(--chat--color-primary);
+	--chat--toggle--hover--background: var(--chat--color-primary-shade-50);
+	--chat--toggle--active--background: var(--chat--color-primary-shade-100);
+	--chat--toggle--color: var(--chat--color-white);
+	--chat--toggle--size: 64px;
+}

package/src/css/index.scss

@@ -0,0 +1 @@
+@import 'tokens';

package/src/event-buses/chatEventBus.ts

@@ -0,0 +1,3 @@
+import { createEventBus } from '@n8n/chat/utils';
+
+export const chatEventBus = createEventBus();

package/src/index.ts

@@ -0,0 +1,42 @@
+import './main.scss';
+
+import { createApp } from 'vue';
+import App from './App.vue';
+import type { ChatOptions } from '@n8n/chat/types';
+import { defaultMountingTarget, defaultOptions } from '@n8n/chat/constants';
+import { createDefaultMountingTarget } from '@n8n/chat/utils';
+import { ChatPlugin } from '@n8n/chat/plugins';
+
+export function createChat(options?: Partial<ChatOptions>) {
+	const resolvedOptions: ChatOptions = {
+		...defaultOptions,
+		...options,
+		webhookConfig: {
+			...defaultOptions.webhookConfig,
+			...options?.webhookConfig,
+		},
+		i18n: {
+			...defaultOptions.i18n,
+			...options?.i18n,
+			en: {
+				...defaultOptions.i18n?.en,
+				...options?.i18n?.en,
+			},
+		},
+		theme: {
+			...defaultOptions.theme,
+			...options?.theme,
+		},
+	};
+
+	const mountingTarget = resolvedOptions.target ?? defaultMountingTarget;
+	if (typeof mountingTarget === 'string') {
+		createDefaultMountingTarget(mountingTarget);
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	const app = createApp(App);
+	app.use(ChatPlugin, resolvedOptions);
+	app.mount(mountingTarget);
+	return app;
+}

package/src/main.scss

@@ -0,0 +1,5 @@
+.n8n-chat {
+	@import 'highlight.js/styles/github';
+}
+
+@import 'css';

package/src/plugins/chat.ts

@@ -0,0 +1,115 @@
+import type { Plugin } from 'vue';
+import { computed, nextTick, ref } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+import type { ChatMessage, ChatOptions } from '@n8n/chat/types';
+import { chatEventBus } from '@n8n/chat/event-buses';
+import * as api from '@n8n/chat/api';
+import { ChatOptionsSymbol, ChatSymbol, localStorageSessionIdKey } from '@n8n/chat/constants';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ChatPlugin: Plugin<ChatOptions> = {
+	install(app, options) {
+		app.provide(ChatOptionsSymbol, options);
+
+		const messages = ref<ChatMessage[]>([]);
+		const currentSessionId = ref<string | null>(null);
+		const waitingForResponse = ref(false);
+
+		const initialMessages = computed<ChatMessage[]>(() =>
+			(options.initialMessages ?? []).map((text) => ({
+				id: uuidv4(),
+				text,
+				sender: 'bot',
+				createdAt: new Date().toISOString(),
+			})),
+		);
+
+		async function sendMessage(text: string) {
+			const sentMessage: ChatMessage = {
+				id: uuidv4(),
+				text,
+				sender: 'user',
+				createdAt: new Date().toISOString(),
+			};
+
+			messages.value.push(sentMessage);
+			waitingForResponse.value = true;
+
+			void nextTick(() => {
+				chatEventBus.emit('scrollToBottom');
+			});
+
+			const sendMessageResponse = await api.sendMessage(
+				text,
+				currentSessionId.value as string,
+				options,
+			);
+
+			let textMessage = sendMessageResponse.output ?? sendMessageResponse.text ?? '';
+
+			if (textMessage === '' && Object.keys(sendMessageResponse).length > 0) {
+				try {
+					textMessage = JSON.stringify(sendMessageResponse, null, 2);
+				} catch (e) {
+					// Failed to stringify the object so fallback to empty string
+				}
+			}
+
+			const receivedMessage: ChatMessage = {
+				id: uuidv4(),
+				text: textMessage,
+				sender: 'bot',
+				createdAt: new Date().toISOString(),
+			};
+			messages.value.push(receivedMessage);
+
+			waitingForResponse.value = false;
+
+			void nextTick(() => {
+				chatEventBus.emit('scrollToBottom');
+			});
+		}
+
+		async function loadPreviousSession() {
+			if (!options.loadPreviousSession) {
+				return;
+			}
+
+			const sessionId = localStorage.getItem(localStorageSessionIdKey) ?? uuidv4();
+			const previousMessagesResponse = await api.loadPreviousSession(sessionId, options);
+			const timestamp = new Date().toISOString();
+
+			messages.value = (previousMessagesResponse?.data || []).map((message, index) => ({
+				id: `${index}`,
+				text: message.kwargs.content,
+				sender: message.id.includes('HumanMessage') ? 'user' : 'bot',
+				createdAt: timestamp,
+			}));
+
+			if (messages.value.length) {
+				currentSessionId.value = sessionId;
+			}
+
+			return sessionId;
+		}
+
+		async function startNewSession() {
+			currentSessionId.value = uuidv4();
+
+			localStorage.setItem(localStorageSessionIdKey, currentSessionId.value);
+		}
+
+		const chatStore = {
+			initialMessages,
+			messages,
+			currentSessionId,
+			waitingForResponse,
+			loadPreviousSession,
+			startNewSession,
+			sendMessage,
+		};
+
+		app.provide(ChatSymbol, chatStore);
+		app.config.globalProperties.$chat = chatStore;
+	},
+};

package/src/types/chat.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue';
+import type { ChatMessage } from '@n8n/chat/types/messages';
+
+export interface Chat {
+	initialMessages: Ref<ChatMessage[]>;
+	messages: Ref<ChatMessage[]>;
+	currentSessionId: Ref<string | null>;
+	waitingForResponse: Ref<boolean>;
+	loadPreviousSession: () => Promise<string | undefined>;
+	startNewSession: () => Promise<void>;
+	sendMessage: (text: string) => Promise<void>;
+}

package/src/types/messages.ts

@@ -0,0 +1,6 @@
+export interface ChatMessage {
+	id: string;
+	text: string;
+	createdAt: string;
+	sender: 'user' | 'bot';
+}

package/src/types/options.ts

@@ -0,0 +1,28 @@
+export interface ChatOptions {
+	webhookUrl: string;
+	webhookConfig?: {
+		method?: 'GET' | 'POST';
+		headers?: Record<string, string>;
+	};
+	target?: string | Element;
+	mode?: 'window' | 'fullscreen';
+	showWelcomeScreen?: boolean;
+	loadPreviousSession?: boolean;
+	chatInputKey?: string;
+	chatSessionKey?: string;
+	defaultLanguage?: 'en';
+	initialMessages?: string[];
+	metadata?: Record<string, unknown>;
+	i18n: Record<
+		string,
+		{
+			title: string;
+			subtitle: string;
+			footer: string;
+			getStarted: string;
+			inputPlaceholder: string;
+			[message: string]: string;
+		}
+	>;
+	theme?: {};
+}

package/src/types/webhook.ts

@@ -0,0 +1,18 @@
+export interface LoadPreviousSessionResponseItem {
+	id: string[];
+	kwargs: {
+		content: string;
+		additional_kwargs: Record<string, unknown>;
+	};
+	lc: number;
+	type: string;
+}
+
+export interface LoadPreviousSessionResponse {
+	data: LoadPreviousSessionResponseItem[];
+}
+
+export interface SendMessageResponse {
+	output?: string;
+	text?: string;
+}