@n8n/chat 0.8.0 → 0.9.1

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 (207) hide show
  1. package/__stories__/App.stories.d.ts +16 -0
  2. package/__stories__/App.stories.js +38 -0
  3. package/__stories__/App.stories.mjs +32 -0
  4. package/__tests__/index.spec.d.ts +1 -0
  5. package/__tests__/index.spec.js +146 -0
  6. package/__tests__/index.spec.mjs +172 -0
  7. package/__tests__/setup.js +3 -0
  8. package/__tests__/setup.mjs +1 -0
  9. package/__tests__/utils/create.d.ts +5 -0
  10. package/__tests__/utils/create.js +16 -0
  11. package/__tests__/utils/create.mjs +10 -0
  12. package/__tests__/utils/fetch.d.ts +3 -0
  13. package/__tests__/utils/fetch.js +20 -0
  14. package/__tests__/utils/fetch.mjs +9 -0
  15. package/__tests__/utils/index.js +38 -0
  16. package/__tests__/utils/index.mjs +3 -0
  17. package/__tests__/utils/selectors.d.ts +12 -0
  18. package/__tests__/utils/selectors.js +58 -0
  19. package/__tests__/utils/selectors.mjs +41 -0
  20. package/api/generic.d.ts +6 -0
  21. package/api/generic.js +68 -0
  22. package/api/generic.mjs +54 -0
  23. package/api/index.js +27 -0
  24. package/api/index.mjs +2 -0
  25. package/api/message.d.ts +3 -0
  26. package/api/message.js +33 -0
  27. package/api/message.mjs +30 -0
  28. package/chat.bundle.es.js +10761 -0
  29. package/chat.bundle.umd.js +18 -0
  30. package/chat.es.js +6872 -0
  31. package/chat.umd.js +18 -0
  32. package/components/Button.vue +34 -0
  33. package/components/ChatWindow.vue +104 -0
  34. package/{src/components → components}/GetStarted.vue +7 -7
  35. package/{src/components → components}/GetStartedFooter.vue +2 -2
  36. package/{src/components → components}/Input.vue +34 -39
  37. package/{src/components → components}/Layout.vue +26 -42
  38. package/{src/components → components}/Message.vue +39 -46
  39. package/components/MessageTyping.vue +101 -0
  40. package/{src/components → components}/MessagesList.vue +4 -4
  41. package/{src/components → components}/PoweredBy.vue +6 -7
  42. package/components/index.js +76 -0
  43. package/components/index.mjs +10 -0
  44. package/composables/index.js +38 -0
  45. package/composables/index.mjs +3 -0
  46. package/composables/useChat.d.ts +1 -0
  47. package/composables/useChat.js +11 -0
  48. package/composables/useChat.mjs +5 -0
  49. package/composables/useI18n.d.ts +4 -0
  50. package/composables/useI18n.js +23 -0
  51. package/composables/useI18n.mjs +12 -0
  52. package/composables/useOptions.d.ts +3 -0
  53. package/composables/useOptions.js +14 -0
  54. package/composables/useOptions.mjs +8 -0
  55. package/constants/defaults.d.ts +3 -0
  56. package/constants/defaults.js +32 -0
  57. package/constants/defaults.mjs +26 -0
  58. package/constants/index.js +38 -0
  59. package/constants/index.mjs +3 -0
  60. package/constants/localStorage.d.ts +2 -0
  61. package/constants/localStorage.js +8 -0
  62. package/{src/constants/localStorage.ts → constants/localStorage.mjs} +1 -1
  63. package/constants/symbols.d.ts +3 -0
  64. package/constants/symbols.js +8 -0
  65. package/constants/symbols.mjs +2 -0
  66. package/css/index.css +31 -0
  67. package/event-buses/chatEventBus.d.ts +1 -0
  68. package/event-buses/chatEventBus.js +8 -0
  69. package/event-buses/chatEventBus.mjs +2 -0
  70. package/event-buses/index.js +16 -0
  71. package/event-buses/index.mjs +1 -0
  72. package/index.d.ts +3 -0
  73. package/index.js +43 -0
  74. package/index.mjs +36 -0
  75. package/main.css +151 -0
  76. package/package.json +35 -2
  77. package/plugins/chat.d.ts +3 -0
  78. package/plugins/chat.js +91 -0
  79. package/plugins/chat.mjs +90 -0
  80. package/plugins/index.js +16 -0
  81. package/plugins/index.mjs +1 -0
  82. package/style.css +1 -0
  83. package/types/App.vue.d.ts +8 -0
  84. package/types/__stories__/App.stories.d.ts +17 -0
  85. package/types/__tests__/index.spec.d.ts +1 -0
  86. package/types/__tests__/setup.d.ts +0 -0
  87. package/types/__tests__/utils/create.d.ts +5 -0
  88. package/types/__tests__/utils/fetch.d.ts +4 -0
  89. package/types/__tests__/utils/index.d.ts +3 -0
  90. package/types/__tests__/utils/selectors.d.ts +12 -0
  91. package/types/api/generic.d.ts +6 -0
  92. package/types/api/index.d.ts +2 -0
  93. package/types/api/message.d.ts +3 -0
  94. package/types/chat.d.ts +11 -0
  95. package/types/chat.js +1 -0
  96. package/types/chat.mjs +0 -0
  97. package/types/components/Button.vue.d.ts +9 -0
  98. package/types/components/Chat.vue.d.ts +2 -0
  99. package/types/components/ChatWindow.vue.d.ts +2 -0
  100. package/types/components/GetStarted.vue.d.ts +2 -0
  101. package/types/components/GetStartedFooter.vue.d.ts +2 -0
  102. package/types/components/Input.vue.d.ts +2 -0
  103. package/types/components/Layout.vue.d.ts +11 -0
  104. package/types/components/Message.vue.d.ts +21 -0
  105. package/types/components/MessageTyping.vue.d.ts +15 -0
  106. package/types/components/MessagesList.vue.d.ts +14 -0
  107. package/types/components/PoweredBy.vue.d.ts +2 -0
  108. package/types/components/index.d.ts +10 -0
  109. package/types/composables/index.d.ts +3 -0
  110. package/types/composables/useChat.d.ts +2 -0
  111. package/types/composables/useI18n.d.ts +4 -0
  112. package/types/composables/useOptions.d.ts +4 -0
  113. package/types/constants/defaults.d.ts +3 -0
  114. package/types/constants/index.d.ts +3 -0
  115. package/types/constants/localStorage.d.ts +2 -0
  116. package/types/constants/symbols.d.ts +4 -0
  117. package/types/event-buses/chatEventBus.d.ts +1 -0
  118. package/types/event-buses/index.d.ts +1 -0
  119. package/types/index.js +49 -0
  120. package/types/index.mjs +4 -0
  121. package/types/messages.d.ts +6 -0
  122. package/types/messages.js +1 -0
  123. package/types/messages.mjs +0 -0
  124. package/types/options.d.ts +25 -0
  125. package/types/options.js +1 -0
  126. package/types/options.mjs +0 -0
  127. package/types/plugins/chat.d.ts +3 -0
  128. package/types/plugins/index.d.ts +1 -0
  129. package/types/types/chat.d.ts +11 -0
  130. package/types/types/index.d.ts +4 -0
  131. package/types/types/messages.d.ts +6 -0
  132. package/types/types/options.d.ts +25 -0
  133. package/types/types/webhook.d.ts +16 -0
  134. package/types/utils/event-bus.d.ts +8 -0
  135. package/types/utils/mount.d.ts +1 -0
  136. package/types/webhook.d.ts +16 -0
  137. package/types/webhook.js +1 -0
  138. package/types/webhook.mjs +0 -0
  139. package/utils/event-bus.d.ts +8 -0
  140. package/utils/event-bus.js +38 -0
  141. package/utils/event-bus.mjs +32 -0
  142. package/utils/index.d.ts +2 -0
  143. package/utils/index.js +27 -0
  144. package/utils/index.mjs +2 -0
  145. package/utils/mount.d.ts +1 -0
  146. package/utils/mount.js +19 -0
  147. package/utils/mount.mjs +13 -0
  148. package/.eslintignore +0 -2
  149. package/.eslintrc.cjs +0 -10
  150. package/.np-config.json +0 -5
  151. package/.storybook/main.ts +0 -27
  152. package/.storybook/preview.scss +0 -4
  153. package/.storybook/preview.ts +0 -16
  154. package/.vscode/extensions.json +0 -3
  155. package/build.config.js +0 -21
  156. package/env.d.ts +0 -1
  157. package/index.html +0 -13
  158. package/resources/images/fullscreen.png +0 -0
  159. package/resources/images/windowed.png +0 -0
  160. package/resources/workflow-manual.json +0 -238
  161. package/resources/workflow.json +0 -119
  162. package/scripts/pack.js +0 -11
  163. package/scripts/postbuild.js +0 -36
  164. package/src/__stories__/App.stories.ts +0 -43
  165. package/src/__tests__/index.spec.ts +0 -218
  166. package/src/__tests__/utils/create.ts +0 -16
  167. package/src/__tests__/utils/fetch.ts +0 -18
  168. package/src/__tests__/utils/selectors.ts +0 -53
  169. package/src/api/generic.ts +0 -63
  170. package/src/api/message.ts +0 -37
  171. package/src/components/Button.vue +0 -41
  172. package/src/components/ChatWindow.vue +0 -125
  173. package/src/components/MessageTyping.vue +0 -109
  174. package/src/composables/useChat.ts +0 -7
  175. package/src/composables/useI18n.ts +0 -16
  176. package/src/composables/useOptions.ts +0 -11
  177. package/src/constants/defaults.ts +0 -29
  178. package/src/constants/symbols.ts +0 -8
  179. package/src/css/_tokens.scss +0 -36
  180. package/src/css/index.scss +0 -1
  181. package/src/event-buses/chatEventBus.ts +0 -3
  182. package/src/index.ts +0 -42
  183. package/src/main.scss +0 -5
  184. package/src/plugins/chat.ts +0 -105
  185. package/src/types/chat.ts +0 -12
  186. package/src/types/messages.ts +0 -6
  187. package/src/types/options.ts +0 -28
  188. package/src/types/webhook.ts +0 -17
  189. package/src/utils/event-bus.ts +0 -51
  190. package/src/utils/mount.ts +0 -16
  191. package/tsconfig.json +0 -27
  192. package/vite.config.ts +0 -53
  193. package/vitest.config.ts +0 -20
  194. /package/{src/App.vue → App.vue} +0 -0
  195. /package/{src/__tests__/setup.ts → __tests__/setup.d.ts} +0 -0
  196. /package/{src/__tests__/utils/index.ts → __tests__/utils/index.d.ts} +0 -0
  197. /package/{src/api/index.ts → api/index.d.ts} +0 -0
  198. /package/{src/components → components}/Chat.vue +0 -0
  199. /package/{src/components/index.ts → components/index.d.ts} +0 -0
  200. /package/{src/composables/index.ts → composables/index.d.ts} +0 -0
  201. /package/{src/constants/index.ts → constants/index.d.ts} +0 -0
  202. /package/{src/event-buses/index.ts → event-buses/index.d.ts} +0 -0
  203. /package/{public/favicon.ico → favicon.ico} +0 -0
  204. /package/{src/plugins/index.ts → plugins/index.d.ts} +0 -0
  205. /package/{src/shims.d.ts → shims.d.ts} +0 -0
  206. /package/{src/types/index.ts → types/index.d.ts} +0 -0
  207. /package/{src/utils/index.ts → types/utils/index.d.ts} +0 -0
@@ -0,0 +1,26 @@
1
+ export const defaultOptions = {
2
+ webhookUrl: "http://localhost:5678",
3
+ webhookConfig: {
4
+ method: "POST",
5
+ headers: {}
6
+ },
7
+ target: "#n8n-chat",
8
+ mode: "window",
9
+ loadPreviousSession: true,
10
+ chatInputKey: "chatInput",
11
+ chatSessionKey: "sessionId",
12
+ defaultLanguage: "en",
13
+ showWelcomeScreen: false,
14
+ initialMessages: ["Hi there! \u{1F44B}", "My name is Nathan. How can I assist you today?"],
15
+ i18n: {
16
+ en: {
17
+ title: "Hi there! \u{1F44B}",
18
+ subtitle: "Start a chat. We're here to help you 24/7.",
19
+ footer: "",
20
+ getStarted: "New Conversation",
21
+ inputPlaceholder: "Type your question.."
22
+ }
23
+ },
24
+ theme: {}
25
+ };
26
+ export const defaultMountingTarget = "#n8n-chat";
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _defaults = require("./defaults");
7
+ Object.keys(_defaults).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _defaults[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _defaults[key];
14
+ }
15
+ });
16
+ });
17
+ var _localStorage = require("./localStorage");
18
+ Object.keys(_localStorage).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _localStorage[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function () {
24
+ return _localStorage[key];
25
+ }
26
+ });
27
+ });
28
+ var _symbols = require("./symbols");
29
+ Object.keys(_symbols).forEach(function (key) {
30
+ if (key === "default" || key === "__esModule") return;
31
+ if (key in exports && exports[key] === _symbols[key]) return;
32
+ Object.defineProperty(exports, key, {
33
+ enumerable: true,
34
+ get: function () {
35
+ return _symbols[key];
36
+ }
37
+ });
38
+ });
@@ -0,0 +1,3 @@
1
+ export * from "./defaults.mjs";
2
+ export * from "./localStorage.mjs";
3
+ export * from "./symbols.mjs";
@@ -0,0 +1,2 @@
1
+ export declare const localStorageNamespace = "n8n-chat";
2
+ export declare const localStorageSessionIdKey = "n8n-chat/sessionId";
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.localStorageSessionIdKey = exports.localStorageNamespace = void 0;
7
+ const localStorageNamespace = exports.localStorageNamespace = "n8n-chat";
8
+ const localStorageSessionIdKey = exports.localStorageSessionIdKey = `${localStorageNamespace}/sessionId`;
@@ -1,2 +1,2 @@
1
- export const localStorageNamespace = 'n8n-chat';
1
+ export const localStorageNamespace = "n8n-chat";
2
2
  export const localStorageSessionIdKey = `${localStorageNamespace}/sessionId`;
@@ -0,0 +1,3 @@
1
+ import type { InjectionKey } from 'vue';
2
+ export declare const ChatSymbol: InjectionKey<Chat>;
3
+ export declare const ChatOptionsSymbol: InjectionKey<ChatOptions>;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ChatSymbol = exports.ChatOptionsSymbol = void 0;
7
+ const ChatSymbol = exports.ChatSymbol = "Chat";
8
+ const ChatOptionsSymbol = exports.ChatOptionsSymbol = "ChatOptions";
@@ -0,0 +1,2 @@
1
+ export const ChatSymbol = "Chat";
2
+ export const ChatOptionsSymbol = "ChatOptions";
package/css/index.css ADDED
@@ -0,0 +1,31 @@
1
+ :root {
2
+ --chat--color-primary: #e74266;
3
+ --chat--color-primary-shade-50: #db4061;
4
+ --chat--color-primary-shade-100: #cf3c5c;
5
+ --chat--color-secondary: #20b69e;
6
+ --chat--color-secondary-shade-50: #1ca08a;
7
+ --chat--color-white: #ffffff;
8
+ --chat--color-light: #f2f4f8;
9
+ --chat--color-light-shade-50: #e6e9f1;
10
+ --chat--color-light-shade-100: #c2c5cc;
11
+ --chat--color-medium: #d2d4d9;
12
+ --chat--color-dark: #101330;
13
+ --chat--color-disabled: #777980;
14
+ --chat--color-typing: #404040;
15
+ --chat--spacing: 1rem;
16
+ --chat--border-radius: 0.25rem;
17
+ --chat--transition-duration: 0.15s;
18
+ --chat--window--width: 400px;
19
+ --chat--window--height: 600px;
20
+ --chat--textarea--height: 50px;
21
+ --chat--message--bot--background: var(--chat--color-white);
22
+ --chat--message--bot--color: var(--chat--color-dark);
23
+ --chat--message--user--background: var(--chat--color-secondary);
24
+ --chat--message--user--color: var(--chat--color-white);
25
+ --chat--message--pre--background: rgba(0, 0, 0, 0.05);
26
+ --chat--toggle--background: var(--chat--color-primary);
27
+ --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
28
+ --chat--toggle--active--background: var(--chat--color-primary-shade-100);
29
+ --chat--toggle--color: var(--chat--color-white);
30
+ --chat--toggle--size: 64px;
31
+ }
@@ -0,0 +1 @@
1
+ export declare const chatEventBus: any;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.chatEventBus = void 0;
7
+ var _utils = require("@n8n/chat/utils");
8
+ const chatEventBus = exports.chatEventBus = (0, _utils.createEventBus)();
@@ -0,0 +1,2 @@
1
+ import { createEventBus } from "@n8n/chat/utils";
2
+ export const chatEventBus = createEventBus();
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _chatEventBus = require("./chatEventBus");
7
+ Object.keys(_chatEventBus).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _chatEventBus[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _chatEventBus[key];
14
+ }
15
+ });
16
+ });
@@ -0,0 +1 @@
1
+ export * from "./chatEventBus.mjs";
package/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import './main.scss';
2
+ import type { ChatOptions } from '@n8n/chat/types';
3
+ export declare function createChat(options?: Partial<ChatOptions>): import("vue").App<Element>;
package/index.js ADDED
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.createChat = createChat;
7
+ require("./main.scss");
8
+ var _vue = require("vue");
9
+ var _App = _interopRequireDefault(require("./App.vue"));
10
+ var _constants = require("@n8n/chat/constants");
11
+ var _utils = require("@n8n/chat/utils");
12
+ var _plugins = require("@n8n/chat/plugins");
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ function createChat(options) {
15
+ const resolvedOptions = {
16
+ ..._constants.defaultOptions,
17
+ ...options,
18
+ webhookConfig: {
19
+ ..._constants.defaultOptions.webhookConfig,
20
+ ...options?.webhookConfig
21
+ },
22
+ i18n: {
23
+ ..._constants.defaultOptions.i18n,
24
+ ...options?.i18n,
25
+ en: {
26
+ ..._constants.defaultOptions.i18n?.en,
27
+ ...options?.i18n?.en
28
+ }
29
+ },
30
+ theme: {
31
+ ..._constants.defaultOptions.theme,
32
+ ...options?.theme
33
+ }
34
+ };
35
+ const mountingTarget = resolvedOptions.target ?? _constants.defaultMountingTarget;
36
+ if (typeof mountingTarget === "string") {
37
+ (0, _utils.createDefaultMountingTarget)(mountingTarget);
38
+ }
39
+ const app = (0, _vue.createApp)(_App.default);
40
+ app.use(_plugins.ChatPlugin, resolvedOptions);
41
+ app.mount(mountingTarget);
42
+ return app;
43
+ }
package/index.mjs ADDED
@@ -0,0 +1,36 @@
1
+ import "./main.scss";
2
+ import { createApp } from "vue";
3
+ import App from "./App.vue";
4
+ import { defaultMountingTarget, defaultOptions } from "@n8n/chat/constants";
5
+ import { createDefaultMountingTarget } from "@n8n/chat/utils";
6
+ import { ChatPlugin } from "@n8n/chat/plugins";
7
+ export function createChat(options) {
8
+ const resolvedOptions = {
9
+ ...defaultOptions,
10
+ ...options,
11
+ webhookConfig: {
12
+ ...defaultOptions.webhookConfig,
13
+ ...options?.webhookConfig
14
+ },
15
+ i18n: {
16
+ ...defaultOptions.i18n,
17
+ ...options?.i18n,
18
+ en: {
19
+ ...defaultOptions.i18n?.en,
20
+ ...options?.i18n?.en
21
+ }
22
+ },
23
+ theme: {
24
+ ...defaultOptions.theme,
25
+ ...options?.theme
26
+ }
27
+ };
28
+ const mountingTarget = resolvedOptions.target ?? defaultMountingTarget;
29
+ if (typeof mountingTarget === "string") {
30
+ createDefaultMountingTarget(mountingTarget);
31
+ }
32
+ const app = createApp(App);
33
+ app.use(ChatPlugin, resolvedOptions);
34
+ app.mount(mountingTarget);
35
+ return app;
36
+ }
package/main.css ADDED
@@ -0,0 +1,151 @@
1
+ .n8n-chat {
2
+ /*!
3
+ Theme: GitHub
4
+ Description: Light theme as seen on github.com
5
+ Author: github.com
6
+ Maintainer: @Hirse
7
+ Updated: 2021-05-15
8
+
9
+ Outdated base version: https://github.com/primer/github-syntax-light
10
+ Current colors taken from GitHub's CSS
11
+ */
12
+ }
13
+ .n8n-chat pre code.hljs {
14
+ display: block;
15
+ overflow-x: auto;
16
+ padding: 1em;
17
+ }
18
+ .n8n-chat code.hljs {
19
+ padding: 3px 5px;
20
+ }
21
+ .n8n-chat .hljs {
22
+ color: #24292e;
23
+ background: #ffffff;
24
+ }
25
+ .n8n-chat .hljs-doctag,
26
+ .n8n-chat .hljs-keyword,
27
+ .n8n-chat .hljs-meta .hljs-keyword,
28
+ .n8n-chat .hljs-template-tag,
29
+ .n8n-chat .hljs-template-variable,
30
+ .n8n-chat .hljs-type,
31
+ .n8n-chat .hljs-variable.language_ {
32
+ /* prettylights-syntax-keyword */
33
+ color: #d73a49;
34
+ }
35
+ .n8n-chat .hljs-title,
36
+ .n8n-chat .hljs-title.class_,
37
+ .n8n-chat .hljs-title.class_.inherited__,
38
+ .n8n-chat .hljs-title.function_ {
39
+ /* prettylights-syntax-entity */
40
+ color: #6f42c1;
41
+ }
42
+ .n8n-chat .hljs-attr,
43
+ .n8n-chat .hljs-attribute,
44
+ .n8n-chat .hljs-literal,
45
+ .n8n-chat .hljs-meta,
46
+ .n8n-chat .hljs-number,
47
+ .n8n-chat .hljs-operator,
48
+ .n8n-chat .hljs-variable,
49
+ .n8n-chat .hljs-selector-attr,
50
+ .n8n-chat .hljs-selector-class,
51
+ .n8n-chat .hljs-selector-id {
52
+ /* prettylights-syntax-constant */
53
+ color: #005cc5;
54
+ }
55
+ .n8n-chat .hljs-regexp,
56
+ .n8n-chat .hljs-string,
57
+ .n8n-chat .hljs-meta .hljs-string {
58
+ /* prettylights-syntax-string */
59
+ color: #032f62;
60
+ }
61
+ .n8n-chat .hljs-built_in,
62
+ .n8n-chat .hljs-symbol {
63
+ /* prettylights-syntax-variable */
64
+ color: #e36209;
65
+ }
66
+ .n8n-chat .hljs-comment,
67
+ .n8n-chat .hljs-code,
68
+ .n8n-chat .hljs-formula {
69
+ /* prettylights-syntax-comment */
70
+ color: #6a737d;
71
+ }
72
+ .n8n-chat .hljs-name,
73
+ .n8n-chat .hljs-quote,
74
+ .n8n-chat .hljs-selector-tag,
75
+ .n8n-chat .hljs-selector-pseudo {
76
+ /* prettylights-syntax-entity-tag */
77
+ color: #22863a;
78
+ }
79
+ .n8n-chat .hljs-subst {
80
+ /* prettylights-syntax-storage-modifier-import */
81
+ color: #24292e;
82
+ }
83
+ .n8n-chat .hljs-section {
84
+ /* prettylights-syntax-markup-heading */
85
+ color: #005cc5;
86
+ font-weight: bold;
87
+ }
88
+ .n8n-chat .hljs-bullet {
89
+ /* prettylights-syntax-markup-list */
90
+ color: #735c0f;
91
+ }
92
+ .n8n-chat .hljs-emphasis {
93
+ /* prettylights-syntax-markup-italic */
94
+ color: #24292e;
95
+ font-style: italic;
96
+ }
97
+ .n8n-chat .hljs-strong {
98
+ /* prettylights-syntax-markup-bold */
99
+ color: #24292e;
100
+ font-weight: bold;
101
+ }
102
+ .n8n-chat .hljs-addition {
103
+ /* prettylights-syntax-markup-inserted */
104
+ color: #22863a;
105
+ background-color: #f0fff4;
106
+ }
107
+ .n8n-chat .hljs-deletion {
108
+ /* prettylights-syntax-markup-deleted */
109
+ color: #b31d28;
110
+ background-color: #ffeef0;
111
+ }
112
+ .n8n-chat .hljs-char.escape_,
113
+ .n8n-chat .hljs-link,
114
+ .n8n-chat .hljs-params,
115
+ .n8n-chat .hljs-property,
116
+ .n8n-chat .hljs-punctuation,
117
+ .n8n-chat .hljs-tag {
118
+ /* purposely ignored */
119
+ }
120
+
121
+ :root {
122
+ --chat--color-primary: #e74266;
123
+ --chat--color-primary-shade-50: #db4061;
124
+ --chat--color-primary-shade-100: #cf3c5c;
125
+ --chat--color-secondary: #20b69e;
126
+ --chat--color-secondary-shade-50: #1ca08a;
127
+ --chat--color-white: #ffffff;
128
+ --chat--color-light: #f2f4f8;
129
+ --chat--color-light-shade-50: #e6e9f1;
130
+ --chat--color-light-shade-100: #c2c5cc;
131
+ --chat--color-medium: #d2d4d9;
132
+ --chat--color-dark: #101330;
133
+ --chat--color-disabled: #777980;
134
+ --chat--color-typing: #404040;
135
+ --chat--spacing: 1rem;
136
+ --chat--border-radius: 0.25rem;
137
+ --chat--transition-duration: 0.15s;
138
+ --chat--window--width: 400px;
139
+ --chat--window--height: 600px;
140
+ --chat--textarea--height: 50px;
141
+ --chat--message--bot--background: var(--chat--color-white);
142
+ --chat--message--bot--color: var(--chat--color-dark);
143
+ --chat--message--user--background: var(--chat--color-secondary);
144
+ --chat--message--user--color: var(--chat--color-white);
145
+ --chat--message--pre--background: rgba(0, 0, 0, 0.05);
146
+ --chat--toggle--background: var(--chat--color-primary);
147
+ --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
148
+ --chat--toggle--active--background: var(--chat--color-primary-shade-100);
149
+ --chat--toggle--color: var(--chat--color-white);
150
+ --chat--toggle--size: 64px;
151
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@n8n/chat",
3
- "version": "0.8.0",
3
+ "version": "0.9.1",
4
4
  "main": "./chat.umd.js",
5
5
  "module": "./chat.es.js",
6
6
  "types": "./types/index.d.ts",
@@ -18,10 +18,43 @@
18
18
  "require": "./*"
19
19
  }
20
20
  },
21
+ "dependencies": {
22
+ "highlight.js": "^11.8.0",
23
+ "uuid": "^8.3.2",
24
+ "vue": "^3.3.4",
25
+ "vue-markdown-render": "^2.0.1"
26
+ },
27
+ "devDependencies": {
28
+ "@iconify-json/mdi": "^1.1.54",
29
+ "shelljs": "^0.8.5",
30
+ "unbuild": "^2.0.0",
31
+ "unplugin-icons": "^0.17.0",
32
+ "vite-plugin-dts": "^3.7.3"
33
+ },
21
34
  "repository": {
22
35
  "type": "git",
23
36
  "url": "git+https://github.com/n8n-io/n8n.git"
24
37
  },
25
38
  "license": "SEE LICENSE IN LICENSE.md",
26
- "homepage": "https://n8n.io"
39
+ "homepage": "https://n8n.io",
40
+ "scripts": {
41
+ "dev": "pnpm run storybook",
42
+ "build": "pnpm type-check && pnpm build:vite && pnpm run build:individual && npm run build:prepare",
43
+ "build:full": "pnpm type-check && pnpm build:vite && pnpm build:vite:full && pnpm run build:individual && npm run build:prepare",
44
+ "build:vite": "vite build",
45
+ "build:vite:full": "INCLUDE_VUE=true vite build",
46
+ "build:individual": "unbuild",
47
+ "build:prepare": "node scripts/postbuild.js",
48
+ "build:pack": "node scripts/pack.js",
49
+ "preview": "vite preview",
50
+ "test:dev": "vitest",
51
+ "test": "vitest run --coverage",
52
+ "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false",
53
+ "lint": "eslint . --ext .js,.ts,.vue --quiet",
54
+ "lintfix": "eslint . --ext .js,.ts,.vue --fix",
55
+ "format": "prettier --write src/",
56
+ "storybook": "storybook dev -p 6006 --no-open",
57
+ "build:storybook": "storybook build",
58
+ "release": "pnpm run build:full && cd dist && pnpm publish"
59
+ }
27
60
  }
@@ -0,0 +1,3 @@
1
+ import type { Plugin } from 'vue';
2
+ import type { ChatOptions } from '@n8n/chat/types';
3
+ export declare const ChatPlugin: Plugin<ChatOptions>;
@@ -0,0 +1,91 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ChatPlugin = void 0;
7
+ var _vue = require("vue");
8
+ var _uuid = require("uuid");
9
+ var _eventBuses = require("@n8n/chat/event-buses");
10
+ var api = _interopRequireWildcard(require("@n8n/chat/api"));
11
+ var _constants = require("@n8n/chat/constants");
12
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
14
+ const ChatPlugin = exports.ChatPlugin = {
15
+ install(app, options) {
16
+ app.provide(_constants.ChatOptionsSymbol, options);
17
+ const messages = (0, _vue.ref)([]);
18
+ const currentSessionId = (0, _vue.ref)(null);
19
+ const waitingForResponse = (0, _vue.ref)(false);
20
+ const initialMessages = (0, _vue.computed)(() => (options.initialMessages ?? []).map(text => ({
21
+ id: (0, _uuid.v4)(),
22
+ text,
23
+ sender: "bot",
24
+ createdAt: /* @__PURE__ */new Date().toISOString()
25
+ })));
26
+ async function sendMessage(text) {
27
+ const sentMessage = {
28
+ id: (0, _uuid.v4)(),
29
+ text,
30
+ sender: "user",
31
+ createdAt: /* @__PURE__ */new Date().toISOString()
32
+ };
33
+ messages.value.push(sentMessage);
34
+ waitingForResponse.value = true;
35
+ void (0, _vue.nextTick)(() => {
36
+ _eventBuses.chatEventBus.emit("scrollToBottom");
37
+ });
38
+ const sendMessageResponse = await api.sendMessage(text, currentSessionId.value, options);
39
+ let textMessage = sendMessageResponse.output ?? sendMessageResponse.text ?? "";
40
+ if (textMessage === "" && Object.keys(sendMessageResponse).length > 0) {
41
+ try {
42
+ textMessage = JSON.stringify(sendMessageResponse, null, 2);
43
+ } catch (e) {}
44
+ }
45
+ const receivedMessage = {
46
+ id: (0, _uuid.v4)(),
47
+ text: textMessage,
48
+ sender: "bot",
49
+ createdAt: /* @__PURE__ */new Date().toISOString()
50
+ };
51
+ messages.value.push(receivedMessage);
52
+ waitingForResponse.value = false;
53
+ void (0, _vue.nextTick)(() => {
54
+ _eventBuses.chatEventBus.emit("scrollToBottom");
55
+ });
56
+ }
57
+ async function loadPreviousSession() {
58
+ if (!options.loadPreviousSession) {
59
+ return;
60
+ }
61
+ const sessionId = localStorage.getItem(_constants.localStorageSessionIdKey) ?? (0, _uuid.v4)();
62
+ const previousMessagesResponse = await api.loadPreviousSession(sessionId, options);
63
+ const timestamp = /* @__PURE__ */new Date().toISOString();
64
+ messages.value = (previousMessagesResponse?.data || []).map((message, index) => ({
65
+ id: `${index}`,
66
+ text: message.kwargs.content,
67
+ sender: message.id.includes("HumanMessage") ? "user" : "bot",
68
+ createdAt: timestamp
69
+ }));
70
+ if (messages.value.length) {
71
+ currentSessionId.value = sessionId;
72
+ }
73
+ return sessionId;
74
+ }
75
+ async function startNewSession() {
76
+ currentSessionId.value = (0, _uuid.v4)();
77
+ localStorage.setItem(_constants.localStorageSessionIdKey, currentSessionId.value);
78
+ }
79
+ const chatStore = {
80
+ initialMessages,
81
+ messages,
82
+ currentSessionId,
83
+ waitingForResponse,
84
+ loadPreviousSession,
85
+ startNewSession,
86
+ sendMessage
87
+ };
88
+ app.provide(_constants.ChatSymbol, chatStore);
89
+ app.config.globalProperties.$chat = chatStore;
90
+ }
91
+ };
@@ -0,0 +1,90 @@
1
+ import { computed, nextTick, ref } from "vue";
2
+ import { v4 as uuidv4 } from "uuid";
3
+ import { chatEventBus } from "@n8n/chat/event-buses";
4
+ import * as api from "@n8n/chat/api";
5
+ import { ChatOptionsSymbol, ChatSymbol, localStorageSessionIdKey } from "@n8n/chat/constants";
6
+ export const ChatPlugin = {
7
+ install(app, options) {
8
+ app.provide(ChatOptionsSymbol, options);
9
+ const messages = ref([]);
10
+ const currentSessionId = ref(null);
11
+ const waitingForResponse = ref(false);
12
+ const initialMessages = computed(
13
+ () => (options.initialMessages ?? []).map((text) => ({
14
+ id: uuidv4(),
15
+ text,
16
+ sender: "bot",
17
+ createdAt: (/* @__PURE__ */ new Date()).toISOString()
18
+ }))
19
+ );
20
+ async function sendMessage(text) {
21
+ const sentMessage = {
22
+ id: uuidv4(),
23
+ text,
24
+ sender: "user",
25
+ createdAt: (/* @__PURE__ */ new Date()).toISOString()
26
+ };
27
+ messages.value.push(sentMessage);
28
+ waitingForResponse.value = true;
29
+ void nextTick(() => {
30
+ chatEventBus.emit("scrollToBottom");
31
+ });
32
+ const sendMessageResponse = await api.sendMessage(
33
+ text,
34
+ currentSessionId.value,
35
+ options
36
+ );
37
+ let textMessage = sendMessageResponse.output ?? sendMessageResponse.text ?? "";
38
+ if (textMessage === "" && Object.keys(sendMessageResponse).length > 0) {
39
+ try {
40
+ textMessage = JSON.stringify(sendMessageResponse, null, 2);
41
+ } catch (e) {
42
+ }
43
+ }
44
+ const receivedMessage = {
45
+ id: uuidv4(),
46
+ text: textMessage,
47
+ sender: "bot",
48
+ createdAt: (/* @__PURE__ */ new Date()).toISOString()
49
+ };
50
+ messages.value.push(receivedMessage);
51
+ waitingForResponse.value = false;
52
+ void nextTick(() => {
53
+ chatEventBus.emit("scrollToBottom");
54
+ });
55
+ }
56
+ async function loadPreviousSession() {
57
+ if (!options.loadPreviousSession) {
58
+ return;
59
+ }
60
+ const sessionId = localStorage.getItem(localStorageSessionIdKey) ?? uuidv4();
61
+ const previousMessagesResponse = await api.loadPreviousSession(sessionId, options);
62
+ const timestamp = (/* @__PURE__ */ new Date()).toISOString();
63
+ messages.value = (previousMessagesResponse?.data || []).map((message, index) => ({
64
+ id: `${index}`,
65
+ text: message.kwargs.content,
66
+ sender: message.id.includes("HumanMessage") ? "user" : "bot",
67
+ createdAt: timestamp
68
+ }));
69
+ if (messages.value.length) {
70
+ currentSessionId.value = sessionId;
71
+ }
72
+ return sessionId;
73
+ }
74
+ async function startNewSession() {
75
+ currentSessionId.value = uuidv4();
76
+ localStorage.setItem(localStorageSessionIdKey, currentSessionId.value);
77
+ }
78
+ const chatStore = {
79
+ initialMessages,
80
+ messages,
81
+ currentSessionId,
82
+ waitingForResponse,
83
+ loadPreviousSession,
84
+ startNewSession,
85
+ sendMessage
86
+ };
87
+ app.provide(ChatSymbol, chatStore);
88
+ app.config.globalProperties.$chat = chatStore;
89
+ }
90
+ };
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _chat = require("./chat");
7
+ Object.keys(_chat).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _chat[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _chat[key];
14
+ }
15
+ });
16
+ });
@@ -0,0 +1 @@
1
+ export * from "./chat.mjs";