Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

aichat: input is growable #21124

Merged
merged 2 commits into from
Dec 27, 2023
Merged

aichat: input is growable #21124

merged 2 commits into from
Dec 27, 2023

Conversation

nullhook
Copy link
Contributor

Resolves brave/brave-browser#32062

Submitter Checklist:

  • I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
  • There is a ticket for my issue
  • Used Github auto-closing keywords in the PR description above
  • Wrote a good PR/commit description
  • Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
  • Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
  • Checked the PR locally:
    • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
    • npm run lint, npm run presubmit wiki, npm run gn_check, npm run tslint
  • Ran git rebase master (if needed)

Reviewer Checklist:

  • A security review is not needed, or a link to one is included in the PR description
  • New files have MPL-2.0 license header
  • Adequate test coverage exists to prevent regressions
  • Major classes, functions and non-trivial code blocks are well-commented
  • Changes in component dependencies are properly reflected in gn
  • Code follows the style guide
  • Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

@github-actions github-actions bot added the CI/storybook-url Deploy storybook and provide a unique URL for each build label Nov 27, 2023
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook mentioned this pull request Dec 6, 2023
Closed
3 tasks
@nullhook nullhook force-pushed the ai-chat-growable-input branch 2 times, most recently from 27ed147 to 33e73e5 Compare December 7, 2023 16:50
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

petemill
petemill requested changes Dec 14, 2023
View reviewed changes
components/ai_chat/resources/page/components/input_box/index.tsx Outdated
@@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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}>

Copy link
Contributor Author

@nullhook nullhook Dec 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

til data-* attributes are exposed directly in react dom, changed!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any attribute is

components/ai_chat/resources/page/components/input_box/index.tsx Outdated Show resolved Hide resolved
components/ai_chat/resources/page/components/input_box/style.module.scss Outdated
Comment on lines 31 to 37
padding: 10px var(--leo-spacing-xl);
resize: none;
background-color: transparent;
border: 0;

resize: none;
overflow: hidden;
grid-area: 1 / 1 / 2 / 2;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed this with combined selectors

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook merged commit b6b4131 into master Dec 27, 2023
17 checks passed
@nullhook nullhook deleted the ai-chat-growable-input branch December 27, 2023 14:22
@github-actions github-actions bot added this to the 1.63.x - Nightly milestone Dec 27, 2023
nullhook added a commit that referenced this pull request Jan 18, 2024
@nullhook
aichat: input is growable (#21124)
f36c8f7
@nullhook nullhook mentioned this pull request Jan 18, 2024
Merged
kjozwiak pushed a commit that referenced this pull request Jan 19, 2024
@nullhook
[Uplift 1.62.x] AI chat issues cr121 1.62.x (#21629)
7b1aeb7 
* 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)
@kjozwiak kjozwiak mentioned this pull request Jan 20, 2024
Merged
24 tasks
kjozwiak pushed a commit that referenced this pull request Jan 20, 2024
@mkarolin @atuchin-m
@goodov @simonhong @nullhook
Upgrade from Chromium 120 to Chromium 121 (1.62.x). (#21593)
777a6f4 
* 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 <[email protected]>
Co-authored-by: Aleksey Khoroshilov <[email protected]>
Co-authored-by: Simon Hong <[email protected]>
Co-authored-by: taher <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@petemill petemill petemill approved these changes

Assignees

@nullhook nullhook

Labels
CI/storybook-url Deploy storybook and provide a unique URL for each build
Projects
None yet
Milestone
1.63.x - Release
Development

Successfully merging this pull request may close these issues.

Leo input field should start as one line height and expand, allowing multiple lines
3 participants
@nullhook @brave-builds @petemill