mirror of
https://github.com/open-webui/open-webui.git
synced 2026-01-02 06:35:20 +00:00
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
This commit is contained in:
G30
GitHub
parent
cd170735c5
commit
e61724d2b1
2 changed files with 327 additions and 14 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
<div class="capitalize shrink-0">
|
||||
{$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}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
|
|
@ -239,22 +348,176 @@
|
|||
{(item?.file?.data?.content ?? '').trim() || 'No content'}
|
||||
</div>
|
||||
{/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}
|
||||
{: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
|
||||
>
|
||||
|
||||
{#if item?.file?.data}
|
||||
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
|
||||
<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}
|
||||
<div class="text-red-500 text-sm p-4">
|
||||
{excelError}
|
||||
</div>
|
||||
{:else}
|
||||
{#if excelSheetNames.length > 1}
|
||||
<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"
|
||||
>
|
||||
{#each excelSheetNames as sheetName}
|
||||
<button
|
||||
class="min-w-fit py-1.5 px-4 border-b {selectedSheet === sheetName
|
||||
? ' '
|
||||
: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
selectedSheet = sheetName;
|
||||
}}>{sheetName}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if excelHtml}
|
||||
<div class="excel-table-container overflow-auto max-h-[60vh]">
|
||||
{@html excelHtml}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-gray-500 text-sm p-4">No content available</div>
|
||||
{/if}
|
||||
{/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}
|
||||
{: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}
|
||||
{:else}
|
||||
<div class="flex items-center justify-center py-6">
|
||||
<Spinner className="size-5" />
|
||||
|
|
@ -263,3 +526,52 @@
|
|||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
:global(.excel-table-container table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
:global(.excel-table-container table td),
|
||||
:global(.excel-table-container table th) {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--color-gray-300, #cdcdcd);
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:global(.dark .excel-table-container table td),
|
||||
:global(.dark .excel-table-container table th) {
|
||||
border-color: var(--color-gray-600, #676767);
|
||||
}
|
||||
|
||||
:global(.excel-table-container table th) {
|
||||
background-color: var(--color-gray-100, #ececec);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:global(.dark .excel-table-container table th) {
|
||||
background-color: var(--color-gray-800, #333);
|
||||
color: var(--color-gray-100, #ececec);
|
||||
}
|
||||
|
||||
:global(.excel-table-container table tr:nth-child(even)) {
|
||||
background-color: var(--color-gray-50, #f9f9f9);
|
||||
}
|
||||
|
||||
:global(.dark .excel-table-container table tr:nth-child(even)) {
|
||||
background-color: rgba(38, 38, 38, 0.5);
|
||||
}
|
||||
|
||||
:global(.excel-table-container table tr:hover) {
|
||||
background-color: var(--color-gray-100, #ececec);
|
||||
}
|
||||
|
||||
:global(.dark .excel-table-container table tr:hover) {
|
||||
background-color: rgba(51, 51, 51, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue