@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.
- package/__stories__/App.stories.d.ts +16 -0
- package/__stories__/App.stories.js +38 -0
- package/__stories__/App.stories.mjs +32 -0
- package/__tests__/index.spec.d.ts +1 -0
- package/__tests__/index.spec.js +146 -0
- package/__tests__/index.spec.mjs +172 -0
- package/__tests__/setup.js +3 -0
- package/__tests__/setup.mjs +1 -0
- package/__tests__/utils/create.d.ts +5 -0
- package/__tests__/utils/create.js +16 -0
- package/__tests__/utils/create.mjs +10 -0
- package/__tests__/utils/fetch.d.ts +3 -0
- package/__tests__/utils/fetch.js +20 -0
- package/__tests__/utils/fetch.mjs +9 -0
- package/__tests__/utils/index.js +38 -0
- package/__tests__/utils/index.mjs +3 -0
- package/__tests__/utils/selectors.d.ts +12 -0
- package/__tests__/utils/selectors.js +58 -0
- package/__tests__/utils/selectors.mjs +41 -0
- package/api/generic.d.ts +6 -0
- package/api/generic.js +68 -0
- package/api/generic.mjs +54 -0
- package/api/index.js +27 -0
- package/api/index.mjs +2 -0
- package/api/message.d.ts +3 -0
- package/api/message.js +33 -0
- package/api/message.mjs +30 -0
- package/chat.bundle.es.js +10761 -0
- package/chat.bundle.umd.js +18 -0
- package/chat.es.js +6872 -0
- package/chat.umd.js +18 -0
- package/components/Button.vue +34 -0
- package/components/ChatWindow.vue +104 -0
- package/{src/components → components}/GetStarted.vue +7 -7
- package/{src/components → components}/GetStartedFooter.vue +2 -2
- package/{src/components → components}/Input.vue +34 -39
- package/{src/components → components}/Layout.vue +26 -42
- package/{src/components → components}/Message.vue +39 -46
- package/components/MessageTyping.vue +101 -0
- package/{src/components → components}/MessagesList.vue +4 -4
- package/{src/components → components}/PoweredBy.vue +6 -7
- package/components/index.js +76 -0
- package/components/index.mjs +10 -0
- package/composables/index.js +38 -0
- package/composables/index.mjs +3 -0
- package/composables/useChat.d.ts +1 -0
- package/composables/useChat.js +11 -0
- package/composables/useChat.mjs +5 -0
- package/composables/useI18n.d.ts +4 -0
- package/composables/useI18n.js +23 -0
- package/composables/useI18n.mjs +12 -0
- package/composables/useOptions.d.ts +3 -0
- package/composables/useOptions.js +14 -0
- package/composables/useOptions.mjs +8 -0
- package/constants/defaults.d.ts +3 -0
- package/constants/defaults.js +32 -0
- package/constants/defaults.mjs +26 -0
- package/constants/index.js +38 -0
- package/constants/index.mjs +3 -0
- package/constants/localStorage.d.ts +2 -0
- package/constants/localStorage.js +8 -0
- package/{src/constants/localStorage.ts → constants/localStorage.mjs} +1 -1
- package/constants/symbols.d.ts +3 -0
- package/constants/symbols.js +8 -0
- package/constants/symbols.mjs +2 -0
- package/css/index.css +31 -0
- package/event-buses/chatEventBus.d.ts +1 -0
- package/event-buses/chatEventBus.js +8 -0
- package/event-buses/chatEventBus.mjs +2 -0
- package/event-buses/index.js +16 -0
- package/event-buses/index.mjs +1 -0
- package/index.d.ts +3 -0
- package/index.js +43 -0
- package/index.mjs +36 -0
- package/main.css +151 -0
- package/package.json +35 -2
- package/plugins/chat.d.ts +3 -0
- package/plugins/chat.js +91 -0
- package/plugins/chat.mjs +90 -0
- package/plugins/index.js +16 -0
- package/plugins/index.mjs +1 -0
- package/style.css +1 -0
- package/types/App.vue.d.ts +8 -0
- package/types/__stories__/App.stories.d.ts +17 -0
- package/types/__tests__/index.spec.d.ts +1 -0
- package/types/__tests__/setup.d.ts +0 -0
- package/types/__tests__/utils/create.d.ts +5 -0
- package/types/__tests__/utils/fetch.d.ts +4 -0
- package/types/__tests__/utils/index.d.ts +3 -0
- package/types/__tests__/utils/selectors.d.ts +12 -0
- package/types/api/generic.d.ts +6 -0
- package/types/api/index.d.ts +2 -0
- package/types/api/message.d.ts +3 -0
- package/types/chat.d.ts +11 -0
- package/types/chat.js +1 -0
- package/types/chat.mjs +0 -0
- package/types/components/Button.vue.d.ts +9 -0
- package/types/components/Chat.vue.d.ts +2 -0
- package/types/components/ChatWindow.vue.d.ts +2 -0
- package/types/components/GetStarted.vue.d.ts +2 -0
- package/types/components/GetStartedFooter.vue.d.ts +2 -0
- package/types/components/Input.vue.d.ts +2 -0
- package/types/components/Layout.vue.d.ts +11 -0
- package/types/components/Message.vue.d.ts +21 -0
- package/types/components/MessageTyping.vue.d.ts +15 -0
- package/types/components/MessagesList.vue.d.ts +14 -0
- package/types/components/PoweredBy.vue.d.ts +2 -0
- package/types/components/index.d.ts +10 -0
- package/types/composables/index.d.ts +3 -0
- package/types/composables/useChat.d.ts +2 -0
- package/types/composables/useI18n.d.ts +4 -0
- package/types/composables/useOptions.d.ts +4 -0
- package/types/constants/defaults.d.ts +3 -0
- package/types/constants/index.d.ts +3 -0
- package/types/constants/localStorage.d.ts +2 -0
- package/types/constants/symbols.d.ts +4 -0
- package/types/event-buses/chatEventBus.d.ts +1 -0
- package/types/event-buses/index.d.ts +1 -0
- package/types/index.js +49 -0
- package/types/index.mjs +4 -0
- package/types/messages.d.ts +6 -0
- package/types/messages.js +1 -0
- package/types/messages.mjs +0 -0
- package/types/options.d.ts +25 -0
- package/types/options.js +1 -0
- package/types/options.mjs +0 -0
- package/types/plugins/chat.d.ts +3 -0
- package/types/plugins/index.d.ts +1 -0
- package/types/types/chat.d.ts +11 -0
- package/types/types/index.d.ts +4 -0
- package/types/types/messages.d.ts +6 -0
- package/types/types/options.d.ts +25 -0
- package/types/types/webhook.d.ts +16 -0
- package/types/utils/event-bus.d.ts +8 -0
- package/types/utils/mount.d.ts +1 -0
- package/types/webhook.d.ts +16 -0
- package/types/webhook.js +1 -0
- package/types/webhook.mjs +0 -0
- package/utils/event-bus.d.ts +8 -0
- package/utils/event-bus.js +38 -0
- package/utils/event-bus.mjs +32 -0
- package/utils/index.d.ts +2 -0
- package/utils/index.js +27 -0
- package/utils/index.mjs +2 -0
- package/utils/mount.d.ts +1 -0
- package/utils/mount.js +19 -0
- package/utils/mount.mjs +13 -0
- package/.eslintignore +0 -2
- package/.eslintrc.cjs +0 -10
- package/.np-config.json +0 -5
- package/.storybook/main.ts +0 -27
- package/.storybook/preview.scss +0 -4
- package/.storybook/preview.ts +0 -16
- package/.vscode/extensions.json +0 -3
- package/build.config.js +0 -21
- package/env.d.ts +0 -1
- package/index.html +0 -13
- package/resources/images/fullscreen.png +0 -0
- package/resources/images/windowed.png +0 -0
- package/resources/workflow-manual.json +0 -238
- package/resources/workflow.json +0 -119
- package/scripts/pack.js +0 -11
- package/scripts/postbuild.js +0 -36
- package/src/__stories__/App.stories.ts +0 -43
- package/src/__tests__/index.spec.ts +0 -218
- package/src/__tests__/utils/create.ts +0 -16
- package/src/__tests__/utils/fetch.ts +0 -18
- package/src/__tests__/utils/selectors.ts +0 -53
- package/src/api/generic.ts +0 -63
- package/src/api/message.ts +0 -37
- package/src/components/Button.vue +0 -41
- package/src/components/ChatWindow.vue +0 -125
- package/src/components/MessageTyping.vue +0 -109
- package/src/composables/useChat.ts +0 -7
- package/src/composables/useI18n.ts +0 -16
- package/src/composables/useOptions.ts +0 -11
- package/src/constants/defaults.ts +0 -29
- package/src/constants/symbols.ts +0 -8
- package/src/css/_tokens.scss +0 -36
- package/src/css/index.scss +0 -1
- package/src/event-buses/chatEventBus.ts +0 -3
- package/src/index.ts +0 -42
- package/src/main.scss +0 -5
- package/src/plugins/chat.ts +0 -105
- package/src/types/chat.ts +0 -12
- package/src/types/messages.ts +0 -6
- package/src/types/options.ts +0 -28
- package/src/types/webhook.ts +0 -17
- package/src/utils/event-bus.ts +0 -51
- package/src/utils/mount.ts +0 -16
- package/tsconfig.json +0 -27
- package/vite.config.ts +0 -53
- package/vitest.config.ts +0 -20
- /package/{src/App.vue → App.vue} +0 -0
- /package/{src/__tests__/setup.ts → __tests__/setup.d.ts} +0 -0
- /package/{src/__tests__/utils/index.ts → __tests__/utils/index.d.ts} +0 -0
- /package/{src/api/index.ts → api/index.d.ts} +0 -0
- /package/{src/components → components}/Chat.vue +0 -0
- /package/{src/components/index.ts → components/index.d.ts} +0 -0
- /package/{src/composables/index.ts → composables/index.d.ts} +0 -0
- /package/{src/constants/index.ts → constants/index.d.ts} +0 -0
- /package/{src/event-buses/index.ts → event-buses/index.d.ts} +0 -0
- /package/{public/favicon.ico → favicon.ico} +0 -0
- /package/{src/plugins/index.ts → plugins/index.d.ts} +0 -0
- /package/{src/shims.d.ts → shims.d.ts} +0 -0
- /package/{src/types/index.ts → types/index.d.ts} +0 -0
- /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,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 =
|
|
1
|
+
export const localStorageNamespace = "n8n-chat";
|
|
2
2
|
export const localStorageSessionIdKey = `${localStorageNamespace}/sessionId`;
|
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,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
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.
|
|
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
|
}
|
package/plugins/chat.js
ADDED
|
@@ -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
|
+
};
|
package/plugins/chat.mjs
ADDED
|
@@ -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
|
+
};
|
package/plugins/index.js
ADDED
|
@@ -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";
|