ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-15 13:55:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: file item modal

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-08-28 02:59:45 +04:00
parent 52030a241c
commit 40617b9e0e
2 changed files with 39 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/common/FileItem.svelte
View file

@ -51,7 +51,7 @@
: 'rounded-2xl'} text-left" : 'rounded-2xl'} text-left"
type="button" type="button"
on:click={async () => { on:click={async () => {
if (item?.file?.data?.content || modal) { if (item?.file?.data?.content || item?.type === 'file' || modal) {
showModal = !showModal; showModal = !showModal;
} else { } else {
if (url) { if (url) {

44
src/lib/components/common/FileItemModal.svelte
View file

@ -25,6 +25,8 @@
let isAudio = false; let isAudio = false;
let loading = false; let loading = false;
let selectedTab = '';
$: isPDF = $: isPDF =
item?.meta?.content_type === 'application/pdf' || item?.meta?.content_type === 'application/pdf' ||
(item?.name && item?.name.toLowerCase().endsWith('.pdf')); (item?.name && item?.name.toLowerCase().endsWith('.pdf'));
@ -115,7 +117,7 @@
<div> <div>
<div class="flex flex-col items-center md:flex-row gap-1 justify-between w-full"> <div class="flex flex-col items-center md:flex-row gap-1 justify-between w-full">
<div class=" flex flex-wrap text-sm gap-1 text-gray-500"> <div class=" flex flex-wrap text-xs gap-1 text-gray-500">
{#if item?.type === 'collection'} {#if item?.type === 'collection'}
{#if item?.type} {#if item?.type}
<div class="capitalize shrink-0">{item.type}</div> <div class="capitalize shrink-0">{item.type}</div>
@ -202,11 +204,41 @@
{/each} {/each}
</div> </div>
{:else if isPDF} {:else if isPDF}
<iframe <div
title={item?.name} class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-100 dark:border-gray-800 text-center text-sm font-medium bg-transparent dark:text-gray-200"
src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`} >
class="w-full h-[70vh] border-0 rounded-lg mt-4" <button
/> class="min-w-fit py-1.5 px-4 border-b {selectedTab === ''
? ' '
: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
type="button"
on:click={() => {
selectedTab = '';
}}>{$i18n.t('Content')}</button
>
<button
class="min-w-fit py-1.5 px-4 border-b {selectedTab === 'preview'
? ' '
: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
type="button"
on:click={() => {
selectedTab = 'preview';
}}>{$i18n.t('Preview')}</button
>
</div>
{#if selectedTab === 'preview'}
<iframe
title={item?.name}
src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
class="w-full h-[70vh] border-0 rounded-lg"
/>
{:else}
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
{item?.file?.data?.content ?? 'No content'}
</div>
{/if}
{:else} {:else}
{#if isAudio} {#if isAudio}
<audio <audio