@n8n/chat 0.5.1 → 0.5.2

package/__tests__/utils/selectors.mjs

@@ -0,0 +1,41 @@
+import { screen } from "@testing-library/vue";
+import { defaultMountingTarget } from "@n8n/chat/constants";
+export function getMountingTarget(target = defaultMountingTarget) {
+  return document.querySelector(target);
+}
+export function getChatWindowWrapper() {
+  return document.querySelector(".chat-window-wrapper");
+}
+export function getChatWindowToggle() {
+  return document.querySelector(".chat-window-toggle");
+}
+export function getChatWrapper() {
+  return document.querySelector(".chat-wrapper");
+}
+export function getChatMessages() {
+  return document.querySelectorAll(".chat-message:not(.chat-message-typing)");
+}
+export function getChatMessage(index) {
+  const messages = getChatMessages();
+  return index < 0 ? messages[messages.length + index] : messages[index];
+}
+export function getChatMessageByText(text) {
+  return screen.queryByText(text, {
+    selector: ".chat-message:not(.chat-message-typing) .chat-message-markdown p"
+  });
+}
+export function getChatMessageTyping() {
+  return document.querySelector(".chat-message-typing");
+}
+export function getGetStartedButton() {
+  return document.querySelector(".chat-get-started .chat-button");
+}
+export function getChatInput() {
+  return document.querySelector(".chat-input");
+}
+export function getChatInputTextarea() {
+  return document.querySelector(".chat-input textarea");
+}
+export function getChatInputSendButton() {
+  return document.querySelector(".chat-input .chat-input-send-button");
+}

package/api/generic.d.ts

@@ -0,0 +1,6 @@
+export declare function authenticatedFetch<T>(...args: Parameters<typeof fetch>): Promise<T>;
+export declare function get<T>(url: string, query?: object, options?: RequestInit): Promise<T>;
+export declare function post<T>(url: string, body?: object, options?: RequestInit): Promise<T>;
+export declare function put<T>(url: string, body?: object, options?: RequestInit): Promise<T>;
+export declare function patch<T>(url: string, body?: object, options?: RequestInit): Promise<T>;
+export declare function del<T>(url: string, body?: object, options?: RequestInit): Promise<T>;

package/api/generic.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.authenticatedFetch = authenticatedFetch;
+exports.del = del;
+exports.get = get;
+exports.patch = patch;
+exports.post = post;
+exports.put = put;
+async function getAccessToken() {
+  return "";
+}
+async function authenticatedFetch(...args) {
+  const accessToken = await getAccessToken();
+  const response = await fetch(args[0], {
+    ...args[1],
+    mode: "cors",
+    cache: "no-cache",
+    headers: {
+      "Content-Type": "application/json",
+      ...(accessToken ? {
+        authorization: `Bearer ${accessToken}`
+      } : {}),
+      ...args[1]?.headers
+    }
+  });
+  return await response.json();
+}
+async function get(url, query = {}, options = {}) {
+  let resolvedUrl = url;
+  if (Object.keys(query).length > 0) {
+    resolvedUrl = `${resolvedUrl}?${new URLSearchParams(query).toString()}`;
+  }
+  return authenticatedFetch(resolvedUrl, {
+    ...options,
+    method: "GET"
+  });
+}
+async function post(url, body = {}, options = {}) {
+  return authenticatedFetch(url, {
+    ...options,
+    method: "POST",
+    body: JSON.stringify(body)
+  });
+}
+async function put(url, body = {}, options = {}) {
+  return authenticatedFetch(url, {
+    ...options,
+    method: "PUT",
+    body: JSON.stringify(body)
+  });
+}
+async function patch(url, body = {}, options = {}) {
+  return authenticatedFetch(url, {
+    ...options,
+    method: "PATCH",
+    body: JSON.stringify(body)
+  });
+}
+async function del(url, body = {}, options = {}) {
+  return authenticatedFetch(url, {
+    ...options,
+    method: "DELETE",
+    body: JSON.stringify(body)
+  });
+}

package/api/generic.mjs

@@ -0,0 +1,54 @@
+async function getAccessToken() {
+  return "";
+}
+export async function authenticatedFetch(...args) {
+  const accessToken = await getAccessToken();
+  const response = await fetch(args[0], {
+    ...args[1],
+    mode: "cors",
+    cache: "no-cache",
+    headers: {
+      "Content-Type": "application/json",
+      ...accessToken ? { authorization: `Bearer ${accessToken}` } : {},
+      ...args[1]?.headers
+    }
+  });
+  return await response.json();
+}
+export async function get(url, query = {}, options = {}) {
+  let resolvedUrl = url;
+  if (Object.keys(query).length > 0) {
+    resolvedUrl = `${resolvedUrl}?${new URLSearchParams(
+      query
+    ).toString()}`;
+  }
+  return authenticatedFetch(resolvedUrl, { ...options, method: "GET" });
+}
+export async function post(url, body = {}, options = {}) {
+  return authenticatedFetch(url, {
+    ...options,
+    method: "POST",
+    body: JSON.stringify(body)
+  });
+}
+export async function put(url, body = {}, options = {}) {
+  return authenticatedFetch(url, {
+    ...options,
+    method: "PUT",
+    body: JSON.stringify(body)
+  });
+}
+export async function patch(url, body = {}, options = {}) {
+  return authenticatedFetch(url, {
+    ...options,
+    method: "PATCH",
+    body: JSON.stringify(body)
+  });
+}
+export async function del(url, body = {}, options = {}) {
+  return authenticatedFetch(url, {
+    ...options,
+    method: "DELETE",
+    body: JSON.stringify(body)
+  });
+}

package/api/index.d.ts

@@ -0,0 +1,2 @@
+export * from './generic';
+export * from './message';

package/api/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _generic = require("./generic");
+Object.keys(_generic).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _generic[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _generic[key];
+    }
+  });
+});
+var _message = require("./message");
+Object.keys(_message).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _message[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _message[key];
+    }
+  });
+});

package/api/index.mjs

@@ -0,0 +1,2 @@
+export * from "./generic.mjs";
+export * from "./message.mjs";

package/api/message.d.ts

@@ -0,0 +1,3 @@
+import type { ChatOptions } from '@n8n/chat/types';
+export declare function loadPreviousSession(sessionId: string, options: ChatOptions): Promise<any>;
+export declare function sendMessage(message: string, sessionId: string, options: ChatOptions): Promise<any>;

package/api/message.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadPreviousSession = loadPreviousSession;
+exports.sendMessage = sendMessage;
+var _generic = require("@n8n/chat/api/generic");
+async function loadPreviousSession(sessionId, options) {
+  const method = options.webhookConfig?.method === "POST" ? _generic.post : _generic.get;
+  return method(`${options.webhookUrl}`, {
+    action: "loadPreviousSession",
+    [options.chatSessionKey]: sessionId,
+    ...(options.metadata ? {
+      metadata: options.metadata
+    } : {})
+  }, {
+    headers: options.webhookConfig?.headers
+  });
+}
+async function sendMessage(message, sessionId, options) {
+  const method = options.webhookConfig?.method === "POST" ? _generic.post : _generic.get;
+  return method(`${options.webhookUrl}`, {
+    action: "sendMessage",
+    [options.chatSessionKey]: sessionId,
+    [options.chatInputKey]: message,
+    ...(options.metadata ? {
+      metadata: options.metadata
+    } : {})
+  }, {
+    headers: options.webhookConfig?.headers
+  });
+}

package/api/message.mjs

@@ -0,0 +1,30 @@
+import { get, post } from "@n8n/chat/api/generic";
+export async function loadPreviousSession(sessionId, options) {
+  const method = options.webhookConfig?.method === "POST" ? post : get;
+  return method(
+    `${options.webhookUrl}`,
+    {
+      action: "loadPreviousSession",
+      [options.chatSessionKey]: sessionId,
+      ...options.metadata ? { metadata: options.metadata } : {}
+    },
+    {
+      headers: options.webhookConfig?.headers
+    }
+  );
+}
+export async function sendMessage(message, sessionId, options) {
+  const method = options.webhookConfig?.method === "POST" ? post : get;
+  return method(
+    `${options.webhookUrl}`,
+    {
+      action: "sendMessage",
+      [options.chatSessionKey]: sessionId,
+      [options.chatInputKey]: message,
+      ...options.metadata ? { metadata: options.metadata } : {}
+    },
+    {
+      headers: options.webhookConfig?.headers
+    }
+  );
+}

package/components/Button.vue

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Layout from '@n8n/chat/components/Layout.vue';
+import GetStarted from '@n8n/chat/components/GetStarted.vue';
+import GetStartedFooter from '@n8n/chat/components/GetStartedFooter.vue';
+import MessagesList from '@n8n/chat/components/MessagesList.vue';
+import Input from '@n8n/chat/components/Input.vue';
+import { nextTick, onMounted } from 'vue';
+import { useI18n, useChat, useOptions } from '@n8n/chat/composables';
+import { chatEventBus } from '@n8n/chat/event-buses';
+
+const { t } = useI18n();
+const chatStore = useChat();
+
+const { messages, currentSessionId } = chatStore;
+const { options } = useOptions();
+
+async function getStarted() {
+	void chatStore.startNewSession();
+	void nextTick(() => {
+		chatEventBus.emit('scrollToBottom');
+	});
+}
+
+async function initialize() {
+	await chatStore.loadPreviousSession();
+	void nextTick(() => {
+		chatEventBus.emit('scrollToBottom');
+	});
+}
+
+onMounted(async () => {
+	await initialize();
+	if (!options.showWelcomeScreen && !currentSessionId.value) {
+		await getStarted();
+	}
+});
+</script>
+
+<template>
+	<Layout class="chat-wrapper">
+		<template #header>
+			<h1>{{ t('title') }}</h1>
+			<p>{{ t('subtitle') }}</p>
+		</template>
+		<GetStarted v-if="!currentSessionId && options.showWelcomeScreen" @click:button="getStarted" />
+		<MessagesList v-else :messages="messages" />
+		<template #footer>
+			<Input v-if="currentSessionId" />
+			<GetStartedFooter v-else />
+		</template>
+	</Layout>
+</template>

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/components/GetStartedFooter.vue

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

package/components/Input.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+// eslint-disable-next-line import/no-unresolved
+import IconSend from 'virtual:icons/mdi/send';
+import { useI18n, useChat } from '@n8n/chat/composables';
+import { computed, ref } from 'vue';
+
+const chatStore = useChat();
+const { waitingForResponse } = chatStore;
+const { t } = useI18n();
+
+const input = ref('');
+
+const isSubmitDisabled = computed(() => {
+	return input.value === '' || waitingForResponse.value;
+});
+
+async function onSubmit(event: MouseEvent | KeyboardEvent) {
+	event.preventDefault();
+
+	if (isSubmitDisabled.value) {
+		return;
+	}
+
+	const messageText = input.value;
+	input.value = '';
+	await chatStore.sendMessage(messageText);
+}
+
+async function onSubmitKeydown(event: KeyboardEvent) {
+	if (event.shiftKey) {
+		return;
+	}
+
+	await onSubmit(event);
+}
+</script>
+
+<template>
+	<div class="chat-input">
+		<textarea
+			v-model="input"
+			rows="1"
+			:placeholder="t('inputPlaceholder')"
+			@keydown.enter="onSubmitKeydown"
+		/>
+		<button :disabled="isSubmitDisabled" class="chat-input-send-button" @click="onSubmit">
+			<IconSend height="32" width="32" />
+		</button>
+	</div>
+</template>
+
+<style>
+.chat-input {
+  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>