feat: add model selector (fetch from v1/models) when user adds a provider model

[lugnicca]

Describe Your Changes

• users can either type custom model IDs (original way) or select from a dropdown of available models fetched from the provider's /v1/models endpoint
• automatically fetches models from provider APIs with caching
• full keyboard navigation with arrow keys, Enter, Escape, PageUp/PageDown
• more descriptive error messages for different API failure scenarios (401, 403, 404, etc.) when fetching models
• API key is not mandatory for fetching models (Openrouter and HuggingFace)

modelselector.mp4

Fixes Issues

Self Checklist

• Added relevant comments, esp in complex areas

---

Important

Introduces a ModelCombobox for selecting models from provider APIs with enhanced error handling and caching, updating the AddModel dialog and adding comprehensive tests.

• Behavior:
  • Adds ModelCombobox component in ModelCombobox.tsx for selecting models from a dropdown fetched from /v1/models endpoint.
  • Supports keyboard navigation and displays error messages for API failures (401, 403, 404).
  • API key is optional for fetching models from Openrouter and HuggingFace.
• Dialog Updates:
  • Replaces input with ModelCombobox in AddModel.tsx for model selection.
  • Fetches models using useProviderModels hook.
• Hooks:
  • Introduces useProviderModels in useProviderModels.ts to fetch and cache models from provider APIs.
  • Caches models for 5 minutes and handles errors with specific messages.
• Tests:
  • Adds tests for ModelCombobox in ModelCombobox.test.tsx.
  • Adds tests for useProviderModels in useProviderModels.test.ts.
  • Updates providers.test.ts to test new error handling in fetchModelsFromProvider.

^{This description was created by for aa568e6. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to aa568e6 in 1 minute and 59 seconds. Click for details.

• Reviewed 1339 lines of code in 8 files
• Skipped 0 files when reviewing.
• Skipped posting 1 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/services/providers.ts:222

• Draft comment:
  In updateSettings, the conversion from 'controller_props' to 'controllerProps' uses a conditional to replace undefined values with ''. Consider using a nullish coalescing operator to handle both undefined and null, ensuring consistency with expected types.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_WDRqMx6a4ICpwbfY

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[louis-menlo]

This is awesome!

[louis-menlo]

It works great, but I found two edge cases during testing:

1. When I select the Ollama provider without Ollama running, it shows a refresh button in the dialog. I then open Ollama and click the refresh button → the button disappears (no models are downloaded). After downloading a model from Ollama, the dropdown still shows an empty state and there is no refresh button.
   Expected behavior: the refresh button should always be visible.

2. Following the same flow as above, but without opening Ollama. Instead, I switch to the Gemini provider and then go back. It shows an error message for Gemini even though I had selected the Ollama provider.

[lugnicca]

It works great, but I found two edge cases during testing:

1. When I select the Ollama provider without Ollama running, it shows a refresh button in the dialog. I then open Ollama and click the refresh button → the button disappears (no models are downloaded). After downloading a model from Ollama, the dropdown still shows an empty state and there is no refresh button.
   Expected behavior: the refresh button should always be visible.

2. Following the same flow as above, but without opening Ollama. Instead, I switch to the Gemini provider and then go back.  It shows an error message for Gemini even though I had selected the Ollama provider.

Thanks for the feeback !

For the first issue, I added the refresh button in the input instead of inside the error message, useful for refreshing even when the cache is in place, and it covers the case for no models and errors. Let me know what you think !

For the second one, I managed to recreate the bug but with Ollama error showing on Gemini provider, it seems it was some kind of race condition that was showing the stale response on the UI for the wrong provider.
I added a simple ID guard that tracks the current request and ignores responses that don't match, it seems to have done the trick as I don't encounter the case anymore, let me know how it goes on your end !

Thanks again :)

[louis-menlo]

Thanks @lucido-simon, please help me resolve the conflict so we can proceed with the merge

[lucido-simon]

Thanks @lucido-simon, please help me resolve the conflict so we can proceed with the merge

I think you meant to ping @lugnicca

[louis-menlo]

Ah yes, sorry @lucido-simon

[louis-menlo]

LGTM

[louis-menlo]

Different behaviors for refreshing the model list

1. Can successfully get the model list from the provider screen

2. Can't get model list from model dropdown

[lugnicca]

Different behaviors for refreshing the model list

1. Can successfully get the model list from the provider screen

2. Can't get model list from model dropdown

Thanks for the feedback, seems i got confused with the new separation app/web and services used, fixed it !

Thanks for your patience !

[louis-menlo]

Awesome, thanks @lugnicca