UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-07 09:09:53 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: files overlay

Browse Source
This commit is contained in:
Timothy J. Baek 2024-07-17 12:02:54 +02:00
parent ed21f9f906
commit d492d29153
2 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/chat/MessageInput.svelte
View File

@ -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">

35
src/lib/components/chat/MessageInput/FilesOverlay.svelte Normal file
View File

@ -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}