@n8n/chat 0.1.5 → 0.3.0

package/src/components/Input.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+// eslint-disable-next-line import/no-unresolved
+import IconSend from 'virtual:icons/mdi/send';
+import { useI18n, useChat } from '@/composables';
+import { computed, ref } from 'vue';
+
+const chatStore = useChat();
+const { waitingForResponse } = chatStore;
+const { t } = useI18n();
+
+const input = ref('');
+
+const isSubmitDisabled = computed(() => {
+	return input.value === '' || waitingForResponse.value;
+});
+
+async function onSubmit(event: MouseEvent | KeyboardEvent) {
+	event.preventDefault();
+
+	if (isSubmitDisabled.value) {
+		return;
+	}
+
+	const messageText = input.value;
+	input.value = '';
+	await chatStore.sendMessage(messageText);
+}
+
+async function onSubmitKeydown(event: KeyboardEvent) {
+	if (event.shiftKey) {
+		return;
+	}
+
+	await onSubmit(event);
+}
+</script>
+
+<template>
+	<div class="chat-input">
+		<textarea
+			v-model="input"
+			rows="1"
+			:placeholder="t('inputPlaceholder')"
+			@keydown.enter="onSubmitKeydown"
+		/>
+		<button :disabled="isSubmitDisabled" class="chat-input-send-button" @click="onSubmit">
+			<IconSend height="32" width="32" />
+		</button>
+	</div>
+</template>
+
+<style lang="scss">
+.chat-input {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+
+	textarea {
+		font-family: inherit;
+		font-size: inherit;
+		width: 100%;
+		border: 0;
+		padding: var(--chat--spacing);
+		max-height: var(--chat--textarea--height);
+		resize: none;
+	}
+
+	.chat-input-send-button {
+		height: var(--chat--textarea--height);
+		width: var(--chat--textarea--height);
+		background: white;
+		cursor: pointer;
+		color: var(--chat--color-secondary);
+		border: 0;
+		font-size: 24px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		transition: color var(--chat--transition-duration) ease;
+
+		&:hover,
+		&:focus {
+			color: var(--chat--color-secondary-shade-50);
+		}
+
+		&[disabled] {
+			cursor: default;
+			color: var(--chat--color-disabled);
+		}
+	}
+}
+</style>

package/src/components/Layout.vue

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

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

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

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

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

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

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

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

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

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

package/src/constants/symbols.ts

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

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

package/src/index.ts

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

@@ -0,0 +1,40 @@
+.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;
+}