update dropzone

huggingface · Jul 18, 2024 · 0041884 · 0041884
1 parent 46440ba
commit 0041884
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 67 deletions.
diff --git a/src/lib/components/chat/ChatWindow.svelte b/src/lib/components/chat/ChatWindow.svelte
@@ -82,9 +82,6 @@
 			onDrag = false;
 		}
 	};
-	const onDragOver = (e: DragEvent) => {
-		e.preventDefault();
-	};
 
 	const onPaste = (e: ClipboardEvent) => {
 		if (!e.clipboardData) {
@@ -167,6 +164,13 @@
 	$: isFileUploadEnabled = activeMimeTypes.length > 0;
 </script>
 
+<svelte:window
+	on:dragenter={onDragEnter}
+	on:dragleave={onDragLeave}
+	on:dragover|preventDefault
+	on:drop|preventDefault={() => (onDrag = false)}
+/>
+
 <div class="relative min-h-0 min-w-0">
 	{#if loginModalOpen}
 		<LoginModal
@@ -332,9 +336,6 @@
 				{/if}
 			</div>
 			<form
-				on:dragover={onDragOver}
-				on:dragenter={onDragEnter}
-				on:dragleave={onDragLeave}
 				tabindex="-1"
 				aria-label={isFileUploadEnabled ? "file dropzone" : undefined}
 				on:submit|preventDefault={handleSubmit}

diff --git a/src/lib/components/chat/FileDropzone.svelte b/src/lib/components/chat/FileDropzone.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import { onDestroy } from "svelte";
 	import CarbonImage from "~icons/carbon/image";
 	// import EosIconsLoading from "~icons/eos-icons/loading";
 
 	export let files: File[];
 	export let mimeTypes: string[] = [];
 
-	let file_error_message = "";
-	let errorTimeout: ReturnType<typeof setTimeout>;
-
 	export let onDrag = false;
+	export let onDragInner = false;
 
 	async function dropHandle(event: DragEvent) {
 		event.preventDefault();
@@ -51,69 +48,22 @@
 	}
 
 	function setErrorMsg(errorMsg: string) {
-		if (errorTimeout) {
-			clearTimeout(errorTimeout);
-		}
-		file_error_message = errorMsg;
-		errorTimeout = setTimeout(() => {
-			file_error_message = "";
-			onDrag = false;
-		}, 2000);
+		onDrag = false;
+		alert(errorMsg);
 	}
-
-	onDestroy(() => {
-		if (errorTimeout) {
-			clearTimeout(errorTimeout);
-		}
-	});
 </script>
 
 <div
 	id="dropzone"
 	role="form"
 	on:drop={dropHandle}
-	class="relative flex w-full max-w-4xl flex-col items-center rounded-xl border border-dashed bg-gray-100 focus-within:border-gray-300 dark:border-gray-500 dark:bg-gray-700 dark:focus-within:border-gray-500"
+	on:dragenter={() => (onDragInner = true)}
+	on:dragleave={() => (onDragInner = false)}
+	on:dragover|preventDefault
+	class="relative flex h-28 w-full max-w-4xl flex-col items-center justify-center gap-1 rounded-xl border-4 border-dotted *:pointer-events-none {onDragInner
+		? 'border-blue-200 !bg-blue-500/10 text-blue-600 dark:border-blue-600 dark:bg-blue-500/20 dark:text-blue-500'
+		: 'bg-gray-100 text-gray-500 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-400'}"
 >
-	<div class="object-center">
-		{#if file_error_message}
-			<div
-				class="absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center gap-2 rounded-xl bg-gray-100 bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50"
-			>
-				<p class="text-red-500 dark:text-red-400">{file_error_message}</p>
-				<div class="h-2.5 w-1/2 rounded-full bg-gray-200 dark:bg-gray-700">
-					<div
-						class="animate-progress-bar h-2.5
-						rounded-full bg-red-500
-						dark:text-red-400
-					"
-					/>
-				</div>
-			</div>
-		{/if}
-		<div class="mt-3 flex justify-center" class:opacity-0={file_error_message}>
-			<CarbonImage class="text-xl text-gray-500 dark:text-gray-400" />
-		</div>
-		<p
-			class="mb-3 mt-1.5 text-sm text-gray-500 dark:text-gray-400"
-			class:opacity-0={file_error_message}
-		>
-			Drag and drop <span class="font-semibold">one file</span> here
-		</p>
-	</div>
+	<CarbonImage class="text-xl" />
+	<p>Drop File to add to chat</p>
 </div>
-
-<style>
-	@keyframes slideInFromLeft {
-		0% {
-			width: 0;
-		}
-		100% {
-			width: 100%;
-		}
-	}
-
-	.animate-progress-bar {
-		/* This section calls the slideInFromLeft animation we defined above */
-		animation: 2s linear 0s 1 slideInFromLeft;
-	}
-</style>