initial work on custom select component

src/components/Generic/Select.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+
+type CustomSelectProps = {
+  options: string[];
+  value: string;
+  onChange: (value: string) => void;
+};
+
+const CustomSelect: React.FC<CustomSelectProps> = ({
+  options,
+  value,
+  onChange,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const toggleDropdown = () => setIsOpen(!isOpen);
+  const handleOptionClick = (value: string) => {
+    onChange(value);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="relative">
+      <div
+        className="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-200 cursor-pointer"
+        onClick={toggleDropdown}
+      >
+        {value}
+      </div>
+      {isOpen && (
+        <div className="absolute w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg z-10">
+          {options.map((option, index) => (
+            <div
+              key={index}
+              className="px-3 py-2 hover:bg-gray-100 cursor-pointer"
+              onClick={() => handleOptionClick(option)}
+            >
+              {option}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomSelect;

src/components/Settings/InitialSettingsPage.tsx

@@ -102,9 +102,6 @@ const DirectoryPicker: React.FC<Props> = ({ onDirectorySelected }) => {
             disabled
             placeholder="LLM Model Name"
           />
-          <p className="mt-2 text-xs text-gray-100">
-            *Models are currently pre-set (custom models are coming soon).
-          </p>
           <h4 className="font-semibold mb-2 text-white">Open AI Key</h4>
           <input
             type="text"

src/components/Settings/LLMSettings.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, ChangeEvent } from "react";
 import { AIModelConfig } from "electron/main/Store/storeConfig";
+import CustomSelect from "../Generic/Select";
 
 const AIModelManager: React.FC = () => {
   const [modelConfigs, setModelConfigs] = useState<
@@ -51,16 +52,48 @@ const AIModelManager: React.FC = () => {
     });
   };
 
-  const handleDefaultModelChange = (
-    e: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    const selectedModel = e.target.value;
+  const handleDefaultModelChange = (selectedModel: string) => {
+    // const selectedModel = e.target.value;
     setDefaultModel(selectedModel);
     window.electronStore.setDefaultAIModel(selectedModel);
   };
+  const modelNames = Object.keys(modelConfigs);
 
   return (
     <div>
+      <h4 className="font-semibold mb-2 text-white">LLM</h4>
+      {/* <input
+        type="text"
+        className="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-200 cursor-not-allowed"
+        value={"GPT-3.5-turbo"}
+        disabled
+        placeholder="LLM Model"
+      /> */}
+
+      <CustomSelect
+        options={modelNames}
+        value={defaultModel}
+        onChange={handleDefaultModelChange}
+      />
+      {/* <select
+        value={defaultModel}
+        onChange={handleDefaultModelChange}
+        className="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-200 cursor-not-allowed"
+      >
+        {Object.entries(modelConfigs).map(([modelName, config]) => (
+          <option key={modelName} value={modelName}>
+            {modelName}
+          </option>
+        ))}
+      </select> */}
+
+      {/* <select value={defaultModel} onChange={handleDefaultModelChange}>
+        {Object.entries(modelConfigs).map(([modelName, config]) => (
+          <option key={modelName} value={modelName}>
+            {modelName}
+          </option>
+        ))}
+      </select> */}
       {/* <h2>Configure LLM</h2> */}
       <input
         type="text"
@@ -88,13 +121,6 @@ const AIModelManager: React.FC = () => {
 
       {/* Default Model Dropdown */}
       {/* <h3>Default AI Model</h3> */}
-      <select value={defaultModel} onChange={handleDefaultModelChange}>
-        {Object.entries(modelConfigs).map(([modelName, config]) => (
-          <option key={modelName} value={modelName}>
-            {modelName}
-          </option>
-        ))}
-      </select>
     </div>
   );
 };

src/components/Settings/Settings.tsx

@@ -40,14 +40,17 @@ const SettingsModal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
           disabled
           placeholder="Embedding Model"
         />
-        <h4 className="font-semibold mb-2 text-white">LLM</h4>
+        {/* <h4 className="font-semibold mb-2 text-white">LLM</h4>
         <input
           type="text"
           className="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-200 cursor-not-allowed"
           value={"GPT-3.5-turbo"}
           disabled
           placeholder="LLM Model"
-        />
+        /> */}
+        <div className="mt-2">
+          <AIModelManager />
+        </div>
         <h4 className="font-semibold mb-2 text-white">Open AI Key</h4>
         <input
           type="text"
@@ -57,19 +60,14 @@ const SettingsModal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
           onKeyDown={handleKeyPress}
           placeholder="Open AI API Key"
         />
-        <div className="mt-2">
-          <AIModelManager />
-        </div>
+
         <Button
           className="bg-slate-700 mt-4 border-none h-10 hover:bg-slate-900 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
           onClick={handleSave}
           placeholder=""
         >
           Save
         </Button>
-        <p className="text-xs text-white">
-          *Models are currently pre-set. Custom models are coming very soon :)
-        </p>
       </div>
     </Modal>
   );