feat: Improves chat form and file handling

Refactors the chat form to handle file uploads more robustly.
- Changes `onSend` to be an async function that returns a boolean to
  indicate the success of sending the message. This allows for
  validation before clearing the message and uploaded files.
- Adds client-side validation for WebP images to avoid server-side errors.
- Moves text file utility functions and constants to dedicated files and utils.
- Fixes a bug where chat messages were not being cleared after sending.

Author: allozaur

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

@@ -9,14 +9,13 @@
 		class?: string;
 		disabled?: boolean;
 		isLoading?: boolean;
-		onSend?: (message: string, files?: ChatUploadedFile[]) => void;
+		onSend?: (message: string, files?: ChatUploadedFile[]) => Promise<boolean>;
 		onStop?: () => void;
 		showHelperText?: boolean;
 		uploadedFiles?: ChatUploadedFile[];
 		onFileUpload?: (files: File[]) => void;
 		onFileRemove?: (fileId: string) => void;
-		// Paste configuration
-		pasteLongTextToFileLen?: number;
+		pasteLongTextToFileLength?: number;
 	}
 
 	let {
@@ -29,38 +28,44 @@
 		uploadedFiles = $bindable([]),
 		onFileUpload,
 		onFileRemove,
-		pasteLongTextToFileLen = 2500
+		pasteLongTextToFileLength = 2500
 	}: Props = $props();
 
 	let message = $state('');
 	let textareaElement: HTMLTextAreaElement | undefined;
 	let fileInputElement: HTMLInputElement | undefined;
 
-	function handleSubmit(event: SubmitEvent) {
+	async function handleSubmit(event: SubmitEvent) {
 		event.preventDefault();
 		if (!message.trim() || disabled || isLoading) return;
 
-		onSend?.(message.trim(), uploadedFiles);
-		message = '';
-		uploadedFiles = [];
+		const success = await onSend?.(message.trim(), uploadedFiles);
 
-		if (textareaElement) {
-			textareaElement.style.height = 'auto';
+		if (success) {
+			message = '';
+			uploadedFiles = [];
+
+			if (textareaElement) {
+				textareaElement.style.height = 'auto';
+			}
 		}
 	}
 
-	function handleKeydown(event: KeyboardEvent) {
+	async function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Enter' && !event.shiftKey) {
 			event.preventDefault();
 
 			if (!message.trim() || disabled || isLoading) return;
 
-			onSend?.(message.trim(), uploadedFiles);
-			message = '';
-			uploadedFiles = [];
+			const success = await onSend?.(message.trim(), uploadedFiles);
 
-			if (textareaElement) {
-				textareaElement.style.height = 'auto';
+			if (success) {
+				message = '';
+				uploadedFiles = [];
+
+				if (textareaElement) {
+					textareaElement.style.height = 'auto';
+				}
 			}
 		}
 	}
@@ -83,7 +88,6 @@
 	function handlePaste(event: ClipboardEvent) {
 		if (!event.clipboardData) return;
 
-		// Handle pasted files
 		const files = Array.from(event.clipboardData.items)
 			.filter((item) => item.kind === 'file')
 			.map((item) => item.getAsFile())
@@ -95,12 +99,14 @@
 			return;
 		}
 
-		// Handle long text conversion to file
 		const text = event.clipboardData.getData('text/plain');
-		if (text.length > 0 && pasteLongTextToFileLen > 0 && text.length > pasteLongTextToFileLen) {
+		if (
+			text.length > 0 &&
+			pasteLongTextToFileLength > 0 &&
+			text.length > pasteLongTextToFileLength
+		) {
 			event.preventDefault();
 
-			// Create a text file from the pasted content
 			const textFile = new File([text], 'Pasted', {
 				type: 'text/plain'
 			});
@@ -110,7 +116,6 @@
 	}
 </script>
 
-<!-- Hidden file input -->
 <input
 	bind:this={fileInputElement}
 	type="file"

tools/server/webui/src/lib/components/chat/ChatMessage.svelte renamed to tools/server/webui/src/lib/components/chat/ChatMessages/ChatMessage.svelte

@@ -134,15 +134,15 @@
 			</div>
 		{:else}
 			{#if message.extra && message.extra.length > 0}
-				<div class="max-w-[80%] mb-2">
-					<ChatAttachmentsList 
+				<div class="mb-2 max-w-[80%]">
+					<ChatAttachmentsList
 						attachments={message.extra}
 						readonly={true}
 						imageHeight="h-80"
 					/>
 				</div>
 			{/if}
-			
+
 			<Card class="bg-primary text-primary-foreground max-w-[80%] rounded-2xl px-2.5 py-1.5">
 				<div class="text-md whitespace-pre-wrap">
 					{message.content}
@@ -163,7 +163,7 @@
 		{#if thinkingContent}
 			<ChatThinkingBlock thinking={thinkingContent} isStreaming={!message.timestamp} />
 		{/if}
-		
+
 		{#if message.role === 'assistant'}
 			<MarkdownContent content={messageContent} />
 		{:else}
@@ -180,7 +180,6 @@
 	</div>
 {/if}
 
-
 {#snippet messageActions(config?: { role: ChatRole })}
 	<div
 		class="pointer-events-none inset-0 flex items-center gap-1 opacity-0 transition-all duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
@@ -235,4 +234,4 @@
 	>
 		{message.timestamp ? new Date(message.timestamp).toLocaleTimeString() : ''}
 	</div>
-{/snippet}
+{/snippet}