Add New Agent Modal + replace TE Switch with TW Material Switch

src/app/agents/page.tsx

@@ -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">
+    <div>
-      {data.agents.map((agent: Agent, i: number) => (
+      <div>
-        <div key={i} className="w-full lg:w-1/2 p-3 relative">
+        <IconButton
-          <div
+          color="green"
-            className={`flex flex-col ${
+          placeholder={undefined}
-              i % 2 == 0 ? "lg:flex-row" : "lg:flex-row-reverse"
+          className="float-right mr-5"
-            } rounded overflow-hidden h-auto min-h-40 border`}
+          onClick={() => {
-          >
+            setShowNewAgentModal(true);
-            <img
+          }}
-              className="block h-auto w-full lg:w-48 flex-none bg-cover"
+        >
-              src={agent.image ?? "/sailor.png"}
+          <Icon icon="mdi:add-bold" width="30" height="30" />
-              alt="Agent"
+        </IconButton>
-            />
+        <NewAgentModal
-            <div className="rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col leading-normal w-100">
+          showModal={showNewAgentModal}
-              <div className="text-white font-bold text-lg mb-2 leading-tight">
+          setShowModal={setShowNewAgentModal}
-                {agent.role}
+        />
-              </div>
+      </div>
-              <div className="text-slate-300 text-ellipsis">
+      <div className="container m-auto flex flex-wrap flex-col md:flex-row items-center justify-start p-2">
-                Goal: {agent.goal}
+        {data.agents.map((agent: Agent, i: number) => (
-              </div>
+          <div key={i} className="w-full lg:w-1/2 p-3 relative">
-            </div>
+            <div
-            <button
+              className={`flex flex-col ${
-              className="absolute bottom-0 right-0 bg-blue-500 text-white px-4 py-2 rounded-bl"
+                i % 2 == 0 ? "lg:flex-row" : "lg:flex-row-reverse"
-              style={{ zIndex: 10 }}
+              } rounded overflow-hidden h-auto min-h-40 border`}
-              onClick={() => {
-                setSelectedAgent(agent);
-                setShowModal(true);
-              }}
             >
-              <Icon icon="entypo:popup" width="20" height="20" />
+              <img
-            </button>
+                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
-      <AgentModal
+          agent={selectedAgent}
-        agent={selectedAgent}
+          showModal={showAgentModal}
-        showModal={showModal}
+          setShowModal={setShowAgentModal}
-        setShowModal={setShowModal}
+        />
-      />
+      </div>
     </div>
   );
 };

src/components/inputs/file.tsx

@@ -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}
     />
   );
 }

src/components/inputs/switch.tsx

@@ -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}
-    />
-  );
-}

src/components/modals/agent_modal.tsx

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

src/components/modals/mission_modal.tsx

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

src/components/modals/new_agent_modal.tsx

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