@n8n/chat 0.6.0 → 0.6.1

package/components/ChatWindow.vue

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

@@ -0,0 +1,24 @@
+<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/{src/components → components}/GetStartedFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useI18n } from '@/composables';
-import PoweredBy from '@/components/PoweredBy.vue';
+import { useI18n } from '@n8n/chat/composables';
+import PoweredBy from '@n8n/chat/components/PoweredBy.vue';
 
 const { t, te } = useI18n();
 </script>
@@ -13,8 +13,8 @@ const { t, te } = useI18n();
 	</div>
 </template>
 
-<style lang="scss">
+<style>
 .chat-get-started-footer {
-	padding: var(--chat--spacing);
+  padding: var(--chat--spacing);
 }
 </style>

package/{src/components → components}/Input.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // eslint-disable-next-line import/no-unresolved
 import IconSend from 'virtual:icons/mdi/send';
-import { useI18n, useChat } from '@/composables';
+import { useI18n, useChat } from '@n8n/chat/composables';
 import { computed, ref } from 'vue';
 
 const chatStore = useChat();
@@ -49,45 +49,40 @@ async function onSubmitKeydown(event: KeyboardEvent) {
 	</div>
 </template>
 
-<style lang="scss">
+<style>
 .chat-input {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-
-	textarea {
-		font-family: inherit;
-		font-size: inherit;
-		width: 100%;
-		border: 0;
-		padding: var(--chat--spacing);
-		max-height: var(--chat--textarea--height);
-		resize: none;
-	}
-
-	.chat-input-send-button {
-		height: var(--chat--textarea--height);
-		width: var(--chat--textarea--height);
-		background: white;
-		cursor: pointer;
-		color: var(--chat--color-secondary);
-		border: 0;
-		font-size: 24px;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		transition: color var(--chat--transition-duration) ease;
-
-		&:hover,
-		&:focus {
-			color: var(--chat--color-secondary-shade-50);
-		}
-
-		&[disabled] {
-			cursor: default;
-			color: var(--chat--color-disabled);
-		}
-	}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.chat-input textarea {
+  font-family: inherit;
+  font-size: inherit;
+  width: 100%;
+  border: 0;
+  padding: var(--chat--spacing);
+  max-height: var(--chat--textarea--height);
+  resize: none;
+}
+.chat-input .chat-input-send-button {
+  height: var(--chat--textarea--height);
+  width: var(--chat--textarea--height);
+  background: white;
+  cursor: pointer;
+  color: var(--chat--color-secondary);
+  border: 0;
+  font-size: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--chat--transition-duration) ease;
+}
+.chat-input .chat-input-send-button:hover, .chat-input .chat-input-send-button:focus {
+  color: var(--chat--color-secondary-shade-50);
+}
+.chat-input .chat-input-send-button[disabled] {
+  cursor: default;
+  color: var(--chat--color-disabled);
 }
 </style>

package/components/Layout.vue

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

@@ -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/{src/components → components}/MessagesList.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
-import Message from '@/components/Message.vue';
-import type { ChatMessage } from '@/types';
-import MessageTyping from '@/components/MessageTyping.vue';
-import { useChat } from '@/composables';
+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: {
@@ -28,10 +28,10 @@ const { initialMessages, waitingForResponse } = chatStore;
 	</div>
 </template>
 
-<style lang="scss">
+<style>
 .chat-messages-list {
-	margin-top: auto;
-	display: block;
-	padding: var(--chat--messages-list--padding, var(--chat--spacing));
+  margin-top: auto;
+  display: block;
+  padding: var(--chat--messages-list--padding, var(--chat--spacing));
 }
 </style>

package/{src/components → components}/PoweredBy.vue

@@ -5,13 +5,12 @@
 	</div>
 </template>
 
-<style lang="scss">
+<style>
 .chat-powered-by {
-	text-align: center;
-
-	a {
-		color: var(--chat--color-primary);
-		text-decoration: none;
-	}
+  text-align: center;
+}
+.chat-powered-by a {
+  color: var(--chat--color-primary);
+  text-decoration: none;
 }
 </style>

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