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:
@@ -1,6 +1,70 @@
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import { useState, useEffect, useRef, useCallback, type ReactNode } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { useImport } from '../context/ImportContext';
|
||||
|
||||
function ImportProgressBar() {
|
||||
const { importState, clearImport } = useImport();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const hideTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
|
||||
const isActive = importState.active;
|
||||
const isDone = importState.stage === 'done';
|
||||
const isError = importState.stage === 'error';
|
||||
const showBar = isActive || isDone || isError;
|
||||
|
||||
useEffect(() => {
|
||||
if (showBar) {
|
||||
setVisible(true);
|
||||
if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
|
||||
}
|
||||
if (isDone || isError) {
|
||||
hideTimerRef.current = setTimeout(() => {
|
||||
setVisible(false);
|
||||
clearImport();
|
||||
}, 10_000);
|
||||
}
|
||||
return () => {
|
||||
if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
|
||||
};
|
||||
}, [showBar, isDone, isError, clearImport]);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
|
||||
setVisible(false);
|
||||
clearImport();
|
||||
}, [clearImport]);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
const barClass = isError
|
||||
? 'import-progress-bar import-progress-bar--error'
|
||||
: isDone
|
||||
? 'import-progress-bar import-progress-bar--done'
|
||||
: 'import-progress-bar';
|
||||
|
||||
const labelText = isError
|
||||
? `Ошибка импорта: ${importState.message}`
|
||||
: isDone && importState.result
|
||||
? `Импорт завершён — ${importState.result.imported} операций`
|
||||
: `${importState.message} ${importState.progress}%`;
|
||||
|
||||
return (
|
||||
<div className={barClass}>
|
||||
<div
|
||||
className="import-progress-bar__fill"
|
||||
style={{ width: `${isDone ? 100 : importState.progress}%` }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={`import-progress-label ${isDone || isError ? 'import-progress-label--clickable' : ''}`}
|
||||
onClick={isDone || isError ? handleClick : undefined}
|
||||
>
|
||||
{labelText}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Layout({ children }: { children: ReactNode }) {
|
||||
const { user, logout } = useAuth();
|
||||
@@ -10,6 +74,8 @@ export function Layout({ children }: { children: ReactNode }) {
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<ImportProgressBar />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="burger-btn"
|
||||
|
||||
Reference in New Issue
Block a user