andre/CrewAI-Visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create agent modal validation and action

Browse Source
This commit is contained in:
Eng. Elias
2024-02-28 23:53:35 +04:00
parent 1b471835df
commit 7dec195a78
4 changed files with 95 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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"
},

5
src/app/agents/page.tsx
View File

@@ -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">

80
src/components/modals/new_agent_modal.tsx
View File

@@ -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 }) {
const { showModal, setShowModal } = props;
function NewAgentModal(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
type="button"
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"
<Button
color="white"
onClick={() => setShowModal(false)}
placeholder={undefined}
>
Close
</button>
</Button>
</TERipple>
<TERipple rippleColor="light">
<button
type="button"
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)]"
<Button
color="green"
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>