feat: stream PDF import progress via SSE with global progress bar
Replace the synchronous PDF import with Server-Sent Events streaming between the backend (LLM) and the browser. The user can now close the import modal and continue working while the conversion runs — a fixed progress bar in the Layout shows real-time stage and percentage.
This commit is contained in:
105
frontend/src/context/ImportContext.tsx
Normal file
105
frontend/src/context/ImportContext.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useCallback,
|
||||
useRef,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
import type { ImportStatementResponse } from '@family-budget/shared';
|
||||
import { importStatementStream, type SseEvent } from '../api/import';
|
||||
|
||||
export interface ImportProgress {
|
||||
active: boolean;
|
||||
stage: string;
|
||||
progress: number;
|
||||
message: string;
|
||||
result?: ImportStatementResponse;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface ImportContextValue {
|
||||
importState: ImportProgress;
|
||||
startImport: (file: File) => void;
|
||||
clearImport: () => void;
|
||||
}
|
||||
|
||||
const INITIAL: ImportProgress = {
|
||||
active: false,
|
||||
stage: '',
|
||||
progress: 0,
|
||||
message: '',
|
||||
};
|
||||
|
||||
const ImportContext = createContext<ImportContextValue | null>(null);
|
||||
|
||||
export function ImportProvider({ children }: { children: ReactNode }) {
|
||||
const [importState, setImportState] = useState<ImportProgress>(INITIAL);
|
||||
const runningRef = useRef(false);
|
||||
|
||||
const startImport = useCallback((file: File) => {
|
||||
if (runningRef.current) return;
|
||||
runningRef.current = true;
|
||||
|
||||
setImportState({
|
||||
active: true,
|
||||
stage: 'pdf',
|
||||
progress: 0,
|
||||
message: 'Загрузка файла...',
|
||||
});
|
||||
|
||||
importStatementStream(file, (event: SseEvent) => {
|
||||
if (event.stage === 'done') {
|
||||
setImportState({
|
||||
active: false,
|
||||
stage: 'done',
|
||||
progress: 100,
|
||||
message: 'Импорт завершён',
|
||||
result: event.result,
|
||||
});
|
||||
runningRef.current = false;
|
||||
} else if (event.stage === 'error') {
|
||||
setImportState({
|
||||
active: false,
|
||||
stage: 'error',
|
||||
progress: 0,
|
||||
message: event.message,
|
||||
error: event.message,
|
||||
});
|
||||
runningRef.current = false;
|
||||
} else {
|
||||
setImportState({
|
||||
active: true,
|
||||
stage: event.stage,
|
||||
progress: event.progress,
|
||||
message: event.message,
|
||||
});
|
||||
}
|
||||
}).catch((err) => {
|
||||
setImportState({
|
||||
active: false,
|
||||
stage: 'error',
|
||||
progress: 0,
|
||||
message: err instanceof Error ? err.message : 'Ошибка импорта',
|
||||
error: err instanceof Error ? err.message : 'Ошибка импорта',
|
||||
});
|
||||
runningRef.current = false;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const clearImport = useCallback(() => {
|
||||
setImportState(INITIAL);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ImportContext.Provider value={{ importState, startImport, clearImport }}>
|
||||
{children}
|
||||
</ImportContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useImport(): ImportContextValue {
|
||||
const ctx = useContext(ImportContext);
|
||||
if (!ctx) throw new Error('useImport must be used within ImportProvider');
|
||||
return ctx;
|
||||
}
|
||||
Reference in New Issue
Block a user