@n8n/chat 0.3.0 → 0.4.0

package/resources/workflow.json

@@ -1,293 +0,0 @@
-{
-	"name": "AI Webhook 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",
-			"type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
-			"typeVersion": 1,
-			"position": [
-				1720,
-				620
-			],
-			"credentials": {
-				"openAiApi": {
-					"id": "B5Fiv70Adfg6htxn",
-					"name": "Alex's OpenAI Account"
-				}
-			}
-		},
-		{
-			"parameters": {
-				"sessionKey": "={{ $json.body.sessionId }}"
-			},
-			"id": "ebc23ffa-3bcf-494f-bcb8-51a5fff91885",
-			"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
-			]
-		},
-		{
-			"parameters": {
-				"sessionKey": "={{ $json.body.sessionId }}"
-			},
-			"id": "347edc3a-1dda-4996-b778-dcdc447ecfd8",
-			"name": "Memory Chat Retriever Window Buffer Memory",
-			"type": "@n8n/n8n-nodes-langchain.memoryBufferWindow",
-			"typeVersion": 1,
-			"position": [
-				1800,
-				160
-			]
-		},
-		{
-			"parameters": {
-				"options": {
-					"responseCode": 200,
-					"responseHeaders": {
-						"entries": [
-							{
-								"name": "sessionId",
-								"value": "={{ $json.body.sessionId }}"
-							},
-							{
-								"name": "Access-Control-Allow-Headers",
-								"value": "*"
-							}
-						]
-					}
-				}
-			},
-			"id": "d229963e-e2f1-4381-87d2-47043bd6ccc7",
-			"name": "Respond to Webhook",
-			"type": "n8n-nodes-base.respondToWebhook",
-			"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
-			]
-		}
-	],
-	"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": {
-			"ai_languageModel": [
-				[
-					{
-						"node": "Agent",
-						"type": "ai_languageModel",
-						"index": 0
-					}
-				]
-			]
-		},
-		"Window Buffer Memory": {
-			"ai_memory": [
-				[
-					{
-						"node": "Agent",
-						"type": "ai_memory",
-						"index": 0
-					}
-				]
-			]
-		},
-		"Agent": {
-			"main": [
-				[
-					{
-						"node": "Respond to Webhook",
-						"type": "main",
-						"index": 0
-					}
-				]
-			]
-		},
-		"Transform request body": {
-			"main": [
-				[
-					{
-						"node": "Chatbot Action",
-						"type": "main",
-						"index": 0
-					}
-				]
-			]
-		}
-	},
-	"active": true,
-	"settings": {
-		"executionOrder": "v1"
-	},
-	"versionId": "12c145a2-74bf-48b5-a87a-ba707949eaed",
-	"id": "L3FlJuFOxZcHtoFT",
-	"meta": {
-		"instanceId": "374b43d8b8d6299cc777811a4ad220fc688ee2d54a308cfb0de4450a5233ca9e"
-	},
-	"tags": []
-}

package/scripts/pack.js

@@ -1,11 +0,0 @@
-const path = require('path');
-const shelljs = require('shelljs');
-
-const rootDirPath = path.resolve(__dirname, '..');
-const distDirPath = path.resolve(rootDirPath, 'dist');
-
-shelljs.cd(rootDirPath);
-shelljs.exec('npm run build');
-
-shelljs.cd(distDirPath);
-shelljs.exec('npm pack');

package/scripts/postbuild.js

@@ -1,16 +0,0 @@
-const path = require('path');
-const shelljs = require('shelljs');
-
-const rootDirPath = path.resolve(__dirname, '..');
-const n8nRootDirPath = path.resolve(rootDirPath, '..', '..', '..');
-const distDirPath = path.resolve(rootDirPath, 'dist');
-
-const packageJsonFilePath = path.resolve(rootDirPath, 'package.json');
-const readmeFilePath = path.resolve(rootDirPath, 'README.md');
-const licenseFilePath = path.resolve(n8nRootDirPath, 'LICENSE.md');
-
-shelljs.cp(packageJsonFilePath, distDirPath);
-shelljs.cp(readmeFilePath, distDirPath);
-shelljs.cp(licenseFilePath, distDirPath);
-
-shelljs.mv(path.resolve(distDirPath, 'src'), path.resolve(distDirPath, 'types'));

package/src/App.vue

@@ -1,23 +0,0 @@
-<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';
-
-defineProps({});
-
-const { options } = useOptions();
-
-const isFullscreen = computed<boolean>(() => options.mode === 'fullscreen');
-
-onMounted(() => {
-	hljs.registerLanguage('xml', hljsXML);
-	hljs.registerLanguage('javascript', hljsJavascript);
-});
-</script>
-<template>
-	<Chat v-if="isFullscreen" class="n8n-chat" />
-	<ChatWindow v-else class="n8n-chat" />
-</template>

package/src/__stories__/App.stories.ts

@@ -1,43 +0,0 @@
-/* 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';
-
-const webhookUrl = 'http://localhost:5678/webhook/513107b3-6f3a-4a1e-af21-659f0ed14183';
-
-const meta = {
-	title: 'Chat',
-	render: (args: Partial<ChatOptions>) => ({
-		setup() {
-			onMounted(() => {
-				createChat(args);
-			});
-
-			return {};
-		},
-		template: '<div id="n8n-chat" />',
-	}),
-	parameters: {
-		layout: 'fullscreen',
-	},
-	tags: ['autodocs'],
-};
-
-// eslint-disable-next-line import/no-default-export
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Fullscreen: Story = {
-	args: {
-		webhookUrl,
-		mode: 'fullscreen',
-	} satisfies Partial<ChatOptions>,
-};
-
-export const Windowed: Story = {
-	args: {
-		webhookUrl,
-		mode: 'window',
-	} satisfies Partial<ChatOptions>,
-};

package/src/__tests__/index.spec.ts

@@ -1,223 +0,0 @@
-import { fireEvent, waitFor } from '@testing-library/vue';
-import {
-	createFetchResponse,
-	createGetLatestMessagesResponse,
-	createSendMessageResponse,
-	getChatInputSendButton,
-	getChatInputTextarea,
-	getChatMessage,
-	getChatMessageByText,
-	getChatMessages,
-	getChatMessageTyping,
-	getChatWindowToggle,
-	getChatWindowWrapper,
-	getChatWrapper,
-	getGetStartedButton,
-	getMountingTarget,
-} from '@/__tests__/utils';
-import { createChat } from '@/index';
-import { useChat } from '@/composables';
-
-describe('createChat()', () => {
-	let app: ReturnType<typeof createChat>;
-
-	afterEach(() => {
-		vi.clearAllMocks();
-
-		app.unmount();
-	});
-
-	describe('mode', () => {
-		it('should create fullscreen chat app with default options', () => {
-			const fetchSpy = vi.spyOn(window, 'fetch');
-			fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
-
-			app = createChat({
-				mode: 'fullscreen',
-			});
-
-			expect(getMountingTarget()).toBeVisible();
-			expect(getChatWrapper()).toBeVisible();
-			expect(getChatWindowWrapper()).not.toBeInTheDocument();
-		});
-
-		it('should create window chat app with default options', () => {
-			const fetchSpy = vi.spyOn(window, 'fetch');
-			fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
-
-			app = createChat({
-				mode: 'window',
-			});
-
-			expect(getMountingTarget()).toBeDefined();
-			expect(getChatWindowWrapper()).toBeVisible();
-			expect(getChatWrapper()).not.toBeVisible();
-		});
-
-		it('should open window chat app using toggle button', async () => {
-			const fetchSpy = vi.spyOn(window, 'fetch');
-			fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
-
-			app = createChat();
-
-			expect(getMountingTarget()).toBeVisible();
-			expect(getChatWindowWrapper()).toBeVisible();
-
-			const trigger = getChatWindowToggle();
-			await fireEvent.click(trigger as HTMLElement);
-
-			expect(getChatWrapper()).toBeVisible();
-		});
-	});
-
-	describe('loadPreviousMessages', () => {
-		it('should load previous messages on mount', async () => {
-			const fetchSpy = vi.spyOn(global, 'fetch');
-			fetchSpy.mockImplementation(createFetchResponse(createGetLatestMessagesResponse()));
-
-			app = createChat({
-				mode: 'fullscreen',
-			});
-
-			const getStartedButton = getGetStartedButton();
-			await fireEvent.click(getStartedButton as HTMLElement);
-
-			expect(fetchSpy.mock.calls[0][1]).toEqual(
-				expect.objectContaining({
-					method: 'POST',
-					headers: {},
-					body: expect.stringContaining('"action":"loadPreviousSession"') as unknown,
-					mode: 'cors',
-					cache: 'no-cache',
-				}),
-			);
-		});
-	});
-
-	describe('initialMessages', () => {
-		it.each(['fullscreen', 'window'] as Array<'fullscreen' | 'window'>)(
-			'should show initial default messages in %s mode',
-			async (mode) => {
-				const fetchSpy = vi.spyOn(window, 'fetch');
-				fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
-
-				const initialMessages = ['Hello tester!', 'How are you?'];
-				app = createChat({
-					mode,
-					initialMessages,
-				});
-
-				if (mode === 'window') {
-					const trigger = getChatWindowToggle();
-					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();
-			},
-		);
-	});
-
-	describe('sendMessage', () => {
-		it.each(['window', 'fullscreen'] as Array<'fullscreen' | 'window'>)(
-			'should send a message and render a text message in %s mode',
-			async (mode) => {
-				const input = 'Hello User World!';
-				const output = 'Hello Bot World!';
-
-				const fetchSpy = vi.spyOn(window, 'fetch');
-				fetchSpy
-					.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse))
-					.mockImplementationOnce(createFetchResponse(createSendMessageResponse(output)));
-
-				app = createChat({
-					mode,
-				});
-
-				if (mode === 'window') {
-					const trigger = getChatWindowToggle();
-					await fireEvent.click(trigger as HTMLElement);
-				}
-
-				expect(getChatMessageTyping()).not.toBeInTheDocument();
-
-				const getStartedButton = getGetStartedButton();
-				await fireEvent.click(getStartedButton as HTMLElement);
-
-				expect(getChatMessages().length).toBe(2);
-
-				const textarea = getChatInputTextarea();
-				const sendButton = getChatInputSendButton();
-				await fireEvent.update(textarea as HTMLElement, input);
-				expect(sendButton).not.toBeDisabled();
-				await fireEvent.click(sendButton as HTMLElement);
-
-				expect(fetchSpy.mock.calls[1][1]).toEqual(
-					expect.objectContaining({
-						method: 'POST',
-						headers: {},
-						body: expect.stringMatching(/"action":"sendMessage"/) as unknown,
-						mode: 'cors',
-						cache: 'no-cache',
-					}),
-				);
-				expect(fetchSpy.mock.calls[1][1]?.body).toContain(`"${input}"`);
-
-				expect(getChatMessages().length).toBe(3);
-				expect(getChatMessageByText(input)).toBeInTheDocument();
-				expect(getChatMessageTyping()).toBeVisible();
-
-				await waitFor(() => expect(getChatMessageTyping()).not.toBeInTheDocument());
-				expect(getChatMessageByText(output)).toBeInTheDocument();
-			},
-		);
-
-		it.each(['fullscreen', 'window'] as Array<'fullscreen' | 'window'>)(
-			'should send a message and render a code markdown message in %s mode',
-			async (mode) => {
-				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))
-					.mockImplementationOnce(createFetchResponse(createSendMessageResponse(output)));
-
-				app = createChat({
-					mode,
-				});
-
-				if (mode === 'window') {
-					const trigger = getChatWindowToggle();
-					await fireEvent.click(trigger as HTMLElement);
-				}
-
-				const getStartedButton = getGetStartedButton();
-				await fireEvent.click(getStartedButton as HTMLElement);
-
-				const textarea = getChatInputTextarea();
-				const sendButton = getChatInputSendButton();
-				await fireEvent.update(textarea as HTMLElement, input);
-				await fireEvent.click(sendButton as HTMLElement);
-
-				expect(getChatMessageByText(input)).toBeInTheDocument();
-				expect(getChatMessages().length).toBe(3);
-
-				await waitFor(() => expect(getChatMessageTyping()).not.toBeInTheDocument());
-
-				const lastMessage = getChatMessage(-1);
-				expect(lastMessage).toBeInTheDocument();
-
-				expect(lastMessage.querySelector('h1')).toHaveTextContent('Code');
-				expect(lastMessage.querySelector('code')).toHaveTextContent('console.log("Hello World!");');
-			},
-		);
-	});
-});

package/src/__tests__/setup.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/src/__tests__/utils/create.ts

@@ -1,16 +0,0 @@
-import { createChat } from '@/index';
-
-export function createTestChat(options: Parameters<typeof createChat>[0] = {}): {
-	unmount: () => void;
-	container: Element;
-} {
-	const app = createChat(options);
-
-	const container = app._container as Element;
-	const unmount = () => app.unmount();
-
-	return {
-		unmount,
-		container,
-	};
-}

package/src/__tests__/utils/fetch.ts

@@ -1,18 +0,0 @@
-import type { LoadPreviousSessionResponse, SendMessageResponse } from '@/types';
-
-export function createFetchResponse<T>(data: T) {
-	return async () =>
-		({
-			json: async () => new Promise<T>((resolve) => resolve(data)),
-		}) as Response;
-}
-
-export const createGetLatestMessagesResponse = (
-	data: LoadPreviousSessionResponse['data'] = [],
-): LoadPreviousSessionResponse => ({ data });
-
-export const createSendMessageResponse = (
-	output: SendMessageResponse['output'],
-): SendMessageResponse => ({
-	output,
-});

package/src/__tests__/utils/selectors.ts

@@ -1,53 +0,0 @@
-import { screen } from '@testing-library/vue';
-import { defaultMountingTarget } from '@/constants';
-
-export function getMountingTarget(target = defaultMountingTarget) {
-	return document.querySelector(target);
-}
-
-export function getChatWindowWrapper() {
-	return document.querySelector('.chat-window-wrapper');
-}
-
-export function getChatWindowToggle() {
-	return document.querySelector('.chat-window-toggle');
-}
-
-export function getChatWrapper() {
-	return document.querySelector('.chat-wrapper');
-}
-
-export function getChatMessages() {
-	return document.querySelectorAll('.chat-message:not(.chat-message-typing)');
-}
-
-export function getChatMessage(index: number) {
-	const messages = getChatMessages();
-	return index < 0 ? messages[messages.length + index] : messages[index];
-}
-
-export function getChatMessageByText(text: string) {
-	return screen.queryByText(text, {
-		selector: '.chat-message:not(.chat-message-typing) .chat-message-markdown p',
-	});
-}
-
-export function getChatMessageTyping() {
-	return document.querySelector('.chat-message-typing');
-}
-
-export function getGetStartedButton() {
-	return document.querySelector('.chat-get-started .chat-button');
-}
-
-export function getChatInput() {
-	return document.querySelector('.chat-input');
-}
-
-export function getChatInputTextarea() {
-	return document.querySelector('.chat-input textarea');
-}
-
-export function getChatInputSendButton() {
-	return document.querySelector('.chat-input .chat-input-send-button');
-}