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

missions page with mission modal to view mission and edit some of its info

Browse Source
This commit is contained in:
Eng. Elias
2024-02-15 01:41:12 +04:00
parent 4dcfc86e5f
commit b70869ccd1
9 changed files with 565 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/components/modals/mission_modal.tsx Normal file
View File

@@ -0,0 +1,237 @@
"use client";
import { agents, tools } from "@/data/data";
import { Icon } from "@iconify/react";
import React, { useEffect, useState } from "react";
import {
TERipple,
TEModal,
TEModalDialog,
TEModalContent,
TEModalHeader,
TEModalBody,
TEModalFooter,
TEInput,
TETextarea,
TESelect,
} from "tw-elements-react";
import Switch from "../inputs/switch";
import { Mission } from "@/types/mission";
import { Collapse, initTE } from "tw-elements";
import AccordionItem from "../ui/accordion_item";
export default function MissionModal(props: {
mission: Mission | null;
showModal: boolean;
setShowModal: Function;
}): JSX.Element {
const { mission, showModal, setShowModal } = props;
const [isEdit, setEdit] = useState(false);
const [tempMission, setTempMission] = useState<Mission | null>(mission);
useEffect(() => {
setTempMission(mission);
}, [mission]);
useEffect(() => {
initTE({ Collapse });
});
return (
<div>
<TEModal show={showModal} setShow={setShowModal}>
<TEModalDialog size="lg">
<TEModalContent style={{ backgroundColor: "#282828" }}>
<TEModalHeader>
<h1 className="text-xl font-medium leading-normal">
{mission?.name}
</h1>
<button
type="button"
className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
onClick={() => setShowModal(false)}
aria-label="Close"
>
<Icon icon="ep:close-bold" width={20} height={20} />
</button>
</TEModalHeader>
<TEModalBody>
<div>
{isEdit && (
<div className="mb-4">
<label className="font-bold text-lg">Name:</label>
<TEInput
type="text"
className="mt-2"
value={tempMission?.name}
onChange={(event) => {
setTempMission((prevState) => ({
...prevState!,
name: event.target.value,
}));
}}
/>
</div>
)}
<div className="mb-4">
<span className="font-bold mr-2 text-lg">Crew (Agents):</span>
<br />
{isEdit ? (
<TESelect
data={agents.map((agent) => ({
text: agent.role,
value: agent.role,
}))}
multiple
value={tempMission?.crew ?? []}
onValueChange={(event: any) => {
const newValue = event.map((item: any) => item.value);
setTempMission((prevState) => ({
...prevState!,
tools: newValue,
}));
}}
/>
) : (
mission?.crew.map((agent, i) => (
<>
<div
key={i}
className="bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1 sm:w-1/2"
>
{agent}
</div>
</>
))
)}
</div>
<div className="flex items-center mb-4">
<label className="font-bold mx-2">Verbose: </label>
{isEdit ? (
<Switch
defaultChecked={tempMission?.verbose}
onChange={(event) => {
setTempMission((prevState) => ({
...prevState!,
verbose: !!event.target.value,
}));
}}
/>
) : (
<Switch checked={mission?.verbose} disabled={true} />
)}
</div>
<div className="mb-4">
<label className="font-bold text-lg">Process:</label>
{isEdit ? (
<TESelect
data={[
{ text: "Sequential", value: "sequential" },
{ text: "Hierarchical", value: "hierarchical" },
]}
value={tempMission?.process}
onValueChange={(event: any) => {
setTempMission((prevState) => ({
...prevState!,
process: event.value,
}));
}}
/>
) : (
<span className="bg-blue-300 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1">
{mission?.process}
</span>
)}
</div>
<div className="mb-4">
<label className="font-bold text-lg">Tasks:</label>
{isEdit ? null : (
<div>
{mission?.tasks ? (
<div>
{mission.tasks.map((task, i) => (
<AccordionItem
key={i}
id={`task${i}`}
title={task.name}
description={task.description}
moreInfo={
<div className="ml-3">
<strong>Agent: </strong>
<span className="bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1 sm:w-1/2">
{task.agent}
</span>
</div>
}
/>
))}
</div>
) : (
<div>
There is no task, please add at least one task.
</div>
)}
</div>
)}
</div>
{mission?.result ? (
<div>
<label className="font-bold text-lg">Result:</label>
<div className="border-2 rounded p-2">
{mission?.result}
</div>
</div>
) : (
<div className="my-3">
<button className="mx-auto block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white">
Run
</button>
</div>
)}
</div>
</TEModalBody>
{!mission?.result && (
<TEModalFooter>
{!isEdit && (
<TERipple rippleColor="light">
<button
type="button"
onClick={() => setEdit(true)}
className="ml-1 inline-block rounded bg-success-600 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)]"
>
Edit
</button>
</TERipple>
)}
{isEdit && (
<>
<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"
onClick={() => setEdit(false)}
>
Close
</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)]"
>
Save changes
</button>
</TERipple>
</>
)}
</TEModalFooter>
)}
</TEModalContent>
</TEModalDialog>
</TEModal>
</div>
);
}

35
src/components/ui/accordion_item.tsx Normal file
View File

@@ -0,0 +1,35 @@
import React from "react";
export default function AccordionItem(props: {
key: any;
id: string;
title: string;
description: string;
moreInfo?: any;
}) {
const { key, id, title, description, moreInfo } = props;
return (
<div
key={key}
className="rounded-t-lg border border-neutral-200 bg-white dark:border-neutral-600 dark:bg-neutral-800"
>
<h2 className="mb-0" id="headingOne">
<button
className="group relative flex w-full items-center rounded-t-[15px] border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
type="button"
data-te-collapse-init
data-te-target={`#${id}`}
aria-expanded="true"
aria-controls={`id`}
>
{title}
<span className="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white"></span>
</button>
</h2>
<div id={id} className="!visible hidden my-1 py-1" data-te-collapse-item>
<div className="px-5 py-4">{description}</div>
{moreInfo ?? null}
</div>
</div>
);
}