@n8n/chat 0.18.0 → 0.19.1

package/src/components/Chat.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import Close from 'virtual:icons/mdi/close';
-import { computed, nextTick, onMounted } from 'vue';
-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 { 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();
-
-const showCloseButton = computed(() => options.mode === 'window' && options.showWindowCloseButton);
-
-async function getStarted() {
-	if (!chatStore.startNewSession) {
-		return;
-	}
-	void chatStore.startNewSession();
-	void nextTick(() => {
-		chatEventBus.emit('scrollToBottom');
-	});
-}
-
-async function initialize() {
-	if (!chatStore.loadPreviousSession) {
-		return;
-	}
-	await chatStore.loadPreviousSession();
-	void nextTick(() => {
-		chatEventBus.emit('scrollToBottom');
-	});
-}
-
-function closeChat() {
-	chatEventBus.emit('close');
-}
-
-onMounted(async () => {
-	await initialize();
-	if (!options.showWelcomeScreen && !currentSessionId.value) {
-		await getStarted();
-	}
-});
-</script>
-
-<template>
-	<Layout class="chat-wrapper">
-		<template #header>
-			<div class="chat-heading">
-				<h1>
-					{{ t('title') }}
-				</h1>
-				<button
-					v-if="showCloseButton"
-					class="chat-close-button"
-					:title="t('closeButtonTooltip')"
-					@click="closeChat"
-				>
-					<Close height="18" width="18" />
-				</button>
-			</div>
-			<p v-if="t('subtitle')">{{ 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>
-
-<style lang="scss">
-.chat-heading {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.chat-close-button {
-	display: flex;
-	border: none;
-	background: none;
-	cursor: pointer;
-
-	&:hover {
-		color: var(--chat--close--button--color-hover, var(--chat--color-primary));
-	}
-}
-</style>

package/src/components/ChatWindow.vue

@@ -1,123 +0,0 @@
-<script lang="ts" setup>
-import IconChat from 'virtual:icons/mdi/chat';
-import IconChevronDown from 'virtual:icons/mdi/chevron-down';
-import { nextTick, ref } from 'vue';
-import Chat from '@n8n/chat/components/Chat.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 v-show="isOpen" class="chat-window">
-				<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 '@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 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 '@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 lang="scss">
-.chat-get-started-footer {
-	padding: var(--chat--spacing);
-}
-</style>

package/src/components/Input.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import IconSend from 'virtual:icons/mdi/send';
-import { computed, onMounted, ref } from 'vue';
-import { useI18n, useChat, useOptions } from '@n8n/chat/composables';
-import { chatEventBus } from '@n8n/chat/event-buses';
-
-const { options } = useOptions();
-const chatStore = useChat();
-const { waitingForResponse } = chatStore;
-const { t } = useI18n();
-
-const chatTextArea = ref<HTMLTextAreaElement | null>(null);
-const input = ref('');
-
-const isSubmitDisabled = computed(() => {
-	return input.value === '' || waitingForResponse.value || options.disabled?.value === true;
-});
-
-const isInputDisabled = computed(() => options.disabled?.value === true);
-
-onMounted(() => {
-	chatEventBus.on('focusInput', () => {
-		if (chatTextArea.value) {
-			chatTextArea.value.focus();
-		}
-	});
-});
-
-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
-			ref="chatTextArea"
-			v-model="input"
-			rows="1"
-			:disabled="isInputDisabled"
-			: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%;
-	background: white;
-
-	textarea {
-		font-family: inherit;
-		font-size: var(--chat--input--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--input--send--button--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,99 +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" ref="chatBodyRef" class="chat-body">
-			<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 {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		gap: 1em;
-		height: var(--chat--header-height, auto);
-		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));
-		border-top: var(--chat--header--border-top, none);
-		border-bottom: var(--chat--header--border-bottom, none);
-		border-left: var(--chat--header--border-left, none);
-		border-right: var(--chat--header--border-right, none);
-		h1 {
-			font-size: var(--chat--heading--font-size);
-			color: var(--chat--header--color, var(--chat--color-light));
-		}
-		p {
-			font-size: var(--chat--subtitle--font-size, inherit);
-			line-height: var(--chat--subtitle--line-height, 1.8);
-		}
-	}
-
-	.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,137 +0,0 @@
-<script lang="ts" setup>
-/* eslint-disable @typescript-eslint/naming-convention */
-import { computed, toRefs } from 'vue';
-import VueMarkdown from 'vue-markdown-render';
-import hljs from 'highlight.js/lib/core';
-import markdownLink from 'markdown-it-link-attributes';
-import type MarkdownIt from 'markdown-it';
-import type { ChatMessage, ChatMessageText } from '@n8n/chat/types';
-import { useOptions } from '@n8n/chat/composables';
-
-const props = defineProps<{
-	message: ChatMessage;
-}>();
-
-const { message } = toRefs(props);
-const { options } = useOptions();
-
-const messageText = computed(() => {
-	return (message.value as ChatMessageText).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',
-		'chat-message-transparent': message.value.transparent === true,
-	};
-});
-
-const linksNewTabPlugin = (vueMarkdownItInstance: MarkdownIt) => {
-	vueMarkdownItInstance.use(markdownLink, {
-		attrs: {
-			target: '_blank',
-			rel: 'noopener',
-		},
-	});
-};
-
-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
-	},
-};
-
-const messageComponents = options?.messageComponents ?? {};
-</script>
-<template>
-	<div class="chat-message" :class="classes">
-		<slot>
-			<template v-if="message.type === 'component' && messageComponents[message.key]">
-				<component :is="messageComponents[message.key]" v-bind="message.arguments" />
-			</template>
-			<VueMarkdown
-				v-else
-				class="chat-message-markdown"
-				:source="messageText"
-				:options="markdownOptions"
-				:plugins="[linksNewTabPlugin]"
-			/>
-		</slot>
-	</div>
-</template>
-
-<style lang="scss">
-.chat-message {
-	display: block;
-	max-width: 80%;
-	font-size: var(--chat--message--font-size, 1rem);
-	padding: var(--chat--message--padding, var(--chat--spacing));
-	border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
-
-	p {
-		line-height: var(--chat--message-line-height, 1.8);
-		word-wrap: break-word;
-	}
-
-	// Default message gap is half of the spacing
-	+ .chat-message {
-		margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 0.5));
-	}
-
-	// Spacing between messages from different senders is double the individual message gap
-	&.chat-message-from-user + &.chat-message-from-bot,
-	&.chat-message-from-bot + &.chat-message-from-user {
-		margin-top: var(--chat--spacing);
-	}
-
-	&.chat-message-from-bot {
-		&:not(.chat-message-transparent) {
-			background-color: var(--chat--message--bot--background);
-			border: var(--chat--message--bot--border, none);
-		}
-		color: var(--chat--message--bot--color);
-		border-bottom-left-radius: 0;
-	}
-
-	&.chat-message-from-user {
-		&:not(.chat-message-transparent) {
-			background-color: var(--chat--message--user--background);
-			border: var(--chat--message--user--border, none);
-		}
-		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>