[litellm] Display model IDs to match search string #1445

srdas · 2025-08-08T13:50:56Z

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.
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 · 2025-08-11T22:27:34Z

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:

Setting the key prop in the returned element in renderOption (as recommended here),
Passing inputValue={input} to make it re-render every keystroke,
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 · 2025-08-11T22:34:24Z

@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 · 2025-08-11T23:48:56Z

@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.

…f matches

srdas · 2025-08-12T20:56:49Z

@dlqqq Thanks for the ideas above, based on which I have updated this PR. Given that there are thousands of models available on LiteLLM, I changed the Chat model ID field to take in a search string and show the number of matches, you can then click to see all the matches, with the search string in bold font. Then choose the required model ID or filter the list further as needed.

If the search string fails to find a match then the Chat model ID field displays "No matches". See the demo here:

model-input.mov

dlqqq · 2025-08-12T21:29:34Z

@srdas This is a clever way of reducing the performance impact incurred filtering & sorting a list of up to 1000 entries. However, requiring a user to click to show suggestions is less intuitive than showing suggestions automatically. Users will expect search bars to show suggestions automatically like Google/Bing. When building interfaces, it is generally good to "minimize surprise" and align our UIs with what an average user would expect.

I recommend building an automatic suggestion UI first and optimizing for performance later.

Thanks David for approving this.

* update prettier ignore file * fix prettier errors & warnings * fix mypy errors in jupyter_ai * skip ConfigManager and inline completion tests until fixed in v3 * add tests for secrets manager * fix mypy error * run minimum dependency tests on Python 3.10 * comment out precommit job to be added in future * updated test_magics.py --------- Co-authored-by: Sanjiv Das <srdas@scu.edu>

srdas · 2025-08-15T18:21:40Z

@dlqqq I have managed to get the autocomplete working -- see the video:

Screen.Recording.2025-08-15.at.11.12.22.AM.mov

There were some quirks in the way React Autocomplete works, i.e., it seems to add a few extra matches some of the time if you enter strings that are long. I fixed it to only start matching strings of 3 or more characters and this solved it barring a minimal edge case as shown below:

Screen.Recording.2025-08-15.at.11.16.45.AM.mov

I have checked that it does not miss any matches.

dlqqq · 2025-08-15T20:44:43Z

@srdas This does seem more reliable! Tested it locally. There a couple of bugs present:

If you type a complete model ID with your keyboard, the menu stays open even if you click out of it.
The menu still shows some "false positives" (which you noticed as well).

Personally, I still feel like it is worth replacing the Autocomplete component entirely with a custom component. The main issue with using the Autocomplete component is that it is still experiencing the unexplainable bug where the menu entries are not correct, regardless of what props we are passing to control that menu. This can cause more issues moving forward, which will make it more difficult to add features & enhancements to the model ID input component.

I will spend about an hour exploring whether a custom Autocomplete component is feasible. Autocompletion is useful for virtually any text input we have in our frontend, so it is worth investing some time to get this right. Will keep you posted.

dlqqq · 2025-08-15T22:08:33Z

@srdas Hey Sanjiv, I've opened a new PR on your fork that adds a custom Autocomplete component. Hopefully you're able to verify that it is has fewer bugs than MUI's Autocomplete component.

If it looks good to you, feel free to merge that PR into your branch and continue working here in PR 1445. There's just a couple of things I would like help with:

There was a "X" button to the right of the model ID input which cleared the model ID. That is missing in SimpleAutocomplete.
For some reason, when the model ID exactly matches one option, that option is not bolded (see below). This is not important, but I think it would look much better if this were fixed:

Implement `SimpleAutocomplete` and use it in `ModelIdInput`

srdas · 2025-08-15T22:40:45Z

I've tested it, looks good, awesome stuff! Merged it into my fork and will work on the remaining suggestions before resubmitting the PR for merge into the litellm branch. TY for the super help here.

srdas · 2025-08-15T22:56:02Z

@dlqqq This fixes the non-highlighting bug for an exact match:

Added the 'x' button as well, see video:

Screen.Recording.2025-08-15.at.4.05.28.PM.mov

dlqqq

Awesome, thank you Sanjiv! This is perfect. Merging.

Enjoy your weekend! 👋

Update model-id-input.tsx

410a4e3

srdas added the bug Bugs reported by users label Aug 8, 2025

srdas added 2 commits August 12, 2025 13:49

updated model input to show all matches in bold and also the number o…

6f04bcc

…f matches

Merge branch 'litellm' into litellm_model_id

80ac90c

srdas marked this pull request as ready for review August 12, 2025 20:57

srdas requested a review from dlqqq August 12, 2025 20:57

srdas added the enhancement New feature or request label Aug 12, 2025

srdas and others added 5 commits August 15, 2025 11:02

missing model id in magics (jupyterlab#1457)

9cd0e23

Thanks David for approving this.

Added sublists for providers using %ai (jupyterlab#1458)

f160d68

Update model-id-input.tsx

f11013c

Merge branch 'litellm' into litellm_model_id

82c262c

srdas added 2 commits August 15, 2025 11:25

Update model-id-input.tsx

7723842

Update model-id-input.tsx

188ce5f

implement SimpleAutocomplete and use it in ModelIdInput

d618987

dlqqq mentioned this pull request Aug 15, 2025

Implement SimpleAutocomplete and use it in ModelIdInput srdas/jupyter-ai#1

Merged

dlqqq and others added 2 commits August 15, 2025 15:19

memoize callbacks for performance

f229750

Merge pull request #1 from dlqqq/litellm_model_id_custom_autocomplete

78ab85b

Implement `SimpleAutocomplete` and use it in `ModelIdInput`

srdas added 2 commits August 15, 2025 15:56

Update simple-autocomplete.tsx

2f9f787

Added clear button and full match highlights

247e140

dlqqq approved these changes Aug 16, 2025

View reviewed changes

dlqqq merged commit d3ddf72 into jupyterlab:litellm Aug 16, 2025
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[litellm] Display model IDs to match search string #1445

[litellm] Display model IDs to match search string #1445

Uh oh!

srdas commented Aug 8, 2025 •

edited

Loading

Uh oh!

dlqqq commented Aug 11, 2025 •

edited

Loading

Uh oh!

dlqqq commented Aug 11, 2025 •

edited

Loading

Uh oh!

srdas commented Aug 11, 2025

Uh oh!

srdas commented Aug 12, 2025 •

edited

Loading

Uh oh!

dlqqq commented Aug 12, 2025

Uh oh!

srdas commented Aug 15, 2025

Uh oh!

dlqqq commented Aug 15, 2025 •

edited

Loading

Uh oh!

dlqqq commented Aug 15, 2025 •

edited

Loading

Uh oh!

srdas commented Aug 15, 2025

Uh oh!

srdas commented Aug 15, 2025 •

edited

Loading

Uh oh!

dlqqq left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

[litellm] Display model IDs to match search string #1445

[litellm] Display model IDs to match search string #1445

Uh oh!

Conversation

srdas commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dlqqq commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dlqqq commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

srdas commented Aug 11, 2025

Uh oh!

srdas commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dlqqq commented Aug 12, 2025

Uh oh!

srdas commented Aug 15, 2025

Uh oh!

dlqqq commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dlqqq commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

srdas commented Aug 15, 2025

Uh oh!

srdas commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dlqqq left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

srdas commented Aug 8, 2025 •

edited

Loading

dlqqq commented Aug 11, 2025 •

edited

Loading

dlqqq commented Aug 11, 2025 •

edited

Loading

srdas commented Aug 12, 2025 •

edited

Loading

dlqqq commented Aug 15, 2025 •

edited

Loading

dlqqq commented Aug 15, 2025 •

edited

Loading

srdas commented Aug 15, 2025 •

edited

Loading