feat: implement fuzzy search and dropdown grouping in SelectDropdown component

[samhvw8]

Context

Improve UI UX in chatarea, this pr introduce fuzzy search box into mode & provider profile

Implementation

Using fzf to select-dropbox

ScreenCast

https://www.loom.com/share/5e69ee75da0044aaa41e98d8b13f6b40?sid=0b084a44-d811-4a0f-8a93-f5035fb01510

How to Test

Get in Touch

---

Important

Implement fuzzy search and dropdown grouping in SelectDropdown using fzf and refactor to use Popover.

• Behavior:
  • Implements fuzzy search in SelectDropdown using fzf.
  • Groups dropdown options by type, handling separators and shortcuts.
  • Uses Popover instead of DropdownMenu for dropdown rendering.
• Components:
  • Refactor SelectDropdown in select-dropdown.tsx to use Popover, PopoverContent, and PopoverTrigger.
  • Adds search input and clear functionality in the dropdown.
• Tests:
  • Update tests in select-dropdown.test.tsx to mock Popover components.
  • Add tests for new functionalities like fuzzy search and option grouping.

^{This description was created by for af99ea6079c372188fcebe0b420f6c8e866a6534. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: d8bf63b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ellipsis-dev]

The mocks for the Popover and related components force the dropdown to open, but they don’t simulate behavior for different option types (e.g., separators vs. shortcuts). While acceptable as a temporary workaround, consider refining these mocks or adding integration tests to simulate real interactions as per our testing guidelines.

[ellipsis-dev]

The 'X' icon used to clear the search leverages a <div> with an onClick handler. For accessibility, consider replacing it with a <button> element or adding appropriate ARIA roles and tab index to ensure it's keyboard-navigable.

[ellipsis-dev]

The fuzzy search and grouping logic is implemented directly in the component. For improved modularity and testability (per our standards on modular code and reusable utilities), consider extracting the fuzzy search and grouping functionalities into separate helper functions or hooks.

[ellipsis-dev]

The search input lacks an aria-label, which is important for accessibility. Consider adding an aria-label attribute to the input element to improve screen reader support.

Suggested change

	<input
	<input aria-label="Search input"

[adamhill]

Nice. I have wanted fuzzy search in our long dropboxes for a while. Thanks for the contribution!

[mrubens]

The focus ring feels too eye-catching to me - can we just leave it the same as the border color?

[mrubens]

The focus ring feels too eye-catching to me - can we just leave it the same as the border color?

I think I can do it quickly, one sec