UX: Dropzone (#1350)

* nav: more compact

* drop window trigger

* fix z-index

* border width

---------

Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>

Author: gary149

src/lib/components/NavConversationItem.svelte

@@ -25,7 +25,7 @@
 		confirmDelete = false;
 	}}
 	href="{base}/conversation/{conv.id}"
-	class="group flex h-10 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {conv.id ===
+	class="group flex h-10 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 sm:h-[2.35rem] dark:text-gray-300 dark:hover:bg-gray-700 {conv.id ===
 	$page.params.id
 		? 'bg-gray-100 dark:bg-gray-700'
 		: ''}"

src/lib/components/NavMenu.svelte

@@ -57,13 +57,13 @@
 	<a
 		href={`${base}/`}
 		on:click={handleNewChatClick}
-		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700"
+		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none sm:text-smd dark:border-gray-600 dark:bg-gray-700"
 	>
 		New Chat
 	</a>
 </div>
 <div
-	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 max-sm:bg-gradient-to-t md:bg-gradient-to-l dark:from-gray-800/30"
+	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 text-[.9rem] max-sm:bg-gradient-to-t md:bg-gradient-to-l dark:from-gray-800/30"
 >
 	{#each Object.entries(groupedConversations) as [group, convs]}
 		{#if convs.length}

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}

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-2 border-dotted {onDragInner
+		? 'border-blue-200 !bg-blue-500/10 text-blue-600 *:pointer-events-none 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>

src/routes/assistant/[assistantId]/+page.svelte

@@ -40,14 +40,14 @@
 </svelte:head>
 
 <div
-	class="fixed inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
+	class="fixed inset-0 z-20 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
 >
 	<dialog
 		open
 		use:clickOutside={() => {
 			goto(previousPage);
 		}}
-		class="z-10 flex flex-col content-center items-center gap-x-10 gap-y-3 overflow-hidden rounded-2xl bg-white p-4 pt-6 text-center shadow-2xl outline-none max-sm:w-[85dvw] max-sm:px-6 md:w-96 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
+		class="flex flex-col content-center items-center gap-x-10 gap-y-3 overflow-hidden rounded-2xl bg-white p-4 pt-6 text-center shadow-2xl outline-none max-sm:w-[85dvw] max-sm:px-6 md:w-96 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
 	>
 		<div class="absolute right-0 top-0 m-6">
 			<form