Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac: file item modal

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2025-12-21 14:24:53 +04:00
parent 0eeda79048
commit 360289db21
2 changed files with 45 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/common/FileItem.svelte
+2 -2
View File
@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher, getContext } from 'svelte'; import { createEventDispatcher, getContext } from 'svelte';
import { formatFileSize } from '$lib/utils'; import { formatFileSize } from '$lib/utils';
import { settings } from '$lib/stores';
import FileItemModal from './FileItemModal.svelte'; import FileItemModal from './FileItemModal.svelte';
import GarbageBin from '../icons/GarbageBin.svelte'; import GarbageBin from '../icons/GarbageBin.svelte';
import Spinner from './Spinner.svelte'; import Spinner from './Spinner.svelte';
import Tooltip from './Tooltip.svelte'; import Tooltip from './Tooltip.svelte';
import XMark from '$lib/components/icons/XMark.svelte'; import XMark from '$lib/components/icons/XMark.svelte';
import { settings } from '$lib/stores';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -55,7 +55,7 @@
: 'rounded-2xl'} text-left" : 'rounded-2xl'} text-left"
type="button" type="button"
on:click={async () => { on:click={async () => {
if (item?.file?.data?.content || item?.type === 'file' || modal) { if (item?.file?.data?.content || item?.type === 'file' || item?.content || modal) {
showModal = !showModal; showModal = !showModal;
} else { } else {
if (url) { if (url) {
src/lib/components/common/FileItemModal.svelte
+43 -129
View File
@@ -26,11 +26,11 @@
export let edit = false; export let edit = false;
let enableFullContent = false; let enableFullContent = false;
let loading = false;
let isPdf = false; let isPDF = false;
let isAudio = false; let isAudio = false;
let isExcel = false; let isExcel = false;
let loading = false;
let selectedTab = ''; let selectedTab = '';
let excelWorkbook: XLSX.WorkBook | null = null; let excelWorkbook: XLSX.WorkBook | null = null;
@@ -313,7 +313,9 @@
</div> </div>
{/each} {/each}
</div> </div>
{:else if isPDF} {/if}
{#if isAudio || isPDF || isExcel || isCode || isMarkdown}
<div <div
class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-50 dark:border-gray-850/30 text-center text-sm font-medium bg-transparent dark:text-gray-200" class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-50 dark:border-gray-850/30 text-center text-sm font-medium bg-transparent dark:text-gray-200"
> >
@@ -337,44 +339,33 @@
}}>{$i18n.t('Preview')}</button }}>{$i18n.t('Preview')}</button
> >
</div> </div>
{/if}
{#if selectedTab === 'preview'} {#if selectedTab === ''}
{#if item?.file?.data}
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
{(item?.file?.data?.content ?? '').trim() || 'No content'}
</div>
{:else if item?.content}
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
{(item?.content ?? '').trim() || 'No content'}
</div>
{/if}
{:else if selectedTab === 'preview'}
{#if isAudio}
<audio
src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
class="w-full border-0 rounded-lg mb-2"
controls
playsinline
/>
{:else if isPDF}
<iframe <iframe
title={item?.name} title={item?.name}
src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`} src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
class="w-full h-[70vh] border-0 rounded-lg" class="w-full h-[70vh] border-0 rounded-lg"
/> />
{:else} {:else if isExcel}
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
{(item?.file?.data?.content ?? '').trim() || 'No content'}
</div>
{/if}
{:else if isExcel}
<div
class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-50 dark:border-gray-850/30 text-center text-sm font-medium bg-transparent dark:text-gray-200"
>
<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'}
{#if excelError} {#if excelError}
<div class="text-red-500 text-sm p-4"> <div class="text-red-500 text-sm p-4">
{excelError} {excelError}
@@ -406,105 +397,28 @@
<div class="text-gray-500 text-sm p-4">No content available</div> <div class="text-gray-500 text-sm p-4">No content available</div>
{/if} {/if}
{/if} {/if}
{:else if isCode}
<div class="max-h-[60vh] overflow-scroll scrollbar-hidden text-sm relative">
<CodeBlock
code={item.file.data.content}
lang={item.name.split('.').pop()}
token={null}
edit={false}
run={false}
save={false}
/>
</div>
{:else if isMarkdown}
<div
class="max-h-[60vh] overflow-scroll scrollbar-hidden text-sm prose dark:prose-invert max-w-full"
>
<Markdown content={item.file.data.content} id="markdown-viewer" />
</div>
{:else} {:else}
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap"> <div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
{(item?.file?.data?.content ?? '').trim() || 'No content'} {(item?.file?.data?.content ?? '').trim() || 'No content'}
</div> </div>
{/if} {/if}
{:else}
{#if isAudio}
<audio
src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
class="w-full border-0 rounded-lg mb-2"
controls
playsinline
/>
{/if}
{#if item?.file?.data}
{#if isMarkdown}
<div
class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-50 dark:border-gray-850/30 text-center text-sm font-medium bg-transparent dark:text-gray-200"
>
<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'}
<div
class="max-h-[60vh] overflow-scroll scrollbar-hidden text-sm prose dark:prose-invert max-w-full"
>
<Markdown content={item.file.data.content} id="markdown-viewer" />
</div>
{:else}
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
{(item?.file?.data?.content ?? '').trim() || 'No content'}
</div>
{/if}
{:else if isCode}
<div
class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-50 dark:border-gray-850/30 text-center text-sm font-medium bg-transparent dark:text-gray-200"
>
<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'}
<div class="max-h-[60vh] overflow-scroll scrollbar-hidden text-sm relative">
<CodeBlock
code={item.file.data.content}
lang={item.name.split('.').pop()}
token={null}
edit={false}
run={false}
save={false}
/>
</div>
{:else}
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
{(item?.file?.data?.content ?? '').trim() || 'No content'}
</div>
{/if}
{:else}
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
{(item?.file?.data?.content ?? '').trim() || 'No content'}
</div>
{/if}
{/if}
{/if} {/if}
{:else} {:else}
<div class="flex items-center justify-center py-6"> <div class="flex items-center justify-center py-6">