Enable dropzone on tools (#1211)

* Enable file dropzone on tools

* Change text based on tools or multimodal

* lint

* comment

src/lib/components/chat/ChatWindow.svelte

@@ -301,8 +301,12 @@
 				class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500
 			{isReadOnly ? 'opacity-30' : ''}"
 			>
-				{#if onDrag && currentModel.multimodal}
-					<FileDropzone bind:files bind:onDrag />
+				{#if onDrag && (currentModel.multimodal || currentModel.tools)}
+					<FileDropzone
+						bind:files
+						bind:onDrag
+						onlyImages={currentModel.multimodal && !currentModel.tools}
+					/>
 				{:else}
 					<div class="flex w-full flex-1 border-none bg-transparent">
 						{#if lastIsError}

src/lib/components/chat/FileDropzone.svelte

@@ -4,6 +4,7 @@
 	// import EosIconsLoading from "~icons/eos-icons/loading";
 
 	export let files: File[];
+	export let onlyImages: boolean = false;
 
 	let file_error_message = "";
 	let errorTimeout: ReturnType<typeof setTimeout>;
@@ -23,13 +24,13 @@
 			if (event.dataTransfer.items[0].kind === "file") {
 				const file = event.dataTransfer.items[0].getAsFile();
 				if (file) {
-					if (!event.dataTransfer.items[0].type.startsWith("image")) {
+					if (!event.dataTransfer.items[0].type.startsWith("image") && onlyImages) {
 						setErrorMsg("Only images are supported");
 						files = [];
 						return;
 					}
-					// if image is bigger than 2MB abort
-					if (file.size > 2 * 1024 * 1024) {
+					// if file is bigger than 10MB abort
+					if (file.size > 10 * 1024 * 1024) {
 						setErrorMsg("Image is too big. (2MB max)");
 						files = [];
 						return;
@@ -88,7 +89,7 @@
 			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 image</span> here
+			Drag and drop <span class="font-semibold">one {onlyImages ? "image" : "file"}</span> here
 		</p>
 	</div>
 </div>