Merge remote-tracking branch 'origin/main'

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/ChatWindow.tsx

@@ -95,7 +95,7 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
                 message={{
                   type: "system",
                   value:
-                    "📢 You can first provide your own OpenAI API key via the settings tab!",
+                    "📢 You can provide your own OpenAI API key in the settings tab for increased limits!",
                 }}
               />
             </Expand>

src/components/Input.tsx

@@ -26,7 +26,7 @@ const Input = (props: InputProps) => {
     setValue,
     disabled,
     attributes,
-    inputRef
+    inputRef,
   } = props;
   const isTypeCombobox = () => {
     return type === "combobox";
@@ -51,7 +51,7 @@ const Input = (props: InputProps) => {
     inputElement = (
       <input
         className={clsx(
-          "border:black delay-50 w-full rounded-xl border-[2px] border-white/10 bg-transparent px-2 py-2 text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5] sm:py-3 md:text-lg",
+          "border:black delay-50 w-full rounded-xl border-[2px] border-white/10 bg-[#3a3a3a] px-2 py-2 text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5] sm:py-3 md:text-lg",
           disabled && " cursor-not-allowed hover:border-white/10",
           left && "md:rounded-l-none"
         )}
@@ -66,7 +66,7 @@ const Input = (props: InputProps) => {
   }
 
   return (
-    <div className="items-left z-10 flex w-full flex-col rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-xl md:flex-row md:items-center">
+    <div className="items-left z-10 flex w-full flex-col rounded-xl font-mono text-lg text-white/75 shadow-xl md:flex-row md:items-center md:bg-[#3a3a3a]">
       {left && <Label left={left} />}
       {inputElement}
     </div>

src/components/Label.tsx

@@ -6,7 +6,7 @@ interface LabelProps {
 
 const Label = ({ left }: LabelProps) => {
   return (
-    <div className="center flex items-center rounded-xl rounded-r-none border-r-0 border-white/10 py-2 text-lg text-sm font-semibold tracking-wider transition-all sm:py-3 md:w-1/4 md:border-[2px] md:px-5 md:text-lg">
+    <div className="center flex items-center rounded-xl rounded-r-none border-white/10 py-2 text-lg text-sm font-semibold tracking-wider transition-all sm:py-3 md:w-1/4 md:border-[2px] md:border-r-0 md:px-5 md:text-lg">
       {left}
     </div>
   );

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"];