@n8n/chat 0.6.1 → 0.7.0

package/components/Layout.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { chatEventBus } from '@n8n/chat/event-buses';
-
-const chatBodyRef = ref<HTMLElement | null>(null);
-
-function scrollToBottom() {
-	const element = chatBodyRef.value as HTMLElement;
-	if (element) {
-		element.scrollTop = element.scrollHeight;
-	}
-}
-
-onMounted(() => {
-	chatEventBus.on('scrollToBottom', scrollToBottom);
-	window.addEventListener('resize', scrollToBottom);
-});
-
-onBeforeUnmount(() => {
-	chatEventBus.off('scrollToBottom', scrollToBottom);
-	window.removeEventListener('resize', scrollToBottom);
-});
-</script>
-<template>
-	<main class="chat-layout">
-		<div v-if="$slots.header" class="chat-header">
-			<slot name="header" />
-		</div>
-		<div v-if="$slots.default" class="chat-body" ref="chatBodyRef">
-			<slot />
-		</div>
-		<div v-if="$slots.footer" class="chat-footer">
-			<slot name="footer" />
-		</div>
-	</main>
-</template>
-
-<style>
-.chat-layout {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  overflow-y: auto;
-  flex-direction: column;
-  font-family: var(--chat--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
-}
-.chat-layout .chat-header {
-  padding: var(--chat--header--padding, var(--chat--spacing));
-  background: var(--chat--header--background, var(--chat--color-dark));
-  color: var(--chat--header--color, var(--chat--color-light));
-}
-.chat-layout .chat-body {
-  background: var(--chat--body--background, var(--chat--color-light));
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  position: relative;
-  min-height: 100px;
-}
-.chat-layout .chat-footer {
-  border-top: 1px solid var(--chat--color-light-shade-100);
-  background: var(--chat--footer--background, var(--chat--color-light));
-  color: var(--chat--footer--color, var(--chat--color-dark));
-}
-</style>

package/components/Message.vue

@@ -1,94 +0,0 @@
-<script lang="ts" setup>
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { ChatMessage } from '@n8n/chat/types';
-import type { PropType } from 'vue';
-import { computed, toRefs } from 'vue';
-import VueMarkdown from 'vue-markdown-render';
-import hljs from 'highlight.js/lib/core';
-
-const props = defineProps({
-	message: {
-		type: Object as PropType<ChatMessage>,
-		required: true,
-	},
-});
-
-const { message } = toRefs(props);
-
-const messageText = computed(() => {
-	return message.value.text || '&lt;Empty response&gt;';
-});
-
-const classes = computed(() => {
-	return {
-		'chat-message-from-user': message.value.sender === 'user',
-		'chat-message-from-bot': message.value.sender === 'bot',
-	};
-});
-
-const markdownOptions = {
-	highlight(str: string, lang: string) {
-		if (lang && hljs.getLanguage(lang)) {
-			try {
-				return hljs.highlight(str, { language: lang }).value;
-			} catch {}
-		}
-
-		return ''; // use external default escaping
-	},
-};
-</script>
-<template>
-	<div class="chat-message" :class="classes">
-		<slot>
-			<vue-markdown
-				class="chat-message-markdown"
-				:source="messageText"
-				:options="markdownOptions"
-			/>
-		</slot>
-	</div>
-</template>
-
-<style>
-.chat-message {
-  display: block;
-  max-width: 80%;
-  padding: var(--chat--message--padding, var(--chat--spacing));
-  border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
-}
-.chat-message + .chat-message {
-  margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 0.5));
-}
-.chat-message.chat-message-from-bot {
-  background-color: var(--chat--message--bot--background);
-  color: var(--chat--message--bot--color);
-  border-bottom-left-radius: 0;
-}
-.chat-message.chat-message-from-user {
-  background-color: var(--chat--message--user--background);
-  color: var(--chat--message--user--color);
-  margin-left: auto;
-  border-bottom-right-radius: 0;
-}
-.chat-message > .chat-message-markdown {
-  display: block;
-  box-sizing: border-box;
-}
-.chat-message > .chat-message-markdown > *:first-child {
-  margin-top: 0;
-}
-.chat-message > .chat-message-markdown > *:last-child {
-  margin-bottom: 0;
-}
-.chat-message > .chat-message-markdown pre {
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre-wrap;
-  box-sizing: border-box;
-  padding: var(--chat--spacing);
-  background: var(--chat--message--pre--background);
-  border-radius: var(--chat--border-radius);
-}
-</style>

package/components/MessageTyping.vue

@@ -1,101 +0,0 @@
-<script lang="ts" setup>
-import type { ChatMessage } from '@n8n/chat/types';
-import { Message } from './index';
-import type { PropType } from 'vue';
-import { computed } from 'vue';
-
-const props = defineProps({
-	animation: {
-		type: String as PropType<'bouncing' | 'scaling'>,
-		default: 'bouncing',
-	},
-});
-
-const message: ChatMessage = {
-	id: 'typing',
-	text: '',
-	sender: 'bot',
-	createdAt: '',
-};
-
-const classes = computed(() => {
-	return {
-		// eslint-disable-next-line @typescript-eslint/naming-convention
-		'chat-message-typing': true,
-		[`chat-message-typing-animation-${props.animation}`]: true,
-	};
-});
-</script>
-<template>
-	<Message :class="classes" :message="message">
-		<div class="chat-message-typing-body">
-			<span class="chat-message-typing-circle"></span>
-			<span class="chat-message-typing-circle"></span>
-			<span class="chat-message-typing-circle"></span>
-		</div>
-	</Message>
-</template>
-<style>
-.chat-message-typing {
-  max-width: 80px;
-}
-.chat-message-typing.chat-message-typing-animation-scaling .chat-message-typing-circle {
-  animation: chat-message-typing-animation-scaling 800ms ease-in-out infinite;
-  animation-delay: 3600ms;
-}
-.chat-message-typing.chat-message-typing-animation-bouncing .chat-message-typing-circle {
-  animation: chat-message-typing-animation-bouncing 800ms ease-in-out infinite;
-  animation-delay: 3600ms;
-}
-.chat-message-typing .chat-message-typing-body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.chat-message-typing .chat-message-typing-circle {
-  display: block;
-  height: 10px;
-  width: 10px;
-  border-radius: 50%;
-  background-color: var(--chat--color-typing);
-  margin: 3px;
-}
-.chat-message-typing .chat-message-typing-circle:nth-child(1) {
-  animation-delay: 0ms;
-}
-.chat-message-typing .chat-message-typing-circle:nth-child(2) {
-  animation-delay: 333ms;
-}
-.chat-message-typing .chat-message-typing-circle:nth-child(3) {
-  animation-delay: 666ms;
-}
-
-@keyframes chat-message-typing-animation-scaling {
-  0% {
-    transform: scale(1);
-  }
-  33% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.4);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes chat-message-typing-animation-bouncing {
-  0% {
-    transform: translateY(0);
-  }
-  33% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-</style>

package/components/index.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () {
-    return _Button.default;
-  }
-});
-Object.defineProperty(exports, "Chat", {
-  enumerable: true,
-  get: function () {
-    return _Chat.default;
-  }
-});
-Object.defineProperty(exports, "ChatWindow", {
-  enumerable: true,
-  get: function () {
-    return _ChatWindow.default;
-  }
-});
-Object.defineProperty(exports, "GetStarted", {
-  enumerable: true,
-  get: function () {
-    return _GetStarted.default;
-  }
-});
-Object.defineProperty(exports, "GetStartedFooter", {
-  enumerable: true,
-  get: function () {
-    return _GetStartedFooter.default;
-  }
-});
-Object.defineProperty(exports, "Input", {
-  enumerable: true,
-  get: function () {
-    return _Input.default;
-  }
-});
-Object.defineProperty(exports, "Layout", {
-  enumerable: true,
-  get: function () {
-    return _Layout.default;
-  }
-});
-Object.defineProperty(exports, "Message", {
-  enumerable: true,
-  get: function () {
-    return _Message.default;
-  }
-});
-Object.defineProperty(exports, "MessagesList", {
-  enumerable: true,
-  get: function () {
-    return _MessagesList.default;
-  }
-});
-Object.defineProperty(exports, "PoweredBy", {
-  enumerable: true,
-  get: function () {
-    return _PoweredBy.default;
-  }
-});
-var _Button = _interopRequireDefault(require("./Button.vue"));
-var _Chat = _interopRequireDefault(require("./Chat.vue"));
-var _ChatWindow = _interopRequireDefault(require("./ChatWindow.vue"));
-var _GetStarted = _interopRequireDefault(require("./GetStarted.vue"));
-var _GetStartedFooter = _interopRequireDefault(require("./GetStartedFooter.vue"));
-var _Input = _interopRequireDefault(require("./Input.vue"));
-var _Layout = _interopRequireDefault(require("./Layout.vue"));
-var _Message = _interopRequireDefault(require("./Message.vue"));
-var _MessagesList = _interopRequireDefault(require("./MessagesList.vue"));
-var _PoweredBy = _interopRequireDefault(require("./PoweredBy.vue"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/components/index.mjs

@@ -1,10 +0,0 @@
-export { default as Button } from "./Button.vue";
-export { default as Chat } from "./Chat.vue";
-export { default as ChatWindow } from "./ChatWindow.vue";
-export { default as GetStarted } from "./GetStarted.vue";
-export { default as GetStartedFooter } from "./GetStartedFooter.vue";
-export { default as Input } from "./Input.vue";
-export { default as Layout } from "./Layout.vue";
-export { default as Message } from "./Message.vue";
-export { default as MessagesList } from "./MessagesList.vue";
-export { default as PoweredBy } from "./PoweredBy.vue";

package/composables/index.js

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

package/composables/index.mjs

@@ -1,3 +0,0 @@
-export * from "./useChat.mjs";
-export * from "./useI18n.mjs";
-export * from "./useOptions.mjs";

package/composables/useChat.d.ts

@@ -1 +0,0 @@
-export declare function useChat(): Chat;

package/composables/useChat.js

@@ -1,11 +0,0 @@
-"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

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

package/composables/useI18n.d.ts

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

package/composables/useI18n.js

@@ -1,23 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

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

package/composables/useOptions.js

@@ -1,14 +0,0 @@
-"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

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

package/constants/defaults.d.ts

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

package/constants/defaults.js

@@ -1,32 +0,0 @@
-"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

@@ -1,26 +0,0 @@
-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

@@ -1,38 +0,0 @@
-"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

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

package/constants/localStorage.d.ts

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

package/constants/localStorage.js

@@ -1,8 +0,0 @@
-"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/constants/symbols.d.ts

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

package/constants/symbols.js

@@ -1,8 +0,0 @@
-"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

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

package/css/index.css

@@ -1,31 +0,0 @@
-: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

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

package/event-buses/chatEventBus.js

@@ -1,8 +0,0 @@
-"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)();