7346fcde2c
* feat: refactor ProviderForm component with new subcomponents - Introduced PresetSelector, ApiKeyInput, ClaudeConfigEditor, and CodexConfigEditor for improved modularity and readability. - Simplified preset selection logic for both Claude and Codex configurations. - Enhanced API Key input handling with dedicated components for better user experience. - Removed redundant code and improved state management in the ProviderForm component. * feat: add Kimi model selection to ProviderForm component - Introduced KimiModelSelector for enhanced model configuration options. - Implemented state management for Kimi model selection, including initialization and updates based on preset selection. - Improved user experience by conditionally displaying the Kimi model selector based on the selected preset. - Refactored related logic to ensure proper handling of Kimi-specific settings in the ProviderForm. * feat: enhance API Key input and model selection in ProviderForm - Added toggle functionality to show/hide API Key in ApiKeyInput component for improved user experience. - Updated placeholder text in ProviderForm to provide clearer instructions based on the selected preset. - Enhanced KimiModelSelector to display a more informative message when API Key is not provided. - Refactored provider presets to remove hardcoded API Key values for better security practices. * fix(kimi): optimize debounce implementation in model selector - Fix initial state: use empty string instead of apiKey.trim() - Refactor fetchModels to fetchModelsWithKey with explicit key parameter - Ensure consistent behavior between auto-fetch and manual refresh - Eliminate mental overhead from optional parameter fallback logic * fix(api-key): remove custom masking logic, use native password input - Remove getDisplayValue function with custom star masking - Use native browser password input behavior for better UX consistency - Simplify component logic while maintaining show/hide toggle functionality * chore: format code with prettier - Apply consistent code formatting across all TypeScript files - Fix indentation and spacing according to project style guide --------- Co-authored-by: Jason <farion1231@gmail.com>
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Eye, EyeOff } from "lucide-react";
|
|
|
|
interface ApiKeyInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
label?: string;
|
|
id?: string;
|
|
}
|
|
|
|
const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
|
|
value,
|
|
onChange,
|
|
placeholder = "请输入API Key",
|
|
disabled = false,
|
|
required = false,
|
|
label = "API Key",
|
|
id = "apiKey",
|
|
}) => {
|
|
const [showKey, setShowKey] = useState(false);
|
|
|
|
const toggleShowKey = () => {
|
|
setShowKey(!showKey);
|
|
};
|
|
|
|
const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${
|
|
disabled
|
|
? "bg-[var(--color-bg-tertiary)] border-[var(--color-border)] text-[var(--color-text-tertiary)] cursor-not-allowed"
|
|
: "border-[var(--color-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]"
|
|
}`;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor={id}
|
|
className="block text-sm font-medium text-[var(--color-text-primary)]"
|
|
>
|
|
{label} {required && "*"}
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type={showKey ? "text" : "password"}
|
|
id={id}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
required={required}
|
|
autoComplete="off"
|
|
className={inputClass}
|
|
/>
|
|
{!disabled && value && (
|
|
<button
|
|
type="button"
|
|
onClick={toggleShowKey}
|
|
className="absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
|
|
aria-label={showKey ? "隐藏API Key" : "显示API Key"}
|
|
>
|
|
{showKey ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApiKeyInput;
|