@n8n/chat 0.6.0 → 0.7.0

package/src/components/Layout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { chatEventBus } from '@/event-buses';
+import { chatEventBus } from '@n8n/chat/event-buses';
 
 const chatBodyRef = ref<HTMLElement | null>(null);
 
@@ -26,7 +26,7 @@ onBeforeUnmount(() => {
 		<div v-if="$slots.header" class="chat-header">
 			<slot name="header" />
 		</div>
-		<div v-if="$slots.default" class="chat-body" ref="chatBodyRef">
+		<div v-if="$slots.default" ref="chatBodyRef" class="chat-body">
 			<slot />
 		</div>
 		<div v-if="$slots.footer" class="chat-footer">

package/src/components/Message.vue

@@ -1,10 +1,10 @@
 <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';
+import type { ChatMessage } from '@n8n/chat/types';
 
 const props = defineProps({
 	message: {
@@ -15,6 +15,10 @@ const props = defineProps({
 
 const { message } = toRefs(props);
 
+const messageText = computed(() => {
+	return message.value.text || '&lt;Empty response&gt;';
+});
+
 const classes = computed(() => {
 	return {
 		'chat-message-from-user': message.value.sender === 'user',
@@ -37,11 +41,7 @@ const markdownOptions = {
 <template>
 	<div class="chat-message" :class="classes">
 		<slot>
-			<vue-markdown
-				class="chat-message-markdown"
-				:source="message.text"
-				:options="markdownOptions"
-			/>
+			<VueMarkdown class="chat-message-markdown" :source="messageText" :options="markdownOptions" />
 		</slot>
 	</div>
 </template>

package/src/components/MessageTyping.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { ChatMessage } from '@/types';
-import { Message } from './index';
 import type { PropType } from 'vue';
 import { computed } from 'vue';
+import { Message } from './index';
+import type { ChatMessage } from '@n8n/chat/types';
 
 const props = defineProps({
 	animation: {

package/src/components/MessagesList.vue

@@ -1,9 +1,9 @@
 <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';
+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: {

package/src/composables/useChat.ts

@@ -1,6 +1,6 @@
 import { inject } from 'vue';
-import { ChatSymbol } from '@/constants';
-import type { Chat } from '@/types';
+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,4 +1,4 @@
-import { useOptions } from '@/composables/useOptions';
+import { useOptions } from '@n8n/chat/composables/useOptions';
 
 export function useI18n() {
 	const { options } = useOptions();

package/src/composables/useOptions.ts

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

package/src/constants/defaults.ts

@@ -1,4 +1,4 @@
-import type { ChatOptions } from '@/types';
+import type { ChatOptions } from '@n8n/chat/types';
 
 export const defaultOptions: ChatOptions = {
 	webhookUrl: 'http://localhost:5678',
@@ -8,7 +8,11 @@ export const defaultOptions: ChatOptions = {
 	},
 	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: {

package/src/constants/symbols.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue';
-import type { Chat, ChatOptions } from '@/types';
+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>;

package/src/css/_tokens.scss

@@ -0,0 +1,36 @@
+: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/css/index.scss

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

package/src/event-buses/chatEventBus.ts

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

package/src/index.ts

@@ -2,10 +2,10 @@ 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';
+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 = {

package/src/main.scss

@@ -2,39 +2,4 @@
 	@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;
-}
+@import 'css';

package/src/plugins/chat.ts

@@ -1,10 +1,10 @@
 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';
+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> = {
@@ -61,6 +61,10 @@ export const ChatPlugin: Plugin<ChatOptions> = {
 		}
 
 		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();

package/src/types/chat.ts

@@ -1,12 +1,12 @@
-import type { ChatMessage } from '@/types/messages';
 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>;
+	loadPreviousSession: () => Promise<string | undefined>;
 	startNewSession: () => Promise<void>;
 	sendMessage: (text: string) => Promise<void>;
 }

package/src/types/options.ts

@@ -6,8 +6,13 @@ export interface ChatOptions {
 	};
 	target?: string | Element;
 	mode?: 'window' | 'fullscreen';
+	showWelcomeScreen?: boolean;
+	loadPreviousSession?: boolean;
+	chatInputKey?: string;
+	chatSessionKey?: string;
 	defaultLanguage?: 'en';
 	initialMessages?: string[];
+	metadata?: Record<string, unknown>;
 	i18n: Record<
 		string,
 		{

package/tsconfig.json

@@ -14,7 +14,7 @@
 		"types": ["vitest/globals", "unplugin-icons/types/vue"],
 		"paths": {
 			"@/*": ["src/*"],
-			"n8n-design-system/*": ["../design-system/src/*"]
+			"@n8n/chat/*": ["src/*"]
 		},
 		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 		// TODO: remove all options below this line

package/vite.config.ts

@@ -7,6 +7,7 @@ import icons from 'unplugin-icons/vite';
 import dts from 'vite-plugin-dts';
 
 const includeVue = process.env.INCLUDE_VUE === 'true';
+const srcPath = fileURLToPath(new URL('./src', import.meta.url));
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -19,7 +20,8 @@ export default defineConfig({
 	],
 	resolve: {
 		alias: {
-			'@': fileURLToPath(new URL('./src', import.meta.url)),
+			'@': srcPath,
+			'@n8n/chat': srcPath,
 		},
 	},
 	define: {