@n8n/chat 0.5.0 → 0.5.2

package/css/index.css

@@ -0,0 +1,31 @@
+:root {
+  --chat--color-primary: #e74266;
+  --chat--color-primary-shade-50: #db4061;
+  --chat--color-primary-shade-100: #cf3c5c;
+  --chat--color-secondary: #20b69e;
+  --chat--color-secondary-shade-50: #1ca08a;
+  --chat--color-white: #ffffff;
+  --chat--color-light: #f2f4f8;
+  --chat--color-light-shade-50: #e6e9f1;
+  --chat--color-light-shade-100: #c2c5cc;
+  --chat--color-medium: #d2d4d9;
+  --chat--color-dark: #101330;
+  --chat--color-disabled: #777980;
+  --chat--color-typing: #404040;
+  --chat--spacing: 1rem;
+  --chat--border-radius: 0.25rem;
+  --chat--transition-duration: 0.15s;
+  --chat--window--width: 400px;
+  --chat--window--height: 600px;
+  --chat--textarea--height: 50px;
+  --chat--message--bot--background: var(--chat--color-white);
+  --chat--message--bot--color: var(--chat--color-dark);
+  --chat--message--user--background: var(--chat--color-secondary);
+  --chat--message--user--color: var(--chat--color-white);
+  --chat--message--pre--background: rgba(0, 0, 0, 0.05);
+  --chat--toggle--background: var(--chat--color-primary);
+  --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
+  --chat--toggle--active--background: var(--chat--color-primary-shade-100);
+  --chat--toggle--color: var(--chat--color-white);
+  --chat--toggle--size: 64px;
+}

package/event-buses/chatEventBus.d.ts

@@ -0,0 +1 @@
+export declare const chatEventBus: any;

package/event-buses/chatEventBus.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chatEventBus = void 0;
+var _utils = require("@n8n/chat/utils");
+const chatEventBus = exports.chatEventBus = (0, _utils.createEventBus)();

package/event-buses/chatEventBus.mjs

@@ -0,0 +1,2 @@
+import { createEventBus } from "@n8n/chat/utils";
+export const chatEventBus = createEventBus();

package/event-buses/index.d.ts

@@ -0,0 +1 @@
+export * from './chatEventBus';

package/event-buses/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _chatEventBus = require("./chatEventBus");
+Object.keys(_chatEventBus).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chatEventBus[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chatEventBus[key];
+    }
+  });
+});

package/event-buses/index.mjs

@@ -0,0 +1 @@
+export * from "./chatEventBus.mjs";

package/index.d.ts

@@ -0,0 +1,3 @@
+import './main.scss';
+import type { ChatOptions } from '@n8n/chat/types';
+export declare function createChat(options?: Partial<ChatOptions>): import("vue").App<Element>;

package/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createChat = createChat;
+require("./main.scss");
+var _vue = require("vue");
+var _App = _interopRequireDefault(require("./App.vue"));
+var _constants = require("@n8n/chat/constants");
+var _utils = require("@n8n/chat/utils");
+var _plugins = require("@n8n/chat/plugins");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function createChat(options) {
+  const resolvedOptions = {
+    ..._constants.defaultOptions,
+    ...options,
+    webhookConfig: {
+      ..._constants.defaultOptions.webhookConfig,
+      ...options?.webhookConfig
+    },
+    i18n: {
+      ..._constants.defaultOptions.i18n,
+      ...options?.i18n,
+      en: {
+        ..._constants.defaultOptions.i18n?.en,
+        ...options?.i18n?.en
+      }
+    },
+    theme: {
+      ..._constants.defaultOptions.theme,
+      ...options?.theme
+    }
+  };
+  const mountingTarget = resolvedOptions.target ?? _constants.defaultMountingTarget;
+  if (typeof mountingTarget === "string") {
+    (0, _utils.createDefaultMountingTarget)(mountingTarget);
+  }
+  const app = (0, _vue.createApp)(_App.default);
+  app.use(_plugins.ChatPlugin, resolvedOptions);
+  app.mount(mountingTarget);
+  return app;
+}

package/index.mjs

@@ -0,0 +1,36 @@
+import "./main.scss";
+import { createApp } from "vue";
+import App from "./App.vue";
+import { defaultMountingTarget, defaultOptions } from "@n8n/chat/constants";
+import { createDefaultMountingTarget } from "@n8n/chat/utils";
+import { ChatPlugin } from "@n8n/chat/plugins";
+export function createChat(options) {
+  const resolvedOptions = {
+    ...defaultOptions,
+    ...options,
+    webhookConfig: {
+      ...defaultOptions.webhookConfig,
+      ...options?.webhookConfig
+    },
+    i18n: {
+      ...defaultOptions.i18n,
+      ...options?.i18n,
+      en: {
+        ...defaultOptions.i18n?.en,
+        ...options?.i18n?.en
+      }
+    },
+    theme: {
+      ...defaultOptions.theme,
+      ...options?.theme
+    }
+  };
+  const mountingTarget = resolvedOptions.target ?? defaultMountingTarget;
+  if (typeof mountingTarget === "string") {
+    createDefaultMountingTarget(mountingTarget);
+  }
+  const app = createApp(App);
+  app.use(ChatPlugin, resolvedOptions);
+  app.mount(mountingTarget);
+  return app;
+}

package/main.css

@@ -0,0 +1,151 @@
+.n8n-chat {
+  /*!
+    Theme: GitHub
+    Description: Light theme as seen on github.com
+    Author: github.com
+    Maintainer: @Hirse
+    Updated: 2021-05-15
+
+    Outdated base version: https://github.com/primer/github-syntax-light
+    Current colors taken from GitHub's CSS
+  */
+}
+.n8n-chat pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+.n8n-chat code.hljs {
+  padding: 3px 5px;
+}
+.n8n-chat .hljs {
+  color: #24292e;
+  background: #ffffff;
+}
+.n8n-chat .hljs-doctag,
+.n8n-chat .hljs-keyword,
+.n8n-chat .hljs-meta .hljs-keyword,
+.n8n-chat .hljs-template-tag,
+.n8n-chat .hljs-template-variable,
+.n8n-chat .hljs-type,
+.n8n-chat .hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
+}
+.n8n-chat .hljs-title,
+.n8n-chat .hljs-title.class_,
+.n8n-chat .hljs-title.class_.inherited__,
+.n8n-chat .hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
+}
+.n8n-chat .hljs-attr,
+.n8n-chat .hljs-attribute,
+.n8n-chat .hljs-literal,
+.n8n-chat .hljs-meta,
+.n8n-chat .hljs-number,
+.n8n-chat .hljs-operator,
+.n8n-chat .hljs-variable,
+.n8n-chat .hljs-selector-attr,
+.n8n-chat .hljs-selector-class,
+.n8n-chat .hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
+}
+.n8n-chat .hljs-regexp,
+.n8n-chat .hljs-string,
+.n8n-chat .hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
+}
+.n8n-chat .hljs-built_in,
+.n8n-chat .hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
+}
+.n8n-chat .hljs-comment,
+.n8n-chat .hljs-code,
+.n8n-chat .hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
+}
+.n8n-chat .hljs-name,
+.n8n-chat .hljs-quote,
+.n8n-chat .hljs-selector-tag,
+.n8n-chat .hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
+}
+.n8n-chat .hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
+}
+.n8n-chat .hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
+}
+.n8n-chat .hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
+}
+.n8n-chat .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic;
+}
+.n8n-chat .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold;
+}
+.n8n-chat .hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.n8n-chat .hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+.n8n-chat .hljs-char.escape_,
+.n8n-chat .hljs-link,
+.n8n-chat .hljs-params,
+.n8n-chat .hljs-property,
+.n8n-chat .hljs-punctuation,
+.n8n-chat .hljs-tag {
+  /* purposely ignored */
+}
+
+:root {
+  --chat--color-primary: #e74266;
+  --chat--color-primary-shade-50: #db4061;
+  --chat--color-primary-shade-100: #cf3c5c;
+  --chat--color-secondary: #20b69e;
+  --chat--color-secondary-shade-50: #1ca08a;
+  --chat--color-white: #ffffff;
+  --chat--color-light: #f2f4f8;
+  --chat--color-light-shade-50: #e6e9f1;
+  --chat--color-light-shade-100: #c2c5cc;
+  --chat--color-medium: #d2d4d9;
+  --chat--color-dark: #101330;
+  --chat--color-disabled: #777980;
+  --chat--color-typing: #404040;
+  --chat--spacing: 1rem;
+  --chat--border-radius: 0.25rem;
+  --chat--transition-duration: 0.15s;
+  --chat--window--width: 400px;
+  --chat--window--height: 600px;
+  --chat--textarea--height: 50px;
+  --chat--message--bot--background: var(--chat--color-white);
+  --chat--message--bot--color: var(--chat--color-dark);
+  --chat--message--user--background: var(--chat--color-secondary);
+  --chat--message--user--color: var(--chat--color-white);
+  --chat--message--pre--background: rgba(0, 0, 0, 0.05);
+  --chat--toggle--background: var(--chat--color-primary);
+  --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
+  --chat--toggle--active--background: var(--chat--color-primary-shade-100);
+  --chat--toggle--color: var(--chat--color-white);
+  --chat--toggle--size: 64px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n8n/chat",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "main": "./chat.umd.cjs",
   "module": "./chat.es.js",
   "types": "./types/index.d.ts",
@@ -12,6 +12,10 @@
     "./style.css": {
       "import": "./style.css",
       "require": "./style.css"
+    },
+    "./*": {
+      "import": "./*",
+      "require": "./*"
     }
   },
   "dependencies": {
@@ -43,6 +47,7 @@
     "@vue/tsconfig": "^0.4.0",
     "eslint": "^8.45.0",
     "eslint-plugin-vue": "^9.15.1",
+    "fast-glob": "^3.3.2",
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
@@ -51,6 +56,7 @@
     "shelljs": "^0.8.5",
     "storybook": "^7.4.0",
     "typescript": "~5.1.6",
+    "unbuild": "^2.0.0",
     "unplugin-icons": "^0.17.0",
     "vite": "^4.4.6",
     "vite-plugin-dts": "^3.6.0",
@@ -65,9 +71,10 @@
   "homepage": "https://n8n.io",
   "scripts": {
     "dev": "pnpm run storybook",
-    "build": "run-p type-check build:vite && npm run build:prepare",
+    "build": "run-p type-check build:vite:full && pnpm run build:individual && npm run build:prepare",
     "build:vite": "vite build && npm run build:vite:full",
     "build:vite:full": "INCLUDE_VUE=true vite build",
+    "build:individual": "unbuild",
     "build:prepare": "node scripts/postbuild.js",
     "build:pack": "node scripts/pack.js",
     "preview": "vite preview",

package/plugins/chat.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vue';
+import type { ChatOptions } from '@n8n/chat/types';
+export declare const ChatPlugin: Plugin<ChatOptions>;

package/plugins/chat.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatPlugin = void 0;
+var _vue = require("vue");
+var _uuid = require("uuid");
+var _eventBuses = require("@n8n/chat/event-buses");
+var api = _interopRequireWildcard(require("@n8n/chat/api"));
+var _constants = require("@n8n/chat/constants");
+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); }
+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; }
+const ChatPlugin = exports.ChatPlugin = {
+  install(app, options) {
+    app.provide(_constants.ChatOptionsSymbol, options);
+    const messages = (0, _vue.ref)([]);
+    const currentSessionId = (0, _vue.ref)(null);
+    const waitingForResponse = (0, _vue.ref)(false);
+    const initialMessages = (0, _vue.computed)(() => (options.initialMessages ?? []).map(text => ({
+      id: (0, _uuid.v4)(),
+      text,
+      sender: "bot",
+      createdAt: /* @__PURE__ */new Date().toISOString()
+    })));
+    async function sendMessage(text) {
+      const sentMessage = {
+        id: (0, _uuid.v4)(),
+        text,
+        sender: "user",
+        createdAt: /* @__PURE__ */new Date().toISOString()
+      };
+      messages.value.push(sentMessage);
+      waitingForResponse.value = true;
+      void (0, _vue.nextTick)(() => {
+        _eventBuses.chatEventBus.emit("scrollToBottom");
+      });
+      const sendMessageResponse = await api.sendMessage(text, currentSessionId.value, options);
+      const receivedMessage = {
+        id: (0, _uuid.v4)(),
+        text: sendMessageResponse.output,
+        sender: "bot",
+        createdAt: /* @__PURE__ */new Date().toISOString()
+      };
+      messages.value.push(receivedMessage);
+      waitingForResponse.value = false;
+      void (0, _vue.nextTick)(() => {
+        _eventBuses.chatEventBus.emit("scrollToBottom");
+      });
+    }
+    async function loadPreviousSession() {
+      if (!options.loadPreviousSession) {
+        return;
+      }
+      const sessionId = localStorage.getItem(_constants.localStorageSessionIdKey) ?? (0, _uuid.v4)();
+      const previousMessagesResponse = await api.loadPreviousSession(sessionId, options);
+      const timestamp = /* @__PURE__ */new Date().toISOString();
+      messages.value = (previousMessagesResponse?.data || []).map((message, index) => ({
+        id: `${index}`,
+        text: message.kwargs.content,
+        sender: message.id.includes("HumanMessage") ? "user" : "bot",
+        createdAt: timestamp
+      }));
+      if (messages.value.length) {
+        currentSessionId.value = sessionId;
+      }
+      return sessionId;
+    }
+    async function startNewSession() {
+      currentSessionId.value = (0, _uuid.v4)();
+      localStorage.setItem(_constants.localStorageSessionIdKey, currentSessionId.value);
+    }
+    const chatStore = {
+      initialMessages,
+      messages,
+      currentSessionId,
+      waitingForResponse,
+      loadPreviousSession,
+      startNewSession,
+      sendMessage
+    };
+    app.provide(_constants.ChatSymbol, chatStore);
+    app.config.globalProperties.$chat = chatStore;
+  }
+};

package/plugins/chat.mjs

@@ -0,0 +1,83 @@
+import { computed, nextTick, ref } from "vue";
+import { v4 as uuidv4 } from "uuid";
+import { chatEventBus } from "@n8n/chat/event-buses";
+import * as api from "@n8n/chat/api";
+import { ChatOptionsSymbol, ChatSymbol, localStorageSessionIdKey } from "@n8n/chat/constants";
+export const ChatPlugin = {
+  install(app, options) {
+    app.provide(ChatOptionsSymbol, options);
+    const messages = ref([]);
+    const currentSessionId = ref(null);
+    const waitingForResponse = ref(false);
+    const initialMessages = computed(
+      () => (options.initialMessages ?? []).map((text) => ({
+        id: uuidv4(),
+        text,
+        sender: "bot",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      }))
+    );
+    async function sendMessage(text) {
+      const sentMessage = {
+        id: uuidv4(),
+        text,
+        sender: "user",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      messages.value.push(sentMessage);
+      waitingForResponse.value = true;
+      void nextTick(() => {
+        chatEventBus.emit("scrollToBottom");
+      });
+      const sendMessageResponse = await api.sendMessage(
+        text,
+        currentSessionId.value,
+        options
+      );
+      const receivedMessage = {
+        id: uuidv4(),
+        text: sendMessageResponse.output,
+        sender: "bot",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      messages.value.push(receivedMessage);
+      waitingForResponse.value = false;
+      void nextTick(() => {
+        chatEventBus.emit("scrollToBottom");
+      });
+    }
+    async function loadPreviousSession() {
+      if (!options.loadPreviousSession) {
+        return;
+      }
+      const sessionId = localStorage.getItem(localStorageSessionIdKey) ?? uuidv4();
+      const previousMessagesResponse = await api.loadPreviousSession(sessionId, options);
+      const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+      messages.value = (previousMessagesResponse?.data || []).map((message, index) => ({
+        id: `${index}`,
+        text: message.kwargs.content,
+        sender: message.id.includes("HumanMessage") ? "user" : "bot",
+        createdAt: timestamp
+      }));
+      if (messages.value.length) {
+        currentSessionId.value = sessionId;
+      }
+      return sessionId;
+    }
+    async function startNewSession() {
+      currentSessionId.value = uuidv4();
+      localStorage.setItem(localStorageSessionIdKey, currentSessionId.value);
+    }
+    const chatStore = {
+      initialMessages,
+      messages,
+      currentSessionId,
+      waitingForResponse,
+      loadPreviousSession,
+      startNewSession,
+      sendMessage
+    };
+    app.provide(ChatSymbol, chatStore);
+    app.config.globalProperties.$chat = chatStore;
+  }
+};

package/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from './chat';

package/plugins/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _chat = require("./chat");
+Object.keys(_chat).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chat[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chat[key];
+    }
+  });
+});

package/plugins/index.mjs

@@ -0,0 +1 @@
+export * from "./chat.mjs";

package/shims.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+	import { defineComponent } from 'vue';
+
+	const component: ReturnType<typeof defineComponent>;
+	export default component;
+}

package/types/chat.d.ts

@@ -0,0 +1,11 @@
+import type { ChatMessage } from '@n8n/chat/types/messages';
+import type { Ref } from 'vue';
+export interface Chat {
+    initialMessages: Ref<ChatMessage[]>;
+    messages: Ref<ChatMessage[]>;
+    currentSessionId: Ref<string | null>;
+    waitingForResponse: Ref<boolean>;
+    loadPreviousSession: () => Promise<string | undefined>;
+    startNewSession: () => Promise<void>;
+    sendMessage: (text: string) => Promise<void>;
+}

package/types/chat.js

@@ -0,0 +1 @@
+"use strict";

package/types/index.d.ts

@@ -1,2 +1,4 @@
-import type { ChatOptions } from './types';
-export declare function createChat(options?: Partial<ChatOptions>): import("vue").App<Element>;
+export * from './chat';
+export * from './messages';
+export * from './options';
+export * from './webhook';

package/types/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _chat = require("./chat");
+Object.keys(_chat).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chat[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chat[key];
+    }
+  });
+});
+var _messages = require("./messages");
+Object.keys(_messages).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _messages[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _messages[key];
+    }
+  });
+});
+var _options = require("./options");
+Object.keys(_options).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _options[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _options[key];
+    }
+  });
+});
+var _webhook = require("./webhook");
+Object.keys(_webhook).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _webhook[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _webhook[key];
+    }
+  });
+});

package/types/index.mjs

@@ -0,0 +1,4 @@
+export * from "./chat.mjs";
+export * from "./messages.mjs";
+export * from "./options.mjs";
+export * from "./webhook.mjs";

package/types/messages.d.ts

@@ -0,0 +1,6 @@
+export interface ChatMessage {
+    id: string;
+    text: string;
+    createdAt: string;
+    sender: 'user' | 'bot';
+}

package/types/messages.js

@@ -0,0 +1 @@
+"use strict";