snow-ai 0.2.23 → 0.2.25

package/dist/ui/pages/ModelConfigScreen.js

@@ -1,467 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Text, useInput } from 'ink';
-import Gradient from 'ink-gradient';
-import { Select, Alert } from '@inkjs/ui';
-import { fetchAvailableModels, filterModels } from '../../api/models.js';
-import { getOpenAiConfig, updateOpenAiConfig, } from '../../utils/apiConfig.js';
-export default function ModelConfigScreen({ onBack, onSave, inlineMode = false }) {
-    const [advancedModel, setAdvancedModel] = useState('');
-    const [basicModel, setBasicModel] = useState('');
-    const [maxContextTokens, setMaxContextTokens] = useState(4000);
-    const [maxTokens, setMaxTokens] = useState(4096);
-    const [compactBaseUrl, setCompactBaseUrl] = useState('');
-    const [compactApiKey, setCompactApiKey] = useState('');
-    const [compactModelName, setCompactModelName] = useState('');
-    const [currentField, setCurrentField] = useState('advancedModel');
-    const [isEditing, setIsEditing] = useState(false);
-    const [models, setModels] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const [baseUrlMissing, setBaseUrlMissing] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-    const [manualInputMode, setManualInputMode] = useState(false);
-    const [manualInputValue, setManualInputValue] = useState('');
-    useEffect(() => {
-        const config = getOpenAiConfig();
-        setAdvancedModel(config.advancedModel || '');
-        setBasicModel(config.basicModel || '');
-        setMaxContextTokens(config.maxContextTokens || 4000);
-        setMaxTokens(config.maxTokens || 4096);
-        setCompactBaseUrl(config.compactModel?.baseUrl || '');
-        setCompactApiKey(config.compactModel?.apiKey || '');
-        setCompactModelName(config.compactModel?.modelName || '');
-        if (!config.baseUrl) {
-            setBaseUrlMissing(true);
-            return;
-        }
-    }, []);
-    const loadModels = async () => {
-        setLoading(true);
-        try {
-            const fetchedModels = await fetchAvailableModels();
-            setModels(fetchedModels);
-        }
-        catch (err) {
-            // 加载失败时抛出错误,由调用方处理
-            throw err;
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    const getCurrentOptions = () => {
-        const filteredModels = filterModels(models, searchTerm);
-        const modelOptions = filteredModels.map(model => ({
-            label: model.id,
-            value: model.id,
-        }));
-        // 添加手动输入选项
-        return [
-            { label: 'Manual Input (Enter model name)', value: '__MANUAL_INPUT__' },
-            ...modelOptions,
-        ];
-    };
-    const getCurrentValue = () => {
-        if (currentField === 'advancedModel')
-            return advancedModel;
-        if (currentField === 'basicModel')
-            return basicModel;
-        if (currentField === 'maxContextTokens')
-            return maxContextTokens.toString();
-        if (currentField === 'maxTokens')
-            return maxTokens.toString();
-        if (currentField === 'compactBaseUrl')
-            return compactBaseUrl;
-        if (currentField === 'compactApiKey')
-            return compactApiKey;
-        if (currentField === 'compactModelName')
-            return compactModelName;
-        return '';
-    };
-    const handleModelChange = (value) => {
-        // 如果选择了手动输入选项
-        if (value === '__MANUAL_INPUT__') {
-            setManualInputMode(true);
-            setManualInputValue('');
-            return;
-        }
-        if (currentField === 'advancedModel') {
-            setAdvancedModel(value);
-        }
-        else if (currentField === 'basicModel') {
-            setBasicModel(value);
-        }
-        else if (currentField === 'maxContextTokens') {
-            const numValue = parseInt(value, 10);
-            if (!isNaN(numValue) && numValue > 0) {
-                setMaxContextTokens(numValue);
-            }
-        }
-        else if (currentField === 'maxTokens') {
-            const numValue = parseInt(value, 10);
-            if (!isNaN(numValue) && numValue > 0) {
-                setMaxTokens(numValue);
-            }
-        }
-        setIsEditing(false);
-        setSearchTerm(''); // Reset search when selection is made
-    };
-    useInput((input, key) => {
-        if (baseUrlMissing) {
-            if (key.escape) {
-                onBack();
-            }
-            return;
-        }
-        // 处理手动输入模式
-        if (manualInputMode) {
-            if (key.return) {
-                // 确认输入
-                if (manualInputValue.trim()) {
-                    if (currentField === 'advancedModel') {
-                        setAdvancedModel(manualInputValue.trim());
-                    }
-                    else if (currentField === 'basicModel') {
-                        setBasicModel(manualInputValue.trim());
-                    }
-                }
-                setManualInputMode(false);
-                setManualInputValue('');
-                setIsEditing(false);
-                setSearchTerm('');
-            }
-            else if (key.escape) {
-                // 取消输入
-                setManualInputMode(false);
-                setManualInputValue('');
-            }
-            else if (key.backspace || key.delete) {
-                setManualInputValue(prev => prev.slice(0, -1));
-            }
-            else if (input && input.match(/[a-zA-Z0-9-_./:]/)) {
-                setManualInputValue(prev => prev + input);
-            }
-            return;
-        }
-        // Don't handle input when Select component is active
-        if (isEditing) {
-            if (currentField === 'maxContextTokens') {
-                // Handle numeric input for maxContextTokens
-                if (input && input.match(/[0-9]/)) {
-                    const newValue = parseInt(maxContextTokens.toString() + input, 10);
-                    if (!isNaN(newValue)) {
-                        setMaxContextTokens(newValue);
-                    }
-                }
-                else if (key.backspace || key.delete) {
-                    const currentStr = maxContextTokens.toString();
-                    const newStr = currentStr.slice(0, -1);
-                    const newValue = parseInt(newStr, 10);
-                    if (!isNaN(newValue)) {
-                        setMaxContextTokens(newValue);
-                    }
-                    else {
-                        setMaxContextTokens(0);
-                    }
-                }
-                else if (key.return) {
-                    // Save value, but enforce minimum of 4000
-                    const finalValue = maxContextTokens < 4000 ? 4000 : maxContextTokens;
-                    setMaxContextTokens(finalValue);
-                    setIsEditing(false);
-                }
-            }
-            else if (currentField === 'maxTokens') {
-                // Handle numeric input for maxTokens
-                if (input && input.match(/[0-9]/)) {
-                    const newValue = parseInt(maxTokens.toString() + input, 10);
-                    if (!isNaN(newValue)) {
-                        setMaxTokens(newValue);
-                    }
-                }
-                else if (key.backspace || key.delete) {
-                    const currentStr = maxTokens.toString();
-                    const newStr = currentStr.slice(0, -1);
-                    const newValue = parseInt(newStr, 10);
-                    if (!isNaN(newValue)) {
-                        setMaxTokens(newValue);
-                    }
-                    else {
-                        setMaxTokens(0);
-                    }
-                }
-                else if (key.return) {
-                    // Save value, but enforce minimum of 100
-                    const finalValue = maxTokens < 100 ? 100 : maxTokens;
-                    setMaxTokens(finalValue);
-                    setIsEditing(false);
-                }
-            }
-            else if (currentField === 'compactBaseUrl' || currentField === 'compactApiKey' || currentField === 'compactModelName') {
-                // Handle text input for compact model fields
-                if (key.return) {
-                    setIsEditing(false);
-                }
-                else if (key.backspace || key.delete) {
-                    if (currentField === 'compactBaseUrl') {
-                        setCompactBaseUrl(prev => prev.slice(0, -1));
-                    }
-                    else if (currentField === 'compactApiKey') {
-                        setCompactApiKey(prev => prev.slice(0, -1));
-                    }
-                    else if (currentField === 'compactModelName') {
-                        setCompactModelName(prev => prev.slice(0, -1));
-                    }
-                }
-                else if (input && input.match(/[a-zA-Z0-9-_./:]/)) {
-                    if (currentField === 'compactBaseUrl') {
-                        setCompactBaseUrl(prev => prev + input);
-                    }
-                    else if (currentField === 'compactApiKey') {
-                        setCompactApiKey(prev => prev + input);
-                    }
-                    else if (currentField === 'compactModelName') {
-                        setCompactModelName(prev => prev + input);
-                    }
-                }
-            }
-            else {
-                // Allow typing to filter in edit mode for model selection
-                if (input && input.match(/[a-zA-Z0-9-_.]/)) {
-                    setSearchTerm(prev => prev + input);
-                }
-                else if (key.backspace || key.delete) {
-                    setSearchTerm(prev => prev.slice(0, -1));
-                }
-            }
-            return;
-        }
-        // Handle save/exit globally
-        if (input === 's' && (key.ctrl || key.meta)) {
-            const config = {
-                advancedModel,
-                basicModel,
-                maxContextTokens,
-                maxTokens,
-            };
-            // 只有当所有字段都填写时才保存 compactModel
-            if (compactBaseUrl && compactApiKey && compactModelName) {
-                config.compactModel = {
-                    baseUrl: compactBaseUrl,
-                    apiKey: compactApiKey,
-                    modelName: compactModelName,
-                };
-            }
-            updateOpenAiConfig(config);
-            onSave();
-        }
-        else if (key.escape) {
-            const config = {
-                advancedModel,
-                basicModel,
-                maxContextTokens,
-                maxTokens,
-            };
-            // 只有当所有字段都填写时才保存 compactModel
-            if (compactBaseUrl && compactApiKey && compactModelName) {
-                config.compactModel = {
-                    baseUrl: compactBaseUrl,
-                    apiKey: compactApiKey,
-                    modelName: compactModelName,
-                };
-            }
-            updateOpenAiConfig(config);
-            onBack();
-        }
-        else if (key.return) {
-            // Load models first for model fields, or enter edit mode directly for maxContextTokens/maxTokens and compact fields
-            setSearchTerm(''); // Reset search when entering edit mode
-            const isCompactField = currentField === 'compactBaseUrl' || currentField === 'compactApiKey' || currentField === 'compactModelName';
-            if (currentField === 'maxContextTokens' || currentField === 'maxTokens' || isCompactField) {
-                setIsEditing(true);
-            }
-            else {
-                loadModels().then(() => {
-                    setIsEditing(true);
-                }).catch(() => {
-                    // 如果加载模型失败，直接进入手动输入模式
-                    setManualInputMode(true);
-                    setManualInputValue(getCurrentValue());
-                });
-            }
-        }
-        else if (input === 'm') {
-            // 快捷键：按 'm' 直接进入手动输入模式
-            const isCompactField = currentField === 'compactBaseUrl' || currentField === 'compactApiKey' || currentField === 'compactModelName';
-            if (currentField !== 'maxContextTokens' && currentField !== 'maxTokens' && !isCompactField) {
-                setManualInputMode(true);
-                setManualInputValue(getCurrentValue());
-            }
-        }
-        else if (key.upArrow) {
-            if (currentField === 'basicModel') {
-                setCurrentField('advancedModel');
-            }
-            else if (currentField === 'maxContextTokens') {
-                setCurrentField('basicModel');
-            }
-            else if (currentField === 'maxTokens') {
-                setCurrentField('maxContextTokens');
-            }
-            else if (currentField === 'compactBaseUrl') {
-                setCurrentField('maxTokens');
-            }
-            else if (currentField === 'compactApiKey') {
-                setCurrentField('compactBaseUrl');
-            }
-            else if (currentField === 'compactModelName') {
-                setCurrentField('compactApiKey');
-            }
-        }
-        else if (key.downArrow) {
-            if (currentField === 'advancedModel') {
-                setCurrentField('basicModel');
-            }
-            else if (currentField === 'basicModel') {
-                setCurrentField('maxContextTokens');
-            }
-            else if (currentField === 'maxContextTokens') {
-                setCurrentField('maxTokens');
-            }
-            else if (currentField === 'maxTokens') {
-                setCurrentField('compactBaseUrl');
-            }
-            else if (currentField === 'compactBaseUrl') {
-                setCurrentField('compactApiKey');
-            }
-            else if (currentField === 'compactApiKey') {
-                setCurrentField('compactModelName');
-            }
-        }
-    });
-    if (baseUrlMissing) {
-        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: "cyan", paddingX: 1, paddingY: 0 },
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Gradient, { name: 'rainbow' }, "Model Configuration"),
-                    React.createElement(Text, { color: "gray", dimColor: true }, "Configure AI models for different tasks")))),
-            React.createElement(Box, { marginBottom: 1 },
-                React.createElement(Alert, { variant: "error" }, "Base URL not configured. Please configure API settings first before setting up models.")),
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Alert, { variant: "info" }, "Press Esc to return to main menu"))));
-    }
-    if (loading) {
-        return (React.createElement(Box, { flexDirection: "column", padding: 1 }, !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", paddingX: 1, paddingY: 0 },
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Gradient, { name: "rainbow" }, "Model Configuration"),
-                React.createElement(Text, { color: "gray", dimColor: true }, "Loading available models..."))))));
-    }
-    // 手动输入模式的界面
-    if (manualInputMode) {
-        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: "cyan", paddingX: 1, paddingY: 0 },
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Gradient, { name: 'rainbow' }, "Manual Input Model"),
-                    React.createElement(Text, { color: "gray", dimColor: true }, "Enter model name manually")))),
-            React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
-                React.createElement(Text, { color: "cyan" },
-                    currentField === 'advancedModel' ? 'Advanced Model' : 'Basic Model',
-                    ":"),
-                React.createElement(Box, { marginLeft: 2 },
-                    React.createElement(Text, { color: "green" },
-                        `> ${manualInputValue}`,
-                        React.createElement(Text, { color: "white" }, "_")))),
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Alert, { variant: "info" }, "Type model name (e.g., gpt-4o, claude-3-5-sonnet-20241022)"),
-                React.createElement(Alert, { variant: "info" }, "Press Enter to confirm, Esc to cancel"))));
-    }
-    return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-        !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: "cyan", paddingX: 1, paddingY: 0 },
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Gradient, { name: 'rainbow' }, "Model Configuration"),
-                React.createElement(Text, { color: "gray", dimColor: true }, "Configure AI models for different tasks")))),
-        React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'advancedModel' ? 'green' : 'white' },
-                        currentField === 'advancedModel' ? '❯ ' : '  ',
-                        "Advanced Model (Main Work):"),
-                    currentField === 'advancedModel' && isEditing && (React.createElement(Box, { marginLeft: 3 }, loading ? (React.createElement(Text, { color: "yellow" }, "Loading models...")) : (React.createElement(Box, { flexDirection: "column" },
-                        searchTerm && (React.createElement(Text, { color: "cyan" },
-                            "Filter: ",
-                            searchTerm)),
-                        React.createElement(Select, { options: getCurrentOptions(), defaultValue: getCurrentValue(), onChange: handleModelChange }))))),
-                    (!isEditing || currentField !== 'advancedModel') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, advancedModel || 'Not set'))))),
-            React.createElement(Box, null,
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'basicModel' ? 'green' : 'white' },
-                        currentField === 'basicModel' ? '❯ ' : '  ',
-                        "Basic Model (Summary & Analysis):"),
-                    currentField === 'basicModel' && isEditing && (React.createElement(Box, { marginLeft: 3 }, loading ? (React.createElement(Text, { color: "yellow" }, "Loading models...")) : (React.createElement(Box, { flexDirection: "column" },
-                        searchTerm && (React.createElement(Text, { color: "cyan" },
-                            "Filter: ",
-                            searchTerm)),
-                        React.createElement(Select, { options: getCurrentOptions(), defaultValue: getCurrentValue(), onChange: handleModelChange }))))),
-                    (!isEditing || currentField !== 'basicModel') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, basicModel || 'Not set'))))),
-            React.createElement(Box, null,
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'maxContextTokens' ? 'green' : 'white' },
-                        currentField === 'maxContextTokens' ? '❯ ' : '  ',
-                        "Max Context Tokens (Auto-compress when reached):"),
-                    currentField === 'maxContextTokens' && isEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "cyan" },
-                            "Enter value: ",
-                            maxContextTokens))),
-                    (!isEditing || currentField !== 'maxContextTokens') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, maxContextTokens))))),
-            React.createElement(Box, null,
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'maxTokens' ? 'green' : 'white' },
-                        currentField === 'maxTokens' ? '❯ ' : '  ',
-                        "Max Tokens (Max tokens for single response):"),
-                    currentField === 'maxTokens' && isEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "cyan" },
-                            "Enter value: ",
-                            maxTokens))),
-                    (!isEditing || currentField !== 'maxTokens') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, maxTokens))))),
-            React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "cyan", bold: true }, "Compact Model (Context Compression):")),
-            React.createElement(Box, null,
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'compactBaseUrl' ? 'green' : 'white' },
-                        currentField === 'compactBaseUrl' ? '❯ ' : '  ',
-                        "Base URL:"),
-                    currentField === 'compactBaseUrl' && isEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "cyan" },
-                            compactBaseUrl,
-                            React.createElement(Text, { color: "white" }, "_")))),
-                    (!isEditing || currentField !== 'compactBaseUrl') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, compactBaseUrl || 'Not set'))))),
-            React.createElement(Box, null,
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'compactApiKey' ? 'green' : 'white' },
-                        currentField === 'compactApiKey' ? '❯ ' : '  ',
-                        "API Key:"),
-                    currentField === 'compactApiKey' && isEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "cyan" },
-                            compactApiKey.replace(/./g, '*'),
-                            React.createElement(Text, { color: "white" }, "_")))),
-                    (!isEditing || currentField !== 'compactApiKey') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, compactApiKey ? compactApiKey.replace(/./g, '*') : 'Not set'))))),
-            React.createElement(Box, null,
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'compactModelName' ? 'green' : 'white' },
-                        currentField === 'compactModelName' ? '❯ ' : '  ',
-                        "Model Name:"),
-                    currentField === 'compactModelName' && isEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "cyan" },
-                            compactModelName,
-                            React.createElement(Text, { color: "white" }, "_")))),
-                    (!isEditing || currentField !== 'compactModelName') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, compactModelName || 'Not set')))))),
-        React.createElement(Box, { flexDirection: "column", marginTop: 1 }, isEditing ? (React.createElement(React.Fragment, null,
-            React.createElement(Alert, { variant: "info" }, "Editing mode: Type to filter models, \u2191\u2193 to select, Enter to confirm"))) : (React.createElement(React.Fragment, null,
-            React.createElement(Alert, { variant: "info" }, "Use \u2191\u2193 to navigate, Enter to edit, M for manual input, Ctrl+S or Esc to save"))))));
-}