From ecf21de28fe93ef4c318609d7208acbc3c543197 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 17 Nov 2024 22:06:58 -0800
Subject: [PATCH] fix: file drop

---
 src/lib/components/chat/MessageInput.svelte | 22 +++++++++------------
 src/lib/components/chat/Placeholder.svelte  |  4 ++--
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 89d7c0c09..84bdd6b20 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -236,11 +236,7 @@
 		dragged = false;
 	};
 
-	let dropzoneElement;
-
 	onMount(async () => {
-		console.log('hi');
-
 		if (!$tools) {
 			await tools.set(await getTools(localStorage.token));
 		}
@@ -254,17 +250,21 @@
 
 		window.addEventListener('keydown', handleKeyDown);
 
-		if (dropzoneElement) {
-			dropzoneElement?.addEventListener('dragover', onDragOver);
-			dropzoneElement?.addEventListener('drop', onDrop);
-			dropzoneElement?.addEventListener('dragleave', onDragLeave);
-		}
+		await tick();
+
+		const dropzoneElement = document.getElementById('chat-container');
+
+		dropzoneElement?.addEventListener('dragover', onDragOver);
+		dropzoneElement?.addEventListener('drop', onDrop);
+		dropzoneElement?.addEventListener('dragleave', onDragLeave);
 	});
 
 	onDestroy(() => {
 		console.log('destroy');
 		window.removeEventListener('keydown', handleKeyDown);
 
+		const dropzoneElement = document.getElementById('chat-container');
+
 		if (dropzoneElement) {
 			dropzoneElement?.removeEventListener('dragover', onDragOver);
 			dropzoneElement?.removeEventListener('drop', onDrop);
@@ -273,10 +273,6 @@
 	});
 </script>
 
-<div
-	class="absolute top-0 bottom-0 left-0 right-0 w-full h-full touch-none pointer-events-none"
-	bind:this={dropzoneElement}
-></div>
 <FilesOverlay show={dragged} />
 
 {#if loaded}
diff --git a/src/lib/components/chat/Placeholder.svelte b/src/lib/components/chat/Placeholder.svelte
index bfe58c532..5b7bb52ae 100644
--- a/src/lib/components/chat/Placeholder.svelte
+++ b/src/lib/components/chat/Placeholder.svelte
@@ -89,7 +89,7 @@
 	});
 </script>
 
-{#key mounted}
+{#if mounted}
 	<div class="m-auto w-full max-w-6xl px-2 xl:px-20 translate-y-6 py-24 text-center">
 		{#if $temporaryChatEnabled}
 			<Tooltip
@@ -227,4 +227,4 @@
 			</div>
 		</div>
 	</div>
-{/key}
+{/if}