File size: 2,570 Bytes
6a7089a | 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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | import { useEffect, useState } from "react";
import { Button, Input, Modal } from "../atoms";
import * as api from "../../services/api";
interface Props {
open: boolean;
onClose: () => void;
onCreated: (preferredProfileKey: string) => void | Promise<void>;
}
export default function CreateProfileModal({
open,
onClose,
onCreated,
}: Props) {
const [createName, setCreateName] = useState("");
const [createUseWhen, setCreateUseWhen] = useState("");
const [createSource, setCreateSource] = useState("");
const [createLoading, setCreateLoading] = useState(false);
useEffect(() => {
if (open) {
return;
}
setCreateName("");
setCreateUseWhen("");
setCreateSource("");
setCreateLoading(false);
}, [open]);
const handleCreate = async () => {
if (!createName.trim() || createLoading) return;
setCreateLoading(true);
try {
const created = await api.createProfile({
name: createName.trim(),
useWhen: createUseWhen.trim() || undefined,
});
onClose();
await onCreated(created.id || created.name);
} catch (e) {
console.error("Failed to create profile", e);
} finally {
setCreateLoading(false);
}
};
return (
<Modal
open={open}
onClose={onClose}
title="📁 New Profile"
wide
actions={
<>
<Button
variant="secondary"
disabled={createLoading}
onClick={onClose}
>
Cancel
</Button>
<Button
variant="primary"
onClick={handleCreate}
disabled={!createName.trim()}
loading={createLoading}
>
Create
</Button>
</>
}
>
<div className="flex flex-col gap-4">
<Input
label="Name"
placeholder="e.g. personal, work, scraping"
value={createName}
onChange={(e) => setCreateName(e.target.value)}
/>
<Input
label="Use this profile when (helps agents pick the right profile)"
placeholder="e.g. I need to access Gmail for the team account"
value={createUseWhen}
onChange={(e) => setCreateUseWhen(e.target.value)}
/>
<Input
label="Import from (optional — Chrome user data path)"
placeholder="e.g. /Users/you/Library/Application Support/Google/Chrome"
value={createSource}
onChange={(e) => setCreateSource(e.target.value)}
/>
</div>
</Modal>
);
}
|