Force auth frontend (#435)

src/components/ChatWindow.tsx

@@ -36,6 +36,7 @@ interface ChatWindowProps extends HeaderProps {
   fullscreen?: boolean;
   scrollToBottom?: boolean;
   displaySettings?: boolean; // Controls if settings are displayed at the bottom of the ChatWindow
+  openSorryDialog?: () => void;
 }
 
 const messageListId = "chat-window-message-list";
@@ -49,6 +50,7 @@ const ChatWindow = ({
   fullscreen,
   scrollToBottom,
   displaySettings,
+  openSorryDialog,
 }: ChatWindowProps) => {
   const [t] = useTranslation();
   const [hasUserScrolled, setHasUserScrolled] = useState(false);
@@ -76,6 +78,18 @@ const ChatWindow = ({
     }
   });
 
+  const handleChangeWebSearch = (value: boolean) => {
+    // Change this value when we can no longer support web search
+    const WEB_SEARCH_ALLOWED = false;
+
+    if (WEB_SEARCH_ALLOWED) {
+      setIsWebSearchEnabled(value);
+    } else {
+      openSorryDialog?.();
+      setIsWebSearchEnabled(false);
+    }
+  };
+
   return (
     <div
       className={
@@ -127,23 +141,27 @@ const ChatWindow = ({
               <ChatMessage
                 message={{
                   type: MESSAGE_TYPE_SYSTEM,
-                  value: `${t("YOU_CAN_PROVIDE_YOUR_API_KEY", { ns: "chat" })}`,
+                  value: `${t("YOU_CAN_PROVIDE_YOUR_API_KEY", {
+                    ns: "chat",
+                  })}`,
                 }}
               />
             </Expand>
           </>
         )}
       </div>
       {displaySettings && (
-        <div className="flex items-center justify-center">
-          <div className="m-1 flex items-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
-            <p className="font-mono text-sm">Web search</p>
-            <Switch
-              value={isWebSearchEnabled}
-              onChange={setIsWebSearchEnabled}
-            />
+        <>
+          <div className="flex items-center justify-center">
+            <div className="m-1 flex items-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
+              <p className="font-mono text-sm">Web search</p>
+              <Switch
+                value={isWebSearchEnabled}
+                onChange={handleChangeWebSearch}
+              />
+            </div>
           </div>
-        </div>
+        </>
       )}
     </div>
   );

src/components/Dialog.tsx

@@ -4,21 +4,19 @@ import Button from "./Button";
 import { useTranslation } from "next-i18next";
 import clsx from "clsx";
 
-export default function Dialog({
+const Dialog = ({
   header,
   children,
   isShown,
   close,
   footerButton,
-  contentClassName,
 }: {
   header: React.ReactNode;
   children: React.ReactNode;
   isShown: boolean;
   close: () => void;
   footerButton?: React.ReactNode;
-  contentClassName?: string;
-}) {
+}) => {
   const [t] = useTranslation();
   if (!isShown) {
     return <>{null}</>;
@@ -48,8 +46,7 @@ export default function Dialog({
           {/*body*/}
           <div
             className={clsx(
-              "text-md relative max-h-[50vh] flex-auto overflow-y-auto p-5 leading-relaxed md:p-7",
-              contentClassName
+              "text-md relative max-h-[50vh] flex-auto overflow-y-auto p-5 leading-relaxed md:p-7"
             )}
           >
             {children}
@@ -68,4 +65,6 @@ export default function Dialog({
       </div>
     </div>
   );
-}
+};
+
+export default Dialog;

src/components/Drawer.tsx

@@ -283,8 +283,8 @@ const AuthItem: React.FC<{
   const [t] = useTranslation();
   const icon = session?.user ? <FaSignOutAlt /> : <FaSignInAlt />;
   const text = session?.user
-    ? `${t("SIGN_IN", { ns: "drawer" })}`
-    : `${t("SIGN_OUT", { ns: "drawer" })}`;
+    ? `${t("SIGN_OUT", { ns: "drawer" })}`
+    : `${t("SIGN_IN", { ns: "drawer" })}`;
   const onClick = session?.user ? signOut : signIn;
 
   return <DrawerItem icon={icon} text={text} onClick={onClick} />;

src/components/HelpDialog.tsx

@@ -13,14 +13,15 @@ export default function HelpDialog({
   const [t] = useTranslation();
   return (
     <Dialog
-      header={t("WELCOME_TO_AGENT_GPT", { ns: "help" })}
+      header={`${t("WELCOME_TO_AGENT_GPT", { ns: "help" })} 🤖`}
       isShown={show}
       close={close}
     >
-      <div className="text-md relative flex-auto p-2 leading-relaxed">
+      <div>
         <p>
           <strong>AgentGPT</strong> {t("INTRODUCING_AGENTGPT", { ns: "help" })}
         </p>
+        <br />
         <div>
           {t("TO_LEARN_MORE_ABOUT_AGENTGPT", {
             ns: "help",
@@ -31,9 +32,9 @@ export default function HelpDialog({
           >
             {t("AGENTGPT_DOCUMENTATION", { ns: "help" })}
           </a>
-          <br />
-          <p className="mt-2">{t("FOLLOW_THE_JOURNEY", { ns: "help" })}</p>
         </div>
+        <br />
+        <p className="mt-2">{t("FOLLOW_THE_JOURNEY", { ns: "help" })}</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"

src/components/SettingsDialog.tsx

@@ -17,7 +17,7 @@ import type { ModelSettings, SettingModel } from "../utils/types";
 import LanguageCombobox from "./LanguageCombobox";
 import clsx from "clsx";
 import { AUTOMATIC_MODE, PAUSE_MODE } from "../types/agentTypes";
-import { useAgentStore } from "../components/stores";
+import { useAgentStore } from "./stores";
 import { useTranslation } from "next-i18next";
 
 export const SettingsDialog: React.FC<{
@@ -172,7 +172,6 @@ export const SettingsDialog: React.FC<{
           })}`}</Button>
         </>
       }
-      contentClassName="text-md relative flex flex-col gap-2 p-2 leading-relaxed"
     >
       <p>
         Get your own OpenAI API key{" "}
@@ -213,56 +212,58 @@ export const SettingsDialog: React.FC<{
           </b>
         </p>
       )}
-      <Input
-        left={
-          <>
-            <FaKey />
-            <span className="ml-2">{`${t("API_KEY", {
-              ns: "settings",
-            })}`}</span>
-          </>
-        }
-        placeholder={"sk-..."}
-        type="password"
-        value={settings.customApiKey}
-        onChange={(e) => updateSettings("customApiKey", e.target.value)}
-      />
-      <LanguageCombobox />
-      <Input
-        left={
-          <>
-            <FaMicrochip />
-            <span className="ml-2">{`${t("LABEL_MODEL", {
-              ns: "settings",
-            })}`}</span>
-          </>
-        }
-        type="combobox"
-        value={settings.customModelName}
-        onChange={() => null}
-        setValue={(e) => updateSettings("customModelName", e)}
-        attributes={{ options: GPT_MODEL_NAMES }}
-        disabled={disabled}
-      />
-      <Input
-        left={
-          <>
-            <FaTachometerAlt />
-            <span className="ml-2">Mode: </span>
-          </>
-        }
-        value={agentMode}
-        disabled={agent !== null}
-        onChange={() => null}
-        setValue={updateAgentMode as (agentMode: string) => void}
-        type="combobox"
-        toolTipProperties={{
-          message: `${AUTOMATIC_MODE} (Default): Agent automatically executes every task. \n\n${PAUSE_MODE}: Agent pauses after every set of task(s)`,
-          disabled: false,
-        }}
-        attributes={{ options: [AUTOMATIC_MODE, PAUSE_MODE] }}
-      />
-      <Accordion child={advancedSettings} name={t("Advanced Settings")} />
+      <div className="mt-2 flex flex-col gap-2">
+        <Input
+          left={
+            <>
+              <FaKey />
+              <span className="ml-2">{`${t("API_KEY", {
+                ns: "settings",
+              })}`}</span>
+            </>
+          }
+          placeholder={"sk-..."}
+          type="password"
+          value={settings.customApiKey}
+          onChange={(e) => updateSettings("customApiKey", e.target.value)}
+        />
+        <LanguageCombobox />
+        <Input
+          left={
+            <>
+              <FaMicrochip />
+              <span className="ml-2">{`${t("LABEL_MODEL", {
+                ns: "settings",
+              })}`}</span>
+            </>
+          }
+          type="combobox"
+          value={settings.customModelName}
+          onChange={() => null}
+          setValue={(e) => updateSettings("customModelName", e)}
+          attributes={{ options: GPT_MODEL_NAMES }}
+          disabled={disabled}
+        />
+        <Input
+          left={
+            <>
+              <FaTachometerAlt />
+              <span className="ml-2">Mode: </span>
+            </>
+          }
+          value={agentMode}
+          disabled={agent !== null}
+          onChange={() => null}
+          setValue={updateAgentMode as (agentMode: string) => void}
+          type="combobox"
+          toolTipProperties={{
+            message: `${AUTOMATIC_MODE} (Default): Agent automatically executes every task. \n\n${PAUSE_MODE}: Agent pauses after every set of task(s)`,
+            disabled: false,
+          }}
+          attributes={{ options: [AUTOMATIC_MODE, PAUSE_MODE] }}
+        />
+        <Accordion child={advancedSettings} name={t("Advanced Settings")} />
+      </div>
     </Dialog>
   );
 };

src/components/SignInDialog.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Dialog from "./Dialog";
+import Button from "./Button";
+import { useAuth } from "../hooks/useAuth";
+
+export interface SignInDialogProps {
+  show: boolean;
+  close: () => void;
+}
+
+export const SignInDialog = ({ show, close }: SignInDialogProps) => {
+  const { signIn } = useAuth();
+
+  return (
+    <Dialog
+      header="Sign in 🔐"
+      isShown={show}
+      close={close}
+      footerButton={<Button onClick={() => void signIn()}>Sign in</Button>}
+    >
+      <p>
+        Please{" "}
+        <a className="link" onClick={() => void signIn()}>
+          sign in
+        </a>{" "}
+        to deploy an Agent! 🤖
+      </p>
+    </Dialog>
+  );
+};

src/components/SorryDialog.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Dialog from "./Dialog";
+
+export interface WebSearchDialogProps {
+  show: boolean;
+  close: () => void;
+}
+
+export const SorryDialog = ({ show, close }: WebSearchDialogProps) => {
+  return (
+    <Dialog header="Sorry! 😭" isShown={show} close={close}>
+      <p>Due to costs, we&apos;ve had to momentarily disable web search 🌐</p>
+      <br />
+      <p>
+        Please monitor our&nbsp;
+        <a
+          className="link"
+          href="https://reworkd.github.io/AgentGPT-Documentation/docs/roadmap"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Roadmap
+        </a>&nbsp;
+        to understand when it may be back up.
+      </p>
+    </Dialog>
+  );
+};

src/pages/index.tsx

@@ -29,6 +29,8 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useSettings } from "../hooks/useSettings";
 import { languages } from "../utils/languages";
 import nextI18NextConfig from "../../next-i18next.config.js";
+import { SorryDialog } from "../components/SorryDialog";
+import { SignInDialog } from "../components/SignInDialog";
 
 const Home: NextPage = () => {
   const { i18n } = useTranslation();
@@ -53,6 +55,8 @@ const Home: NextPage = () => {
 
   const [showHelpDialog, setShowHelpDialog] = React.useState(false);
   const [showSettingsDialog, setShowSettingsDialog] = React.useState(false);
+  const [showSorryDialog, setShowSorryDialog] = React.useState(false);
+  const [showSignInDialog, setShowSignInDialog] = React.useState(false);
   const [hasSaved, setHasSaved] = React.useState(false);
   const agentUtils = useAgent();
 
@@ -98,6 +102,12 @@ const Home: NextPage = () => {
     agent != null || isEmptyOrBlank(name) || isEmptyOrBlank(goalInput);
 
   const handleNewGoal = () => {
+    // Do not force login locally for people that don't have auth setup
+    if (session === null && process.env.NODE_ENV === "production") {
+      setShowSignInDialog(true);
+      return;
+    }
+
     const newAgent = new AutonomousAgent(
       name.trim(),
       goalInput.trim(),
@@ -187,6 +197,14 @@ const Home: NextPage = () => {
         show={showSettingsDialog}
         close={() => setShowSettingsDialog(false)}
       />
+      <SorryDialog
+        show={showSorryDialog}
+        close={() => setShowSorryDialog(false)}
+      />
+      <SignInDialog
+        show={showSignInDialog}
+        close={() => setShowSignInDialog(false)}
+      />
       <main className="flex min-h-screen flex-row">
         <Drawer
           showHelp={() => setShowHelpDialog(true)}
@@ -247,7 +265,8 @@ const Home: NextPage = () => {
                     : undefined
                 }
                 scrollToBottom
-                // displaySettings (Disable web search)
+                displaySettings
+                openSorryDialog={() => setShowSorryDialog(true)}
               />
               {tasks.length > 0 && <TaskWindow />}
             </Expand>