feat(ui): Add document list refresh to UploadDocumentsDialog

- Add callback pattern for document list refresh after upload
- Implement conditional refresh based on upload success
- Ensure backend state is updated after successful uploads
This commit is contained in:
yangdx
2025-04-01 14:55:27 +08:00
parent 0d93ed2f2c
commit 4372024ad6
2 changed files with 28 additions and 3 deletions

View File

@@ -1,4 +1,5 @@
import { useState, useCallback } from 'react'
import { useBackendState } from '@/stores/state'
import { FileRejection } from 'react-dropzone'
import Button from '@/components/ui/Button'
import {
@@ -17,12 +18,17 @@ import { uploadDocument } from '@/api/lightrag'
import { UploadIcon } from 'lucide-react'
import { useTranslation } from 'react-i18next'
export default function UploadDocumentsDialog() {
interface UploadDocumentsDialogProps {
onDocumentsUploaded?: () => Promise<void>
}
export default function UploadDocumentsDialog({ onDocumentsUploaded }: UploadDocumentsDialogProps) {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
const [isUploading, setIsUploading] = useState(false)
const [progresses, setProgresses] = useState<Record<string, number>>({})
const [fileErrors, setFileErrors] = useState<Record<string, string>>({})
const check = useBackendState.use.check()
const handleRejectedFiles = useCallback(
(rejectedFiles: FileRejection[]) => {
@@ -55,6 +61,7 @@ export default function UploadDocumentsDialog() {
const handleDocumentsUpload = useCallback(
async (filesToUpload: File[]) => {
setIsUploading(true)
let hasSuccessfulUpload = false
// Only clear errors for files that are being uploaded, keep errors for rejected files
setFileErrors(prev => {
@@ -101,6 +108,9 @@ export default function UploadDocumentsDialog() {
...prev,
[file.name]: result.message
}))
} else {
// Mark that we had at least one successful upload
hasSuccessfulUpload = true
}
} catch (err) {
console.error(`Upload failed for ${file.name}:`, err)
@@ -142,6 +152,21 @@ export default function UploadDocumentsDialog() {
} else {
toast.success(t('documentPanel.uploadDocuments.batch.success'), { id: toastId })
}
// Only update if at least one file was uploaded successfully
if (hasSuccessfulUpload) {
try {
// Update backend state
await check()
// Refresh document list
if (onDocumentsUploaded) {
await onDocumentsUploaded()
}
} catch (refreshErr) {
console.error('Error refreshing state:', refreshErr)
}
}
} catch (err) {
console.error('Unexpected error during upload:', err)
toast.error(t('documentPanel.uploadDocuments.generalError', { error: errorMessage(err) }), { id: toastId })
@@ -149,7 +174,7 @@ export default function UploadDocumentsDialog() {
setIsUploading(false)
}
},
[setIsUploading, setProgresses, setFileErrors, t]
[setIsUploading, setProgresses, setFileErrors, t, check, onDocumentsUploaded]
)
return (

View File

@@ -387,7 +387,7 @@ export default function DocumentManager() {
</div>
<div className="flex-1" />
<ClearDocumentsDialog onDocumentsCleared={fetchDocuments} />
<UploadDocumentsDialog />
<UploadDocumentsDialog onDocumentsUploaded={fetchDocuments} />
<PipelineStatusDialog
open={showPipelineStatus}
onOpenChange={setShowPipelineStatus}