From c77f5fb8773015b5420ec118349bc19425850829 Mon Sep 17 00:00:00 2001
From: Aunali321 <hello@auna.li>
Date: Tue, 2 Sep 2025 02:46:38 +0530
Subject: [PATCH] feat: Add previews for all supported file types

---
 src/app.css                                   |  10 +
 .../ui/file-preview/audio-preview.svelte      | 512 ++++++++++++++++++
 .../ui/file-preview/document-preview.svelte   | 379 +++++++++++++
 .../ui/file-preview/file-preview.svelte       |  97 ++++
 .../ui/file-preview/image-preview.svelte      | 149 +++++
 .../ui/file-preview/video-preview.svelte      | 321 +++++++++++
 src/lib/utils/file.ts                         |  36 ++
 src/routes/chat/[id]/message.svelte           |  60 +-
 8 files changed, 1530 insertions(+), 34 deletions(-)
 create mode 100644 src/lib/components/ui/file-preview/audio-preview.svelte
 create mode 100644 src/lib/components/ui/file-preview/document-preview.svelte
 create mode 100644 src/lib/components/ui/file-preview/file-preview.svelte
 create mode 100644 src/lib/components/ui/file-preview/image-preview.svelte
 create mode 100644 src/lib/components/ui/file-preview/video-preview.svelte
 create mode 100644 src/lib/utils/file.ts

diff --git a/src/app.css b/src/app.css
index 4e47f90..26afe46 100644
--- a/src/app.css
+++ b/src/app.css
@@ -343,6 +343,16 @@
 		overscroll-behavior: contain;
 	}
 
+	/* Large modal variant for file previews */
+	.modal-large .modal-box {
+		@apply max-w-[90vw] max-h-[90vh] p-4;
+	}
+
+	/* Extra large modal for maximum viewing space */
+	.modal-xlarge .modal-box {
+		@apply max-w-[95vw] max-h-[95vh] p-2;
+	}
+
 	.modal-top {
 		@apply place-items-start;
 
diff --git a/src/lib/components/ui/file-preview/audio-preview.svelte b/src/lib/components/ui/file-preview/audio-preview.svelte
new file mode 100644
index 0000000..3d6d4dc
--- /dev/null
+++ b/src/lib/components/ui/file-preview/audio-preview.svelte
@@ -0,0 +1,512 @@
+<script lang="ts">
+	import type { Attachment } from '$lib/types';
+	import { cn } from '$lib/utils/utils';
+	import { Modal } from '$lib/components/ui/modal';
+	import { Button } from '$lib/components/ui/button';
+	import DownloadIcon from '~icons/lucide/download';
+	import ExternalLinkIcon from '~icons/lucide/external-link';
+	import XIcon from '~icons/lucide/x';
+	import MaximizeIcon from '~icons/lucide/maximize-2';
+	import Tooltip from '$lib/components/ui/tooltip.svelte';
+	import { formatFileSize, formatTime, openInNewTab } from '$lib/utils/file';
+	import { untrack } from 'svelte';
+
+	let { attachment, isUserMessage = false, compact = false } = $props<{
+		attachment: Attachment;
+		isUserMessage?: boolean;
+		compact?: boolean;
+	}>();
+
+	let audioUrl = $derived(attachment.url);
+	let fileName = $derived(attachment.fileName);
+	let fileSize = $derived(attachment.size);
+
+	let isPlaying = $state(false);
+	let currentTime = $state(0);
+	let duration = $state(0);
+	let volume = $state(0.7);
+	let isMuted = $state(false);
+	let audioElement: HTMLAudioElement | undefined;
+	let modalOpen = $state(false);
+
+
+	const togglePlay = () => {
+		if (audioElement) {
+			if (audioElement.paused) {
+				audioElement.play();
+				isPlaying = true;
+			} else {
+				audioElement.pause();
+				isPlaying = false;
+			}
+		}
+	};
+
+	const toggleMute = () => {
+		if (audioElement) {
+			audioElement.muted = !audioElement.muted;
+			isMuted = audioElement.muted;
+		}
+	};
+
+	const handleTimeUpdate = () => {
+		if (audioElement) {
+			currentTime = audioElement.currentTime;
+			duration = audioElement.duration || 0;
+		}
+	};
+
+	const handleSeek = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		const newTime = parseFloat(target.value);
+		if (audioElement) {
+			audioElement.currentTime = newTime;
+			currentTime = newTime;
+		}
+	};
+
+	const handleVolumeChange = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		const newVolume = parseFloat(target.value);
+		if (audioElement) {
+			audioElement.volume = newVolume;
+			volume = newVolume;
+			isMuted = newVolume === 0;
+		}
+	};
+
+	// Real waveform analysis using Web Audio API
+	let baseWaveformBars = $state(Array(40).fill(0.5));
+	let baseModalBars = $state(Array(80).fill(0.5));
+	
+	async function analyzeAudio() {
+		try {
+			const response = await fetch(audioUrl);
+			const arrayBuffer = await response.arrayBuffer();
+			const audioContext = new AudioContext();
+			const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+			
+			// Get audio data from first channel
+			const channelData = audioBuffer.getChannelData(0);
+			const samples = channelData.length;
+			
+			// Generate waveform for 40 bars
+			const samplesPerBar40 = Math.floor(samples / 40);
+			const waveform40 = Array(40).fill(0);
+			
+			for (let i = 0; i < 40; i++) {
+				let sum = 0;
+				const start = i * samplesPerBar40;
+				const end = Math.min(start + samplesPerBar40, samples);
+				
+				// Calculate RMS (root mean square) for this segment
+				for (let j = start; j < end; j++) {
+					sum += channelData[j] * channelData[j];
+				}
+				waveform40[i] = Math.min(1, Math.sqrt(sum / (end - start)) * 3); // Scale for visibility
+			}
+			
+			// Generate waveform for 80 bars
+			const samplesPerBar80 = Math.floor(samples / 80);
+			const waveform80 = Array(80).fill(0);
+			
+			for (let i = 0; i < 80; i++) {
+				let sum = 0;
+				const start = i * samplesPerBar80;
+				const end = Math.min(start + samplesPerBar80, samples);
+				
+				for (let j = start; j < end; j++) {
+					sum += channelData[j] * channelData[j];
+				}
+				waveform80[i] = Math.min(1, Math.sqrt(sum / (end - start)) * 3);
+			}
+			
+			baseWaveformBars = waveform40;
+			baseModalBars = waveform80;
+			audioContext.close();
+			
+		} catch (error) {
+			console.warn('Could not analyze audio, using fallback waveform:', error);
+			// Fallback to pattern-based waveform
+			const generateFallback = (bars) => Array.from({ length: bars }, (_, i) => {
+				const baseHeight = Math.sin(i * 0.3) * 0.3 + 0.5;
+				const noise = (Math.random() - 0.5) * 0.3;
+				return Math.max(0.1, Math.min(1, baseHeight + noise));
+			});
+			baseWaveformBars = generateFallback(40);
+			baseModalBars = generateFallback(80);
+		}
+	}
+	
+	// Analyze audio when component loads
+	$effect(() => {
+		if (audioUrl) {
+			analyzeAudio();
+		}
+	});
+	let animationFrame: number;
+	let animatedBars = $state([...baseWaveformBars]);
+	let animatedModalBars = $state([...baseModalBars]);
+	
+	// Calculate progress outside of the each loop to avoid performance issues
+	let progress = $derived(currentTime / (duration || 1));
+	
+	// Safe animation that doesn't cause reactive loops
+	$effect(() => {
+		if (isPlaying) {
+			const animate = () => {
+				const time = Date.now() * 0.01;
+				
+				// Create new array instead of mutating existing one
+				const newBars = baseWaveformBars.map((baseHeight, i) => {
+					const activeBar = Math.floor(progress * baseWaveformBars.length);
+					
+					if (i <= activeBar) {
+						// Add subtle animation to played portion
+						const variation = (Math.sin(time + i * 0.5) * 0.1);
+						return Math.max(0.3, Math.min(1, baseHeight + variation));
+					}
+					// Keep unplayed portion at reduced height
+					return baseHeight * 0.7;
+				});
+				
+				// Animate modal bars too
+				const newModalBars = baseModalBars.map((baseHeight, i) => {
+					const activeBar = Math.floor(progress * baseModalBars.length);
+					
+					if (i <= activeBar) {
+						// Add subtle animation to played portion
+						const variation = (Math.sin(time + i * 0.3) * 0.1);
+						return Math.max(0.3, Math.min(1, baseHeight + variation));
+					}
+					// Keep unplayed portion at reduced height
+					return baseHeight * 0.7;
+				});
+				
+				// Use untrack to prevent reactive updates from triggering this effect
+				untrack(() => {
+					animatedBars = newBars;
+					animatedModalBars = newModalBars;
+				});
+				animationFrame = requestAnimationFrame(animate);
+			};
+			
+			animationFrame = requestAnimationFrame(animate);
+		} else {
+			if (animationFrame) {
+				cancelAnimationFrame(animationFrame);
+			}
+			// Reset to base heights when not playing
+			animatedBars = [...baseWaveformBars];
+			animatedModalBars = [...baseModalBars];
+		}
+		
+		return () => {
+			if (animationFrame) {
+				cancelAnimationFrame(animationFrame);
+			}
+		};
+	});
+</script>
+
+<audio
+	bind:this={audioElement}
+	src={audioUrl}
+	onplay={() => (isPlaying = true)}
+	onpause={() => (isPlaying = false)}
+	ontimeupdate={handleTimeUpdate}
+	onloadedmetadata={() => {
+		if (audioElement) {
+			duration = audioElement.duration || 0;
+			audioElement.volume = volume;
+		}
+	}}
+	onvolumechange={() => {
+		if (audioElement) {
+			volume = audioElement.volume;
+			isMuted = audioElement.muted;
+		}
+	}}
+	onended={() => (isPlaying = false)}
+/>
+
+<div class="flex flex-col gap-3">
+	{#if compact}
+		<!-- Compact view for inline display -->
+		<div class="flex items-center gap-3">
+			<button
+				onclick={togglePlay}
+				class="flex-shrink-0 w-10 h-10 bg-primary/10 hover:bg-primary/20 rounded-full flex items-center justify-center transition-colors"
+				aria-label={isPlaying ? 'Pause audio' : 'Play audio'}
+			>
+				{#if isPlaying}
+					<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 20 20">
+						<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+					</svg>
+				{:else}
+					<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 20 20">
+						<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+					</svg>
+				{/if}
+			</button>
+			
+			<div class="flex-1 min-w-0">
+				<div class="text-sm font-medium text-foreground truncate">{fileName}</div>
+				<div class="text-xs text-muted-foreground">
+					Audio • {formatFileSize(fileSize)}
+				</div>
+			</div>
+			<button
+				onclick={() => (modalOpen = true)}
+				class="flex-shrink-0 p-1 rounded hover:bg-accent transition-colors"
+				aria-label="Open audio in large modal"
+			>
+				<MaximizeIcon class="w-4 h-4" />
+			</button>
+		</div>
+	{:else}
+		<!-- Full view for dedicated audio display -->
+		<div class="bg-card border border-border rounded-lg p-4">
+			<!-- Audio header with icon and info -->
+			<div class="flex items-center gap-3 mb-4">
+				<div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
+					<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
+						<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+					</svg>
+				</div>
+				<div class="flex-1 min-w-0">
+					<div class="text-sm font-medium text-foreground truncate">{fileName}</div>
+					<div class="text-xs text-muted-foreground">
+						{formatFileSize(fileSize)} • {formatTime(duration)}
+					</div>
+				</div>
+				<div class="flex items-center gap-1">
+					<button
+						onclick={() => (modalOpen = true)}
+						class="flex-shrink-0 p-2 rounded hover:bg-accent transition-colors"
+						aria-label="Open audio in large modal"
+					>
+						<MaximizeIcon class="w-4 h-4" />
+					</button>
+					<a
+						href={audioUrl}
+						download={fileName}
+						class="flex-shrink-0 p-2 rounded hover:bg-accent transition-colors"
+						aria-label={`Download ${fileName}`}
+					>
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+						</svg>
+					</a>
+				</div>
+			</div>
+			
+			<!-- Waveform visualization -->
+			<div class="mb-4 h-16 flex items-center gap-1 px-2">
+				{#each animatedBars as height, i}
+					{@const isActive = i <= Math.floor(progress * animatedBars.length)}
+					<div
+						class="flex-1 rounded-sm transition-all duration-200 {isActive ? 'bg-primary' : 'bg-primary/20'}"
+						style="height: {height * 100}%"
+					/>
+				{/each}
+			</div>
+			
+			<!-- Progress bar -->
+			<div class="mb-3">
+				<input
+					type="range"
+					min="0"
+					max={duration || 100}
+					value={currentTime}
+					oninput={handleSeek}
+					class="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer hover:[&::-webkit-slider-thumb]:scale-110 transition-transform"
+					aria-label="Audio progress"
+				/>
+				<div class="flex justify-between text-xs text-muted-foreground mt-1">
+					<span>{formatTime(currentTime)}</span>
+					<span>{formatTime(duration)}</span>
+				</div>
+			</div>
+			
+			<!-- Control buttons -->
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<button
+						onclick={togglePlay}
+						class="w-10 h-10 bg-primary hover:bg-primary/90 rounded-full flex items-center justify-center transition-colors"
+						aria-label={isPlaying ? 'Pause audio' : 'Play audio'}
+					>
+						{#if isPlaying}
+							<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+								<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+							</svg>
+						{:else}
+							<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+								<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+							</svg>
+						{/if}
+					</button>
+					
+					<button
+						onclick={toggleMute}
+						class="w-8 h-8 bg-muted hover:bg-muted/80 rounded-full flex items-center justify-center transition-colors"
+						aria-label={isMuted ? 'Unmute audio' : 'Mute audio'}
+					>
+						{#if isMuted}
+							<svg class="w-4 h-4 text-foreground" fill="currentColor" viewBox="0 0 20 20">
+								<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+							</svg>
+						{:else}
+							<svg class="w-4 h-4 text-foreground" fill="currentColor" viewBox="0 0 20 20">
+								<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
+							</svg>
+						{/if}
+					</button>
+					
+					<input
+						type="range"
+						min="0"
+						max="1"
+						step="0.1"
+						value={volume}
+						oninput={handleVolumeChange}
+						class="w-20 h-2 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer"
+						aria-label="Volume control"
+					/>
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Modal for enhanced audio viewing -->
+	<Modal bind:open={modalOpen} class="modal-large">
+		<div class="flex items-center justify-between p-2">
+			<h2 class="text-lg font-semibold truncate">{fileName}</h2>
+			<div class="flex items-center gap-2 flex-shrink-0">
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button
+							size="iconSm"
+							variant="outline"
+							download={fileName}
+							href={audioUrl}
+							{...tooltip.trigger}
+						>
+							<DownloadIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Download audio
+				</Tooltip>
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button size="iconSm" variant="outline" onclick={() => openInNewTab(audioUrl)} {...tooltip.trigger}>
+							<ExternalLinkIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Open in new tab
+				</Tooltip>
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button
+							size="iconSm"
+							variant="outline"
+							onclick={() => (modalOpen = false)}
+							{...tooltip.trigger}
+						>
+							<XIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Close
+				</Tooltip>
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-6 p-6">
+			<!-- Enhanced waveform visualization -->
+			<div class="h-24 flex items-center gap-1 px-4 bg-muted/20 rounded-lg">
+				{#each animatedModalBars as height, i}
+					{@const isActive = i <= Math.floor(progress * animatedModalBars.length)}
+					<div
+						class="flex-1 rounded-sm transition-all duration-300 {isActive ? 'bg-primary' : 'bg-primary/30'}"
+						style="height: {height * 100}%"
+					/>
+				{/each}
+			</div>
+			
+			<!-- Enhanced audio player -->
+			<div class="bg-card border border-border rounded-lg p-6">
+				<!-- Progress bar -->
+				<div class="mb-4">
+					<input
+						type="range"
+						min="0"
+						max={duration || 100}
+						value={currentTime}
+						oninput={handleSeek}
+						class="w-full h-3 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer hover:[&::-webkit-slider-thumb]:scale-110 transition-transform"
+						aria-label="Audio progress"
+					/>
+					<div class="flex justify-between text-sm text-muted-foreground mt-2">
+						<span>{formatTime(currentTime)}</span>
+						<span>{formatTime(duration)}</span>
+					</div>
+				</div>
+				
+				<!-- Control buttons -->
+				<div class="flex items-center justify-between">
+					<div class="flex items-center gap-4">
+						<button
+							onclick={togglePlay}
+							class="w-12 h-12 bg-primary hover:bg-primary/90 rounded-full flex items-center justify-center transition-colors"
+							aria-label={isPlaying ? 'Pause audio' : 'Play audio'}
+						>
+							{#if isPlaying}
+								<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
+									<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+								</svg>
+							{:else}
+								<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
+									<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+								</svg>
+							{/if}
+						</button>
+						
+						<div class="flex items-center gap-3">
+							<button
+								onclick={toggleMute}
+								class="w-10 h-10 bg-muted hover:bg-muted/80 rounded-full flex items-center justify-center transition-colors"
+								aria-label={isMuted ? 'Unmute audio' : 'Mute audio'}
+							>
+								{#if isMuted}
+									<svg class="w-5 h-5 text-foreground" fill="currentColor" viewBox="0 0 20 20">
+										<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+									</svg>
+								{:else}
+									<svg class="w-5 h-5 text-foreground" fill="currentColor" viewBox="0 0 20 20">
+										<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
+									</svg>
+								{/if}
+							</button>
+							
+							<input
+								type="range"
+								min="0"
+								max="1"
+								step="0.1"
+								value={volume}
+								oninput={handleVolumeChange}
+								class="w-24 h-2 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer"
+								aria-label="Volume control"
+							/>
+						</div>
+					</div>
+					
+					<div class="text-sm text-muted-foreground">
+						{formatFileSize(fileSize)} • {formatTime(duration)}
+					</div>
+				</div>
+			</div>
+		</div>
+	</Modal>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/ui/file-preview/document-preview.svelte b/src/lib/components/ui/file-preview/document-preview.svelte
new file mode 100644
index 0000000..6aad057
--- /dev/null
+++ b/src/lib/components/ui/file-preview/document-preview.svelte
@@ -0,0 +1,379 @@
+<script lang="ts">
+	import type { Attachment } from '$lib/types';
+	import { cn } from '$lib/utils/utils';
+	import { Modal } from '$lib/components/ui/modal';
+	import { Button } from '$lib/components/ui/button';
+	import DownloadIcon from '~icons/lucide/download';
+	import ExternalLinkIcon from '~icons/lucide/external-link';
+	import XIcon from '~icons/lucide/x';
+	import MaximizeIcon from '~icons/lucide/maximize-2';
+	import Tooltip from '$lib/components/ui/tooltip.svelte';
+	import { formatFileSize, openInNewTab, getFileExtension } from '$lib/utils/file';
+
+	let { attachment, isUserMessage = false, compact = false } = $props<{
+		attachment: Attachment;
+		isUserMessage?: boolean;
+		compact?: boolean;
+	}>();
+
+	let documentUrl = $derived(attachment.url);
+	let fileName = $derived(attachment.fileName);
+	let fileSize = $derived(attachment.size);
+	let mimeType = $derived(attachment.mimeType);
+	let modalOpen = $state(false);
+
+
+	const getFileIcon = () => {
+		const extension = getFileExtension(fileName);
+		
+		// PDF files
+		if (extension === 'pdf') {
+			return {
+				icon: '📄',
+				color: 'text-red-500',
+				bgColor: 'bg-red-50',
+				label: 'PDF Document'
+			};
+		}
+		
+		// Text files
+		if (['txt', 'md', 'markdown', 'rtf'].includes(extension)) {
+			return {
+				icon: '📝',
+				color: 'text-blue-500',
+				bgColor: 'bg-blue-50',
+				label: 'Text Document'
+			};
+		}
+		
+		// Word documents
+		if (['doc', 'docx'].includes(extension)) {
+			return {
+				icon: '📘',
+				color: 'text-blue-600',
+				bgColor: 'bg-blue-50',
+				label: 'Word Document'
+			};
+		}
+		
+		// Excel spreadsheets
+		if (['xls', 'xlsx', 'csv'].includes(extension)) {
+			return {
+				icon: '📗',
+				color: 'text-green-600',
+				bgColor: 'bg-green-50',
+				label: 'Spreadsheet'
+			};
+		}
+		
+		// PowerPoint presentations
+		if (['ppt', 'pptx'].includes(extension)) {
+			return {
+				icon: '📙',
+				color: 'text-orange-600',
+				bgColor: 'bg-orange-50',
+				label: 'Presentation'
+			};
+		}
+		
+		// Code files
+		if (['js', 'ts', 'jsx', 'tsx', 'html', 'css', 'scss', 'json', 'xml', 'py', 'java', 'cpp', 'c', 'cs', 'php', 'rb', 'go', 'rs', 'swift', 'kt', 'sql'].includes(extension)) {
+			return {
+				icon: '💻',
+				color: 'text-purple-600',
+				bgColor: 'bg-purple-50',
+				label: 'Code File'
+			};
+		}
+		
+		// Archive files
+		if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
+			return {
+				icon: '📦',
+				color: 'text-yellow-600',
+				bgColor: 'bg-yellow-50',
+				label: 'Archive'
+			};
+		}
+		
+		// Default document
+		return {
+			icon: '📄',
+			color: 'text-gray-600',
+			bgColor: 'bg-gray-50',
+			label: 'Document'
+		};
+	};
+
+	let fileDetails = $derived(getFileIcon());
+</script>
+
+<div class="flex flex-col gap-3">
+	{#if compact}
+		<!-- Compact view for inline display -->
+		<div class="flex items-center gap-2">
+			<div class={`flex-shrink-0 w-10 h-10 ${fileDetails.bgColor} rounded-lg flex items-center justify-center`}>
+				<span class="text-lg">{fileDetails.icon}</span>
+			</div>
+			<div class="flex-1 min-w-0">
+				<div class="text-sm font-medium text-foreground truncate">{fileName}</div>
+				<div class="text-xs text-muted-foreground">
+					{fileDetails.label} • {formatFileSize(fileSize)}
+				</div>
+			</div>
+			<button
+				onclick={() => (modalOpen = true)}
+				class="flex-shrink-0 p-1 rounded hover:bg-accent transition-colors"
+				aria-label="Open document in large modal"
+			>
+				<MaximizeIcon class="w-4 h-4" />
+			</button>
+		</div>
+	{:else}
+		<!-- Full view for dedicated document display -->
+		<div class="bg-card border border-border rounded-lg p-4">
+			<div class="flex items-start gap-4">
+				<!-- Document icon -->
+				<div class={`flex-shrink-0 w-16 h-16 ${fileDetails.bgColor} rounded-xl flex items-center justify-center`}>
+					<span class="text-2xl">{fileDetails.icon}</span>
+				</div>
+				
+				<!-- Document info -->
+				<div class="flex-1 min-w-0">
+					<div class="flex items-start justify-between gap-2">
+						<div class="flex-1 min-w-0">
+							<h3 class="text-sm font-semibold text-foreground truncate">
+								{fileName}
+							</h3>
+							<p class="text-xs text-muted-foreground mt-1">
+								{fileDetails.label}
+							</p>
+							<div class="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
+								<span>{formatFileSize(fileSize)}</span>
+								<span>{mimeType}</span>
+							</div>
+						</div>
+						
+						<!-- Action buttons -->
+						<div class="flex items-center gap-2 flex-shrink-0">
+							<!-- Maximize button -->
+							<button
+								onclick={() => (modalOpen = true)}
+								class="p-2 rounded-lg hover:bg-accent transition-colors"
+								aria-label={`Open ${fileName} in large modal`}
+								title="Open in large modal"
+							>
+								<MaximizeIcon class="w-4 h-4" />
+							</button>
+							
+							{#if mimeType.startsWith('image/') || mimeType === 'application/pdf'}
+								<!-- Preview button for viewable documents -->
+								<button
+									onclick={() => openInNewTab(documentUrl)}
+									class="p-2 rounded-lg hover:bg-accent transition-colors"
+									aria-label={`Preview ${fileName}`}
+									title="Preview document"
+								>
+									<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+									</svg>
+								</button>
+							{/if}
+							
+							<!-- Download button -->
+							<a
+								href={documentUrl}
+								download={fileName}
+								class="p-2 rounded-lg hover:bg-accent transition-colors"
+								aria-label={`Download ${fileName}`}
+								title="Download document"
+							>
+								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+								</svg>
+							</a>
+						</div>
+					</div>
+					
+					<!-- Additional metadata -->
+					<div class="mt-3 pt-3 border-t border-border">
+						<div class="flex items-center justify-between text-xs">
+							<div class="flex items-center gap-2">
+								<span class="inline-flex items-center px-2 py-1 rounded-full bg-muted text-muted-foreground">
+									{fileDetails.label}
+								</span>
+								{#if fileName.includes('.')}
+									<span class="inline-flex items-center px-2 py-1 rounded-full bg-muted text-muted-foreground">
+										.{fileName.split('.').pop()?.toUpperCase()}
+									</span>
+								{/if}
+							</div>
+							
+							<div class="text-muted-foreground">
+								{formatFileSize(fileSize)}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			
+			<!-- Preview hint for viewable documents -->
+			{#if mimeType.startsWith('image/') || mimeType === 'application/pdf'}
+				<div class="mt-3 p-3 bg-muted/50 rounded-lg">
+					<div class="flex items-center gap-2 text-xs text-muted-foreground">
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+						</svg>
+						<span>Click the eye icon to preview this document in a new tab</span>
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Modal for enhanced document viewing -->
+	<Modal bind:open={modalOpen} class="modal-large">
+		<div class="flex items-center justify-between p-2">
+			<h2 class="text-lg font-semibold truncate">{fileName}</h2>
+			<div class="flex items-center gap-2 flex-shrink-0">
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button
+							size="iconSm"
+							variant="outline"
+							download={fileName}
+							href={documentUrl}
+							{...tooltip.trigger}
+						>
+							<DownloadIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Download document
+				</Tooltip>
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button size="iconSm" variant="outline" onclick={() => openInNewTab(documentUrl)} {...tooltip.trigger}>
+							<ExternalLinkIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Open in new tab
+				</Tooltip>
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button
+							size="iconSm"
+							variant="outline"
+							onclick={() => (modalOpen = false)}
+							{...tooltip.trigger}
+						>
+							<XIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Close
+				</Tooltip>
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-6 p-6">
+			<!-- Document header with enhanced info -->
+			<div class="flex items-start gap-6">
+				<div class={`flex-shrink-0 w-20 h-20 ${fileDetails.bgColor} rounded-2xl flex items-center justify-center`}>
+					<span class="text-3xl">{fileDetails.icon}</span>
+				</div>
+				
+				<div class="flex-1 min-w-0">
+					<h3 class="text-xl font-semibold text-foreground truncate mb-2">
+						{fileName}
+					</h3>
+					<div class="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+						<span class="inline-flex items-center px-3 py-1 rounded-full bg-muted text-muted-foreground">
+							{fileDetails.label}
+						</span>
+						{#if fileName.includes('.')}
+							<span class="inline-flex items-center px-3 py-1 rounded-full bg-muted text-muted-foreground">
+								.{fileName.split('.').pop()?.toUpperCase()}
+							</span>
+						{/if}
+						<span>{formatFileSize(fileSize)}</span>
+						<span>{mimeType}</span>
+					</div>
+				</div>
+			</div>
+			
+			<!-- Document preview area -->
+			<div class="bg-muted/20 rounded-lg p-8 min-h-[400px] flex items-center justify-center">
+				{#if mimeType.startsWith('image/')}
+					<!-- Image preview -->
+					<img 
+						src={documentUrl} 
+						alt={fileName} 
+						class="max-h-[60vh] max-w-full rounded-lg object-contain shadow-lg"
+						loading="lazy"
+					/>
+				{:else if mimeType === 'application/pdf'}
+					<!-- PDF preview -->
+					<div class="text-center">
+						<div class={`w-16 h-16 ${fileDetails.bgColor} rounded-full flex items-center justify-center mx-auto mb-4`}>
+							<span class="text-2xl">{fileDetails.icon}</span>
+						</div>
+						<h4 class="text-lg font-medium mb-2">PDF Document</h4>
+						<p class="text-muted-foreground mb-4">
+							This PDF document will open in a new tab for the best viewing experience.
+						</p>
+						<Button onclick={() => openInNewTab(documentUrl)} variant="outline">
+							Open PDF in new tab
+							<ExternalLinkIcon class="w-4 h-4 ml-2" />
+						</Button>
+					</div>
+				{:else}
+					<!-- Generic document preview -->
+					<div class="text-center">
+						<div class={`w-16 h-16 ${fileDetails.bgColor} rounded-full flex items-center justify-center mx-auto mb-4`}>
+							<span class="text-2xl">{fileDetails.icon}</span>
+						</div>
+						<h4 class="text-lg font-medium mb-2">{fileDetails.label}</h4>
+						<p class="text-muted-foreground mb-4">
+							This {fileDetails.label.toLowerCase()} can be downloaded for viewing in the appropriate application.
+						</p>
+						<div class="flex items-center justify-center gap-3">
+							<Button onclick={() => openInNewTab(documentUrl)} variant="outline">
+								Open in new tab
+								<ExternalLinkIcon class="w-4 h-4 ml-2" />
+							</Button>
+							<Button download={fileName} href={documentUrl}>
+								Download
+								<DownloadIcon class="w-4 h-4 ml-2" />
+							</Button>
+						</div>
+					</div>
+				{/if}
+			</div>
+			
+			<!-- Document details -->
+			<div class="bg-card border border-border rounded-lg p-4">
+				<h4 class="font-medium mb-3">Document Details</h4>
+				<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+					<div>
+						<div class="text-muted-foreground">Type</div>
+						<div class="font-medium">{fileDetails.label}</div>
+					</div>
+					<div>
+						<div class="text-muted-foreground">Size</div>
+						<div class="font-medium">{formatFileSize(fileSize)}</div>
+					</div>
+					<div>
+						<div class="text-muted-foreground">Format</div>
+						<div class="font-medium">{mimeType}</div>
+					</div>
+					{#if fileName.includes('.')}
+						<div>
+							<div class="text-muted-foreground">Extension</div>
+							<div class="font-medium">.{fileName.split('.').pop()?.toUpperCase()}</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</Modal>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/ui/file-preview/file-preview.svelte b/src/lib/components/ui/file-preview/file-preview.svelte
new file mode 100644
index 0000000..56f1c62
--- /dev/null
+++ b/src/lib/components/ui/file-preview/file-preview.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import type { Attachment } from '$lib/types';
+	import ImagePreview from './image-preview.svelte';
+	import VideoPreview from './video-preview.svelte';
+	import AudioPreview from './audio-preview.svelte';
+	import DocumentPreview from './document-preview.svelte';
+	import { cn } from '$lib/utils/utils';
+	import { formatFileSize } from '$lib/utils/file';
+
+	let { attachment, isUserMessage = false, compact = false } = $props<{
+		attachment: Attachment;
+		isUserMessage?: boolean;
+		compact?: boolean;
+	}>();
+
+	let fileType = $derived(attachment.type);
+	let fileName = $derived(attachment.fileName);
+	let fileSize = $derived(attachment.size);
+	let mimeType = $derived(attachment.mimeType);
+
+	// Get appropriate icon based on file type
+	function getFileIcon() {
+		switch (fileType) {
+			case 'image':
+				return '🖼️';
+			case 'video':
+				return '🎥';
+			case 'audio':
+				return '🎵';
+			case 'document':
+				return '📄';
+			default:
+				return '📎';
+		}
+	}
+
+</script>
+
+<div
+	class={cn(
+		'group relative flex flex-col overflow-hidden rounded-lg border transition-all duration-200',
+		compact
+			? 'bg-background/50 border-border/50 p-2 hover:bg-accent/5'
+			: 'bg-card border-border p-4 hover:border-border/80 hover:shadow-sm',
+		isUserMessage && 'bg-primary/5 border-primary/20'
+	)}
+	role="figure"
+	aria-label={`File attachment: ${fileName}`}
+>
+	{#if fileType === 'image'}
+		<ImagePreview
+			{attachment}
+			{isUserMessage}
+			{compact}
+			alt={fileName}
+		/>
+	{:else if fileType === 'video'}
+		<VideoPreview
+			{attachment}
+			{isUserMessage}
+			{compact}
+		/>
+	{:else if fileType === 'audio'}
+		<AudioPreview
+			{attachment}
+			{isUserMessage}
+			{compact}
+		/>
+	{:else if fileType === 'document'}
+		<DocumentPreview
+			{attachment}
+			{isUserMessage}
+			{compact}
+		/>
+	{:else}
+		<!-- Fallback for unknown file types -->
+		<div class="flex items-center gap-3 p-4">
+			<div class="flex-shrink-0 text-2xl">{getFileIcon()}</div>
+			<div class="flex-1 min-w-0">
+				<div class="text-sm font-medium text-foreground truncate">{fileName}</div>
+				<div class="text-xs text-muted-foreground">
+					{formatFileSize(fileSize)} • {mimeType}
+				</div>
+			</div>
+			<a
+				href={attachment.url}
+				download={fileName}
+				class="flex-shrink-0 p-2 rounded hover:bg-accent transition-colors"
+				aria-label={`Download ${fileName}`}
+			>
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+				</svg>
+			</a>
+		</div>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/src/lib/components/ui/file-preview/image-preview.svelte b/src/lib/components/ui/file-preview/image-preview.svelte
new file mode 100644
index 0000000..2688704
--- /dev/null
+++ b/src/lib/components/ui/file-preview/image-preview.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import type { Attachment } from '$lib/types';
+	import { cn } from '$lib/utils/utils';
+	import { Modal } from '$lib/components/ui/modal';
+	import { Button } from '$lib/components/ui/button';
+	import DownloadIcon from '~icons/lucide/download';
+	import ExternalLinkIcon from '~icons/lucide/external-link';
+	import XIcon from '~icons/lucide/x';
+	import Tooltip from '$lib/components/ui/tooltip.svelte';
+	import { openInNewTab } from '$lib/utils/file';
+
+	let { attachment, isUserMessage = false, compact = false, alt = '' } = $props<{
+		attachment: Attachment;
+		isUserMessage?: boolean;
+		compact?: boolean;
+		alt?: string;
+	}>();
+
+	let modalOpen = $state(false);
+
+	let imageUrl = $derived(attachment.url);
+	let fileName = $derived(attachment.fileName);
+
+</script>
+
+<div class="relative group">
+	{#if compact}
+		<!-- Compact view for inline display -->
+		<div class="flex items-center gap-2">
+			<div 
+				class="relative overflow-hidden rounded cursor-pointer hover:opacity-90 transition-opacity"
+				onclick={() => (modalOpen = true)}
+				role="button"
+				tabindex="0"
+				onkeydown={(e) => e.key === 'Enter' && (modalOpen = true)}
+				aria-label={`View full size image: ${fileName}`}
+			>
+				<img
+					src={imageUrl}
+					alt={alt}
+					class="w-16 h-16 object-cover rounded"
+					loading="lazy"
+				/>
+				<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+					<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
+					</svg>
+				</div>
+			</div>
+			<div class="flex-1 min-w-0">
+				<div class="text-sm font-medium text-foreground truncate">{fileName}</div>
+				<div class="text-xs text-muted-foreground">Image</div>
+			</div>
+		</div>
+	{:else}
+		<!-- Full view for dedicated image display -->
+		<div
+			class="relative overflow-hidden rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
+			onclick={() => (modalOpen = true)}
+			role="button"
+			tabindex="0"
+			onkeydown={(e) => e.key === 'Enter' && (modalOpen = true)}
+			aria-label={`View full size image: ${fileName}`}
+		>
+			<img
+				src={imageUrl}
+				alt={alt}
+				class="w-full h-auto max-h-[400px] object-contain rounded-lg bg-muted/20"
+				loading="lazy"
+			/>
+			<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+				<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
+				</svg>
+			</div>
+		</div>
+		
+		<!-- Image info overlay -->
+		<div class="mt-2 flex items-center justify-between">
+			<div class="text-sm text-muted-foreground truncate">
+				{fileName}
+			</div>
+			<a
+				href={imageUrl}
+				download={fileName}
+				class="p-1 rounded hover:bg-accent transition-colors"
+				aria-label={`Download ${fileName}`}
+				onclick={(e) => e.stopPropagation()}
+			>
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+				</svg>
+			</a>
+		</div>
+	{/if}
+
+	<!-- Modal for full-size view -->
+	<Modal bind:open={modalOpen} class="modal-large">
+		<div class="flex items-center justify-between p-2">
+			<h2 class="text-lg font-semibold truncate">{fileName}</h2>
+			<div class="flex items-center gap-2 flex-shrink-0">
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button
+							size="iconSm"
+							variant="outline"
+							download={fileName}
+							href={imageUrl}
+							{...tooltip.trigger}
+						>
+							<DownloadIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Download image
+				</Tooltip>
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button size="iconSm" variant="outline" onclick={() => openInNewTab(imageUrl)} {...tooltip.trigger}>
+							<ExternalLinkIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Open in new tab
+				</Tooltip>
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button
+							size="iconSm"
+							variant="outline"
+							onclick={() => (modalOpen = false)}
+							{...tooltip.trigger}
+						>
+							<XIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Close
+				</Tooltip>
+			</div>
+		</div>
+
+		<div class="flex items-center justify-center p-4 bg-muted/20 rounded-lg min-h-[400px]">
+			<img 
+				src={imageUrl} 
+				alt={alt} 
+				class="max-h-[75vh] max-w-full rounded-lg object-contain shadow-lg"
+				loading="lazy"
+			/>
+		</div>
+	</Modal>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/ui/file-preview/video-preview.svelte b/src/lib/components/ui/file-preview/video-preview.svelte
new file mode 100644
index 0000000..034cab3
--- /dev/null
+++ b/src/lib/components/ui/file-preview/video-preview.svelte
@@ -0,0 +1,321 @@
+<script lang="ts">
+	import type { Attachment } from '$lib/types';
+	import { cn } from '$lib/utils/utils';
+	import { Modal } from '$lib/components/ui/modal';
+	import { Button } from '$lib/components/ui/button';
+	import DownloadIcon from '~icons/lucide/download';
+	import ExternalLinkIcon from '~icons/lucide/external-link';
+	import XIcon from '~icons/lucide/x';
+	import MaximizeIcon from '~icons/lucide/maximize-2';
+	import Tooltip from '$lib/components/ui/tooltip.svelte';
+	import { formatFileSize, formatTime, openInNewTab } from '$lib/utils/file';
+
+	let { attachment, isUserMessage = false, compact = false } = $props<{
+		attachment: Attachment;
+		isUserMessage?: boolean;
+		compact?: boolean;
+	}>();
+
+	let videoUrl = $derived(attachment.url);
+	let fileName = $derived(attachment.fileName);
+	let fileSize = $derived(attachment.size);
+
+	let isPlaying = $state(false);
+	let currentTime = $state(0);
+	let duration = $state(0);
+	let volume = $state(1);
+	let isMuted = $state(false);
+	let videoElement: HTMLVideoElement | undefined;
+	let modalOpen = $state(false);
+
+
+	const togglePlay = () => {
+		if (videoElement) {
+			if (videoElement.paused) {
+				videoElement.play();
+				isPlaying = true;
+			} else {
+				videoElement.pause();
+				isPlaying = false;
+			}
+		}
+	};
+
+	const toggleMute = () => {
+		if (videoElement) {
+			videoElement.muted = !videoElement.muted;
+			isMuted = videoElement.muted;
+		}
+	};
+
+	const handleTimeUpdate = () => {
+		if (videoElement) {
+			currentTime = videoElement.currentTime;
+			duration = videoElement.duration || 0;
+		}
+	};
+
+	const handleSeek = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		const newTime = parseFloat(target.value);
+		if (videoElement) {
+			videoElement.currentTime = newTime;
+			currentTime = newTime;
+		}
+	};
+
+	const handleVolumeChange = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		const newVolume = parseFloat(target.value);
+		if (videoElement) {
+			videoElement.volume = newVolume;
+			volume = newVolume;
+			isMuted = newVolume === 0;
+		}
+	};
+</script>
+
+<div class="flex flex-col gap-3">
+	{#if compact}
+		<!-- Compact view for inline display -->
+		<div class="flex items-center gap-2">
+			<div class="relative">
+				<video
+					bind:this={videoElement}
+					src={videoUrl}
+					class="w-16 h-16 object-cover rounded bg-muted/20"
+					poster=""
+					onplay={() => (isPlaying = true)}
+					onpause={() => (isPlaying = false)}
+					ontimeupdate={handleTimeUpdate}
+					onloadedmetadata={() => {
+						if (videoElement) duration = videoElement.duration || 0;
+					}}
+					onvolumechange={() => {
+						if (videoElement) {
+							volume = videoElement.volume;
+							isMuted = videoElement.muted;
+						}
+					}}
+				/>
+				<button
+					onclick={togglePlay}
+					class="absolute inset-0 flex items-center justify-center bg-black/50 rounded opacity-0 hover:opacity-100 transition-opacity"
+					aria-label={isPlaying ? 'Pause video' : 'Play video'}
+				>
+					{#if isPlaying}
+						<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+							<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+						</svg>
+					{:else}
+						<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+							<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+						</svg>
+					{/if}
+				</button>
+			</div>
+			<div class="flex-1 min-w-0">
+				<div class="text-sm font-medium text-foreground truncate">{fileName}</div>
+				<div class="text-xs text-muted-foreground">
+					Video • {formatFileSize(fileSize)}
+				</div>
+			</div>
+			<button
+				onclick={() => (modalOpen = true)}
+				class="flex-shrink-0 p-1 rounded hover:bg-accent transition-colors"
+				aria-label="Open video in large modal"
+			>
+				<MaximizeIcon class="w-4 h-4" />
+			</button>
+		</div>
+	{:else}
+		<!-- Full view for dedicated video display -->
+		<div class="relative overflow-hidden rounded-lg bg-muted/20">
+			<video
+				bind:this={videoElement}
+				src={videoUrl}
+				class="w-full h-auto max-h-[400px] object-contain"
+				controls={false}
+				onplay={() => (isPlaying = true)}
+				onpause={() => (isPlaying = false)}
+				ontimeupdate={handleTimeUpdate}
+				onloadedmetadata={() => {
+					if (videoElement) duration = videoElement.duration || 0;
+				}}
+				onvolumechange={() => {
+					if (videoElement) {
+						volume = videoElement.volume;
+						isMuted = videoElement.muted;
+					}
+				}}
+			/>
+			
+			<!-- Custom video controls overlay -->
+			<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+				<!-- Progress bar -->
+				<div class="mb-3">
+					<input
+						type="range"
+						min="0"
+						max={duration || 100}
+						value={currentTime}
+						oninput={handleSeek}
+						class="w-full h-1 bg-white/30 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer"
+						aria-label="Video progress"
+					/>
+					<div class="flex justify-between text-xs text-white/80 mt-1">
+						<span>{formatTime(currentTime)}</span>
+						<span>{formatTime(duration)}</span>
+					</div>
+				</div>
+				
+				<!-- Control buttons -->
+				<div class="flex items-center justify-between">
+					<div class="flex items-center gap-3">
+						<button
+							onclick={togglePlay}
+							class="w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors"
+							aria-label={isPlaying ? 'Pause video' : 'Play video'}
+						>
+							{#if isPlaying}
+								<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+									<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+								</svg>
+							{:else}
+								<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+									<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+								</svg>
+							{/if}
+						</button>
+						
+						<button
+							onclick={toggleMute}
+							class="w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors"
+							aria-label={isMuted ? 'Unmute video' : 'Mute video'}
+						>
+							{#if isMuted}
+								<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+									<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+								</svg>
+							{:else}
+								<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+									<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+								</svg>
+							{/if}
+						</button>
+						
+						<input
+							type="range"
+							min="0"
+							max="1"
+							step="0.1"
+							value={volume}
+							oninput={handleVolumeChange}
+							class="w-16 h-1 bg-white/30 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-2 [&::-webkit-slider-thumb]:h-2 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer"
+							aria-label="Volume control"
+						/>
+					</div>
+					
+					<a
+						href={videoUrl}
+						download={fileName}
+						class="w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors"
+						aria-label={`Download ${fileName}`}
+					>
+						<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+						</svg>
+					</a>
+				</div>
+			</div>
+		</div>
+		
+		<!-- Video info -->
+		<div class="flex items-center justify-between">
+			<div class="text-sm text-muted-foreground">
+				{fileName} • {formatFileSize(fileSize)}
+			</div>
+			<button
+				onclick={() => (modalOpen = true)}
+				class="flex-shrink-0 p-2 rounded hover:bg-accent transition-colors"
+				aria-label="Open video in large modal"
+			>
+				<MaximizeIcon class="w-4 h-4" />
+			</button>
+		</div>
+	{/if}
+
+	<!-- Modal for full-screen video viewing -->
+	<Modal bind:open={modalOpen} class="modal-large">
+		<div class="flex items-center justify-between p-2">
+			<h2 class="text-lg font-semibold truncate">{fileName}</h2>
+			<div class="flex items-center gap-2 flex-shrink-0">
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button
+							size="iconSm"
+							variant="outline"
+							download={fileName}
+							href={videoUrl}
+							{...tooltip.trigger}
+						>
+							<DownloadIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Download video
+				</Tooltip>
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button size="iconSm" variant="outline" onclick={() => openInNewTab(videoUrl)} {...tooltip.trigger}>
+							<ExternalLinkIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Open in new tab
+				</Tooltip>
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<Button
+							size="iconSm"
+							variant="outline"
+							onclick={() => (modalOpen = false)}
+							{...tooltip.trigger}
+						>
+							<XIcon class="size-4" />
+						</Button>
+					{/snippet}
+					Close
+				</Tooltip>
+			</div>
+		</div>
+
+		<div class="flex items-center justify-center p-4 bg-black rounded-lg min-h-[500px]">
+			<video
+				bind:this={videoElement}
+				src={videoUrl}
+				class="max-h-[80vh] max-w-full rounded-lg"
+				controls={true}
+				autoplay={false}
+				onplay={() => (isPlaying = true)}
+				onpause={() => (isPlaying = false)}
+				ontimeupdate={() => {
+					if (videoElement) {
+						currentTime = videoElement.currentTime;
+						duration = videoElement.duration || 0;
+					}
+				}}
+				onloadedmetadata={() => {
+					if (videoElement) {
+						duration = videoElement.duration || 0;
+						videoElement.volume = volume;
+					}
+				}}
+				onvolumechange={() => {
+					if (videoElement) {
+						volume = videoElement.volume;
+						isMuted = videoElement.muted;
+					}
+				}}
+			/>
+		</div>
+	</Modal>
+</div>
\ No newline at end of file
diff --git a/src/lib/utils/file.ts b/src/lib/utils/file.ts
new file mode 100644
index 0000000..77e2e05
--- /dev/null
+++ b/src/lib/utils/file.ts
@@ -0,0 +1,36 @@
+/**
+ * Utility functions for file operations and formatting
+ */
+
+/**
+ * Format file size in bytes to human readable string
+ */
+export function formatFileSize(bytes: number): string {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+
+/**
+ * Format time in seconds to MM:SS format
+ */
+export function formatTime(seconds: number): string {
+	const mins = Math.floor(seconds / 60);
+	const secs = Math.floor(seconds % 60);
+	return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Open URL in new tab
+ */
+export function openInNewTab(url: string): void {
+	window.open(url, '_blank');
+}
+
+/**
+ * Get file extension from filename
+ */
+export function getFileExtension(fileName: string): string {
+	return fileName.split('.').pop()?.toLowerCase() || '';
+}
\ No newline at end of file
diff --git a/src/routes/chat/[id]/message.svelte b/src/routes/chat/[id]/message.svelte
index e934b21..d1b6c80 100644
--- a/src/routes/chat/[id]/message.svelte
+++ b/src/routes/chat/[id]/message.svelte
@@ -5,7 +5,7 @@
 	import { CopyButton } from '$lib/components/ui/copy-button';
 	import '../../../markdown.css';
 	import MarkdownRenderer from './markdown-renderer.svelte';
-	import { ImageModal } from '$lib/components/ui/image-modal';
+	import FilePreview from '$lib/components/ui/file-preview/file-preview.svelte';
 	import { sanitizeHtml } from '$lib/utils/markdown-it';
 	import { on } from 'svelte/events';
 	import { isHtmlElement } from '$lib/utils/is';
@@ -46,20 +46,7 @@
 
 	let { message }: Props = $props();
 
-	let imageModal = $state<{ open: boolean; imageUrl: string; fileName: string }>({
-		open: false,
-		imageUrl: '',
-		fileName: '',
-	});
-
-	function openImageModal(imageUrl: string, fileName: string) {
-		imageModal = {
-			open: true,
-			imageUrl,
-			fileName,
-		};
-	}
-
+	
 	async function createBranchedConversation() {
 		const res = await ResultAsync.fromPromise(
 			client.mutation(api.conversations.createBranched, {
@@ -132,20 +119,32 @@
 			});
 		}}
 	>
-		{#if message.images && message.images.length > 0}
+		{#if message.attachments && message.attachments.length > 0}
+			<div class="mb-2 flex flex-wrap gap-2">
+				{#each message.attachments as attachment (attachment.storage_id)}
+					<FilePreview
+						{attachment}
+						isUserMessage={message.role === 'user'}
+						compact={true}
+					/>
+				{/each}
+			</div>
+		{:else if message.images && message.images.length > 0}
+			<!-- Legacy image support -->
 			<div class="mb-2 flex flex-wrap gap-2">
 				{#each message.images as image (image.storage_id)}
-					<button
-						type="button"
-						onclick={() => openImageModal(image.url, image.fileName || 'image')}
-						class="rounded-lg"
-					>
-						<img
-							src={image.url}
-							alt={image.fileName || 'Uploaded'}
-							class="max-w-xs rounded-lg transition-opacity hover:opacity-80"
-						/>
-					</button>
+					<FilePreview
+						attachment={{
+							type: 'image',
+							url: image.url,
+							fileName: image.fileName || 'image',
+							mimeType: image.mimeType || 'image/jpeg',
+							size: image.size || 0,
+							storage_id: image.storage_id
+						}}
+						isUserMessage={message.role === 'user'}
+						compact={true}
+					/>
 				{/each}
 			</div>
 		{/if}
@@ -309,14 +308,7 @@
 		</div>
 	</div>
 
-	{#if message.images && message.images.length > 0}
-		<ImageModal
-			bind:open={imageModal.open}
-			imageUrl={imageModal.imageUrl}
-			fileName={imageModal.fileName}
-		/>
 	{/if}
-{/if}
 
 {#snippet siteIcon({ url }: { url: URL })}
 	<Avatar src={`https://www.google.com/s2/favicons?domain=${url.hostname}&sz=16`}>