feat: Update ProfileForm to conditionally display enabled Cursor models

- Integrated useAppStore to fetch enabledCursorModels for dynamic rendering of Cursor model selection.
- Added a message to inform users when no Cursor models are enabled, guiding them to settings for configuration.
- Refactored the model selection logic to filter available models based on the enabled list, enhancing user experience and clarity.
This commit is contained in:
Kacper
2025-12-29 22:21:01 +01:00
parent 8e10f522c0
commit 4115110c06

View File

@@ -17,6 +17,7 @@ import type {
CursorModelId, CursorModelId,
} from '@automaker/types'; } from '@automaker/types';
import { CURSOR_MODEL_MAP, cursorModelHasThinking } from '@automaker/types'; import { CURSOR_MODEL_MAP, cursorModelHasThinking } from '@automaker/types';
import { useAppStore } from '@/store/app-store';
import { CLAUDE_MODELS, THINKING_LEVELS, ICON_OPTIONS } from '../constants'; import { CLAUDE_MODELS, THINKING_LEVELS, ICON_OPTIONS } from '../constants';
interface ProfileFormProps { interface ProfileFormProps {
@@ -34,6 +35,8 @@ export function ProfileForm({
isEditing, isEditing,
hotkeyActive, hotkeyActive,
}: ProfileFormProps) { }: ProfileFormProps) {
const { enabledCursorModels } = useAppStore();
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
name: profile.name || '', name: profile.name || '',
description: profile.description || '', description: profile.description || '',
@@ -223,46 +226,54 @@ export function ProfileForm({
Cursor Model Cursor Model
</Label> </Label>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{Object.entries(CURSOR_MODEL_MAP).map(([id, config]) => ( {enabledCursorModels.length === 0 ? (
<button <div className="text-sm text-muted-foreground p-3 border border-dashed rounded-md text-center">
key={id} No Cursor models enabled. Enable models in Settings AI Providers.
type="button" </div>
onClick={() => handleCursorModelChange(id as CursorModelId)} ) : (
className={cn( Object.entries(CURSOR_MODEL_MAP)
'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between', .filter(([id]) => enabledCursorModels.includes(id as CursorModelId))
formData.cursorModel === id .map(([id, config]) => (
? 'bg-primary text-primary-foreground border-primary' <button
: 'bg-background hover:bg-accent border-border' key={id}
)} type="button"
data-testid={`cursor-model-select-${id}`} onClick={() => handleCursorModelChange(id as CursorModelId)}
>
<span>{config.label}</span>
<div className="flex gap-1">
{config.hasThinking && (
<Badge
variant="outline"
className={cn(
'text-xs',
formData.cursorModel === id
? 'border-primary-foreground/50 text-primary-foreground'
: 'border-amber-500/50 text-amber-600 dark:text-amber-400'
)}
>
Thinking
</Badge>
)}
<Badge
variant={config.tier === 'free' ? 'default' : 'secondary'}
className={cn( className={cn(
'text-xs', 'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
formData.cursorModel === id && 'bg-primary-foreground/20' formData.cursorModel === id
? 'bg-primary text-primary-foreground border-primary'
: 'bg-background hover:bg-accent border-border'
)} )}
data-testid={`cursor-model-select-${id}`}
> >
{config.tier} <span>{config.label}</span>
</Badge> <div className="flex gap-1">
</div> {config.hasThinking && (
</button> <Badge
))} variant="outline"
className={cn(
'text-xs',
formData.cursorModel === id
? 'border-primary-foreground/50 text-primary-foreground'
: 'border-amber-500/50 text-amber-600 dark:text-amber-400'
)}
>
Thinking
</Badge>
)}
<Badge
variant={config.tier === 'free' ? 'default' : 'secondary'}
className={cn(
'text-xs',
formData.cursorModel === id && 'bg-primary-foreground/20'
)}
>
{config.tier}
</Badge>
</div>
</button>
))
)}
</div> </div>
{formData.cursorModel && cursorModelHasThinking(formData.cursorModel) && ( {formData.cursorModel && cursorModelHasThinking(formData.cursorModel) && (
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">