@n8n/chat 0.19.0 → 0.19.1

package/src/components/MessageTyping.vue

@@ -1,110 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { Message } from './index';
-import type { ChatMessage } from '@n8n/chat/types';
-
-const props = withDefaults(
-	defineProps<{
-		animation?: 'bouncing' | 'scaling';
-	}>(),
-	{
-		animation: '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,33 +0,0 @@
-<script lang="ts" setup>
-import Message from '@n8n/chat/components/Message.vue';
-import type { ChatMessage } from '@n8n/chat/types';
-import MessageTyping from '@n8n/chat/components/MessageTyping.vue';
-import { useChat } from '@n8n/chat/composables';
-
-defineProps<{
-	messages: ChatMessage[];
-}>();
-
-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 '@n8n/chat/constants';
-import type { Chat } from '@n8n/chat/types';
-
-export function useChat() {
-	return inject(ChatSymbol) as Chat;
-}

package/src/composables/useI18n.ts

@@ -1,21 +0,0 @@
-import { isRef } from 'vue';
-import { useOptions } from '@n8n/chat/composables/useOptions';
-
-export function useI18n() {
-	const { options } = useOptions();
-	const language = options?.defaultLanguage ?? 'en';
-
-	function t(key: string): string {
-		const val = options?.i18n?.[language]?.[key];
-		if (isRef(val)) {
-			return val.value as string;
-		}
-		return val ?? 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 '@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

@@ -1,30 +0,0 @@
-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..',
-			closeButtonTooltip: 'Close chat',
-		},
-	},
-	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 '@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

@@ -1,38 +0,0 @@
-: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;
-
-	--chat--heading--font-size: 2em;
-}

package/src/css/index.scss

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

package/src/event-buses/chatEventBus.ts

@@ -1,3 +0,0 @@
-import { createEventBus } from '@n8n/chat/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 '@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

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

package/src/plugins/chat.ts

@@ -1,115 +0,0 @@
-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/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 { 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/icons.d.ts

@@ -1,5 +0,0 @@
-declare module 'virtual:icons/*' {
-	import { FunctionalComponent, SVGAttributes } from 'vue';
-	const component: FunctionalComponent<SVGAttributes>;
-	export default component;
-}

package/src/types/options.ts

@@ -1,33 +0,0 @@
-import type { Component, Ref } from 'vue';
-export interface ChatOptions {
-	webhookUrl: string;
-	webhookConfig?: {
-		method?: 'GET' | 'POST';
-		headers?: Record<string, string>;
-	};
-	target?: string | Element;
-	mode?: 'window' | 'fullscreen';
-	showWindowCloseButton?: boolean;
-	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;
-			closeButtonTooltip: string;
-			[message: string]: string;
-		}
-	>;
-	theme?: {};
-	messageComponents?: Record<string, Component>;
-	disabled?: Ref<boolean>;
-}

package/src/types/webhook.ts

@@ -1,18 +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;
-	text?: 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,24 +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/chat/*": ["src/*"]
-		},
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
-		// TODO: remove all options below this line
-		"useUnknownInCatchVariables": false
-	},
-	"include": ["src/**/*.ts", "src/**/*.vue", "**/*.d.ts"]
-}