@n8n/chat 0.5.2 → 0.6.0

package/components/Button.vue

@@ -1,34 +0,0 @@
-<template>
-	<button class="chat-button">
-		<slot />
-	</button>
-</template>
-<style>
-.chat-button {
-  display: inline-flex;
-  text-align: center;
-  vertical-align: middle;
-  user-select: none;
-  color: var(--chat--button--color, var(--chat--color-light));
-  background-color: var(--chat--button--background, var(--chat--color-primary));
-  border: 1px solid transparent;
-  padding: var(--chat--button--padding, calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing));
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: var(--chat--button--border-radius, var(--chat--border-radius));
-  transition: color var(--chat--transition-duration) ease-in-out, background-color var(--chat--transition-duration) ease-in-out, border-color var(--chat--transition-duration) ease-in-out, box-shadow var(--chat--transition-duration) ease-in-out;
-  cursor: pointer;
-}
-.chat-button:hover {
-  color: var(--chat--button--hover--color, var(--chat--color-light));
-  background-color: var(--chat--button--hover--background, var(--chat--color-primary-shade-50));
-  text-decoration: none;
-}
-.chat-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-.chat-button:disabled {
-  opacity: 0.65;
-}
-</style>

package/components/ChatWindow.vue

@@ -1,104 +0,0 @@
-<script lang="ts" setup>
-// eslint-disable-next-line import/no-unresolved
-import IconChat from 'virtual:icons/mdi/chat';
-// eslint-disable-next-line import/no-unresolved
-import IconChevronDown from 'virtual:icons/mdi/chevron-down';
-import Chat from '@n8n/chat/components/Chat.vue';
-import { nextTick, ref } from 'vue';
-import { chatEventBus } from '@n8n/chat/event-buses';
-
-const isOpen = ref(false);
-
-function toggle() {
-	isOpen.value = !isOpen.value;
-
-	if (isOpen.value) {
-		void nextTick(() => {
-			chatEventBus.emit('scrollToBottom');
-		});
-	}
-}
-</script>
-
-<template>
-	<div class="chat-window-wrapper">
-		<Transition name="chat-window-transition">
-			<div class="chat-window" v-show="isOpen">
-				<Chat />
-			</div>
-		</Transition>
-		<div class="chat-window-toggle" @click="toggle">
-			<Transition name="chat-window-toggle-transition" mode="out-in">
-				<IconChat v-if="!isOpen" height="32" width="32" />
-				<IconChevronDown v-else height="32" width="32" />
-			</Transition>
-		</div>
-	</div>
-</template>
-
-<style>
-.chat-window-wrapper {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  bottom: var(--chat--window--bottom, var(--chat--spacing));
-  right: var(--chat--window--right, var(--chat--spacing));
-  z-index: var(--chat--window--z-index, 9999);
-  max-width: calc(100% - var(--chat--window--right, var(--chat--spacing)) * 2);
-  max-height: calc(100% - var(--chat--window--bottom, var(--chat--spacing)) * 2);
-}
-.chat-window-wrapper .chat-window {
-  display: flex;
-  width: var(--chat--window--width);
-  height: var(--chat--window--height);
-  max-width: 100%;
-  max-height: 100%;
-  border: var(--chat--window--border, 1px solid var(--chat--color-light-shade-100));
-  border-radius: var(--chat--window--border-radius, var(--chat--border-radius));
-  margin-bottom: var(--chat--window--margin-bottom, var(--chat--spacing));
-  overflow: hidden;
-  transform-origin: bottom right;
-}
-.chat-window-wrapper .chat-window .chat-layout {
-  width: auto;
-  height: auto;
-  flex: 1;
-}
-.chat-window-wrapper .chat-window-toggle {
-  flex: 0 0 auto;
-  background: var(--chat--toggle--background);
-  color: var(--chat--toggle--color);
-  cursor: pointer;
-  width: var(--chat--toggle--width, var(--chat--toggle--size));
-  height: var(--chat--toggle--height, var(--chat--toggle--size));
-  border-radius: var(--chat--toggle--border-radius, 50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  transition: transform var(--chat--transition-duration) ease, background var(--chat--transition-duration) ease;
-}
-.chat-window-wrapper .chat-window-toggle:hover, .chat-window-wrapper .chat-window-toggle:focus {
-  transform: scale(1.05);
-  background: var(--chat--toggle--hover--background);
-}
-.chat-window-wrapper .chat-window-toggle:active {
-  transform: scale(0.95);
-  background: var(--chat--toggle--active--background);
-}
-
-.chat-window-transition-enter-active, .chat-window-transition-leave-active {
-  transition: transform var(--chat--transition-duration) ease, opacity var(--chat--transition-duration) ease;
-}
-.chat-window-transition-enter-from, .chat-window-transition-leave-to {
-  transform: scale(0);
-  opacity: 0;
-}
-
-.chat-window-toggle-transition-enter-active, .chat-window-toggle-transition-leave-active {
-  transition: opacity var(--chat--transition-duration) ease;
-}
-.chat-window-toggle-transition-enter-from, .chat-window-toggle-transition-leave-to {
-  opacity: 0;
-}
-</style>

package/components/GetStarted.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import Button from '@n8n/chat/components/Button.vue';
-import { useI18n } from '@n8n/chat/composables';
-
-const { t } = useI18n();
-</script>
-<template>
-	<div class="chat-get-started">
-		<Button @click="$emit('click:button')">
-			{{ t('getStarted') }}
-		</Button>
-	</div>
-</template>
-
-<style>
-.chat-get-started {
-  padding-top: var(--chat--spacing);
-  padding-bottom: var(--chat--spacing);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-</style>

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