@n8n/chat 0.3.0 → 0.4.1

package/src/components/MessageTyping.vue

@@ -1,109 +0,0 @@
-<script lang="ts" setup>
-import type { ChatMessage } from '@/types';
-import { Message } from './index';
-import type { PropType } from 'vue';
-import { computed } from 'vue';
-
-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/src/components/MessagesList.vue

@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-import Message from '@/components/Message.vue';
-import type { ChatMessage } from '@/types';
-import MessageTyping from '@/components/MessageTyping.vue';
-import { useChat } from '@/composables';
-
-defineProps({
-	messages: {
-		type: Array as PropType<ChatMessage[]>,
-		required: true,
-	},
-});
-
-const chatStore = useChat();
-
-const { initialMessages, waitingForResponse } = chatStore;
-</script>
-<template>
-	<div class="chat-messages-list">
-		<Message
-			v-for="initialMessage in initialMessages"
-			:key="initialMessage.id"
-			:message="initialMessage"
-		/>
-		<Message v-for="message in messages" :key="message.id" :message="message" />
-		<MessageTyping v-if="waitingForResponse" />
-	</div>
-</template>
-
-<style lang="scss">
-.chat-messages-list {
-	margin-top: auto;
-	display: block;
-	padding: var(--chat--messages-list--padding, var(--chat--spacing));
-}
-</style>

package/src/components/PoweredBy.vue

@@ -1,17 +0,0 @@
-<template>
-	<div class="chat-powered-by">
-		Powered by
-		<a href="https://n8n.io?utm_source=n8n-external&utm_medium=widget-powered-by">n8n</a>
-	</div>
-</template>
-
-<style lang="scss">
-.chat-powered-by {
-	text-align: center;
-
-	a {
-		color: var(--chat--color-primary);
-		text-decoration: none;
-	}
-}
-</style>

package/src/composables/useChat.ts

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

package/src/composables/useI18n.ts

@@ -1,16 +0,0 @@
-import { useOptions } from '@/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

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

package/src/constants/defaults.ts

@@ -1,25 +0,0 @@
-import type { ChatOptions } from '@/types';
-
-export const defaultOptions: ChatOptions = {
-	webhookUrl: 'http://localhost:5678',
-	webhookConfig: {
-		method: 'POST',
-		headers: {},
-	},
-	target: '#n8n-chat',
-	mode: 'window',
-	defaultLanguage: 'en',
-	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/src/constants/localStorage.ts

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

package/src/constants/symbols.ts

@@ -1,8 +0,0 @@
-import type { InjectionKey } from 'vue';
-import type { Chat, ChatOptions } from '@/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/event-buses/chatEventBus.ts

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

package/src/index.ts

@@ -1,42 +0,0 @@
-import './main.scss';
-
-import { createApp } from 'vue';
-import App from './App.vue';
-import type { ChatOptions } from '@/types';
-import { defaultMountingTarget, defaultOptions } from '@/constants';
-import { createDefaultMountingTarget } from '@/utils';
-import { ChatPlugin } from '@/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

@@ -1,40 +0,0 @@
-.n8n-chat {
-	@import 'highlight.js/styles/github';
-}
-
-: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/plugins/chat.ts

@@ -1,101 +0,0 @@
-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

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

package/src/types/chat.ts

@@ -1,12 +0,0 @@
-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

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

package/src/types/options.ts

@@ -1,23 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,51 +0,0 @@
-// 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

@@ -1,16 +0,0 @@
-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

@@ -1,27 +0,0 @@
-{
-	"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

@@ -1,51 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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$/],
-			},
-		},
-	}),
-);