add embeddings reindex progress to statusbar

web/src/components/Statusbar.tsx

@@ -1,3 +1,4 @@
+import { useEmbeddingsReindexProgress } from "@/api/ws";
 import {
   StatusBarMessagesContext,
   StatusMessage,
@@ -10,7 +11,7 @@ import { MdCircle } from "react-icons/md";
 import { Link } from "react-router-dom";
 
 export default function Statusbar() {
-  const { messages, addMessage, clearMessages } = useContext(
+  const { messages, addMessage, removeMessage, clearMessages } = useContext(
     StatusBarMessagesContext,
   )!;
 
@@ -41,6 +42,24 @@ export default function Statusbar() {
     });
   }, [potentialProblems, addMessage, clearMessages]);
 
+  const { payload: reindexState } = useEmbeddingsReindexProgress();
+
+  useEffect(() => {
+    if (reindexState) {
+      if (reindexState.status == "indexing") {
+        addMessage(
+          "embeddings-reindex",
+          `Reindexing embeddings (${Math.floor((reindexState.processed_objects / reindexState.total_objects) * 100)}% complete)`,
+          undefined,
+          "status",
+        );
+      }
+      if (reindexState.status === "completed") {
+        removeMessage("embeddings-reindex", "status");
+      }
+    }
+  }, [reindexState, addMessage, removeMessage]);
+
   return (
     <div className="absolute bottom-0 left-0 right-0 z-10 flex h-8 w-full items-center justify-between border-t border-secondary-highlight bg-background_alt px-4 dark:text-secondary-foreground">
       <div className="flex h-full items-center gap-2">