Adding messages to embedding updates (#229)

* WIP added toast for embedding updates

* Update and retain new change state

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx

@@ -6,6 +6,7 @@ import { useParams } from "react-router-dom";
 import Directory from "./Directory";
 import ConfirmationModal from "./ConfirmationModal";
 import { AlertTriangle } from "react-feather";
+import showToast from "../../../../utils/toast";
 
 export default function DocumentSettings({ workspace }) {
   const { slug } = useParams();
@@ -18,22 +19,27 @@ export default function DocumentSettings({ workspace }) {
   const [hasFiles, setHasFiles] = useState(true);
   const [canDelete, setCanDelete] = useState(false);
 
+  async function fetchKeys(refetchWorkspace = false) {
+    const localFiles = await System.localFiles();
+    const currentWorkspace = refetchWorkspace
+      ? await Workspace.bySlug(slug)
+      : workspace;
+    const originalDocs =
+      currentWorkspace.documents.map((doc) => doc.docpath) || [];
+    const hasAnyFiles = localFiles.items.some(
+      (folder) => folder?.items?.length > 0
+    );
+
+    const canDelete = await System.getCanDeleteWorkspaces();
+    setCanDelete(canDelete);
+    setDirectories(localFiles);
+    setOriginalDocuments([...originalDocs]);
+    setSelectFiles([...originalDocs]);
+    setHasFiles(hasAnyFiles);
+    setLoading(false);
+  }
+
   useEffect(() => {
-    async function fetchKeys() {
-      const localFiles = await System.localFiles();
-      const originalDocs = workspace.documents.map((doc) => doc.docpath) || [];
-      const hasAnyFiles = localFiles.items.some(
-        (folder) => folder?.items?.length > 0
-      );
-
-      const canDelete = await System.getCanDeleteWorkspaces();
-      setCanDelete(canDelete);
-      setDirectories(localFiles);
-      setOriginalDocuments([...originalDocs]);
-      setSelectFiles([...originalDocs]);
-      setHasFiles(hasAnyFiles);
-      setLoading(false);
-    }
     fetchKeys();
   }, []);
 
@@ -82,11 +88,28 @@ export default function DocumentSettings({ workspace }) {
   const updateWorkspace = async (e) => {
     e.preventDefault();
     setSaving(true);
+    showToast("Updating workspace...", "info", { autoClose: false });
     setShowConfirmation(false);
+
     const changes = docChanges();
-    await Workspace.modifyEmbeddings(workspace.slug, changes);
+    await Workspace.modifyEmbeddings(workspace.slug, changes)
+      .then((res) => {
+        if (res && res.workspace) {
+          showToast("Workspace updated successfully.", "success", {
+            clear: true,
+          });
+        } else {
+          showToast("Workspace update failed.", "error", { clear: true });
+        }
+      })
+      .catch((error) => {
+        showToast(`Workspace update failed: ${error}`, "error", {
+          clear: true,
+        });
+      });
+
     setSaving(false);
-    window.location.reload();
+    await fetchKeys(true);
   };
 
   const isSelected = (filepath) => {

frontend/src/utils/toast.js

 import { toast } from "react-toastify";
 import usePrefersDarkMode from "../hooks/usePrefersDarkMode";
 
-const showToast = (message, type = "default") => {
+// Additional Configs (opts)
+// You can also pass valid ReactToast params to override the defaults.
+// clear: false, // Will dismiss all visible toasts before rendering next toast
+const showToast = (message, type = "default", opts = {}) => {
   const prefersDarkMode = usePrefersDarkMode();
   const options = {
     position: "bottom-center",
@@ -11,8 +14,11 @@ const showToast = (message, type = "default") => {
     pauseOnHover: true,
     draggable: true,
     theme: prefersDarkMode ? "dark" : "light",
+    ...opts,
   };
 
+  if (opts?.clear === true) toast.dismiss();
+
   switch (type) {
     case "success":
       toast.success(message, options);