feat: improve explaination for GPT4 model requirement (#172)

src/components/AutonomousAgent.ts

@@ -6,6 +6,7 @@ import {
   executeAgent,
   startAgent,
 } from "../services/agent-service";
+import { GPT_4 } from "../utils/constants";
 
 class AutonomousAgent {
   name: string;
@@ -47,7 +48,11 @@ class AutonomousAgent {
       console.log(e);
       this.sendErrorMessage(
         this.modelSettings.customApiKey !== ""
-          ? `ERROR retrieving initial tasks array. Make sure your API key is not the free tier, make your goal more clear, or revise your goal such that it is within our model's policies to run. Shutting Down.`
+          ? `ERROR retrieving initial tasks array. Make sure ${
+              this.modelSettings.customModelName === GPT_4
+                ? "you have the API key for GPT 4"
+                : "your API key is not the free tier"
+            }, make your goal more clear, or revise your goal such that it is within our model's policies to run. Shutting Down.`
           : `ERROR retrieving initial tasks array. Retry, make your goal more clear, or revise your goal such that it is within our model's policies to run. Shutting Down.`
       );
       this.shutdown();

src/components/SettingsDialog.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import Button from "./Button";
-import { FaKey, FaMicrochip } from "react-icons/fa";
+import { FaKey, FaMicrochip, FaExclamationCircle } from "react-icons/fa";
 import Dialog from "./Dialog";
 import Input from "./Input";
 import Dropdown from "./Dropdown";
-import { GPT_MODEL_NAMES } from "../utils/constants";
+import { GPT_MODEL_NAMES, GPT_4 } from "../utils/constants";
 
 interface SettingsDialogProps {
   show: boolean;
@@ -50,7 +50,27 @@ export default function SettingsDialog(props: SettingsDialogProps) {
         additionally select any model OpenAI offers.
       </p>
       <br />
-      <p>To use GPT-4, your API Key needs to have the correct access.</p>
+      <p
+        className={
+          customModelName === GPT_4
+            ? "rounded-md border-[2px] border-white/10 bg-yellow-300 text-black"
+            : ""
+        }
+      >
+        <FaExclamationCircle className="inline-block" />
+        &nbsp;
+        <b>
+          To use the GPT-4 model, you need to also provide the API key for
+          GPT-4. You can request for it&nbsp;
+          <a
+            href="https://openai.com/waitlist/gpt-4-api"
+            className="text-blue-500"
+          >
+            here
+          </a>
+          . (ChatGPT Plus subscription will not work)
+        </b>
+      </p>
       <br />
       <div className="text-md relative flex-auto p-2 leading-relaxed">
         <Input

src/utils/constants.ts

@@ -1,3 +1,4 @@
 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", "text-davinci-003"];
+export const GPT_MODEL_NAMES = [GPT_35_TURBO, GPT_4, "text-davinci-003"];