From a47ebd468eb3c0653301dc59b2f5710ece650cdb Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 16 Nov 2024 21:50:31 -0800
Subject: [PATCH] refac: dropzone

---
 src/lib/components/chat/MessageInput.svelte | 33 ++++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index fd35c7035..89d7c0c09 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -236,8 +236,14 @@
 		dragged = false;
 	};
 
+	let dropzoneElement;
+
 	onMount(async () => {
-		await tools.set(await getTools(localStorage.token));
+		console.log('hi');
+
+		if (!$tools) {
+			await tools.set(await getTools(localStorage.token));
+		}
 
 		loaded = true;
 
@@ -248,24 +254,29 @@
 
 		window.addEventListener('keydown', handleKeyDown);
 
-		const dropZone = document.getElementById('chat-container');
-
-		dropZone?.addEventListener('dragover', onDragOver);
-		dropZone?.addEventListener('drop', onDrop);
-		dropZone?.addEventListener('dragleave', onDragLeave);
+		if (dropzoneElement) {
+			dropzoneElement?.addEventListener('dragover', onDragOver);
+			dropzoneElement?.addEventListener('drop', onDrop);
+			dropzoneElement?.addEventListener('dragleave', onDragLeave);
+		}
 	});
 
 	onDestroy(() => {
+		console.log('destroy');
 		window.removeEventListener('keydown', handleKeyDown);
 
-		const dropZone = document.getElementById('chat-container');
-
-		dropZone?.removeEventListener('dragover', onDragOver);
-		dropZone?.removeEventListener('drop', onDrop);
-		dropZone?.removeEventListener('dragleave', onDragLeave);
+		if (dropzoneElement) {
+			dropzoneElement?.removeEventListener('dragover', onDragOver);
+			dropzoneElement?.removeEventListener('drop', onDrop);
+			dropzoneElement?.removeEventListener('dragleave', onDragLeave);
+		}
 	});
 </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}