@n8n/chat 0.5.0 → 0.5.2

package/components/Message.vue

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

@@ -0,0 +1,101 @@
+<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/MessagesList.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import Message from '@n8n/chat/components/Message.vue';
+import type { ChatMessage } from '@n8n/chat/types';
+import MessageTyping from '@n8n/chat/components/MessageTyping.vue';
+import { useChat } from '@n8n/chat/composables';
+
+defineProps({
+	messages: {
+		type: Array as PropType<ChatMessage[]>,
+		required: true,
+	},
+});
+
+const chatStore = useChat();
+
+const { initialMessages, waitingForResponse } = chatStore;
+</script>
+<template>
+	<div class="chat-messages-list">
+		<Message
+			v-for="initialMessage in initialMessages"
+			:key="initialMessage.id"
+			:message="initialMessage"
+		/>
+		<Message v-for="message in messages" :key="message.id" :message="message" />
+		<MessageTyping v-if="waitingForResponse" />
+	</div>
+</template>
+
+<style>
+.chat-messages-list {
+  margin-top: auto;
+  display: block;
+  padding: var(--chat--messages-list--padding, var(--chat--spacing));
+}
+</style>

package/components/PoweredBy.vue

@@ -0,0 +1,16 @@
+<template>
+	<div class="chat-powered-by">
+		Powered by
+		<a href="https://n8n.io?utm_source=n8n-external&utm_medium=widget-powered-by">n8n</a>
+	</div>
+</template>
+
+<style>
+.chat-powered-by {
+  text-align: center;
+}
+.chat-powered-by a {
+  color: var(--chat--color-primary);
+  text-decoration: none;
+}
+</style>

package/components/index.d.ts

@@ -0,0 +1,10 @@
+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/components/index.js

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

@@ -0,0 +1,10 @@
+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.d.ts

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

package/composables/index.js

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

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

package/composables/useChat.d.ts

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

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.d.ts

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

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/constants/localStorage.mjs

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