feat: Adds PDF file support to chat

Enables displaying PDF files in the chat interface.

This commit introduces the `pdfjs-dist` library to process PDFs, extracting text content for display. It also includes functionality to potentially convert PDF pages into images, allowing preview of PDF documents.

The changes enhance the chat functionality by allowing add PDF attachments to the chat. Currently only supports converting PDFs to text.

Author: allozaur

tools/server/webui/package-lock.json

@@ -68,6 +68,7 @@
 	"dependencies": {
 		"highlight.js": "^11.11.1",
 		"mode-watcher": "^1.1.0",
+		"pdfjs-dist": "^5.4.54",
 		"rehype-highlight": "^7.0.2",
 		"rehype-stringify": "^10.0.1",
 		"remark": "^15.0.1",

tools/server/webui/package.json

@@ -121,7 +121,7 @@
 			{getFileTypeLabel(type)}
 		</div>
 		<div class="flex flex-col">
-			<span class="text-foreground max-w-48 truncate text-sm font-medium">{name}</span>
+			<span class="text-foreground max-w-72 truncate text-sm font-medium">{name}</span>
 			{#if size}
 				<span class="text-muted-foreground text-xs">{formatFileSize(size)}</span>
 			{/if}

tools/server/webui/src/lib/components/chat/ChatAttachmentFilePreview.svelte

@@ -88,6 +88,16 @@
 					type: attachment.mimeType || 'audio',
 					isImage: false
 				});
+			} else if (attachment.type === 'pdfFile') {
+				items.push({
+					id: `attachment-${index}`,
+					name: attachment.name,
+					type: 'application/pdf',
+					isImage: false,
+					attachment,
+					attachmentIndex: index,
+					textContent: attachment.content
+				});
 			}
 		}
 

tools/server/webui/src/lib/components/chat/ChatAttachmentsList.svelte

@@ -13,8 +13,15 @@
 	import { Upload } from '@lucide/svelte';
 	import type { ChatUploadedFile } from '$lib/types/chat.d.ts';
 	import type { DatabaseMessageExtra } from '$lib/types/database.d.ts';
-	import { isLikelyTextFile, isTextFileByName, readFileAsText } from '$lib/utils/text-files';
-	import { svgBase64UrlToPngDataURL, isSvgMimeType } from '$lib/utils/svg-to-png';
+	import {
+		convertPDFToText,
+		isLikelyTextFile,
+		isPdfMimeType,
+		isSvgMimeType,
+		isTextFileByName,
+		readFileAsText,
+		svgBase64UrlToPngDataURL
+	} from '$lib/utils';
 
 	let { showCenteredEmpty = false } = $props();
 	let chatScrollContainer: HTMLDivElement | undefined = $state();
@@ -83,6 +90,21 @@
 						base64Url
 					});
 				}
+			} else if (isPdfMimeType(file.type)) {
+				try {
+					// For now, always process PDF as text
+					// todo: Add settings to allow PDF as images for vision models
+					const content = await convertPDFToText(file.file);
+
+					extras.push({
+						type: 'pdfFile',
+						name: file.name,
+						content: content,
+						processedAsImages: false
+					});
+				} catch (error) {
+					console.error(`Failed to process PDF file ${file.name}:`, error);
+				}
 			} else {
 				try {
 					const content = await readFileAsText(file.file);
@@ -186,6 +208,10 @@
 					uploadedFiles = [...uploadedFiles, uploadedFile];
 				};
 				reader.readAsText(file);
+			} else if (isPdfMimeType(file.type)) {
+				// For PDF files, we'll process them during conversion to extras
+				// Just add them to the list for now
+				uploadedFiles = [...uploadedFiles, uploadedFile];
 			} else {
 				uploadedFiles = [...uploadedFiles, uploadedFile];
 			}

tools/server/webui/src/lib/components/chat/ChatScreen.svelte

@@ -11,7 +11,8 @@ import type {
 	DatabaseMessage,
 	DatabaseMessageExtra,
 	DatabaseMessageExtraImageFile,
-	DatabaseMessageExtraTextFile
+	DatabaseMessageExtraTextFile,
+	DatabaseMessageExtraPdfFile
 } from '$lib/types/database'
 
 export class ChatService {
@@ -221,6 +222,26 @@ export class ChatService {
 			});
 		}
 
+		// Add PDF files as text content
+		const pdfFiles = message.extra.filter((extra): extra is DatabaseMessageExtraPdfFile => extra.type === 'pdfFile');
+		for (const pdfFile of pdfFiles) {
+			if (pdfFile.processedAsImages && pdfFile.images) {
+				// If PDF was processed as images, add each page as an image
+				for (let i = 0; i < pdfFile.images.length; i++) {
+					contentParts.push({
+						type: 'image_url',
+						image_url: { url: pdfFile.images[i] }
+					});
+				}
+			} else {
+				// If PDF was processed as text, add as text content
+				contentParts.push({
+					type: 'text',
+					text: `\n\n--- PDF File: ${pdfFile.name} ---\n${pdfFile.content}`
+				});
+			}
+		}
+
 		return {
 			role: message.role as 'user' | 'assistant' | 'system',
 			content: contentParts

tools/server/webui/src/lib/services/chat.ts

@@ -32,7 +32,15 @@ export interface DatabaseMessageExtraTextFile {
 	content: string;
 }
 
-export type DatabaseMessageExtra = DatabaseMessageExtraImageFile | DatabaseMessageExtraTextFile | DatabaseMessageExtraAudioFile;
+export interface DatabaseMessageExtraPdfFile {
+	type: 'pdfFile';
+	name: string;
+	content: string; // Text content extracted from PDF
+	images?: string[]; // Optional: PDF pages as base64 images
+	processedAsImages: boolean; // Whether PDF was processed as images
+}
+
+export type DatabaseMessageExtra = DatabaseMessageExtraImageFile | DatabaseMessageExtraTextFile | DatabaseMessageExtraAudioFile | DatabaseMessageExtraPdfFile;
 
 export interface DatabaseMessage {
 	id: string;

tools/server/webui/src/lib/types/database.d.ts

@@ -1,17 +1,24 @@
 import autoResizeTextarea from './autoresize-textarea';
 import { copyCodeToClipboard, copyToClipboard } from './copy';
+import { convertPDFToText, convertPDFToImage, isPdfMimeType } from './pdf-processing';
 import { isLikelyTextFile, isTextFileByName, readFileAsText } from './text-files';
 import { extractPartialThinking, hasThinkingEnd, hasThinkingStart, parseThinkingContent } from './thinking';
+import { isSvgMimeType, svgBase64UrlToPngDataURL } from './svg-to-png';
 
 export { 
     autoResizeTextarea,
     copyCodeToClipboard,
     copyToClipboard,
+    convertPDFToText,
+    convertPDFToImage,
     extractPartialThinking,
     hasThinkingEnd,
-    hasThinkingStart,
     isLikelyTextFile,
+    isPdfMimeType,
+    isSvgMimeType,
     isTextFileByName,
+    hasThinkingStart,
     parseThinkingContent,
-    readFileAsText
+    readFileAsText,
+    svgBase64UrlToPngDataURL,
 };