Fix issue in pre-populating the default triad on the drpdown

nehabagdia · Mar 15, 2024 · Mar 11, 2024 · Mar 12, 2024 · Mar 12, 2024 · Mar 12, 2024
commit a61b366ed2596ada7cc1c2115efd0cb0a12043e2
diff --git a/frontend/src/components/settings/default-triad/DefaultTriad.jsx b/frontend/src/components/settings/default-triad/DefaultTriad.jsx
@@ -10,6 +10,7 @@ import { useAlertStore } from "../../../store/alert-store";
 import { useSessionStore } from "../../../store/session-store";
 import { CustomButton } from "../../widgets/custom-button/CustomButton.jsx";
 import SpaceWrapper from "../../widgets/space-wrapper/SpaceWrapper.jsx";
+import { SpinnerLoader } from "../../widgets/spinner-loader/SpinnerLoader.jsx";
 import "./DefaultTriad.css";
 
 const { Option } = Select;
@@ -21,64 +22,97 @@ function DefaultTriad() {
   const { setAlertDetails } = useAlertStore();
   const handleException = useExceptionHandler();
 
+  const [adapterList, setAdapterList] = useState([]);
   const [dropdownData, setDropdownData] = useState([]);
   const [selectedValues, setSelectedValues] = useState({});
   const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const desiredOrder = ["LLM", "EMBEDDING", "VECTOR_DB", "X2TEXT"];
 
   const labelMap = {
     LLM: "Default LLM",
-    EMBEDDING: "Default Embeddings",
+    EMBEDDING: "Default Embedding",
     VECTOR_DB: "Default Vector DB",
-    X2TEXT: "Default X2Text",
+    X2TEXT: "Default Text Extractor",
   };
 
-  const updateDropdownData = (data) => {
-    const updatedData = data.map((entry) => {
-      if (entry.is_default) {
+  function getKeyByValue(value) {
+    return Object.keys(labelMap).find((key) => labelMap[key] === value);
+  }
+
+  // Add current default to the dropdown value
+  const updateDropdownData = (defaultValues) => {
+    const updatedData = adapterList.map((entry) => {
+      if (defaultValues[entry.adapter_type] === entry?.id) {
         return {
           ...entry,
           adapter_name: `${entry.adapter_name} (current default)`,
         };
       }
       return entry;
     });
-
     // Update the state with the modified data
     setDropdownData(updatedData);
   };
 
-  const fetchData = async () => {
-    try {
-      const response = await axiosPrivate.get(
-        `/api/v1/unstract/${sessionDetails?.orgId}/adapter/`
-      );
-      updateDropdownData(response?.data);
-
-      const defaultAdaptorRes = await axiosPrivate.get(
-        `/api/v1/unstract/${sessionDetails?.orgId}/adapter/default_triad/`
-      );
-
-      const defaultValues = {};
-      defaultValues[labelMap.LLM] = defaultAdaptorRes.data?.default_llm_adapter;
-      defaultValues[labelMap.EMBEDDING] =
-        defaultAdaptorRes.data?.default_embedding_adapter;
-      defaultValues[labelMap.VECTOR_DB] =
-        defaultAdaptorRes.data?.default_vector_db_adapter;
-      defaultValues[labelMap.X2TEXT] =
-        defaultAdaptorRes.data?.default_x2text_adapter;
-
-      setSelectedValues(defaultValues);
-    } catch (error) {
-      setAlertDetails(handleException(error, "Failed to fetch Default Triads"));
-    }
+  const fetchData = () => {
+    const requestOptions = {
+      method: "GET",
+      url: `/api/v1/unstract/${sessionDetails?.orgId}/adapter/`,
+    };
+    axiosPrivate(requestOptions)
+      .then((res) => {
+        const data = res?.data;
+        setAdapterList(data);
+      })
+      .catch((err) => {
+        setAlertDetails(
+          handleException(err, "Failed to get the adapters list")
+        );
+      })
+      .finally(() => {});
+  };
+
+  const fetchDetaultTriads = () => {
+    setIsLoading(true);
+    const requestOptions = {
+      method: "GET",
+      url: `/api/v1/unstract/${sessionDetails?.orgId}/adapter/default_triad/`,
+    };
+    axiosPrivate(requestOptions)
+      .then((res) => {
+        const defaultAdaptors = res?.data;
+        const defaultValues = {};
+        defaultValues[getKeyByValue(labelMap.LLM)] =
+          defaultAdaptors?.default_llm_adapter;
+        defaultValues[getKeyByValue(labelMap.EMBEDDING)] =
+          defaultAdaptors?.default_embedding_adapter;
+        defaultValues[getKeyByValue(labelMap.VECTOR_DB)] =
+          defaultAdaptors?.default_vector_db_adapter;
+        defaultValues[getKeyByValue(labelMap.X2TEXT)] =
+          defaultAdaptors?.default_x2text_adapter;
+        setSelectedValues(defaultValues);
+        updateDropdownData(defaultValues);
+      })
+      .catch((err) => {
+        setAlertDetails(handleException(err, "Failed to fetch Default Triads"));
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
   };
 
   useEffect(() => {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    if (adapterList.length > 0) {
+      fetchDetaultTriads();
+    }
+  }, [adapterList]);
+
   const handleDropdownChange = (adapterType, selectedValue) => {
     setSelectedValues((prevValues) => ({
       ...prevValues,
@@ -89,34 +123,44 @@ function DefaultTriad() {
 
   // Handler for form submission
   const handleSubmit = async () => {
-    try {
-      const body = {
-        llm_default: selectedValues[desiredOrder[0]],
-        embedding_default: selectedValues[desiredOrder[1]],
-        vector_db_default: selectedValues[desiredOrder[2]],
-        x2text_default: selectedValues[desiredOrder[3]],
-      };
-
-      await axiosPrivate.post(
-        `/api/v1/unstract/${sessionDetails?.orgId}/adapter/default_triad/`,
-        body,
-        {
-          headers: {
-            "X-CSRFToken": sessionDetails?.csrfToken,
-            "Content-Type": "application/json",
-          },
-        }
-      );
-
-      setAlertDetails({
-        type: "success",
-        content: "Default triad setting saved successfully",
-      });
-      fetchData();
-      setIsSubmitEnabled(false);
-    } catch (error) {
-      setAlertDetails(handleException(error, "Failed to generate the key"));
-    }
+    let body = {
+      llm_default: selectedValues[getKeyByValue(labelMap.LLM)],
+      embedding_default: selectedValues[getKeyByValue(labelMap.EMBEDDING)],
+      vector_db_default: selectedValues[getKeyByValue(labelMap.VECTOR_DB)],
+      x2text_default: selectedValues[getKeyByValue(labelMap.X2TEXT)],
+    };
+    // Filter out null or blank values
+    body = Object.fromEntries(
+      Object.entries(body).filter(
+        ([key, value]) => value !== null && value !== ""
+      )
+    );
+
+    const header = {
+      "X-CSRFToken": sessionDetails?.csrfToken,
+      "Content-Type": "application/json",
+    };
+    const requestOptions = {
+      method: "POST",
+      url: `/api/v1/unstract/${sessionDetails?.orgId}/adapter/default_triad/`,
+      headers: header,
+      data: body,
+    };
+    axiosPrivate(requestOptions)
+      .then((res) => {
+        setAlertDetails({
+          type: "success",
+          content: "Default triad setting saved successfully",
+        });
+        fetchData();
+        setIsSubmitEnabled(false);
+      })
+      .catch((err) => {
+        setAlertDetails(
+          handleException(err, "Failed to update Default Triads")
+        );
+      })
+      .finally(() => {});
   };
 
   return (
@@ -131,37 +175,41 @@ function DefaultTriad() {
       </div>
       <div className="plt-set-layout">
         <IslandLayout>
-          <div className="plt-set-layout-2 form-width">
-            {desiredOrder.map((type) => (
-              <SpaceWrapper key={type}>
-                <Typography className="triad-select">
-                  {labelMap[type]}
-                </Typography>
-                <Select
-                  placeholder={`Select ${labelMap[type]}`}
-                  value={selectedValues[type] || undefined}
-                  onChange={(value) => handleDropdownChange(type, value)}
-                  style={{ width: "100%" }}
-                >
-                  {dropdownData
-                    .filter((data) => data.adapter_type === type)
-                    .map((data) => (
-                      <Option key={data.id} value={data.id}>
-                        {data.adapter_name}
-                      </Option>
-                    ))}
-                </Select>
-              </SpaceWrapper>
-            ))}
-            <CustomButton
-              type="primary"
-              className="triad-select"
-              onClick={handleSubmit}
-              disabled={!isSubmitEnabled}
-            >
-              Save
-            </CustomButton>
-          </div>
+          {isLoading ? (
+            <SpinnerLoader />
+          ) : (
+            <div className="plt-set-layout-2 form-width">
+              {desiredOrder.map((type) => (
+                <SpaceWrapper key={type}>
+                  <Typography className="triad-select">
+                    {labelMap[type]}
+                  </Typography>
+                  <Select
+                    placeholder={`Select ${labelMap[type]}`}
+                    value={selectedValues[type] || undefined}
+                    onChange={(value) => handleDropdownChange(type, value)}
+                    style={{ width: "100%" }}
+                  >
+                    {dropdownData
+                      .filter((data) => data.adapter_type === type)
+                      .map((data) => (
+                        <Option key={data.id} value={data.id}>
+                          {data.adapter_name}
+                        </Option>
+                      ))}
+                  </Select>
+                </SpaceWrapper>
+              ))}
+              <CustomButton
+                type="primary"
+                className="triad-select"
+                onClick={handleSubmit}
+                disabled={!isSubmitEnabled}
+              >
+                Save
+              </CustomButton>
+            </div>
+          )}
         </IslandLayout>
       </div>
     </>