feat: Max token Setting

src/components/Input.tsx

@@ -7,16 +7,24 @@ import type { toolTipProperties } from "./types";
 
 interface InputProps {
   left?: React.ReactNode;
-  value: string | number;
-  onChange: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+  value: string | number | undefined;
+  onChange: (
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) => void;
   placeholder?: string;
   disabled?: boolean;
   setValue?: (value: string) => void;
   type?: string;
   attributes?: { [key: string]: string | number | string[] }; // attributes specific to input type
   toolTipProperties?: toolTipProperties;
   inputRef?: React.RefObject<HTMLInputElement>;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (
+    e:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => void;
 }
 
 const Input = (props: InputProps) => {
@@ -76,7 +84,7 @@ const Input = (props: InputProps) => {
     inputElement = (
       <textarea
         className={clsx(
-          "border:black delay-50 w-full resize-none h-20 rounded-xl bg-[#3a3a3a] text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5] py-3 md:text-lg border-[2px] border-white/10 px-2",
+          "border:black delay-50 h-20 w-full resize-none rounded-xl border-[2px] border-white/10 bg-[#3a3a3a] px-2 py-3 text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5] md:text-lg",
           disabled && " cursor-not-allowed hover:border-white/10",
           left && "md:rounded-l-none"
         )}

src/components/SettingsDialog.tsx

@@ -1,76 +1,66 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Button from "./Button";
 import {
   FaKey,
   FaMicrochip,
   FaThermometerFull,
   FaExclamationCircle,
   FaSyncAlt,
+  FaCoins,
 } from "react-icons/fa";
 import Dialog from "./Dialog";
 import Input from "./Input";
-import {
-  GPT_MODEL_NAMES,
-  GPT_4,
-  DEFAULT_MAX_LOOPS_CUSTOM_API_KEY,
-  DEFAULT_MAX_LOOPS_FREE,
-} from "../utils/constants";
+import { GPT_MODEL_NAMES, GPT_4 } from "../utils/constants";
 import Accordion from "./Accordion";
-import type { reactModelStates } from "./types";
+import type { ModelSettings } from "../utils/types";
 
-export default function SettingsDialog({
-  show,
-  close,
-  reactModelStates,
-}: {
+export const SettingsDialog: React.FC<{
   show: boolean;
   close: () => void;
-  reactModelStates: reactModelStates;
-}) {
-  const {
-    customApiKey,
-    setCustomApiKey,
-    customModelName,
-    setCustomModelName,
-    customTemperature,
-    setCustomTemperature,
-    customMaxLoops,
-    setCustomMaxLoops,
-  } = reactModelStates;
+  customSettings: [
+    ModelSettings,
+    React.Dispatch<React.SetStateAction<ModelSettings>>
+  ];
+}> = ({ show, close, customSettings: [customSettings, setCustomSettings] }) => {
+  const [settings, setSettings] = React.useState<ModelSettings>({
+    ...customSettings,
+  });
 
-  const [key, setKey] = React.useState<string>(customApiKey);
+  useEffect(() => {
+    setSettings(customSettings);
+  }, [customSettings, close]);
 
-  const handleClose = () => {
-    setKey(customApiKey);
-    close();
+  const updateSettings = <Key extends keyof ModelSettings>(
+    key: Key,
+    value: ModelSettings[Key]
+  ) => {
+    setSettings((prev) => {
+      return { ...prev, [key]: value };
+    });
   };
 
-  function is_valid_key(key: string) {
+  function keyIsValid(key: string | undefined) {
     const pattern = /^sk-[a-zA-Z0-9]{48}$/;
-    return pattern.test(key);
+    return key && pattern.test(key);
   }
 
   const handleSave = () => {
-    if (is_valid_key(key)) {
-      setCustomApiKey(key);
-      close();
-    } else {
+    if (!keyIsValid(settings.customApiKey)) {
       alert(
         "key is invalid, please ensure that you have set up billing in your OpenAI account"
       );
+      return;
     }
-  };
 
-  React.useEffect(() => {
-    setCustomMaxLoops(
-      !key ? DEFAULT_MAX_LOOPS_FREE : DEFAULT_MAX_LOOPS_CUSTOM_API_KEY
-    );
+    setCustomSettings((prev) => {
+      return { ...prev, ...settings };
+    });
 
-    return () => {
-      setCustomMaxLoops(DEFAULT_MAX_LOOPS_FREE);
-    };
-  }, [key, setCustomMaxLoops]);
+    close();
+    return;
+  };
 
+  const disabled = !settings.customApiKey;
   const advancedSettings = (
     <>
       <Input
@@ -80,8 +70,10 @@ export default function SettingsDialog({
             <span className="ml-2">Temp: </span>
           </>
         }
-        value={customTemperature}
-        onChange={(e) => setCustomTemperature(parseFloat(e.target.value))}
+        value={settings.customTemperature}
+        onChange={(e) =>
+          updateSettings("customTemperature", parseFloat(e.target.value))
+        }
         type="range"
         toolTipProperties={{
           message:
@@ -102,9 +94,11 @@ export default function SettingsDialog({
             <span className="ml-2">Loop #: </span>
           </>
         }
-        value={customMaxLoops}
-        disabled={!key}
-        onChange={(e) => setCustomMaxLoops(parseFloat(e.target.value))}
+        value={settings.customMaxLoops}
+        disabled={disabled}
+        onChange={(e) =>
+          updateSettings("customMaxLoops", parseFloat(e.target.value))
+        }
         type="range"
         toolTipProperties={{
           message:
@@ -117,14 +111,39 @@ export default function SettingsDialog({
           step: 1,
         }}
       />
+      <br />
+      <Input
+        left={
+          <>
+            <FaCoins />
+            <span className="ml-2">Tokens: </span>
+          </>
+        }
+        value={settings.maxTokens ?? 400}
+        disabled={disabled}
+        onChange={(e) =>
+          updateSettings("maxTokens", parseFloat(e.target.value))
+        }
+        type="range"
+        toolTipProperties={{
+          message:
+            "Controls the maximum number of tokens used in each API call (higher value will make responses more detailed but cost more).",
+          disabled: false,
+        }}
+        attributes={{
+          min: 200,
+          max: 2000,
+          step: 100,
+        }}
+      />
     </>
   );
 
   return (
     <Dialog
       header="Settings ⚙"
       isShown={show}
-      close={handleClose}
+      close={close}
       footerButton={<Button onClick={handleSave}>Save</Button>}
     >
       <p>
@@ -135,7 +154,7 @@ export default function SettingsDialog({
       <br />
       <p
         className={
-          customModelName === GPT_4
+          settings.customModelName === GPT_4
             ? "rounded-md border-[2px] border-white/10 bg-yellow-300 text-black"
             : ""
         }
@@ -159,29 +178,30 @@ export default function SettingsDialog({
         <Input
           left={
             <>
-              <FaMicrochip />
-              <span className="ml-2">Model:</span>
+              <FaKey />
+              <span className="ml-2">Key: </span>
             </>
           }
-          type="combobox"
-          value={customModelName}
-          onChange={() => null}
-          setValue={setCustomModelName}
-          attributes={{ options: GPT_MODEL_NAMES }}
+          placeholder={"sk-..."}
+          value={settings.customApiKey}
+          onChange={(e) => updateSettings("customApiKey", e.target.value)}
         />
-        <br className="hidden md:inline" />
+        <br className="md:inline" />
         <Input
           left={
             <>
-              <FaKey />
-              <span className="ml-2">Key: </span>
+              <FaMicrochip />
+              <span className="ml-2">Model:</span>
             </>
           }
-          placeholder={"sk-..."}
-          value={key}
-          onChange={(e) => setKey(e.target.value)}
+          type="combobox"
+          value={settings.customModelName}
+          onChange={() => null}
+          setValue={(e) => updateSettings("customModelName", e)}
+          attributes={{ options: GPT_MODEL_NAMES }}
+          disabled={disabled}
         />
-        <br className="md:inline" />
+        <br className="hidden md:inline" />
         <Accordion
           child={advancedSettings}
           name="Advanced Settings"
@@ -201,4 +221,4 @@ export default function SettingsDialog({
       </div>
     </Dialog>
   );
-}
+};

src/components/types/propTypes.ts

@@ -2,14 +2,3 @@ export type toolTipProperties = {
   message?: string;
   disabled?: boolean;
 };
-
-export type reactModelStates = {
-  customApiKey: string;
-  setCustomApiKey: (key: string) => void;
-  customModelName: string;
-  setCustomModelName: (key: string) => void;
-  customTemperature: number;
-  setCustomTemperature: (temperature: number) => void;
-  customMaxLoops: number;
-  setCustomMaxLoops: (numberOfLoops: number) => void;
-};