From 3bcf440503c2fca8ac8e3aea5c9a07d447ebb445 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 19 Dec 2023 14:50:43 -0800
Subject: [PATCH 1/3] feat: file drag and drop support

---
 src/lib/components/chat/MessageInput.svelte | 64 +++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 172485ca..d83a5fcd 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -2,6 +2,7 @@
 	import { settings } from '$lib/stores';
 	import toast from 'svelte-french-toast';
 	import Suggestions from './MessageInput/Suggestions.svelte';
+	import { onMount } from 'svelte';
 
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
@@ -11,6 +12,7 @@
 
 	let filesInputElement;
 	let inputFiles;
+	let dragged = false;
 
 	export let files = [];
 
@@ -82,8 +84,70 @@
 			}
 		}
 	};
+
+	onMount(() => {
+		const dropZone = document.querySelector('body');
+
+		dropZone?.addEventListener('dragover', (e) => {
+			e.preventDefault();
+			dragged = true;
+		});
+
+		dropZone.addEventListener('drop', (e) => {
+			e.preventDefault();
+			console.log(e);
+
+			if (e.dataTransfer?.files) {
+				let reader = new FileReader();
+
+				reader.onload = (event) => {
+					files = [
+						...files,
+						{
+							type: 'image',
+							url: `${event.target.result}`
+						}
+					];
+				};
+
+				if (
+					e.dataTransfer?.files &&
+					e.dataTransfer?.files.length > 0 &&
+					['image/gif', 'image/jpeg', 'image/png'].includes(e.dataTransfer?.files[0]['type'])
+				) {
+					reader.readAsDataURL(e.dataTransfer?.files[0]);
+				} else {
+					toast.error(`Unsupported File Type '${e.dataTransfer?.files[0]['type']}'.`);
+				}
+			}
+
+			dragged = false;
+		});
+	});
 </script>
 
+{#if dragged}
+	<div
+		class="absolute w-full h-full flex z-50 touch-none pointer-events-none"
+		id="dropzone"
+		role="region"
+		aria-label="Drag and Drop Container"
+	>
+		<div class="absolute rounded-xl w-full h-full backdrop-blur bg-gray-800/40 flex justify-center">
+			<div class="m-auto pt-48 flex flex-col justify-center">
+				<div class="max-w-md">
+					<div class="  text-center text-6xl mb-3">🏞️</div>
+					<div class="text-center dark:text-white text-2xl font-semibold z-50">Add Images</div>
+
+					<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
+						Drop any images here to add to the conversation
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <div class="fixed bottom-0 w-full">
 	<div class="px-2.5 pt-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
 		{#if messages.length == 0 && suggestionPrompts.length !== 0}

From 344c91e37a43c46790e1338b134561f3e79ab570 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 19 Dec 2023 14:53:14 -0800
Subject: [PATCH 2/3] fix: dragleave event added

---
 src/lib/components/chat/MessageInput.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index d83a5fcd..54291f22 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -123,6 +123,10 @@
 
 			dragged = false;
 		});
+
+		dropZone?.addEventListener('dragleave', () => {
+			dragged = false;
+		});
 	});
 </script>
 

From 110498cad68ebcd3ea8eadc30ddbd1610481cec8 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 19 Dec 2023 14:59:19 -0800
Subject: [PATCH 3/3] fix: disable message image drag

---
 src/lib/components/chat/Messages.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index c6d53424..9a39089d 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -469,7 +469,12 @@
 											{#each message.files as file}
 												<div>
 													{#if file.type === 'image'}
-														<img src={file.url} alt="input" class=" max-h-96 rounded-lg" />
+														<img
+															src={file.url}
+															alt="input"
+															class=" max-h-96 rounded-lg"
+															draggable="false"
+														/>
 													{/if}
 												</div>
 											{/each}