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": "^6.2.0",
|
||||||
"vega-lite": "^6.4.1",
|
"vega-lite": "^6.4.1",
|
||||||
"vite-plugin-static-copy": "^2.2.0",
|
"vite-plugin-static-copy": "^2.2.0",
|
||||||
|
"xlsx": "^0.18.5",
|
||||||
"y-prosemirror": "^1.3.7",
|
"y-prosemirror": "^1.3.7",
|
||||||
"yaml": "^2.7.1",
|
"yaml": "^2.7.1",
|
||||||
"yjs": "^13.6.27"
|
"yjs": "^13.6.27"
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,10 @@
|
||||||
import { formatFileSize, getLineCount } from '$lib/utils';
|
import { formatFileSize, getLineCount } from '$lib/utils';
|
||||||
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||||
import { getKnowledgeById } from '$lib/apis/knowledge';
|
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');
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
|
|
@ -23,14 +27,48 @@
|
||||||
|
|
||||||
let isPdf = false;
|
let isPdf = false;
|
||||||
let isAudio = false;
|
let isAudio = false;
|
||||||
|
let isExcel = false;
|
||||||
let loading = false;
|
let loading = false;
|
||||||
|
|
||||||
let selectedTab = '';
|
let selectedTab = '';
|
||||||
|
let excelWorkbook: XLSX.WorkBook | null = null;
|
||||||
|
let excelSheetNames: string[] = [];
|
||||||
|
let selectedSheet = '';
|
||||||
|
let excelHtml = '';
|
||||||
|
let excelError = '';
|
||||||
|
let rowCount = 0;
|
||||||
|
|
||||||
$: 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'));
|
||||||
|
|
||||||
|
$: 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 =
|
$: isAudio =
|
||||||
(item?.meta?.content_type ?? '').startsWith('audio/') ||
|
(item?.meta?.content_type ?? '').startsWith('audio/') ||
|
||||||
(item?.name && item?.name.toLowerCase().endsWith('.mp3')) ||
|
(item?.name && item?.name.toLowerCase().endsWith('.mp3')) ||
|
||||||
|
|
@ -39,7 +77,66 @@
|
||||||
(item?.name && item?.name.toLowerCase().endsWith('.m4a')) ||
|
(item?.name && item?.name.toLowerCase().endsWith('.m4a')) ||
|
||||||
(item?.name && item?.name.toLowerCase().endsWith('.webm'));
|
(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 () => {
|
const loadContent = async () => {
|
||||||
|
selectedTab = '';
|
||||||
if (item?.type === 'collection') {
|
if (item?.type === 'collection') {
|
||||||
loading = true;
|
loading = true;
|
||||||
|
|
||||||
|
|
@ -63,6 +160,12 @@
|
||||||
if (file) {
|
if (file) {
|
||||||
item.file = file || {};
|
item.file = file || {};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Load Excel content if it's an Excel file
|
||||||
|
if (isExcel) {
|
||||||
|
await loadExcelContent();
|
||||||
|
}
|
||||||
|
|
||||||
loading = false;
|
loading = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -143,9 +246,15 @@
|
||||||
|
|
||||||
{#if item?.file?.data?.content}
|
{#if item?.file?.data?.content}
|
||||||
<div class="capitalize shrink-0">
|
<div class="capitalize shrink-0">
|
||||||
{$i18n.t('{{COUNT}} extracted lines', {
|
{#if isExcel && rowCount > 0 && selectedTab === 'preview'}
|
||||||
COUNT: getLineCount(item?.file?.data?.content ?? '')
|
{$i18n.t('{{COUNT}} Rows', {
|
||||||
})}
|
COUNT: rowCount
|
||||||
|
})}
|
||||||
|
{:else}
|
||||||
|
{$i18n.t('{{COUNT}} extracted lines', {
|
||||||
|
COUNT: getLineCount(item?.file?.data?.content ?? '')
|
||||||
|
})}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center gap-1 shrink-0">
|
<div class="flex items-center gap-1 shrink-0">
|
||||||
|
|
@ -239,22 +348,176 @@
|
||||||
{(item?.file?.data?.content ?? '').trim() || 'No content'}
|
{(item?.file?.data?.content ?? '').trim() || 'No content'}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else if isExcel}
|
||||||
{#if isAudio}
|
<div
|
||||||
<audio
|
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"
|
||||||
src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
|
>
|
||||||
class="w-full border-0 rounded-lg mb-2"
|
<button
|
||||||
controls
|
class="min-w-fit py-1.5 px-4 border-b {selectedTab === ''
|
||||||
playsinline
|
? ' '
|
||||||
/>
|
: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
|
||||||
{/if}
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
selectedTab = '';
|
||||||
|
}}>{$i18n.t('Content')}</button
|
||||||
|
>
|
||||||
|
|
||||||
{#if item?.file?.data}
|
<button
|
||||||
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
|
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'}
|
{(item?.file?.data?.content ?? '').trim() || 'No content'}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex items-center justify-center py-6">
|
<div class="flex items-center justify-center py-6">
|
||||||
<Spinner className="size-5" />
|
<Spinner className="size-5" />
|
||||||
|
|
@ -263,3 +526,52 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</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