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

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-02-25 18:16:20 -06:00
parent 50e6a19957
commit 1f77691b01
3 changed files with 168 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/FileNav.svelte
+70 -27
View File
@@ -28,6 +28,12 @@
import Tooltip from '../common/Tooltip.svelte';
import PDFViewer from '../common/PDFViewer.svelte';
import ConfirmDialog from '../common/ConfirmDialog.svelte';
import Reset from '../icons/Reset.svelte';
import panzoom, { type PanZoom } from 'panzoom';
let pzInstance: PanZoom | null = null;
let imageSceneElement: HTMLElement | null = null;
const i18n = getContext('i18n');
@@ -86,6 +92,10 @@
const clearFilePreview = () => {
fileContent = null;
if (pzInstance) {
pzInstance.dispose();
pzInstance = null;
}
if (fileImageUrl) {
URL.revokeObjectURL(fileImageUrl);
fileImageUrl = null;
@@ -93,6 +103,22 @@
filePdfData = null;
};
const initImagePanzoom = (node: HTMLElement) => {
imageSceneElement = node;
pzInstance = panzoom(node, {
bounds: true,
boundsPadding: 0.1,
zoomSpeed: 0.065
});
};
const resetImageView = () => {
if (pzInstance) {
pzInstance.moveTo(0, 0);
pzInstance.zoomAbs(0, 0, 1);
}
};
const loadDir = async (path: string) => {
if (!configured) return;
loading = true;
@@ -253,6 +279,7 @@
});
onDestroy(() => {
pzInstance?.dispose();
if (fileImageUrl) URL.revokeObjectURL(fileImageUrl);
});
</script>
@@ -334,7 +361,7 @@
<span class="text-gray-300 dark:text-gray-600 text-xs shrink-0 select-none mx-0.5">/</span
>
<span
class="text-xs shrink-0 px-1.5 py-0.5 text-gray-700 dark:text-gray-300 truncate max-w-[120px]"
class="text-xs shrink-0 px-1.5 py-0.5 text-gray-700 dark:text-gray-300"
>
{selectedFile.split('/').pop()}
</span>
@@ -413,38 +440,54 @@
</div>
<!-- Content -->
<div class="flex-1 overflow-y-auto min-h-0 relative">
<div class="flex-1 {fileImageUrl !== null ? 'overflow-hidden' : 'overflow-y-auto'} min-h-0 relative">
{#if selectedFile !== null}
<!-- Floating download button -->
<button
class="absolute top-2 right-2 z-10 p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
on:click={() => downloadFile(selectedFile)}
aria-label={$i18n.t('Download')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
class="size-4"
<!-- Floating action buttons -->
<div class="absolute top-2 right-2 z-10 flex gap-1">
{#if fileImageUrl !== null}
<Tooltip content={$i18n.t('Reset view')}>
<button
class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
on:click={resetImageView}
aria-label={$i18n.t('Reset view')}
>
<Reset className="size-4" />
</button>
</Tooltip>
{/if}
<button
class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
on:click={() => downloadFile(selectedFile)}
aria-label={$i18n.t('Download')}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
/>
</svg>
</button>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
/>
</svg>
</button>
</div>
<!-- File preview -->
{#if fileLoading}
<div class="flex justify-center pt-8"><Spinner className="size-4" /></div>
{:else if fileImageUrl !== null}
<img
src={fileImageUrl}
alt={selectedFile?.split('/').pop()}
class="w-full h-auto object-contain p-3"
/>
<div class="w-full h-full" use:initImagePanzoom>
<img
src={fileImageUrl}
alt={selectedFile?.split('/').pop()}
class="w-full h-auto object-contain p-3"
draggable="false"
/>
</div>
{:else if filePdfData !== null}
<PDFViewer data={filePdfData} className="w-full h-full min-h-[400px]" />
{:else if fileContent !== null}