1  import React from 'react'
 2  import { Box, Text } from 'ink'
 3  import { getGlobalConfig, saveGlobalConfig } from '../utils/config.js'
 4  import { getTheme } from '../utils/theme.js'
 5  import { Select } from '@inkjs/ui'
 6  import { useExitOnCtrlCD } from '../hooks/useExitOnCtrlCD.js'
 7  import chalk from 'chalk'
 8  
 9  type Props = {
10    customApiKeyTruncated: string
11    onDone(): void
12  }
13  
14  export function ApproveApiKey({
15    customApiKeyTruncated,
16    onDone,
17  }: Props): React.ReactNode {
18    const theme = getTheme()
19  
20    function onChange(value: 'yes' | 'no') {
21      const config = getGlobalConfig()
22      switch (value) {
23        case 'yes': {
24          saveGlobalConfig({
25            ...config,
26            customApiKeyResponses: {
27              ...config.customApiKeyResponses,
28              approved: [
29                ...(config.customApiKeyResponses?.approved ?? []),
30                customApiKeyTruncated,
31              ],
32            },
33          })
34          onDone()
35          break
36        }
37        case 'no': {
38          saveGlobalConfig({
39            ...config,
40            customApiKeyResponses: {
41              ...config.customApiKeyResponses,
42              rejected: [
43                ...(config.customApiKeyResponses?.rejected ?? []),
44                customApiKeyTruncated,
45              ],
46            },
47          })
48          onDone()
49          break
50        }
51      }
52    }
53  
54    const exitState = useExitOnCtrlCD(() => process.exit(0))
55  
56    return (
57      <>
58        <Box
59          flexDirection="column"
60          gap={1}
61          padding={1}
62          borderStyle="round"
63          borderColor={theme.warning}
64        >
65          <Text bold color={theme.warning}>
66            Detected a custom API key in your environment
67          </Text>
68          <Text>
69            Your environment sets{' '}
70            <Text color={theme.warning}>ANTHROPIC_API_KEY</Text>:{' '}
71            <Text bold>sk-ant-...{customApiKeyTruncated}</Text>
72          </Text>
73          <Text>Do you want to use this API key?</Text>
74          <Select
75            options={[
76              { label: `No (${chalk.bold('recommended')})`, value: 'no' },
77              { label: 'Yes', value: 'yes' },
78            ]}
79            onChange={value => onChange(value as 'yes' | 'no')}
80          />
81        </Box>
82        <Box marginLeft={3}>
83          <Text dimColor>
84            {exitState.pending ? (
85              <>Press {exitState.keyName} again to exit</>
86            ) : (
87              <>Enter to confirm</>
88            )}
89          </Text>
90        </Box>
91      </>
92    )
93  }