1import { useAtomValue } from "@effect/atom-react";
2import type { EnvironmentId } from "@t3tools/contracts";
3import { CHATGPT_USAGE_URL, collectExternalUsageLinks } from "@t3tools/shared/usageLimits";
4import { Linking, Pressable, View } from "react-native";
5import { AppText as Text } from "../../components/AppText";
6import { ProviderIcon } from "../../components/ProviderIcon";
7import { environmentPresentations } from "../../state/presentation";
8
9export function ChatGptUsageSummary({
10 selectedEnvironmentIds,
11}: {
12 selectedEnvironmentIds: ReadonlySet<EnvironmentId> | null;
13}) {
14 const presentations = useAtomValue(environmentPresentations.presentationsAtom);
15 const selected =
16 selectedEnvironmentIds === null
17 ? presentations
18 : new Map([...presentations].filter(([id]) => selectedEnvironmentIds.has(id)));
19 const usage = collectExternalUsageLinks(selected).find((link) => link.url === CHATGPT_USAGE_URL);
20 if (!usage) return null;
21 return (
22 <View className="gap-1">
23 <View className="flex-row items-center justify-between gap-3">
24 <View className="flex-row items-center gap-2">
25 <ProviderIcon provider="codex" size={16} />
26 <Text className="text-sm text-foreground">ChatGPT shared usage</Text>
27 </View>
28 <Pressable
29 accessibilityRole="link"
30 className="min-h-11 justify-center"
31 onPress={() => void Linking.openURL(usage.url).catch(() => undefined)}
32 >
33 <Text className="text-sm font-t3-medium text-primary">Manage usage</Text>
34 </Pressable>
35 </View>
36 <Text className="text-xs text-foreground-muted">
37 {usage.accounts.join(", ")}. Open ChatGPT with the account you connected.
38 </Text>
39 </View>
40 );
41}