adding the new fields of crewAI to GraphQL schema and queries and UI forms + some UI enhancements

src/components/modals/new_agent_modal.tsx

@@ -4,7 +4,6 @@ import { Agent } from "@/types/agent";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import React, { useState } from "react";
 import {
-  TEInput,
   TEModal,
   TEModalBody,
   TEModalContent,
@@ -13,9 +12,8 @@ import {
   TEModalHeader,
   TERipple,
   TESelect,
-  TETextarea,
 } from "tw-elements-react";
-import { Button, Switch } from "@material-tailwind/react";
+import { Button, Input, Switch, Textarea } from "@material-tailwind/react";
 import { useMutation } from "@apollo/client";
 import { CREATE_AGENT } from "@/utils/graphql_queries";
 import withReactContent from "sweetalert2-react-content";
@@ -41,23 +39,6 @@ function NewAgentModal(props: {
     verbose: false,
   });
 
-  const [selectedImage, setSelectedImage] = useState<
-    string | ArrayBuffer | null
-  >(null);
-
-  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event?.target?.files?.[0];
-    const reader = new FileReader();
-
-    reader.onloadend = () => {
-      setSelectedImage(reader.result);
-    };
-
-    if (file) {
-      reader.readAsDataURL(file);
-    }
-  };
-
   const [createAgent] = useMutation(CREATE_AGENT);
   const [createAgentLoading, setCreateAgentLoading] = useState(false);
 
@@ -95,9 +76,10 @@ function NewAgentModal(props: {
                 <div className="sm:w-1/2 mx-auto">
                   <div className="mb-4">
                     <label className="font-bold text-lg">Role:</label>
-                    <TEInput
-                      type="text"
-                      className="mt-2"
+                    <Input
+                      label="Role"
+                      color="blue"
+                      className="text-white"
                       value={tempAgent?.role}
                       onChange={(event) => {
                         setTempAgent((prevState) => ({
@@ -105,13 +87,15 @@ function NewAgentModal(props: {
                           role: event.target.value,
                         }));
                       }}
+                      crossOrigin={undefined}
                     />
                   </div>
                   <div className="mb-4">
                     <label className="font-bold text-lg">Goal:</label>
-                    <TEInput
-                      type="text"
-                      className="mt-2"
+                    <Input
+                      label="Goal"
+                      color="blue"
+                      className="text-white"
                       value={tempAgent?.goal}
                       onChange={(event) => {
                         setTempAgent((prevState) => ({
@@ -119,12 +103,15 @@ function NewAgentModal(props: {
                           goal: event.target.value,
                         }));
                       }}
+                      crossOrigin={undefined}
                     />
                   </div>
                   <div className="mb-4">
                     <label className="font-bold text-lg">Backstory:</label>
-                    <TETextarea
-                      rows={4}
+                    <Textarea
+                      label="Backstory"
+                      color="blue"
+                      resize={true}
                       value={tempAgent?.backstory || ""}
                       onChange={(event) => {
                         setTempAgent((prevState) => ({
@@ -179,6 +166,20 @@ function NewAgentModal(props: {
                       }}
                     />
                   </div>
+                  <div className="flex items-center mb-4">
+                    <label className="font-bold mx-2">Memory: </label>
+                    <Switch
+                      crossOrigin={undefined}
+                      color="blue"
+                      defaultChecked={tempAgent?.verbose}
+                      onChange={(event) => {
+                        setTempAgent((prevState) => ({
+                          ...prevState!,
+                          memory: !!event.target.value,
+                        }));
+                      }}
+                    />
+                  </div>
                 </div>
               </div>
             </TEModalBody>