From e61724d2b131488d8f2f5cfbebcb2f38a691b9f4 Mon Sep 17 00:00:00 2001 From: G30 <50341825+silentoplayz@users.noreply.github.com> Date: Sat, 20 Dec 2025 08:15:01 -0500 Subject: [PATCH] feat: Enhanced File Viewer Modal (Excel, CSV, Markdown & Code) (#20035) * feat: Add Excel file viewer to FileItemModal * feat: Add CSV file viewer to FileItemModal * feat: Add Markdown and Code syntax highlighting to file viewer * chore: add dependency * fix: default to raw text view for Excel/Code/MD files * fix: only show rows count in preview tab for excel files --- package.json | 1 + .../components/common/FileItemModal.svelte | 340 +++++++++++++++++- 2 files changed, 327 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index ae4bc3f8ca..aa36a06563 100644 --- a/package.json +++ b/package.json @@ -140,6 +140,7 @@ "vega": "^6.2.0", "vega-lite": "^6.4.1", "vite-plugin-static-copy": "^2.2.0", + "xlsx": "^0.18.5", "y-prosemirror": "^1.3.7", "yaml": "^2.7.1", "yjs": "^13.6.27" diff --git a/src/lib/components/common/FileItemModal.svelte b/src/lib/components/common/FileItemModal.svelte index dbd146bc5b..862646d341 100644 --- a/src/lib/components/common/FileItemModal.svelte +++ b/src/lib/components/common/FileItemModal.svelte @@ -3,6 +3,10 @@ import { formatFileSize, getLineCount } from '$lib/utils'; import { WEBUI_API_BASE_URL } from '$lib/constants'; import { getKnowledgeById } from '$lib/apis/knowledge'; + import * as XLSX from 'xlsx'; + + import CodeBlock from '$lib/components/chat/Messages/CodeBlock.svelte'; + import Markdown from '$lib/components/chat/Messages/Markdown.svelte'; const i18n = getContext('i18n'); @@ -23,14 +27,48 @@ let isPdf = false; let isAudio = false; + let isExcel = false; let loading = false; let selectedTab = ''; + let excelWorkbook: XLSX.WorkBook | null = null; + let excelSheetNames: string[] = []; + let selectedSheet = ''; + let excelHtml = ''; + let excelError = ''; + let rowCount = 0; $: isPDF = item?.meta?.content_type === 'application/pdf' || (item?.name && item?.name.toLowerCase().endsWith('.pdf')); + $: isMarkdown = + item?.meta?.content_type === 'text/markdown' || + (item?.name && item?.name.toLowerCase().endsWith('.md')); + + $: isCode = + item?.name && + (item.name.toLowerCase().endsWith('.py') || + item.name.toLowerCase().endsWith('.js') || + item.name.toLowerCase().endsWith('.ts') || + item.name.toLowerCase().endsWith('.java') || + item.name.toLowerCase().endsWith('.html') || + item.name.toLowerCase().endsWith('.css') || + item.name.toLowerCase().endsWith('.json') || + item.name.toLowerCase().endsWith('.cpp') || + item.name.toLowerCase().endsWith('.c') || + item.name.toLowerCase().endsWith('.h') || + item.name.toLowerCase().endsWith('.sh') || + item.name.toLowerCase().endsWith('.bash') || + item.name.toLowerCase().endsWith('.yaml') || + item.name.toLowerCase().endsWith('.yml') || + item.name.toLowerCase().endsWith('.xml') || + item.name.toLowerCase().endsWith('.sql') || + item.name.toLowerCase().endsWith('.go') || + item.name.toLowerCase().endsWith('.rs') || + item.name.toLowerCase().endsWith('.php') || + item.name.toLowerCase().endsWith('.rb')); + $: isAudio = (item?.meta?.content_type ?? '').startsWith('audio/') || (item?.name && item?.name.toLowerCase().endsWith('.mp3')) || @@ -39,7 +77,66 @@ (item?.name && item?.name.toLowerCase().endsWith('.m4a')) || (item?.name && item?.name.toLowerCase().endsWith('.webm')); + $: isExcel = + item?.meta?.content_type === 'application/vnd.ms-excel' || + item?.meta?.content_type === + 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || + item?.meta?.content_type === 'text/csv' || + item?.meta?.content_type === 'application/csv' || + (item?.name && + (item.name.toLowerCase().endsWith('.xls') || + item.name.toLowerCase().endsWith('.xlsx') || + item.name.toLowerCase().endsWith('.csv'))); + + const loadExcelContent = async () => { + try { + excelError = ''; + const response = await fetch(`${WEBUI_API_BASE_URL}/files/${item.id}/content`, { + headers: { + Authorization: `Bearer ${localStorage.token}` + } + }); + + if (!response.ok) { + throw new Error('Failed to fetch Excel file'); + } + + const arrayBuffer = await response.arrayBuffer(); + excelWorkbook = XLSX.read(arrayBuffer, { type: 'array' }); + excelSheetNames = excelWorkbook.SheetNames; + + if (excelSheetNames.length > 0) { + selectedSheet = excelSheetNames[0]; + renderExcelSheet(); + } + } catch (error) { + console.error('Error loading Excel/CSV file:', error); + excelError = 'Failed to load Excel/CSV file. Please try downloading it instead.'; + } + }; + + const renderExcelSheet = () => { + if (!excelWorkbook || !selectedSheet) return; + + const worksheet = excelWorkbook.Sheets[selectedSheet]; + // Calculate row count + const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1:A1'); + rowCount = range.e.r - range.s.r + 1; + + excelHtml = XLSX.utils.sheet_to_html(worksheet, { + id: 'excel-table', + editable: false, + header: '' + }); + }; + + + $: if (selectedSheet && excelWorkbook) { + renderExcelSheet(); + } + const loadContent = async () => { + selectedTab = ''; if (item?.type === 'collection') { loading = true; @@ -63,6 +160,12 @@ if (file) { item.file = file || {}; } + + // Load Excel content if it's an Excel file + if (isExcel) { + await loadExcelContent(); + } + loading = false; } @@ -143,9 +246,15 @@ {#if item?.file?.data?.content}
- {$i18n.t('{{COUNT}} extracted lines', { - COUNT: getLineCount(item?.file?.data?.content ?? '') - })} + {#if isExcel && rowCount > 0 && selectedTab === 'preview'} + {$i18n.t('{{COUNT}} Rows', { + COUNT: rowCount + })} + {:else} + {$i18n.t('{{COUNT}} extracted lines', { + COUNT: getLineCount(item?.file?.data?.content ?? '') + })} + {/if}
@@ -239,22 +348,176 @@ {(item?.file?.data?.content ?? '').trim() || 'No content'}
{/if} - {:else} - {#if isAudio} -