@n8n/chat 0.6.0 → 0.6.1

package/src/components/Layout.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { chatEventBus } from '@/event-buses';
-
-const chatBodyRef = ref<HTMLElement | null>(null);
-
-function scrollToBottom() {
-	const element = chatBodyRef.value as HTMLElement;
-	if (element) {
-		element.scrollTop = element.scrollHeight;
-	}
-}
-
-onMounted(() => {
-	chatEventBus.on('scrollToBottom', scrollToBottom);
-	window.addEventListener('resize', scrollToBottom);
-});
-
-onBeforeUnmount(() => {
-	chatEventBus.off('scrollToBottom', scrollToBottom);
-	window.removeEventListener('resize', scrollToBottom);
-});
-</script>
-<template>
-	<main class="chat-layout">
-		<div v-if="$slots.header" class="chat-header">
-			<slot name="header" />
-		</div>
-		<div v-if="$slots.default" class="chat-body" ref="chatBodyRef">
-			<slot />
-		</div>
-		<div v-if="$slots.footer" class="chat-footer">
-			<slot name="footer" />
-		</div>
-	</main>
-</template>
-
-<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-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/src/components/Message.vue

@@ -1,97 +0,0 @@
-<script lang="ts" setup>
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { ChatMessage } from '@/types';
-import type { PropType } from 'vue';
-import { computed, toRefs } from 'vue';
-import VueMarkdown from 'vue-markdown-render';
-import hljs from 'highlight.js/lib/core';
-
-const props = defineProps({
-	message: {
-		type: Object as PropType<ChatMessage>,
-		required: true,
-	},
-});
-
-const { message } = toRefs(props);
-
-const classes = computed(() => {
-	return {
-		'chat-message-from-user': message.value.sender === 'user',
-		'chat-message-from-bot': message.value.sender === 'bot',
-	};
-});
-
-const markdownOptions = {
-	highlight(str: string, lang: string) {
-		if (lang && hljs.getLanguage(lang)) {
-			try {
-				return hljs.highlight(str, { language: lang }).value;
-			} catch {}
-		}
-
-		return ''; // use external default escaping
-	},
-};
-</script>
-<template>
-	<div class="chat-message" :class="classes">
-		<slot>
-			<vue-markdown
-				class="chat-message-markdown"
-				:source="message.text"
-				:options="markdownOptions"
-			/>
-		</slot>
-	</div>
-</template>
-
-<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 {
-		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

@@ -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/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/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/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);
-	}
-}