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

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

Browse Source
This commit is contained in:
Eng. Elias
2024-03-21 00:43:28 +04:00
parent 202483f47e
commit a654f454b8
14 changed files with 180 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/modals/agent_modal.tsx
View File

@@ -12,13 +12,11 @@ import {
TEModalHeader,
TEModalBody,
TEModalFooter,
TEInput,
TETextarea,
TESelect,
} from "tw-elements-react";
import TWFileInput from "../inputs/file";
import { selectTheme } from "@/data/consts";
import { Button, Switch } from "@material-tailwind/react";
import { Button, Input, Switch, Textarea } from "@material-tailwind/react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { DELETE_AGENT, UPDATE_AGENT } from "@/utils/graphql_queries";
@@ -174,9 +172,10 @@ export default function AgentModal(props: {
{isEdit && (
<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) => ({
@@ -184,15 +183,17 @@ export default function AgentModal(props: {
role: event.target.value,
}));
}}
crossOrigin={undefined}
/>
</div>
)}
<div className="mb-4">
<label className="font-bold text-lg">Goal:</label>
{isEdit ? (
<TEInput
type="text"
className="mt-2"
<Input
label="Goal"
color="blue"
className="text-white"
value={tempAgent?.goal}
onChange={(event) => {
setTempAgent((prevState) => ({
@@ -200,6 +201,7 @@ export default function AgentModal(props: {
goal: event.target.value,
}));
}}
crossOrigin={undefined}
/>
) : (
<div>{agent?.goal}</div>
@@ -208,8 +210,9 @@ export default function AgentModal(props: {
<div className="mb-4">
<label className="font-bold text-lg">Backstory:</label>
{isEdit ? (
<TETextarea
rows={4}
<Textarea
label="Backstory"
resize={true}
value={tempAgent?.backstory || ""}
onChange={(event) => {
setTempAgent((prevState) => ({
@@ -296,6 +299,29 @@ export default function AgentModal(props: {
/>
)}
</div>
<div className="flex items-center mb-4">
<label className="font-bold mx-2">Memory: </label>
{isEdit ? (
<Switch
crossOrigin={undefined}
color="blue"
defaultChecked={tempAgent?.memory}
onChange={(event) => {
setTempAgent((prevState) => ({
...prevState!,
memory: !!event.target.value,
}));
}}
/>
) : (
<Switch
crossOrigin={undefined}
color="blue"
defaultChecked={tempAgent?.memory}
disabled={true}
/>
)}
</div>
</div>
<div className="m-4 sm:w-1/2">
@@ -411,6 +437,7 @@ export default function AgentModal(props: {
handleUpdateAgent(tempAgent)
.then(() => {
setShowModal(false);
setEdit(false);
ReactSwal.fire({
title: "Updated",
text: "Agent updated successfully",

11
src/components/modals/mission_modal.tsx
View File

@@ -10,14 +10,13 @@ import {
TEModalHeader,
TEModalBody,
TEModalFooter,
TEInput,
TESelect,
} from "tw-elements-react";
import { Mission } from "@/types/mission";
import MissionTaskEditor from "../inputs/mission_tasks_editor";
import { TasksAccordion } from "../ui/tasks_accordions";
import { Process, selectTheme } from "@/data/consts";
import { Alert, Button, Switch } from "@material-tailwind/react";
import { Alert, Button, Input, Switch } from "@material-tailwind/react";
import { useMutation, useQuery } from "@apollo/client";
import {
DELETE_MISSION,
@@ -139,9 +138,10 @@ export default function MissionModal(props: {
{isEdit && (
<div className="mb-4">
<label className="font-bold text-lg">Name:</label>
<TEInput
type="text"
className="mt-2"
<Input
label="Name"
color="blue"
className="text-white"
value={tempMission?.name}
onChange={(event) => {
setTempMission((prevState) => ({
@@ -149,6 +149,7 @@ export default function MissionModal(props: {
name: event.target.value,
}));
}}
crossOrigin={undefined}
/>
</div>
)}

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

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

12
src/components/modals/new_mission_modal.tsx
View File

@@ -1,10 +1,9 @@
import { Process, selectTheme } from "@/data/consts";
import { Mission } from "@/types/mission";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Alert, Button, Switch } from "@material-tailwind/react";
import { Alert, Button, Input, Switch } from "@material-tailwind/react";
import React, { useState } from "react";
import {
TEInput,
TEModal,
TEModalBody,
TEModalContent,
@@ -14,7 +13,6 @@ import {
TERipple,
TESelect,
} from "tw-elements-react";
import MissionTaskEditor from "../inputs/mission_tasks_editor";
import { useMutation, useQuery } from "@apollo/client";
import { CREATE_MISSION, GET_AGENTS } from "@/utils/graphql_queries";
import { Agent } from "@/types/agent";
@@ -87,9 +85,10 @@ function NewMissionModal(props: {
<div>
<div className="mb-4">
<label className="font-bold text-lg">Name:</label>
<TEInput
type="text"
className="mt-2"
<Input
label="Name"
color="blue"
className="text-white"
value={tempMission?.name}
onChange={(event) => {
setTempMission((prevState) => ({
@@ -97,6 +96,7 @@ function NewMissionModal(props: {
name: event.target.value,
}));
}}
crossOrigin={undefined}
/>
</div>
<div className="mb-4">