feat(Chat Trigger Node): Add support for file uploads & harmonize public and development chat

cypress/composables/modals/chat-modal.ts

@@ -7,15 +7,15 @@ export function getManualChatModal() {
 }
 
 export function getManualChatInput() {
-	return cy.getByTestId('workflow-chat-input');
+	return getManualChatModal().get('.chat-inputs textarea');
 }
 
 export function getManualChatSendButton() {
-	return getManualChatModal().getByTestId('workflow-chat-send-button');
+	return getManualChatModal().get('.chat-input-send-button');
 }
 
 export function getManualChatMessages() {
-	return getManualChatModal().get('.messages .message');
+	return getManualChatModal().get('.chat-messages-list .chat-message');
 }
 
 export function getManualChatModalCloseButton() {

packages/@n8n/chat/package.json

@@ -36,6 +36,7 @@
     }
   },
   "dependencies": {
+    "@vueuse/core": "^10.5.0",
     "highlight.js": "^11.8.0",
     "markdown-it-link-attributes": "^4.0.1",
     "uuid": "^8.3.2",

packages/@n8n/chat/src/__stories__/App.stories.ts

@@ -41,3 +41,15 @@ export const Windowed: Story = {
 		mode: 'window',
 	} satisfies Partial<ChatOptions>,
 };
+
+export const WorkflowChat: Story = {
+	name: 'Workflow Chat',
+	args: {
+		webhookUrl: 'http://localhost:5678/webhook/ad324b56-3e40-4b27-874f-58d150504edc/chat',
+		mode: 'fullscreen',
+		allowedFilesMimeTypes: 'image/*,text/*,audio/*, application/pdf',
+		allowFileUploads: true,
+		showWelcomeScreen: false,
+		initialMessages: [],
+	} satisfies Partial<ChatOptions>,
+};

packages/@n8n/chat/src/api/generic.ts

@@ -5,15 +5,23 @@ async function getAccessToken() {
 export async function authenticatedFetch<T>(...args: Parameters<typeof fetch>): Promise<T> {
 	const accessToken = await getAccessToken();
 
+	const body = args[1]?.body;
+	const headers: RequestInit['headers'] & { 'Content-Type'?: string } = {
+		...(accessToken ? { authorization: `Bearer ${accessToken}` } : {}),
+		...args[1]?.headers,
+	};
+
+	// Automatically set content type to application/json if body is FormData
+	if (body instanceof FormData) {
+		delete headers['Content-Type'];
+	} else {
+		headers['Content-Type'] = 'application/json';
+	}
 	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,
-		},
+		headers,
 	});
 
 	return (await response.json()) as T;
@@ -37,6 +45,28 @@ export async function post<T>(url: string, body: object = {}, options: RequestIn
 		body: JSON.stringify(body),
 	});
 }
+export async function postWithFiles<T>(
+	url: string,
+	body: Record<string, unknown> = {},
+	files: File[] = [],
+	options: RequestInit = {},
+) {
+	const formData = new FormData();
+
+	for (const key in body) {
+		formData.append(key, body[key] as string);
+	}
+
+	for (const file of files) {
+		formData.append('files', file);
+	}
+
+	return await authenticatedFetch<T>(url, {
+		...options,
+		method: 'POST',
+		body: formData,
+	});
+}
 
 export async function put<T>(url: string, body: object = {}, options: RequestInit = {}) {
 	return await authenticatedFetch<T>(url, {

packages/@n8n/chat/src/api/message.ts

@@ -1,4 +1,4 @@
-import { get, post } from '@n8n/chat/api/generic';
+import { get, post, postWithFiles } from '@n8n/chat/api/generic';
 import type {
 	ChatOptions,
 	LoadPreviousSessionResponse,
@@ -20,7 +20,27 @@ export async function loadPreviousSession(sessionId: string, options: ChatOption
 	);
 }
 
-export async function sendMessage(message: string, sessionId: string, options: ChatOptions) {
+export async function sendMessage(
+	message: string,
+	files: File[],
+	sessionId: string,
+	options: ChatOptions,
+) {
+	if (files.length > 0) {
+		return await postWithFiles<SendMessageResponse>(
+			`${options.webhookUrl}`,
+			{
+				action: 'sendMessage',
+				[options.chatSessionKey as string]: sessionId,
+				[options.chatInputKey as string]: message,
+				...(options.metadata ? { metadata: options.metadata } : {}),
+			},
+			files,
+			{
+				headers: options.webhookConfig?.headers,
+			},
+		);
+	}
 	const method = options.webhookConfig?.method === 'POST' ? post : get;
 	return await method<SendMessageResponse>(
 		`${options.webhookUrl}`,

packages/@n8n/chat/src/components/ChatFile.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import IconFileText from 'virtual:icons/mdi/fileText';
+import IconFileMusic from 'virtual:icons/mdi/fileMusic';
+import IconFileImage from 'virtual:icons/mdi/fileImage';
+import IconFileVideo from 'virtual:icons/mdi/fileVideo';
+import IconDelete from 'virtual:icons/mdi/closeThick';
+import IconPreview from 'virtual:icons/mdi/openInNew';
+
+import { computed, type FunctionalComponent } from 'vue';
+
+const props = defineProps<{
+	file: File;
+	isRemovable: boolean;
+	isPreviewable?: boolean;
+}>();
+
+const emit = defineEmits<{
+	remove: [value: File];
+}>();
+
+const iconMapper: Record<string, FunctionalComponent> = {
+	document: IconFileText,
+	audio: IconFileMusic,
+	image: IconFileImage,
+	video: IconFileVideo,
+};
+
+const TypeIcon = computed(() => {
+	const type = props.file?.type.split('/')[0];
+	return iconMapper[type] || IconFileText;
+});
+
+function onClick() {
+	if (props.isRemovable) {
+		emit('remove', props.file);
+	}
+
+	if (props.isPreviewable) {
+		window.open(URL.createObjectURL(props.file));
+	}
+}
+</script>
+
+<template>
+	<div class="chat-file" @click="onClick">
+		<TypeIcon />
+		<p class="chat-file-name">{{ file.name }}</p>
+		<IconDelete v-if="isRemovable" class="chat-file-delete" />
+		<IconPreview v-if="isPreviewable" class="chat-file-preview" />
+	</div>
+</template>
+
+<style scoped lang="scss">
+.chat-file {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	width: fit-content;
+	max-width: 15rem;
+	padding: 0.5rem;
+	border-radius: 0.25rem;
+	gap: 0.25rem;
+	font-size: 0.75rem;
+	background: white;
+	color: var(--chat--color-dark);
+	border: 1px solid var(--chat--color-dark);
+	cursor: pointer;
+}
+
+.chat-file-name-tooltip {
+	overflow: hidden;
+}
+.chat-file-name {
+	overflow: hidden;
+	max-width: 100%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin: 0;
+}
+.chat-file-delete,
+.chat-file-preview {
+	background: none;
+	border: none;
+	display: none;
+	cursor: pointer;
+	flex-shrink: 0;
+
+	.chat-file:hover & {
+		display: block;
+	}
+}
+</style>