From d456269718ce0cf8a8bc59fde3ba391ba20280bf Mon Sep 17 00:00:00 2001 From: yangdx Date: Tue, 25 Mar 2025 22:42:46 +0800 Subject: [PATCH] feat: Add file name display in WebUI Backend: - Add file_path field to DocStatusResponse - Update document status response creation Frontend: - Remove metadata column - Improve filename display with truncation and tooltips - Add show/hide filename toggle with proper styling - Update translations for all supported languages" --- lightrag/api/routers/document_routes.py | 2 + lightrag_webui/src/api/lightrag.ts | 1 + .../src/features/DocumentManager.tsx | 83 +++++++++++++++++-- lightrag_webui/src/locales/ar.json | 11 ++- lightrag_webui/src/locales/en.json | 7 +- lightrag_webui/src/locales/zh.json | 7 +- lightrag_webui/src/stores/settings.ts | 14 +++- 7 files changed, 109 insertions(+), 16 deletions(-) diff --git a/lightrag/api/routers/document_routes.py b/lightrag/api/routers/document_routes.py index e91668f6..d6434e08 100644 --- a/lightrag/api/routers/document_routes.py +++ b/lightrag/api/routers/document_routes.py @@ -91,6 +91,7 @@ class DocStatusResponse(BaseModel): chunks_count: Optional[int] = None error: Optional[str] = None metadata: Optional[dict[str, Any]] = None + file_path: str class DocsStatusesResponse(BaseModel): @@ -890,6 +891,7 @@ def create_document_routes( chunks_count=doc_status.chunks_count, error=doc_status.error, metadata=doc_status.metadata, + file_path=doc_status.file_path, ) ) return response diff --git a/lightrag_webui/src/api/lightrag.ts b/lightrag_webui/src/api/lightrag.ts index fd1f02bb..e647285e 100644 --- a/lightrag_webui/src/api/lightrag.ts +++ b/lightrag_webui/src/api/lightrag.ts @@ -124,6 +124,7 @@ export type DocStatusResponse = { chunks_count?: number error?: string metadata?: Record + file_path: string } export type DocsStatusesResponse = { diff --git a/lightrag_webui/src/features/DocumentManager.tsx b/lightrag_webui/src/features/DocumentManager.tsx index 4a5f78bb..b6839cd5 100644 --- a/lightrag_webui/src/features/DocumentManager.tsx +++ b/lightrag_webui/src/features/DocumentManager.tsx @@ -12,7 +12,6 @@ import { } from '@/components/ui/Table' import { Card, CardHeader, CardTitle, CardContent, CardDescription } from '@/components/ui/Card' import EmptyCard from '@/components/ui/EmptyCard' -import Text from '@/components/ui/Text' import UploadDocumentsDialog from '@/components/documents/UploadDocumentsDialog' import ClearDocumentsDialog from '@/components/documents/ClearDocumentsDialog' @@ -22,12 +21,36 @@ import { toast } from 'sonner' import { useBackendState } from '@/stores/state' import { RefreshCwIcon } from 'lucide-react' +import { DocStatusResponse } from '@/api/lightrag' + +const getDisplayFileName = (doc: DocStatusResponse, maxLength: number = 20): string => { + // Check if file_path exists and is a non-empty string + if (!doc.file_path || typeof doc.file_path !== 'string' || doc.file_path.trim() === '') { + return doc.id; + } + + // Try to extract filename from path + const parts = doc.file_path.split('/'); + const fileName = parts[parts.length - 1]; + + // Ensure extracted filename is valid + if (!fileName || fileName.trim() === '') { + return doc.id; + } + + // If filename is longer than maxLength, truncate it and add ellipsis + return fileName.length > maxLength + ? fileName.slice(0, maxLength) + '...' + : fileName; +}; export default function DocumentManager() { const { t } = useTranslation() const health = useBackendState.use.health() const [docs, setDocs] = useState(null) const currentTab = useSettingsStore.use.currentTab() + const showFileName = useSettingsStore.use.showFileName() + const setShowFileName = useSettingsStore.use.setShowFileName() const fetchDocuments = useCallback(async () => { try { @@ -107,7 +130,23 @@ export default function DocumentManager() { - {t('documentPanel.documentManager.uploadedTitle')} +
+ {t('documentPanel.documentManager.uploadedTitle')} +
+ {t('documentPanel.documentManager.fileNameLabel')} + +
+
{t('documentPanel.documentManager.uploadedDescription')} @@ -135,13 +174,39 @@ export default function DocumentManager() { {Object.entries(docs.statuses).map(([status, documents]) => documents.map((doc) => ( - {doc.id} - - + + {showFileName ? ( + <> +
+
+ {getDisplayFileName(doc, 35)} +
+
+ {doc.file_path} +
+
+
{doc.id}
+ + ) : ( +
+
+ {doc.id} +
+
+ {doc.file_path} +
+
+ )} + + +
+
+ {doc.content_summary} +
+
+ {doc.content_summary} +
+
{status === 'processed' && ( diff --git a/lightrag_webui/src/locales/ar.json b/lightrag_webui/src/locales/ar.json index dc0cb9bb..c6cdb9a2 100644 --- a/lightrag_webui/src/locales/ar.json +++ b/lightrag_webui/src/locales/ar.json @@ -81,9 +81,14 @@ }, "errors": { "loadFailed": "فشل تحميل المستندات\n{{error}}", - "scanFailed": "فشل المسح الضوئي للمستندات\n{{error}}", - "scanProgressFailed": "فشل الحصول على تقدم المسح الضوئي\n{{error}}" - } + "scanFailed": "فشل مسح المستندات\n{{error}}", + "scanProgressFailed": "فشل الحصول على تقدم المسح\n{{error}}" + }, + "fileNameLabel": "اسم الملف", + "showButton": "عرض", + "hideButton": "إخفاء", + "showFileNameTooltip": "عرض اسم الملف", + "hideFileNameTooltip": "إخفاء اسم الملف" } }, "graphPanel": { diff --git a/lightrag_webui/src/locales/en.json b/lightrag_webui/src/locales/en.json index dfca64d2..2123c26f 100644 --- a/lightrag_webui/src/locales/en.json +++ b/lightrag_webui/src/locales/en.json @@ -83,7 +83,12 @@ "loadFailed": "Failed to load documents\n{{error}}", "scanFailed": "Failed to scan documents\n{{error}}", "scanProgressFailed": "Failed to get scan progress\n{{error}}" - } + }, + "fileNameLabel": "File Name", + "showButton": "Show", + "hideButton": "Hide", + "showFileNameTooltip": "Show file name", + "hideFileNameTooltip": "Hide file name" } }, "graphPanel": { diff --git a/lightrag_webui/src/locales/zh.json b/lightrag_webui/src/locales/zh.json index 07e34c50..386501df 100644 --- a/lightrag_webui/src/locales/zh.json +++ b/lightrag_webui/src/locales/zh.json @@ -83,7 +83,12 @@ "loadFailed": "加载文档失败\n{{error}}", "scanFailed": "扫描文档失败\n{{error}}", "scanProgressFailed": "获取扫描进度失败\n{{error}}" - } + }, + "fileNameLabel": "文件名", + "showButton": "显示", + "hideButton": "隐藏", + "showFileNameTooltip": "显示文件名", + "hideFileNameTooltip": "隐藏文件名" } }, "graphPanel": { diff --git a/lightrag_webui/src/stores/settings.ts b/lightrag_webui/src/stores/settings.ts index 2344ea13..311e5061 100644 --- a/lightrag_webui/src/stores/settings.ts +++ b/lightrag_webui/src/stores/settings.ts @@ -9,6 +9,10 @@ type Language = 'en' | 'zh' | 'fr' | 'ar' type Tab = 'documents' | 'knowledge-graph' | 'retrieval' | 'api' interface SettingsState { + // Document manager settings + showFileName: boolean + setShowFileName: (show: boolean) => void + // Graph viewer settings showPropertyPanel: boolean showNodeSearchBar: boolean @@ -83,6 +87,7 @@ const useSettingsStoreBase = create()( apiKey: null, currentTab: 'documents', + showFileName: false, retrievalHistory: [], @@ -138,12 +143,14 @@ const useSettingsStoreBase = create()( updateQuerySettings: (settings: Partial) => set((state) => ({ querySettings: { ...state.querySettings, ...settings } - })) + })), + + setShowFileName: (show: boolean) => set({ showFileName: show }) }), { name: 'settings-storage', storage: createJSONStorage(() => localStorage), - version: 8, + version: 9, migrate: (state: any, version: number) => { if (version < 2) { state.showEdgeLabel = false @@ -186,6 +193,9 @@ const useSettingsStoreBase = create()( state.graphMinDegree = 0 state.language = 'en' } + if (version < 9) { + state.showFileName = false + } return state } }