create agent modal validation and action

package-lock.json

@@ -19,6 +19,8 @@
         "node-calls-python": "^1.8.2",
         "react": "^18",
         "react-dom": "^18",
+        "sweetalert2": "^11.10.5",
+        "sweetalert2-react-content": "^5.0.7",
         "tw-elements": "^1.1.0",
         "tw-elements-react": "^1.0.0-alpha2"
       },
@@ -6657,6 +6659,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.5.tgz",
+      "integrity": "sha512-q9eE3EKhMcpIDU/Xcz7z5lk8axCGkgxwK47gXGrrfncnBJWxHPPHnBVAjfsVXcTt8Yi8U6HNEcBRSu+qGeyFdA==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
+    "node_modules/sweetalert2-react-content": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/sweetalert2-react-content/-/sweetalert2-react-content-5.0.7.tgz",
+      "integrity": "sha512-8Fk82Mpk45lFXpJWKIFF/lq8k/dJKDDQGFcuqVosaL/qRdViyAs5+u37LoTGfnOIvf+rfQB3PAXcp1XLLn+0ew==",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "sweetalert2": "^11.0.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",

package.json

@@ -21,6 +21,8 @@
     "node-calls-python": "^1.8.2",
     "react": "^18",
     "react-dom": "^18",
+    "sweetalert2": "^11.10.5",
+    "sweetalert2-react-content": "^5.0.7",
     "tw-elements": "^1.1.0",
     "tw-elements-react": "^1.0.0-alpha2"
   },

src/app/agents/page.tsx

@@ -15,7 +15,7 @@ const AgentsPage = () => {
 
   const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
 
-  const { loading, error, data } = useQuery(GET_AGENTS);
+  const { loading, error, data, refetch } = useQuery(GET_AGENTS);
 
   if (loading) {
     return (
@@ -46,6 +46,9 @@ const AgentsPage = () => {
         <NewAgentModal
           showModal={showNewAgentModal}
           setShowModal={setShowNewAgentModal}
+          onAddNewAdent={() => {
+            refetch();
+          }}
         />
       </div>
       <div className="container m-auto flex flex-wrap flex-col md:flex-row items-center justify-start p-2">

src/components/modals/new_agent_modal.tsx

@@ -16,12 +16,28 @@ import {
   TETextarea,
 } from "tw-elements-react";
 import TWFileInput from "../inputs/file";
-import { Switch } from "@material-tailwind/react";
+import { Button, Switch } from "@material-tailwind/react";
+import { useMutation } from "@apollo/client";
+import { CREATE_AGENT } from "@/utils/graphql_queries";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { Gothic_A1 } from "next/font/google";
 
-function NewAgentModal(props: { showModal: boolean; setShowModal: Function }) {
+function NewAgentModal(props: {
-  const { showModal, setShowModal } = props;
+  showModal: boolean;
+  setShowModal: Function;
+  onAddNewAdent: Function;
+}) {
+  const { showModal, setShowModal, onAddNewAdent = () => {} } = props;
 
-  const [tempAgent, setTempAgent] = useState<Agent | null>();
+  const [tempAgent, setTempAgent] = useState<Agent>({
+    role: "",
+    goal: "",
+    backstory: "",
+    tools: [],
+    allowDelegation: false,
+    verbose: false,
+  });
 
   const [selectedImage, setSelectedImage] = useState<
     string | ArrayBuffer | null
@@ -40,6 +56,22 @@ function NewAgentModal(props: { showModal: boolean; setShowModal: Function }) {
     }
   };
 
+  const [createAgent] = useMutation(CREATE_AGENT);
+  const [createAgentLoading, setCreateAgentLoading] = useState(false);
+
+  const handleCreateAgent = (agentData: Agent) => {
+    setCreateAgentLoading(true);
+    return createAgent({
+      variables: {
+        ...agentData,
+      },
+    }).finally(() => {
+      setCreateAgentLoading(false);
+    });
+  };
+
+  const ReactSwal = withReactContent(Swal);
+
   return (
     <div>
       <TEModal show={showModal} setShow={setShowModal}>
@@ -166,21 +198,45 @@ function NewAgentModal(props: { showModal: boolean; setShowModal: Function }) {
 
             <TEModalFooter>
               <TERipple rippleColor="light">
-                <button
+                <Button
-                  type="button"
+                  color="white"
-                  className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                   onClick={() => setShowModal(false)}
+                  placeholder={undefined}
                 >
                   Close
-                </button>
+                </Button>
               </TERipple>
               <TERipple rippleColor="light">
-                <button
+                <Button
-                  type="button"
+                  color="green"
-                  className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+                  loading={createAgentLoading}
+                  disabled={
+                    !tempAgent.role || !tempAgent.goal || createAgentLoading
+                  }
+                  onClick={() => {
+                    handleCreateAgent(tempAgent)
+                      .then(() => {
+                        setShowModal(false);
+                        ReactSwal.fire({
+                          title: "Smart Agent",
+                          text: "New agent joined to your crew",
+                          icon: "success",
+                        });
+                        onAddNewAdent();
+                      })
+                      .catch((error) => {
+                        ReactSwal.fire({
+                          title: "Error",
+                          text: error,
+                          icon: "error",
+                        });
+                      });
+                  }}
+                  className="mx-1"
+                  placeholder={undefined}
                 >
                   Add
-                </button>
+                </Button>
               </TERipple>
             </TEModalFooter>
           </TEModalContent>