@n8n/chat 0.6.0 → 0.7.0

package/resources/workflow.json

@@ -1,245 +1,77 @@
 {
-	"name": "AI Webhook Chat",
+	"name": "Hosted n8n AI Chat",
 	"nodes": [
-		{
-			"parameters": {
-				"httpMethod": "POST",
-				"path": "513107b3-6f3a-4a1e-af21-659f0ed14183",
-				"responseMode": "responseNode",
-				"options": {
-					"domainAllowlist": "*.localhost"
-				}
-			},
-			"id": "51ab2689-647d-4cff-9d6f-0ba4df45e904",
-			"name": "Webhook",
-			"type": "n8n-nodes-base.webhook",
-			"typeVersion": 1,
-			"position": [
-				900,
-				200
-			],
-			"webhookId": "513107b3-6f3a-4a1e-af21-659f0ed14183"
-		},
 		{
 			"parameters": {
 				"options": {}
 			},
-			"id": "3c7fd563-f610-41fa-b198-7fcf100e2815",
-			"name": "Chat OpenAI",
+			"id": "4c109d13-62a2-4e23-9979-e50201db743d",
+			"name": "OpenAI Chat Model",
 			"type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
 			"typeVersion": 1,
 			"position": [
-				1720,
-				620
+				640,
+				540
 			],
 			"credentials": {
 				"openAiApi": {
-					"id": "B5Fiv70Adfg6htxn",
-					"name": "Alex's OpenAI Account"
+					"id": "cIIkOhl7tUX1KsL6",
+					"name": "OpenAi account"
 				}
 			}
 		},
 		{
 			"parameters": {
-				"sessionKey": "={{ $json.body.sessionId }}"
+				"sessionKey": "={{ $json.sessionId }}"
 			},
-			"id": "ebc23ffa-3bcf-494f-bcb8-51a5fff91885",
+			"id": "b416df7b-4802-462f-8f74-f0a71dc4c0be",
 			"name": "Window Buffer Memory",
 			"type": "@n8n/n8n-nodes-langchain.memoryBufferWindow",
 			"typeVersion": 1,
 			"position": [
-				1920,
-				620
-			]
-		},
-		{
-			"parameters": {
-				"simplifyOutput": false
-			},
-			"id": "d6721a60-159b-4a93-ac6b-b81e16d9f16f",
-			"name": "Memory Chat Retriever",
-			"type": "@n8n/n8n-nodes-langchain.memoryChatRetriever",
-			"typeVersion": 1,
-			"position": [
-				1780,
-				-40
+				340,
+				540
 			]
 		},
 		{
 			"parameters": {
-				"sessionKey": "={{ $json.body.sessionId }}"
+				"text": "={{ $json.chatInput }}",
+				"options": {}
 			},
-			"id": "347edc3a-1dda-4996-b778-dcdc447ecfd8",
-			"name": "Memory Chat Retriever Window Buffer Memory",
-			"type": "@n8n/n8n-nodes-langchain.memoryBufferWindow",
-			"typeVersion": 1,
+			"id": "4de25807-a2ef-4453-900e-e00e0021ecdc",
+			"name": "AI Agent",
+			"type": "@n8n/n8n-nodes-langchain.agent",
+			"typeVersion": 1.1,
 			"position": [
-				1800,
-				160
+				620,
+				300
 			]
 		},
 		{
 			"parameters": {
+				"public": true,
 				"options": {
-					"responseCode": 200,
-					"responseHeaders": {
-						"entries": [
-							{
-								"name": "sessionId",
-								"value": "={{ $json.body.sessionId }}"
-							},
-							{
-								"name": "Access-Control-Allow-Headers",
-								"value": "*"
-							}
-						]
-					}
+					"loadPreviousSession": "memory"
 				}
 			},
-			"id": "d229963e-e2f1-4381-87d2-47043bd6ccc7",
-			"name": "Respond to Webhook",
-			"type": "n8n-nodes-base.respondToWebhook",
+			"id": "5a9612ae-51c1-4be2-bd8b-8556872d1149",
+			"name": "Chat Trigger",
+			"type": "@n8n/n8n-nodes-langchain.chatTrigger",
 			"typeVersion": 1,
 			"position": [
-				2460,
-				220
-			]
-		},
-		{
-			"parameters": {
-				"dataType": "string",
-				"value1": "={{ $json.body.action }}",
-				"rules": {
-					"rules": [
-						{
-							"value2": "loadPreviousSession"
-						},
-						{
-							"value2": "sendMessage",
-							"output": 1
-						}
-					]
-				}
-			},
-			"id": "fc4ad994-5f38-4dce-b1e5-397acc512687",
-			"name": "Chatbot Action",
-			"type": "n8n-nodes-base.switch",
-			"typeVersion": 1,
-			"position": [
-				1320,
-				200
-			]
-		},
-		{
-			"parameters": {
-				"jsCode": "const response = { data: [] };\n\nfor (const item of $input.all()) {\n  response.data.push(item.json);\n}\n\nreturn {\n  json: response,\n  pairedItem: 0\n};"
-			},
-			"id": "e1a80bdc-411a-42df-88dd-36915b1ae8f4",
-			"name": "Code",
-			"type": "n8n-nodes-base.code",
-			"typeVersion": 2,
-			"position": [
-				2160,
-				-40
-			]
-		},
-		{
-			"parameters": {
-				"text": "={{ $json.body.message }}",
-				"options": {}
-			},
-			"id": "f28f5c00-c742-41d5-8ddb-f0f59ab111a3",
-			"name": "Agent",
-			"type": "@n8n/n8n-nodes-langchain.agent",
-			"typeVersion": 1,
-			"position": [
-				1780,
-				340
-			]
-		},
-		{
-			"parameters": {
-				"jsCode": "// Loop over input items and add a new field called 'myNewField' to the JSON of each one\nfor (const item of $input.all()) {\n  item.json.body = JSON.parse(item.json.body);\n}\n\nreturn $input.all();"
-			},
-			"id": "415c071b-18b2-4ac5-8634-e3d939bf36ac",
-			"name": "Transform request body",
-			"type": "n8n-nodes-base.code",
-			"typeVersion": 2,
-			"position": [
-				1120,
-				200
-			]
+				340,
+				300
+			],
+			"webhookId": "f406671e-c954-4691-b39a-66c90aa2f103"
 		}
 	],
 	"pinData": {},
 	"connections": {
-		"Webhook": {
-			"main": [
-				[
-					{
-						"node": "Transform request body",
-						"type": "main",
-						"index": 0
-					}
-				]
-			]
-		},
-		"Memory Chat Retriever": {
-			"main": [
-				[
-					{
-						"node": "Code",
-						"type": "main",
-						"index": 0
-					}
-				]
-			]
-		},
-		"Memory Chat Retriever Window Buffer Memory": {
-			"ai_memory": [
-				[
-					{
-						"node": "Memory Chat Retriever",
-						"type": "ai_memory",
-						"index": 0
-					}
-				]
-			]
-		},
-		"Chatbot Action": {
-			"main": [
-				[
-					{
-						"node": "Memory Chat Retriever",
-						"type": "main",
-						"index": 0
-					}
-				],
-				[
-					{
-						"node": "Agent",
-						"type": "main",
-						"index": 0
-					}
-				]
-			]
-		},
-		"Code": {
-			"main": [
-				[
-					{
-						"node": "Respond to Webhook",
-						"type": "main",
-						"index": 0
-					}
-				]
-			]
-		},
-		"Chat OpenAI": {
+		"OpenAI Chat Model": {
 			"ai_languageModel": [
 				[
 					{
-						"node": "Agent",
+						"node": "AI Agent",
 						"type": "ai_languageModel",
 						"index": 0
 					}
@@ -250,29 +82,23 @@
 			"ai_memory": [
 				[
 					{
-						"node": "Agent",
+						"node": "AI Agent",
 						"type": "ai_memory",
 						"index": 0
-					}
-				]
-			]
-		},
-		"Agent": {
-			"main": [
-				[
+					},
 					{
-						"node": "Respond to Webhook",
-						"type": "main",
+						"node": "Chat Trigger",
+						"type": "ai_memory",
 						"index": 0
 					}
 				]
 			]
 		},
-		"Transform request body": {
+		"Chat Trigger": {
 			"main": [
 				[
 					{
-						"node": "Chatbot Action",
+						"node": "AI Agent",
 						"type": "main",
 						"index": 0
 					}
@@ -284,8 +110,8 @@
 	"settings": {
 		"executionOrder": "v1"
 	},
-	"versionId": "12c145a2-74bf-48b5-a87a-ba707949eaed",
-	"id": "L3FlJuFOxZcHtoFT",
+	"versionId": "6076136f-fdb4-48d9-b483-d1c24c95ef9e",
+	"id": "zaBHnDtj22BzEQ6K",
 	"meta": {
 		"instanceId": "374b43d8b8d6299cc777811a4ad220fc688ee2d54a308cfb0de4450a5233ca9e"
 	},

package/scripts/postbuild.js

@@ -1,9 +1,13 @@
 const path = require('path');
 const shelljs = require('shelljs');
+const glob = require('fast-glob');
 
 const rootDirPath = path.resolve(__dirname, '..');
 const n8nRootDirPath = path.resolve(rootDirPath, '..', '..', '..');
 const distDirPath = path.resolve(rootDirPath, 'dist');
+const srcDirPath = path.resolve(rootDirPath, 'src');
+const libDirPath = path.resolve(rootDirPath, 'tmp', 'lib');
+const cjsDirPath = path.resolve(rootDirPath, 'tmp', 'cjs');
 
 const packageJsonFilePath = path.resolve(rootDirPath, 'package.json');
 const readmeFilePath = path.resolve(rootDirPath, 'README.md');
@@ -14,3 +18,19 @@ shelljs.cp(readmeFilePath, distDirPath);
 shelljs.cp(licenseFilePath, distDirPath);
 
 shelljs.mv(path.resolve(distDirPath, 'src'), path.resolve(distDirPath, 'types'));
+
+function moveFiles(files, from, to) {
+	files.forEach((file) => {
+		const toFile = file.replace(from, to);
+		shelljs.mkdir('-p', path.dirname(toFile));
+		shelljs.mv(file, toFile);
+	});
+}
+
+const cjsFiles = glob.sync(path.resolve(cjsDirPath, '**', '*'));
+moveFiles(cjsFiles, 'tmp/cjs', 'dist');
+shelljs.rm('-rf', cjsDirPath);
+
+const libFiles = glob.sync(path.resolve(libDirPath, '**/*'));
+moveFiles(libFiles, 'tmp/lib', 'dist');
+shelljs.rm('-rf', libDirPath);

package/src/App.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { Chat, ChatWindow } from '@/components';
 import { computed, onMounted } from 'vue';
 import hljs from 'highlight.js/lib/core';
 import hljsXML from 'highlight.js/lib/languages/xml';
 import hljsJavascript from 'highlight.js/lib/languages/javascript';
-import { useOptions } from '@/composables';
+import { Chat, ChatWindow } from '@n8n/chat/components';
+import { useOptions } from '@n8n/chat/composables';
 
 defineProps({});
 

package/src/__stories__/App.stories.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { StoryObj } from '@storybook/vue3';
-import type { ChatOptions } from '@/types';
-import { createChat } from '@/index';
 import { onMounted } from 'vue';
+import type { ChatOptions } from '@n8n/chat/types';
+import { createChat } from '@n8n/chat/index';
 
-const webhookUrl = 'http://localhost:5678/webhook/513107b3-6f3a-4a1e-af21-659f0ed14183';
+const webhookUrl = 'http://localhost:5678/webhook/f406671e-c954-4691-b39a-66c90aa2f103/chat';
 
 const meta = {
 	title: 'Chat',

package/src/__tests__/index.spec.ts

@@ -14,9 +14,8 @@ import {
 	getChatWrapper,
 	getGetStartedButton,
 	getMountingTarget,
-} from '@/__tests__/utils';
-import { createChat } from '@/index';
-import { useChat } from '@/composables';
+} from '@n8n/chat/__tests__/utils';
+import { createChat } from '@n8n/chat/index';
 
 describe('createChat()', () => {
 	let app: ReturnType<typeof createChat>;
@@ -77,6 +76,7 @@ describe('createChat()', () => {
 
 			app = createChat({
 				mode: 'fullscreen',
+				showWelcomeScreen: true,
 			});
 
 			const getStartedButton = getGetStartedButton();
@@ -85,7 +85,9 @@ describe('createChat()', () => {
 			expect(fetchSpy.mock.calls[0][1]).toEqual(
 				expect.objectContaining({
 					method: 'POST',
-					headers: {},
+					headers: {
+						'Content-Type': 'application/json',
+					},
 					body: expect.stringContaining('"action":"loadPreviousSession"') as unknown,
 					mode: 'cors',
 					cache: 'no-cache',
@@ -112,9 +114,6 @@ describe('createChat()', () => {
 					await fireEvent.click(trigger as HTMLElement);
 				}
 
-				const getStartedButton = getGetStartedButton();
-				await fireEvent.click(getStartedButton as HTMLElement);
-
 				expect(getChatMessages().length).toBe(initialMessages.length);
 				expect(getChatMessageByText(initialMessages[0])).toBeInTheDocument();
 				expect(getChatMessageByText(initialMessages[1])).toBeInTheDocument();
@@ -144,12 +143,10 @@ describe('createChat()', () => {
 				}
 
 				expect(getChatMessageTyping()).not.toBeInTheDocument();
-
-				const getStartedButton = getGetStartedButton();
-				await fireEvent.click(getStartedButton as HTMLElement);
-
 				expect(getChatMessages().length).toBe(2);
 
+				await waitFor(() => expect(getChatInputTextarea()).toBeInTheDocument());
+
 				const textarea = getChatInputTextarea();
 				const sendButton = getChatInputSendButton();
 				await fireEvent.update(textarea as HTMLElement, input);
@@ -159,7 +156,9 @@ describe('createChat()', () => {
 				expect(fetchSpy.mock.calls[1][1]).toEqual(
 					expect.objectContaining({
 						method: 'POST',
-						headers: {},
+						headers: {
+							'Content-Type': 'application/json',
+						},
 						body: expect.stringMatching(/"action":"sendMessage"/) as unknown,
 						mode: 'cors',
 						cache: 'no-cache',
@@ -182,9 +181,6 @@ describe('createChat()', () => {
 				const input = 'Teach me javascript!';
 				const output = '# Code\n```js\nconsole.log("Hello World!");\n```';
 
-				const chatStore = useChat();
-				console.log(chatStore);
-
 				const fetchSpy = vi.spyOn(window, 'fetch');
 				fetchSpy
 					.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse))
@@ -199,8 +195,7 @@ describe('createChat()', () => {
 					await fireEvent.click(trigger as HTMLElement);
 				}
 
-				const getStartedButton = getGetStartedButton();
-				await fireEvent.click(getStartedButton as HTMLElement);
+				await waitFor(() => expect(getChatInputTextarea()).toBeInTheDocument());
 
 				const textarea = getChatInputTextarea();
 				const sendButton = getChatInputSendButton();

package/src/__tests__/utils/create.ts

@@ -1,4 +1,4 @@
-import { createChat } from '@/index';
+import { createChat } from '@n8n/chat/index';
 
 export function createTestChat(options: Parameters<typeof createChat>[0] = {}): {
 	unmount: () => void;

package/src/__tests__/utils/fetch.ts

@@ -1,4 +1,4 @@
-import type { LoadPreviousSessionResponse, SendMessageResponse } from '@/types';
+import type { LoadPreviousSessionResponse, SendMessageResponse } from '@n8n/chat/types';
 
 export function createFetchResponse<T>(data: T) {
 	return async () =>

package/src/__tests__/utils/selectors.ts

@@ -1,5 +1,5 @@
 import { screen } from '@testing-library/vue';
-import { defaultMountingTarget } from '@/constants';
+import { defaultMountingTarget } from '@n8n/chat/constants';
 
 export function getMountingTarget(target = defaultMountingTarget) {
 	return document.querySelector(target);

package/src/api/generic.ts

@@ -10,6 +10,7 @@ export async function authenticatedFetch<T>(...args: Parameters<typeof fetch>):
 		mode: 'cors',
 		cache: 'no-cache',
 		headers: {
+			'Content-Type': 'application/json',
 			...(accessToken ? { authorization: `Bearer ${accessToken}` } : {}),
 			...args[1]?.headers,
 		},
@@ -18,14 +19,12 @@ export async function authenticatedFetch<T>(...args: Parameters<typeof fetch>):
 	return (await response.json()) as Promise<T>;
 }
 
-export async function get<T>(
-	url: string,
-	query: Record<string, string> = {},
-	options: RequestInit = {},
-) {
+export async function get<T>(url: string, query: object = {}, options: RequestInit = {}) {
 	let resolvedUrl = url;
 	if (Object.keys(query).length > 0) {
-		resolvedUrl = `${resolvedUrl}?${new URLSearchParams(query).toString()}`;
+		resolvedUrl = `${resolvedUrl}?${new URLSearchParams(
+			query as Record<string, string>,
+		).toString()}`;
 	}
 
 	return authenticatedFetch<T>(resolvedUrl, { ...options, method: 'GET' });

package/src/api/message.ts

@@ -1,5 +1,9 @@
-import { get, post } from '@/api/generic';
-import type { ChatOptions, LoadPreviousSessionResponse, SendMessageResponse } from '@/types';
+import { get, post } from '@n8n/chat/api/generic';
+import type {
+	ChatOptions,
+	LoadPreviousSessionResponse,
+	SendMessageResponse,
+} from '@n8n/chat/types';
 
 export async function loadPreviousSession(sessionId: string, options: ChatOptions) {
 	const method = options.webhookConfig?.method === 'POST' ? post : get;
@@ -7,7 +11,8 @@ export async function loadPreviousSession(sessionId: string, options: ChatOption
 		`${options.webhookUrl}`,
 		{
 			action: 'loadPreviousSession',
-			sessionId,
+			[options.chatSessionKey as string]: sessionId,
+			...(options.metadata ? { metadata: options.metadata } : {}),
 		},
 		{
 			headers: options.webhookConfig?.headers,
@@ -21,8 +26,9 @@ export async function sendMessage(message: string, sessionId: string, options: C
 		`${options.webhookUrl}`,
 		{
 			action: 'sendMessage',
-			sessionId,
-			message,
+			[options.chatSessionKey as string]: sessionId,
+			[options.chatInputKey as string]: message,
+			...(options.metadata ? { metadata: options.metadata } : {}),
 		},
 		{
 			headers: options.webhookConfig?.headers,

package/src/components/Chat.vue

@@ -1,44 +1,48 @@
 <script setup lang="ts">
-import Layout from '@/components/Layout.vue';
-import GetStarted from '@/components/GetStarted.vue';
-import GetStartedFooter from '@/components/GetStartedFooter.vue';
-import MessagesList from '@/components/MessagesList.vue';
-import Input from '@/components/Input.vue';
 import { nextTick, onMounted } from 'vue';
-import { useI18n, useChat } from '@/composables';
-import { chatEventBus } from '@/event-buses';
+import Layout from '@n8n/chat/components/Layout.vue';
+import GetStarted from '@n8n/chat/components/GetStarted.vue';
+import GetStartedFooter from '@n8n/chat/components/GetStartedFooter.vue';
+import MessagesList from '@n8n/chat/components/MessagesList.vue';
+import Input from '@n8n/chat/components/Input.vue';
+import { useI18n, useChat, useOptions } from '@n8n/chat/composables';
+import { chatEventBus } from '@n8n/chat/event-buses';
 
 const { t } = useI18n();
 const chatStore = useChat();
 
 const { messages, currentSessionId } = chatStore;
+const { options } = useOptions();
 
-async function initialize() {
-	await chatStore.loadPreviousSession();
+async function getStarted() {
+	void chatStore.startNewSession();
 	void nextTick(() => {
 		chatEventBus.emit('scrollToBottom');
 	});
 }
 
-async function getStarted() {
-	void chatStore.startNewSession();
+async function initialize() {
+	await chatStore.loadPreviousSession();
 	void nextTick(() => {
 		chatEventBus.emit('scrollToBottom');
 	});
 }
 
-onMounted(() => {
-	void initialize();
+onMounted(async () => {
+	await initialize();
+	if (!options.showWelcomeScreen && !currentSessionId.value) {
+		await getStarted();
+	}
 });
 </script>
 
 <template>
 	<Layout class="chat-wrapper">
-		<template #header v-if="!currentSessionId">
+		<template #header>
 			<h1>{{ t('title') }}</h1>
 			<p>{{ t('subtitle') }}</p>
 		</template>
-		<GetStarted v-if="!currentSessionId" @click:button="getStarted" />
+		<GetStarted v-if="!currentSessionId && options.showWelcomeScreen" @click:button="getStarted" />
 		<MessagesList v-else :messages="messages" />
 		<template #footer>
 			<Input v-if="currentSessionId" />

package/src/components/ChatWindow.vue

@@ -3,9 +3,9 @@
 import IconChat from 'virtual:icons/mdi/chat';
 // eslint-disable-next-line import/no-unresolved
 import IconChevronDown from 'virtual:icons/mdi/chevron-down';
-import Chat from '@/components/Chat.vue';
 import { nextTick, ref } from 'vue';
-import { chatEventBus } from '@/event-buses';
+import Chat from '@n8n/chat/components/Chat.vue';
+import { chatEventBus } from '@n8n/chat/event-buses';
 
 const isOpen = ref(false);
 
@@ -23,7 +23,7 @@ function toggle() {
 <template>
 	<div class="chat-window-wrapper">
 		<Transition name="chat-window-transition">
-			<div class="chat-window" v-show="isOpen">
+			<div v-show="isOpen" class="chat-window">
 				<Chat />
 			</div>
 		</Transition>

package/src/components/GetStarted.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Button from '@/components/Button.vue';
-import { useI18n } from '@/composables';
+import Button from '@n8n/chat/components/Button.vue';
+import { useI18n } from '@n8n/chat/composables';
 
 const { t } = useI18n();
 </script>

package/src/components/GetStartedFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useI18n } from '@/composables';
-import PoweredBy from '@/components/PoweredBy.vue';
+import { useI18n } from '@n8n/chat/composables';
+import PoweredBy from '@n8n/chat/components/PoweredBy.vue';
 
 const { t, te } = useI18n();
 </script>

package/src/components/Input.vue

@@ -1,8 +1,8 @@
 <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';
+import { useI18n, useChat } from '@n8n/chat/composables';
 
 const chatStore = useChat();
 const { waitingForResponse } = chatStore;