[litellm] Display model IDs to match search string

[srdas]

Fixes #1428

This is WIP.

1. After the user enters a search string for a model ID in the "Chat model ID" field in AI Settings, the models displayed match the string and show the same substring in the model ID in bold font.
2. There is still one small issue remaining -- to trigger the search the string has to be followed by a space, and when the space is deleted, then the filtered model IDs are shown.

Screen.Recording.2025-08-08.at.6.41.25.AM.mov

[dlqqq]

Thank you for starting this Sanjiv. I was able to reproduce the bug you are reporting.

I tried using the filterOptions prop which lets you filter the list of options, then I added a statement to log the filtered list of options if input === "aleph". As you can see, the correct options are logged to the browser console, but the UI is still showing old options:

In addition to using the filterOptions prop instead of filtering on the options prop directly, I've also tried:

1. Setting the key prop in the returned element in renderOption (as recommended here),
2. Passing inputValue={input} to make it re-render every keystroke,
3. Upgrading MUI to the latest v5 release (v5.18.0).

None of these fixed the bug. Over my entire history of working on JAI, I've cumulatively spent at least 15 hours trying to get Autocomplete components working. The conclusion I've arrived at is that the MUI Autocomplete component just doesn't work.

[dlqqq]

@srdas If you're up for it, I think the next best step is to re-implement the Autocomplete component. This will improve performance, fix the bug we're seeing, and solve this problem for good in Jupyter AI.

The MUI <Menu /> component can be attached under a <TextField />. Each model ID should be rendered as a <MenuItem /> child element and set the input value when it is clicked. The list of <MenuItem /> elements should also update to only show values that contain the current input as a substring, bolding the matched substring.

Docs: https://mui.com/material-ui/react-menu/#positioned-menu

[srdas]

@srdas If you're up for it, I think the next best step is to re-implement the Autocomplete component. This will improve performance, fix the bug we're seeing, and solve this problem for good in Jupyter AI.

The MUI <Menu /> component can be attached under a <TextField />. Each model ID should be rendered as a <MenuItem /> child element and set the input value when it is clicked. The list of <MenuItem /> elements should also update to only show values that contain the current input as a substring, bolding the matched substring.

Docs: https://mui.com/material-ui/react-menu/#positioned-menu

Sure, I'll work on this.