feat: add max loops setting

src/components/AutonomousAgent.ts

@@ -7,6 +7,7 @@ import {
   executeAgent,
   startAgent,
 } from "../services/agent-service";
+import { DEFAULT_MAX_LOOPS, DEFAULT_MAX_LOOPS_FREE } from "../utils/constants";
 
 class AutonomousAgent {
   name: string;
@@ -69,7 +70,10 @@ class AutonomousAgent {
     }
 
     this.numLoops += 1;
-    const maxLoops = this.modelSettings.customApiKey === "" ? 4 : 50;
+    const maxLoops =
+      this.modelSettings.customApiKey === ""
+        ? DEFAULT_MAX_LOOPS_FREE
+        : this.modelSettings.customMaxLoops || DEFAULT_MAX_LOOPS;
     if (this.numLoops > maxLoops) {
       this.sendLoopMessage();
       this.shutdown();

src/components/Input.tsx

@@ -6,6 +6,7 @@ import isArrayOfType from "../utils/helpers";
 import type { toolTipProperties } from "./types";
 
 interface InputProps {
+  id?: string;
   left?: React.ReactNode;
   value: string | number;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -20,6 +21,7 @@ interface InputProps {
 
 const Input = (props: InputProps) => {
   const {
+    id,
     placeholder,
     left,
     value,
@@ -41,6 +43,7 @@ const Input = (props: InputProps) => {
 
   let inputElement;
   const options = attributes?.options;
+
   if (
     isTypeCombobox() &&
     isArrayOfType(options, "string") &&
@@ -71,6 +74,7 @@ const Input = (props: InputProps) => {
         onChange={onChange}
         disabled={disabled}
         {...attributes}
+        {...(id && { id })}
       />
     );
   }

src/components/Label.tsx

@@ -14,17 +14,14 @@ const Label = ({ type, left, toolTipProperties }: LabelProps) => {
       child={
         <div
           className={`center flex items-center rounded-xl rounded-r-none ${
-            type !== "range"
-              ? "border-white/10 md:border-[2px] md:border-r-0"
-              : ""
-          }  py-2 text-sm font-semibold tracking-wider transition-all sm:py-3 md:px-5 md:text-lg`}
+            type !== "range" ? "border-r-0 border-white/10 md:border-[2px]" : ""
+          }  py-2 text-sm font-semibold tracking-wider transition-all sm:py-3 md:pl-3 md:text-lg`}
         >
           {left}
         </div>
       }
-      // child={<div>{left}</div>}
       style={{
-        parent: `md:w-1/4`,
+        container: `md:w-1/4`,
       }}
       sideOffset={0}
       toolTipProperties={toolTipProperties}

src/components/SettingsDialog.tsx

@@ -5,31 +5,40 @@ import {
   FaMicrochip,
   FaThermometerFull,
   FaExclamationCircle,
+  FaSyncAlt,
 } from "react-icons/fa";
 import Dialog from "./Dialog";
 import Input from "./Input";
-import { GPT_MODEL_NAMES, GPT_4 } from "../utils/constants";
+import {
+  GPT_MODEL_NAMES,
+  GPT_4,
+  DEFAULT_MAX_LOOPS_FREE,
+} from "../utils/constants";
 import Accordion from "./Accordion";
+import type { reactModelStates } from "./types";
 
 export default function SettingsDialog({
   show,
   close,
-  customApiKey,
-  setCustomApiKey,
-  customModelName,
-  setCustomModelName,
-  customTemperature,
-  setCustomTemperature,
+  reactModelStates,
 }: {
   show: boolean;
   close: () => void;
-  customApiKey: string;
-  setCustomApiKey: (key: string) => void;
-  customModelName: string;
-  setCustomModelName: (key: string) => void;
-  customTemperature: number;
-  setCustomTemperature: (temperature: number) => void;
+  reactModelStates: reactModelStates;
 }) {
+  const maxLoopsInputId = "max-loops-input";
+
+  const {
+    customApiKey,
+    setCustomApiKey,
+    customModelName,
+    setCustomModelName,
+    customTemperature,
+    setCustomTemperature,
+    customMaxLoops,
+    setCustomMaxLoops,
+  } = reactModelStates;
+
   const [key, setKey] = React.useState<string>(customApiKey);
 
   const handleClose = () => {
@@ -42,27 +51,63 @@ export default function SettingsDialog({
     close();
   };
 
+  React.useEffect(() => {
+    const input = document.getElementById(maxLoopsInputId) as HTMLInputElement;
+    if (input && !key) {
+      setCustomMaxLoops(DEFAULT_MAX_LOOPS_FREE);
+    }
+    return () => {
+      setCustomMaxLoops(DEFAULT_MAX_LOOPS_FREE);
+    };
+  }, [key, setCustomMaxLoops]);
+
   const advancedSettings = (
-    <Input
-      left={
-        <>
-          <FaThermometerFull />
-          <span className="ml-2">Temp: </span>
-        </>
-      }
-      value={customTemperature}
-      onChange={(e) => setCustomTemperature(parseFloat(e.target.value))}
-      type="range"
-      toolTipProperties={{
-        message: "Higher temperature will make output more random",
-        disabled: false,
-      }}
-      attributes={{
-        min: 0,
-        max: 1,
-        step: 0.01,
-      }}
-    />
+    <>
+      <Input
+        left={
+          <>
+            <FaThermometerFull />
+            <span className="ml-2">Temp: </span>
+          </>
+        }
+        value={customTemperature}
+        onChange={(e) => setCustomTemperature(parseFloat(e.target.value))}
+        type="range"
+        toolTipProperties={{
+          message: "Higher temperature will make output more random",
+          disabled: false,
+        }}
+        attributes={{
+          min: 0,
+          max: 1,
+          step: 0.01,
+        }}
+      />
+      <br />
+      <Input
+        left={
+          <>
+            <FaSyncAlt />
+            <span className="ml-2">Loop #: </span>
+          </>
+        }
+        id={maxLoopsInputId}
+        value={customMaxLoops}
+        disabled={!key}
+        onChange={(e) => setCustomMaxLoops(parseFloat(e.target.value))}
+        type="range"
+        toolTipProperties={{
+          message:
+            "Controls the maximum number of loops that the agent will run (higher value will make more API calls).",
+          disabled: false,
+        }}
+        attributes={{
+          min: 1,
+          max: 100,
+          step: 1,
+        }}
+      />
+    </>
   );
 
   return (

src/components/Tooltip.tsx

@@ -12,23 +12,23 @@ interface TooltipProps {
 const Tooltip = ({
   child,
   toolTipProperties = { message: "", disabled: true },
-  style = { parent: "" },
+  style = { container: "" },
   sideOffset,
 }: TooltipProps) => {
   const { message, disabled } = toolTipProperties;
   return (
-    <div className={style.parent}>
+    <div className={style.container}>
       <TooltipPrimitive.Provider>
         <TooltipPrimitive.Root delayDuration={0}>
           <TooltipPrimitive.Trigger asChild>{child}</TooltipPrimitive.Trigger>
           {disabled ? null : (
             <TooltipPrimitive.Portal>
               <TooltipPrimitive.Content
-                className="TooltipContent will-change animation-transform user-select-none z-40 rounded-sm bg-black px-3.5 py-2.5 text-white shadow-lg "
+                className="will-change animation-transform user-select-none z-40 w-3/5 rounded-sm bg-black px-3.5 py-2.5 text-white shadow-lg "
                 sideOffset={sideOffset}
               >
                 {message}
-                <TooltipPrimitive.Arrow className="TooltipArrow fill-black" />
+                <TooltipPrimitive.Arrow className="fill-black" />
               </TooltipPrimitive.Content>
             </TooltipPrimitive.Portal>
           )}

src/components/types/propTypes.ts

@@ -2,3 +2,14 @@ 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;
+};

src/pages/index.tsx

@@ -14,7 +14,7 @@ import AutonomousAgent from "../components/AutonomousAgent";
 import Expand from "../components/motions/expand";
 import HelpDialog from "../components/HelpDialog";
 import SettingsDialog from "../components/SettingsDialog";
-import { GPT_35_TURBO } from "../utils/constants";
+import { GPT_35_TURBO, DEFAULT_MAX_LOOPS_FREE } from "../utils/constants";
 import { useSession } from "next-auth/react";
 import { api } from "../utils/api";
 import { env } from "../env/client.mjs";
@@ -29,6 +29,9 @@ const Home: NextPage = () => {
   const [customModelName, setCustomModelName] =
     React.useState<string>(GPT_35_TURBO);
   const [customTemperature, setCustomTemperature] = React.useState<number>(0.9);
+  const [customMaxLoops, setCustomMaxLoops] = React.useState<number>(
+    DEFAULT_MAX_LOOPS_FREE
+  );
   const [shouldAgentStop, setShouldAgentStop] = React.useState(false);
 
   const [messages, setMessages] = React.useState<Message[]>([]);
@@ -93,7 +96,7 @@ const Home: NextPage = () => {
       goalInput,
       handleAddMessage,
       () => setAgent(null),
-      { customApiKey, customModelName, customTemperature }
+      { customApiKey, customModelName, customTemperature, customMaxLoops }
     );
     setAgent(agent);
     agent.run().then(console.log).catch(console.error);
@@ -111,12 +114,16 @@ const Home: NextPage = () => {
         close={() => setShowHelpDialog(false)}
       />
       <SettingsDialog
-        customApiKey={customApiKey}
-        setCustomApiKey={setCustomApiKey}
-        customModelName={customModelName}
-        setCustomModelName={setCustomModelName}
-        customTemperature={customTemperature}
-        setCustomTemperature={setCustomTemperature}
+        reactModelStates={{
+          customApiKey,
+          setCustomApiKey,
+          customModelName,
+          setCustomModelName,
+          customTemperature,
+          setCustomTemperature,
+          customMaxLoops,
+          setCustomMaxLoops,
+        }}
         show={showSettingsDialog}
         close={() => setShowSettingsDialog(false)}
       />

src/utils/constants.ts

@@ -1,3 +1,6 @@
 export const GPT_35_TURBO = "gpt-3.5-turbo";
 export const GPT_4 = "gpt-4";
 export const GPT_MODEL_NAMES = [GPT_35_TURBO, GPT_4];
+
+export const DEFAULT_MAX_LOOPS_FREE = 4;
+export const DEFAULT_MAX_LOOPS = 50;

src/utils/types.ts

@@ -2,4 +2,5 @@ export type ModelSettings = {
   customApiKey: string;
   customModelName: string;
   customTemperature: number;
+  customMaxLoops: number;
 };