@n8n/chat 0.5.2 → 0.6.0

package/{components → src/components}/Input.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // eslint-disable-next-line import/no-unresolved
 import IconSend from 'virtual:icons/mdi/send';
-import { useI18n, useChat } from '@n8n/chat/composables';
+import { useI18n, useChat } from '@/composables';
 import { computed, ref } from 'vue';
 
 const chatStore = useChat();
@@ -49,40 +49,45 @@ async function onSubmitKeydown(event: KeyboardEvent) {
 	</div>
 </template>
 
-<style>
+<style lang="scss">
 .chat-input {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-.chat-input 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 .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;
-}
-.chat-input .chat-input-send-button:hover, .chat-input .chat-input-send-button:focus {
-  color: var(--chat--color-secondary-shade-50);
-}
-.chat-input .chat-input-send-button[disabled] {
-  cursor: default;
-  color: var(--chat--color-disabled);
+	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/{components → src/components}/MessagesList.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
-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';
+import Message from '@/components/Message.vue';
+import type { ChatMessage } from '@/types';
+import MessageTyping from '@/components/MessageTyping.vue';
+import { useChat } from '@/composables';
 
 defineProps({
 	messages: {
@@ -28,10 +28,10 @@ const { initialMessages, waitingForResponse } = chatStore;
 	</div>
 </template>
 
-<style>
+<style lang="scss">
 .chat-messages-list {
-  margin-top: auto;
-  display: block;
-  padding: var(--chat--messages-list--padding, var(--chat--spacing));
+	margin-top: auto;
+	display: block;
+	padding: var(--chat--messages-list--padding, var(--chat--spacing));
 }
 </style>

package/{components → src/components}/PoweredBy.vue

@@ -5,12 +5,13 @@
 	</div>
 </template>
 
-<style>
+<style lang="scss">
 .chat-powered-by {
-  text-align: center;
-}
-.chat-powered-by a {
-  color: var(--chat--color-primary);
-  text-decoration: none;
+	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/{constants/localStorage.mjs → src/constants/localStorage.ts}

@@ -1,2 +1,2 @@
-export const localStorageNamespace = "n8n-chat";
+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;
+}