@n8n/chat 0.5.2 → 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/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$/],
+			},
+		},
+	}),
+);

package/__stories__/App.stories.d.ts

@@ -1,16 +0,0 @@
-import type { StoryObj } from '@storybook/vue3';
-declare const meta: {
-    title: string;
-    render: (args: ChatOptions) => {
-        setup(): {};
-        template: string;
-    };
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Fullscreen: Story;
-export declare const Windowed: Story;

package/__stories__/App.stories.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = exports.Windowed = exports.Fullscreen = void 0;
-var _index = require("@n8n/chat/index");
-var _vue = require("vue");
-const webhookUrl = "http://localhost:5678/webhook/f406671e-c954-4691-b39a-66c90aa2f103/chat";
-const meta = {
-  title: "Chat",
-  render: args => ({
-    setup() {
-      (0, _vue.onMounted)(() => {
-        (0, _index.createChat)(args);
-      });
-      return {};
-    },
-    template: '<div id="n8n-chat" />'
-  }),
-  parameters: {
-    layout: "fullscreen"
-  },
-  tags: ["autodocs"]
-};
-module.exports = meta;
-const Fullscreen = exports.Fullscreen = {
-  args: {
-    webhookUrl,
-    mode: "fullscreen"
-  }
-};
-const Windowed = exports.Windowed = {
-  args: {
-    webhookUrl,
-    mode: "window"
-  }
-};

package/__stories__/App.stories.mjs

@@ -1,32 +0,0 @@
-import { createChat } from "@n8n/chat/index";
-import { onMounted } from "vue";
-const webhookUrl = "http://localhost:5678/webhook/f406671e-c954-4691-b39a-66c90aa2f103/chat";
-const meta = {
-  title: "Chat",
-  render: (args) => ({
-    setup() {
-      onMounted(() => {
-        createChat(args);
-      });
-      return {};
-    },
-    template: '<div id="n8n-chat" />'
-  }),
-  parameters: {
-    layout: "fullscreen"
-  },
-  tags: ["autodocs"]
-};
-export default meta;
-export const Fullscreen = {
-  args: {
-    webhookUrl,
-    mode: "fullscreen"
-  }
-};
-export const Windowed = {
-  args: {
-    webhookUrl,
-    mode: "window"
-  }
-};

package/__tests__/index.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/__tests__/index.spec.js

@@ -1,146 +0,0 @@
-"use strict";
-
-var _vue = require("@testing-library/vue");
-var _utils = require("@n8n/chat/__tests__/utils");
-var _index = require("@n8n/chat/index");
-describe("createChat()", () => {
-  let app;
-  afterEach(() => {
-    vi.clearAllMocks();
-    app.unmount();
-  });
-  describe("mode", () => {
-    it("should create fullscreen chat app with default options", () => {
-      const fetchSpy = vi.spyOn(window, "fetch");
-      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
-      app = (0, _index.createChat)({
-        mode: "fullscreen"
-      });
-      expect((0, _utils.getMountingTarget)()).toBeVisible();
-      expect((0, _utils.getChatWrapper)()).toBeVisible();
-      expect((0, _utils.getChatWindowWrapper)()).not.toBeInTheDocument();
-    });
-    it("should create window chat app with default options", () => {
-      const fetchSpy = vi.spyOn(window, "fetch");
-      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
-      app = (0, _index.createChat)({
-        mode: "window"
-      });
-      expect((0, _utils.getMountingTarget)()).toBeDefined();
-      expect((0, _utils.getChatWindowWrapper)()).toBeVisible();
-      expect((0, _utils.getChatWrapper)()).not.toBeVisible();
-    });
-    it("should open window chat app using toggle button", async () => {
-      const fetchSpy = vi.spyOn(window, "fetch");
-      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
-      app = (0, _index.createChat)();
-      expect((0, _utils.getMountingTarget)()).toBeVisible();
-      expect((0, _utils.getChatWindowWrapper)()).toBeVisible();
-      const trigger = (0, _utils.getChatWindowToggle)();
-      await _vue.fireEvent.click(trigger);
-      expect((0, _utils.getChatWrapper)()).toBeVisible();
-    });
-  });
-  describe("loadPreviousMessages", () => {
-    it("should load previous messages on mount", async () => {
-      const fetchSpy = vi.spyOn(global, "fetch");
-      fetchSpy.mockImplementation((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
-      app = (0, _index.createChat)({
-        mode: "fullscreen",
-        showWelcomeScreen: true
-      });
-      const getStartedButton = (0, _utils.getGetStartedButton)();
-      await _vue.fireEvent.click(getStartedButton);
-      expect(fetchSpy.mock.calls[0][1]).toEqual(expect.objectContaining({
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: expect.stringContaining('"action":"loadPreviousSession"'),
-        mode: "cors",
-        cache: "no-cache"
-      }));
-    });
-  });
-  describe("initialMessages", () => {
-    it.each(["fullscreen", "window"])("should show initial default messages in %s mode", async mode => {
-      const fetchSpy = vi.spyOn(window, "fetch");
-      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
-      const initialMessages = ["Hello tester!", "How are you?"];
-      app = (0, _index.createChat)({
-        mode,
-        initialMessages
-      });
-      if (mode === "window") {
-        const trigger = (0, _utils.getChatWindowToggle)();
-        await _vue.fireEvent.click(trigger);
-      }
-      expect((0, _utils.getChatMessages)().length).toBe(initialMessages.length);
-      expect((0, _utils.getChatMessageByText)(initialMessages[0])).toBeInTheDocument();
-      expect((0, _utils.getChatMessageByText)(initialMessages[1])).toBeInTheDocument();
-    });
-  });
-  describe("sendMessage", () => {
-    it.each(["window", "fullscreen"])("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((0, _utils.createFetchResponse)(_utils.createGetLatestMessagesResponse)).mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createSendMessageResponse)(output)));
-      app = (0, _index.createChat)({
-        mode
-      });
-      if (mode === "window") {
-        const trigger = (0, _utils.getChatWindowToggle)();
-        await _vue.fireEvent.click(trigger);
-      }
-      expect((0, _utils.getChatMessageTyping)()).not.toBeInTheDocument();
-      expect((0, _utils.getChatMessages)().length).toBe(2);
-      await (0, _vue.waitFor)(() => expect((0, _utils.getChatInputTextarea)()).toBeInTheDocument());
-      const textarea = (0, _utils.getChatInputTextarea)();
-      const sendButton = (0, _utils.getChatInputSendButton)();
-      await _vue.fireEvent.update(textarea, input);
-      expect(sendButton).not.toBeDisabled();
-      await _vue.fireEvent.click(sendButton);
-      expect(fetchSpy.mock.calls[1][1]).toEqual(expect.objectContaining({
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: expect.stringMatching(/"action":"sendMessage"/),
-        mode: "cors",
-        cache: "no-cache"
-      }));
-      expect(fetchSpy.mock.calls[1][1]?.body).toContain(`"${input}"`);
-      expect((0, _utils.getChatMessages)().length).toBe(3);
-      expect((0, _utils.getChatMessageByText)(input)).toBeInTheDocument();
-      expect((0, _utils.getChatMessageTyping)()).toBeVisible();
-      await (0, _vue.waitFor)(() => expect((0, _utils.getChatMessageTyping)()).not.toBeInTheDocument());
-      expect((0, _utils.getChatMessageByText)(output)).toBeInTheDocument();
-    });
-    it.each(["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((0, _utils.createFetchResponse)(_utils.createGetLatestMessagesResponse)).mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createSendMessageResponse)(output)));
-      app = (0, _index.createChat)({
-        mode
-      });
-      if (mode === "window") {
-        const trigger = (0, _utils.getChatWindowToggle)();
-        await _vue.fireEvent.click(trigger);
-      }
-      await (0, _vue.waitFor)(() => expect((0, _utils.getChatInputTextarea)()).toBeInTheDocument());
-      const textarea = (0, _utils.getChatInputTextarea)();
-      const sendButton = (0, _utils.getChatInputSendButton)();
-      await _vue.fireEvent.update(textarea, input);
-      await _vue.fireEvent.click(sendButton);
-      expect((0, _utils.getChatMessageByText)(input)).toBeInTheDocument();
-      expect((0, _utils.getChatMessages)().length).toBe(3);
-      await (0, _vue.waitFor)(() => expect((0, _utils.getChatMessageTyping)()).not.toBeInTheDocument());
-      const lastMessage = (0, _utils.getChatMessage)(-1);
-      expect(lastMessage).toBeInTheDocument();
-      expect(lastMessage.querySelector("h1")).toHaveTextContent("Code");
-      expect(lastMessage.querySelector("code")).toHaveTextContent('console.log("Hello World!");');
-    });
-  });
-});