Repository navigation
Expand file tree
/
Copy pathSettingsDialog.tsx
More file actions
68 lines (64 loc) · 1.74 KB
/
Copy pathSettingsDialog.tsx
File metadata and controls
68 lines (64 loc) · 1.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React from "react";
import Button from "./Button";
import { FaKey } from "react-icons/fa";
import Dialog from "./Dialog";
import Input from "./Input";
export default function SettingsDialog({
show,
close,
customApiKey,
setCustomApiKey,
}: {
show: boolean;
close: () => void;
customApiKey: string;
setCustomApiKey: (key: string) => void;
}) {
const [key, setKey] = React.useState<string>(customApiKey);
const handleClose = () => {
setKey(customApiKey);
close();
};
const handleSave = () => {
setCustomApiKey(key);
close();
};
return (
<Dialog
header="Settings ⚙"
isShown={show}
close={handleClose}
footerButton={<Button onClick={handleSave}>Save</Button>}
>
<div className="text-md relative flex-auto p-2 leading-relaxed">
<p className="mb-3">
Welcome to AgentGPT! We're receiving traffic far higher than our
small team is able to provide for at the moment.
</p>
<p className="mb-3">
Because of this, we momentarily ask that users utilize their own
OpenAI API key for AgentGPT. If you elect not to, your agent will not
be able to execute for very long. To do this, sign up for an OpenAI
account and visit the following{" "}
<a
href="https://platform.openai.com/account/api-keys"
className="text-blue-500"
>
link.
</a>
</p>
<Input
left={
<>
<FaKey />
<span className="ml-2">Key:</span>
</>
}
placeholder={"sk-..."}
value={key}
onChange={(e) => setKey(e.target.value)}
/>
</div>
</Dialog>
);
}