@@ -7,10 +7,10 @@ import {
77 Autocomplete ,
88 AutocompleteInputChangeReason ,
99 Box ,
10- InputAdornment ,
1110 SxProps ,
1211 TextField ,
13- Theme
12+ Theme ,
13+ Toolbar
1414} from '@mui/material' ;
1515import clsx from 'clsx' ;
1616import React , { useEffect , useRef , useState } from 'react' ;
@@ -26,6 +26,8 @@ import { IChatCommandRegistry } from '../../registers';
2626import { IAttachment } from '../../types' ;
2727
2828const INPUT_BOX_CLASS = 'jp-chat-input-container' ;
29+ const INPUT_TEXTFIELD_CLASS = 'jp-chat-input-textfield' ;
30+ const INPUT_COMPONENT_CLASS = 'jp-chat-input-component' ;
2931const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar' ;
3032
3133export function ChatInput ( props : ChatInput . IProps ) : JSX . Element {
@@ -185,28 +187,29 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
185187 < Autocomplete
186188 { ...chatCommands . autocompleteProps }
187189 // ensure the autocomplete popup always renders on top
188- componentsProps = { {
190+ slotProps = { {
189191 popper : {
190192 placement : 'top'
191193 } ,
192194 paper : {
193195 sx : {
194196 border : '1px solid lightgray'
195197 }
196- }
197- } }
198- ListboxProps = { {
199- sx : {
200- '& .MuiAutocomplete-option' : {
201- padding : 2
198+ } ,
199+ listbox : {
200+ sx : {
201+ '& .MuiAutocomplete-option' : {
202+ padding : 2
203+ }
202204 }
203205 }
204206 } }
205207 renderInput = { params => (
206208 < TextField
207209 { ...params }
208210 fullWidth
209- variant = "outlined"
211+ variant = "filled"
212+ className = { INPUT_TEXTFIELD_CLASS }
210213 multiline
211214 onKeyDown = { handleKeyDown }
212215 placeholder = "Start chatting"
@@ -215,23 +218,13 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
215218 onSelect = { ( ) =>
216219 ( model . cursorIndex = inputRef . current ?. selectionStart ?? null )
217220 }
218- InputProps = { {
219- ...params . InputProps ,
220- endAdornment : (
221- < InputAdornment position = "end" className = { INPUT_TOOLBAR_CLASS } >
222- { toolbarElements . map ( item => (
223- < item . element
224- model = { model }
225- chatCommandRegistry = { props . chatCommandRegistry }
226- />
227- ) ) }
228- </ InputAdornment >
229- )
230- } }
231- FormHelperTextProps = { {
232- sx : { marginLeft : 'auto' , marginRight : 0 }
221+ slotProps = { {
222+ input : {
223+ ...params . InputProps ,
224+ className : INPUT_COMPONENT_CLASS
225+ }
233226 } }
234- helperText = { input . length > 2 ? helperText : ' ' }
227+ label = { input . length > 2 ? helperText : ' ' }
235228 />
236229 ) }
237230 inputValue = { input }
@@ -248,6 +241,14 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
248241 }
249242 } }
250243 />
244+ < Toolbar className = { INPUT_TOOLBAR_CLASS } >
245+ { toolbarElements . map ( item => (
246+ < item . element
247+ model = { model }
248+ chatCommandRegistry = { props . chatCommandRegistry }
249+ />
250+ ) ) }
251+ </ Toolbar >
251252 </ Box >
252253 ) ;
253254}
0 commit comments