Spaces:
Sleeping
Sleeping
File size: 2,875 Bytes
609c821 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import React from 'react';
import { AIModel, AVAILABLE_MODELS, ModelProvider } from '../types';
import { Icons } from '../constants';
interface CompactModelSelectorProps {
selectedModel: AIModel;
onModelChange: (model: AIModel) => void;
disabled?: boolean;
}
const CompactModelSelector: React.FC<CompactModelSelectorProps> = ({ selectedModel, onModelChange, disabled = false }) => {
// Group models by provider
const modelsByProvider = AVAILABLE_MODELS.reduce((acc, model) => {
if (!acc[model.provider]) {
acc[model.provider] = [];
}
acc[model.provider].push(model);
return acc;
}, {} as Record<ModelProvider, AIModel[]>);
const providerLabels = {
[ModelProvider.GEMINI]: 'Google Gemini',
[ModelProvider.GROQ]: 'Groq',
[ModelProvider.MISTRAL]: 'Mistral AI'
};
return (
<div className="relative group min-w-[160px]">
<div className="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none text-petro-400 group-hover:text-petro-300 transition-colors">
<Icons.Cpu className="h-4 w-4" />
</div>
<select
value={selectedModel.id}
onChange={(e) => {
const model = AVAILABLE_MODELS.find(m => m.id === e.target.value);
if (model) onModelChange(model);
}}
disabled={disabled}
className="w-full bg-industrial-900/50 border border-industrial-700/50 text-gray-200 text-xs font-medium rounded-lg pl-9 pr-9 py-2
focus:outline-none focus:ring-1 focus:ring-petro-500/50 focus:border-petro-500/50
disabled:opacity-50 disabled:cursor-not-allowed
hover:bg-industrial-800/80 hover:border-industrial-600 transition-all cursor-pointer appearance-none shadow-sm backdrop-blur-sm truncate"
title={selectedModel.description}
>
{Object.entries(modelsByProvider).map(([provider, models]) => (
<optgroup key={provider} label={providerLabels[provider as ModelProvider]}>
{models.map(model => (
<option key={model.id} value={model.id} className="bg-industrial-900 text-gray-300 py-1">
{model.name}
</option>
))}
</optgroup>
))}
</select>
<div className="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none text-gray-500 group-hover:text-petro-400 transition-colors">
<Icons.ChevronDown className="h-3.5 w-3.5" />
</div>
</div>
);
};
export default CompactModelSelector;
|