Elevate selectedDocs to parent component to maintain state and avoid and reloading

src/renderer/components/Experiment/Generate/GenerateModal.tsx

@@ -71,6 +71,7 @@ export default function GenerateModal({
   const [hasDatasetKey, setHasDatasetKey] = useState(false);
   const [hasDocumentsKey, setHasDocumentsKey] = useState(false);
   const [hasContextKey, setHasContextKey] = useState(false);
+  const [selectedDocs, setSelectedDocs] = useState([]);
   const [nameInput, setNameInput] = useState('');
   const [currentTab, setCurrentTab] = useState(0);
   const [contextInput, setContextInput] = useState('');
@@ -185,6 +186,8 @@ export default function GenerateModal({
                 if (!nameInput && evalConfig?.name.length > 0) {
                   setNameInput(evalConfig.name);
                 }
+
+                config.docs? setSelectedDocs(config.docs) : [];
               }
               // if (nameInput !== '' && evalConfig?.name) {
               //   setNameInput(evalConfig?.name);
@@ -204,6 +207,7 @@ export default function GenerateModal({
           try {
             parsedData = JSON.parse(data); //Parsing data for easy access to parameters}
             // Set config as a JSON object with keys of the parameters and values of the default values
+            setSelectedDocs([]);
             let tempconfig: { [key: string]: any } = {};
             if (parsedData && parsedData.parameters) {
               tempconfig = Object.fromEntries(
@@ -328,7 +332,9 @@ export default function GenerateModal({
           <PickADocumentMenu
             experimentInfo={experimentInfo}
             showFoldersOnly={false}
-            defaultValue={config.docs? config.docs : []}
+            selected={selectedDocs}
+            onChange={setSelectedDocs}
+            // defaultValue={config.docs? config.docs : []}
             name="docs"
           />
           <FormHelperText>Select documents to upload</FormHelperText>
@@ -337,6 +343,7 @@ export default function GenerateModal({
     );
   }
 
+
   function ContextTab({ contextInput, setContextInput }) {
     return (
       <Stack spacing={2}>

src/renderer/components/Experiment/Rag/PickADocumentMenu.tsx

@@ -7,7 +7,8 @@ const fetcher = (url) => fetch(url).then((res) => res.json());
 export default function PickADocumentMenu({
   name,
   experimentInfo,
-  defaultValue = [],
+  selected,
+  onChange,
   showFoldersOnly = false,
 }) {
   const {
@@ -16,16 +17,15 @@ export default function PickADocumentMenu({
     mutate,
   } = useSWR(chatAPI.Endpoints.Documents.List(experimentInfo?.id, ''), fetcher);
 
-  const [selected, setSelected] = useState([]);
 
-  useEffect(() => {
-    setSelected(defaultValue || []);
-  }, [defaultValue]);
+  // useEffect(() => {
+  //   setSelected(defaultValue || []);
+  // }, [defaultValue]);
 
 
   function handleChange(event, newValue) {
     console.log(newValue);
-    setSelected(newValue);
+    onChange(newValue);
   }
 
   return (