Mirrors/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-07-11 04:50:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-02-25 19:00:56 -06:00
parent b1f292965c
commit 5a08084899
1 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/lib/components/chat/FileNav/FilePreview.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts">
import { getContext, onDestroy } from 'svelte';
import panzoom, { type PanZoom } from 'panzoom';
import { marked } from 'marked';
import DOMPurify from 'dompurify';
import Spinner from '../../common/Spinner.svelte';
import PDFViewer from '../../common/PDFViewer.svelte';
import Tooltip from '../../common/Tooltip.svelte';
@@ -16,6 +18,14 @@
export let onDownload: () => void = () => {};
const MD_EXTS = new Set(['md', 'markdown', 'mdx']);
$: isMarkdown = MD_EXTS.has(selectedFile?.split('.').pop()?.toLowerCase() ?? '');
$: renderedHtml = isMarkdown && fileContent ? DOMPurify.sanitize(marked.parse(fileContent, { async: false }) as string) : '';
let showRaw = false;
// Reset to preview mode when switching files
$: if (selectedFile) showRaw = false;
let pzInstance: PanZoom | null = null;
const initImagePanzoom = (node: HTMLElement) => {
@@ -59,6 +69,28 @@
</button>
</Tooltip>
{/if}
{#if isMarkdown && fileContent !== null}
<Tooltip content={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}>
<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={() => (showRaw = !showRaw)}
aria-label={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}
>
{#if showRaw}
<!-- Eye icon: switch to preview -->
<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="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
{:else}
<!-- Code icon: switch to raw -->
<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="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
</svg>
{/if}
</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={onDownload}
@@ -96,8 +128,14 @@
{:else if filePdfData !== null}
<PDFViewer data={filePdfData} className="w-full h-full" />
{:else if fileContent !== null}
<pre
class="text-xs font-mono text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-all leading-relaxed p-3">{fileContent}</pre>
{#if isMarkdown && !showRaw}
<div class="prose dark:prose-invert max-w-full text-sm p-3">
{@html renderedHtml}
</div>
{:else}
<pre
class="text-xs font-mono text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-all leading-relaxed p-3">{fileContent}</pre>
{/if}
{:else}
<div class="text-sm text-gray-400 text-center pt-8">
{$i18n.t('Could not read file.')}