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:
@@ -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 (
|
||||
|
@@ -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}
|
||||
|
Reference in New Issue
Block a user