feat: Add provider categorization and improved UI for model selection #8619
Conversation
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=80&v=4){kind=small}
- Add comprehensive provider metadata system with categories (cloud/local/hybrid) - Add pricing models (free/paid/freemium) and quality tiers - Create new CategorizedProviderSelect component with visual organization - Add icons and color-coded badges for better UX - Include warnings for deprecated/experimental providers - Support 50+ providers with detailed metadata Fixes #8618
dosubot
bot
added
size:XXL
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| }) | ||
| } | ||
|
|
||
| const getCategoryLabel = (category: string) => { |
There was a problem hiding this comment.
Consider replacing hardcoded category labels (e.g. '⭐ Recommended', '☁️ Cloud Providers', etc.) with translatable strings using your i18n function to support localization.
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| value, | ||
| onValueChange, | ||
| availableProviders, | ||
| placeholder = "Select a provider", |
There was a problem hiding this comment.
A default placeholder 'Select a provider' is hardcoded. Consider using a translation call here so that it can be localized.
| placeholder = "Select a provider", | |
| placeholder = t("selectProvider"), |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
| } | ||
|
|
||
| // Helper function to get badge styles based on quality | ||
| const getQualityBadgeStyles = (quality: string) => { |
There was a problem hiding this comment.
Consider typing the parameter in getQualityBadgeStyles as QualityTier (instead of string) to more accurately reflect the expected values from the provider metadata.
| const getQualityBadgeStyles = (quality: string) => { | |
| const getQualityBadgeStyles = (quality: QualityTier) => { |
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| authentication: "api-key", | ||
| recommended: true, | ||
| deprecated: false, | ||
| description: "Official OpenAI API with GPT-4, GPT-4 Turbo, and GPT-5 models", |
There was a problem hiding this comment.
The description mentions "GPT-5 models" but GPT-5 is not publicly available. This should be updated to only reference actually available models like GPT-4, GPT-4 Turbo, GPT-4o, etc.
| warning: "For testing only - requires manual intervention", | ||
| tags: ["testing", "manual", "development"], | ||
| }, | ||
| "fake-ai": { |
There was a problem hiding this comment.
The fake-ai provider has metadata defined here but is not included in the PROVIDERS list in webview-ui/src/components/settings/constants.ts. This means users won't be able to select it from the UI even though metadata exists for it. Either add it to the PROVIDERS list or remove the metadata if it's not meant to be user-selectable.
| const getCategoryLabel = (category: string) => { | ||
| switch (category) { | ||
| case "recommended": | ||
| return "⭐ Recommended" |
There was a problem hiding this comment.
The new CategorizedProviderSelect component uses hardcoded English strings ("⭐ Recommended", "☁️ Cloud Providers", "Free tier available", "Premium Quality", etc.) while the existing ApiOptions component uses internationalization via useAppTranslation() and the t() function. This creates inconsistency in the settings UI. These strings should be added to the i18n translation files and accessed via the translation system to maintain consistency with the rest of the codebase.
hannesrudolph
added
the
Issue/PR - Triage
2 participants
This PR attempts to address Issue #8618 by implementing a comprehensive provider categorization system to improve the AI model selection experience.
Summary of Changes
🏗️ New Provider Metadata System
🎨 Enhanced UI Components
CategorizedProviderSelectcomponent with visual organization📝 Type Definitions
ProviderMetadatainterface and related types inpackages/typesprovider-metadata-definitions.tswith complete provider dataTesting
Screenshots
The new UI organizes providers into clear categories with visual indicators:
How It Addresses the Issue
This implementation directly addresses the user's feedback about the provider selection being a "mess" by:
Feedback and guidance are welcome!
Fixes #8618
Important
Introduces provider categorization and enhances UI for model selection with metadata and visual indicators.
ProviderMetadatainterface inprovider-metadata.ts.provider-metadata-definitions.tswith metadata for 50+ providers, including categories, pricing, and quality tiers.SearchableSelectwithCategorizedProviderSelectinApiOptions.tsx.CategorizedProviderSelect.tsxgroups providers by category and displays badges for pricing and quality.This description was created by
for bde80f8. You can customize this summary. It will automatically update as commits are pushed.