11import { useState , useMemo } from 'react'
2- import { Globe , ChevronLeft , Key , Check , Trash2 , Plus , ArrowRight , Zap } from 'lucide-react'
2+ import { Globe , ChevronLeft , Key , Check , Trash2 , Plus , ArrowRight , Zap , Filter } from 'lucide-react'
33import { useTranslation } from 'react-i18next'
44import {
55 Dialog ,
@@ -167,6 +167,97 @@ function ProviderModelMappings({ provider }: { provider: Provider }) {
167167 )
168168}
169169
170+ // Provider Supported Models Section
171+ function ProviderSupportModels ( {
172+ supportModels,
173+ onChange,
174+ } : {
175+ supportModels : string [ ]
176+ onChange : ( models : string [ ] ) => void
177+ } ) {
178+ const { t } = useTranslation ( )
179+ const [ newModel , setNewModel ] = useState ( '' )
180+
181+ const handleAddModel = ( ) => {
182+ if ( ! newModel . trim ( ) ) return
183+ const trimmedModel = newModel . trim ( )
184+ if ( ! supportModels . includes ( trimmedModel ) ) {
185+ onChange ( [ ...supportModels , trimmedModel ] )
186+ }
187+ setNewModel ( '' )
188+ }
189+
190+ const handleRemoveModel = ( model : string ) => {
191+ onChange ( supportModels . filter ( m => m !== model ) )
192+ }
193+
194+ return (
195+ < div >
196+ < div className = "flex items-center gap-2 mb-4 border-b border-border pb-2" >
197+ < Filter size = { 18 } className = "text-blue-500" />
198+ < h4 className = "text-lg font-semibold text-foreground" >
199+ { t ( 'providers.supportModels.title' , 'Supported Models' ) }
200+ </ h4 >
201+ < span className = "text-sm text-muted-foreground" >
202+ ({ supportModels . length } )
203+ </ span >
204+ </ div >
205+
206+ < div className = "bg-card border border-border rounded-xl p-4" >
207+ < p className = "text-xs text-muted-foreground mb-4" >
208+ { t ( 'providers.supportModels.desc' , 'Configure which models this provider supports. If empty, all models are supported. Supports wildcards like claude-* or gemini-*.' ) }
209+ </ p >
210+
211+ { supportModels . length > 0 && (
212+ < div className = "flex flex-wrap gap-2 mb-4" >
213+ { supportModels . map ( ( model ) => (
214+ < div
215+ key = { model }
216+ className = "flex items-center gap-1 bg-muted/50 border border-border rounded-lg px-3 py-1.5"
217+ >
218+ < span className = "text-sm" > { model } </ span >
219+ < button
220+ type = "button"
221+ onClick = { ( ) => handleRemoveModel ( model ) }
222+ className = "text-muted-foreground hover:text-destructive ml-1"
223+ >
224+ < Trash2 className = "h-3.5 w-3.5" />
225+ </ button >
226+ </ div >
227+ ) ) }
228+ </ div >
229+ ) }
230+
231+ { supportModels . length === 0 && (
232+ < div className = "text-center py-6 mb-4" >
233+ < p className = "text-muted-foreground text-sm" >
234+ { t ( 'providers.supportModels.empty' , 'No model filter configured. All models will be supported.' ) }
235+ </ p >
236+ </ div >
237+ ) }
238+
239+ < div className = "flex items-center gap-2 pt-4 border-t border-border" >
240+ < ModelInput
241+ value = { newModel }
242+ onChange = { setNewModel }
243+ placeholder = { t ( 'providers.supportModels.placeholder' , 'e.g. claude-* or gemini-2.5-*' ) }
244+ className = "flex-1 min-w-0 h-8 text-sm"
245+ />
246+ < Button
247+ variant = "outline"
248+ size = "sm"
249+ onClick = { handleAddModel }
250+ disabled = { ! newModel . trim ( ) }
251+ >
252+ < Plus className = "h-4 w-4 mr-1" />
253+ { t ( 'common.add' ) }
254+ </ Button >
255+ </ div >
256+ </ div >
257+ </ div >
258+ )
259+ }
260+
170261interface ProviderEditFlowProps {
171262 provider : Provider ;
172263 onClose : ( ) => void ;
@@ -177,6 +268,7 @@ type EditFormData = {
177268 baseURL : string ;
178269 apiKey : string ;
179270 clients : ClientConfig [ ] ;
271+ supportModels : string [ ] ;
180272} ;
181273
182274export function ProviderEditFlow ( { provider, onClose } : ProviderEditFlowProps ) {
@@ -202,6 +294,7 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
202294 baseURL : provider . config ?. custom ?. baseURL || '' ,
203295 apiKey : provider . config ?. custom ?. apiKey || '' ,
204296 clients : initClients ( ) ,
297+ supportModels : provider . supportModels || [ ] ,
205298 } ) ;
206299
207300 const updateClient = ( clientId : ClientType , updates : Partial < ClientConfig > ) => {
@@ -245,6 +338,7 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
245338 } ,
246339 } ,
247340 supportedClientTypes,
341+ supportModels : formData . supportModels . length > 0 ? formData . supportModels : undefined ,
248342 } ;
249343
250344 await updateProvider . mutateAsync ( { id : Number ( provider . id ) , data } ) ;
@@ -420,6 +514,12 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
420514 < ClientsConfigSection clients = { formData . clients } onUpdateClient = { updateClient } />
421515 </ div >
422516
517+ { /* Provider Supported Models Filter */ }
518+ < ProviderSupportModels
519+ supportModels = { formData . supportModels }
520+ onChange = { ( models ) => setFormData ( ( prev ) => ( { ...prev , supportModels : models } ) ) }
521+ />
522+
423523 { /* Provider Model Mappings */ }
424524 < ProviderModelMappings provider = { provider } />
425525
0 commit comments