From 2a459dcb33dd56f21a78800b7bf487e7d957a383 Mon Sep 17 00:00:00 2001
From: Andrew O'Reilly <andrworlly@gmail.com>
Date: Thu, 20 Jul 2023 17:41:47 -0400
Subject: [PATCH 1/2] Add "advanced model" dropdown expander to ModelSelector

---
 src/components/ConfigMenu/ConfigMenu.tsx | 22 ++++++++++++++++++++--
 src/constants/chat.ts                    |  6 +++---
 src/types/chat.ts                        |  5 +----
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/ConfigMenu/ConfigMenu.tsx b/src/components/ConfigMenu/ConfigMenu.tsx
index 52f5c396a..2d3655d08 100644
--- a/src/components/ConfigMenu/ConfigMenu.tsx
+++ b/src/components/ConfigMenu/ConfigMenu.tsx
@@ -79,6 +79,16 @@ export const ModelSelector = ({
   _setModel: React.Dispatch<React.SetStateAction<ModelOptions>>;
 }) => {
   const [dropDown, setDropDown] = useState<boolean>(false);
+  const [advancedModels, setAdvancedModels] = useState<boolean>(false);
+
+  const filterModelOptions = () => {
+    if (advancedModels) {
+      return modelOptions;
+    } else {
+      return modelOptions.slice(0,modelOptions.indexOf('gpt-4-32k')+1);
+    }
+  };
+  const filteredModelOptions = filterModelOptions();
 
   return (
     <div className='mb-4'>
@@ -101,7 +111,7 @@ export const ModelSelector = ({
           className='text-sm text-gray-700 dark:text-gray-200 p-0 m-0'
           aria-labelledby='dropdownDefaultButton'
         >
-          {modelOptions.map((m) => (
+          {filteredModelOptions.map((m,i) => (
             <li
               className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer'
               onClick={() => {
@@ -112,7 +122,15 @@ export const ModelSelector = ({
             >
               {m}
             </li>
-          ))}
+            ))}
+            <li
+              className='px-4 py-0 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer text-gray-600 dark:text-gray-300 flex justify-center items-center'
+              onClick={() => setAdvancedModels(!advancedModels)}
+            >
+              <span
+                className={'ml-2'}
+              >{advancedModels ? '▲' : '▼'}</span>
+            </li>
         </ul>
       </div>
     </div>
diff --git a/src/constants/chat.ts b/src/constants/chat.ts
index 9676de0b3..e8e0db363 100644
--- a/src/constants/chat.ts
+++ b/src/constants/chat.ts
@@ -22,9 +22,9 @@ export const modelOptions: ModelOptions[] = [
   'gpt-3.5-turbo-16k',
   'gpt-4',
   'gpt-4-32k',
-  // 'gpt-3.5-turbo-0301',
-  // 'gpt-4-0314',
-  // 'gpt-4-32k-0314',
+  'gpt-3.5-turbo-0301',
+  'gpt-4-0314',
+  'gpt-4-32k-0314',
 ];
 
 export const defaultModel = 'gpt-3.5-turbo';
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 1b957e3d6..d5d22c8c4 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -49,10 +49,7 @@ export interface Folder {
   color?: string;
 }
 
-export type ModelOptions = 'gpt-4' | 'gpt-4-32k' | 'gpt-3.5-turbo' | 'gpt-3.5-turbo-16k' ;
-// | 'gpt-3.5-turbo-0301';
-// | 'gpt-4-0314'
-// | 'gpt-4-32k-0314'
+export type ModelOptions = 'gpt-4' | 'gpt-4-32k' | 'gpt-3.5-turbo' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-0301'| 'gpt-4-0314' | 'gpt-4-32k-0314';
 
 export type TotalTokenUsed = {
   [model in ModelOptions]?: {

From 6d1a3de981b13b12905e5ae2fe9450c4e28238a2 Mon Sep 17 00:00:00 2001
From: Andrew O'Reilly <andrworlly@gmail.com>
Date: Thu, 20 Jul 2023 17:45:56 -0400
Subject: [PATCH 2/2] fix overlapping hover highlighting; darken advanced
 models text

---
 src/components/ConfigMenu/ConfigMenu.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ConfigMenu/ConfigMenu.tsx b/src/components/ConfigMenu/ConfigMenu.tsx
index 2d3655d08..8d096e709 100644
--- a/src/components/ConfigMenu/ConfigMenu.tsx
+++ b/src/components/ConfigMenu/ConfigMenu.tsx
@@ -113,7 +113,7 @@ export const ModelSelector = ({
         >
           {filteredModelOptions.map((m,i) => (
             <li
-              className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer'
+            className={`px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer${i === 0 ? " rounded-t-lg" : ""}${i > modelOptions.indexOf('gpt-4-32k') ? "text-gray-600 dark:text-gray-400" : ""}`}
               onClick={() => {
                 _setModel(m);
                 setDropDown(false);
@@ -124,11 +124,15 @@ export const ModelSelector = ({
             </li>
             ))}
             <li
-              className='px-4 py-0 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer text-gray-600 dark:text-gray-300 flex justify-center items-center'
+              className='px-4 py-0 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer text-gray-600 dark:text-gray-300 flex justify-center items-center rounded-b-lg'
               onClick={() => setAdvancedModels(!advancedModels)}
             >
               <span
-                className={'ml-2'}
+                className={`ml-2${
+                  advancedModels
+                    ? "text-gray-700 dark:text-gray-300"
+                    : "text-gray-500 dark:text-gray-500"
+                }`}
               >{advancedModels ? '▲' : '▼'}</span>
             </li>
         </ul>