@n8n/chat 0.5.1 → 0.6.0

package/.eslintignore

@@ -0,0 +1,2 @@
+.eslintrc.cjs
+vitest.config.ts

package/.eslintrc.cjs

@@ -0,0 +1,51 @@
+const sharedOptions = require('@n8n_io/eslint-config/shared');
+
+/**
+ * @type {import('@types/eslint').ESLint.ConfigData}
+ */
+module.exports = {
+	extends: ['@n8n_io/eslint-config/frontend'],
+
+	...sharedOptions(__dirname, 'frontend'),
+
+	rules: {
+		'n8n-local-rules/dangerously-use-html-string-missing': 'off',
+
+		// TODO: Remove these
+		'id-denylist': 'warn',
+		'import/extensions': 'warn',
+		'import/no-default-export': 'warn',
+		'import/order': 'off',
+		'import/no-cycle': 'warn',
+		'import/no-duplicates': 'warn',
+		'@typescript-eslint/ban-types': 'warn',
+		'@typescript-eslint/dot-notation': 'warn',
+		'@typescript-eslint/lines-between-class-members': 'warn',
+		'@typescript-eslint/member-delimiter-style': 'warn',
+		'@typescript-eslint/naming-convention': 'warn',
+		'@typescript-eslint/no-empty-interface': 'warn',
+		'@typescript-eslint/no-for-in-array': 'warn',
+		'@typescript-eslint/no-loop-func': 'warn',
+		'@typescript-eslint/no-non-null-assertion': 'warn',
+		'@typescript-eslint/no-shadow': 'warn',
+		'@typescript-eslint/no-this-alias': 'warn',
+		'@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn',
+		'@typescript-eslint/no-unnecessary-type-assertion': 'warn',
+		'@typescript-eslint/no-unsafe-argument': 'warn',
+		'@typescript-eslint/no-unsafe-call': 'warn',
+		'@typescript-eslint/no-unsafe-return': 'warn',
+		'@typescript-eslint/no-unused-expressions': 'warn',
+		'@typescript-eslint/no-unused-vars': 'warn',
+		'@typescript-eslint/no-use-before-define': 'warn',
+		'@typescript-eslint/no-var-requires': 'warn',
+		'@typescript-eslint/prefer-nullish-coalescing': 'warn',
+		'@typescript-eslint/prefer-optional-chain': 'warn',
+		'@typescript-eslint/restrict-plus-operands': 'warn',
+		'@typescript-eslint/unbound-method': 'warn',
+		'@typescript-eslint/ban-ts-comment': ['warn', { 'ts-ignore': true }],
+		'@typescript-eslint/no-redundant-type-constituents': 'warn',
+		'@typescript-eslint/no-base-to-string': 'warn',
+		'@typescript-eslint/no-explicit-any': 'warn',
+		'@typescript-eslint/no-unsafe-enum-comparison': 'warn',
+	},
+};

package/.np-config.json

@@ -0,0 +1,5 @@
+{
+	"yarn": false,
+	"tests": false,
+	"contents": "./dist"
+}

package/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+	return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-links'),
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-interactions'),
+	],
+	framework: {
+		name: getAbsolutePath('@storybook/vue3-vite'),
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+};
+export default config;

package/.storybook/preview.scss

@@ -0,0 +1,4 @@
+html, body, #storybook-root, #n8n-chat {
+	width: 100%;
+	height: 100%;
+}

package/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/vue3';
+import './preview.scss';
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+	},
+};
+
+export default preview;

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

package/README.md

@@ -2,9 +2,9 @@
 This is an embeddable Chat widget for n8n. It allows the execution of AI-Powered Workflows through a Chat window.
 
 ## Prerequisites
-Create a n8n workflow which you want to execute via chat. The workflow has to be triggered using a **Chat Trigger** node.
+Create a n8n workflow which you want to execute via chat. The workflow has to be triggered using a **Webhook** node and return data using the **Respond to Webhook** node.
 
-Open the **Chat Trigger** node and add your domain to the **Allowed Origins (CORS)** field. This makes sure that only requests from your domain are accepted.
+Open the **Webhook** node and add your domain to the **Domain Allowlist** field. This makes sure that only requests from your domain are accepted.
 
 [See example workflow](https://github.com/n8n-io/n8n/blob/master/packages/%40n8n/chat/resources/workflow.json)
 
@@ -17,6 +17,8 @@ Each request is accompanied by an `action` query parameter, where `action` can b
 - `loadPreviousSession` - When the user opens the Chatbot again and the previous chat session should be loaded
 - `sendMessage` - When the user sends a message
 
+We use the `Switch` node to handle the different actions.
+
 ## Installation
 
 Open the **Webhook** node and replace `YOUR_PRODUCTION_WEBHOOK_URL` with your production URL. This is the URL that the Chat widget will use to send requests to.
@@ -104,10 +106,6 @@ createChat({
 	},
 	target: '#n8n-chat',
 	mode: 'window',
-	chatInputKey: 'chatInput',
-	chatSessionKey: 'sessionId',
-	metadata: {},
-	showWelcomeScreen: false,
 	defaultLanguage: 'en',
 	initialMessages: [
 		'Hi there! 👋',
@@ -150,21 +148,6 @@ createChat({
   - In `window` mode, the Chat window will be embedded in the target element as a chat toggle button and a fixed size chat window.
   - In `fullscreen` mode, the Chat will take up the entire width and height of its target container.
 
-### `showWelcomeScreen`
-- **Type**: `boolean`
-- **Default**: `false`
-- **Description**: Whether to show the welcome screen when the Chat window is opened.
-
-### `chatSessionKey`
-- **Type**: `string`
-- **Default**: `'sessionId'`
-- **Description**: The key to use for sending the chat history session ID for the AI Memory node.
-
-### `chatInputKey`
-- **Type**: `string`
-- **Default**: `'chatInput'`
-- **Description**: The key to use for sending the chat input for the AI Agent node.
-
 ### `defaultLanguage`
 - **Type**: `string`
 - **Default**: `'en'`

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n8n/chat",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "main": "./chat.umd.cjs",
   "module": "./chat.es.js",
   "types": "./types/index.d.ts",
@@ -14,70 +14,10 @@
       "require": "./style.css"
     }
   },
-  "dependencies": {
-    "highlight.js": "^11.8.0",
-    "uuid": "^8.3.2",
-    "vue": "^3.3.4",
-    "vue-markdown-render": "^2.0.1"
-  },
-  "devDependencies": {
-    "@iconify-json/mdi": "^1.1.54",
-    "@rushstack/eslint-patch": "^1.3.2",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/blocks": "^7.4.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/vue3": "^7.4.0",
-    "@storybook/vue3-vite": "^7.4.0",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/vue": "^7.0.0",
-    "@tsconfig/node18": "^18.2.0",
-    "@types/jsdom": "^21.1.1",
-    "@types/markdown-it": "^12.2.3",
-    "@types/node": "^18.17.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "^2.4.1",
-    "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.45.0",
-    "eslint-plugin-vue": "^9.15.1",
-    "jsdom": "^22.1.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "shelljs": "^0.8.5",
-    "storybook": "^7.4.0",
-    "typescript": "~5.1.6",
-    "unplugin-icons": "^0.17.0",
-    "vite": "^4.4.6",
-    "vite-plugin-dts": "^3.6.0",
-    "vitest": "^0.33.0",
-    "vue-tsc": "^1.8.6"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/n8n-io/n8n.git"
   },
   "license": "SEE LICENSE IN LICENSE.md",
-  "homepage": "https://n8n.io",
-  "scripts": {
-    "dev": "pnpm run storybook",
-    "build": "run-p type-check build:vite && npm run build:prepare",
-    "build:vite": "vite build && npm run build:vite:full",
-    "build:vite:full": "INCLUDE_VUE=true vite build",
-    "build:prepare": "node scripts/postbuild.js",
-    "build:pack": "node scripts/pack.js",
-    "preview": "vite preview",
-    "test:dev": "vitest",
-    "test": "vitest run --coverage",
-    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore --ignore-path .eslintignore",
-    "format": "prettier --write src/",
-    "storybook": "storybook dev -p 6006 --no-open",
-    "build:storybook": "storybook build",
-    "release": "pnpm run build && cd dist && pnpm publish"
-  }
+  "homepage": "https://n8n.io"
 }

package/resources/workflow.json

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

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

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

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

@@ -0,0 +1,43 @@
+/* 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>,
+};