refactor: code clean up

client/src/components/Endpoints/BingAI/Settings.jsx

@@ -57,7 +57,9 @@ function Settings(props) {
                 'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2'
               )}
             />
-            <small className='mb-5'>{'Token count: 1200 (work in progress)'}</small>
+            <small className="mb-5 text-black dark:text-white">
+              {'Token count: 1200 (work in progress)'}
+            </small>
           </div>
         </div>
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">

client/src/components/Endpoints/EditPresetDialog.jsx

@@ -10,12 +10,11 @@ import Dropdown from '../ui/Dropdown';
 import { cn } from '~/utils/';
 import cleanupPreset from '~/utils/cleanupPreset';
 
-import OpenAISettings from './OpenAI/Settings';
-import BingAISettings from './BingAI/Settings.jsx';
+import Settings from './Settings';
 
 import store from '~/store';
 
-const EditPresetDialog = ({ open, onOpenChange, preset: _preset }) => {
+const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
   //   const [title, setTitle] = useState('My Preset');
   const [preset, setPreset] = useState(_preset);
   const setPresets = useSetRecoilState(store.presets);
@@ -31,43 +30,6 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset }) => {
     }));
   };
 
-  const renderSettings = () => {
-    const { endpoint } = preset || {};
-
-    if (endpoint === 'openAI')
-      return (
-        <OpenAISettings
-          model={preset?.model}
-          setModel={setOption('model')}
-          chatGptLabel={preset?.chatGptLabel}
-          setChatGptLabel={setOption('chatGptLabel')}
-          promptPrefix={preset?.promptPrefix}
-          setPromptPrefix={setOption('promptPrefix')}
-          temperature={preset?.temperature}
-          setTemperature={setOption('temperature')}
-          topP={preset?.top_p}
-          setTopP={setOption('top_p')}
-          freqP={preset?.presence_penalty}
-          setFreqP={setOption('presence_penalty')}
-          presP={preset?.frequency_penalty}
-          setPresP={setOption('frequency_penalty')}
-        />
-      );
-    else if (endpoint === 'bingAI')
-      return (
-        <BingAISettings
-          readonly={true}
-          context={preset?.context}
-          setContext={setOption('context')}
-          systemMessage={preset?.systemMessage}
-          setSystemMessage={setOption('systemMessage')}
-          jailbreak={preset?.jailbreak}
-          setJailbreak={setOption('jailbreak')}
-        />
-      );
-    else return null;
-  };
-
   const defaultTextProps =
     'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
 
@@ -100,7 +62,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset }) => {
       onOpenChange={onOpenChange}
     >
       <DialogTemplate
-        title="Edit Preset"
+        title={`${title || 'Edit Preset'} - ${preset?.title}`}
         className="max-w-full sm:max-w-4xl"
         main={
           <div className="flex w-full flex-col items-center gap-2">
@@ -144,7 +106,12 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset }) => {
               </div>
             </div>
             <div className="my-4 w-full border-t border-gray-300 dark:border-gray-500" />
-            <div className="w-full p-0">{renderSettings()}</div>
+            <div className="w-full p-0">
+              <Settings
+                preset={preset}
+                setOption={setOption}
+              />
+            </div>
           </div>
         }
         buttons={

client/src/components/Endpoints/EndpointOptionsDialog.jsx

@@ -1,20 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { useSetRecoilState, useRecoilValue } from 'recoil';
-import axios from 'axios';
 import exportFromJSON from 'export-from-json';
 import DialogTemplate from '../ui/DialogTemplate.jsx';
-import { Dialog, DialogClose, DialogButton } from '../ui/Dialog.tsx';
-import { Input } from '../ui/Input.tsx';
-import { Label } from '../ui/Label.tsx';
-import Dropdown from '../ui/Dropdown.jsx';
+import { Dialog, DialogButton } from '../ui/Dialog.tsx';
 import SaveAsPresetDialog from './SaveAsPresetDialog';
-import { cn } from '~/utils/';
 import cleanupPreset from '~/utils/cleanupPreset';
 
-import OpenAISettings from './OpenAI/Settings.jsx';
-import BingAISettings from './BingAI/Settings.jsx';
-
-import store from '~/store';
+import Settings from './Settings';
 
 // A preset dialog to show readonly preset values.
 const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) => {
@@ -32,44 +23,6 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
     }));
   };
 
-  const renderSettings = () => {
-    const { endpoint } = preset || {};
-
-    if (endpoint === 'openAI')
-      return (
-        <OpenAISettings
-          readonly={true}
-          model={preset?.model}
-          setModel={setOption('model')}
-          chatGptLabel={preset?.chatGptLabel}
-          setChatGptLabel={setOption('chatGptLabel')}
-          promptPrefix={preset?.promptPrefix}
-          setPromptPrefix={setOption('promptPrefix')}
-          temperature={preset?.temperature}
-          setTemperature={setOption('temperature')}
-          topP={preset?.top_p}
-          setTopP={setOption('top_p')}
-          freqP={preset?.presence_penalty}
-          setFreqP={setOption('presence_penalty')}
-          presP={preset?.frequency_penalty}
-          setPresP={setOption('frequency_penalty')}
-        />
-      );
-    else if (endpoint === 'bingAI')
-      return (
-        <BingAISettings
-          readonly={true}
-          context={preset?.context}
-          setContext={setOption('context')}
-          systemMessage={preset?.systemMessage}
-          setSystemMessage={setOption('systemMessage')}
-          jailbreak={preset?.jailbreak}
-          setJailbreak={setOption('jailbreak')}
-        />
-      );
-    else return null;
-  };
-
   const saveAsPreset = () => {
     setSaveAsDialogShow(true);
   };
@@ -93,11 +46,17 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
         onOpenChange={onOpenChange}
       >
         <DialogTemplate
-          title={title || 'View Options'}
+          title={`${title || 'View Options'} - ${preset?.endpoint}`}
           className="max-w-full sm:max-w-4xl"
           main={
             <div className="flex w-full flex-col items-center gap-2">
-              <div className="w-full p-0">{renderSettings()}</div>
+              <div className="w-full p-0">
+                <Settings
+                  preset={preset}
+                  readonly={true}
+                  setOption={setOption}
+                />
+              </div>
             </div>
           }
           buttons={

client/src/components/Endpoints/OpenAI/Settings.jsx

@@ -15,23 +15,15 @@ const optionText =
   'p-0 shadow-none text-right pr-1 h-8 border-transparent focus:ring-[#10a37f] focus:ring-offset-0 focus:ring-opacity-100 hover:bg-gray-800/10 dark:hover:bg-white/10 focus:bg-gray-800/10 dark:focus:bg-white/10 transition-colors';
 
 function Settings(props) {
-  const {
-    readonly,
-    model,
-    setModel,
-    chatGptLabel,
-    setChatGptLabel,
-    promptPrefix,
-    setPromptPrefix,
-    temperature,
-    setTemperature,
-    topP,
-    setTopP,
-    freqP,
-    setFreqP,
-    presP,
-    setPresP
-  } = props;
+  const { readonly, model, chatGptLabel, promptPrefix, temperature, topP, freqP, presP, setOption } = props;
+
+  const setModel = setOption('model');
+  const setChatGptLabel = setOption('chatGptLabel');
+  const setPromptPrefix = setOption('promptPrefix');
+  const setTemperature = setOption('temperature');
+  const setTopP = setOption('top_p');
+  const setFreqP = setOption('presence_penalty');
+  const setPresP = setOption('frequency_penalty');
 
   return (
     <>

client/src/components/Endpoints/Settings.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import OpenAISettings from './OpenAI/Settings.jsx';
+import BingAISettings from './BingAI/Settings.jsx';
+
+// A preset dialog to show readonly preset values.
+const Settings = ({ preset, ...props }) => {
+  const renderSettings = () => {
+    const { endpoint } = preset || {};
+
+    if (endpoint === 'openAI')
+      return (
+        <OpenAISettings
+          model={preset?.model}
+          chatGptLabel={preset?.chatGptLabel}
+          promptPrefix={preset?.promptPrefix}
+          temperature={preset?.temperature}
+          topP={preset?.top_p}
+          freqP={preset?.presence_penalty}
+          presP={preset?.frequency_penalty}
+          {...props}
+        />
+      );
+    else if (endpoint === 'bingAI')
+      return (
+        <BingAISettings
+          context={preset?.context}
+          systemMessage={preset?.systemMessage}
+          jailbreak={preset?.jailbreak}
+          {...props}
+        />
+      );
+    else return <div className="text-black dark:text-white">Not implemented</div>;
+  };
+
+  return renderSettings();
+};
+
+export default Settings;

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

@@ -113,19 +113,13 @@ function OpenAIOptions() {
           <div className="px-4 py-4">
             <Settings
               model={model}
-              setModel={setOption('model')}
               chatGptLabel={chatGptLabel}
-              setChatGptLabel={setOption('chatGptLabel')}
               promptPrefix={promptPrefix}
-              setPromptPrefix={setOption('promptPrefix')}
               temperature={temperature}
-              setTemperature={setOption('temperature')}
               topP={top_p}
-              setTopP={setOption('top_p')}
               freqP={presence_penalty}
-              setFreqP={setOption('presence_penalty')}
               presP={frequency_penalty}
-              setPresP={setOption('frequency_penalty')}
+              setOption={setOption}
             />
           </div>
         }