@n8n/chat 0.6.0 → 0.6.1

package/composables/useChat.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChat = useChat;
+var _vue = require("vue");
+var _constants = require("@n8n/chat/constants");
+function useChat() {
+  return (0, _vue.inject)(_constants.ChatSymbol);
+}

package/composables/useChat.mjs

@@ -0,0 +1,5 @@
+import { inject } from "vue";
+import { ChatSymbol } from "@n8n/chat/constants";
+export function useChat() {
+  return inject(ChatSymbol);
+}

package/composables/useI18n.d.ts

@@ -0,0 +1,4 @@
+export declare function useI18n(): {
+    t: (key: string) => string;
+    te: (key: string) => boolean;
+};

package/composables/useI18n.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useI18n = useI18n;
+var _useOptions = require("@n8n/chat/composables/useOptions");
+function useI18n() {
+  const {
+    options
+  } = (0, _useOptions.useOptions)();
+  const language = options?.defaultLanguage ?? "en";
+  function t(key) {
+    return options?.i18n?.[language]?.[key] ?? key;
+  }
+  function te(key) {
+    return !!options?.i18n?.[language]?.[key];
+  }
+  return {
+    t,
+    te
+  };
+}

package/composables/useI18n.mjs

@@ -0,0 +1,12 @@
+import { useOptions } from "@n8n/chat/composables/useOptions";
+export function useI18n() {
+  const { options } = useOptions();
+  const language = options?.defaultLanguage ?? "en";
+  function t(key) {
+    return options?.i18n?.[language]?.[key] ?? key;
+  }
+  function te(key) {
+    return !!options?.i18n?.[language]?.[key];
+  }
+  return { t, te };
+}

package/composables/useOptions.d.ts

@@ -0,0 +1,3 @@
+export declare function useOptions(): {
+    options: ChatOptions;
+};

package/composables/useOptions.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOptions = useOptions;
+var _vue = require("vue");
+var _constants = require("@n8n/chat/constants");
+function useOptions() {
+  const options = (0, _vue.inject)(_constants.ChatOptionsSymbol);
+  return {
+    options
+  };
+}

package/composables/useOptions.mjs

@@ -0,0 +1,8 @@
+import { inject } from "vue";
+import { ChatOptionsSymbol } from "@n8n/chat/constants";
+export function useOptions() {
+  const options = inject(ChatOptionsSymbol);
+  return {
+    options
+  };
+}

package/constants/defaults.d.ts

@@ -0,0 +1,3 @@
+import type { ChatOptions } from '@n8n/chat/types';
+export declare const defaultOptions: ChatOptions;
+export declare const defaultMountingTarget = "#n8n-chat";

package/constants/defaults.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = exports.defaultMountingTarget = void 0;
+const defaultOptions = exports.defaultOptions = {
+  webhookUrl: "http://localhost:5678",
+  webhookConfig: {
+    method: "POST",
+    headers: {}
+  },
+  target: "#n8n-chat",
+  mode: "window",
+  loadPreviousSession: true,
+  chatInputKey: "chatInput",
+  chatSessionKey: "sessionId",
+  defaultLanguage: "en",
+  showWelcomeScreen: false,
+  initialMessages: ["Hi there! \u{1F44B}", "My name is Nathan. How can I assist you today?"],
+  i18n: {
+    en: {
+      title: "Hi there! \u{1F44B}",
+      subtitle: "Start a chat. We're here to help you 24/7.",
+      footer: "",
+      getStarted: "New Conversation",
+      inputPlaceholder: "Type your question.."
+    }
+  },
+  theme: {}
+};
+const defaultMountingTarget = exports.defaultMountingTarget = "#n8n-chat";

package/constants/defaults.mjs

@@ -0,0 +1,26 @@
+export const defaultOptions = {
+  webhookUrl: "http://localhost:5678",
+  webhookConfig: {
+    method: "POST",
+    headers: {}
+  },
+  target: "#n8n-chat",
+  mode: "window",
+  loadPreviousSession: true,
+  chatInputKey: "chatInput",
+  chatSessionKey: "sessionId",
+  defaultLanguage: "en",
+  showWelcomeScreen: false,
+  initialMessages: ["Hi there! \u{1F44B}", "My name is Nathan. How can I assist you today?"],
+  i18n: {
+    en: {
+      title: "Hi there! \u{1F44B}",
+      subtitle: "Start a chat. We're here to help you 24/7.",
+      footer: "",
+      getStarted: "New Conversation",
+      inputPlaceholder: "Type your question.."
+    }
+  },
+  theme: {}
+};
+export const defaultMountingTarget = "#n8n-chat";

package/constants/index.js

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

package/constants/index.mjs

@@ -0,0 +1,3 @@
+export * from "./defaults.mjs";
+export * from "./localStorage.mjs";
+export * from "./symbols.mjs";

package/constants/localStorage.d.ts

@@ -0,0 +1,2 @@
+export declare const localStorageNamespace = "n8n-chat";
+export declare const localStorageSessionIdKey = "n8n-chat/sessionId";

package/constants/localStorage.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.localStorageSessionIdKey = exports.localStorageNamespace = void 0;
+const localStorageNamespace = exports.localStorageNamespace = "n8n-chat";
+const localStorageSessionIdKey = exports.localStorageSessionIdKey = `${localStorageNamespace}/sessionId`;

package/{src/constants/localStorage.ts → constants/localStorage.mjs}

@@ -1,2 +1,2 @@
-export const localStorageNamespace = 'n8n-chat';
+export const localStorageNamespace = "n8n-chat";
 export const localStorageSessionIdKey = `${localStorageNamespace}/sessionId`;

package/constants/symbols.d.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue';
+export declare const ChatSymbol: InjectionKey<Chat>;
+export declare const ChatOptionsSymbol: InjectionKey<ChatOptions>;

package/constants/symbols.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatSymbol = exports.ChatOptionsSymbol = void 0;
+const ChatSymbol = exports.ChatSymbol = "Chat";
+const ChatOptionsSymbol = exports.ChatOptionsSymbol = "ChatOptions";

package/constants/symbols.mjs

@@ -0,0 +1,2 @@
+export const ChatSymbol = "Chat";
+export const ChatOptionsSymbol = "ChatOptions";

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.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,23 +1,59 @@
 {
   "name": "@n8n/chat",
-  "version": "0.6.0",
-  "main": "./chat.umd.cjs",
+  "version": "0.6.1",
+  "main": "./chat.umd.js",
   "module": "./chat.es.js",
   "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./chat.es.js",
-      "require": "./chat.umd.cjs"
+      "import": "./index.mjs",
+      "require": "./index.js"
     },
     "./style.css": {
       "import": "./style.css",
       "require": "./style.css"
+    },
+    "./*": {
+      "import": "./*",
+      "require": "./*"
     }
   },
+  "dependencies": {
+    "highlight.js": "^11.8.0",
+    "uuid": "^8.3.2",
+    "vue": "^3.3.4",
+    "vue-markdown-render": "^2.0.1"
+  },
+  "devDependencies": {
+    "@iconify-json/mdi": "^1.1.54",
+    "shelljs": "^0.8.5",
+    "unbuild": "^2.0.0",
+    "unplugin-icons": "^0.17.0",
+    "vite-plugin-dts": "^3.6.4"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/n8n-io/n8n.git"
   },
   "license": "SEE LICENSE IN LICENSE.md",
-  "homepage": "https://n8n.io"
+  "homepage": "https://n8n.io",
+  "scripts": {
+    "dev": "pnpm run storybook",
+    "build": "pnpm type-check && pnpm build:vite && pnpm run build:individual && npm run build:prepare",
+    "build:full": "pnpm type-check && pnpm build:vite && pnpm build:vite:full && pnpm run build:individual && npm run build:prepare",
+    "build:vite": "vite build",
+    "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",
+    "test:dev": "vitest",
+    "test": "vitest run --coverage",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore --ignore-path .eslintignore",
+    "format": "prettier --write src/",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build:storybook": "storybook build",
+    "release": "pnpm run build:full && cd dist && pnpm publish"
+  }
 }

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>;