mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-05-03 06:00:49 +00:00
feat: add auth entry: coding plan
This commit is contained in:
mingholy.lmh
parent
169ad2d030
commit
b9dd080bd1
21 changed files with 721 additions and 447 deletions
|
|
@ -11,6 +11,7 @@ import { Box, Text } from 'ink';
|
|||
import { Colors } from '../colors.js';
|
||||
import { useKeypress } from '../hooks/useKeypress.js';
|
||||
import { RadioButtonSelect } from '../components/shared/RadioButtonSelect.js';
|
||||
import { ApiKeyInput } from '../components/ApiKeyInput.js';
|
||||
import { useUIState } from '../contexts/UIStateContext.js';
|
||||
import { useUIActions } from '../contexts/UIActionsContext.js';
|
||||
import { useConfig } from '../contexts/ConfigContext.js';
|
||||
|
|
@ -28,30 +29,54 @@ function parseDefaultAuthType(
|
|||
return null;
|
||||
}
|
||||
|
||||
// Sub-mode types for API-KEY authentication
|
||||
type ApiKeySubMode = 'coding-plan' | 'custom';
|
||||
|
||||
// View level for navigation
|
||||
type ViewLevel = 'main' | 'api-key-sub' | 'api-key-input' | 'custom-info';
|
||||
|
||||
export function AuthDialog(): React.JSX.Element {
|
||||
const { pendingAuthType, authError } = useUIState();
|
||||
const { handleAuthSelect: onAuthSelect } = useUIActions();
|
||||
const { handleAuthSelect: onAuthSelect, handleCodingPlanSubmit } =
|
||||
useUIActions();
|
||||
const config = useConfig();
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
|
||||
const [viewLevel, setViewLevel] = useState<ViewLevel>('main');
|
||||
const [apiKeySubModeIndex, setApiKeySubModeIndex] = useState<number>(0);
|
||||
|
||||
const items = [
|
||||
// Main authentication entries
|
||||
const mainItems = [
|
||||
{
|
||||
key: AuthType.QWEN_OAUTH,
|
||||
label: t('Qwen OAuth'),
|
||||
value: AuthType.QWEN_OAUTH,
|
||||
},
|
||||
{
|
||||
key: AuthType.USE_OPENAI,
|
||||
label: t('OpenAI'),
|
||||
value: AuthType.USE_OPENAI,
|
||||
key: 'API-KEY',
|
||||
label: t('API-KEY'),
|
||||
value: 'API-KEY' as const,
|
||||
},
|
||||
];
|
||||
|
||||
// API-KEY sub-mode entries
|
||||
const apiKeySubItems = [
|
||||
{
|
||||
key: 'coding-plan',
|
||||
label: t('Coding Plan'),
|
||||
value: 'coding-plan' as ApiKeySubMode,
|
||||
},
|
||||
{
|
||||
key: 'custom',
|
||||
label: t('Custom'),
|
||||
value: 'custom' as ApiKeySubMode,
|
||||
},
|
||||
];
|
||||
|
||||
const initialAuthIndex = Math.max(
|
||||
0,
|
||||
items.findIndex((item) => {
|
||||
mainItems.findIndex((item) => {
|
||||
// Priority 1: pendingAuthType
|
||||
if (pendingAuthType) {
|
||||
return item.value === pendingAuthType;
|
||||
|
|
@ -79,29 +104,75 @@ export function AuthDialog(): React.JSX.Element {
|
|||
const hasApiKey = Boolean(config.getContentGeneratorConfig()?.apiKey);
|
||||
const currentSelectedAuthType =
|
||||
selectedIndex !== null
|
||||
? items[selectedIndex]?.value
|
||||
: items[initialAuthIndex]?.value;
|
||||
? mainItems[selectedIndex]?.value
|
||||
: mainItems[initialAuthIndex]?.value;
|
||||
|
||||
const handleAuthSelect = async (authMethod: AuthType) => {
|
||||
const handleMainSelect = async (
|
||||
value: (typeof mainItems)[number]['value'],
|
||||
) => {
|
||||
setErrorMessage(null);
|
||||
await onAuthSelect(authMethod);
|
||||
|
||||
if (value === 'API-KEY') {
|
||||
// Navigate to API-KEY sub-mode selection
|
||||
setViewLevel('api-key-sub');
|
||||
return;
|
||||
}
|
||||
|
||||
// For Qwen OAuth, proceed directly
|
||||
await onAuthSelect(value);
|
||||
};
|
||||
|
||||
const handleHighlight = (authMethod: AuthType) => {
|
||||
const index = items.findIndex((item) => item.value === authMethod);
|
||||
setSelectedIndex(index);
|
||||
const handleApiKeySubSelect = async (subMode: ApiKeySubMode) => {
|
||||
setErrorMessage(null);
|
||||
|
||||
if (subMode === 'coding-plan') {
|
||||
setViewLevel('api-key-input');
|
||||
} else {
|
||||
setViewLevel('custom-info');
|
||||
}
|
||||
};
|
||||
|
||||
const handleApiKeyInputSubmit = async (apiKey: string) => {
|
||||
setErrorMessage(null);
|
||||
|
||||
if (!apiKey.trim()) {
|
||||
setErrorMessage(t('API key cannot be empty.'));
|
||||
return;
|
||||
}
|
||||
|
||||
// Submit to parent for processing
|
||||
await handleCodingPlanSubmit(apiKey);
|
||||
};
|
||||
|
||||
const handleGoBack = () => {
|
||||
setErrorMessage(null);
|
||||
|
||||
if (viewLevel === 'api-key-sub') {
|
||||
setViewLevel('main');
|
||||
} else if (viewLevel === 'api-key-input' || viewLevel === 'custom-info') {
|
||||
setViewLevel('api-key-sub');
|
||||
}
|
||||
};
|
||||
|
||||
useKeypress(
|
||||
(key) => {
|
||||
if (key.name === 'escape') {
|
||||
// Prevent exit if there is an error message.
|
||||
// This means they user is not authenticated yet.
|
||||
// Handle Escape based on current view level
|
||||
if (viewLevel === 'api-key-sub') {
|
||||
handleGoBack();
|
||||
return;
|
||||
}
|
||||
|
||||
if (viewLevel === 'api-key-input' || viewLevel === 'custom-info') {
|
||||
handleGoBack();
|
||||
return;
|
||||
}
|
||||
|
||||
// For main view, use existing logic
|
||||
if (errorMessage) {
|
||||
return;
|
||||
}
|
||||
if (config.getAuthType() === undefined) {
|
||||
// Prevent exiting if no auth method is set
|
||||
setErrorMessage(
|
||||
t(
|
||||
'You must select an auth method to proceed. Press Ctrl+C again to exit.',
|
||||
|
|
@ -115,6 +186,129 @@ export function AuthDialog(): React.JSX.Element {
|
|||
{ isActive: true },
|
||||
);
|
||||
|
||||
// Render main auth selection
|
||||
const renderMainView = () => (
|
||||
<>
|
||||
<Box marginTop={1}>
|
||||
<Text>{t('How would you like to authenticate for this project?')}</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<RadioButtonSelect
|
||||
items={mainItems}
|
||||
initialIndex={initialAuthIndex}
|
||||
onSelect={handleMainSelect}
|
||||
onHighlight={(value) => {
|
||||
const index = mainItems.findIndex((item) => item.value === value);
|
||||
setSelectedIndex(index);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
// Render API-KEY sub-mode selection
|
||||
const renderApiKeySubView = () => (
|
||||
<>
|
||||
<Box marginTop={1}>
|
||||
<Text>{t('Select API-KEY configuration mode:')}</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<RadioButtonSelect
|
||||
items={apiKeySubItems}
|
||||
initialIndex={apiKeySubModeIndex}
|
||||
onSelect={handleApiKeySubSelect}
|
||||
onHighlight={(value) => {
|
||||
const index = apiKeySubItems.findIndex(
|
||||
(item) => item.value === value,
|
||||
);
|
||||
setApiKeySubModeIndex(index);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.Gray}>{t('(Press Escape to go back)')}</Text>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
// Render API key input for coding-plan mode
|
||||
const renderApiKeyInputView = () => (
|
||||
<Box marginTop={1}>
|
||||
<ApiKeyInput onSubmit={handleApiKeyInputSubmit} onCancel={handleGoBack} />
|
||||
</Box>
|
||||
);
|
||||
|
||||
// Render custom mode info
|
||||
const renderCustomInfoView = () => (
|
||||
<>
|
||||
<Box marginTop={1}>
|
||||
<Text bold>{t('Custom API-KEY Configuration')}</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text>
|
||||
{t('For advanced users who want to configure models manually.')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text>{t('Please configure your models in settings.json:')}</Text>
|
||||
</Box>
|
||||
<Box marginTop={1} paddingLeft={2}>
|
||||
<Text color={Colors.AccentYellow}>
|
||||
1. {t('Set API key via environment variable (e.g., OPENAI_API_KEY)')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginTop={0} paddingLeft={2}>
|
||||
<Text color={Colors.AccentYellow}>
|
||||
2.{' '}
|
||||
{t(
|
||||
"Add model configuration to modelProviders['openai'] (or other auth types)",
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginTop={0} paddingLeft={2}>
|
||||
<Text color={Colors.AccentYellow}>
|
||||
3.{' '}
|
||||
{t(
|
||||
'Each provider needs: id, envKey (required), plus optional baseUrl, generationConfig',
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginTop={0} paddingLeft={2}>
|
||||
<Text color={Colors.AccentYellow}>
|
||||
4.{' '}
|
||||
{t(
|
||||
'Use /model command to select your preferred model from the configured list',
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.Gray}>
|
||||
{t(
|
||||
'Supported auth types: openai, anthropic, gemini, vertex-ai, etc.',
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.Gray}>{t('(Press Escape to go back)')}</Text>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
const getViewTitle = () => {
|
||||
switch (viewLevel) {
|
||||
case 'main':
|
||||
return t('Get started');
|
||||
case 'api-key-sub':
|
||||
return t('API-KEY Configuration');
|
||||
case 'api-key-input':
|
||||
return t('Coding Plan Setup');
|
||||
case 'custom-info':
|
||||
return t('Custom Configuration');
|
||||
default:
|
||||
return t('Get started');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
borderStyle="round"
|
||||
|
|
@ -123,43 +317,47 @@ export function AuthDialog(): React.JSX.Element {
|
|||
padding={1}
|
||||
width="100%"
|
||||
>
|
||||
<Text bold>{t('Get started')}</Text>
|
||||
<Box marginTop={1}>
|
||||
<Text>{t('How would you like to authenticate for this project?')}</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<RadioButtonSelect
|
||||
items={items}
|
||||
initialIndex={initialAuthIndex}
|
||||
onSelect={handleAuthSelect}
|
||||
onHighlight={handleHighlight}
|
||||
/>
|
||||
</Box>
|
||||
<Text bold>{getViewTitle()}</Text>
|
||||
|
||||
{viewLevel === 'main' && renderMainView()}
|
||||
{viewLevel === 'api-key-sub' && renderApiKeySubView()}
|
||||
{viewLevel === 'api-key-input' && renderApiKeyInputView()}
|
||||
{viewLevel === 'custom-info' && renderCustomInfoView()}
|
||||
|
||||
{(authError || errorMessage) && (
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.AccentRed}>{authError || errorMessage}</Text>
|
||||
</Box>
|
||||
)}
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.AccentPurple}>{t('(Use Enter to Set Auth)')}</Text>
|
||||
</Box>
|
||||
{hasApiKey && currentSelectedAuthType === AuthType.QWEN_OAUTH && (
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.Gray}>
|
||||
{t(
|
||||
'Note: Your existing API key in settings.json will not be cleared when using Qwen OAuth. You can switch back to OpenAI authentication later if needed.',
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{viewLevel === 'main' && (
|
||||
<>
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.AccentPurple}>
|
||||
{t('(Use Enter to Set Auth)')}
|
||||
</Text>
|
||||
</Box>
|
||||
{hasApiKey && currentSelectedAuthType === AuthType.QWEN_OAUTH && (
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.Gray}>
|
||||
{t(
|
||||
'Note: Your existing API key in settings.json will not be cleared when using Qwen OAuth. You can switch back to OpenAI authentication later if needed.',
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
<Box marginTop={1}>
|
||||
<Text>
|
||||
{t('Terms of Services and Privacy Notice for Qwen Code')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.AccentBlue}>
|
||||
{'https://github.com/QwenLM/Qwen3-Coder/blob/main/README.md'}
|
||||
</Text>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
<Box marginTop={1}>
|
||||
<Text>{t('Terms of Services and Privacy Notice for Qwen Code')}</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.AccentBlue}>
|
||||
{'https://github.com/QwenLM/Qwen3-Coder/blob/main/README.md'}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue