Skip to content

Commit d863e14

Browse files
asim-shresthaasim-shrestha
authored
Force auth frontend (#435)
1 parent c8a9692 commit d863e14

File tree

8 files changed

+171
-75
lines changed

8 files changed

+171
-75
lines changed

‎src/components/ChatWindow.tsx

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ interface ChatWindowProps extends HeaderProps {
3636
fullscreen?: boolean;
3737
scrollToBottom?: boolean;
3838
displaySettings?: boolean; // Controls if settings are displayed at the bottom of the ChatWindow
39+
openSorryDialog?: () => void;
3940
}
4041

4142
const messageListId = "chat-window-message-list";
@@ -49,6 +50,7 @@ const ChatWindow = ({
4950
fullscreen,
5051
scrollToBottom,
5152
displaySettings,
53+
openSorryDialog,
5254
}: ChatWindowProps) => {
5355
const [t] = useTranslation();
5456
const [hasUserScrolled, setHasUserScrolled] = useState(false);
@@ -76,6 +78,18 @@ const ChatWindow = ({
7678
}
7779
});
7880

81+
const handleChangeWebSearch = (value: boolean) => {
82+
// Change this value when we can no longer support web search
83+
const WEB_SEARCH_ALLOWED = false;
84+
85+
if (WEB_SEARCH_ALLOWED) {
86+
setIsWebSearchEnabled(value);
87+
} else {
88+
openSorryDialog?.();
89+
setIsWebSearchEnabled(false);
90+
}
91+
};
92+
7993
return (
8094
<div
8195
className={
@@ -127,23 +141,27 @@ const ChatWindow = ({
127141
<ChatMessage
128142
message={{
129143
type: MESSAGE_TYPE_SYSTEM,
130-
value: `${t("YOU_CAN_PROVIDE_YOUR_API_KEY", { ns: "chat" })}`,
144+
value: `${t("YOU_CAN_PROVIDE_YOUR_API_KEY", {
145+
ns: "chat",
146+
})}`,
131147
}}
132148
/>
133149
</Expand>
134150
</>
135151
)}
136152
</div>
137153
{displaySettings && (
138-
<div className="flex items-center justify-center">
139-
<div className="m-1 flex items-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
140-
<p className="font-mono text-sm">Web search</p>
141-
<Switch
142-
value={isWebSearchEnabled}
143-
onChange={setIsWebSearchEnabled}
144-
/>
154+
<>
155+
<div className="flex items-center justify-center">
156+
<div className="m-1 flex items-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
157+
<p className="font-mono text-sm">Web search</p>
158+
<Switch
159+
value={isWebSearchEnabled}
160+
onChange={handleChangeWebSearch}
161+
/>
162+
</div>
145163
</div>
146-
</div>
164+
</>
147165
)}
148166
</div>
149167
);

‎src/components/Dialog.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,19 @@ import Button from "./Button";
44
import { useTranslation } from "next-i18next";
55
import clsx from "clsx";
66

7-
export default function Dialog({
7+
const Dialog = ({
88
header,
99
children,
1010
isShown,
1111
close,
1212
footerButton,
13-
contentClassName,
1413
}: {
1514
header: React.ReactNode;
1615
children: React.ReactNode;
1716
isShown: boolean;
1817
close: () => void;
1918
footerButton?: React.ReactNode;
20-
contentClassName?: string;
21-
}) {
19+
}) => {
2220
const [t] = useTranslation();
2321
if (!isShown) {
2422
return <>{null}</>;
@@ -48,8 +46,7 @@ export default function Dialog({
4846
{/*body*/}
4947
<div
5048
className={clsx(
51-
"text-md relative max-h-[50vh] flex-auto overflow-y-auto p-5 leading-relaxed md:p-7",
52-
contentClassName
49+
"text-md relative max-h-[50vh] flex-auto overflow-y-auto p-5 leading-relaxed md:p-7"
5350
)}
5451
>
5552
{children}
@@ -68,4 +65,6 @@ export default function Dialog({
6865
</div>
6966
</div>
7067
);
71-
}
68+
};
69+
70+
export default Dialog;

‎src/components/Drawer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -283,8 +283,8 @@ const AuthItem: React.FC<{
283283
const [t] = useTranslation();
284284
const icon = session?.user ? <FaSignOutAlt /> : <FaSignInAlt />;
285285
const text = session?.user
286-
? `${t("SIGN_IN", { ns: "drawer" })}`
287-
: `${t("SIGN_OUT", { ns: "drawer" })}`;
286+
? `${t("SIGN_OUT", { ns: "drawer" })}`
287+
: `${t("SIGN_IN", { ns: "drawer" })}`;
288288
const onClick = session?.user ? signOut : signIn;
289289

290290
return <DrawerItem icon={icon} text={text} onClick={onClick} />;

‎src/components/HelpDialog.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,15 @@ export default function HelpDialog({
1313
const [t] = useTranslation();
1414
return (
1515
<Dialog
16-
header={t("WELCOME_TO_AGENT_GPT", { ns: "help" })}
16+
header={`${t("WELCOME_TO_AGENT_GPT", { ns: "help" })} 🤖`}
1717
isShown={show}
1818
close={close}
1919
>
20-
<div className="text-md relative flex-auto p-2 leading-relaxed">
20+
<div>
2121
<p>
2222
<strong>AgentGPT</strong> {t("INTRODUCING_AGENTGPT", { ns: "help" })}
2323
</p>
24+
<br />
2425
<div>
2526
{t("TO_LEARN_MORE_ABOUT_AGENTGPT", {
2627
ns: "help",
@@ -31,9 +32,9 @@ export default function HelpDialog({
3132
>
3233
{t("AGENTGPT_DOCUMENTATION", { ns: "help" })}
3334
</a>
34-
<br />
35-
<p className="mt-2">{t("FOLLOW_THE_JOURNEY", { ns: "help" })}</p>
3635
</div>
36+
<br />
37+
<p className="mt-2">{t("FOLLOW_THE_JOURNEY", { ns: "help" })}</p>
3738
<div className="mt-4 flex w-full items-center justify-center gap-5">
3839
<div
3940
className="cursor-pointer rounded-full bg-black/30 p-3 hover:bg-black/70"

‎src/components/SettingsDialog.tsx

Lines changed: 53 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import type { ModelSettings, SettingModel } from "../utils/types";
1717
import LanguageCombobox from "./LanguageCombobox";
1818
import clsx from "clsx";
1919
import { AUTOMATIC_MODE, PAUSE_MODE } from "../types/agentTypes";
20-
import { useAgentStore } from "../components/stores";
20+
import { useAgentStore } from "./stores";
2121
import { useTranslation } from "next-i18next";
2222

2323
export const SettingsDialog: React.FC<{
@@ -172,7 +172,6 @@ export const SettingsDialog: React.FC<{
172172
})}`}</Button>
173173
</>
174174
}
175-
contentClassName="text-md relative flex flex-col gap-2 p-2 leading-relaxed"
176175
>
177176
<p>
178177
Get your own OpenAI API key{" "}
@@ -213,56 +212,58 @@ export const SettingsDialog: React.FC<{
213212
</b>
214213
</p>
215214
)}
216-
<Input
217-
left={
218-
<>
219-
<FaKey />
220-
<span className="ml-2">{`${t("API_KEY", {
221-
ns: "settings",
222-
})}`}</span>
223-
</>
224-
}
225-
placeholder={"sk-..."}
226-
type="password"
227-
value={settings.customApiKey}
228-
onChange={(e) => updateSettings("customApiKey", e.target.value)}
229-
/>
230-
<LanguageCombobox />
231-
<Input
232-
left={
233-
<>
234-
<FaMicrochip />
235-
<span className="ml-2">{`${t("LABEL_MODEL", {
236-
ns: "settings",
237-
})}`}</span>
238-
</>
239-
}
240-
type="combobox"
241-
value={settings.customModelName}
242-
onChange={() => null}
243-
setValue={(e) => updateSettings("customModelName", e)}
244-
attributes={{ options: GPT_MODEL_NAMES }}
245-
disabled={disabled}
246-
/>
247-
<Input
248-
left={
249-
<>
250-
<FaTachometerAlt />
251-
<span className="ml-2">Mode: </span>
252-
</>
253-
}
254-
value={agentMode}
255-
disabled={agent !== null}
256-
onChange={() => null}
257-
setValue={updateAgentMode as (agentMode: string) => void}
258-
type="combobox"
259-
toolTipProperties={{
260-
message: `${AUTOMATIC_MODE} (Default): Agent automatically executes every task. \n\n${PAUSE_MODE}: Agent pauses after every set of task(s)`,
261-
disabled: false,
262-
}}
263-
attributes={{ options: [AUTOMATIC_MODE, PAUSE_MODE] }}
264-
/>
265-
<Accordion child={advancedSettings} name={t("Advanced Settings")} />
215+
<div className="mt-2 flex flex-col gap-2">
216+
<Input
217+
left={
218+
<>
219+
<FaKey />
220+
<span className="ml-2">{`${t("API_KEY", {
221+
ns: "settings",
222+
})}`}</span>
223+
</>
224+
}
225+
placeholder={"sk-..."}
226+
type="password"
227+
value={settings.customApiKey}
228+
onChange={(e) => updateSettings("customApiKey", e.target.value)}
229+
/>
230+
<LanguageCombobox />
231+
<Input
232+
left={
233+
<>
234+
<FaMicrochip />
235+
<span className="ml-2">{`${t("LABEL_MODEL", {
236+
ns: "settings",
237+
})}`}</span>
238+
</>
239+
}
240+
type="combobox"
241+
value={settings.customModelName}
242+
onChange={() => null}
243+
setValue={(e) => updateSettings("customModelName", e)}
244+
attributes={{ options: GPT_MODEL_NAMES }}
245+
disabled={disabled}
246+
/>
247+
<Input
248+
left={
249+
<>
250+
<FaTachometerAlt />
251+
<span className="ml-2">Mode: </span>
252+
</>
253+
}
254+
value={agentMode}
255+
disabled={agent !== null}
256+
onChange={() => null}
257+
setValue={updateAgentMode as (agentMode: string) => void}
258+
type="combobox"
259+
toolTipProperties={{
260+
message: `${AUTOMATIC_MODE} (Default): Agent automatically executes every task. \n\n${PAUSE_MODE}: Agent pauses after every set of task(s)`,
261+
disabled: false,
262+
}}
263+
attributes={{ options: [AUTOMATIC_MODE, PAUSE_MODE] }}
264+
/>
265+
<Accordion child={advancedSettings} name={t("Advanced Settings")} />
266+
</div>
266267
</Dialog>
267268
);
268269
};

‎src/components/SignInDialog.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import Dialog from "./Dialog";
3+
import Button from "./Button";
4+
import { useAuth } from "../hooks/useAuth";
5+
6+
export interface SignInDialogProps {
7+
show: boolean;
8+
close: () => void;
9+
}
10+
11+
export const SignInDialog = ({ show, close }: SignInDialogProps) => {
12+
const { signIn } = useAuth();
13+
14+
return (
15+
<Dialog
16+
header="Sign in 🔐"
17+
isShown={show}
18+
close={close}
19+
footerButton={<Button onClick={() => void signIn()}>Sign in</Button>}
20+
>
21+
<p>
22+
Please{" "}
23+
<a className="link" onClick={() => void signIn()}>
24+
sign in
25+
</a>{" "}
26+
to deploy an Agent! 🤖
27+
</p>
28+
</Dialog>
29+
);
30+
};

‎src/components/SorryDialog.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react";
2+
import Dialog from "./Dialog";
3+
4+
export interface WebSearchDialogProps {
5+
show: boolean;
6+
close: () => void;
7+
}
8+
9+
export const SorryDialog = ({ show, close }: WebSearchDialogProps) => {
10+
return (
11+
<Dialog header="Sorry! 😭" isShown={show} close={close}>
12+
<p>Due to costs, we&apos;ve had to momentarily disable web search 🌐</p>
13+
<br />
14+
<p>
15+
Please monitor our&nbsp;
16+
<a
17+
className="link"
18+
href="https://reworkd.github.io/AgentGPT-Documentation/docs/roadmap"
19+
target="_blank"
20+
rel="noreferrer"
21+
>
22+
Roadmap
23+
</a>&nbsp;
24+
to understand when it may be back up.
25+
</p>
26+
</Dialog>
27+
);
28+
};

‎src/pages/index.tsx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
2929
import { useSettings } from "../hooks/useSettings";
3030
import { languages } from "../utils/languages";
3131
import nextI18NextConfig from "../../next-i18next.config.js";
32+
import { SorryDialog } from "../components/SorryDialog";
33+
import { SignInDialog } from "../components/SignInDialog";
3234

3335
const Home: NextPage = () => {
3436
const { i18n } = useTranslation();
@@ -53,6 +55,8 @@ const Home: NextPage = () => {
5355

5456
const [showHelpDialog, setShowHelpDialog] = React.useState(false);
5557
const [showSettingsDialog, setShowSettingsDialog] = React.useState(false);
58+
const [showSorryDialog, setShowSorryDialog] = React.useState(false);
59+
const [showSignInDialog, setShowSignInDialog] = React.useState(false);
5660
const [hasSaved, setHasSaved] = React.useState(false);
5761
const agentUtils = useAgent();
5862

@@ -98,6 +102,12 @@ const Home: NextPage = () => {
98102
agent != null || isEmptyOrBlank(name) || isEmptyOrBlank(goalInput);
99103

100104
const handleNewGoal = () => {
105+
// Do not force login locally for people that don't have auth setup
106+
if (session === null && process.env.NODE_ENV === "production") {
107+
setShowSignInDialog(true);
108+
return;
109+
}
110+
101111
const newAgent = new AutonomousAgent(
102112
name.trim(),
103113
goalInput.trim(),
@@ -187,6 +197,14 @@ const Home: NextPage = () => {
187197
show={showSettingsDialog}
188198
close={() => setShowSettingsDialog(false)}
189199
/>
200+
<SorryDialog
201+
show={showSorryDialog}
202+
close={() => setShowSorryDialog(false)}
203+
/>
204+
<SignInDialog
205+
show={showSignInDialog}
206+
close={() => setShowSignInDialog(false)}
207+
/>
190208
<main className="flex min-h-screen flex-row">
191209
<Drawer
192210
showHelp={() => setShowHelpDialog(true)}
@@ -247,7 +265,8 @@ const Home: NextPage = () => {
247265
: undefined
248266
}
249267
scrollToBottom
250-
// displaySettings (Disable web search)
268+
displaySettings
269+
openSorryDialog={() => setShowSorryDialog(true)}
251270
/>
252271
{tasks.length > 0 && <TaskWindow />}
253272
</Expand>

0 commit comments

Comments
 (0)