UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-03-25 06:58:04 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-02 07:44:07 -07:00
parent 6974cb248c
commit 1a26e67611
3 changed files with 53 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/AddFilesPlaceholder.svelte
View File

@ -1,10 +1,18 @@
<script> <script>
import { getContext } from 'svelte'; import { getContext } from 'svelte';
export let title = '';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
</script> </script>
<div class=" text-center text-6xl mb-3">📄</div> <div class=" text-center text-6xl mb-3">📄</div>
<div class="text-center dark:text-white text-2xl font-semibold z-50">{$i18n.t('Add Files')}</div> <div class="text-center dark:text-white text-2xl font-semibold z-50">
{#if title}
{title}
{:else}
{$i18n.t('Add Files')}
{/if}
</div>
<slot <slot
><div class=" mt-2 text-center text-sm dark:text-gray-200 w-full"> ><div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">

0
src/lib/components/workspace/Knowledge/Files.svelte Normal file
View File

51
src/lib/components/workspace/Knowledge/Item.svelte
View File

@ -5,21 +5,25 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { mobile, showSidebar } from '$lib/stores';
import { getKnowledgeById } from '$lib/apis/knowledge'; import { getKnowledgeById } from '$lib/apis/knowledge';
import Spinner from '$lib/components/common/Spinner.svelte'; import Spinner from '$lib/components/common/Spinner.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import EllipsisVertical from '$lib/components/icons/EllipsisVertical.svelte'; import EllipsisVertical from '$lib/components/icons/EllipsisVertical.svelte';
import { mobile } from '$lib/stores';
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
import BookOpen from '$lib/components/icons/BookOpen.svelte'; import BookOpen from '$lib/components/icons/BookOpen.svelte';
import Badge from '$lib/components/common/Badge.svelte'; import Badge from '$lib/components/common/Badge.svelte';
import Files from './Files.svelte';
import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
let id = null; let id = null;
let knowledge = null; let knowledge = null;
let query = ''; let query = '';
let selectedFileId = null; let selectedFileId = null;
let dragged = false;
onMount(async () => { onMount(async () => {
id = $page.params.id; id = $page.params.id;
@ -36,6 +40,29 @@
}); });
</script> </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 class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
Drop any files here to add to my documents
</div>
</AddFilesPlaceholder>
</div>
</div>
</div>
</div>
{/if}
<div class="flex flex-col w-full max-h-[100dvh] h-full"> <div class="flex flex-col w-full max-h-[100dvh] h-full">
<button <button
class="flex space-x-1" class="flex space-x-1"
@ -94,7 +121,7 @@
<div <div
class=" {!$mobile class=" {!$mobile
? 'flex-shrink-0' ? 'flex-shrink-0'
: 'flex-1'} p-2.5 w-80 rounded-2xl border dark:border-gray-850" : 'flex-1'} p-2.5 w-80 rounded-2xl border border-gray-50 dark:border-gray-850"
> >
<div class=" flex flex-col w-full space-x-2 rounded-lg h-full"> <div class=" flex flex-col w-full space-x-2 rounded-lg h-full">
<div class="flex px-1"> <div class="flex px-1">
@ -119,7 +146,7 @@
/> />
<div> <div>
<Tooltip content={$i18n.t('Add File')}> <Tooltip content={$i18n.t('Add Content')}>
<button <button
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1" class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
on:click={() => { on:click={() => {
@ -140,10 +167,14 @@
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
<hr class="my-2 border-gray-200 dark:border-gray-850" /> <hr class="my-2 border-gray-50 dark:border-gray-850" />
<div> <div class="w-full h-full flex">
{knowledge?.data?.file_ids ?? []} {#if (knowledge?.data?.file_ids ?? []).length > 0}
<Files fileIds={knowledge.data.file_ids} />
{:else}
<div class="m-auto text-gray-500 text-xs">No content found</div>
{/if}
</div> </div>
</div> </div>
</div> </div>
@ -153,7 +184,13 @@
{#if selectedFileId} {#if selectedFileId}
<textarea /> <textarea />
{:else} {:else}
<div class="m-auto">Select a file to view or drag and drop a file to upload</div> <div class="m-auto">
<AddFilesPlaceholder title={$i18n.t('Select/Add Files')}>
<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
Select a file to view or drag and drop a file to upload
</div>
</AddFilesPlaceholder>
</div>
{/if} {/if}
</div> </div>
{/if} {/if}