1import { useState } from "react";
2import type { ProviderAuthMethod } from "@t3tools/contracts";
3import { RadioGroup, Radio } from "../ui/radio-group";
4import {
5 Dialog,
6 DialogPopup,
7 DialogHeader,
8 DialogTitle,
9 DialogDescription,
10 DialogFooter,
11} from "../ui/dialog";
12import { ChatGptConnectionButton } from "./ChatGptConnectionButton";
13
14export function ChatGptAccountPicker({
15 open,
16 methods,
17 onClose,
18 onSelect,
19}: {
20 open: boolean;
21 methods: readonly ProviderAuthMethod[];
22 onClose: () => void;
23 onSelect: (methodId: string) => void;
24}) {
25 const profiles = methods.filter((method) => method.id.startsWith("chatgpt-profile:"));
26 const [selection, setSelection] = useState<string | null>(null);
27 const selectedMethodId =
28 selection === "chatgpt-change-account"
29 ? selection
30 : (profiles.find((profile) => profile.id === selection)?.id ??
31 profiles[0]?.id ??
32 "chatgpt-change-account");
33 return (
34 <Dialog
35 open={open}
36 onOpenChange={(value) => {
37 if (!value) onClose();
38 }}
39 >
40 <DialogPopup>
41 <DialogHeader>
42 <DialogTitle>Reconnect ChatGPT</DialogTitle>
43 <DialogDescription>
44 On OpenAI, sign in with the account you choose here.
45 </DialogDescription>
46 </DialogHeader>
47 <div className="px-6 pb-6">
48 <RadioGroup
49 aria-label="ChatGPT account to connect"
50 value={selectedMethodId}
51 onValueChange={(value) => setSelection(value)}
52 >
53 {profiles.map((profile) => (
54 <label
55 key={profile.id}
56 className="flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-sm"
57 >
58 <Radio value={profile.id} />
59 <span className="min-w-0 break-all font-medium">{profile.name}</span>
60 </label>
61 ))}
62 <label className="flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-sm">
63 <Radio value="chatgpt-change-account" />
64 <span className="font-medium">Use a different account</span>
65 </label>
66 </RadioGroup>
67 </div>
68 <DialogFooter>
69 <ChatGptConnectionButton onClick={() => onSelect(selectedMethodId)} />
70 </DialogFooter>
71 </DialogPopup>
72 </Dialog>
73 );
74}