UI of agents
This commit is contained in:
Eng. Elias
18
src/components/inputs/file.tsx
Normal file
18
src/components/inputs/file.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
export default function TWFileInput(props: {
|
||||
accept?: string;
|
||||
disabled?: boolean;
|
||||
multiple?: boolean;
|
||||
}) {
|
||||
const { accept, disabled, multiple } = 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"
|
||||
type="file"
|
||||
accept={accept}
|
||||
disabled={disabled}
|
||||
multiple={multiple}
|
||||
/>
|
||||
);
|
||||
}
|
||||
22
src/components/inputs/switch.tsx
Normal file
22
src/components/inputs/switch.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
226
src/components/modals/agent-modal.tsx
Normal file
226
src/components/modals/agent-modal.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import { tools } from "@/data/data";
|
||||
import { Agent } from "@/types/agent";
|
||||
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 TWFileInput from "../inputs/file";
|
||||
|
||||
export default function AgentModal(props: {
|
||||
agent: Agent | null;
|
||||
showModal: boolean;
|
||||
setShowModal: Function;
|
||||
}): JSX.Element {
|
||||
const { agent, showModal, setShowModal } = props;
|
||||
|
||||
const [isEdit, setEdit] = useState(false);
|
||||
|
||||
const [tempAgent, setTempAgent] = useState<Agent | null>(agent);
|
||||
|
||||
useEffect(() => {
|
||||
setTempAgent(agent);
|
||||
}, [agent]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TEModal show={showModal} setShow={setShowModal}>
|
||||
<TEModalDialog size="lg">
|
||||
<TEModalContent style={{ backgroundColor: "#282828" }}>
|
||||
<TEModalHeader>
|
||||
<h1 className="text-xl font-medium leading-normal">
|
||||
{agent?.role}
|
||||
</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">
|
||||
{isEdit && (
|
||||
<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>
|
||||
{isEdit ? (
|
||||
<TEInput
|
||||
type="text"
|
||||
className="mt-2"
|
||||
value={tempAgent?.goal}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
goal: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div>{agent?.goal}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="font-bold text-lg">Backstory:</label>
|
||||
{isEdit ? (
|
||||
<TETextarea
|
||||
rows={4}
|
||||
value={tempAgent?.backstory}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
backstory: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div>{agent?.backstory}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap mb-4">
|
||||
<span className="font-bold mr-2 text-lg">Tools:</span>
|
||||
{isEdit ? (
|
||||
<TESelect
|
||||
data={tools}
|
||||
multiple
|
||||
value={tempAgent?.tools}
|
||||
onValueChange={(event: any) => {
|
||||
const newValue = event.map((item: any) => item.value);
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
tools: newValue,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
agent?.tools.map((tool) => (
|
||||
<span
|
||||
key={tool}
|
||||
className="bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2"
|
||||
>
|
||||
{tool}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center mb-4">
|
||||
<label className="font-bold mx-2">Allow Delegation: </label>
|
||||
{isEdit ? (
|
||||
<Switch
|
||||
defaultChecked={tempAgent?.allowDelegation}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
allowDelegation: !!event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Switch
|
||||
checked={agent?.allowDelegation}
|
||||
disabled={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center mb-4">
|
||||
<label className="font-bold mx-2">Verbose: </label>
|
||||
{isEdit ? (
|
||||
<Switch
|
||||
defaultChecked={tempAgent?.verbose}
|
||||
onChange={(event) => {
|
||||
setTempAgent((prevState) => ({
|
||||
...prevState!,
|
||||
verbose: !!event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Switch checked={agent?.verbose} disabled={true} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4 sm:w-1/2">
|
||||
{isEdit ? (
|
||||
<>
|
||||
<label className="font-bold mx-2">Agent Image: </label>
|
||||
<TWFileInput accept="image/*" />
|
||||
</>
|
||||
) : (
|
||||
<img
|
||||
src={agent?.image}
|
||||
alt="Software Engineer"
|
||||
className="w-full rounded-lg"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TEModalBody>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user