mirror of
https://github.com/tiennm99/ccs.git
synced 2026-10-13 00:14:15 +00:00
feat(dashboard): show all provider presets by default in Create API Profile modal
Remove collapsible "More Presets" toggle. All alternative providers are now always visible in a labeled section below Featured Providers, improving discoverability for users like Minimax, GLM, DeepSeek. Closes #892
This commit is contained in:
1 parent
0ae6f54787
commit
f61cc87aa2
1 file changed
+15
-51
@@ -31,17 +31,7 @@ import { Badge } from '@/components/ui/badge';
|
|||||||
import { ProviderLogo } from '@/components/cliproxy/provider-logo';
|
import { ProviderLogo } from '@/components/cliproxy/provider-logo';
|
||||||
import { useCreateProfile } from '@/hooks/use-profiles';
|
import { useCreateProfile } from '@/hooks/use-profiles';
|
||||||
import { useOpenRouterCatalog } from '@/hooks/use-openrouter-models';
|
import { useOpenRouterCatalog } from '@/hooks/use-openrouter-models';
|
||||||
import {
|
import { Loader2, Plus, AlertTriangle, Info, Eye, EyeOff, Settings2, Sparkles } from 'lucide-react';
|
||||||
Loader2,
|
|
||||||
Plus,
|
|
||||||
AlertTriangle,
|
|
||||||
Info,
|
|
||||||
Eye,
|
|
||||||
EyeOff,
|
|
||||||
Settings2,
|
|
||||||
Sparkles,
|
|
||||||
ChevronDown,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
@@ -113,9 +103,6 @@ const RECOMMENDED_PRESETS = getPresetsByCategory('recommended');
|
|||||||
const QUICK_TEMPLATE_PRESETS = PROVIDER_PRESETS.filter(
|
const QUICK_TEMPLATE_PRESETS = PROVIDER_PRESETS.filter(
|
||||||
(preset) => preset.category !== 'recommended'
|
(preset) => preset.category !== 'recommended'
|
||||||
);
|
);
|
||||||
const QUICK_TEMPLATE_PRESET_IDS = new Set<string>(
|
|
||||||
QUICK_TEMPLATE_PRESETS.map((preset) => preset.id)
|
|
||||||
);
|
|
||||||
|
|
||||||
export function ProfileCreateDialog({
|
export function ProfileCreateDialog({
|
||||||
open,
|
open,
|
||||||
@@ -129,7 +116,6 @@ export function ProfileCreateDialog({
|
|||||||
const [urlWarning, setUrlWarning] = useState<string | null>(null);
|
const [urlWarning, setUrlWarning] = useState<string | null>(null);
|
||||||
const [showApiKey, setShowApiKey] = useState(false);
|
const [showApiKey, setShowApiKey] = useState(false);
|
||||||
const [selectedPreset, setSelectedPreset] = useState<PresetSelection>(DEFAULT_PRESET_ID);
|
const [selectedPreset, setSelectedPreset] = useState<PresetSelection>(DEFAULT_PRESET_ID);
|
||||||
const [showMorePresets, setShowMorePresets] = useState(false);
|
|
||||||
const [modelSearch, setModelSearch] = useState('');
|
const [modelSearch, setModelSearch] = useState('');
|
||||||
|
|
||||||
// OpenRouter models for model picker
|
// OpenRouter models for model picker
|
||||||
@@ -192,7 +178,6 @@ export function ProfileCreateDialog({
|
|||||||
setActiveTab('basic');
|
setActiveTab('basic');
|
||||||
setUrlWarning(null);
|
setUrlWarning(null);
|
||||||
setShowApiKey(false);
|
setShowApiKey(false);
|
||||||
setShowMorePresets(false);
|
|
||||||
setModelSearch('');
|
setModelSearch('');
|
||||||
|
|
||||||
// Set initial preset based on initialMode
|
// Set initial preset based on initialMode
|
||||||
@@ -221,13 +206,11 @@ export function ProfileCreateDialog({
|
|||||||
|
|
||||||
if (preset) {
|
if (preset) {
|
||||||
setSelectedPreset(preset.id);
|
setSelectedPreset(preset.id);
|
||||||
setShowMorePresets(QUICK_TEMPLATE_PRESET_IDS.has(preset.id));
|
|
||||||
applyPresetToForm(preset);
|
applyPresetToForm(preset);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setSelectedPreset(CUSTOM_PRESET_ID);
|
setSelectedPreset(CUSTOM_PRESET_ID);
|
||||||
setShowMorePresets(false);
|
|
||||||
applyPresetToForm(null);
|
applyPresetToForm(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -290,10 +273,7 @@ export function ProfileCreateDialog({
|
|||||||
!!errors.model || !!errors.opusModel || !!errors.sonnetModel || !!errors.haikuModel;
|
!!errors.model || !!errors.opusModel || !!errors.sonnetModel || !!errors.haikuModel;
|
||||||
const isCreating = createMutation.isPending;
|
const isCreating = createMutation.isPending;
|
||||||
|
|
||||||
const isQuickTemplateSelected =
|
|
||||||
selectedPreset !== CUSTOM_PRESET_ID && QUICK_TEMPLATE_PRESET_IDS.has(selectedPreset);
|
|
||||||
const isOpenRouter = currentPreset?.id === DEFAULT_PRESET_ID;
|
const isOpenRouter = currentPreset?.id === DEFAULT_PRESET_ID;
|
||||||
const showQuickTemplates = showMorePresets || isQuickTemplateSelected;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
@@ -353,38 +333,22 @@ export function ProfileCreateDialog({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Button
|
<Label className="text-xs font-medium uppercase tracking-[0.12em] text-foreground/70">
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowMorePresets((current) => !current)}
|
|
||||||
aria-expanded={showQuickTemplates}
|
|
||||||
className="h-8 px-2 text-xs font-medium text-muted-foreground hover:text-foreground"
|
|
||||||
>
|
|
||||||
<ChevronDown
|
|
||||||
className={cn(
|
|
||||||
'mr-1 h-3.5 w-3.5 transition-transform',
|
|
||||||
showQuickTemplates ? 'rotate-0' : '-rotate-90'
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{t('profileEditor.morePresets')}
|
{t('profileEditor.morePresets')}
|
||||||
</Button>
|
</Label>
|
||||||
|
<div className="-mx-1 overflow-x-auto pb-1">
|
||||||
{showQuickTemplates && (
|
<div className="flex min-w-max items-stretch gap-2 px-1">
|
||||||
<div className="-mx-1 overflow-x-auto pb-1">
|
{QUICK_TEMPLATE_PRESETS.map((preset) => (
|
||||||
<div className="flex min-w-max items-stretch gap-2 px-1">
|
<CompactPresetCard
|
||||||
{QUICK_TEMPLATE_PRESETS.map((preset) => (
|
key={preset.id}
|
||||||
<CompactPresetCard
|
preset={preset}
|
||||||
key={preset.id}
|
isSelected={selectedPreset === preset.id}
|
||||||
preset={preset}
|
onClick={() => handlePresetSelect(preset.id)}
|
||||||
isSelected={selectedPreset === preset.id}
|
density="compact"
|
||||||
onClick={() => handlePresetSelect(preset.id)}
|
/>
|
||||||
density="compact"
|
))}
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user