| 1 |
/** |
| 2 |
* Model Badge Component |
| 3 |
* |
| 4 |
* Shared component for displaying AI model badges across the application |
| 5 |
* |
| 6 |
* @package ThinkRank |
| 7 |
* @since 1.0.0 |
| 8 |
*/ |
| 9 |
|
| 10 |
/** |
| 11 |
* Model Badge Component |
| 12 |
*/ |
| 13 |
const ModelBadge = ({ provider, model }) => { |
| 14 |
if (!provider || !model) return null; |
| 15 |
|
| 16 |
const getModelDisplayName = (provider, model) => { |
| 17 |
if (provider === 'openai') { |
| 18 |
switch (model) { |
| 19 |
case 'gpt-5-nano': return 'GPT‑5‑nano'; |
| 20 |
case 'gpt-5-mini': return 'GPT‑5‑mini'; |
| 21 |
case 'gpt-5': return 'GPT‑5'; |
| 22 |
case 'gpt-4o': return 'GPT‑4o'; |
| 23 |
default: return model; |
| 24 |
} |
| 25 |
} else if (provider === 'claude') { |
| 26 |
switch (model) { |
| 27 |
// Claude 4 models (use -0 aliases) |
| 28 |
case 'claude-sonnet-4-0': return 'Claude 4 Sonnet'; |
| 29 |
case 'claude-opus-4-0': return 'Claude 4 Opus'; |
| 30 |
case 'claude-sonnet-4-20250514': return 'Claude 4 Sonnet'; |
| 31 |
case 'claude-opus-4-20250514': return 'Claude 4 Opus'; |
| 32 |
// Claude 3.x models (use -latest aliases) |
| 33 |
case 'claude-3-7-sonnet-latest': return 'Claude 3.7 Sonnet'; |
| 34 |
case 'claude-3-5-sonnet-latest': return 'Claude 3.5 Sonnet'; |
| 35 |
case 'claude-3-5-haiku-latest': return 'Claude 3.5 Haiku'; |
| 36 |
// Support for versioned models from API responses |
| 37 |
case 'claude-3-7-sonnet-20250219': return 'Claude 3.7 Sonnet'; |
| 38 |
case 'claude-3-5-sonnet-20241022': return 'Claude 3.5 Sonnet'; |
| 39 |
case 'claude-3-5-haiku-20241022': return 'Claude 3.5 Haiku'; |
| 40 |
default: return model; |
| 41 |
} |
| 42 |
} else if (provider === 'gemini') { |
| 43 |
switch (model) { |
| 44 |
case 'gemini-2.5-flash': return 'Gemini 2.5 Flash'; |
| 45 |
case 'gemini-2.5-flash-lite': return 'Gemini 2.5 Flash-Lite'; |
| 46 |
case 'gemini-2.5-pro': return 'Gemini 2.5 Pro'; |
| 47 |
case 'gemini-2.0-flash': return 'Gemini 2.0 Flash'; |
| 48 |
case 'gemini-1.5-flash': return 'Gemini 1.5 Flash'; |
| 49 |
default: return model; |
| 50 |
} |
| 51 |
} |
| 52 |
return model; |
| 53 |
}; |
| 54 |
|
| 55 |
const displayName = getModelDisplayName(provider, model); |
| 56 |
const badgeClass = `model-badge ${provider}`; |
| 57 |
|
| 58 |
return ( |
| 59 |
<span className={badgeClass} title={`Generated using ${displayName}`}> |
| 60 |
{displayName} |
| 61 |
</span> |
| 62 |
); |
| 63 |
}; |
| 64 |
|
| 65 |
export default ModelBadge; |
| 66 |
|
