fix bugs with select

reorproject · Jul 10, 2024 · 062ab2f · 062ab2f
1 parent 7ae9fb5
commit 062ab2f
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 46 deletions.
diff --git a/src/components/Common/Select.tsx b/src/components/Common/Select.tsx
@@ -60,9 +60,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
   };
 
   return (
-    <div className="flex flex-end" ref={wrapperRef}>
+    <div className="flex flex-end w-full" ref={wrapperRef}>
       <div
-        className="flex justify-between items-center w-[192px] py-2 border border-gray-300 rounded-md cursor-pointer bg-dark-gray-c-eight hover:bg-dark-gray-c-ten"
+        className="flex justify-between w-full items-center  py-2 border border-gray-300 rounded-md cursor-pointer bg-dark-gray-c-eight hover:bg-dark-gray-c-ten"
         onClick={toggleDropdown}
       >
         {centerText ? <span></span> : null}
@@ -76,7 +76,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
       </div>
       {isOpen && (
         <div
-          className="absolute w-[192px] text-[13px] border text-gray-600 border-gray-300 rounded-md shadow-lg z-10 bg-white max-h-60 overflow-auto"
+          className="absolute  text-[13px] border text-gray-600 border-gray-300 rounded-md shadow-lg z-10 bg-white max-h-60 overflow-auto"
           style={{
             position: "fixed",
             top: "auto",

diff --git a/src/components/Flashcard/FlashcardReviewModal.tsx b/src/components/Flashcard/FlashcardReviewModal.tsx
@@ -54,12 +54,12 @@ const FlashcardReviewModal: React.FC<FlashcardReviewModalProps> = ({
 
   return (
     <ReorModal isOpen={isOpen} onClose={onClose}>
-      <div className="ml-6 mt-2 mb-6 w-[800px] h-full flex-col  ">
+      <div className="ml-6 mt-2 mb-6 mr-6 w-[800px] h-full flex-col  ">
         <h2 className="text-xl font-semibold mb-3 text-white">
           Flashcard Review Mode
         </h2>
 
-        <div className="py-2">
+        <div className="py-2 w-full mb-2">
           <CustomSelect
             options={flashcardFiles.map((file) => {
               return { label: file, value: file };
@@ -69,6 +69,7 @@ const FlashcardReviewModal: React.FC<FlashcardReviewModalProps> = ({
               setCurrentSelectedFlashcard(0);
               setSelectedFlashcardFile(value);
             }}
+            // className="w-full"
           />
         </div>
 

diff --git a/src/components/Settings/ChunkSizeSettings.tsx b/src/components/Settings/ChunkSizeSettings.tsx
@@ -43,14 +43,16 @@ const ChunkSizeSettings: React.FC<ChunkSizeSettingsProps> = ({ children }) => {
     <div className="flex justify-between items-center w-full gap-5 border-b-2 border-solid border-neutral-700 border-0 pb-2 pt-3">
       {children}
       {chunkSize && (
-        <CustomSelect
-          options={possibleChunkSizes.map((num) => ({
-            label: num.toString(),
-            value: num.toString(),
-          }))}
-          selectedValue={chunkSize?.toString()}
-          onChange={handleChangeOnChunkSizeSelect}
-        />
+        <div className="w-[140px]">
+          <CustomSelect
+            options={possibleChunkSizes.map((num) => ({
+              label: num.toString(),
+              value: num.toString(),
+            }))}
+            selectedValue={chunkSize?.toString()}
+            onChange={handleChangeOnChunkSizeSelect}
+          />
+        </div>
       )}
     </div>
   );

diff --git a/src/components/Settings/EmbeddingSettings/InitialEmbeddingSettings.tsx b/src/components/Settings/EmbeddingSettings/InitialEmbeddingSettings.tsx
@@ -94,17 +94,19 @@ const InitialEmbeddingModelSettings: React.FC<
         value={selectedModel}
         onChange={handleChangeOnModelSelect}
       /> */}
-      <CustomSelect
-        options={Object.keys(embeddingModels).map((model) => {
-          return { label: model, value: model };
-        })}
-        selectedValue={selectedModel}
-        onChange={handleChangeOnModelSelect}
-        addButton={{
-          label: "Attach a Custom Embedding Model",
-          onClick: () => setShowNewEmbeddingModelModal(true),
-        }}
-      />
+      <div className="w-[200px]">
+        <CustomSelect
+          options={Object.keys(embeddingModels).map((model) => {
+            return { label: model, value: model };
+          })}
+          selectedValue={selectedModel}
+          onChange={handleChangeOnModelSelect}
+          addButton={{
+            label: "Attach a Custom Embedding Model",
+            onClick: () => setShowNewEmbeddingModelModal(true),
+          }}
+        />
+      </div>
       <NewEmbeddingModelModalBothTypes
         isOpen={showNewEmbeddingModelModal}
         onClose={() => {

diff --git a/src/components/Settings/InitialSettingsSinglePage.tsx b/src/components/Settings/InitialSettingsSinglePage.tsx
@@ -33,7 +33,7 @@ const InitialSetupSinglePage: React.FC<OldInitialSettingsProps> = ({
       onClose={() => console.log("Not allowing a close for now")}
       hideCloseButton={true}
     >
-      <div className="max-w-[550px] mr-4 ml-2 py-3">
+      <div className="w-[620px] mr-4 ml-2 py-3">
         <div className="ml-2 mt-0 h-[450px]  ">
           <h2 className="text-2xl font-semibold mb-0 text-white text-center">
             Welcome to the Reor Project.

diff --git a/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx b/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx
@@ -18,26 +18,6 @@ const DefaultLLMSelector: React.FC<DefaultLLMSelectorProps> = ({
   defaultLLM,
   setDefaultLLM,
 }) => {
-  // const [llmConfigs, setLLMConfigs] = useState<LLMConfig[]>([]);
-  // const [defaultModel, setDefaultModel] = useState("");
-
-  // useEffect(() => {
-  //   const fetchAndUpdateModelConfigs = async () => {
-  //     try {
-  //       const fetchedLLMConfigs = await window.llm.getLLMConfigs();
-  //       setLLMConfigs(fetchedLLMConfigs);
-  //       const defaultModelName = await window.llm.getDefaultLLMName();
-  //       setDefaultModel(defaultModelName);
-  //       onModelChange(defaultModelName);
-  //     } catch (error) {
-  //       console.error("Failed to fetch model configurations:", error);
-  //       onModelError("Failed to fetch model configurations");
-  //     }
-  //   };
-
-  //   fetchAndUpdateModelConfigs();
-  // }, []);
-
   const handleDefaultModelChange = (selectedModel: string) => {
     setDefaultLLM(selectedModel);
     window.llm.setDefaultLLM(selectedModel);

diff --git a/src/components/Settings/LLMSettings/LLMSettingsContent.tsx b/src/components/Settings/LLMSettings/LLMSettingsContent.tsx
@@ -52,7 +52,7 @@ const LLMSettingsContent: React.FC<LLMSettingsContentProps> = ({
       {llmConfigs.length > 0 && (
         <div className="flex justify-between items-center w-full gap-5 border-b-2 border-solid border-neutral-700 border-0 pb-2">
           <h4 className="text-gray-200 text-center font-normal">Default LLM</h4>
-          <div className="mb-1">
+          <div className="mb-1 w-[140px]">
             <DefaultLLMSelector
               onModelChange={handleModelChange}
               llmConfigs={llmConfigs}