Improve Chat Input with Auto-Sizing Textarea #12785
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
useAutosizeTextarea to encapsulate the logic.
ngxson
reviewed
Apr 7, 2025
Comment on lines
-297
to
-298
| // 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 |
There was a problem hiding this comment.
We should preserve these comments (and you should also add comments to explain your code if necessary)
|
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
approved these changes
Apr 8, 2025
tastelikefeet
added a commit
to tastelikefeet/llama.cpp
that referenced
this pull request
Apr 10, 2025
* 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR proposes an enhancement to the chat input
textareain 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:
textareanow automatically adjusts its height vertically to fit the content as the user types or pastes text.max-h-48/12remby default in the current implementation) is applied.textarea, preventing the input area from growing indefinitely.resize: none).Implementation Details:
useAutosizeTextarea, has been created to encapsulate the logic.refto directly interact with thetextareaDOM element.onInputevent, the hook calculates thescrollHeightof thetextareaand updates its inlineheightstyle accordingly, respecting themax-heightset via CSS.Benefits:
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