UI of agents

package.json

@@ -9,23 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.0"
+    "tw-elements-react": "^1.0.0-alpha2"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
+    "@iconify/react": "^4.1.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "typescript": "^5",
+    "typescript": "^5"
-    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
-    "@iconify/react": "^4.1.1",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3"
   }
 }

src/app/agents/page.tsx

@@ -1,7 +1,56 @@
+"use client";
+
+import AgentModal from "@/components/modals/agent-modal";
+import { agents } from "@/data/data";
+import { Agent } from "@/types/agent";
+import { Icon } from "@iconify/react";
+import { useState } from "react";
+
 const ExplorePage = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
+
   return (
-    <div>
+    <div className="container m-auto flex flex-wrap flex-col md:flex-row items-center justify-start p-2">
-      <span className="px-8 mt-10 font-bold text-3xl">Agents Page</span>
+      {agents.map((agent, i) => (
+        <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}
+              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);
+              }}
+            >
+              <Icon icon="entypo:popup" width="20" height="20" />
+            </button>
+          </div>
+        </div>
+      ))}
+      <AgentModal
+        agent={selectedAgent}
+        showModal={showModal}
+        setShowModal={setShowModal}
+      />
     </div>
   );
 };

src/components/inputs/file.tsx

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

src/components/inputs/switch.tsx

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

src/components/modals/agent-modal.tsx

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

src/data/data.ts

@@ -0,0 +1,54 @@
+import { Agent } from "@/types/agent";
+
+export const agents: Array<Agent> = [
+  {
+    role: "Senior Software Engineer",
+    goal: "Create software as needed",
+    backstory: `
+        You are a Senior Software Engineer at a leading tech think tank.
+		Your expertise in programming in python. and do your best to
+		produce perfect code
+    `,
+    tools: ["tool1", "tool2"],
+    allowDelegation: false,
+    verbose: true,
+    image:
+      "https://cdn.pixabay.com/photo/2021/08/04/13/06/software-developer-6521720_1280.jpg",
+  },
+  {
+    role: "Software Quality Control Engineer",
+    goal: "create prefect code, by analizing the code that is given for errors",
+    backstory: `
+        You are a software engineer that specializes in checking code for errors.
+        You have an eye for detail and a knack for finding hidden bugs.
+        You check for missing imports, variable declarations, mismatched brackets and syntax errors.
+        You also check for security vulnerabilities, and logic errors.
+    `,
+    tools: [],
+    allowDelegation: false,
+    verbose: true,
+    image:
+      "https://cdn.pixabay.com/photo/2021/08/04/13/06/software-developer-6521720_1280.jpg",
+  },
+  {
+    role: "Chief Software Quality Control Engineer",
+    goal: "Ensure that the code does the job that it is supposed to do",
+    backstory: `
+        You feel that programmers always do only half the job, so you are
+        super dedicate to make high quality code.
+    `,
+    tools: [],
+    allowDelegation: false,
+    verbose: true,
+    image:
+      "https://cdn.pixabay.com/photo/2021/08/04/13/06/software-developer-6521720_1280.jpg",
+  },
+];
+
+export const tools = [
+  { text: "tool1", value: "tool1" },
+  { text: "tool2", value: "tool2" },
+  { text: "tool3", value: "tool3" },
+  { text: "tool4", value: "tool4" },
+  { text: "tool5", value: "tool5" },
+];

src/types/agent.ts

@@ -0,0 +1,9 @@
+export type Agent = {
+  role: string;
+  goal: string;
+  backstory: string;
+  tools: Array<string>;
+  allowDelegation: boolean;
+  verbose: boolean;
+  image: string;
+};

tailwind.config.ts

@@ -5,6 +5,7 @@ const config: Config = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/tw-elements-react/dist/js/**/*.js",
   ],
   theme: {
     extend: {
@@ -15,6 +16,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [],
+  plugins: [require("tw-elements-react/dist/plugin.cjs")],
 };
 export default config;