feat: implement llm model search #1322
Merged
+229
−23
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@kamilfurtak thx for the PR. Here a few things: Size of dropdowns should be always the same and not break into 2 lines (doesnt look good in my view): Remove Transparency: Accessibillty / Tab selection order is wrong. From Provider it goes to edit instead of to the model dropdown. See this GIF: |
Added keyboard support for toggling the dropdown using Enter or Space keys, improving accessibility. Also set appropriate focus properties by adding tabindex to the combobox element.
|
@leex279 Thanks for feedback. I made fixes to your comments and added small UI and accessibility improvements. |
leex279
approved these changes
Feb 17, 2025
xKevIsDev
approved these changes
Feb 18, 2025
There was a problem hiding this comment.
Reviewed and looks good! Will go ahead and merge this now. Thanks @kamilfurtak
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This Pull Request updates the ModelSelector component to replace the traditional dropdown UI for selecting models with a searchable and keyboard-navigable dropdown menu. The changes aim to improve usability by providing enhanced search and navigation capabilities.
Introduced state variables for managing the search query, dropdown state, and keyboard navigation.
Added refs for handling search input focus and tracking dropdown options.
Users can now filter models by typing in a search box.
Models are dynamically filtered based on provider and search criteria.
Arrow keys support navigating between filtered models.
Other key events (Enter, Escape, Tab) provide improved dropdown interaction.
Removed standard element and replaced it with a custom searchable dropdown UI styled with class-based utilities for responsive design and interactivity. Enhanced user-focused interactivity: Automatically focuses the search input when the dropdown is opened. Highlights selected or focused items within the dropdown for accessibility.