From 410a4e3d3b1d320d5568d99768dceef9702c0113 Mon Sep 17 00:00:00 2001
From: Sanjiv Das <srdas@scu.edu>
Date: Fri, 8 Aug 2025 06:43:55 -0700
Subject: [PATCH 1/2] Update model-id-input.tsx

---
 .../components/settings/model-id-input.tsx    | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/jupyter-ai/src/components/settings/model-id-input.tsx b/packages/jupyter-ai/src/components/settings/model-id-input.tsx
index 888788d0b..2d86eb45a 100644
--- a/packages/jupyter-ai/src/components/settings/model-id-input.tsx
+++ b/packages/jupyter-ai/src/components/settings/model-id-input.tsx
@@ -1,9 +1,31 @@
 import React, { useState, useEffect } from 'react';
-import { Autocomplete, TextField, Button, Box } from '@mui/material';
+import { Autocomplete, TextField, Button, Box, Typography } from '@mui/material';
 import { AiService } from '../../handler';
 import { useStackingAlert } from '../mui-extras/stacking-alert';
 import Save from '@mui/icons-material/Save';
 
+/**
+ * Highlights matched substrings in a given text by wrapping them in bold tags.
+ */
+const highlightMatches = (text: string, inputValue: string) => {
+  if (!inputValue) return text;
+
+  const parts = text.split(new RegExp(`(${inputValue})`, 'gi'));
+  return (
+    <Typography component="span">
+      {parts.map((part, index) =>
+        part.toLowerCase() === inputValue.toLowerCase() ? (
+          <Typography component="span" key={index} sx={{ fontWeight: 'bold' }}>
+            {part}
+          </Typography>
+        ) : (
+          part
+        )
+      )}
+    </Typography>
+  );
+};
+
 export type ModelIdInputProps = {
   /**
    * The label of the model ID input field.
@@ -129,13 +151,15 @@ export function ModelIdInput(props: ModelIdInputProps): JSX.Element {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
       <Autocomplete
-        options={models}
+        options={models.filter(model => 
+          model.toLowerCase().includes(input.toLowerCase())
+        )}
         value={input}
         freeSolo
         autoSelect
         loading={loading}
         fullWidth={props.fullWidth}
-        onInputChange={(e, newValue, r) => {
+        onInputChange={(_, newValue) => {
           // This condition prevents whitespace from being inserted in the model
           // ID by accident.
           if (newValue !== null && !newValue.includes(' ')) {
@@ -150,6 +174,11 @@ export function ModelIdInput(props: ModelIdInputProps): JSX.Element {
             fullWidth={props.fullWidth ?? true}
           />
         )}
+        renderOption={(props, option) => (
+          <li {...props}>
+            {highlightMatches(option, input)}
+          </li>
+        )}
       />
       <Button
         variant="contained"

From 6f04bcc33dda148d57b52015aca62d273cd7b492 Mon Sep 17 00:00:00 2001
From: Sanjiv Das <srdas@scu.edu>
Date: Tue, 12 Aug 2025 13:49:32 -0700
Subject: [PATCH 2/2] updated model input to show all matches in bold and also
 the number of matches

---
 .../components/settings/model-id-input.tsx    | 136 ++++++++++++++----
 1 file changed, 110 insertions(+), 26 deletions(-)

diff --git a/packages/jupyter-ai/src/components/settings/model-id-input.tsx b/packages/jupyter-ai/src/components/settings/model-id-input.tsx
index 2d86eb45a..0fc660d5c 100644
--- a/packages/jupyter-ai/src/components/settings/model-id-input.tsx
+++ b/packages/jupyter-ai/src/components/settings/model-id-input.tsx
@@ -1,5 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Autocomplete, TextField, Button, Box, Typography } from '@mui/material';
+import {
+  TextField,
+  Button,
+  Box,
+  Typography,
+  Menu,
+  MenuItem
+} from '@mui/material';
 import { AiService } from '../../handler';
 import { useStackingAlert } from '../mui-extras/stacking-alert';
 import Save from '@mui/icons-material/Save';
@@ -73,8 +80,26 @@ export function ModelIdInput(props: ModelIdInputProps): JSX.Element {
   const [updating, setUpdating] = useState(false);
 
   const [input, setInput] = useState('');
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const alert = useStackingAlert();
 
+  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleMenuItemClick = (value: string) => {
+    setInput(value);
+    handleMenuClose();
+  };
+
+  const filteredModels = models.filter(model =>
+    model.toLowerCase().includes(input.toLowerCase())
+  );
+
   /**
    * Effect: Fetch list of models and current model on initial render, based on
    * the modality.
@@ -150,36 +175,95 @@ export function ModelIdInput(props: ModelIdInputProps): JSX.Element {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Autocomplete
-        options={models.filter(model => 
-          model.toLowerCase().includes(input.toLowerCase())
-        )}
+      <TextField
+        label={props.label || 'Model ID'}
+        placeholder={props.placeholder}
+        fullWidth={props.fullWidth ?? true}
         value={input}
-        freeSolo
-        autoSelect
-        loading={loading}
-        fullWidth={props.fullWidth}
-        onInputChange={(_, newValue) => {
-          // This condition prevents whitespace from being inserted in the model
-          // ID by accident.
-          if (newValue !== null && !newValue.includes(' ')) {
+        onChange={e => {
+          const newValue = e.target.value;
+          if (!newValue.includes(' ')) {
             setInput(newValue);
           }
         }}
-        renderInput={params => (
-          <TextField
-            {...params}
-            label={props.label || 'Model ID'}
-            placeholder={props.placeholder}
-            fullWidth={props.fullWidth ?? true}
-          />
-        )}
-        renderOption={(props, option) => (
-          <li {...props}>
-            {highlightMatches(option, input)}
-          </li>
-        )}
+        InputProps={{
+          endAdornment:
+            // input && filteredModels.length > 0 ? (
+            input ? (
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  height: '100%',
+                  justifyContent: 'left',
+                  width: '100%'
+                }}
+              >
+                <Box
+                  sx={{
+                    cursor: 'pointer',
+                    ml: 1,
+                    display: 'flex',
+                    alignItems: 'center'
+                  }}
+                  onClick={handleMenuOpen}
+                  tabIndex={0}
+                  role="button"
+                >
+                  <svg width="20" height="20" fill="none" viewBox="0 0 24 24">
+                    <path
+                      d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99a1 1 0 0 0 1.41-1.41l-4.99-5zm-6 0C8.01 14 6 11.99 6 9.5S8.01 5 10.5 5 15 7.01 15 9.5 12.99 14 10.5 14z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  {filteredModels.length > 0 ? (
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        ml: 1,
+                        userSelect: 'none',
+                        color: 'text.secondary'
+                      }}
+                    >
+                      Click to see {filteredModels.length} match
+                      {filteredModels.length !== 1 ? 'es' : ''}
+                    </Typography>
+                  ) : (
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        ml: 1,
+                        userSelect: 'none',
+                        color: 'text.secondary'
+                      }}
+                    >
+                      No matches
+                    </Typography>
+                  )}
+                </Box>
+              </Box>
+            ) : null
+        }}
       />
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left'
+        }}
+      >
+        {filteredModels.map((model, index) => (
+          <MenuItem key={index} onClick={() => handleMenuItemClick(model)}>
+            {highlightMatches(model, input)}
+          </MenuItem>
+        ))}
+      </Menu>
       <Button
         variant="contained"
         onClick={handleUpdateChatModel}