feat: Improves chat service architecture, starts implementing Settings and enhances PDF processing

Improves a dedicated ChatService for handling chat completions,
providing better organization and testability.

Moves settings-dependent logic for paste length and PDF handling
into the ChatService and ChatScreen components, respectively,
utilizing the settings store for dynamic configuration.

Adds support for processing PDFs as images based on user settings,
falling back to text extraction if image processing fails.

Removes direct property passing and related code from ChatForm component.

Updates UI components to improve layout and readability.

Author: allozaur

tools/server/webui/src/app.d.ts

@@ -66,5 +66,6 @@ declare global {
 		SettingsConfigValue,
 		SettingsFieldConfig,
 		SettingsConfigType,
+		SettingsChatServiceOptions,
 	}
 }

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte

@@ -3,6 +3,7 @@
 	import { ChatFormActionButtons, ChatFormFileInput, ChatFormHelperText, ChatFormTextarea } from '$lib/components/app';
 	import { inputClasses } from '$lib/constants/input-classes';
 	import { onMount } from 'svelte';
+	import { config } from '$lib/stores/settings.svelte';
 
 	interface Props {
 		class?: string;
@@ -12,7 +13,6 @@
 		onFileUpload?: (files: File[]) => void;
 		onSend?: (message: string, files?: ChatUploadedFile[]) => Promise<boolean>;
 		onStop?: () => void;
-		pasteLongTextToFileLength?: number;
 		showHelperText?: boolean;
 		uploadedFiles?: ChatUploadedFile[];
 	}
@@ -25,11 +25,14 @@
 		onFileUpload,
 		onSend,
 		onStop,
-		pasteLongTextToFileLength = 2500,
 		showHelperText = true,
 		uploadedFiles = $bindable([]),
 	}: Props = $props();
 
+	// Get settings
+	const currentConfig = $derived(config());
+	const pasteLongTextToFileLength = $derived(Number(currentConfig.pasteLongTextToFileLen) || 2500);
+
 	let message = $state('');
 	let fileInputRef: ChatFormFileInput | undefined;
 	let previousIsLoading = $state(isLoading);

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

@@ -13,6 +13,7 @@
 	import { Upload } from '@lucide/svelte';
 	import {
 		convertPDFToText,
+		convertPDFToImage,
 		isLikelyTextFile,
 		isPdfMimeType,
 		isSvgMimeType,
@@ -21,6 +22,7 @@
 		svgBase64UrlToPngDataURL
 	} from '$lib/utils';
 	import { serverStore } from '$lib/stores/server.svelte';
+	import { config } from '$lib/stores/settings.svelte';
 
 	let { showCenteredEmpty = false } = $props();
 	let chatScrollContainer: HTMLDivElement | undefined = $state();
@@ -91,16 +93,41 @@
 				}
 			} 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
-					});
+					const currentConfig = config();
+					const shouldProcessAsImages = Boolean(currentConfig.pdfAsImage);
+					
+					if (shouldProcessAsImages) {
+						// Process PDF as images
+						try {
+							const images = await convertPDFToImage(file.file);
+							extras.push({
+								type: 'pdfFile',
+								name: file.name,
+								content: `PDF file with ${images.length} pages`,
+								images: images,
+								processedAsImages: true
+							});
+						} catch (imageError) {
+							console.warn(`Failed to process PDF ${file.name} as images, falling back to text:`, imageError);
+							// Fallback to text processing
+							const content = await convertPDFToText(file.file);
+							extras.push({
+								type: 'pdfFile',
+								name: file.name,
+								content: content,
+								processedAsImages: false
+							});
+						}
+					} else {
+						// Process PDF as text (default)
+						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);
 				}

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsSection.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <div>
-	<div class="border-border/30 flex items-center gap-2 border-b pb-2">
+	<div class="border-border/30 flex items-center gap-2 border-b pb-6 mb-6">
 		{@render icon({ class: 'h-5 w-5' })}
 		<h3 class="text-lg font-semibold">{title}</h3>
 	</div>