Add New Agent Modal + replace TE Switch with TW Material Switch
This commit is contained in:
Eng. Elias
@@ -1,15 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import AgentModal from "@/components/modals/agent_modal";
|
||||
import NewAgentModal from "@/components/modals/new_agent_modal";
|
||||
import { Agent } from "@/types/agent";
|
||||
import { GET_AGENTS } from "@/utils/graphql_queries";
|
||||
import { useQuery } from "@apollo/client";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { Button } from "@material-tailwind/react";
|
||||
import { Button, IconButton } from "@material-tailwind/react";
|
||||
import { useState } from "react";
|
||||
|
||||
const AgentsPage = () => {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [showAgentModal, setShowAgentModal] = useState(false);
|
||||
const [showNewAgentModal, setShowNewAgentModal] = useState(false);
|
||||
|
||||
const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
|
||||
|
||||
@@ -29,45 +31,63 @@ const AgentsPage = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<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) => (
|
||||
<div key={i} className="w-full lg:w-1/2 p-3 relative">
|
||||
<div
|
||||
className={`flex flex-col ${
|
||||
i % 2 == 0 ? "lg:flex-row" : "lg:flex-row-reverse"
|
||||
} rounded overflow-hidden h-auto min-h-40 border`}
|
||||
>
|
||||
<img
|
||||
className="block h-auto w-full lg:w-48 flex-none bg-cover"
|
||||
src={agent.image ?? "/sailor.png"}
|
||||
alt="Agent"
|
||||
/>
|
||||
<div className="rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col leading-normal w-100">
|
||||
<div className="text-white font-bold text-lg mb-2 leading-tight">
|
||||
{agent.role}
|
||||
</div>
|
||||
<div className="text-slate-300 text-ellipsis">
|
||||
Goal: {agent.goal}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="absolute bottom-0 right-0 bg-blue-500 text-white px-4 py-2 rounded-bl"
|
||||
style={{ zIndex: 10 }}
|
||||
onClick={() => {
|
||||
setSelectedAgent(agent);
|
||||
setShowModal(true);
|
||||
}}
|
||||
<div>
|
||||
<div>
|
||||
<IconButton
|
||||
color="green"
|
||||
placeholder={undefined}
|
||||
className="float-right mr-5"
|
||||
onClick={() => {
|
||||
setShowNewAgentModal(true);
|
||||
}}
|
||||
>
|
||||
<Icon icon="mdi:add-bold" width="30" height="30" />
|
||||
</IconButton>
|
||||
<NewAgentModal
|
||||
showModal={showNewAgentModal}
|
||||
setShowModal={setShowNewAgentModal}
|
||||
/>
|
||||
</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) => (
|
||||
<div key={i} className="w-full lg:w-1/2 p-3 relative">
|
||||
<div
|
||||
className={`flex flex-col ${
|
||||
i % 2 == 0 ? "lg:flex-row" : "lg:flex-row-reverse"
|
||||
} rounded overflow-hidden h-auto min-h-40 border`}
|
||||
>
|
||||
<Icon icon="entypo:popup" width="20" height="20" />
|
||||
</button>
|
||||
<img
|
||||
className="block h-auto max-w-72 w-full lg:w-48 flex-none bg-cover"
|
||||
src={agent.image ?? "/sailor.png"}
|
||||
alt="Agent"
|
||||
/>
|
||||
<div className="rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col leading-normal w-100">
|
||||
<div className="text-white font-bold text-lg mb-2 leading-tight">
|
||||
{agent.role}
|
||||
</div>
|
||||
<div className="text-slate-300 text-ellipsis">
|
||||
Goal: {agent.goal}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="absolute bottom-0 right-0 bg-blue-500 text-white px-4 py-2 rounded-bl"
|
||||
style={{ zIndex: 10 }}
|
||||
onClick={() => {
|
||||
setSelectedAgent(agent);
|
||||
setShowAgentModal(true);
|
||||
}}
|
||||
>
|
||||
<Icon icon="entypo:popup" width="20" height="20" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<AgentModal
|
||||
agent={selectedAgent}
|
||||
showModal={showModal}
|
||||
setShowModal={setShowModal}
|
||||
/>
|
||||
))}
|
||||
<AgentModal
|
||||
agent={selectedAgent}
|
||||
showModal={showAgentModal}
|
||||
setShowModal={setShowAgentModal}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,8 +4,9 @@ export default function TWFileInput(props: {
|
||||
accept?: string;
|
||||
disabled?: boolean;
|
||||
multiple?: boolean;
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}) {
|
||||
const { accept, disabled, multiple } = props;
|
||||
const { accept, disabled, multiple, onChange = () => {} } = props;
|
||||
return (
|
||||
<input
|
||||
className="relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-neutral-700 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-3 file:py-[0.32rem] file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] hover:file:bg-neutral-200 focus:border-primary focus:text-neutral-700 focus:shadow-te-primary focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:file:bg-neutral-700 dark:file:text-neutral-100 dark:focus:border-primary"
|
||||
@@ -13,6 +14,7 @@ export default function TWFileInput(props: {
|
||||
accept={accept}
|
||||
disabled={disabled}
|
||||
multiple={multiple}
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Switch(props: {
|
||||
checked?: boolean;
|
||||
defaultChecked?: boolean;
|
||||
disabled?: boolean;
|
||||
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
||||
}) {
|
||||
const { checked, defaultChecked, disabled = false, onChange } = props;
|
||||
|
||||
return (
|
||||
<input
|
||||
className="mr-2 mt-[0.3rem] h-3.5 w-8 appearance-none rounded-[0.4375rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0.1875rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:-mt-[3px] checked:after:ml-[1.0625rem] checked:after:h-5 checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:ring-0 focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[3px_-1px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-5 focus:after:w-5 focus:after:rounded-full focus:after:content-[''] checked:focus:border-primary checked:focus:bg-primary checked:focus:before:ml-[1.0625rem] checked:focus:before:scale-100 checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-primary dark:checked:after:bg-primary dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca]"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
onChange={onChange}
|
||||
checked={checked}
|
||||
defaultChecked={defaultChecked}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -16,9 +16,9 @@ import {
|
||||
TETextarea,
|
||||
TESelect,
|
||||
} from "tw-elements-react";
|
||||
import Switch from "../inputs/switch";
|
||||
import TWFileInput from "../inputs/file";
|
||||
import { selectTheme } from "@/data/consts";
|
||||
import { Switch } from "@material-tailwind/react";
|
||||
|
||||
export default function AgentModal(props: {
|
||||
agent: Agent | null;
|
||||
@@ -139,6 +139,8 @@ export default function AgentModal(props: {
|
||||
<label className="font-bold mx-2">Allow Delegation: </label>
|
||||
{isEdit ? (
|
||||
<Switch
|
||||
crossOrigin={undefined}
|
||||
color="blue"
|
||||
defaultChecked={tempAgent?.allowDelegation}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
@@ -149,7 +151,9 @@ export default function AgentModal(props: {
|
||||
/>
|
||||
) : (
|
||||
<Switch
|
||||
checked={agent?.allowDelegation}
|
||||
crossOrigin={undefined}
|
||||
color="blue"
|
||||
defaultChecked={tempAgent?.allowDelegation}
|
||||
disabled={true}
|
||||
/>
|
||||
)}
|
||||
@@ -158,6 +162,8 @@ export default function AgentModal(props: {
|
||||
<label className="font-bold mx-2">Verbose: </label>
|
||||
{isEdit ? (
|
||||
<Switch
|
||||
crossOrigin={undefined}
|
||||
color="blue"
|
||||
defaultChecked={tempAgent?.verbose}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
@@ -167,7 +173,12 @@ export default function AgentModal(props: {
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Switch checked={agent?.verbose} disabled={true} />
|
||||
<Switch
|
||||
crossOrigin={undefined}
|
||||
color="blue"
|
||||
defaultChecked={tempAgent?.verbose}
|
||||
disabled={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,11 +14,11 @@ import {
|
||||
TEInput,
|
||||
TESelect,
|
||||
} from "tw-elements-react";
|
||||
import Switch from "../inputs/switch";
|
||||
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 { Switch } from "@material-tailwind/react";
|
||||
|
||||
export default function MissionModal(props: {
|
||||
mission: Mission | null;
|
||||
@@ -108,6 +108,8 @@ export default function MissionModal(props: {
|
||||
<label className="font-bold mx-2">Verbose: </label>
|
||||
{isEdit ? (
|
||||
<Switch
|
||||
crossOrigin={undefined}
|
||||
color="blue"
|
||||
defaultChecked={tempMission?.verbose}
|
||||
onChange={(event) => {
|
||||
setTempMission((prevState) => ({
|
||||
@@ -117,7 +119,12 @@ export default function MissionModal(props: {
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Switch checked={mission?.verbose} disabled={true} />
|
||||
<Switch
|
||||
crossOrigin={undefined}
|
||||
color="blue"
|
||||
checked={mission?.verbose}
|
||||
disabled={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
|
||||
193
src/components/modals/new_agent_modal.tsx
Normal file
193
src/components/modals/new_agent_modal.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import { selectTheme } from "@/data/consts";
|
||||
import { tools } from "@/data/data";
|
||||
import { Agent } from "@/types/agent";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
TEInput,
|
||||
TEModal,
|
||||
TEModalBody,
|
||||
TEModalContent,
|
||||
TEModalDialog,
|
||||
TEModalFooter,
|
||||
TEModalHeader,
|
||||
TERipple,
|
||||
TESelect,
|
||||
TETextarea,
|
||||
} from "tw-elements-react";
|
||||
import TWFileInput from "../inputs/file";
|
||||
import { Switch } from "@material-tailwind/react";
|
||||
|
||||
function NewAgentModal(props: { showModal: boolean; setShowModal: Function }) {
|
||||
const { showModal, setShowModal } = props;
|
||||
|
||||
const [tempAgent, setTempAgent] = useState<Agent | null>();
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TEModal show={showModal} setShow={setShowModal}>
|
||||
<TEModalDialog size="lg">
|
||||
<TEModalContent style={{ backgroundColor: "#282828" }}>
|
||||
<TEModalHeader>
|
||||
<h1 className="text-xl font-medium leading-normal">
|
||||
Add new agent to you Crew
|
||||
</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 className="sm:flex">
|
||||
<div className="sm:w-1/2">
|
||||
<div className="mb-4">
|
||||
<label className="font-bold text-lg">Role:</label>
|
||||
<TEInput
|
||||
type="text"
|
||||
className="mt-2"
|
||||
value={tempAgent?.role}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
role: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="font-bold text-lg">Goal:</label>
|
||||
<TEInput
|
||||
type="text"
|
||||
className="mt-2"
|
||||
value={tempAgent?.goal}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
goal: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="font-bold text-lg">Backstory:</label>
|
||||
<TETextarea
|
||||
rows={4}
|
||||
value={tempAgent?.backstory || ""}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
backstory: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap mb-4">
|
||||
<span className="font-bold mr-2 text-lg">Tools:</span>
|
||||
<TESelect
|
||||
data={tools}
|
||||
multiple
|
||||
value={tempAgent?.tools}
|
||||
onValueChange={(event: any) => {
|
||||
const newValue = event.map((item: any) => item.value);
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
tools: newValue,
|
||||
}));
|
||||
}}
|
||||
className="w-full"
|
||||
theme={selectTheme}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center mb-4">
|
||||
<label className="font-bold mx-2">Allow Delegation: </label>
|
||||
<Switch
|
||||
crossOrigin={undefined}
|
||||
color="blue"
|
||||
defaultChecked={tempAgent?.allowDelegation}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
allowDelegation: !!event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center mb-4">
|
||||
<label className="font-bold mx-2">Verbose: </label>
|
||||
<Switch
|
||||
crossOrigin={undefined}
|
||||
color="blue"
|
||||
defaultChecked={tempAgent?.verbose}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
verbose: !!event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4 sm:w-1/2">
|
||||
<label className="font-bold mx-2">Agent Image: </label>
|
||||
<TWFileInput accept="image/*" onChange={handleImageChange} />
|
||||
{selectedImage && (
|
||||
<img
|
||||
// @ts-ignore
|
||||
src={selectedImage}
|
||||
alt="Agent Image"
|
||||
className="mx-auto my-3 max-w-72 h-auto"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TEModalBody>
|
||||
|
||||
<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"
|
||||
onClick={() => setShowModal(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)]"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</TERipple>
|
||||
</TEModalFooter>
|
||||
</TEModalContent>
|
||||
</TEModalDialog>
|
||||
</TEModal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewAgentModal;
|
||||
Reference in New Issue
Block a user