feat: Lazy load file content on click

This commit is contained in:
Felipe Hernandez 2025-04-18 01:40:30 +02:00
parent 3b20c57ea8
commit 0577dc2990
2 changed files with 22 additions and 8 deletions

View file

@ -9,7 +9,7 @@ from open_webui.models.knowledge import (
KnowledgeResponse, KnowledgeResponse,
KnowledgeUserResponse, KnowledgeUserResponse,
) )
from open_webui.models.files import Files, FileModel from open_webui.models.files import Files, FileModel, FileMetadataResponse
from open_webui.retrieval.vector.connector import VECTOR_DB_CLIENT from open_webui.retrieval.vector.connector import VECTOR_DB_CLIENT
from open_webui.routers.retrieval import ( from open_webui.routers.retrieval import (
process_file, process_file,
@ -235,7 +235,7 @@ async def reindex_knowledge_files(request: Request, user=Depends(get_verified_us
class KnowledgeFilesResponse(KnowledgeResponse): class KnowledgeFilesResponse(KnowledgeResponse):
files: list[FileModel] files: list[FileMetadataResponse]
@router.get("/{id}", response_model=Optional[KnowledgeFilesResponse]) @router.get("/{id}", response_model=Optional[KnowledgeFilesResponse])
@ -251,7 +251,7 @@ async def get_knowledge_by_id(id: str, user=Depends(get_verified_user)):
): ):
file_ids = knowledge.data.get("file_ids", []) if knowledge.data else [] file_ids = knowledge.data.get("file_ids", []) if knowledge.data else []
files = Files.get_files_by_ids(file_ids) files = Files.get_file_metadatas_by_ids(file_ids)
return KnowledgeFilesResponse( return KnowledgeFilesResponse(
**knowledge.model_dump(), **knowledge.model_dump(),

View file

@ -11,7 +11,7 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { mobile, showSidebar, knowledge as _knowledge, config, user } from '$lib/stores'; import { mobile, showSidebar, knowledge as _knowledge, config, user } from '$lib/stores';
import { updateFileDataContentById, uploadFile, deleteFileById } from '$lib/apis/files'; import { updateFileDataContentById, uploadFile, deleteFileById, getFileById } from '$lib/apis/files';
import { import {
addFileToKnowledgeById, addFileToKnowledgeById,
getKnowledgeById, getKnowledgeById,
@ -84,12 +84,12 @@
let selectedFile = null; let selectedFile = null;
let selectedFileId = null; let selectedFileId = null;
let selectedFileContent = '';
$: if (selectedFileId) { $: if (selectedFileId) {
const file = (knowledge?.files ?? []).find((file) => file.id === selectedFileId); const file = (knowledge?.files ?? []).find((file) => file.id === selectedFileId);
if (file) { if (file) {
file.data = file.data ?? { content: '' }; handleFileClick(file);
selectedFile = file;
} else { } else {
selectedFile = null; selectedFile = null;
} }
@ -450,6 +450,20 @@
} }
}; };
const handleFileClick = async (file) => {
try {
selectedFile = file;
const response = await getFileById(localStorage.token, file.id);
if (response) {
selectedFileContent = response.data.content;
} else {
toast.error($i18n.t('No content found in file.'));
}
} catch (e) {
toast.error($i18n.t('Failed to load file content.'));
}
};
const onDragOver = (e) => { const onDragOver = (e) => {
e.preventDefault(); e.preventDefault();
@ -728,7 +742,7 @@
{#key selectedFile.id} {#key selectedFile.id}
<RichTextInput <RichTextInput
className="input-prose-sm" className="input-prose-sm"
bind:value={selectedFile.data.content} bind:value={selectedFileContent}
placeholder={$i18n.t('Add content here')} placeholder={$i18n.t('Add content here')}
preserveBreaks={true} preserveBreaks={true}
/> />
@ -786,7 +800,7 @@
{#key selectedFile.id} {#key selectedFile.id}
<RichTextInput <RichTextInput
className="input-prose-sm" className="input-prose-sm"
bind:value={selectedFile.data.content} bind:value={selectedFileContent}
placeholder={$i18n.t('Add content here')} placeholder={$i18n.t('Add content here')}
preserveBreaks={true} preserveBreaks={true}
/> />