Emil_Shanaty/open-webui-ai4me
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 Tooltip from '../common/Tooltip.svelte';
import PDFViewer from '../common/PDFViewer.svelte'; import PDFViewer from '../common/PDFViewer.svelte';
import ConfirmDialog from '../common/ConfirmDialog.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'); const i18n = getContext('i18n');
@@ -86,6 +92,10 @@
const clearFilePreview = () => { const clearFilePreview = () => {
fileContent = null; fileContent = null;
if (pzInstance) {
pzInstance.dispose();
pzInstance = null;
}
if (fileImageUrl) { if (fileImageUrl) {
URL.revokeObjectURL(fileImageUrl); URL.revokeObjectURL(fileImageUrl);
fileImageUrl = null; fileImageUrl = null;
@@ -93,6 +103,22 @@
filePdfData = null; 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) => { const loadDir = async (path: string) => {
if (!configured) return; if (!configured) return;
loading = true; loading = true;
@@ -253,6 +279,7 @@
}); });
onDestroy(() => { onDestroy(() => {
pzInstance?.dispose();
if (fileImageUrl) URL.revokeObjectURL(fileImageUrl); if (fileImageUrl) URL.revokeObjectURL(fileImageUrl);
}); });
</script> </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-gray-300 dark:text-gray-600 text-xs shrink-0 select-none mx-0.5">/</span
> >
<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()} {selectedFile.split('/').pop()}
</span> </span>
@@ -413,38 +440,54 @@
</div> </div>
<!-- Content --> <!-- 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} {#if selectedFile !== null}
<!-- Floating download button --> <!-- Floating action buttons -->
<button <div class="absolute top-2 right-2 z-10 flex gap-1">
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" {#if fileImageUrl !== null}
on:click={() => downloadFile(selectedFile)} <Tooltip content={$i18n.t('Reset view')}>
aria-label={$i18n.t('Download')} <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"
<svg on:click={resetImageView}
xmlns="http://www.w3.org/2000/svg" aria-label={$i18n.t('Reset view')}
viewBox="0 0 24 24" >
fill="none" <Reset className="size-4" />
stroke="currentColor" </button>
stroke-width="1.5" </Tooltip>
class="size-4" {/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 <svg
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" viewBox="0 0 24 24"
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" fill="none"
/> stroke="currentColor"
</svg> stroke-width="1.5"
</button> 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 --> <!-- File preview -->
{#if fileLoading} {#if fileLoading}
<div class="flex justify-center pt-8"><Spinner className="size-4" /></div> <div class="flex justify-center pt-8"><Spinner className="size-4" /></div>
{:else if fileImageUrl !== null} {:else if fileImageUrl !== null}
<img <div class="w-full h-full" use:initImagePanzoom>
src={fileImageUrl} <img
alt={selectedFile?.split('/').pop()} src={fileImageUrl}
class="w-full h-auto object-contain p-3" alt={selectedFile?.split('/').pop()}
/> class="w-full h-auto object-contain p-3"
draggable="false"
/>
</div>
{:else if filePdfData !== null} {:else if filePdfData !== null}
<PDFViewer data={filePdfData} className="w-full h-full min-h-[400px]" /> <PDFViewer data={filePdfData} className="w-full h-full min-h-[400px]" />
{:else if fileContent !== null} {:else if fileContent !== null}
src/lib/components/common/FileItemModal.svelte
+38 -1
View File
@@ -25,6 +25,9 @@
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import Spinner from './Spinner.svelte'; import Spinner from './Spinner.svelte';
import PDFViewer from './PDFViewer.svelte'; import PDFViewer from './PDFViewer.svelte';
import Reset from '../icons/Reset.svelte';
import panzoom, { type PanZoom } from 'panzoom';
export let item; export let item;
export let show = false; export let show = false;
@@ -46,6 +49,23 @@
let excelError = ''; let excelError = '';
let rowCount = 0; let rowCount = 0;
let pzInstance: PanZoom | null = null;
const initImagePanzoom = (node: HTMLElement) => {
pzInstance = panzoom(node, {
bounds: true,
boundsPadding: 0.1,
zoomSpeed: 0.065
});
};
const resetImageView = () => {
if (pzInstance) {
pzInstance.moveTo(0, 0);
pzInstance.zoomAbs(0, 0, 1);
}
};
$: 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'));
@@ -197,6 +217,10 @@
if (item?.context === 'full') { if (item?.context === 'full') {
enableFullContent = true; enableFullContent = true;
} }
return () => {
pzInstance?.dispose();
};
}); });
</script> </script>
@@ -361,14 +385,27 @@
{/if} {/if}
{#if isImage} {#if isImage}
<div class="w-full max-h-[70vh] overflow-auto"> <div class="relative w-full max-h-[70vh] overflow-hidden">
<div class="absolute top-2 right-2 z-10">
<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}
>
<Reset className="size-4" />
</button>
</Tooltip>
</div>
<div use:initImagePanzoom>
<img <img
src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`} src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
alt={item?.name ?? 'Image'} alt={item?.name ?? 'Image'}
class="w-full object-contain rounded-lg" class="w-full object-contain rounded-lg"
loading="lazy" loading="lazy"
draggable="false"
/> />
</div> </div>
</div>
{:else if selectedTab === ''} {:else if selectedTab === ''}
{#if item?.file?.data} {#if item?.file?.data}
{@const rawContent = (item?.file?.data?.content ?? '').trim() || 'No content'} {@const rawContent = (item?.file?.data?.content ?? '').trim() || 'No content'}
src/lib/components/common/PDFViewer.svelte
+60 -28
View File
@@ -1,29 +1,56 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy, getContext } from 'svelte';
import pdfWorkerUrl from 'pdfjs-dist/build/pdf.worker.mjs?url'; import pdfWorkerUrl from 'pdfjs-dist/build/pdf.worker.mjs?url';
import panzoom, { type PanZoom } from 'panzoom';
import Spinner from './Spinner.svelte'; import Spinner from './Spinner.svelte';
import Tooltip from './Tooltip.svelte';
import Reset from '../icons/Reset.svelte';
const i18n = getContext('i18n');
export let url: string | null = null; export let url: string | null = null;
export let data: ArrayBuffer | Uint8Array | null = null; export let data: ArrayBuffer | Uint8Array | null = null;
export let className = 'w-full h-[70vh]'; export let className = 'w-full h-[70vh]';
let container: HTMLDivElement; let outerContainer: HTMLDivElement;
let sceneElement: HTMLDivElement;
let loading = true; let loading = true;
let error = ''; let error = '';
let pdfDoc: any = null; let pdfDoc: any = null;
let pzInstance: PanZoom | null = null;
const initPanzoom = () => {
if (pzInstance) {
pzInstance.dispose();
}
if (sceneElement) {
pzInstance = panzoom(sceneElement, {
bounds: true,
boundsPadding: 0.1,
zoomSpeed: 0.065
});
}
};
const resetView = () => {
if (pzInstance) {
pzInstance.moveTo(0, 0);
pzInstance.zoomAbs(0, 0, 1);
}
};
const renderAllPages = async () => { const renderAllPages = async () => {
if (!pdfDoc || !container) return; if (!pdfDoc || !sceneElement) return;
// Clear previous canvases // Clear previous canvases
container.innerHTML = ''; sceneElement.innerHTML = '';
for (let i = 1; i <= pdfDoc.numPages; i++) { for (let i = 1; i <= pdfDoc.numPages; i++) {
const page = await pdfDoc.getPage(i); const page = await pdfDoc.getPage(i);
const viewport = page.getViewport({ scale: 1 }); const viewport = page.getViewport({ scale: 1 });
// Scale to fit container width // Scale to fit container width
const containerWidth = container.clientWidth || 800; const containerWidth = outerContainer?.clientWidth || 800;
const scale = containerWidth / viewport.width; const scale = containerWidth / viewport.width;
const scaledViewport = page.getViewport({ scale }); const scaledViewport = page.getViewport({ scale });
@@ -38,7 +65,7 @@
canvas.style.marginTop = '4px'; canvas.style.marginTop = '4px';
} }
container.appendChild(canvas); sceneElement.appendChild(canvas);
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
await page.render({ await page.render({
@@ -46,6 +73,8 @@
viewport: scaledViewport viewport: scaledViewport
}).promise; }).promise;
} }
initPanzoom();
}; };
const loadPdf = async () => { const loadPdf = async () => {
@@ -77,24 +106,12 @@
} }
}; };
// Re-render on resize
let resizeObserver: ResizeObserver | null = null;
onMount(() => { onMount(() => {
loadPdf(); loadPdf();
resizeObserver = new ResizeObserver(() => {
if (pdfDoc && !loading) {
renderAllPages();
}
});
if (container) {
resizeObserver.observe(container);
}
}); });
onDestroy(() => { onDestroy(() => {
resizeObserver?.disconnect(); pzInstance?.dispose();
if (pdfDoc) { if (pdfDoc) {
pdfDoc.destroy(); pdfDoc.destroy();
pdfDoc = null; pdfDoc = null;
@@ -102,16 +119,31 @@
}); });
</script> </script>
<div class="overflow-auto {className}" bind:this={container}> <div class="relative overflow-hidden {className}" bind:this={outerContainer}>
{#if loading} <div bind:this={sceneElement} class="w-full">
<div class="flex items-center justify-center h-full"> {#if loading}
<Spinner className="size-5" /> <div class="flex items-center justify-center h-full">
</div> <Spinner className="size-5" />
{/if} </div>
{/if}
{#if error} {#if error}
<div class="flex items-center justify-center h-full text-sm text-red-500"> <div class="flex items-center justify-center h-full text-sm text-red-500">
{error} {error}
</div>
{/if}
</div>
{#if !loading && !error && pdfDoc}
<div class="absolute top-2 right-2 z-10">
<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={resetView}
>
<Reset className="size-4" />
</button>
</Tooltip>
</div> </div>
{/if} {/if}
</div> </div>