@n8n/chat 0.3.0 → 0.4.0

package/src/api/generic.ts

@@ -1,64 +0,0 @@
-async function getAccessToken() {
-	return '';
-}
-
-export async function authenticatedFetch<T>(...args: Parameters<typeof fetch>): Promise<T> {
-	const accessToken = await getAccessToken();
-
-	const response = await fetch(args[0], {
-		...args[1],
-		mode: 'cors',
-		cache: 'no-cache',
-		headers: {
-			...(accessToken ? { authorization: `Bearer ${accessToken}` } : {}),
-			...args[1]?.headers,
-		},
-	});
-
-	return (await response.json()) as Promise<T>;
-}
-
-export async function get<T>(
-	url: string,
-	query: Record<string, string> = {},
-	options: RequestInit = {},
-) {
-	let resolvedUrl = url;
-	if (Object.keys(query).length > 0) {
-		resolvedUrl = `${resolvedUrl}?${new URLSearchParams(query).toString()}`;
-	}
-
-	return authenticatedFetch<T>(resolvedUrl, { ...options, method: 'GET' });
-}
-
-export async function post<T>(url: string, body: object = {}, options: RequestInit = {}) {
-	return authenticatedFetch<T>(url, {
-		...options,
-		method: 'POST',
-		body: JSON.stringify(body),
-	});
-}
-
-export async function put<T>(url: string, body: object = {}, options: RequestInit = {}) {
-	return authenticatedFetch<T>(url, {
-		...options,
-		method: 'PUT',
-		body: JSON.stringify(body),
-	});
-}
-
-export async function patch<T>(url: string, body: object = {}, options: RequestInit = {}) {
-	return authenticatedFetch<T>(url, {
-		...options,
-		method: 'PATCH',
-		body: JSON.stringify(body),
-	});
-}
-
-export async function del<T>(url: string, body: object = {}, options: RequestInit = {}) {
-	return authenticatedFetch<T>(url, {
-		...options,
-		method: 'DELETE',
-		body: JSON.stringify(body),
-	});
-}

package/src/api/message.ts

@@ -1,31 +0,0 @@
-import { get, post } from '@/api/generic';
-import type { ChatOptions, LoadPreviousSessionResponse, SendMessageResponse } from '@/types';
-
-export async function loadPreviousSession(sessionId: string, options: ChatOptions) {
-	const method = options.webhookConfig?.method === 'POST' ? post : get;
-	return method<LoadPreviousSessionResponse>(
-		`${options.webhookUrl}`,
-		{
-			action: 'loadPreviousSession',
-			sessionId,
-		},
-		{
-			headers: options.webhookConfig?.headers,
-		},
-	);
-}
-
-export async function sendMessage(message: string, sessionId: string, options: ChatOptions) {
-	const method = options.webhookConfig?.method === 'POST' ? post : get;
-	return method<SendMessageResponse>(
-		`${options.webhookUrl}`,
-		{
-			action: 'sendMessage',
-			sessionId,
-			message,
-		},
-		{
-			headers: options.webhookConfig?.headers,
-		},
-	);
-}

package/src/components/Button.vue

@@ -1,41 +0,0 @@
-<template>
-	<button class="chat-button">
-		<slot />
-	</button>
-</template>
-<style lang="scss">
-.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;
-
-	&: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;
-	}
-
-	&:focus {
-		outline: 0;
-		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-	}
-
-	&:disabled {
-		opacity: 0.65;
-	}
-}
-</style>

package/src/components/Chat.vue

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

package/src/components/ChatWindow.vue

@@ -1,125 +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 '@/components/Chat.vue';
-import { nextTick, ref } from 'vue';
-import { chatEventBus } from '@/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 lang="scss">
-.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 {
-		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-layout {
-			width: auto;
-			height: auto;
-			flex: 1;
-		}
-	}
-
-	.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;
-
-		&:hover,
-		&:focus {
-			transform: scale(1.05);
-			background: var(--chat--toggle--hover--background);
-		}
-
-		&:active {
-			transform: scale(0.95);
-			background: var(--chat--toggle--active--background);
-		}
-	}
-}
-
-.chat-window-transition {
-	&-enter-active,
-	&-leave-active {
-		transition:
-			transform var(--chat--transition-duration) ease,
-			opacity var(--chat--transition-duration) ease;
-	}
-
-	&-enter-from,
-	&-leave-to {
-		transform: scale(0);
-		opacity: 0;
-	}
-}
-
-.chat-window-toggle-transition {
-	&-enter-active,
-	&-leave-active {
-		transition: opacity var(--chat--transition-duration) ease;
-	}
-
-	&-enter-from,
-	&-leave-to {
-		opacity: 0;
-	}
-}
-</style>

package/src/components/GetStarted.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/Button.vue';
-import { useI18n } from '@/composables';
-
-const { t } = useI18n();
-</script>
-<template>
-	<div class="chat-get-started">
-		<Button @click="$emit('click:button')">
-			{{ t('getStarted') }}
-		</Button>
-	</div>
-</template>
-
-<style lang="scss">
-.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/GetStartedFooter.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from '@/composables';
-import PoweredBy from '@/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 lang="scss">
-.chat-get-started-footer {
-	padding: var(--chat--spacing);
-}
-</style>

package/src/components/Input.vue

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-// eslint-disable-next-line import/no-unresolved
-import IconSend from 'virtual:icons/mdi/send';
-import { useI18n, useChat } from '@/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 lang="scss">
-.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);
-		}
-	}
-}
-</style>

package/src/components/Layout.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { chatEventBus } from '@/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 lang="scss">
-.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-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-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-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/src/components/Message.vue

@@ -1,97 +0,0 @@
-<script lang="ts" setup>
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { ChatMessage } from '@/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 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="message.text"
-				:options="markdownOptions"
-			/>
-		</slot>
-	</div>
-</template>
-
-<style lang="scss">
-.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 {
-		margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 0.5));
-	}
-
-	&.chat-message-from-bot {
-		background-color: var(--chat--message--bot--background);
-		color: var(--chat--message--bot--color);
-		border-bottom-left-radius: 0;
-	}
-
-	&.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-markdown {
-		display: block;
-		box-sizing: border-box;
-
-		> *:first-child {
-			margin-top: 0;
-		}
-
-		> *:last-child {
-			margin-bottom: 0;
-		}
-
-		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>