From d492d2915304c4eda10e2fe825a606e80b213448 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 17 Jul 2024 12:02:54 +0200
Subject: [PATCH] fix: files overlay

---
 src/lib/components/chat/MessageInput.svelte   | 20 ++---------
 .../chat/MessageInput/FilesOverlay.svelte     | 35 +++++++++++++++++++
 2 files changed, 37 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/components/chat/MessageInput/FilesOverlay.svelte

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 228295b51..cc9c50938 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -41,6 +41,7 @@
 	import VoiceRecording from './MessageInput/VoiceRecording.svelte';
 	import { transcribeAudio } from '$lib/apis/audio';
 	import FileItem from '../common/FileItem.svelte';
+	import FilesOverlay from './MessageInput/FilesOverlay.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -298,24 +299,7 @@
 	});
 </script>
 
-{#if dragged}
-	<div
-		class="fixed {$showSidebar
-			? 'left-0 md:left-[260px] md:w-[calc(100%-260px)]'
-			: 'left-0'}  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 w-full h-full backdrop-blur bg-gray-800/40 flex justify-center">
-			<div class="m-auto pt-64 flex flex-col justify-center">
-				<div class="max-w-md">
-					<AddFilesPlaceholder />
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}
+<FilesOverlay show={dragged} />
 
 <div class="w-full font-primary">
 	<div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
diff --git a/src/lib/components/chat/MessageInput/FilesOverlay.svelte b/src/lib/components/chat/MessageInput/FilesOverlay.svelte
new file mode 100644
index 000000000..a8acc6a3e
--- /dev/null
+++ b/src/lib/components/chat/MessageInput/FilesOverlay.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { showSidebar } from '$lib/stores';
+	import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
+
+	export let show = false;
+	let overlayElement = null;
+
+	$: if (show && overlayElement) {
+		document.body.appendChild(overlayElement);
+		document.body.style.overflow = 'hidden';
+	} else if (overlayElement) {
+		document.body.removeChild(overlayElement);
+		document.body.style.overflow = 'unset';
+	}
+</script>
+
+{#if show}
+	<div
+		bind:this={overlayElement}
+		class="fixed {$showSidebar
+			? 'left-0 md:left-[260px] md:w-[calc(100%-260px)]'
+			: 'left-0'}  fixed top-0 right-0 bottom-0 w-full h-full flex z-[9999] touch-none pointer-events-none"
+		id="dropzone"
+		role="region"
+		aria-label="Drag and Drop Container"
+	>
+		<div class="absolute w-full h-full backdrop-blur bg-gray-800/40 flex justify-center">
+			<div class="m-auto pt-64 flex flex-col justify-center">
+				<div class="max-w-md">
+					<AddFilesPlaceholder />
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}