aichat: input is growable #21124
aichat: input is growable #21124
Conversation
github-actions
bot
added
the
CI/storybook-url
|
A Storybook has been deployed to preview UI for the latest push |
|
A Storybook has been deployed to preview UI for the latest push |
|
A Storybook has been deployed to preview UI for the latest push |
nullhook
force-pushed
the
ai-chat-growable-input
branch
2 times, most recently
from
27ed147 to
33e73e5
Compare
|
A Storybook has been deployed to preview UI for the latest push |
nullhook
force-pushed
the
ai-chat-growable-input
branch
from
33e73e5 to
5e80625
Compare
| @@ -24,7 +25,9 @@ function InputBox () { | |||
| const isCharLimitApproaching = inputText.length >= CHAR_LIMIT_THRESHOLD | |||
|
|
|||
| const onInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { | |||
| const parentNode = e.target.parentNode as HTMLDivElement | |||
There was a problem hiding this comment.
This doesn't fire when the text is changed as a result of JS, i.e. calling setInputText. The obvious bug this is causing at the moment is that hitting submit doesn't reset the input size. If the message is 4 lines long, the input box remains 4 lines high until the next message starts to be typed.
How about just handling it in a useEffect? In fact, why do we even need to do this manually? Can't we just use react to set the data attribute value?
<div className={styles.growWrap} data-replicated-value={inputText}>There was a problem hiding this comment.
til data-* attributes are exposed directly in react dom, changed!
components/ai_chat/resources/page/components/input_box/index.tsx
Outdated
Show resolved
Hide resolved
| padding: 10px var(--leo-spacing-xl); | ||
| resize: none; | ||
| background-color: transparent; | ||
| border: 0; | ||
|
|
||
| resize: none; | ||
| overflow: hidden; | ||
| grid-area: 1 / 1 / 2 / 2; |
There was a problem hiding this comment.
should we be more explicit about applying styles to both .textarea and .growWrap::after so that we definitely apply any size-manipulating properties to both?
There was a problem hiding this comment.
fixed this with combined selectors
|
A Storybook has been deployed to preview UI for the latest push |
* Merge pull request #21134 from brave/cr121 Upgrade from Chromium 120 to Chromium 121. * Remove the assert for patch_ffmpeg.py (#21184) * Merge pull request #21539 from brave/ffmpeg-dynamic-alloc Use dynamic allocation for ffmpeg fft tables on Windows. * Merge pull request #21585 from brave/issues/35318 Remove dynamic allocation of ffmpeg ff_tx tables. * Disables a flaky upstream browser test. * Merge pull request #21584 from brave/fix_new_tab_button_plus_misaligned Fixed new tab button's plus icon is mis-aligned with horizontal tab * Merge pull request #21600 from brave/121.0.6167.75_master Upgrade from Chromium 121.0.6167.57 to Chromium 121.0.6167.75. * Merge pull request #21628 from brave/maxk-disable-reading-mode Hides `Open in Reading Mode` context menu item. * [Uplift 1.62.x] AI chat issues cr121 1.62.x (#21629) * aichat: input is growable (#21124) * aichat: scroll is interruptable (#21235) * aichat: model maker text shouldnt look like a link (#21220) * aichat: code formatting (#21342) * make claude output formatted code (#21599) --------- Co-authored-by: Mikhail <matuchin@brave.com> Co-authored-by: Aleksey Khoroshilov <5928869+goodov@users.noreply.github.com> Co-authored-by: Simon Hong <shong@brave.com> Co-authored-by: taher <8665427+nullhook@users.noreply.github.com>
Resolves brave/brave-browser#32062
Submitter Checklist:
QA/YesorQA/No;release-notes/includeorrelease-notes/exclude;OS/...) to the associated issuenpm run test -- brave_browser_tests,npm run test -- brave_unit_testswikinpm run lint,npm run presubmitwiki,npm run gn_check,npm run tslintgit rebase master(if needed)Reviewer Checklist:
gnAfter-merge Checklist:
changes has landed on
Test Plan: