1<script lang="ts">
 2	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 3	import { FileX } from '@lucide/svelte';
 4
 5	interface Props {
 6		open: boolean;
 7		emptyFiles: string[];
 8		onOpenChange?: (open: boolean) => void;
 9	}
10
11	let { open = $bindable(), emptyFiles, onOpenChange }: Props = $props();
12
13	function handleOpenChange(newOpen: boolean) {
14		open = newOpen;
15		onOpenChange?.(newOpen);
16	}
17</script>
18
19<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
20	<AlertDialog.Content>
21		<AlertDialog.Header>
22			<AlertDialog.Title class="flex items-center gap-2">
23				<FileX class="h-5 w-5 text-destructive" />
24
25				Empty Files Detected
26			</AlertDialog.Title>
27
28			<AlertDialog.Description>
29				The following files are empty and have been removed from your attachments:
30			</AlertDialog.Description>
31		</AlertDialog.Header>
32
33		<div class="space-y-3 text-sm">
34			<div class="rounded-lg bg-muted p-3">
35				<div class="mb-2 font-medium">Empty Files:</div>
36
37				<ul class="list-inside list-disc space-y-1 text-muted-foreground">
38					{#each emptyFiles as fileName (fileName)}
39						<li class="font-mono text-sm">{fileName}</li>
40					{/each}
41				</ul>
42			</div>
43
44			<div>
45				<div class="mb-2 font-medium">What happened:</div>
46
47				<ul class="list-inside list-disc space-y-1 text-muted-foreground">
48					<li>Empty files cannot be processed or sent to the AI model</li>
49
50					<li>These files have been automatically removed from your attachments</li>
51
52					<li>You can try uploading files with content instead</li>
53				</ul>
54			</div>
55		</div>
56
57		<AlertDialog.Footer>
58			<AlertDialog.Action onclick={() => handleOpenChange(false)}>Got it</AlertDialog.Action>
59		</AlertDialog.Footer>
60	</AlertDialog.Content>
61</AlertDialog.Root>