Improve Chat Input with Auto-Sizing Textarea by characharm · Pull Request #12785 · ggml-org/llama.cpp

characharm · 2025-04-06T22:58:58Z

This PR proposes an enhancement to the chat input textarea in the web UI.

Problem:

Currently, the chat input textarea has a fixed initial height and relies on manual resizing via the handle in the bottom-right corner. This manual resizing can sometimes feel unintuitive, especially as the sticky-positioned input area visually expands upwards when resized from the bottom. Furthermore, composing longer, multi-line messages often requires frequent manual resizing or scrolling within a constrained areea.

Proposed Solution:

This change replaces the manual resizing behavior with an auto-sizing mechanism:

The textarea now automatically adjusts its height vertically to fit the content as the user types or pastes text.
A maximum height constraint (max-h-48 / 12rem by default in the current implementation) is applied.
Once the content exceeds this maximum height, a vertical scrollbar appears inside the textarea, preventing the input area from growing indefinitely.
The native browser resize handle has been disabled (resize: none).

Implementation Details:

A new custom React hook, useAutosizeTextarea, has been created to encapsulate the logic.
This hook utilizes a ref to directly interact with the textarea DOM element.
On the onInput event, the hook calculates the scrollHeight of the textarea and updates its inline height style accordingly, respecting the max-height set via CSS.
This implementation preserves the existing optimization of avoiding component re-renders on every keystroke

Benefits:

Provides a more fluid and intuitive user experience for writing multi-line messages.
Eliminates the need for manual resizing for typical message lengths.
Offers predictable behavior by limiting excessive growth with max-height.

Note:

Please consider this pull request more as a suggestion
master:

Screen.Recording.2025-04-07.030314.mp4

pr:

Screen.Recording.2025-04-07.030551.mp4

useAutosizeTextarea to encapsulate the logic.

ngxson

The overall idea is good, just need a bit of clean up. Also, don't forget to run npm run build

ngxson · 2025-04-07T12:50:51Z

-// This is a workaround to prevent the textarea from re-rendering when the inner content changes
-// See https://github.com/ggml-org/llama.cpp/pull/12299


We should preserve these comments (and you should also add comments to explain your code if necessary)

ngxson · 2025-04-07T12:53:46Z

Also, I'm thinking if we should disable this on mobile view. Otherwise, it will take up a large space on small screen

Replaces the manual textarea resizing with an automatic height adjustment based on content. - `useChatTextarea` hook to manage textarea state and auto-sizing logic via refs, preserving the optimization - Textarea now grows vertically up to a maximum height (`lg:max-h-48`) on large screens (lg breakpoint and up). - Disables auto-sizing and enables manual vertical resizing (`resize-vertical`) on smaller screens for better mobile usability. - Aligns the "Send" button to the bottom of the textarea (`items-end`) for consistent positioning during resize.

-refactor: replace OptimizedTextareaValue with AutosizeTextareaApi in VSCode context hook

refactor: AutosizeTextareaApi -> chatTextareaApi

ngxson

Thanks for adding comments, it makes the code much easier to understand!

* master: (123 commits) cuda : add f32 to bf16 copy op (ggml-org#12806) llava: improve clip_ctx destructor to not memleak load_image_size (ggml-org#12834) llama : fix FA when KV cache is not used (i.e. embeddings) (ggml-org#12825) server : fix thread.join() on exit (ggml-org#12831) llava: add more helper functions to check projector types in clip context (ggml-org#12824) arg : Including limits file on AIX (ggml-org#12822) server : webui : Improve Chat Input with Auto-Sizing Textarea (ggml-org#12785) Revert "sycl:remove redundant memcopy in function ggml_backend_sycl_buffer_set_tensor" (ggml-org#12812) gguf-py : support lazy tensor splitting (ggml-org#12809) llama : Support llama 4 text-only (ggml-org#12791) opencl: better identify Adreno GPU (ggml-org#12760) hellaswag: display estimated score confidence interval (ggml-org#12797) cuda : fix HIP and MUSA BF16 (#0) sync : ggml ggml : simplify Arm fp16 CPU logic (ggml/1177) CUDA: don't convert BF16 weights to FP32 (ggml/1174) cpu: move all the operators into a separate c++ file (except mul_mat) (ggml/1167) sycl: remove redundant memcopy in function ggml_backend_sycl_buffer_set_tensor (ggml-org#12734) ci : no curl on ggml-ci (ggml-org#12796) cmake : enable curl by default (ggml-org#12761) ... # Conflicts: # common/arg.cpp # common/common.cpp # common/common.h

…rg#12785) * Update ChatScreen.tsx * useAutosizeTextarea.ts useAutosizeTextarea to encapsulate the logic. * Implement responsive auto-sizing chat textarea Replaces the manual textarea resizing with an automatic height adjustment based on content. - `useChatTextarea` hook to manage textarea state and auto-sizing logic via refs, preserving the optimization - Textarea now grows vertically up to a maximum height (`lg:max-h-48`) on large screens (lg breakpoint and up). - Disables auto-sizing and enables manual vertical resizing (`resize-vertical`) on smaller screens for better mobile usability. - Aligns the "Send" button to the bottom of the textarea (`items-end`) for consistent positioning during resize. * -update compressed index.html.gz after npm run build -refactor: replace OptimizedTextareaValue with AutosizeTextareaApi in VSCode context hook * chore: normalize line endings to LF refactor: AutosizeTextareaApi -> chatTextareaApi * refactor: Rename interface to PascalCase --------- Co-authored-by: Xuan Son Nguyen <son@huggingface.co>

woof-dog · 2025-04-24T15:59:47Z

This change unfortunately results in catastrophic and devastating huge lag when you paste a giant string into the textarea. Full CPU, every keystroke takes 2 seconds or longer.

…rg#12785) * Update ChatScreen.tsx * useAutosizeTextarea.ts useAutosizeTextarea to encapsulate the logic. * Implement responsive auto-sizing chat textarea Replaces the manual textarea resizing with an automatic height adjustment based on content. - `useChatTextarea` hook to manage textarea state and auto-sizing logic via refs, preserving the optimization - Textarea now grows vertically up to a maximum height (`lg:max-h-48`) on large screens (lg breakpoint and up). - Disables auto-sizing and enables manual vertical resizing (`resize-vertical`) on smaller screens for better mobile usability. - Aligns the "Send" button to the bottom of the textarea (`items-end`) for consistent positioning during resize. * -update compressed index.html.gz after npm run build -refactor: replace OptimizedTextareaValue with AutosizeTextareaApi in VSCode context hook * chore: normalize line endings to LF refactor: AutosizeTextareaApi -> chatTextareaApi * refactor: Rename interface to PascalCase --------- Co-authored-by: Xuan Son Nguyen <son@huggingface.co>

ngxson · 2025-05-07T13:41:33Z

This change unfortunately results in catastrophic and devastating huge lag when you paste a giant string into the textarea. Full CPU, every keystroke takes 2 seconds or longer.

~~the adjustTextareaHeight introduced by this PR should be debounced instead of calling each time the value get updated, please open a new issue so I can remember to fix it later~~

ngxson · 2025-05-08T13:03:27Z

@woof-dog the laggy behavior should be addressed in 163bdca

…rg#12785) * Update ChatScreen.tsx * useAutosizeTextarea.ts useAutosizeTextarea to encapsulate the logic. * Implement responsive auto-sizing chat textarea Replaces the manual textarea resizing with an automatic height adjustment based on content. - `useChatTextarea` hook to manage textarea state and auto-sizing logic via refs, preserving the optimization - Textarea now grows vertically up to a maximum height (`lg:max-h-48`) on large screens (lg breakpoint and up). - Disables auto-sizing and enables manual vertical resizing (`resize-vertical`) on smaller screens for better mobile usability. - Aligns the "Send" button to the bottom of the textarea (`items-end`) for consistent positioning during resize. * -update compressed index.html.gz after npm run build -refactor: replace OptimizedTextareaValue with AutosizeTextareaApi in VSCode context hook * chore: normalize line endings to LF refactor: AutosizeTextareaApi -> chatTextareaApi * refactor: Rename interface to PascalCase --------- Co-authored-by: Xuan Son Nguyen <son@huggingface.co>

characharm added 2 commits April 7, 2025 03:35

Update ChatScreen.tsx

98dc4fc

useAutosizeTextarea.ts

b1ebaf5

useAutosizeTextarea to encapsulate the logic.

characharm requested a review from ngxson as a code owner April 6, 2025 22:58

github-actions Bot added examples server labels Apr 6, 2025

ngxson reviewed Apr 7, 2025

View reviewed changes

characharm added 4 commits April 7, 2025 23:42

-update compressed index.html.gz after npm run build

0ebbb6a

-refactor: replace OptimizedTextareaValue with AutosizeTextareaApi in VSCode context hook

chore: normalize line endings to LF

fe2cb05

refactor: AutosizeTextareaApi -> chatTextareaApi

refactor: Rename interface to PascalCase

3fb1941

characharm requested a review from ngxson April 8, 2025 07:09

ngxson approved these changes Apr 8, 2025

View reviewed changes

Merge branch 'master' into useAutosizeTextarea

0d41469

ngxson merged commit 8ca6e1c into ggml-org:master Apr 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improve Chat Input with Auto-Sizing Textarea#12785

Improve Chat Input with Auto-Sizing Textarea#12785
ngxson merged 7 commits into
ggml-org:masterfrom
characharm:useAutosizeTextarea

characharm commented Apr 6, 2025

Uh oh!

ngxson left a comment

Uh oh!

ngxson Apr 7, 2025

Uh oh!

Uh oh!

ngxson commented Apr 7, 2025

Uh oh!

ngxson left a comment

Uh oh!

woof-dog commented Apr 24, 2025

Uh oh!

ngxson commented May 7, 2025 •

edited

Loading

Uh oh!

ngxson commented May 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		// This is a workaround to prevent the textarea from re-rendering when the inner content changes
		// See https://github.com/ggml-org/llama.cpp/pull/12299

Uh oh!

Conversation

characharm commented Apr 6, 2025

Uh oh!

ngxson left a comment

Choose a reason for hiding this comment

Uh oh!

ngxson Apr 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ngxson commented Apr 7, 2025

Uh oh!

ngxson left a comment

Choose a reason for hiding this comment

Uh oh!

woof-dog commented Apr 24, 2025

Uh oh!

ngxson commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ngxson commented May 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ngxson commented May 7, 2025 •

edited

Loading