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 172485c..d83a5fc 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 d83a5fc..54291f2 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 c6d5342..9a39089 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}