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.
2026-03-14 16:18:31 +03:00
parent 627706228b
commit 1d7fbea9ef
9 changed files with 680 additions and 70 deletions
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -1058,6 +1058,152 @@ textarea {
  font-weight: 500;
 }

+/* Import progress bar in modal */
+.import-progress-modal {
+  padding: 20px 0;
+}
+
+.import-progress-modal-bar {
+  height: 8px;
+  background: var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.import-progress-modal-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary), #6366f1);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.import-progress-modal-fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.3) 50%,
+    transparent 100%
+  );
+  animation: shimmer 1.5s infinite;
+}
+
+.import-progress-modal-label {
+  text-align: center;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+}
+
+/* ================================================================
+   Import progress bar (fixed top, Layout)
+   ================================================================ */
+
+.import-progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 300;
+  height: 4px;
+  background: var(--color-border);
+}
+
+.import-progress-bar--done {
+  background: var(--color-success-light);
+}
+
+.import-progress-bar--error {
+  background: var(--color-danger-light);
+}
+
+.import-progress-bar__fill {
+  height: 100%;
+  border-radius: 0 2px 2px 0;
+  transition: width 0.3s ease;
+  position: relative;
+  background: linear-gradient(90deg, var(--color-primary), #6366f1);
+}
+
+.import-progress-bar__fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  );
+  animation: shimmer 1.5s infinite;
+}
+
+.import-progress-bar--done .import-progress-bar__fill {
+  background: var(--color-success);
+}
+
+.import-progress-bar--done .import-progress-bar__fill::after {
+  animation: none;
+}
+
+.import-progress-bar--error .import-progress-bar__fill {
+  background: var(--color-danger);
+  width: 100% !important;
+}
+
+.import-progress-bar--error .import-progress-bar__fill::after {
+  animation: none;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.import-progress-label {
+  position: fixed;
+  top: 6px;
+  right: 16px;
+  z-index: 301;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  padding: 4px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  box-shadow: var(--shadow-sm);
+  white-space: nowrap;
+  cursor: default;
+  font-family: inherit;
+}
+
+.import-progress-label--clickable {
+  cursor: pointer;
+}
+
+.import-progress-label--clickable:hover {
+  background: var(--color-bg);
+  border-color: var(--color-border-hover);
+}
+
+.import-progress-bar--done .import-progress-label {
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.import-progress-bar--error .import-progress-label {
+  color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
 /* ================================================================
   Tabs
   ================================================================ */