Update Materiel UI v7 (#277)

* Update to Materiel UI v7

* Fix lerna deprecated option

* Fix MUI deprecated

Author: brichet

package.json

@@ -26,9 +26,9 @@
     "docs/jupyter-chat-example"
   ],
   "scripts": {
-    "build": "lerna run build --stream --scope jupyterlab-chat-extension  --include-filtered-dependencies",
+    "build": "lerna run build --stream --scope jupyterlab-chat-extension  --include-dependencies",
     "build:core": "lerna run build --stream --scope \"@jupyter/chat\"",
-    "build:lite-docs": "lerna run build --stream --scope jupyter-chat-example  --include-filtered-dependencies",
+    "build:lite-docs": "lerna run build --stream --scope jupyter-chat-example  --include-dependencies",
     "build:prod": "lerna run build:prod --stream",
     "clean": "lerna run clean",
     "clean:all": "lerna run clean:all",

packages/jupyter-chat/package.json

@@ -62,8 +62,8 @@
     "@lumino/disposable": "^2.0.0",
     "@lumino/polling": "^2.0.0",
     "@lumino/signaling": "^2.0.0",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.0",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
     "clsx": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

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

@@ -187,20 +187,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
+              }
             }
           }
         }}
@@ -218,9 +218,11 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
             onSelect={() =>
               (model.cursorIndex = inputRef.current?.selectionStart ?? null)
             }
-            InputProps={{
-              ...params.InputProps,
-              className: INPUT_COMPONENT_CLASS
+            slotProps={{
+              input: {
+                ...params.InputProps,
+                className: INPUT_COMPONENT_CLASS
+              }
             }}
             label={input.length > 2 ? helperText : ' '}
           />