@n8n/chat 0.5.1 → 0.6.0

package/src/plugins/chat.ts

@@ -0,0 +1,101 @@
+import type { Plugin } from 'vue';
+import { computed, nextTick, ref } from 'vue';
+import type { ChatMessage, ChatOptions } from '@/types';
+import { v4 as uuidv4 } from 'uuid';
+import { chatEventBus } from '@/event-buses';
+import * as api from '@/api';
+import { ChatOptionsSymbol, ChatSymbol, localStorageSessionIdKey } from '@/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,
+			);
+
+			const receivedMessage: ChatMessage = {
+				id: uuidv4(),
+				text: sendMessageResponse.output,
+				sender: 'bot',
+				createdAt: new Date().toISOString(),
+			};
+			messages.value.push(receivedMessage);
+
+			waitingForResponse.value = false;
+
+			void nextTick(() => {
+				chatEventBus.emit('scrollToBottom');
+			});
+		}
+
+		async function loadPreviousSession() {
+			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/shims.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+	import { defineComponent } from 'vue';
+
+	const component: ReturnType<typeof defineComponent>;
+	export default component;
+}

package/src/types/chat.ts

@@ -0,0 +1,12 @@
+import type { ChatMessage } from '@/types/messages';
+import type { Ref } from 'vue';
+
+export interface Chat {
+	initialMessages: Ref<ChatMessage[]>;
+	messages: Ref<ChatMessage[]>;
+	currentSessionId: Ref<string | null>;
+	waitingForResponse: Ref<boolean>;
+	loadPreviousSession: () => Promise<string>;
+	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,23 @@
+export interface ChatOptions {
+	webhookUrl: string;
+	webhookConfig?: {
+		method?: 'GET' | 'POST';
+		headers?: Record<string, string>;
+	};
+	target?: string | Element;
+	mode?: 'window' | 'fullscreen';
+	defaultLanguage?: 'en';
+	initialMessages?: string[];
+	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,17 @@
+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;
+}

package/src/utils/event-bus.ts

@@ -0,0 +1,51 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type CallbackFn = Function;
+export type UnregisterFn = () => void;
+
+export interface EventBus {
+	on: (eventName: string, fn: CallbackFn) => UnregisterFn;
+	off: (eventName: string, fn: CallbackFn) => void;
+	emit: <T = Event>(eventName: string, event?: T) => void;
+}
+
+export function createEventBus(): EventBus {
+	const handlers = new Map<string, CallbackFn[]>();
+
+	function off(eventName: string, fn: CallbackFn) {
+		const eventFns = handlers.get(eventName);
+
+		if (eventFns) {
+			eventFns.splice(eventFns.indexOf(fn) >>> 0, 1);
+		}
+	}
+
+	function on(eventName: string, fn: CallbackFn): UnregisterFn {
+		let eventFns = handlers.get(eventName);
+
+		if (!eventFns) {
+			eventFns = [fn];
+		} else {
+			eventFns.push(fn);
+		}
+
+		handlers.set(eventName, eventFns);
+
+		return () => off(eventName, fn);
+	}
+
+	function emit<T = Event>(eventName: string, event?: T) {
+		const eventFns = handlers.get(eventName);
+
+		if (eventFns) {
+			eventFns.slice().forEach(async (handler) => {
+				await handler(event);
+			});
+		}
+	}
+
+	return {
+		on,
+		off,
+		emit,
+	};
+}

package/src/utils/mount.ts

@@ -0,0 +1,16 @@
+export function createDefaultMountingTarget(mountingTarget: string) {
+	const mountingTargetNode = document.querySelector(mountingTarget);
+	if (!mountingTargetNode) {
+		const generatedMountingTargetNode = document.createElement('div');
+
+		if (mountingTarget.startsWith('#')) {
+			generatedMountingTargetNode.id = mountingTarget.replace('#', '');
+		}
+
+		if (mountingTarget.startsWith('.')) {
+			generatedMountingTargetNode.classList.add(mountingTarget.replace('.', ''));
+		}
+
+		document.body.appendChild(generatedMountingTargetNode);
+	}
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+	"extends": "../../../tsconfig.json",
+	"compilerOptions": {
+		"rootDir": ".",
+		"outDir": "dist",
+		"target": "esnext",
+		"module": "esnext",
+		"allowJs": true,
+		"importHelpers": true,
+		"incremental": false,
+		"allowSyntheticDefaultImports": true,
+		"resolveJsonModule": true,
+		"baseUrl": ".",
+		"types": ["vitest/globals", "unplugin-icons/types/vue"],
+		"paths": {
+			"@/*": ["src/*"],
+			"n8n-design-system/*": ["../design-system/src/*"]
+		},
+		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+		// TODO: remove all options below this line
+		"noUnusedLocals": false,
+		"useUnknownInCatchVariables": false
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue", "**/*.d.ts"]
+}
+
+

package/vite.config.ts

@@ -0,0 +1,51 @@
+import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import vue from '@vitejs/plugin-vue';
+import icons from 'unplugin-icons/vite';
+import dts from 'vite-plugin-dts';
+
+const includeVue = process.env.INCLUDE_VUE === 'true';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		vue(),
+		icons({
+			compiler: 'vue3',
+		}),
+		dts(),
+	],
+	resolve: {
+		alias: {
+			'@': fileURLToPath(new URL('./src', import.meta.url)),
+		},
+	},
+	define: {
+		'process.env.NODE_ENV': process.env.NODE_ENV ? `"${process.env.NODE_ENV}"` : '"development"',
+	},
+	build: {
+		emptyOutDir: !includeVue,
+		lib: {
+			entry: resolve(__dirname, 'src', 'index.ts'),
+			name: 'N8nChat',
+			fileName: (format) => (includeVue ? `chat.bundle.${format}.js` : `chat.${format}.js`),
+		},
+		rollupOptions: {
+			// make sure to externalize deps that shouldn't be bundled
+			// into your library
+			external: includeVue ? [] : ['vue'],
+			output: {
+				exports: 'named',
+				// Provide global variables to use in the UMD build
+				// for externalized deps
+				globals: includeVue
+					? {}
+					: {
+							vue: 'Vue',
+					  },
+			},
+		},
+	},
+});

package/vitest.config.ts

@@ -0,0 +1,20 @@
+import { fileURLToPath } from 'node:url';
+import { mergeConfig, defineConfig } from 'vite';
+import { configDefaults } from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+	viteConfig,
+	defineConfig({
+		test: {
+			globals: true,
+			environment: 'jsdom',
+			exclude: [...configDefaults.exclude, 'e2e/*'],
+			root: fileURLToPath(new URL('./', import.meta.url)),
+			setupFiles: ['./src/__tests__/setup.ts'],
+			transformMode: {
+				web: [/\.[jt]sx$/],
+			},
+		},
+	}),
+);