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

add some validations on get agents

Browse Source
This commit is contained in:
Eng. Elias
2024-03-07 17:42:07 +04:00
parent cb50243aec
commit cd041b5693
3 changed files with 83 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import { Agent } from "@/types/agent";
import { GET_AGENTS } from "@/utils/graphql_queries";
import { useQuery } from "@apollo/client";
import { Icon } from "@iconify/react";
import { Button, IconButton } from "@material-tailwind/react";
import { Alert, Button, IconButton } from "@material-tailwind/react";
import { useState } from "react";
const AgentsPage = () => {
@@ -52,7 +52,20 @@ const AgentsPage = () => {
/>
</div>
<div className="container m-auto flex flex-wrap flex-col md:flex-row items-center justify-start p-2">
{data.agents.map((agent: Agent, i: number) => (
{error && (
<div className="w-full">
<Alert
color="yellow"
icon={
<Icon icon="material-symbols:warning-outline" fontSize={26} />
}
className="w-fit"
>
{error?.message ?? "An error occurred."}
</Alert>
</div>
)}
{data?.agents.map((agent: Agent, i: number) => (
<div key={i} className="w-full lg:w-1/2 p-3 relative">
<div
className={`flex flex-col ${

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

@@ -17,7 +17,7 @@ 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 { Button, Switch } from "@material-tailwind/react";
import { Alert, Button, Switch } from "@material-tailwind/react";
import { useMutation, useQuery } from "@apollo/client";
import {
DELETE_MISSION,
@@ -58,7 +58,11 @@ export default function MissionModal(props: {
setMissionResult(mission?.result ?? "");
}, [mission]);
const { loading, error, data: agentsData } = useQuery(GET_AGENTS);
const {
loading,
error: agentsError,
data: agentsData,
} = useQuery(GET_AGENTS);
const [updateMission] = useMutation(UPDATE_MISSION);
const [updateMissionLoading, setUpdateMissionLoading] = useState(false);
@@ -151,6 +155,24 @@ export default function MissionModal(props: {
<div className="mb-4">
<span className="font-bold mr-2 text-lg">Crew (Agents):</span>
<br />
{agentsError && (
<>
<div className="w-full my-1">
<Alert
color="yellow"
icon={
<Icon
icon="material-symbols:warning-outline"
fontSize={26}
/>
}
className="w-fit"
>
{agentsError?.message ?? "An error occurred."}
</Alert>
</div>
</>
)}
{isEdit ? (
loading ? (
<Button
@@ -163,17 +185,20 @@ export default function MissionModal(props: {
</Button>
) : (
<TESelect
data={agentsData.agents.map((agent: Agent) => ({
text: agent.role,
value: agent.id,
}))}
data={
agentsData?.agents.map((agent: Agent) => ({
text: agent.role,
value: agent.id,
})) ?? []
}
multiple
value={tempMission.crew.map((agent) => agent.id!)}
onValueChange={(event: any) => {
const newValue = event.map((item: any) => item.value);
const newCrew = agentsData.agents.filter(
(agent: Agent) => newValue.includes(agent.id)
);
const newCrew =
agentsData?.agents.filter((agent: Agent) =>
newValue.includes(agent.id)
) ?? [];
const newTasks = tempMission.tasks.map((task) => ({
...task,
agent:

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

@@ -1,7 +1,7 @@
import { Process, selectTheme } from "@/data/consts";
import { Mission } from "@/types/mission";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Button, Switch } from "@material-tailwind/react";
import { Alert, Button, Switch } from "@material-tailwind/react";
import React, { useState } from "react";
import {
TEInput,
@@ -37,7 +37,11 @@ function NewMissionModal(props: {
result: "",
});
const { loading, error, data: agentsData } = useQuery(GET_AGENTS);
const {
loading,
error: agentsError,
data: agentsData,
} = useQuery(GET_AGENTS);
const [createMission] = useMutation(CREATE_MISSION);
const [createMissionLoading, setCreateMissionLoading] = useState(false);
@@ -98,6 +102,24 @@ function NewMissionModal(props: {
<div className="mb-4">
<span className="font-bold mr-2 text-lg">Crew (Agents):</span>
<br />
{agentsError && (
<>
<div className="w-full my-1">
<Alert
color="yellow"
icon={
<Icon
icon="material-symbols:warning-outline"
fontSize={26}
/>
}
className="w-fit"
>
{agentsError?.message ?? "An error occurred."}
</Alert>
</div>
</>
)}
{loading ? (
<Button
variant="text"
@@ -109,16 +131,19 @@ function NewMissionModal(props: {
</Button>
) : (
<TESelect
data={agentsData.agents.map((agent: Agent) => ({
text: agent.role,
value: agent.id,
}))}
data={
agentsData?.agents.map((agent: Agent) => ({
text: agent.role,
value: agent.id,
})) ?? []
}
multiple
onValueChange={(event: any) => {
const newValue = event.map((item: any) => item.value);
const newCrew = agentsData.agents.filter(
(agent: Agent) => newValue.includes(agent.id)
);
const newCrew =
agentsData?.agents.filter((agent: Agent) =>
newValue.includes(agent.id)
) ?? [];
const newTasks = tempMission.tasks.map((task) => ({
...task,
agent: