Chat input box styling is broken with long messages

[krassowski]

Description

When pasting long text into the chat window

1. The send button disappears from the view
2. Some odd grey artifact is shown obstructing the view

Reproduce

Paste a long text into the input box, for example paste the following 20 times:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

Snapshot on the situation using element picker from the Chrome dev tools:

Expected behavior

• the send button is positioned correctly irrespective of height
• a max height is set on the chat input
• there is no styling artifacts when long text is inserted

Context

• Browser and version: Chrome 125
• JupyterLab version: 4.2.0
• Extension: 2.1.6

[krassowski]

Of note, this artifact only occurs in Chromium-based browsers, but not in Firefox. In either Chrome or Firefox the send button becomes inaccessible.

[krassowski]

So this appears to be because of the implementation detail of TextField from mui = when using multiline - it force-sets the height which confuses the flex layout (ref: https://mui.com/material-ui/react-text-field/)

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

Lines 279 to 293 in 5183bc9

	<TextField
	{...params}
	fullWidth
	variant="outlined"
	multiline
	placeholder="Ask Jupyternaut"
	onKeyDown={handleKeyDown}
	InputProps={{
	...params.InputProps,
	endAdornment: (
	<InputAdornment position="end">
	<SendButton {...sendButtonProps} />
	</InputAdornment>
	)
	}}

The simplest solution is to set maxRows on the TextField. Alternatively, setting overflow: scroll; max-height: 50% on the entire chat input section would help but it would not solve the problem of invisible button. The issue with maxRows solution is that we cannot easily set it to be depend on resolution. Still, doing a custom solution that would fight with the mui would likely not be worth it.