Fix react errors, max context tokens, and preset mobile view (#269)

* fix: react errors

* fix: max tokens issue

* fix: max tokens issue

Author: danny-avila

api/app/clients/chatgpt-client.js

@@ -23,13 +23,13 @@ const askClient = async ({
   };
 
   const azure = process.env.AZURE_OPENAI_API_KEY ? true : false;
-  const max_tokens = (model === "gpt-4") ? 7200 : (model === "gpt-4-32k") ? 31000 : 3071;
+  const maxContextTokens = model === 'gpt-4' ? 8191 : model === 'gpt-4-32k' ? 32767 : 4095; // 1 less than maximum
   const clientOptions = {
     reverseProxyUrl: process.env.OPENAI_REVERSE_PROXY || null,
     azure,
+    maxContextTokens,
     modelOptions: {
-      model: model,
-      max_tokens: max_tokens,
+      model,
       temperature,
       top_p,
       presence_penalty,
@@ -38,22 +38,22 @@ const askClient = async ({
     chatGptLabel,
     promptPrefix,
     proxy: process.env.PROXY || null,
-    debug: false
+    // debug: true
   };
 
   let apiKey = process.env.OPENAI_KEY;
 
   if (azure) {
     apiKey = process.env.AZURE_OPENAI_API_KEY;
-    clientOptions.reverseProxyUrl = genAzureEndpoint({ 
-      azureOpenAIApiInstanceName: process.env.AZURE_OPENAI_API_INSTANCE_NAME, 
-      azureOpenAIApiDeploymentName: process.env.AZURE_OPENAI_API_DEPLOYMENT_NAME, 
+    clientOptions.reverseProxyUrl = genAzureEndpoint({
+      azureOpenAIApiInstanceName: process.env.AZURE_OPENAI_API_INSTANCE_NAME,
+      azureOpenAIApiDeploymentName: process.env.AZURE_OPENAI_API_DEPLOYMENT_NAME,
       azureOpenAIApiVersion: process.env.AZURE_OPENAI_API_VERSION
     });
   }
 
   const client = new ChatGPTClient(apiKey, clientOptions, store);
-  
+
   const options = {
     onProgress,
     abortController,

client/src/components/Input/NewConversationMenu/index.jsx

@@ -24,6 +24,7 @@ import store from '~/store';
 
 export default function NewConversationMenu() {
   const [menuOpen, setMenuOpen] = useState(false);
+  const [showPresets, setShowPresets] = useState(true);
   const [presetModelVisible, setPresetModelVisible] = useState(false);
   const [preset, setPreset] = useState(false);
 
@@ -71,7 +72,10 @@ export default function NewConversationMenu() {
     if (endpoint) {
       const lastSelectedModel = JSON.parse(localStorage.getItem('lastSelectedModel')) || {};
       localStorage.setItem('lastConversationSetup', JSON.stringify(conversation));
-      localStorage.setItem('lastSelectedModel', JSON.stringify({ ...lastSelectedModel, [endpoint] : conversation.model }));
+      localStorage.setItem(
+        'lastSelectedModel',
+        JSON.stringify({ ...lastSelectedModel, [endpoint]: conversation.model })
+      );
     }
   }, [conversation]);
 
@@ -156,7 +160,12 @@ export default function NewConversationMenu() {
           <div className="mt-6 w-full" />
 
           <DropdownMenuLabel className="flex items-center dark:text-gray-300">
-            <span>Select a Preset</span>
+            <span
+              className="cursor-pointer"
+              onClick={() => setShowPresets(prev => !prev)}
+            >
+              {showPresets ? 'Hide ' : 'Show '} Presets
+            </span>
             <div className="flex-1" />
             <FileUpload onFileSelected={onFileSelected} />
             <Dialog>
@@ -188,18 +197,19 @@ export default function NewConversationMenu() {
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup
             onValueChange={onSelectPreset}
-            className="overflow-y-auto"
+            className="max-h-[150px] overflow-y-auto"
           >
-            {presets.length ? (
-              <PresetItems
-                presets={presets}
-                onSelect={onSelectPreset}
-                onChangePreset={onChangePreset}
-                onDeletePreset={onDeletePreset}
-              />
-            ) : (
-              <DropdownMenuLabel className="dark:text-gray-300">No preset yet.</DropdownMenuLabel>
-            )}
+            {showPresets &&
+              (presets.length ? (
+                <PresetItems
+                  presets={presets}
+                  onSelect={onSelectPreset}
+                  onChangePreset={onChangePreset}
+                  onDeletePreset={onDeletePreset}
+                />
+              ) : (
+                <DropdownMenuLabel className="dark:text-gray-300">No preset yet.</DropdownMenuLabel>
+              ))}
           </DropdownMenuRadioGroup>
         </DropdownMenuContent>
       </DropdownMenu>

client/src/components/Nav/NavLinks.jsx

@@ -24,16 +24,16 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
               open ? 'bg-gray-800' : ''
             )}
           >
-            <div class="-ml-0.5 h-5 w-5 flex-shrink-0">
-              <div class="relative flex">
+            <div className="-ml-0.5 h-5 w-5 flex-shrink-0">
+              <div className="relative flex">
                 <img
-                  class="rounded-sm"
+                  className="rounded-sm"
                   src={user?.avatar || `https://avatars.dicebear.com/api/initials/${user?.name}.svg`}
                   alt=""
                 />
               </div>
             </div>
-            <div class="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
+            <div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
               {user?.name || 'USER'}
             </div>
             <DotsIcon />
@@ -55,14 +55,14 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
               <Menu.Item>{({}) => <ExportConversation />}</Menu.Item>
 
               <div
-                class="my-1.5 h-px bg-white/20"
+                className="my-1.5 h-px bg-white/20"
                 role="none"
               ></div>
               <Menu.Item>{({}) => <DarkMode />}</Menu.Item>
               <Menu.Item>{({}) => <ClearConvos />}</Menu.Item>
 
               <div
-                class="my-1.5 h-px bg-white/20"
+                className="my-1.5 h-px bg-white/20"
                 role="none"
               ></div>
               <Menu.Item>

client/src/components/svg/DotsIcon.jsx

@@ -5,10 +5,10 @@ export default function DotsIcon() {
     <svg
       stroke="currentColor"
       fill="none"
-      stroke-width="2"
+      strokeWidth="2"
       viewBox="0 0 24 24"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className="h-4 w-4 flex-shrink-0 text-gray-500"
       height="1em"
       width="1em"
@@ -18,17 +18,17 @@ export default function DotsIcon() {
         cx="12"
         cy="12"
         r="1"
-      ></circle>
+      />
       <circle
         cx="19"
         cy="12"
         r="1"
-      ></circle>
+      />
       <circle
         cx="5"
         cy="12"
         r="1"
-      ></circle>
+      />
     </svg>
   );
 }