feat: drag and drop document anywhere

src/lib/components/AddFilesPlaceholder.svelte

 <div class="  text-center text-6xl mb-3">📄</div>
 <div class="text-center dark:text-white text-2xl font-semibold z-50">Add Files</div>
 
-<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
+<slot
+	><div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
 		Drop any files here to add to the conversation
-</div>
+	</div>
+</slot>

src/routes/(app)/documents/+page.svelte

@@ -12,6 +12,7 @@
 	import { transformFileName } from '$lib/utils';
 
 	import EditDocModal from '$lib/components/documents/EditDocModal.svelte';
+	import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
 
 	let importFiles = '';
 
@@ -49,6 +50,9 @@
 		}
 	};
 
+	onMount(() => {
+		const dropZone = document.querySelector('body');
+
 		const onDragOver = (e) => {
 			e.preventDefault();
 			dragged = true;
@@ -63,11 +67,26 @@
 			console.log(e);
 
 			if (e.dataTransfer?.files) {
+				let reader = new FileReader();
+
+				reader.onload = (event) => {
+					files = [
+						...files,
+						{
+							type: 'image',
+							url: `${event.target.result}`
+						}
+					];
+				};
+
 				const inputFiles = e.dataTransfer?.files;
 
 				if (inputFiles && inputFiles.length > 0) {
 					const file = inputFiles[0];
-				if (
+					console.log(file, file.name.split('.').at(-1));
+					if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
+						reader.readAsDataURL(file);
+					} else if (
 						SUPPORTED_FILE_TYPE.includes(file['type']) ||
 						SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
 					) {
@@ -85,8 +104,40 @@
 
 			dragged = false;
 		};
+
+		dropZone?.addEventListener('dragover', onDragOver);
+		dropZone?.addEventListener('drop', onDrop);
+		dropZone?.addEventListener('dragleave', onDragLeave);
+
+		return () => {
+			dropZone?.removeEventListener('dragover', onDragOver);
+			dropZone?.removeEventListener('drop', onDrop);
+			dropZone?.removeEventListener('dragleave', onDragLeave);
+		};
+	});
 </script>
 
+{#if dragged}
+	<div
+		class="fixed w-full h-full flex z-50 touch-none pointer-events-none"
+		id="dropzone"
+		role="region"
+		aria-label="Drag and Drop Container"
+	>
+		<div class="absolute rounded-xl w-full h-full backdrop-blur bg-gray-800/40 flex justify-center">
+			<div class="m-auto pt-64 flex flex-col justify-center">
+				<div class="max-w-md">
+					<AddFilesPlaceholder>
+						<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
+							Drop any files here to add to my documents
+						</div>
+					</AddFilesPlaceholder>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
 {#key selectedDoc}
 	<EditDocModal bind:show={showEditDocModal} {selectedDoc} />
 {/key}
@@ -170,7 +221,7 @@
 				}}
 			/>
 
-			<div>
+			<!-- <div>
 				<div
 					class="my-3 py-16 rounded-lg border-2 border-dashed dark:border-gray-600 {dragged &&
 						' dark:bg-gray-700'} "
@@ -187,7 +238,7 @@
 						</div>
 					</div>
 				</div>
-			</div>
+			</div> -->
 
 			{#each $documents.filter((p) => query === '' || p.name.includes(query)) as doc}
 				<hr class=" dark:border-gray-700 my-2.5" />
@@ -330,7 +381,7 @@
 					</div>
 				</div>
 			{/each}
-			{#if $documents.length != 0}
+
 			<hr class=" dark:border-gray-700 my-2.5" />
 
 			<div class=" flex justify-between w-full mb-3">
@@ -419,17 +470,8 @@
 							</svg>
 						</div>
 					</button>
-
-						<!-- <button
-						on:click={() => {
-							loadDefaultPrompts();
-						}}
-					>
-						dd
-					</button> -->
 				</div>
 			</div>
-			{/if}
 
 			<div class="text-xs flex items-center space-x-1">
 				<div>