Add model parameter type dropdown (#1473)

* implementation of the model parameter type dropdown feature

* fixed bugs for indexes instead of names; changed isStatic use

* Fixed prettier formatting

Author: jonahjung22

packages/jupyter-ai/src/components/settings/model-parameters-input.tsx

@@ -1,11 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Box,
   Button,
   TextField,
   Alert,
   IconButton,
-  Autocomplete
+  Autocomplete,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import Save from '@mui/icons-material/Save';
@@ -19,6 +23,15 @@ type ModelParameter = {
   isStatic?: boolean;
 };
 
+const PARAMETER_TYPES = [
+  'string',
+  'integer',
+  'number',
+  'boolean',
+  'array',
+  'object'
+] as const;
+
 export type ModelParametersInputProps = {
   modelId?: string | null;
 };
@@ -32,6 +45,7 @@ export function ModelParametersInput(
   const [validationError, setValidationError] = useState<string>('');
   const [isLoading, setIsLoading] = useState(false);
   const alert = useStackingAlert();
+  const argumentValueRefs = useRef<Record<number, HTMLInputElement | null>>({});
 
   const inferParameterType = (value: any): string => {
     if (typeof value === 'boolean') {
@@ -117,23 +131,36 @@ export function ModelParametersInput(
   };
 
   const handleParameterChange = (
-    name: string,
+    index: number,
     field: keyof ModelParameter,
     value: string
   ) => {
     setParameters(prev =>
-      prev.map(param =>
-        param.name === name
-          ? { ...param, [field]: value, isStatic: false }
+      prev.map((param, i) =>
+        i === index
+          ? {
+              ...param,
+              [field]: value,
+              // Only mark as non-static if it wasn't already static
+              isStatic:
+                param.isStatic && field !== 'value' ? param.isStatic : false
+            }
           : param
       )
     );
     setValidationError('');
+
+    // Auto-focus on the argument value input when type is selected
+    if (field === 'type' && value) {
+      setTimeout(() => {
+        argumentValueRefs.current[index]?.focus();
+      }, 0);
+    }
   };
 
   // Handle parameter name selection from dropdown
   const handleParameterNameSelect = (
-    currentName: string,
+    index: number,
     paramName: string | null
   ) => {
     if (!paramName) {
@@ -142,8 +169,8 @@ export function ModelParametersInput(
     const paramSchema = availableParameters?.parameters?.[paramName];
 
     setParameters(prev =>
-      prev.map(param =>
-        param.name === currentName
+      prev.map((param, i) =>
+        i === index
           ? {
               ...param,
               name: paramName,
@@ -156,8 +183,8 @@ export function ModelParametersInput(
     setValidationError('');
   };
 
-  const handleDeleteParameter = (name: string) => {
-    setParameters(prev => prev.filter(param => param.name !== name));
+  const handleDeleteParameter = (index: number) => {
+    setParameters(prev => prev.filter((_, i) => i !== index));
     setValidationError('');
   };
 
@@ -290,7 +317,7 @@ export function ModelParametersInput(
               options={getParameterOptions(param.name)}
               value={param.name || null}
               onChange={(_, newValue) => {
-                handleParameterNameSelect(param.name, newValue);
+                handleParameterNameSelect(index, newValue);
               }}
               freeSolo
               size="small"
@@ -331,32 +358,38 @@ export function ModelParametersInput(
               }}
             />
           )}
-          <TextField
-            label="Parameter type"
-            placeholder="e.g. float, string"
-            value={param.type}
-            onChange={e =>
-              handleParameterChange(param.name, 'type', e.target.value)
-            }
-            size="small"
-            sx={{ flex: 1 }}
-            disabled={param.isStatic}
-            InputProps={{
-              readOnly: param.isStatic
-            }}
-          />
+          <FormControl size="small" sx={{ flex: 1 }} disabled={param.isStatic}>
+            <InputLabel>Parameter type</InputLabel>
+            <Select
+              value={param.type}
+              label="Parameter type"
+              onChange={e =>
+                handleParameterChange(index, 'type', e.target.value)
+              }
+              disabled={param.isStatic}
+            >
+              {PARAMETER_TYPES.map(type => (
+                <MenuItem key={type} value={type}>
+                  {type}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
           <TextField
             label="Argument value"
             placeholder="e.g. 0.7, https://localhost:8989"
             value={param.value}
             onChange={e =>
-              handleParameterChange(param.name, 'value', e.target.value)
+              handleParameterChange(index, 'value', e.target.value)
             }
             size="small"
             sx={{ flex: 1 }}
+            inputRef={el => {
+              argumentValueRefs.current[index] = el;
+            }}
           />
           <IconButton
-            onClick={() => handleDeleteParameter(param.name)}
+            onClick={() => handleDeleteParameter(index)}
             color="error"
             size="small"
             sx={{ ml: 1 }}