Make System prompt input area bigger to show the place holder text

[srirambv]

Description

Make System prompt input area bigger to show the place holder text

Steps to reproduce

1. Open Leo settings
2. Click on Add model
3. Scroll down to System prompt
4. Input filed has a wall of placeholder text and is not easy to read it when you need to scroll down

Actual result

Expected result

maybe something like

Reproduces how often

Easily reproduced

Brave version (brave://version info)

Brave	1.74.15 Chromium: 131.0.6778.85 (Official Build) beta (64-bit)
Revision	d1293587128488865fa61e9fa277dd54aa2270b0
OS	Windows 11 Version 23H2 (Build 22631.4460)

Channel information

• release (stable)
• beta
• nightly

Reproducibility

• with Brave Shields disabled
• with Brave Rewards disabled
• in the latest version of Chrome

Miscellaneous information

cc: @jonathansampson @mattmcalister

[aguscruiz]

Additionally, @jonathansampson would it be possible to change the text fields/areas to Nala components?

https://nala.bravesoftware.com/?path=/docs/components-input--docs

[jonathansampson]

Additionally, @jonathansampson would it be possible to change the text fields/areas to Nala components?

https://nala.bravesoftware.com/?path=/docs/components-input--docs

Definitely can give that a look. Should it be merged with this issue, or split off into its own?

[aguscruiz]

Up to you, I'm fine either way. Thank you!

[jonathansampson]

@aguscruiz Just submitted brave/leo#924 to introduce support for multiline/textarea components. If that can land, it will open us up to using it in this context.

[jonathansampson]

@srirambv Do you think it is necessary to make the input field tall enough to show the entire system prompt? Or would it be sufficient if the field could scroll, enabling the user to view the entire system prompt. I lean more towards scrolling, since we don't know how tall the user's display is, and the system prompt is likely to cause scrolling on smaller displays (e.g., mobile screens). If we size the input to the prompt height, we might wind up making the input control taller than the screen itself.

The changes I made via brave/leo#925 introduce support for minRows and maxRows, enabling the input field to grow between a range of heights depending on the value. I suspect this would be a good middle-ground, preventing the field from growing too large, without requiring it to be too short either. What are your thoughts? Or, you can defer judgement until I submit a PR with screenshots/demonstration of the new behavior 🙂

[srirambv]

Personally not fan of scroll bars but brave/leo#925 seems like a good solution.

[srirambv]

Verification passed on

Brave	1.76.63 Chromium: 133.0.6943.126 (Official Build) beta (64-bit)
Revision	7e068b8b804a4279c955d6751b5df2f70b5d851f
OS	Windows 11 Version 24H2 (Build 26100.2894)

• Verified steps from brave/brave-core#27197
• Verified BYOM configuration screen now uses Nala components instead of CR components