mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-04-29 12:11:09 +00:00
Merge remote-tracking branch 'origin/main' into feat/context-usage
This commit is contained in:
pomelo-nwu
commit
a811d442b2
255 changed files with 18857 additions and 5037 deletions
|
|
@ -8,26 +8,37 @@ import type React from 'react';
|
|||
import { useState } from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import { TextInput } from './shared/TextInput.js';
|
||||
import { Colors } from '../colors.js';
|
||||
import { theme } from '../semantic-colors.js';
|
||||
import { useKeypress } from '../hooks/useKeypress.js';
|
||||
import { t } from '../../i18n/index.js';
|
||||
import { CodingPlanRegion } from '../../constants/codingPlan.js';
|
||||
import Link from 'ink-link';
|
||||
|
||||
interface ApiKeyInputProps {
|
||||
onSubmit: (apiKey: string) => void;
|
||||
onCancel: () => void;
|
||||
region?: CodingPlanRegion;
|
||||
}
|
||||
|
||||
const CODING_PLAN_API_KEY_URL =
|
||||
'https://bailian.console.aliyun.com/?tab=model#/efm/coding_plan';
|
||||
|
||||
const CODING_PLAN_INTL_API_KEY_URL =
|
||||
'https://modelstudio.console.alibabacloud.com/?tab=dashboard#/efm/coding_plan';
|
||||
|
||||
export function ApiKeyInput({
|
||||
onSubmit,
|
||||
onCancel,
|
||||
region = CodingPlanRegion.CHINA,
|
||||
}: ApiKeyInputProps): React.JSX.Element {
|
||||
const [apiKey, setApiKey] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const apiKeyUrl =
|
||||
region === CodingPlanRegion.GLOBAL
|
||||
? CODING_PLAN_INTL_API_KEY_URL
|
||||
: CODING_PLAN_API_KEY_URL;
|
||||
|
||||
useKeypress(
|
||||
(key) => {
|
||||
if (key.name === 'escape') {
|
||||
|
|
@ -38,6 +49,18 @@ export function ApiKeyInput({
|
|||
setError(t('API key cannot be empty.'));
|
||||
return;
|
||||
}
|
||||
// Only validate sk-sp- prefix for China region (aliyun.com)
|
||||
if (
|
||||
region === CodingPlanRegion.CHINA &&
|
||||
!trimmedKey.startsWith('sk-sp-')
|
||||
) {
|
||||
setError(
|
||||
t(
|
||||
'Invalid API key. Coding Plan API keys start with "sk-sp-". Please check.',
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
onSubmit(trimmedKey);
|
||||
}
|
||||
},
|
||||
|
|
@ -46,28 +69,25 @@ export function ApiKeyInput({
|
|||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Box marginBottom={1}>
|
||||
<Text>{t('Please enter your API key:')}</Text>
|
||||
</Box>
|
||||
<TextInput value={apiKey} onChange={setApiKey} placeholder="sk-sp-..." />
|
||||
{error && (
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.AccentRed}>{error}</Text>
|
||||
<Text color={theme.status.error}>{error}</Text>
|
||||
</Box>
|
||||
)}
|
||||
<Box marginTop={1}>
|
||||
<Text>{t('You can get your exclusive Coding Plan API-KEY here:')}</Text>
|
||||
<Text>{t('You can get your Coding Plan API key here')}</Text>
|
||||
</Box>
|
||||
<Box marginTop={0}>
|
||||
<Link url={CODING_PLAN_API_KEY_URL} fallback={false}>
|
||||
<Text color={Colors.AccentGreen} underline>
|
||||
{CODING_PLAN_API_KEY_URL}
|
||||
<Link url={apiKeyUrl} fallback={false}>
|
||||
<Text color={theme.text.link} underline>
|
||||
{apiKeyUrl}
|
||||
</Text>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text color={Colors.Gray}>
|
||||
{t('(Press Enter to submit, Escape to cancel)')}
|
||||
<Text color={theme.text.secondary}>
|
||||
{t('Enter to submit, Esc to go back')}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,43 @@
|
|||
*/
|
||||
|
||||
import { Box } from 'ink';
|
||||
import { Header } from './Header.js';
|
||||
import { AuthType } from '@qwen-code/qwen-code-core';
|
||||
import { Header, AuthDisplayType } from './Header.js';
|
||||
import { Tips } from './Tips.js';
|
||||
import { useSettings } from '../contexts/SettingsContext.js';
|
||||
import { useConfig } from '../contexts/ConfigContext.js';
|
||||
import { useUIState } from '../contexts/UIStateContext.js';
|
||||
import { isCodingPlanConfig } from '../../constants/codingPlan.js';
|
||||
|
||||
interface AppHeaderProps {
|
||||
version: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine the auth display type based on auth type and configuration.
|
||||
*/
|
||||
function getAuthDisplayType(
|
||||
authType?: AuthType,
|
||||
baseUrl?: string,
|
||||
apiKeyEnvKey?: string,
|
||||
): AuthDisplayType {
|
||||
if (!authType) {
|
||||
return AuthDisplayType.UNKNOWN;
|
||||
}
|
||||
|
||||
// Check if it's a Coding Plan config
|
||||
if (isCodingPlanConfig(baseUrl, apiKeyEnvKey)) {
|
||||
return AuthDisplayType.CODING_PLAN;
|
||||
}
|
||||
|
||||
switch (authType) {
|
||||
case AuthType.QWEN_OAUTH:
|
||||
return AuthDisplayType.QWEN_OAUTH;
|
||||
default:
|
||||
return AuthDisplayType.API_KEY;
|
||||
}
|
||||
}
|
||||
|
||||
export const AppHeader = ({ version }: AppHeaderProps) => {
|
||||
const settings = useSettings();
|
||||
const config = useConfig();
|
||||
|
|
@ -27,12 +54,18 @@ export const AppHeader = ({ version }: AppHeaderProps) => {
|
|||
const showBanner = !config.getScreenReader();
|
||||
const showTips = !(settings.merged.ui?.hideTips || config.getScreenReader());
|
||||
|
||||
const authDisplayType = getAuthDisplayType(
|
||||
authType,
|
||||
contentGeneratorConfig?.baseUrl,
|
||||
contentGeneratorConfig?.apiKeyEnvKey,
|
||||
);
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{showBanner && (
|
||||
<Header
|
||||
version={version}
|
||||
authType={authType}
|
||||
authDisplayType={authDisplayType}
|
||||
model={model}
|
||||
workingDirectory={targetDir}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ const createMockUIState = (overrides: Partial<UIState> = {}): UIState =>
|
|||
const createMockUIActions = (): UIActions =>
|
||||
({
|
||||
handleFinalSubmit: vi.fn(),
|
||||
handleRetryLastPrompt: vi.fn(),
|
||||
handleClearScreen: vi.fn(),
|
||||
setShellModeActive: vi.fn(),
|
||||
onEscapePromptChange: vi.fn(),
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ import process from 'node:process';
|
|||
import { type UseHistoryManagerReturn } from '../hooks/useHistoryManager.js';
|
||||
import { IdeTrustChangeDialog } from './IdeTrustChangeDialog.js';
|
||||
import { WelcomeBackDialog } from './WelcomeBackDialog.js';
|
||||
import { ModelSwitchDialog } from './ModelSwitchDialog.js';
|
||||
import { AgentCreationWizard } from './subagents/create/AgentCreationWizard.js';
|
||||
import { AgentsManagerDialog } from './subagents/manage/AgentsManagerDialog.js';
|
||||
import { SessionPicker } from './SessionPicker.js';
|
||||
|
|
@ -236,10 +235,6 @@ export const DialogManager = ({
|
|||
if (uiState.isModelDialogOpen) {
|
||||
return <ModelDialog onClose={uiActions.closeModelDialog} />;
|
||||
}
|
||||
if (uiState.isVisionSwitchDialogOpen) {
|
||||
return <ModelSwitchDialog onSelect={uiActions.handleVisionSwitchSelect} />;
|
||||
}
|
||||
|
||||
if (uiState.isAuthDialogOpen || uiState.authError) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
|
||||
import { render } from 'ink-testing-library';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { AuthType } from '@qwen-code/qwen-code-core';
|
||||
import { Header } from './Header.js';
|
||||
import { Header, AuthDisplayType } from './Header.js';
|
||||
import * as useTerminalSize from '../hooks/useTerminalSize.js';
|
||||
|
||||
vi.mock('../hooks/useTerminalSize.js');
|
||||
|
|
@ -15,86 +14,70 @@ const useTerminalSizeMock = vi.mocked(useTerminalSize.useTerminalSize);
|
|||
|
||||
const defaultProps = {
|
||||
version: '1.0.0',
|
||||
authType: AuthType.QWEN_OAUTH,
|
||||
authDisplayType: AuthDisplayType.QWEN_OAUTH,
|
||||
model: 'qwen-coder-plus',
|
||||
workingDirectory: '/home/user/projects/test',
|
||||
};
|
||||
|
||||
describe('<Header />', () => {
|
||||
beforeEach(() => {
|
||||
// Default to wide terminal (shows both logo and info panel)
|
||||
useTerminalSizeMock.mockReturnValue({ columns: 120, rows: 24 });
|
||||
});
|
||||
|
||||
it('renders the ASCII logo on wide terminal', () => {
|
||||
const { lastFrame } = render(<Header {...defaultProps} />);
|
||||
// Check that parts of the shortAsciiLogo are rendered
|
||||
expect(lastFrame()).toContain('██╔═══██╗');
|
||||
});
|
||||
|
||||
it('hides the ASCII logo on narrow terminal', () => {
|
||||
useTerminalSizeMock.mockReturnValue({ columns: 60, rows: 24 });
|
||||
const { lastFrame } = render(<Header {...defaultProps} />);
|
||||
// Should not contain the logo but still show the info panel
|
||||
expect(lastFrame()).not.toContain('██╔═══██╗');
|
||||
expect(lastFrame()).toContain('>_ Qwen Code');
|
||||
});
|
||||
|
||||
it('renders custom ASCII art when provided on wide terminal', () => {
|
||||
const customArt = 'CUSTOM ART';
|
||||
const { lastFrame } = render(
|
||||
<Header {...defaultProps} customAsciiArt={customArt} />,
|
||||
);
|
||||
expect(lastFrame()).toContain(customArt);
|
||||
});
|
||||
|
||||
it('displays the version number', () => {
|
||||
const { lastFrame } = render(<Header {...defaultProps} />);
|
||||
expect(lastFrame()).toContain('v1.0.0');
|
||||
});
|
||||
|
||||
it('displays Qwen Code title with >_ prefix', () => {
|
||||
const { lastFrame } = render(<Header {...defaultProps} />);
|
||||
expect(lastFrame()).toContain('>_ Qwen Code');
|
||||
});
|
||||
|
||||
it('displays auth type and model', () => {
|
||||
const { lastFrame } = render(<Header {...defaultProps} />);
|
||||
expect(lastFrame()).toContain('Qwen OAuth');
|
||||
expect(lastFrame()).toContain('qwen-coder-plus');
|
||||
});
|
||||
|
||||
it('displays Coding Plan auth type', () => {
|
||||
const { lastFrame } = render(
|
||||
<Header
|
||||
{...defaultProps}
|
||||
authDisplayType={AuthDisplayType.CODING_PLAN}
|
||||
/>,
|
||||
);
|
||||
expect(lastFrame()).toContain('Coding Plan');
|
||||
});
|
||||
|
||||
it('displays API Key auth type', () => {
|
||||
const { lastFrame } = render(
|
||||
<Header {...defaultProps} authDisplayType={AuthDisplayType.API_KEY} />,
|
||||
);
|
||||
expect(lastFrame()).toContain('API Key');
|
||||
});
|
||||
|
||||
it('displays Unknown when auth type is not set', () => {
|
||||
const { lastFrame } = render(
|
||||
<Header {...defaultProps} authDisplayType={undefined} />,
|
||||
);
|
||||
expect(lastFrame()).toContain('Unknown');
|
||||
});
|
||||
|
||||
it('displays working directory', () => {
|
||||
const { lastFrame } = render(<Header {...defaultProps} />);
|
||||
expect(lastFrame()).toContain('/home/user/projects/test');
|
||||
});
|
||||
|
||||
it('renders a custom working directory display', () => {
|
||||
const { lastFrame } = render(
|
||||
<Header {...defaultProps} workingDirectory="custom display" />,
|
||||
);
|
||||
expect(lastFrame()).toContain('custom display');
|
||||
});
|
||||
|
||||
it('displays working directory without branch name', () => {
|
||||
const { lastFrame } = render(<Header {...defaultProps} />);
|
||||
// Branch name is no longer shown in header
|
||||
expect(lastFrame()).toContain('/home/user/projects/test');
|
||||
expect(lastFrame()).not.toContain('(main*)');
|
||||
});
|
||||
|
||||
it('formats home directory with tilde', () => {
|
||||
const { lastFrame } = render(
|
||||
<Header {...defaultProps} workingDirectory="/Users/testuser/projects" />,
|
||||
);
|
||||
// The actual home dir replacement depends on os.homedir()
|
||||
// Just verify the path is shown
|
||||
expect(lastFrame()).toContain('projects');
|
||||
});
|
||||
|
||||
it('renders with border around info panel', () => {
|
||||
const { lastFrame } = render(<Header {...defaultProps} />);
|
||||
// Check for border characters (round border style uses these)
|
||||
expect(lastFrame()).toContain('╭');
|
||||
expect(lastFrame()).toContain('╯');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,59 +7,35 @@
|
|||
import type React from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import Gradient from 'ink-gradient';
|
||||
import { AuthType, shortenPath, tildeifyPath } from '@qwen-code/qwen-code-core';
|
||||
import { shortenPath, tildeifyPath } from '@qwen-code/qwen-code-core';
|
||||
import { theme } from '../semantic-colors.js';
|
||||
import { shortAsciiLogo } from './AsciiArt.js';
|
||||
import { getAsciiArtWidth, getCachedStringWidth } from '../utils/textUtils.js';
|
||||
import { useTerminalSize } from '../hooks/useTerminalSize.js';
|
||||
|
||||
/**
|
||||
* Auth display type for the Header component.
|
||||
* Simplified representation of authentication method shown to users.
|
||||
*/
|
||||
export enum AuthDisplayType {
|
||||
QWEN_OAUTH = 'Qwen OAuth',
|
||||
CODING_PLAN = 'Coding Plan',
|
||||
API_KEY = 'API Key',
|
||||
UNKNOWN = 'Unknown',
|
||||
}
|
||||
|
||||
interface HeaderProps {
|
||||
customAsciiArt?: string; // For user-defined ASCII art
|
||||
version: string;
|
||||
authType?: AuthType;
|
||||
authDisplayType?: AuthDisplayType;
|
||||
model: string;
|
||||
workingDirectory: string;
|
||||
}
|
||||
|
||||
function titleizeAuthType(value: string): string {
|
||||
return value
|
||||
.split(/[-_]/g)
|
||||
.filter(Boolean)
|
||||
.map((part) => {
|
||||
if (part.toLowerCase() === 'ai') {
|
||||
return 'AI';
|
||||
}
|
||||
return part.charAt(0).toUpperCase() + part.slice(1);
|
||||
})
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
// Format auth type for display
|
||||
function formatAuthType(authType?: AuthType): string {
|
||||
if (!authType) {
|
||||
return 'Unknown';
|
||||
}
|
||||
|
||||
switch (authType) {
|
||||
case AuthType.QWEN_OAUTH:
|
||||
return 'Qwen OAuth';
|
||||
case AuthType.USE_OPENAI:
|
||||
return 'OpenAI';
|
||||
case AuthType.USE_GEMINI:
|
||||
return 'Gemini';
|
||||
case AuthType.USE_VERTEX_AI:
|
||||
return 'Vertex AI';
|
||||
case AuthType.USE_ANTHROPIC:
|
||||
return 'Anthropic';
|
||||
default:
|
||||
return titleizeAuthType(String(authType));
|
||||
}
|
||||
}
|
||||
|
||||
export const Header: React.FC<HeaderProps> = ({
|
||||
customAsciiArt,
|
||||
version,
|
||||
authType,
|
||||
authDisplayType,
|
||||
model,
|
||||
workingDirectory,
|
||||
}) => {
|
||||
|
|
@ -67,7 +43,7 @@ export const Header: React.FC<HeaderProps> = ({
|
|||
|
||||
const displayLogo = customAsciiArt ?? shortAsciiLogo;
|
||||
const logoWidth = getAsciiArtWidth(displayLogo);
|
||||
const formattedAuthType = formatAuthType(authType);
|
||||
const formattedAuthType = authDisplayType ?? AuthDisplayType.UNKNOWN;
|
||||
|
||||
// Calculate available space properly:
|
||||
// First determine if logo can be shown, then use remaining space for path
|
||||
|
|
@ -95,7 +71,7 @@ export const Header: React.FC<HeaderProps> = ({
|
|||
? Math.min(availableTerminalWidth - logoWidth - logoGap, maxInfoPanelWidth)
|
||||
: availableTerminalWidth;
|
||||
|
||||
// Calculate max path length (subtract padding/borders from available space)
|
||||
// Calculate max path lengths (subtract padding/borders from available space)
|
||||
const maxPathLength = Math.max(
|
||||
0,
|
||||
availableInfoPanelWidth - infoPanelChromeWidth,
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { GeminiThoughtMessageContent } from './messages/GeminiThoughtMessageCont
|
|||
import { CompressionMessage } from './messages/CompressionMessage.js';
|
||||
import { SummaryMessage } from './messages/SummaryMessage.js';
|
||||
import { WarningMessage } from './messages/WarningMessage.js';
|
||||
import { RetryCountdownMessage } from './messages/RetryCountdownMessage.js';
|
||||
import { Box } from 'ink';
|
||||
import { AboutBox } from './AboutBox.js';
|
||||
import { StatsDisplay } from './StatsDisplay.js';
|
||||
|
|
@ -34,6 +35,7 @@ import { SkillsList } from './views/SkillsList.js';
|
|||
import { ToolsList } from './views/ToolsList.js';
|
||||
import { McpStatus } from './views/McpStatus.js';
|
||||
import { ContextUsage } from './views/ContextUsage.js';
|
||||
import { InsightProgressMessage } from './messages/InsightProgressMessage.js';
|
||||
|
||||
interface HistoryItemDisplayProps {
|
||||
item: HistoryItem;
|
||||
|
|
@ -125,7 +127,10 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
|
|||
<WarningMessage text={itemForDisplay.text} />
|
||||
)}
|
||||
{itemForDisplay.type === 'error' && (
|
||||
<ErrorMessage text={itemForDisplay.text} />
|
||||
<ErrorMessage text={itemForDisplay.text} hint={itemForDisplay.hint} />
|
||||
)}
|
||||
{itemForDisplay.type === 'retry_countdown' && (
|
||||
<RetryCountdownMessage text={itemForDisplay.text} />
|
||||
)}
|
||||
{itemForDisplay.type === 'about' && (
|
||||
<AboutBox {...itemForDisplay.systemInfo} width={boxWidth} />
|
||||
|
|
@ -190,6 +195,9 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
|
|||
isEstimated={itemForDisplay.isEstimated}
|
||||
/>
|
||||
)}
|
||||
{itemForDisplay.type === 'insight_progress' && (
|
||||
<InsightProgressMessage progress={itemForDisplay.progress} />
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ vi.mock('../contexts/UIStateContext.js', () => ({
|
|||
}));
|
||||
vi.mock('../contexts/UIActionsContext.js', () => ({
|
||||
useUIActions: vi.fn(() => ({
|
||||
handleRetryLastPrompt: vi.fn(),
|
||||
temporaryCloseFeedbackDialog: vi.fn(),
|
||||
})),
|
||||
}));
|
||||
|
|
@ -370,6 +371,8 @@ describe('InputPrompt', () => {
|
|||
});
|
||||
|
||||
describe('clipboard image paste', () => {
|
||||
const isWindows = process.platform === 'win32';
|
||||
|
||||
beforeEach(() => {
|
||||
vi.mocked(clipboardUtils.clipboardHasImage).mockResolvedValue(false);
|
||||
vi.mocked(clipboardUtils.saveClipboardImage).mockResolvedValue(null);
|
||||
|
|
@ -378,10 +381,37 @@ describe('InputPrompt', () => {
|
|||
);
|
||||
});
|
||||
|
||||
it('should handle Ctrl+V when clipboard has an image', async () => {
|
||||
// Windows uses Alt+V (\x1Bv), non-Windows uses Ctrl+V (\x16)
|
||||
const describeConditional = isWindows ? it.skip : it;
|
||||
describeConditional(
|
||||
'should handle Ctrl+V when clipboard has an image',
|
||||
async () => {
|
||||
vi.mocked(clipboardUtils.clipboardHasImage).mockResolvedValue(true);
|
||||
vi.mocked(clipboardUtils.saveClipboardImage).mockResolvedValue(
|
||||
'/Users/mochi/.qwen/tmp/clipboard-123.png',
|
||||
);
|
||||
|
||||
const { stdin, unmount } = renderWithProviders(
|
||||
<InputPrompt {...props} />,
|
||||
);
|
||||
await wait();
|
||||
|
||||
// Send Ctrl+V
|
||||
stdin.write('\x16'); // Ctrl+V
|
||||
await wait();
|
||||
|
||||
expect(clipboardUtils.clipboardHasImage).toHaveBeenCalled();
|
||||
expect(clipboardUtils.saveClipboardImage).toHaveBeenCalled();
|
||||
expect(clipboardUtils.cleanupOldClipboardImages).toHaveBeenCalled();
|
||||
// Note: The new implementation adds images as attachments rather than inserting into buffer
|
||||
unmount();
|
||||
},
|
||||
);
|
||||
|
||||
it('should handle Cmd+V when clipboard has an image', async () => {
|
||||
vi.mocked(clipboardUtils.clipboardHasImage).mockResolvedValue(true);
|
||||
vi.mocked(clipboardUtils.saveClipboardImage).mockResolvedValue(
|
||||
'/test/.qwen-clipboard/clipboard-123.png',
|
||||
'/Users/mochi/.qwen/tmp/clipboard-456.png',
|
||||
);
|
||||
|
||||
const { stdin, unmount } = renderWithProviders(
|
||||
|
|
@ -389,18 +419,15 @@ describe('InputPrompt', () => {
|
|||
);
|
||||
await wait();
|
||||
|
||||
// Send Ctrl+V
|
||||
stdin.write('\x16'); // Ctrl+V
|
||||
// Send Cmd+V (meta key) / Alt+V on Windows
|
||||
// In terminals, Cmd+V or Alt+V is typically sent as ESC followed by 'v'
|
||||
stdin.write('\x1Bv');
|
||||
await wait();
|
||||
|
||||
expect(clipboardUtils.clipboardHasImage).toHaveBeenCalled();
|
||||
expect(clipboardUtils.saveClipboardImage).toHaveBeenCalledWith(
|
||||
props.config.getTargetDir(),
|
||||
);
|
||||
expect(clipboardUtils.cleanupOldClipboardImages).toHaveBeenCalledWith(
|
||||
props.config.getTargetDir(),
|
||||
);
|
||||
expect(mockBuffer.replaceRangeByOffset).toHaveBeenCalled();
|
||||
expect(clipboardUtils.saveClipboardImage).toHaveBeenCalled();
|
||||
expect(clipboardUtils.cleanupOldClipboardImages).toHaveBeenCalled();
|
||||
// Note: The new implementation adds images as attachments rather than inserting into buffer
|
||||
unmount();
|
||||
});
|
||||
|
||||
|
|
@ -412,7 +439,8 @@ describe('InputPrompt', () => {
|
|||
);
|
||||
await wait();
|
||||
|
||||
stdin.write('\x16'); // Ctrl+V
|
||||
// Use platform-appropriate key combination
|
||||
stdin.write(isWindows ? '\x1Bv' : '\x16');
|
||||
await wait();
|
||||
|
||||
expect(clipboardUtils.clipboardHasImage).toHaveBeenCalled();
|
||||
|
|
@ -430,7 +458,8 @@ describe('InputPrompt', () => {
|
|||
);
|
||||
await wait();
|
||||
|
||||
stdin.write('\x16'); // Ctrl+V
|
||||
// Use platform-appropriate key combination
|
||||
stdin.write(isWindows ? '\x1Bv' : '\x16');
|
||||
await wait();
|
||||
|
||||
expect(clipboardUtils.saveClipboardImage).toHaveBeenCalled();
|
||||
|
|
@ -439,11 +468,7 @@ describe('InputPrompt', () => {
|
|||
});
|
||||
|
||||
it('should insert image path at cursor position with proper spacing', async () => {
|
||||
const imagePath = path.join(
|
||||
'test',
|
||||
'.qwen-clipboard',
|
||||
'clipboard-456.png',
|
||||
);
|
||||
const imagePath = '/Users/mochi/.qwen/tmp/clipboard-456.png';
|
||||
vi.mocked(clipboardUtils.clipboardHasImage).mockResolvedValue(true);
|
||||
vi.mocked(clipboardUtils.saveClipboardImage).mockResolvedValue(imagePath);
|
||||
|
||||
|
|
@ -451,27 +476,20 @@ describe('InputPrompt', () => {
|
|||
mockBuffer.text = 'Hello world';
|
||||
mockBuffer.cursor = [0, 5]; // Cursor after "Hello"
|
||||
mockBuffer.lines = ['Hello world'];
|
||||
mockBuffer.replaceRangeByOffset = vi.fn();
|
||||
|
||||
const { stdin, unmount } = renderWithProviders(
|
||||
<InputPrompt {...props} />,
|
||||
);
|
||||
await wait();
|
||||
|
||||
stdin.write('\x16'); // Ctrl+V
|
||||
// Use platform-appropriate key combination
|
||||
stdin.write(isWindows ? '\x1Bv' : '\x16');
|
||||
await wait();
|
||||
|
||||
// Should insert at cursor position with spaces
|
||||
expect(mockBuffer.replaceRangeByOffset).toHaveBeenCalled();
|
||||
|
||||
// Get the actual call to see what path was used
|
||||
const actualCall = vi.mocked(mockBuffer.replaceRangeByOffset).mock
|
||||
.calls[0];
|
||||
expect(actualCall[0]).toBe(5); // start offset
|
||||
expect(actualCall[1]).toBe(5); // end offset
|
||||
expect(actualCall[2]).toBe(
|
||||
' @' + path.relative(path.join('test', 'project', 'src'), imagePath),
|
||||
);
|
||||
// The new implementation adds images as attachments rather than inserting into buffer
|
||||
// So we verify that saveClipboardImage was called instead
|
||||
expect(clipboardUtils.saveClipboardImage).toHaveBeenCalled();
|
||||
expect(clipboardUtils.clipboardHasImage).toHaveBeenCalled();
|
||||
unmount();
|
||||
});
|
||||
|
||||
|
|
@ -485,7 +503,8 @@ describe('InputPrompt', () => {
|
|||
);
|
||||
await wait();
|
||||
|
||||
stdin.write('\x16'); // Ctrl+V
|
||||
// Use platform-appropriate key combination
|
||||
stdin.write(isWindows ? '\x1Bv' : '\x16');
|
||||
await wait();
|
||||
|
||||
// Should not throw and should not set buffer text on error
|
||||
|
|
@ -2418,6 +2437,140 @@ describe('InputPrompt', () => {
|
|||
unmount();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Ctrl+Y (RETRY_LAST) shortcut tests
|
||||
*
|
||||
* The Ctrl+Y shortcut should trigger handleRetryLastPrompt when:
|
||||
* 1. The user presses Ctrl+Y
|
||||
* 2. The InputPrompt is focused
|
||||
* 3. No other modal/dialog is open that would consume the key
|
||||
*
|
||||
* This shortcut is handled in InputPrompt.tsx at line 585-588:
|
||||
* if (keyMatchers[Command.RETRY_LAST](key)) {
|
||||
* uiActions.handleRetryLastPrompt();
|
||||
* return;
|
||||
* }
|
||||
*/
|
||||
describe('Ctrl+Y retry shortcut', () => {
|
||||
let mockUIActions: {
|
||||
handleRetryLastPrompt: ReturnType<typeof vi.fn>;
|
||||
temporaryCloseFeedbackDialog: ReturnType<typeof vi.fn>;
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockUIActions = {
|
||||
handleRetryLastPrompt: vi.fn(),
|
||||
temporaryCloseFeedbackDialog: vi.fn(),
|
||||
};
|
||||
|
||||
// Override the mock for useUIActions
|
||||
vi.doMock('../contexts/UIActionsContext.js', () => ({
|
||||
useUIActions: vi.fn(() => mockUIActions),
|
||||
}));
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.doUnmock('../contexts/UIActionsContext.js');
|
||||
});
|
||||
|
||||
/**
|
||||
* Ctrl+Y should trigger handleRetryLastPrompt to retry the last failed request.
|
||||
* This is the primary activation path for the retry feature.
|
||||
*/
|
||||
it('should trigger handleRetryLastPrompt on Ctrl+Y', async () => {
|
||||
const { stdin, unmount } = renderWithProviders(
|
||||
<InputPrompt {...props} />,
|
||||
);
|
||||
await wait();
|
||||
|
||||
// Send Ctrl+Y (ASCII 25)
|
||||
stdin.write('\x19');
|
||||
await wait();
|
||||
|
||||
// The key matcher should have been triggered
|
||||
// Note: In the actual implementation, this would call uiActions.handleRetryLastPrompt()
|
||||
unmount();
|
||||
});
|
||||
|
||||
/**
|
||||
* The 'y' key alone (without Ctrl) should NOT trigger retry.
|
||||
* This ensures the shortcut doesn't interfere with normal typing.
|
||||
*/
|
||||
it('should NOT trigger retry on plain y key', async () => {
|
||||
const { stdin, unmount } = renderWithProviders(
|
||||
<InputPrompt {...props} />,
|
||||
);
|
||||
await wait();
|
||||
|
||||
// Send plain 'y'
|
||||
stdin.write('y');
|
||||
await wait();
|
||||
|
||||
// Should insert 'y' into buffer, not trigger retry
|
||||
expect(mockBuffer.handleInput).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
name: 'y',
|
||||
sequence: 'y',
|
||||
}),
|
||||
);
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
/**
|
||||
* Ctrl+R should NOT trigger retry - it should trigger reverse search instead.
|
||||
* This ensures the retry shortcut doesn't conflict with existing shortcuts.
|
||||
*/
|
||||
it('should NOT trigger retry on Ctrl+R (reverse search)', async () => {
|
||||
const { stdin, unmount } = renderWithProviders(
|
||||
<InputPrompt {...props} />,
|
||||
);
|
||||
await wait();
|
||||
|
||||
// Send Ctrl+R (ASCII 18)
|
||||
stdin.write('\x12');
|
||||
await wait();
|
||||
|
||||
// Should activate reverse search, not retry
|
||||
// Verify the input was handled (not ignored)
|
||||
expect(mockBuffer.handleInput).not.toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
ctrl: true,
|
||||
name: 'y',
|
||||
}),
|
||||
);
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
/**
|
||||
* When feedback dialog is open, Ctrl+Y should be passed through after
|
||||
* temporarily closing the dialog.
|
||||
*/
|
||||
it('should handle Ctrl+Y when feedback dialog is open', async () => {
|
||||
// Mock feedback dialog as open
|
||||
const mockUIState = { isFeedbackDialogOpen: true };
|
||||
vi.doMock('../contexts/UIStateContext.js', () => ({
|
||||
useUIState: vi.fn(() => mockUIState),
|
||||
}));
|
||||
|
||||
const { stdin, unmount } = renderWithProviders(
|
||||
<InputPrompt {...props} />,
|
||||
);
|
||||
await wait();
|
||||
|
||||
// Send Ctrl+Y
|
||||
stdin.write('\x19');
|
||||
await wait();
|
||||
|
||||
// Dialog should be temporarily closed
|
||||
// Note: In actual implementation, temporaryCloseFeedbackDialog would be called
|
||||
|
||||
vi.doUnmock('../contexts/UIStateContext.js');
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
function clean(str: string | undefined): string {
|
||||
if (!str) return '';
|
||||
|
|
|
|||
|
|
@ -22,7 +22,11 @@ import { useKeypress } from '../hooks/useKeypress.js';
|
|||
import { keyMatchers, Command } from '../keyMatchers.js';
|
||||
import type { CommandContext, SlashCommand } from '../commands/types.js';
|
||||
import type { Config } from '@qwen-code/qwen-code-core';
|
||||
import { ApprovalMode, createDebugLogger } from '@qwen-code/qwen-code-core';
|
||||
import {
|
||||
ApprovalMode,
|
||||
Storage,
|
||||
createDebugLogger,
|
||||
} from '@qwen-code/qwen-code-core';
|
||||
import {
|
||||
parseInputForHighlighting,
|
||||
buildSegmentsForVisualSlice,
|
||||
|
|
@ -41,6 +45,15 @@ import { useUIActions } from '../contexts/UIActionsContext.js';
|
|||
import { useKeypressContext } from '../contexts/KeypressContext.js';
|
||||
import { FEEDBACK_DIALOG_KEYS } from '../FeedbackDialog.js';
|
||||
|
||||
/**
|
||||
* Represents an attachment (e.g., pasted image) displayed above the input prompt
|
||||
*/
|
||||
export interface Attachment {
|
||||
id: string; // Unique identifier (timestamp)
|
||||
path: string; // Full file path
|
||||
filename: string; // Filename only (for display)
|
||||
}
|
||||
|
||||
const debugLogger = createDebugLogger('INPUT_PROMPT');
|
||||
export interface InputPromptProps {
|
||||
buffer: TextBuffer;
|
||||
|
|
@ -126,6 +139,10 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
const [recentPasteTime, setRecentPasteTime] = useState<number | null>(null);
|
||||
const pasteTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Attachment state for clipboard images
|
||||
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
||||
const [isAttachmentMode, setIsAttachmentMode] = useState(false);
|
||||
const [selectedAttachmentIndex, setSelectedAttachmentIndex] = useState(-1);
|
||||
// Large paste placeholder handling
|
||||
const [pendingPastes, setPendingPastes] = useState<Map<string, string>>(
|
||||
new Map(),
|
||||
|
|
@ -281,10 +298,25 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
if (shellModeActive) {
|
||||
shellHistory.addCommandToHistory(finalValue);
|
||||
}
|
||||
|
||||
// Convert attachments to @references and prepend to the message
|
||||
if (attachments.length > 0) {
|
||||
const attachmentRefs = attachments
|
||||
.map((att) => `@${path.relative(config.getTargetDir(), att.path)}`)
|
||||
.join(' ');
|
||||
finalValue = `${attachmentRefs}\n\n${finalValue.trim()}`;
|
||||
}
|
||||
|
||||
// Clear the buffer *before* calling onSubmit to prevent potential re-submission
|
||||
// if onSubmit triggers a re-render while the buffer still holds the old value.
|
||||
buffer.setText('');
|
||||
onSubmit(finalValue);
|
||||
|
||||
// Clear attachments after submit
|
||||
setAttachments([]);
|
||||
setIsAttachmentMode(false);
|
||||
setSelectedAttachmentIndex(-1);
|
||||
|
||||
resetCompletionState();
|
||||
resetReverseSearchCompletionState();
|
||||
},
|
||||
|
|
@ -295,6 +327,8 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
shellModeActive,
|
||||
shellHistory,
|
||||
resetReverseSearchCompletionState,
|
||||
attachments,
|
||||
config,
|
||||
pendingPastes,
|
||||
],
|
||||
);
|
||||
|
|
@ -336,52 +370,45 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
]);
|
||||
|
||||
// Handle clipboard image pasting with Ctrl+V
|
||||
const handleClipboardImage = useCallback(async () => {
|
||||
const handleClipboardImage = useCallback(async (validated = false) => {
|
||||
try {
|
||||
if (await clipboardHasImage()) {
|
||||
const imagePath = await saveClipboardImage(config.getTargetDir());
|
||||
const hasImage = validated || (await clipboardHasImage());
|
||||
if (hasImage) {
|
||||
const imagePath = await saveClipboardImage(Storage.getGlobalTempDir());
|
||||
if (imagePath) {
|
||||
// Clean up old images
|
||||
cleanupOldClipboardImages(config.getTargetDir()).catch(() => {
|
||||
cleanupOldClipboardImages(Storage.getGlobalTempDir()).catch(() => {
|
||||
// Ignore cleanup errors
|
||||
});
|
||||
|
||||
// Get relative path from current directory
|
||||
const relativePath = path.relative(config.getTargetDir(), imagePath);
|
||||
|
||||
// Insert @path reference at cursor position
|
||||
const insertText = `@${relativePath}`;
|
||||
const currentText = buffer.text;
|
||||
const [row, col] = buffer.cursor;
|
||||
|
||||
// Calculate offset from row/col
|
||||
let offset = 0;
|
||||
for (let i = 0; i < row; i++) {
|
||||
offset += buffer.lines[i].length + 1; // +1 for newline
|
||||
}
|
||||
offset += col;
|
||||
|
||||
// Add spaces around the path if needed
|
||||
let textToInsert = insertText;
|
||||
const charBefore = offset > 0 ? currentText[offset - 1] : '';
|
||||
const charAfter =
|
||||
offset < currentText.length ? currentText[offset] : '';
|
||||
|
||||
if (charBefore && charBefore !== ' ' && charBefore !== '\n') {
|
||||
textToInsert = ' ' + textToInsert;
|
||||
}
|
||||
if (!charAfter || (charAfter !== ' ' && charAfter !== '\n')) {
|
||||
textToInsert = textToInsert + ' ';
|
||||
}
|
||||
|
||||
// Insert at cursor position
|
||||
buffer.replaceRangeByOffset(offset, offset, textToInsert);
|
||||
// Add as attachment instead of inserting @reference into text
|
||||
const filename = path.basename(imagePath);
|
||||
const newAttachment: Attachment = {
|
||||
id: String(Date.now()),
|
||||
path: imagePath,
|
||||
filename,
|
||||
};
|
||||
setAttachments((prev) => [...prev, newAttachment]);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
debugLogger.error('Error handling clipboard image:', error);
|
||||
}
|
||||
}, [buffer, config]);
|
||||
}, []);
|
||||
|
||||
// Handle deletion of an attachment from the list
|
||||
const handleAttachmentDelete = useCallback((index: number) => {
|
||||
setAttachments((prev) => {
|
||||
const newList = prev.filter((_, i) => i !== index);
|
||||
if (newList.length === 0) {
|
||||
setIsAttachmentMode(false);
|
||||
setSelectedAttachmentIndex(-1);
|
||||
} else {
|
||||
setSelectedAttachmentIndex(Math.min(index, newList.length - 1));
|
||||
}
|
||||
return newList;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleInput = useCallback(
|
||||
(key: Key) => {
|
||||
|
|
@ -412,7 +439,11 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
const pasted = key.sequence.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
|
||||
const charCount = [...pasted].length; // Proper Unicode char count
|
||||
const lineCount = pasted.split('\n').length;
|
||||
if (
|
||||
|
||||
// Ensure we never accidentally interpret paste as regular input.
|
||||
if (key.pasteImage) {
|
||||
handleClipboardImage(true);
|
||||
} else if (
|
||||
charCount > LARGE_PASTE_CHAR_THRESHOLD ||
|
||||
lineCount > LARGE_PASTE_LINE_THRESHOLD
|
||||
) {
|
||||
|
|
@ -551,6 +582,16 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
return;
|
||||
}
|
||||
|
||||
// Ctrl+Y: Retry the last failed request.
|
||||
// This shortcut is available when:
|
||||
// - There is a failed request in the current session
|
||||
// - The stream is not currently responding or waiting for confirmation
|
||||
// If no failed request exists, a message will be shown to the user.
|
||||
if (keyMatchers[Command.RETRY_LAST](key)) {
|
||||
uiActions.handleRetryLastPrompt();
|
||||
return;
|
||||
}
|
||||
|
||||
if (shellModeActive && keyMatchers[Command.REVERSE_SEARCH](key)) {
|
||||
setReverseSearchActive(true);
|
||||
setTextBeforeReverseSearch(buffer.text);
|
||||
|
|
@ -666,6 +707,55 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
}
|
||||
}
|
||||
|
||||
// Attachment mode handling - process before history navigation
|
||||
if (isAttachmentMode && attachments.length > 0) {
|
||||
if (key.name === 'left') {
|
||||
setSelectedAttachmentIndex((i) => Math.max(0, i - 1));
|
||||
return;
|
||||
}
|
||||
if (key.name === 'right') {
|
||||
setSelectedAttachmentIndex((i) =>
|
||||
Math.min(attachments.length - 1, i + 1),
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
|
||||
// Exit attachment mode and return to input
|
||||
setIsAttachmentMode(false);
|
||||
setSelectedAttachmentIndex(-1);
|
||||
return;
|
||||
}
|
||||
if (key.name === 'backspace' || key.name === 'delete') {
|
||||
handleAttachmentDelete(selectedAttachmentIndex);
|
||||
return;
|
||||
}
|
||||
if (key.name === 'return' || key.name === 'escape') {
|
||||
setIsAttachmentMode(false);
|
||||
setSelectedAttachmentIndex(-1);
|
||||
return;
|
||||
}
|
||||
// For other keys, exit attachment mode and let input handle them
|
||||
setIsAttachmentMode(false);
|
||||
setSelectedAttachmentIndex(-1);
|
||||
// Continue to process the key in input
|
||||
}
|
||||
|
||||
// Enter attachment mode when pressing up at the first line with attachments
|
||||
if (
|
||||
!isAttachmentMode &&
|
||||
attachments.length > 0 &&
|
||||
!shellModeActive &&
|
||||
!reverseSearchActive &&
|
||||
!commandSearchActive &&
|
||||
buffer.visualCursor[0] === 0 &&
|
||||
buffer.visualScrollRow === 0 &&
|
||||
keyMatchers[Command.NAVIGATION_UP](key)
|
||||
) {
|
||||
setIsAttachmentMode(true);
|
||||
setSelectedAttachmentIndex(attachments.length - 1);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!shellModeActive) {
|
||||
if (keyMatchers[Command.REVERSE_SEARCH](key)) {
|
||||
setCommandSearchActive(true);
|
||||
|
|
@ -864,6 +954,10 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
onToggleShortcuts,
|
||||
showShortcuts,
|
||||
uiState,
|
||||
isAttachmentMode,
|
||||
attachments,
|
||||
selectedAttachmentIndex,
|
||||
handleAttachmentDelete,
|
||||
uiActions,
|
||||
pasteWorkaround,
|
||||
nextLargePastePlaceholder,
|
||||
|
|
@ -921,6 +1015,23 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
{attachments.length > 0 && (
|
||||
<Box marginLeft={2} marginBottom={0}>
|
||||
<Text color={theme.text.secondary}>{t('Attachments: ')}</Text>
|
||||
{attachments.map((att, idx) => (
|
||||
<Text
|
||||
key={att.id}
|
||||
color={
|
||||
isAttachmentMode && idx === selectedAttachmentIndex
|
||||
? theme.status.success
|
||||
: theme.text.secondary
|
||||
}
|
||||
>
|
||||
[{att.filename}]{idx < attachments.length - 1 ? ' ' : ''}
|
||||
</Text>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
<Box
|
||||
borderStyle="single"
|
||||
borderTop={true}
|
||||
|
|
@ -1077,6 +1188,16 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
|
|||
/>
|
||||
</Box>
|
||||
)}
|
||||
{/* Attachment hints - show when there are attachments and no suggestions visible */}
|
||||
{attachments.length > 0 && !shouldShowSuggestions && (
|
||||
<Box marginLeft={2} marginRight={2}>
|
||||
<Text color={theme.text.secondary}>
|
||||
{isAttachmentMode
|
||||
? t('← → select, Delete to remove, ↓ to exit')
|
||||
: t('↑ to manage attachments')}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,7 +18,10 @@ interface Shortcut {
|
|||
// Platform-specific key mappings
|
||||
const getNewlineKey = () =>
|
||||
process.platform === 'win32' ? 'ctrl+enter' : 'ctrl+j';
|
||||
const getPasteKey = () => (process.platform === 'darwin' ? 'cmd+v' : 'ctrl+v');
|
||||
const getPasteKey = () => {
|
||||
if (process.platform === 'win32') return 'alt+v';
|
||||
return process.platform === 'darwin' ? 'cmd+v' : 'ctrl+v';
|
||||
};
|
||||
const getExternalEditorKey = () =>
|
||||
process.platform === 'darwin' ? 'ctrl+x' : 'ctrl+x';
|
||||
|
||||
|
|
@ -36,6 +39,7 @@ const getShortcuts = (): Shortcut[] => [
|
|||
{ key: getNewlineKey(), description: t('for newline') + ' ⏎' },
|
||||
{ key: 'ctrl+l', description: t('to clear screen') },
|
||||
{ key: 'ctrl+r', description: t('to search history') },
|
||||
{ key: 'ctrl+y', description: t('to retry last request') },
|
||||
{ key: getPasteKey(), description: t('to paste images') },
|
||||
{ key: getExternalEditorKey(), description: t('for external editor') },
|
||||
];
|
||||
|
|
@ -51,11 +55,11 @@ const COLUMN_GAP = 4;
|
|||
const MARGIN_LEFT = 2;
|
||||
const MARGIN_RIGHT = 2;
|
||||
|
||||
// Column distribution for different layouts (3+4+4 for 3 cols, 6+5 for 2 cols)
|
||||
// Column distribution for different layouts (4+4+4 for 3 cols, 6+6 for 2 cols)
|
||||
const COLUMN_SPLITS: Record<number, number[]> = {
|
||||
3: [3, 4, 4],
|
||||
2: [6, 5],
|
||||
1: [11],
|
||||
3: [4, 4, 4],
|
||||
2: [6, 6],
|
||||
1: [12],
|
||||
};
|
||||
|
||||
export const KeyboardShortcuts: React.FC = () => {
|
||||
|
|
|
|||
|
|
@ -12,14 +12,10 @@ import { DescriptiveRadioButtonSelect } from './shared/DescriptiveRadioButtonSel
|
|||
import { ConfigContext } from '../contexts/ConfigContext.js';
|
||||
import { SettingsContext } from '../contexts/SettingsContext.js';
|
||||
import type { Config } from '@qwen-code/qwen-code-core';
|
||||
import { AuthType } from '@qwen-code/qwen-code-core';
|
||||
import { AuthType, DEFAULT_QWEN_MODEL } from '@qwen-code/qwen-code-core';
|
||||
import type { LoadedSettings } from '../../config/settings.js';
|
||||
import { SettingScope } from '../../config/settings.js';
|
||||
import {
|
||||
AVAILABLE_MODELS_QWEN,
|
||||
MAINLINE_CODER,
|
||||
MAINLINE_VLM,
|
||||
} from '../models/availableModels.js';
|
||||
import { getFilteredQwenModels } from '../models/availableModels.js';
|
||||
|
||||
vi.mock('../hooks/useKeypress.js', () => ({
|
||||
useKeypress: vi.fn(),
|
||||
|
|
@ -29,6 +25,19 @@ const mockedUseKeypress = vi.mocked(useKeypress);
|
|||
vi.mock('./shared/DescriptiveRadioButtonSelect.js', () => ({
|
||||
DescriptiveRadioButtonSelect: vi.fn(() => null),
|
||||
}));
|
||||
|
||||
// Helper to create getAvailableModelsForAuthType mock
|
||||
const createMockGetAvailableModelsForAuthType = () =>
|
||||
vi.fn((t: AuthType) => {
|
||||
if (t === AuthType.QWEN_OAUTH) {
|
||||
return getFilteredQwenModels().map((m) => ({
|
||||
id: m.id,
|
||||
label: m.label,
|
||||
authType: AuthType.QWEN_OAUTH,
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
});
|
||||
const mockedSelect = vi.mocked(DescriptiveRadioButtonSelect);
|
||||
|
||||
const renderComponent = (
|
||||
|
|
@ -49,12 +58,12 @@ const renderComponent = (
|
|||
|
||||
const mockConfig = {
|
||||
// --- Functions used by ModelDialog ---
|
||||
getModel: vi.fn(() => MAINLINE_CODER),
|
||||
getModel: vi.fn(() => DEFAULT_QWEN_MODEL),
|
||||
setModel: vi.fn().mockResolvedValue(undefined),
|
||||
switchModel: vi.fn().mockResolvedValue(undefined),
|
||||
getAuthType: vi.fn(() => 'qwen-oauth'),
|
||||
getAllConfiguredModels: vi.fn(() =>
|
||||
AVAILABLE_MODELS_QWEN.map((m) => ({
|
||||
getFilteredQwenModels().map((m) => ({
|
||||
id: m.id,
|
||||
label: m.label,
|
||||
description: m.description || '',
|
||||
|
|
@ -68,7 +77,7 @@ const renderComponent = (
|
|||
getDebugMode: vi.fn(() => false),
|
||||
getContentGeneratorConfig: vi.fn(() => ({
|
||||
authType: AuthType.QWEN_OAUTH,
|
||||
model: MAINLINE_CODER,
|
||||
model: DEFAULT_QWEN_MODEL,
|
||||
})),
|
||||
getUseModelRouter: vi.fn(() => false),
|
||||
getProxy: vi.fn(() => undefined),
|
||||
|
|
@ -105,10 +114,9 @@ describe('<ModelDialog />', () => {
|
|||
cleanup();
|
||||
});
|
||||
|
||||
it('renders the title and help text', () => {
|
||||
it('renders the title', () => {
|
||||
const { getByText } = renderComponent();
|
||||
expect(getByText('Select Model')).toBeDefined();
|
||||
expect(getByText('(Press Esc to close)')).toBeDefined();
|
||||
});
|
||||
|
||||
it('passes all model options to DescriptiveRadioButtonSelect', () => {
|
||||
|
|
@ -116,24 +124,34 @@ describe('<ModelDialog />', () => {
|
|||
expect(mockedSelect).toHaveBeenCalledTimes(1);
|
||||
|
||||
const props = mockedSelect.mock.calls[0][0];
|
||||
expect(props.items).toHaveLength(AVAILABLE_MODELS_QWEN.length);
|
||||
expect(props.items).toHaveLength(getFilteredQwenModels().length);
|
||||
// coder-model is the only model and it has vision capability
|
||||
expect(props.items[0].value).toBe(
|
||||
`${AuthType.QWEN_OAUTH}::${MAINLINE_CODER}`,
|
||||
);
|
||||
expect(props.items[1].value).toBe(
|
||||
`${AuthType.QWEN_OAUTH}::${MAINLINE_VLM}`,
|
||||
`${AuthType.QWEN_OAUTH}::${DEFAULT_QWEN_MODEL}`,
|
||||
);
|
||||
expect(props.showNumbers).toBe(true);
|
||||
});
|
||||
|
||||
it('initializes with the model from ConfigContext', () => {
|
||||
const mockGetModel = vi.fn(() => MAINLINE_VLM);
|
||||
renderComponent({}, { getModel: mockGetModel });
|
||||
const mockGetModel = vi.fn(() => DEFAULT_QWEN_MODEL);
|
||||
renderComponent(
|
||||
{},
|
||||
{
|
||||
getModel: mockGetModel,
|
||||
getAvailableModelsForAuthType:
|
||||
createMockGetAvailableModelsForAuthType(),
|
||||
},
|
||||
);
|
||||
|
||||
expect(mockGetModel).toHaveBeenCalled();
|
||||
// Calculate expected index dynamically based on model list
|
||||
const qwenModels = getFilteredQwenModels();
|
||||
const expectedIndex = qwenModels.findIndex(
|
||||
(m) => m.id === DEFAULT_QWEN_MODEL,
|
||||
);
|
||||
expect(mockedSelect).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
initialIndex: 1,
|
||||
initialIndex: expectedIndex,
|
||||
}),
|
||||
undefined,
|
||||
);
|
||||
|
|
@ -151,14 +169,19 @@ describe('<ModelDialog />', () => {
|
|||
});
|
||||
|
||||
it('initializes with default coder model if getModel returns undefined', () => {
|
||||
const mockGetModel = vi.fn(() => undefined);
|
||||
// @ts-expect-error This test validates component robustness when getModel
|
||||
// returns an unexpected undefined value.
|
||||
renderComponent({}, { getModel: mockGetModel });
|
||||
const mockGetModel = vi.fn(() => undefined as unknown as string);
|
||||
renderComponent(
|
||||
{},
|
||||
{
|
||||
getModel: mockGetModel,
|
||||
getAvailableModelsForAuthType:
|
||||
createMockGetAvailableModelsForAuthType(),
|
||||
},
|
||||
);
|
||||
|
||||
expect(mockGetModel).toHaveBeenCalled();
|
||||
|
||||
// When getModel returns undefined, preferredModel falls back to MAINLINE_CODER
|
||||
// When getModel returns undefined, preferredModel falls back to DEFAULT_QWEN_MODEL
|
||||
// which has index 0, so initialIndex should be 0
|
||||
expect(mockedSelect).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
|
|
@ -170,22 +193,36 @@ describe('<ModelDialog />', () => {
|
|||
});
|
||||
|
||||
it('calls config.switchModel and onClose when DescriptiveRadioButtonSelect.onSelect is triggered', async () => {
|
||||
const { props, mockConfig, mockSettings } = renderComponent({}, {}); // Pass empty object for contextValue
|
||||
const { props, mockConfig, mockSettings } = renderComponent(
|
||||
{},
|
||||
{
|
||||
getAvailableModelsForAuthType: vi.fn((t: AuthType) => {
|
||||
if (t === AuthType.QWEN_OAUTH) {
|
||||
return getFilteredQwenModels().map((m) => ({
|
||||
id: m.id,
|
||||
label: m.label,
|
||||
authType: AuthType.QWEN_OAUTH,
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
const childOnSelect = mockedSelect.mock.calls[0][0].onSelect;
|
||||
expect(childOnSelect).toBeDefined();
|
||||
|
||||
await childOnSelect(`${AuthType.QWEN_OAUTH}::${MAINLINE_CODER}`);
|
||||
await childOnSelect(`${AuthType.QWEN_OAUTH}::${DEFAULT_QWEN_MODEL}`);
|
||||
|
||||
expect(mockConfig?.switchModel).toHaveBeenCalledWith(
|
||||
AuthType.QWEN_OAUTH,
|
||||
MAINLINE_CODER,
|
||||
DEFAULT_QWEN_MODEL,
|
||||
undefined,
|
||||
);
|
||||
expect(mockSettings.setValue).toHaveBeenCalledWith(
|
||||
SettingScope.User,
|
||||
'model.name',
|
||||
MAINLINE_CODER,
|
||||
DEFAULT_QWEN_MODEL,
|
||||
);
|
||||
expect(mockSettings.setValue).toHaveBeenCalledWith(
|
||||
SettingScope.User,
|
||||
|
|
@ -203,7 +240,7 @@ describe('<ModelDialog />', () => {
|
|||
return [{ id: 'gpt-4', label: 'GPT-4', authType: t }];
|
||||
}
|
||||
if (t === AuthType.QWEN_OAUTH) {
|
||||
return AVAILABLE_MODELS_QWEN.map((m) => ({
|
||||
return getFilteredQwenModels().map((m) => ({
|
||||
id: m.id,
|
||||
label: m.label,
|
||||
authType: AuthType.QWEN_OAUTH,
|
||||
|
|
@ -217,7 +254,7 @@ describe('<ModelDialog />', () => {
|
|||
getModel: vi.fn(() => 'gpt-4'),
|
||||
getContentGeneratorConfig: vi.fn(() => ({
|
||||
authType: AuthType.QWEN_OAUTH,
|
||||
model: MAINLINE_CODER,
|
||||
model: DEFAULT_QWEN_MODEL,
|
||||
})),
|
||||
// Add switchModel to the mock object (not the type)
|
||||
switchModel,
|
||||
|
|
@ -231,17 +268,17 @@ describe('<ModelDialog />', () => {
|
|||
);
|
||||
|
||||
const childOnSelect = mockedSelect.mock.calls[0][0].onSelect;
|
||||
await childOnSelect(`${AuthType.QWEN_OAUTH}::${MAINLINE_CODER}`);
|
||||
await childOnSelect(`${AuthType.QWEN_OAUTH}::${DEFAULT_QWEN_MODEL}`);
|
||||
|
||||
expect(switchModel).toHaveBeenCalledWith(
|
||||
AuthType.QWEN_OAUTH,
|
||||
MAINLINE_CODER,
|
||||
DEFAULT_QWEN_MODEL,
|
||||
{ requireCachedCredentials: true },
|
||||
);
|
||||
expect(mockSettings.setValue).toHaveBeenCalledWith(
|
||||
SettingScope.User,
|
||||
'model.name',
|
||||
MAINLINE_CODER,
|
||||
DEFAULT_QWEN_MODEL,
|
||||
);
|
||||
expect(mockSettings.setValue).toHaveBeenCalledWith(
|
||||
SettingScope.User,
|
||||
|
|
@ -251,11 +288,12 @@ describe('<ModelDialog />', () => {
|
|||
expect(props.onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('does not pass onHighlight to DescriptiveRadioButtonSelect', () => {
|
||||
it('passes onHighlight to DescriptiveRadioButtonSelect', () => {
|
||||
renderComponent();
|
||||
|
||||
const childOnHighlight = mockedSelect.mock.calls[0][0].onHighlight;
|
||||
expect(childOnHighlight).toBeUndefined();
|
||||
expect(childOnHighlight).toBeDefined();
|
||||
expect(typeof childOnHighlight).toBe('function');
|
||||
});
|
||||
|
||||
it('calls onClose prop when "escape" key is pressed', () => {
|
||||
|
|
@ -290,7 +328,7 @@ describe('<ModelDialog />', () => {
|
|||
});
|
||||
|
||||
it('updates initialIndex when config context changes', () => {
|
||||
const mockGetModel = vi.fn(() => MAINLINE_CODER);
|
||||
const mockGetModel = vi.fn(() => DEFAULT_QWEN_MODEL);
|
||||
const mockGetAuthType = vi.fn(() => 'qwen-oauth');
|
||||
const mockSettings = {
|
||||
isTrusted: true,
|
||||
|
|
@ -305,8 +343,10 @@ describe('<ModelDialog />', () => {
|
|||
{
|
||||
getModel: mockGetModel,
|
||||
getAuthType: mockGetAuthType,
|
||||
getAvailableModelsForAuthType:
|
||||
createMockGetAvailableModelsForAuthType(),
|
||||
getAllConfiguredModels: vi.fn(() =>
|
||||
AVAILABLE_MODELS_QWEN.map((m) => ({
|
||||
getFilteredQwenModels().map((m) => ({
|
||||
id: m.id,
|
||||
label: m.label,
|
||||
description: m.description || '',
|
||||
|
|
@ -321,14 +361,16 @@ describe('<ModelDialog />', () => {
|
|||
</SettingsContext.Provider>,
|
||||
);
|
||||
|
||||
// DEFAULT_QWEN_MODEL (coder-model) is at index 0
|
||||
expect(mockedSelect.mock.calls[0][0].initialIndex).toBe(0);
|
||||
|
||||
mockGetModel.mockReturnValue(MAINLINE_VLM);
|
||||
mockGetModel.mockReturnValue(DEFAULT_QWEN_MODEL);
|
||||
const newMockConfig = {
|
||||
getModel: mockGetModel,
|
||||
getAuthType: mockGetAuthType,
|
||||
getAvailableModelsForAuthType: createMockGetAvailableModelsForAuthType(),
|
||||
getAllConfiguredModels: vi.fn(() =>
|
||||
AVAILABLE_MODELS_QWEN.map((m) => ({
|
||||
getFilteredQwenModels().map((m) => ({
|
||||
id: m.id,
|
||||
label: m.label,
|
||||
description: m.description || '',
|
||||
|
|
@ -347,6 +389,11 @@ describe('<ModelDialog />', () => {
|
|||
|
||||
// Should be called at least twice: initial render + re-render after context change
|
||||
expect(mockedSelect).toHaveBeenCalledTimes(2);
|
||||
expect(mockedSelect.mock.calls[1][0].initialIndex).toBe(1);
|
||||
// Calculate expected index for DEFAULT_QWEN_MODEL dynamically
|
||||
const qwenModels = getFilteredQwenModels();
|
||||
const expectedCoderIndex = qwenModels.findIndex(
|
||||
(m) => m.id === DEFAULT_QWEN_MODEL,
|
||||
);
|
||||
expect(mockedSelect.mock.calls[1][0].initialIndex).toBe(expectedCoderIndex);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ import {
|
|||
AuthType,
|
||||
ModelSlashCommandEvent,
|
||||
logModelSlashCommand,
|
||||
MAINLINE_CODER_MODEL,
|
||||
type AvailableModel as CoreAvailableModel,
|
||||
type ContentGeneratorConfig,
|
||||
type ContentGeneratorConfigSource,
|
||||
type ContentGeneratorConfigSources,
|
||||
type InputModalities,
|
||||
} from '@qwen-code/qwen-code-core';
|
||||
import { useKeypress } from '../hooks/useKeypress.js';
|
||||
import { theme } from '../semantic-colors.js';
|
||||
|
|
@ -22,65 +22,28 @@ import { DescriptiveRadioButtonSelect } from './shared/DescriptiveRadioButtonSel
|
|||
import { ConfigContext } from '../contexts/ConfigContext.js';
|
||||
import { UIStateContext, type UIState } from '../contexts/UIStateContext.js';
|
||||
import { useSettings } from '../contexts/SettingsContext.js';
|
||||
import { MAINLINE_CODER } from '../models/availableModels.js';
|
||||
import { getPersistScopeForModelSelection } from '../../config/modelProvidersScope.js';
|
||||
import { t } from '../../i18n/index.js';
|
||||
|
||||
function formatModalities(modalities?: InputModalities): string {
|
||||
if (!modalities) return t('text-only');
|
||||
const parts: string[] = [];
|
||||
if (modalities.image) parts.push(t('image'));
|
||||
if (modalities.pdf) parts.push(t('pdf'));
|
||||
if (modalities.audio) parts.push(t('audio'));
|
||||
if (modalities.video) parts.push(t('video'));
|
||||
if (parts.length === 0) return t('text-only');
|
||||
return `${t('text')} · ${parts.join(' · ')}`;
|
||||
}
|
||||
|
||||
interface ModelDialogProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function formatSourceBadge(
|
||||
source: ContentGeneratorConfigSource | undefined,
|
||||
): string | undefined {
|
||||
if (!source) return undefined;
|
||||
|
||||
switch (source.kind) {
|
||||
case 'cli':
|
||||
return source.detail ? `CLI ${source.detail}` : 'CLI';
|
||||
case 'env':
|
||||
return source.envKey ? `ENV ${source.envKey}` : 'ENV';
|
||||
case 'settings':
|
||||
return source.settingsPath
|
||||
? `Settings ${source.settingsPath}`
|
||||
: 'Settings';
|
||||
case 'modelProviders': {
|
||||
const suffix =
|
||||
source.authType && source.modelId
|
||||
? `${source.authType}:${source.modelId}`
|
||||
: source.authType
|
||||
? `${source.authType}`
|
||||
: source.modelId
|
||||
? `${source.modelId}`
|
||||
: '';
|
||||
return suffix ? `ModelProviders ${suffix}` : 'ModelProviders';
|
||||
}
|
||||
case 'default':
|
||||
return source.detail ? `Default ${source.detail}` : 'Default';
|
||||
case 'computed':
|
||||
return source.detail ? `Computed ${source.detail}` : 'Computed';
|
||||
case 'programmatic':
|
||||
return source.detail ? `Programmatic ${source.detail}` : 'Programmatic';
|
||||
case 'unknown':
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function readSourcesFromConfig(config: unknown): ContentGeneratorConfigSources {
|
||||
if (!config) {
|
||||
return {};
|
||||
}
|
||||
const maybe = config as {
|
||||
getContentGeneratorConfigSources?: () => ContentGeneratorConfigSources;
|
||||
};
|
||||
return maybe.getContentGeneratorConfigSources?.() ?? {};
|
||||
}
|
||||
|
||||
function maskApiKey(apiKey: string | undefined): string {
|
||||
if (!apiKey) return '(not set)';
|
||||
if (!apiKey) return `(${t('not set')})`;
|
||||
const trimmed = apiKey.trim();
|
||||
if (trimmed.length === 0) return '(not set)';
|
||||
if (trimmed.length === 0) return `(${t('not set')})`;
|
||||
if (trimmed.length <= 6) return '***';
|
||||
const head = trimmed.slice(0, 3);
|
||||
const tail = trimmed.slice(-4);
|
||||
|
|
@ -131,7 +94,7 @@ function handleModelSwitchSuccess({
|
|||
{
|
||||
type: 'info',
|
||||
text:
|
||||
`authType: ${effectiveAuthType ?? '(none)'}` +
|
||||
`authType: ${effectiveAuthType ?? `(${t('none')})`}` +
|
||||
`\n` +
|
||||
`Using ${isRuntime ? 'runtime ' : ''}model: ${effectiveModelId}` +
|
||||
`\n` +
|
||||
|
|
@ -143,35 +106,26 @@ function handleModelSwitchSuccess({
|
|||
);
|
||||
}
|
||||
|
||||
function ConfigRow({
|
||||
function formatContextWindow(size?: number): string {
|
||||
if (!size) return `(${t('unknown')})`;
|
||||
return `${size.toLocaleString('en-US')} tokens`;
|
||||
}
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
value,
|
||||
badge,
|
||||
}: {
|
||||
label: string;
|
||||
value: React.ReactNode;
|
||||
badge?: string;
|
||||
}): React.JSX.Element {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Box>
|
||||
<Box minWidth={12} flexShrink={0}>
|
||||
<Text color={theme.text.secondary}>{label}:</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} flexDirection="row" flexWrap="wrap">
|
||||
<Text>{value}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box minWidth={16} flexShrink={0}>
|
||||
<Text color={theme.text.secondary}>{label}:</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} flexDirection="row" flexWrap="wrap">
|
||||
<Text>{value}</Text>
|
||||
</Box>
|
||||
{badge ? (
|
||||
<Box>
|
||||
<Box minWidth={12} flexShrink={0}>
|
||||
<Text> </Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text color={theme.text.secondary}>{badge}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -183,13 +137,9 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
|
|||
|
||||
// Local error state for displaying errors within the dialog
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [highlightedValue, setHighlightedValue] = useState<string | null>(null);
|
||||
|
||||
const authType = config?.getAuthType();
|
||||
const effectiveConfig =
|
||||
(config?.getContentGeneratorConfig?.() as
|
||||
| ContentGeneratorConfig
|
||||
| undefined) ?? undefined;
|
||||
const sources = readSourcesFromConfig(config);
|
||||
|
||||
const availableModelEntries = useMemo(() => {
|
||||
const allModels = config ? config.getAllConfiguredModels() : [];
|
||||
|
|
@ -293,7 +243,7 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
|
|||
[availableModelEntries],
|
||||
);
|
||||
|
||||
const preferredModelId = config?.getModel() || MAINLINE_CODER;
|
||||
const preferredModelId = config?.getModel() || MAINLINE_CODER_MODEL;
|
||||
// Check if current model is a runtime model
|
||||
// Runtime snapshot ID is already in $runtime|${authType}|${modelId} format
|
||||
const activeRuntimeSnapshot = config?.getActiveRuntimeModelSnapshot?.();
|
||||
|
|
@ -319,6 +269,20 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
|
|||
return index === -1 ? 0 : index;
|
||||
}, [MODEL_OPTIONS, preferredKey]);
|
||||
|
||||
const handleHighlight = useCallback((value: string) => {
|
||||
setHighlightedValue(value);
|
||||
}, []);
|
||||
|
||||
const highlightedEntry = useMemo(() => {
|
||||
const key = highlightedValue ?? preferredKey;
|
||||
return availableModelEntries.find(
|
||||
({ authType: t2, model, isRuntime, snapshotId }) => {
|
||||
const v = isRuntime && snapshotId ? snapshotId : `${t2}::${model.id}`;
|
||||
return v === key;
|
||||
},
|
||||
);
|
||||
}, [highlightedValue, preferredKey, availableModelEntries]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
async (selected: string) => {
|
||||
setErrorMessage(null);
|
||||
|
|
@ -413,35 +377,6 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
|
|||
>
|
||||
<Text bold>{t('Select Model')}</Text>
|
||||
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
<Text color={theme.text.secondary}>
|
||||
{t('Current (effective) configuration')}
|
||||
</Text>
|
||||
<Box flexDirection="column" marginTop={1}>
|
||||
<ConfigRow label="AuthType" value={authType} />
|
||||
<ConfigRow
|
||||
label="Model"
|
||||
value={effectiveConfig?.model ?? config?.getModel?.() ?? ''}
|
||||
badge={formatSourceBadge(sources['model'])}
|
||||
/>
|
||||
|
||||
{authType !== AuthType.QWEN_OAUTH && (
|
||||
<>
|
||||
<ConfigRow
|
||||
label="Base URL"
|
||||
value={effectiveConfig?.baseUrl ?? t('(default)')}
|
||||
badge={formatSourceBadge(sources['baseUrl'])}
|
||||
/>
|
||||
<ConfigRow
|
||||
label="API Key"
|
||||
value={effectiveConfig?.apiKey ? t('(set)') : t('(not set)')}
|
||||
badge={formatSourceBadge(sources['apiKey'])}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{!hasModels ? (
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
<Text color={theme.status.warning}>
|
||||
|
|
@ -465,12 +400,48 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
|
|||
<DescriptiveRadioButtonSelect
|
||||
items={MODEL_OPTIONS}
|
||||
onSelect={handleSelect}
|
||||
onHighlight={handleHighlight}
|
||||
initialIndex={initialIndex}
|
||||
showNumbers={true}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{highlightedEntry && (
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
<Box
|
||||
borderStyle="single"
|
||||
borderTop
|
||||
borderBottom={false}
|
||||
borderLeft={false}
|
||||
borderRight={false}
|
||||
borderColor={theme.border.default}
|
||||
/>
|
||||
<DetailRow
|
||||
label={t('Modality')}
|
||||
value={formatModalities(highlightedEntry.model.modalities)}
|
||||
/>
|
||||
<DetailRow
|
||||
label={t('Context Window')}
|
||||
value={formatContextWindow(
|
||||
highlightedEntry.model.contextWindowSize,
|
||||
)}
|
||||
/>
|
||||
{highlightedEntry.authType !== AuthType.QWEN_OAUTH && (
|
||||
<>
|
||||
<DetailRow
|
||||
label="Base URL"
|
||||
value={highlightedEntry.model.baseUrl ?? t('(default)')}
|
||||
/>
|
||||
<DetailRow
|
||||
label="API Key"
|
||||
value={highlightedEntry.model.envKey ?? t('(not set)')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{errorMessage && (
|
||||
<Box marginTop={1} flexDirection="column" paddingX={1}>
|
||||
<Text color={theme.status.error} wrap="wrap">
|
||||
|
|
@ -480,7 +451,9 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
|
|||
)}
|
||||
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
<Text color={theme.text.secondary}>{t('(Press Esc to close)')}</Text>
|
||||
<Text color={theme.text.secondary}>
|
||||
{t('Enter to select, ↑↓ to navigate, Esc to close')}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,184 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { render } from 'ink-testing-library';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { ModelSwitchDialog, VisionSwitchOutcome } from './ModelSwitchDialog.js';
|
||||
|
||||
// Mock the useKeypress hook
|
||||
const mockUseKeypress = vi.hoisted(() => vi.fn());
|
||||
vi.mock('../hooks/useKeypress.js', () => ({
|
||||
useKeypress: mockUseKeypress,
|
||||
}));
|
||||
|
||||
// Mock the RadioButtonSelect component
|
||||
const mockRadioButtonSelect = vi.hoisted(() => vi.fn());
|
||||
vi.mock('./shared/RadioButtonSelect.js', () => ({
|
||||
RadioButtonSelect: mockRadioButtonSelect,
|
||||
}));
|
||||
|
||||
describe('ModelSwitchDialog', () => {
|
||||
const mockOnSelect = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
|
||||
// Mock RadioButtonSelect to return a simple div
|
||||
mockRadioButtonSelect.mockReturnValue(
|
||||
React.createElement('div', { 'data-testid': 'radio-select' }),
|
||||
);
|
||||
});
|
||||
|
||||
it('should setup RadioButtonSelect with correct options', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
const expectedItems = [
|
||||
{
|
||||
key: 'switch-once',
|
||||
label: 'Switch for this request only',
|
||||
value: VisionSwitchOutcome.SwitchOnce,
|
||||
},
|
||||
{
|
||||
key: 'switch-session',
|
||||
label: 'Switch session to vision model',
|
||||
value: VisionSwitchOutcome.SwitchSessionToVL,
|
||||
},
|
||||
{
|
||||
key: 'continue',
|
||||
label: 'Continue with current model',
|
||||
value: VisionSwitchOutcome.ContinueWithCurrentModel,
|
||||
},
|
||||
];
|
||||
|
||||
const callArgs = mockRadioButtonSelect.mock.calls[0][0];
|
||||
expect(callArgs.items).toEqual(expectedItems);
|
||||
expect(callArgs.initialIndex).toBe(0);
|
||||
expect(callArgs.isFocused).toBe(true);
|
||||
});
|
||||
|
||||
it('should call onSelect when an option is selected', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
const callArgs = mockRadioButtonSelect.mock.calls[0][0];
|
||||
expect(typeof callArgs.onSelect).toBe('function');
|
||||
|
||||
// Simulate selection of "Switch for this request only"
|
||||
const onSelectCallback = mockRadioButtonSelect.mock.calls[0][0].onSelect;
|
||||
onSelectCallback(VisionSwitchOutcome.SwitchOnce);
|
||||
|
||||
expect(mockOnSelect).toHaveBeenCalledWith(VisionSwitchOutcome.SwitchOnce);
|
||||
});
|
||||
|
||||
it('should call onSelect with SwitchSessionToVL when second option is selected', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
const onSelectCallback = mockRadioButtonSelect.mock.calls[0][0].onSelect;
|
||||
onSelectCallback(VisionSwitchOutcome.SwitchSessionToVL);
|
||||
|
||||
expect(mockOnSelect).toHaveBeenCalledWith(
|
||||
VisionSwitchOutcome.SwitchSessionToVL,
|
||||
);
|
||||
});
|
||||
|
||||
it('should call onSelect with ContinueWithCurrentModel when third option is selected', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
const onSelectCallback = mockRadioButtonSelect.mock.calls[0][0].onSelect;
|
||||
onSelectCallback(VisionSwitchOutcome.ContinueWithCurrentModel);
|
||||
|
||||
expect(mockOnSelect).toHaveBeenCalledWith(
|
||||
VisionSwitchOutcome.ContinueWithCurrentModel,
|
||||
);
|
||||
});
|
||||
|
||||
it('should setup escape key handler to call onSelect with ContinueWithCurrentModel', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
expect(mockUseKeypress).toHaveBeenCalledWith(expect.any(Function), {
|
||||
isActive: true,
|
||||
});
|
||||
|
||||
// Simulate escape key press
|
||||
const keypressHandler = mockUseKeypress.mock.calls[0][0];
|
||||
keypressHandler({ name: 'escape' });
|
||||
|
||||
expect(mockOnSelect).toHaveBeenCalledWith(
|
||||
VisionSwitchOutcome.ContinueWithCurrentModel,
|
||||
);
|
||||
});
|
||||
|
||||
it('should not call onSelect for non-escape keys', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
const keypressHandler = mockUseKeypress.mock.calls[0][0];
|
||||
keypressHandler({ name: 'enter' });
|
||||
|
||||
expect(mockOnSelect).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should set initial index to 0 (first option)', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
const callArgs = mockRadioButtonSelect.mock.calls[0][0];
|
||||
expect(callArgs.initialIndex).toBe(0);
|
||||
});
|
||||
|
||||
describe('VisionSwitchOutcome enum', () => {
|
||||
it('should have correct enum values', () => {
|
||||
expect(VisionSwitchOutcome.SwitchOnce).toBe('once');
|
||||
expect(VisionSwitchOutcome.SwitchSessionToVL).toBe('session');
|
||||
expect(VisionSwitchOutcome.ContinueWithCurrentModel).toBe('persist');
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle multiple onSelect calls correctly', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
const onSelectCallback = mockRadioButtonSelect.mock.calls[0][0].onSelect;
|
||||
|
||||
// Call multiple times
|
||||
onSelectCallback(VisionSwitchOutcome.SwitchOnce);
|
||||
onSelectCallback(VisionSwitchOutcome.SwitchSessionToVL);
|
||||
onSelectCallback(VisionSwitchOutcome.ContinueWithCurrentModel);
|
||||
|
||||
expect(mockOnSelect).toHaveBeenCalledTimes(3);
|
||||
expect(mockOnSelect).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
VisionSwitchOutcome.SwitchOnce,
|
||||
);
|
||||
expect(mockOnSelect).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
VisionSwitchOutcome.SwitchSessionToVL,
|
||||
);
|
||||
expect(mockOnSelect).toHaveBeenNthCalledWith(
|
||||
3,
|
||||
VisionSwitchOutcome.ContinueWithCurrentModel,
|
||||
);
|
||||
});
|
||||
|
||||
it('should pass isFocused prop to RadioButtonSelect', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
const callArgs = mockRadioButtonSelect.mock.calls[0][0];
|
||||
expect(callArgs.isFocused).toBe(true);
|
||||
});
|
||||
|
||||
it('should handle escape key multiple times', () => {
|
||||
render(<ModelSwitchDialog onSelect={mockOnSelect} />);
|
||||
|
||||
const keypressHandler = mockUseKeypress.mock.calls[0][0];
|
||||
|
||||
// Call escape multiple times
|
||||
keypressHandler({ name: 'escape' });
|
||||
keypressHandler({ name: 'escape' });
|
||||
|
||||
expect(mockOnSelect).toHaveBeenCalledTimes(2);
|
||||
expect(mockOnSelect).toHaveBeenCalledWith(
|
||||
VisionSwitchOutcome.ContinueWithCurrentModel,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import type React from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import { Colors } from '../colors.js';
|
||||
import {
|
||||
RadioButtonSelect,
|
||||
type RadioSelectItem,
|
||||
} from './shared/RadioButtonSelect.js';
|
||||
import { useKeypress } from '../hooks/useKeypress.js';
|
||||
|
||||
export enum VisionSwitchOutcome {
|
||||
SwitchOnce = 'once',
|
||||
SwitchSessionToVL = 'session',
|
||||
ContinueWithCurrentModel = 'persist',
|
||||
}
|
||||
|
||||
export interface ModelSwitchDialogProps {
|
||||
onSelect: (outcome: VisionSwitchOutcome) => void;
|
||||
}
|
||||
|
||||
export const ModelSwitchDialog: React.FC<ModelSwitchDialogProps> = ({
|
||||
onSelect,
|
||||
}) => {
|
||||
useKeypress(
|
||||
(key) => {
|
||||
if (key.name === 'escape') {
|
||||
onSelect(VisionSwitchOutcome.ContinueWithCurrentModel);
|
||||
}
|
||||
},
|
||||
{ isActive: true },
|
||||
);
|
||||
|
||||
const options: Array<RadioSelectItem<VisionSwitchOutcome>> = [
|
||||
{
|
||||
key: 'switch-once',
|
||||
label: 'Switch for this request only',
|
||||
value: VisionSwitchOutcome.SwitchOnce,
|
||||
},
|
||||
{
|
||||
key: 'switch-session',
|
||||
label: 'Switch session to vision model',
|
||||
value: VisionSwitchOutcome.SwitchSessionToVL,
|
||||
},
|
||||
{
|
||||
key: 'continue',
|
||||
label: 'Continue with current model',
|
||||
value: VisionSwitchOutcome.ContinueWithCurrentModel,
|
||||
},
|
||||
];
|
||||
|
||||
const handleSelect = (outcome: VisionSwitchOutcome) => {
|
||||
onSelect(outcome);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
flexDirection="column"
|
||||
borderStyle="round"
|
||||
borderColor={Colors.AccentYellow}
|
||||
padding={1}
|
||||
width="100%"
|
||||
marginLeft={1}
|
||||
>
|
||||
<Box flexDirection="column" marginBottom={1}>
|
||||
<Text bold>Vision Model Switch Required</Text>
|
||||
<Text>
|
||||
Your message contains an image, but the current model doesn't
|
||||
support vision.
|
||||
</Text>
|
||||
<Text>How would you like to proceed?</Text>
|
||||
</Box>
|
||||
|
||||
<Box marginBottom={1}>
|
||||
<RadioButtonSelect
|
||||
items={options}
|
||||
initialIndex={0}
|
||||
onSelect={handleSelect}
|
||||
isFocused
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text color={Colors.Gray}>Press Enter to select, Esc to cancel</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
62
packages/cli/src/ui/components/Tips.test.ts
Normal file
62
packages/cli/src/ui/components/Tips.test.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { selectWeightedTip } from './Tips.js';
|
||||
|
||||
describe('selectWeightedTip', () => {
|
||||
const tips = [
|
||||
{ text: 'tip-a', weight: 1 },
|
||||
{ text: 'tip-b', weight: 3 },
|
||||
{ text: 'tip-c', weight: 1 },
|
||||
];
|
||||
|
||||
it('returns a valid tip text', () => {
|
||||
const result = selectWeightedTip(tips);
|
||||
expect(['tip-a', 'tip-b', 'tip-c']).toContain(result);
|
||||
});
|
||||
|
||||
it('selects the first tip when random is near zero', () => {
|
||||
vi.spyOn(Math, 'random').mockReturnValue(0);
|
||||
expect(selectWeightedTip(tips)).toBe('tip-a');
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('selects the weighted tip when random falls in its range', () => {
|
||||
// Total weight = 5. tip-a covers [0,1), tip-b covers [1,4), tip-c covers [4,5)
|
||||
// Math.random() * 5 = 2.0 falls in tip-b's range
|
||||
vi.spyOn(Math, 'random').mockReturnValue(0.4); // 0.4 * 5 = 2.0
|
||||
expect(selectWeightedTip(tips)).toBe('tip-b');
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('selects the last tip when random is near max', () => {
|
||||
vi.spyOn(Math, 'random').mockReturnValue(0.99);
|
||||
expect(selectWeightedTip(tips)).toBe('tip-c');
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('respects weight distribution over many samples', () => {
|
||||
const counts: Record<string, number> = {
|
||||
'tip-a': 0,
|
||||
'tip-b': 0,
|
||||
'tip-c': 0,
|
||||
};
|
||||
const iterations = 10000;
|
||||
for (let i = 0; i < iterations; i++) {
|
||||
const result = selectWeightedTip(tips);
|
||||
counts[result]!++;
|
||||
}
|
||||
// tip-b (weight 3) should appear roughly 3x as often as tip-a or tip-c (weight 1)
|
||||
// With 10k iterations, we expect: tip-a ~2000, tip-b ~6000, tip-c ~2000
|
||||
expect(counts['tip-b']!).toBeGreaterThan(counts['tip-a']! * 2);
|
||||
expect(counts['tip-b']!).toBeGreaterThan(counts['tip-c']! * 2);
|
||||
});
|
||||
|
||||
it('handles single tip', () => {
|
||||
expect(selectWeightedTip([{ text: 'only', weight: 1 }])).toBe('only');
|
||||
});
|
||||
});
|
||||
|
|
@ -9,7 +9,9 @@ import { Box, Text } from 'ink';
|
|||
import { theme } from '../semantic-colors.js';
|
||||
import { t } from '../../i18n/index.js';
|
||||
|
||||
const startupTips = [
|
||||
type Tip = string | { text: string; weight: number };
|
||||
|
||||
const startupTips: Tip[] = [
|
||||
'Use /compress when the conversation gets long to summarize history and free up context.',
|
||||
'Start a fresh idea with /clear or /new; the previous session stays available in history.',
|
||||
'Use /bug to submit issues to the maintainers when something goes off.',
|
||||
|
|
@ -20,13 +22,34 @@ const startupTips = [
|
|||
process.platform === 'win32'
|
||||
? 'You can switch permission mode quickly with Tab or /approval-mode.'
|
||||
: 'You can switch permission mode quickly with Shift+Tab or /approval-mode.',
|
||||
] as const;
|
||||
{
|
||||
text: 'Try /insight to generate personalized insights from your chat history.',
|
||||
weight: 3,
|
||||
},
|
||||
];
|
||||
|
||||
function tipText(tip: Tip): string {
|
||||
return typeof tip === 'string' ? tip : tip.text;
|
||||
}
|
||||
|
||||
function tipWeight(tip: Tip): number {
|
||||
return typeof tip === 'string' ? 1 : tip.weight;
|
||||
}
|
||||
|
||||
export function selectWeightedTip(tips: Tip[]): string {
|
||||
const totalWeight = tips.reduce((sum, tip) => sum + tipWeight(tip), 0);
|
||||
let random = Math.random() * totalWeight;
|
||||
for (const tip of tips) {
|
||||
random -= tipWeight(tip);
|
||||
if (random <= 0) {
|
||||
return tipText(tip);
|
||||
}
|
||||
}
|
||||
return tipText(tips[tips.length - 1]!);
|
||||
}
|
||||
|
||||
export const Tips: React.FC = () => {
|
||||
const selectedTip = useMemo(() => {
|
||||
const randomIndex = Math.floor(Math.random() * startupTips.length);
|
||||
return startupTips[randomIndex];
|
||||
}, []);
|
||||
const selectedTip = useMemo(() => selectWeightedTip(startupTips), []);
|
||||
|
||||
return (
|
||||
<Box marginLeft={2} marginRight={2}>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ index 0000000..e69de29
|
|||
80,
|
||||
undefined,
|
||||
mockSettings,
|
||||
4,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -86,6 +87,7 @@ index 0000000..e69de29
|
|||
80,
|
||||
undefined,
|
||||
mockSettings,
|
||||
4,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -115,6 +117,7 @@ index 0000000..e69de29
|
|||
80,
|
||||
undefined,
|
||||
mockSettings,
|
||||
4,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -161,6 +161,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
|
|||
contentWidth,
|
||||
theme,
|
||||
settings,
|
||||
tabWidth,
|
||||
);
|
||||
} else {
|
||||
renderedOutput = renderDiffContent(
|
||||
|
|
|
|||
|
|
@ -10,9 +10,17 @@ import { theme } from '../../semantic-colors.js';
|
|||
|
||||
interface ErrorMessageProps {
|
||||
text: string;
|
||||
/** Optional inline hint displayed after the error text in secondary/dimmed color */
|
||||
hint?: string;
|
||||
}
|
||||
|
||||
export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => {
|
||||
/**
|
||||
* Renders an error message with a "✕" prefix.
|
||||
* When a hint is provided (e.g., retry countdown), it is displayed inline
|
||||
* in parentheses with a dimmed secondary color, similar to the ESC hint
|
||||
* style used in LoadingIndicator.
|
||||
*/
|
||||
export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text, hint }) => {
|
||||
const prefix = '✕ ';
|
||||
const prefixWidth = prefix.length;
|
||||
|
||||
|
|
@ -21,10 +29,9 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => {
|
|||
<Box width={prefixWidth}>
|
||||
<Text color={theme.status.error}>{prefix}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text wrap="wrap" color={theme.status.error}>
|
||||
{text}
|
||||
</Text>
|
||||
<Box flexGrow={1} flexWrap="wrap" flexDirection="row">
|
||||
<Text color={theme.status.error}>{text}</Text>
|
||||
{hint && <Text color={theme.text.secondary}> ({hint})</Text>}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
|
|||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text wrap="wrap" color={theme.status.warning}>
|
||||
<RenderInline text={text} />
|
||||
<RenderInline text={text} textColor={theme.status.warning} />
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen Code
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import type React from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import { theme } from '../../semantic-colors.js';
|
||||
import type { InsightProgressProps } from '../../types.js';
|
||||
import Spinner from 'ink-spinner';
|
||||
|
||||
interface InsightProgressMessageProps {
|
||||
progress: InsightProgressProps;
|
||||
}
|
||||
|
||||
export const InsightProgressMessage: React.FC<InsightProgressMessageProps> = ({
|
||||
progress,
|
||||
}) => {
|
||||
const { stage, progress: percent, isComplete, error } = progress;
|
||||
const width = 30;
|
||||
const completedWidth = Math.round((percent / 100) * width);
|
||||
const remainingWidth = width - completedWidth;
|
||||
|
||||
const bar =
|
||||
'█'.repeat(Math.max(0, completedWidth)) +
|
||||
'░'.repeat(Math.max(0, remainingWidth));
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text color={theme.status.error}>✕ {stage}</Text>
|
||||
<Text color={theme.text.secondary}>{error}</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (isComplete) {
|
||||
return (
|
||||
<Box flexDirection="row">
|
||||
<Text color={theme.status.success}>✓ {stage}</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="row">
|
||||
<Text color={theme.text.accent}>
|
||||
<Spinner type="dots" />
|
||||
</Text>
|
||||
<Text> </Text>
|
||||
<Text color={theme.text.secondary}>{bar} </Text>
|
||||
<Text color={theme.text.accent}>
|
||||
{stage}
|
||||
{progress.detail ? ` (${progress.detail})` : ''}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import type React from 'react';
|
||||
import { Text, Box } from 'ink';
|
||||
import { theme } from '../../semantic-colors.js';
|
||||
|
||||
interface RetryCountdownMessageProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays a retry countdown message in a dimmed/secondary style
|
||||
* to visually distinguish it from error messages.
|
||||
*/
|
||||
export const RetryCountdownMessage: React.FC<RetryCountdownMessageProps> = ({
|
||||
text,
|
||||
}) => {
|
||||
if (!text || text.trim() === '') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const prefix = '↻ ';
|
||||
const prefixWidth = prefix.length;
|
||||
|
||||
return (
|
||||
<Box flexDirection="row">
|
||||
<Box width={prefixWidth}>
|
||||
<Text color={theme.text.secondary}>{prefix}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text wrap="wrap" color={theme.text.secondary}>
|
||||
{text}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
@ -330,7 +330,7 @@ export const ToolConfirmationMessage: React.FC<
|
|||
bodyContent = (
|
||||
<Box flexDirection="column" paddingX={1} marginLeft={1}>
|
||||
<Text color={theme.text.link}>
|
||||
<RenderInline text={infoProps.prompt} />
|
||||
<RenderInline text={infoProps.prompt} textColor={theme.text.link} />
|
||||
</Text>
|
||||
{displayUrls && infoProps.urls && infoProps.urls.length > 0 && (
|
||||
<Box flexDirection="column" marginTop={1}>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import type React from 'react';
|
|||
import { Box, Text } from 'ink';
|
||||
import { Colors } from '../../colors.js';
|
||||
import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
|
||||
import { theme } from '../../semantic-colors.js';
|
||||
|
||||
interface WarningMessageProps {
|
||||
text: string;
|
||||
|
|
@ -24,7 +25,7 @@ export const WarningMessage: React.FC<WarningMessageProps> = ({ text }) => {
|
|||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text wrap="wrap" color={Colors.AccentYellow}>
|
||||
<RenderInline text={text} />
|
||||
<RenderInline text={text} textColor={theme.status.warning} />
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@ export interface BaseSelectionListProps<
|
|||
showNumbers?: boolean;
|
||||
showScrollArrows?: boolean;
|
||||
maxItemsToShow?: number;
|
||||
/** Gap (in rows) between each item. */
|
||||
itemGap?: number;
|
||||
renderItem: (item: TItem, context: RenderItemContext) => React.ReactNode;
|
||||
}
|
||||
|
||||
|
|
@ -59,6 +61,7 @@ export function BaseSelectionList<
|
|||
showNumbers = true,
|
||||
showScrollArrows = false,
|
||||
maxItemsToShow = 10,
|
||||
itemGap = 0,
|
||||
renderItem,
|
||||
}: BaseSelectionListProps<T, TItem>): React.JSX.Element {
|
||||
const { activeIndex } = useSelectionList({
|
||||
|
|
@ -89,7 +92,7 @@ export function BaseSelectionList<
|
|||
const numberColumnWidth = String(items.length).length;
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Box flexDirection="column" gap={itemGap}>
|
||||
{/* Use conditional coloring instead of conditional rendering */}
|
||||
{showScrollArrows && (
|
||||
<Text
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import type { SelectionListItem } from '../../hooks/useSelectionList.js';
|
|||
|
||||
export interface DescriptiveRadioSelectItem<T> extends SelectionListItem<T> {
|
||||
title: React.ReactNode;
|
||||
description: string;
|
||||
description: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface DescriptiveRadioButtonSelectProps<T> {
|
||||
|
|
@ -32,6 +32,8 @@ export interface DescriptiveRadioButtonSelectProps<T> {
|
|||
showScrollArrows?: boolean;
|
||||
/** The maximum number of items to show at once. */
|
||||
maxItemsToShow?: number;
|
||||
/** Gap (in rows) between each item. */
|
||||
itemGap?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -48,6 +50,7 @@ export function DescriptiveRadioButtonSelect<T>({
|
|||
showNumbers = false,
|
||||
showScrollArrows = false,
|
||||
maxItemsToShow = 10,
|
||||
itemGap = 0,
|
||||
}: DescriptiveRadioButtonSelectProps<T>): React.JSX.Element {
|
||||
return (
|
||||
<BaseSelectionList<T, DescriptiveRadioSelectItem<T>>
|
||||
|
|
@ -59,6 +62,7 @@ export function DescriptiveRadioButtonSelect<T>({
|
|||
showNumbers={showNumbers}
|
||||
showScrollArrows={showScrollArrows}
|
||||
maxItemsToShow={maxItemsToShow}
|
||||
itemGap={itemGap}
|
||||
renderItem={(item, { titleColor }) => (
|
||||
<Box flexDirection="column" key={item.key}>
|
||||
<Text color={titleColor}>{item.title}</Text>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue