Repository: menloresearch/jan
File: web-app/src/containers/DropdownModelProvider.tsx (TypeScript)

Code before:

  // Clear search and focus input
  const onClearSearch = useCallback(() => {
    setSearchValue('')
    searchInputRef.current?.focus()
  }, [])

  // Create searchable items from all models
  const searchableItems = useMemo(() => {
    const items: SearchableModel[] = []

    providers.forEach((provider) => {
      if (!provider.active) return

      provider.models.forEach((modelItem) => {
        // Skip models that require API key but don't have one (except llamacpp)
        if (
          provider &&
          predefinedProviders.some((e) =>
            e.provider.includes(provider.provider)
          )
        ) {
          if (provider.provider !== 'llamacpp' && !provider.api_key?.length) {
            return
          }
        }

        const capabilities = modelItem.capabilities || []
        const capabilitiesString = capabilities.join(' ')
        const providerTitle = getProviderTitle(provider.provider)

        // Create search string with model id, provider, and capabilities
        const searchStr =
          `${modelItem.id} ${providerTitle} ${provider.provider} ${capabilitiesString}`.toLowerCase()

        items.push({
          provider,
          model: modelItem,
          searchStr,
          value: `${provider.provider}:${modelItem.id}`,
        })
      })
    })

    return items
  }, [providers])

  // Create Fzf instance for fuzzy search
  const fzfInstance = useMemo(() => {
    return new Fzf(searchableItems, {
      selector: (item) => item.model.id.toLowerCase(),

Review comment (suggestion):
```suggestion
        if (
          provider &&
          predefinedProviders.some((e) =>
            e.provider.includes(provider.provider)
          ) && provider.provider !== 'llamacpp' && !provider.api_key?.length
        )
            return
}
```

Code after:

  // Clear search and focus input
  const onClearSearch = useCallback(() => {
    setSearchValue('')
    searchInputRef.current?.focus()
  }, [])

  // Create searchable items from all models
  const searchableItems = useMemo(() => {
    const items: SearchableModel[] = []

    providers.forEach((provider) => {
      if (!provider.active) return

      provider.models.forEach((modelItem) => {
        // Skip models that require API key but don't have one (except llamacpp)
        if (
          provider &&
          predefinedProviders.some((e) =>
            e.provider.includes(provider.provider)
          ) && provider.provider !== 'llamacpp' && !provider.api_key?.length
        )
            return

        const capabilities = modelItem.capabilities || []
        const capabilitiesString = capabilities.join(' ')
        const providerTitle = getProviderTitle(provider.provider)

        // Create search string with model id, provider, and capabilities
        const searchStr =
          `${modelItem.id} ${providerTitle} ${provider.provider} ${capabilitiesString}`.toLowerCase()

        items.push({
          provider,
          model: modelItem,
          searchStr,
          value: `${provider.provider}:${modelItem.id}`,
        })
      })
    })

    return items
  }, [providers])

  // Create Fzf instance for fuzzy search
  const fzfInstance = useMemo(() => {
    return new Fzf(searchableItems, {
      selector: (item) => item.model.id.toLowerCase(),
    })
  }, [searchableItems])