@n8n/chat 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +123 -0
  2. package/package.json +8 -2
package/README.md ADDED
@@ -0,0 +1,123 @@
1
+ # n8n Chat
2
+ This is an embeddable Chat widget for n8n. It allows the execution of AI-Powered Workflows through a Chat window.
3
+
4
+ ## Pre-requisites
5
+ 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.
6
+
7
+ [See example workflow](/resources/workflow.json)
8
+
9
+ ### How it works
10
+ Each Chat request is sent to the n8n Webhook endpoint, which then sends back a response.
11
+
12
+ Each request is accompanied by an `action` query parameter, where `action` can be one of:
13
+ - `loadPreviousSession` - When the user opens the Chatbot again and the previous chat session should be loaded
14
+ - `sendMessage` - When the user sends a message
15
+
16
+ We use the `Switch` node to handle the different actions.
17
+
18
+ ## Installation
19
+
20
+ ### Embed HTML
21
+ ```html
22
+ <script type="module">
23
+ import { createChat } from '@n8n/chat';
24
+
25
+ createChat({
26
+ webhookUrl: 'http://localhost:5678/webhook/513107b3-6f3a-4a1e-af21-659f0ed14183'
27
+ });
28
+ </script>
29
+ ```
30
+
31
+ ## Options
32
+ The default options are:
33
+
34
+ ```ts
35
+ createChat({
36
+ webhookUrl: '',
37
+ webhookConfig: {
38
+ method: 'GET',
39
+ headers: {}
40
+ },
41
+ target: '#n8n-chat',
42
+ mode: 'window',
43
+ defaultLanguage: 'en',
44
+ initialMessages: [
45
+ 'Hi there! 👋',
46
+ 'My name is Nathan. How can I assist you today?'
47
+ ],
48
+ i18n: {
49
+ en: {
50
+ title: 'Hi there! 👋',
51
+ subtitle: "Start a chat. We're here to help you 24/7.",
52
+ footer: '',
53
+ getStarted: 'New Conversation',
54
+ inputPlaceholder: 'Type your question..',
55
+ },
56
+ },
57
+ poweredBy: true,
58
+ });
59
+ ```
60
+
61
+ ### `webhookUrl`
62
+ - **Type**: `string`
63
+ - **Required**: `true`
64
+ - **Description**: The URL of the n8n Webhook endpoint
65
+
66
+ ### `webhookConfig`
67
+ - **Type**: `{ method: string, headers: Record<string, string> }`
68
+ - **Default**: `{ method: 'GET', headers: {} }`
69
+ - **Description**: The configuration for the Webhook request.
70
+
71
+ ### `target`
72
+ - **Type**: `string`
73
+ - **Default**: `'#n8n-chat'`
74
+ - **Description**: The CSS selector of the element where the Chat window should be embedded.
75
+
76
+ ### `mode`
77
+ - **Type**: `'window' | 'fullscreen'`
78
+ - **Default**: `'window'`
79
+ - **Description**: The render mode of the Chat window.
80
+ - In `window` mode, the Chat window will be embedded in the target element as a chat toggle button and a fixed size chat window.
81
+ - In `fullscreen` mode, the Chat will take up the entire width and height of its target container.
82
+
83
+ ### `defaultLanguage`
84
+ - **Type**: `string`
85
+ - **Default**: `'en'`
86
+ - **Description**: The default language of the Chat window. Currently only `en` is supported.
87
+
88
+ ### `i18n`
89
+ - **Type**: `{ [key: string]: Record<string, string> }`
90
+ - **Description**: The i18n configuration for the Chat window. Currently only `en` is supported.
91
+
92
+ ### `initialMessages`
93
+ - **Type**: `string[]`
94
+ - **Description**: The initial messages to be displayed in the Chat window.
95
+
96
+ ### `poweredBy`
97
+ - **Type**: `boolean`
98
+ - **Default**: `true`
99
+ - **Description**: Whether to display the "Powered by n8n" footer in the Chat window.
100
+
101
+
102
+ ## Caveats
103
+
104
+ ### Fullscreen mode
105
+ In fullscreen mode, the Chat window will take up the entire width and height of its target container. Make sure that the container has a set width and height.
106
+
107
+ ```css
108
+ html,
109
+ body,
110
+ #n8n-chat {
111
+ width: 100%;
112
+ height: 100%;
113
+ }
114
+ ```
115
+
116
+ ## License
117
+ n8n Chat is [fair-code](http://faircode.io) distributed under the
118
+ [**Sustainable Use License**](https://github.com/n8n-io/n8n/blob/master/packages/cli/LICENSE.md).
119
+
120
+ Proprietary licenses are available for enterprise customers. [Get in touch](mailto:license@n8n.io)
121
+
122
+ Additional information about the license model can be found in the
123
+ [docs](https://docs.n8n.io/reference/license/).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@n8n/chat",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "main": "./chat.umd.cjs",
5
5
  "module": "./chat.js",
6
6
  "types": "./types/index.d.ts",
@@ -56,6 +56,12 @@
56
56
  "vitest": "^0.33.0",
57
57
  "vue-tsc": "^1.8.6"
58
58
  },
59
+ "repository": {
60
+ "type": "git",
61
+ "url": "git+https://github.com/n8n-io/chat.git"
62
+ },
63
+ "license": "fair-code",
64
+ "homepage": "https://n8n.io",
59
65
  "scripts": {
60
66
  "dev": "npm run storybook",
61
67
  "build": "run-p type-check build:vite && npm run build:prepare",
@@ -69,6 +75,6 @@
69
75
  "format": "prettier --write src/",
70
76
  "storybook": "storybook dev -p 6006",
71
77
  "build:storybook": "storybook build",
72
- "release": "npm run build && cd dist && npm publish"
78
+ "release": "pnpm run build && cd dist && pnpm publish"
73
79
  }
74
80
  }