refactor: Better structure for components

Moves chat-related components into dedicated subdirectories for
improved organization and maintainability.

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatAttachmentFilePreview.svelte renamed to tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte

@@ -3,27 +3,27 @@
 	import { X } from '@lucide/svelte';
 
 	interface Props {
+		class?: string;
 		id: string;
+		onClick?: () => void;
+		onRemove?: (id: string) => void;
 		name: string;
-		type: string;
-		size?: number;
 		readonly?: boolean;
-		onRemove?: (id: string) => void;
-		class?: string;
+		size?: number;
 		textContent?: string;
-		onClick?: () => void;
+		type: string;
 	}
 
 	let {
+		class: className = '',
 		id,
+		onClick,
+		onRemove,
 		name,
-		type,
-		size,
 		readonly = false,
-		onRemove,
-		class: className = '',
+		size,
 		textContent,
-		onClick
+		type,
 	}: Props = $props();
 
 	function formatFileSize(bytes: number): string {
@@ -39,13 +39,13 @@
 	}
 
 	function getPreviewText(content: string): string {
-		// Get first 150 characters for preview
 		return content.length > 150 ? content.substring(0, 150) : content;
 	}
 </script>
 
 {#if type === 'text/plain' || type === 'text'}
 	{#if readonly}
+		<!-- Readonly mode (ChatMessage) -->
 		<button
 			class="bg-muted border-border cursor-pointer rounded-lg border p-3 transition-shadow hover:shadow-md {className} w-full max-w-2xl"
 			onclick={onClick}
@@ -55,16 +55,19 @@
 			<div class="flex items-start gap-3">
 				<div class="flex min-w-0 flex-1 flex-col items-start text-left">
 					<span class="text-foreground w-full truncate text-sm font-medium">{name}</span>
+
 					{#if size}
 						<span class="text-muted-foreground text-xs">{formatFileSize(size)}</span>
 					{/if}
+
 					{#if textContent && type === 'text'}
 						<div class="relative mt-2 w-full">
 							<div
 								class="text-muted-foreground overflow-hidden whitespace-pre-wrap break-words font-mono text-xs leading-relaxed"
 							>
 								{getPreviewText(textContent)}
 							</div>
+
 							{#if textContent.length > 150}
 								<div
 									class="from-muted pointer-events-none absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t to-transparent"
@@ -78,7 +81,6 @@
 	{:else}
 		<!-- Non-readonly mode (ChatForm) -->
 		<div class="bg-muted border-border relative rounded-lg border p-3 {className} w-64">
-			<!-- Remove button in top-right corner -->
 			<Button
 				type="button"
 				variant="ghost"
@@ -90,9 +92,7 @@
 				<X class="h-3 w-3" />
 			</Button>
 
-			<!-- Content -->
 			<div class="pr-8">
-				<!-- Add right padding to avoid overlap with X button -->
 				<span class="text-foreground mb-3 block truncate text-sm font-medium">{name}</span>
 
 				{#if textContent}
@@ -103,6 +103,7 @@
 						>
 							{getPreviewText(textContent)}
 						</div>
+
 						{#if textContent.length > 150}
 							<div
 								class="from-muted pointer-events-none absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t to-transparent"
@@ -120,6 +121,7 @@
 		>
 			{getFileTypeLabel(type)}
 		</div>
+
 		<div class="flex flex-col">
 			<span class="text-foreground max-w-36 truncate text-sm font-medium md:max-w-72"
 				>{name}</span
@@ -128,6 +130,7 @@
 				<span class="text-muted-foreground text-xs">{formatFileSize(size)}</span>
 			{/if}
 		</div>
+
 		{#if !readonly}
 			<Button
 				type="button"

tools/server/webui/src/lib/components/app/chat/ChatAttachmentImagePreview.svelte renamed to tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentImagePreview.svelte

@@ -54,6 +54,7 @@
 			class="{height} {width} cursor-pointer object-cover {imageClass}"
 		/>
 	{/if}
+
 	{#if !readonly}
 		<div
 			class="absolute right-1 top-1 flex items-center justify-center opacity-0 transition-opacity hover:opacity-100"