SvelteKit-based WebUI (#14839)

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

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { formatFileSize, getFileTypeLabel, getPreviewText } from '$lib/utils/file-preview';
+	import { FileTypeCategory, MimeTypeText } from '$lib/enums/files';
+
+	interface Props {
+		class?: string;
+		id: string;
+		onClick?: (event?: MouseEvent) => void;
+		onRemove?: (id: string) => void;
+		name: string;
+		readonly?: boolean;
+		size?: number;
+		textContent?: string;
+		type: string;
+	}
+
+	let {
+		class: className = '',
+		id,
+		onClick,
+		onRemove,
+		name,
+		readonly = false,
+		size,
+		textContent,
+		type
+	}: Props = $props();
+</script>
+
+{#if type === MimeTypeText.PLAIN || type === FileTypeCategory.TEXT}
+	{#if readonly}
+		<!-- Readonly mode (ChatMessage) -->
+		<button
+			class="cursor-pointer rounded-lg border border-border bg-muted p-3 transition-shadow hover:shadow-md {className} w-full max-w-2xl"
+			onclick={onClick}
+			aria-label={`Preview ${name}`}
+			type="button"
+		>
+			<div class="flex items-start gap-3">
+				<div class="flex min-w-0 flex-1 flex-col items-start text-left">
+					<span class="w-full truncate text-sm font-medium text-foreground">{name}</span>
+
+					{#if size}
+						<span class="text-xs text-muted-foreground">{formatFileSize(size)}</span>
+					{/if}
+
+					{#if textContent && type === 'text'}
+						<div class="relative mt-2 w-full">
+							<div
+								class="overflow-hidden font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-muted-foreground"
+							>
+								{getPreviewText(textContent)}
+							</div>
+
+							{#if textContent.length > 150}
+								<div
+									class="pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-muted to-transparent"
+								></div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</div>
+		</button>
+	{:else}
+		<!-- Non-readonly mode (ChatForm) -->
+		<div class="relative rounded-lg border border-border bg-muted p-3 {className} w-64">
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				class="absolute top-2 right-2 h-6 w-6 bg-white/20 p-0 hover:bg-white/30"
+				onclick={() => onRemove?.(id)}
+				aria-label="Remove file"
+			>
+				<X class="h-3 w-3" />
+			</Button>
+
+			<div class="pr-8">
+				<span class="mb-3 block truncate text-sm font-medium text-foreground">{name}</span>
+
+				{#if textContent}
+					<div class="relative">
+						<div
+							class="overflow-hidden font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-muted-foreground"
+							style="max-height: 3.6em; line-height: 1.2em;"
+						>
+							{getPreviewText(textContent)}
+						</div>
+
+						{#if textContent.length > 150}
+							<div
+								class="pointer-events-none absolute right-0 bottom-0 left-0 h-4 bg-gradient-to-t from-muted to-transparent"
+							></div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+{:else}
+	<button
+		class="flex items-center gap-2 gap-3 rounded-lg border border-border bg-muted p-3 {className}"
+		onclick={onClick}
+	>
+		<div
+			class="flex h-8 w-8 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary"
+		>
+			{getFileTypeLabel(type)}
+		</div>
+
+		<div class="flex flex-col gap-1">
+			<span class="max-w-36 truncate text-sm font-medium text-foreground md:max-w-72">
+				{name}
+			</span>
+
+			{#if size}
+				<span class="text-left text-xs text-muted-foreground">{formatFileSize(size)}</span>
+			{/if}
+		</div>
+
+		{#if !readonly}
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				class="h-6 w-6 p-0"
+				onclick={(e) => {
+					e.stopPropagation();
+					onRemove?.(id);
+				}}
+			>
+				<X class="h-3 w-3" />
+			</Button>
+		{/if}
+	</button>
+{/if}

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		id: string;
+		name: string;
+		preview: string;
+		readonly?: boolean;
+		onRemove?: (id: string) => void;
+		onClick?: (event?: MouseEvent) => void;
+		class?: string;
+		// Customizable size props
+		width?: string;
+		height?: string;
+		imageClass?: string;
+	}
+
+	let {
+		id,
+		name,
+		preview,
+		readonly = false,
+		onRemove,
+		onClick,
+		class: className = '',
+		// Default to small size for form previews
+		width = 'w-auto',
+		height = 'h-24',
+		imageClass = ''
+	}: Props = $props();
+</script>
+
+<div class="relative overflow-hidden rounded-lg border border-border bg-muted {className}">
+	{#if onClick}
+		<button
+			type="button"
+			class="block h-full w-full rounded-lg focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
+			onclick={onClick}
+			aria-label="Preview {name}"
+		>
+			<img
+				src={preview}
+				alt={name}
+				class="{height} {width} cursor-pointer object-cover {imageClass}"
+			/>
+		</button>
+	{:else}
+		<img
+			src={preview}
+			alt={name}
+			class="{height} {width} cursor-pointer object-cover {imageClass}"
+		/>
+	{/if}
+
+	{#if !readonly}
+		<div
+			class="absolute top-1 right-1 flex items-center justify-center opacity-0 transition-opacity hover:opacity-100"
+		>
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				class="h-6 w-6 bg-white/20 p-0 text-white hover:bg-white/30"
+				onclick={() => onRemove?.(id)}
+			>
+				<X class="h-3 w-3" />
+			</Button>
+		</div>
+	{/if}
+</div>

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreviewDialog.svelte

@@ -0,0 +1,305 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { FileText, Image, Music, FileIcon, Eye } from '@lucide/svelte';
+	import { FileTypeCategory, MimeTypeApplication } from '$lib/enums/files';
+	import { convertPDFToImage } from '$lib/utils/pdf-processing';
+	import { Button } from '$lib/components/ui/button';
+	import { getFileTypeCategory } from '$lib/utils/file-type';
+	import { formatFileSize } from '$lib/utils/file-preview';
+
+	interface Props {
+		open: boolean;
+		// Either an uploaded file or a stored attachment
+		uploadedFile?: ChatUploadedFile;
+		attachment?: DatabaseMessageExtra;
+		// For uploaded files
+		preview?: string;
+		name?: string;
+		type?: string;
+		size?: number;
+		textContent?: string;
+	}
+
+	let {
+		open = $bindable(),
+		uploadedFile,
+		attachment,
+		preview,
+		name,
+		type,
+		size,
+		textContent
+	}: Props = $props();
+
+	let displayName = $derived(uploadedFile?.name || attachment?.name || name || 'Unknown File');
+
+	let displayPreview = $derived(
+		uploadedFile?.preview || (attachment?.type === 'imageFile' ? attachment.base64Url : preview)
+	);
+
+	let displayType = $derived(
+		uploadedFile?.type ||
+			(attachment?.type === 'imageFile'
+				? 'image'
+				: attachment?.type === 'textFile'
+					? 'text'
+					: attachment?.type === 'audioFile'
+						? attachment.mimeType || 'audio'
+						: attachment?.type === 'pdfFile'
+							? MimeTypeApplication.PDF
+							: type || 'unknown')
+	);
+
+	let displaySize = $derived(uploadedFile?.size || size);
+
+	let displayTextContent = $derived(
+		uploadedFile?.textContent ||
+			(attachment?.type === 'textFile'
+				? attachment.content
+				: attachment?.type === 'pdfFile'
+					? attachment.content
+					: textContent)
+	);
+
+	let isAudio = $derived(
+		getFileTypeCategory(displayType) === FileTypeCategory.AUDIO || displayType === 'audio'
+	);
+
+	let isImage = $derived(
+		getFileTypeCategory(displayType) === FileTypeCategory.IMAGE || displayType === 'image'
+	);
+
+	let isPdf = $derived(displayType === MimeTypeApplication.PDF);
+
+	let isText = $derived(
+		getFileTypeCategory(displayType) === FileTypeCategory.TEXT || displayType === 'text'
+	);
+
+	let IconComponent = $derived(() => {
+		if (isImage) return Image;
+		if (isText || isPdf) return FileText;
+		if (isAudio) return Music;
+
+		return FileIcon;
+	});
+
+	let pdfViewMode = $state<'text' | 'pages'>('pages');
+
+	let pdfImages = $state<string[]>([]);
+
+	let pdfImagesLoading = $state(false);
+
+	let pdfImagesError = $state<string | null>(null);
+
+	async function loadPdfImages() {
+		if (!isPdf || pdfImages.length > 0 || pdfImagesLoading) return;
+
+		pdfImagesLoading = true;
+		pdfImagesError = null;
+
+		try {
+			let file: File | null = null;
+
+			if (uploadedFile?.file) {
+				file = uploadedFile.file;
+			} else if (attachment?.type === 'pdfFile') {
+				// Check if we have pre-processed images
+				if (attachment.images && Array.isArray(attachment.images)) {
+					pdfImages = attachment.images;
+					return;
+				}
+
+				// Convert base64 back to File for processing
+				if (attachment.base64Data) {
+					const base64Data = attachment.base64Data;
+					const byteCharacters = atob(base64Data);
+					const byteNumbers = new Array(byteCharacters.length);
+					for (let i = 0; i < byteCharacters.length; i++) {
+						byteNumbers[i] = byteCharacters.charCodeAt(i);
+					}
+					const byteArray = new Uint8Array(byteNumbers);
+					file = new File([byteArray], displayName, { type: MimeTypeApplication.PDF });
+				}
+			}
+
+			if (file) {
+				pdfImages = await convertPDFToImage(file);
+			} else {
+				throw new Error('No PDF file available for conversion');
+			}
+		} catch (error) {
+			pdfImagesError = error instanceof Error ? error.message : 'Failed to load PDF images';
+		} finally {
+			pdfImagesLoading = false;
+		}
+	}
+
+	$effect(() => {
+		if (open && isPdf && pdfViewMode === 'pages') {
+			loadPdfImages();
+		}
+	});
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="grid max-h-[90vh] max-w-5xl overflow-hidden !p-10 sm:w-auto sm:max-w-6xl">
+		<Dialog.Header class="flex-shrink-0">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					{#if IconComponent}
+						<IconComponent class="h-5 w-5 text-muted-foreground" />
+					{/if}
+
+					<div>
+						<Dialog.Title class="text-left">{displayName}</Dialog.Title>
+
+						<div class="flex items-center gap-2 text-sm text-muted-foreground">
+							<span>{displayType}</span>
+
+							{#if displaySize}
+								<span>•</span>
+
+								<span>{formatFileSize(displaySize)}</span>
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				{#if isPdf}
+					<div class="flex items-center gap-2">
+						<Button
+							variant={pdfViewMode === 'text' ? 'default' : 'outline'}
+							size="sm"
+							onclick={() => (pdfViewMode = 'text')}
+							disabled={pdfImagesLoading}
+						>
+							<FileText class="mr-1 h-4 w-4" />
+
+							Text
+						</Button>
+
+						<Button
+							variant={pdfViewMode === 'pages' ? 'default' : 'outline'}
+							size="sm"
+							onclick={() => {
+								pdfViewMode = 'pages';
+								loadPdfImages();
+							}}
+							disabled={pdfImagesLoading}
+						>
+							{#if pdfImagesLoading}
+								<div
+									class="mr-1 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+								></div>
+							{:else}
+								<Eye class="mr-1 h-4 w-4" />
+							{/if}
+
+							Pages
+						</Button>
+					</div>
+				{/if}
+			</div>
+		</Dialog.Header>
+
+		<div class="flex-1 overflow-auto">
+			{#if isImage && displayPreview}
+				<div class="flex items-center justify-center">
+					<img
+						src={displayPreview}
+						alt={displayName}
+						class="max-h-full rounded-lg object-contain shadow-lg"
+					/>
+				</div>
+			{:else if isPdf && pdfViewMode === 'pages'}
+				{#if pdfImagesLoading}
+					<div class="flex items-center justify-center p-8">
+						<div class="text-center">
+							<div
+								class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
+							></div>
+
+							<p class="text-muted-foreground">Converting PDF to images...</p>
+						</div>
+					</div>
+				{:else if pdfImagesError}
+					<div class="flex items-center justify-center p-8">
+						<div class="text-center">
+							<FileText class="mx-auto mb-4 h-16 w-16 text-muted-foreground" />
+
+							<p class="mb-4 text-muted-foreground">Failed to load PDF images</p>
+
+							<p class="text-sm text-muted-foreground">{pdfImagesError}</p>
+
+							<Button class="mt-4" onclick={() => (pdfViewMode = 'text')}>View as Text</Button>
+						</div>
+					</div>
+				{:else if pdfImages.length > 0}
+					<div class="max-h-[70vh] space-y-4 overflow-auto">
+						{#each pdfImages as image, index (image)}
+							<div class="text-center">
+								<p class="mb-2 text-sm text-muted-foreground">Page {index + 1}</p>
+
+								<img
+									src={image}
+									alt="PDF Page {index + 1}"
+									class="mx-auto max-w-full rounded-lg shadow-lg"
+								/>
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="flex items-center justify-center p-8">
+						<div class="text-center">
+							<FileText class="mx-auto mb-4 h-16 w-16 text-muted-foreground" />
+
+							<p class="mb-4 text-muted-foreground">No PDF pages available</p>
+						</div>
+					</div>
+				{/if}
+			{:else if (isText || (isPdf && pdfViewMode === 'text')) && displayTextContent}
+				<div
+					class="max-h-[60vh] overflow-auto rounded-lg bg-muted p-4 font-mono text-sm break-words whitespace-pre-wrap"
+				>
+					{displayTextContent}
+				</div>
+			{:else if isAudio}
+				<div class="flex items-center justify-center p-8">
+					<div class="w-full max-w-md text-center">
+						<Music class="mx-auto mb-4 h-16 w-16 text-muted-foreground" />
+
+						{#if attachment?.type === 'audioFile'}
+							<audio
+								controls
+								class="mb-4 w-full"
+								src="data:{attachment.mimeType};base64,{attachment.base64Data}"
+							>
+								Your browser does not support the audio element.
+							</audio>
+						{:else if uploadedFile?.preview}
+							<audio controls class="mb-4 w-full" src={uploadedFile.preview}>
+								Your browser does not support the audio element.
+							</audio>
+						{:else}
+							<p class="mb-4 text-muted-foreground">Audio preview not available</p>
+						{/if}
+
+						<p class="text-sm text-muted-foreground">
+							{displayName}
+						</p>
+					</div>
+				</div>
+			{:else}
+				<div class="flex items-center justify-center p-8">
+					<div class="text-center">
+						{#if IconComponent}
+							<IconComponent class="mx-auto mb-4 h-16 w-16 text-muted-foreground" />
+						{/if}
+
+						<p class="mb-4 text-muted-foreground">Preview not available for this file type</p>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

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

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { ChatAttachmentImagePreview, ChatAttachmentFilePreview } from '$lib/components/app';
+	import { FileTypeCategory } from '$lib/enums/files';
+	import { getFileTypeCategory } from '$lib/utils/file-type';
+	import ChatAttachmentPreviewDialog from './ChatAttachmentPreviewDialog.svelte';
+
+	interface Props {
+		class?: string;
+		// For ChatMessage - stored attachments
+		attachments?: DatabaseMessageExtra[];
+		readonly?: boolean;
+		// For ChatForm - pending uploads
+		onFileRemove?: (fileId: string) => void;
+		uploadedFiles?: ChatUploadedFile[];
+		// Image size customization
+		imageClass?: string;
+		imageHeight?: string;
+		imageWidth?: string;
+	}
+
+	let {
+		class: className = '',
+		attachments = [],
+		readonly = false,
+		onFileRemove,
+		uploadedFiles = $bindable([]),
+		// Default to small size for form previews
+		imageClass = '',
+		imageHeight = 'h-24',
+		imageWidth = 'w-auto'
+	}: Props = $props();
+
+	let displayItems = $derived(getDisplayItems());
+
+	// Preview dialog state
+	let previewDialogOpen = $state(false);
+	let previewItem = $state<{
+		uploadedFile?: ChatUploadedFile;
+		attachment?: DatabaseMessageExtra;
+		preview?: string;
+		name?: string;
+		type?: string;
+		size?: number;
+		textContent?: string;
+	} | null>(null);
+
+	function getDisplayItems() {
+		const items: Array<{
+			id: string;
+			name: string;
+			size?: number;
+			preview?: string;
+			type: string;
+			isImage: boolean;
+			uploadedFile?: ChatUploadedFile;
+			attachment?: DatabaseMessageExtra;
+			attachmentIndex?: number;
+			textContent?: string;
+		}> = [];
+
+		// Add uploaded files (ChatForm)
+		for (const file of uploadedFiles) {
+			items.push({
+				id: file.id,
+				name: file.name,
+				size: file.size,
+				preview: file.preview,
+				type: file.type,
+				isImage: getFileTypeCategory(file.type) === FileTypeCategory.IMAGE,
+				uploadedFile: file,
+				textContent: file.textContent
+			});
+		}
+
+		// Add stored attachments (ChatMessage)
+		for (const [index, attachment] of attachments.entries()) {
+			if (attachment.type === 'imageFile') {
+				items.push({
+					id: `attachment-${index}`,
+					name: attachment.name,
+					preview: attachment.base64Url,
+					type: 'image',
+					isImage: true,
+					attachment,
+					attachmentIndex: index
+				});
+			} else if (attachment.type === 'textFile') {
+				items.push({
+					id: `attachment-${index}`,
+					name: attachment.name,
+					type: 'text',
+					isImage: false,
+					attachment,
+					attachmentIndex: index,
+					textContent: attachment.content
+				});
+			} else if (attachment.type === 'audioFile') {
+				items.push({
+					id: `attachment-${index}`,
+					name: attachment.name,
+					type: attachment.mimeType || 'audio',
+					isImage: false,
+					attachment,
+					attachmentIndex: index
+				});
+			} else if (attachment.type === 'pdfFile') {
+				items.push({
+					id: `attachment-${index}`,
+					name: attachment.name,
+					type: 'application/pdf',
+					isImage: false,
+					attachment,
+					attachmentIndex: index,
+					textContent: attachment.content
+				});
+			}
+		}
+
+		return items;
+	}
+
+	function openPreview(item: (typeof displayItems)[0], event?: Event) {
+		if (event) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+
+		previewItem = {
+			uploadedFile: item.uploadedFile,
+			attachment: item.attachment,
+			preview: item.preview,
+			name: item.name,
+			type: item.type,
+			size: item.size,
+			textContent: item.textContent
+		};
+		previewDialogOpen = true;
+	}
+</script>
+
+{#if displayItems.length > 0}
+	<div class="flex flex-wrap items-start {readonly ? 'justify-end' : ''} gap-3 {className}">
+		{#each displayItems as item (item.id)}
+			{#if item.isImage && item.preview}
+				<ChatAttachmentImagePreview
+					class="cursor-pointer"
+					id={item.id}
+					name={item.name}
+					preview={item.preview}
+					{readonly}
+					onRemove={onFileRemove}
+					height={imageHeight}
+					width={imageWidth}
+					{imageClass}
+					onClick={(event) => openPreview(item, event)}
+				/>
+			{:else}
+				<ChatAttachmentFilePreview
+					class="cursor-pointer"
+					id={item.id}
+					name={item.name}
+					type={item.type}
+					size={item.size}
+					{readonly}
+					onRemove={onFileRemove}
+					textContent={item.textContent}
+					onClick={(event) => openPreview(item, event)}
+				/>
+			{/if}
+		{/each}
+	</div>
+{/if}
+
+{#if previewItem}
+	<ChatAttachmentPreviewDialog
+		bind:open={previewDialogOpen}
+		uploadedFile={previewItem.uploadedFile}
+		attachment={previewItem.attachment}
+		preview={previewItem.preview}
+		name={previewItem.name}
+		type={previewItem.type}
+		size={previewItem.size}
+		textContent={previewItem.textContent}
+	/>
+{/if}