Fix MUI deprecated

Author: brichet

packages/jupyter-chat/src/components/input/chat-input.tsx

@@ -185,20 +185,20 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
       <Autocomplete
         {...chatCommands.autocompleteProps}
         // ensure the autocomplete popup always renders on top
-        componentsProps={{
+        slotProps={{
           popper: {
             placement: 'top'
           },
           paper: {
             sx: {
               border: '1px solid lightgray'
             }
-          }
-        }}
-        ListboxProps={{
-          sx: {
-            '& .MuiAutocomplete-option': {
-              padding: 2
+          },
+          listbox: {
+            sx: {
+              '& .MuiAutocomplete-option': {
+                padding: 2
+              }
             }
           }
         }}
@@ -215,21 +215,26 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
             onSelect={() =>
               (model.cursorIndex = inputRef.current?.selectionStart ?? null)
             }
-            InputProps={{
-              ...params.InputProps,
-              endAdornment: (
-                <InputAdornment position="end" className={INPUT_TOOLBAR_CLASS}>
-                  {toolbarElements.map(item => (
-                    <item.element
-                      model={model}
-                      chatCommandRegistry={props.chatCommandRegistry}
-                    />
-                  ))}
-                </InputAdornment>
-              )
-            }}
-            FormHelperTextProps={{
-              sx: { marginLeft: 'auto', marginRight: 0 }
+            slotProps={{
+              input: {
+                ...params.InputProps,
+                endAdornment: (
+                  <InputAdornment
+                    position="end"
+                    className={INPUT_TOOLBAR_CLASS}
+                  >
+                    {toolbarElements.map(item => (
+                      <item.element
+                        model={model}
+                        chatCommandRegistry={props.chatCommandRegistry}
+                      />
+                    ))}
+                  </InputAdornment>
+                )
+              },
+              formHelperText: {
+                sx: { marginLeft: 'auto', marginRight: 0 }
+              }
             }}
             helperText={input.length > 2 ? helperText : ' '}
           />