🤖 Add help modal

src/components/Dialog.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import Button from "./Button";
+import { FaGithub, FaTwitter } from "react-icons/fa";
+
+export default function Dialog({
+  showModal,
+  setShowModal,
+}: {
+  showModal: boolean;
+  setShowModal: (showModal: boolean) => void;
+}) {
+  return (
+    <>
+      {showModal ? (
+        <>
+          <div
+            className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-black/70 p-3 font-mono text-white outline-none transition-all transition-all focus:outline-none"
+            onClick={() => setShowModal(false)}
+          >
+            <div className="relative mx-auto my-6 w-auto max-w-3xl rounded-lg border-2 border-zinc-600">
+              {/*content*/}
+              <div className="relative flex w-full flex-col rounded-lg border-0 bg-[#3a3a3a] shadow-lg outline-none focus:outline-none">
+                {/*header*/}
+                <div className="flex items-start justify-between rounded-t border-b-2 border-solid border-white/20 p-5">
+                  <h3 className="font-mono text-3xl font-semibold">
+                    Welcome to AgentGPT 🤖
+                  </h3>
+                  <button
+                    className="float-right ml-auto border-0 bg-transparent p-1 text-3xl font-semibold leading-none opacity-5 outline-none focus:outline-none"
+                    onClick={() => setShowModal(false)}
+                  >
+                    <span className="block h-6 w-6 bg-transparent text-2xl opacity-5 outline-none focus:outline-none">
+                      ×
+                    </span>
+                  </button>
+                </div>
+                {/*body*/}
+                <div className="text-md relative my-3 flex-auto p-3 leading-relaxed">
+                  <p>
+                    <strong>AgentGPT</strong> allows you to configure and deploy
+                    Autonomous AI agents. Name your own custom AI and have it
+                    embark on any goal imaginable. It will attempt to reach the
+                    goal by thinking of tasks to do, executing them, and
+                    learning from the results 🚀.
+                  </p>
+                  <p>
+                    <br />
+                    This platform is currently in beta, we are currently working
+                    on:
+                    <ul className="ml-5 list-inside list-disc">
+                      <li>Long term memory 🧠</li>
+                      <li>Web browsing 🌐</li>
+                      <li>Interaction with websites and people 👨‍👩‍👦</li>
+                    </ul>
+                    <p className="mt-2">Follow the journey below:</p>
+                  </p>
+                  <div className="mt-4 flex w-full items-center justify-center gap-5">
+                    <div
+                      className="cursor-pointer rounded-full bg-black/30 p-3 hover:bg-black/70"
+                      onClick={() =>
+                        window.open("https://twitter.com/", "_blank")
+                      }
+                    >
+                      <FaTwitter size={30} />
+                    </div>
+                    <div
+                      className="cursor-pointer rounded-full bg-black/30 p-3 hover:bg-black/70"
+                      onClick={() =>
+                        window.open(
+                          "https://github.com/reworkd/AgentGPT",
+                          "_blank"
+                        )
+                      }
+                    >
+                      <FaGithub size={30} />
+                    </div>
+                  </div>
+                </div>
+                {/*footer*/}
+                <div className="flex items-center justify-end rounded-b border-t-2 border-solid border-white/20 p-2">
+                  <Button onClick={() => setShowModal(false)}>Close</Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}

src/components/Drawer.tsx

@@ -4,13 +4,13 @@ import { BiPlus } from "react-icons/bi";
 import FadeOut from "./motions/FadeOut";
 import { AnimatePresence } from "framer-motion";
 
-const Drawer = () => {
+const Drawer = ({ handleHelp }: { handleHelp: () => void }) => {
   const [agents, setAgents] = React.useState<string[]>([]);
 
   return (
     <div
       id="drawer"
-      className="z-50 m-0 hidden h-screen w-72 flex-col justify-between bg-zinc-900 p-3 font-mono text-white shadow-3xl md:flex"
+      className="z-30 m-0 hidden h-screen w-72 flex-col justify-between bg-zinc-900 p-3 font-mono text-white shadow-3xl md:flex"
     >
       <div className="flex flex-col gap-1 overflow-hidden">
         <DrawerItem
@@ -47,7 +47,7 @@ const Drawer = () => {
         <DrawerItem
           icon={<FaQuestionCircle />}
           text="Help"
-          onClick={() => alert("No u.")}
+          onClick={handleHelp}
         />
         <DrawerItem
           icon={<FaTwitter />}

src/pages/index.tsx

@@ -1,7 +1,7 @@
 import { type NextPage } from "next";
 import Badge from "../components/Badge";
 import DefaultLayout from "../layout/default";
-import React from "react";
+import React, { useEffect } from "react";
 import type { Message } from "../components/ChatWindow";
 import ChatWindow from "../components/ChatWindow";
 import Drawer from "../components/Drawer";
@@ -12,6 +12,7 @@ import PopIn from "../components/motions/popin";
 import { VscLoading } from "react-icons/vsc";
 import AutonomousAgent from "../components/AutonomousAgent";
 import Expand from "../components/motions/expand";
+import Dialog from "../components/Dialog";
 
 const Home: NextPage = () => {
   const [name, setName] = React.useState<string>("");
@@ -20,6 +21,13 @@ const Home: NextPage = () => {
 
   const [messages, setMessages] = React.useState<Message[]>([]);
 
+  const [showModal, setShowModal] = React.useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setShowModal(true);
+    }, 1700);
+  }, []);
+
   const handleNewGoal = () => {
     const addMessage = (message: Message) =>
       setMessages((prev) => [...prev, message]);
@@ -32,8 +40,9 @@ const Home: NextPage = () => {
 
   return (
     <DefaultLayout>
+      <Dialog showModal={showModal} setShowModal={setShowModal} />
       <main className="flex h-screen w-screen flex-row">
-        <Drawer />
+        <Drawer handleHelp={() => setShowModal(true)} />
         <div
           id="content"
           className="z-10 flex h-screen w-full items-center justify-center p-2 px-4"