Dynamic Expanding Input Area for Long Messages #162

New issue

Closed

opened 2025-12-27 18:25:31 +00:00 by rwachters · 0 comments

rwachters commented

2025-12-27 18:25:31 +00:00

(Migrated from github.com)

Feature Request

Currently the message input area has a maximum of 5 visible lines, making it difficult to enter long messages. This feature will allow the input area to dynamically expand into the scrollable message list area when users enter more than 5 lines of text.

Design

Automatic expansion: When user types more than 4 newlines (5+ lines), the input area animates from its fixed bottom position into the scrollable MessageList area
Manual toggle: A button in the action row allows users to manually expand/collapse the input area, overriding automatic behavior
New action row: Send/Stop button moves to a new action row below the TextField (in both modes), along with the expand/collapse toggle button

Implementation Plan

Steps

Add isInputExpanded state using rememberSaveable and manualExpandToggle state in ChatArea.SuccessStateDisplay, with derived logic combining newline count (inputContent.count { it == '\n' } >= 4) and manual toggle.
Restructure InputArea to have TextField alone in first row, then add new action row below with expand/collapse toggle button (left) and Send/Stop button (right-aligned), accepting isExpanded and onToggleExpansion parameters.
Update TextField in InputArea to remove maxLines constraint when isExpanded == true, adjust shape/padding for cleaner look without adjacent button.
Modify MessageList LazyColumn to add InputArea as last item when isInputExpanded == true with AnimatedVisibility, auto-scrolling to keep it visible while typing.
Update ChatArea.SuccessStateDisplay to wrap bottom InputArea in AnimatedVisibility that shows only when !isInputExpanded, passing expansion state and callbacks.

Technical Details

State management: Pure Compose solution using rememberSaveable, no ViewModel changes needed
Line counting: Based on newline characters (\n) for simplicity
Animation: AnimatedVisibility with expand/shrink animations
Auto-scroll: Keep expanded input visible while typing using LazyListState

Considerations

Auto-scroll should happen immediately on each keystroke in expanded mode to ensure input stays visible
Use minimal spacing (4-8dp) between TextField and action row to keep them visually grouped
Use KeyboardArrowUp/KeyboardArrowDown icons for expand/collapse button (most intuitive)

## Feature Request Currently the message input area has a maximum of 5 visible lines, making it difficult to enter long messages. This feature will allow the input area to dynamically expand into the scrollable message list area when users enter more than 5 lines of text. ## Design - **Automatic expansion**: When user types more than 4 newlines (5+ lines), the input area animates from its fixed bottom position into the scrollable `MessageList` area - **Manual toggle**: A button in the action row allows users to manually expand/collapse the input area, overriding automatic behavior - **New action row**: Send/Stop button moves to a new action row below the TextField (in both modes), along with the expand/collapse toggle button ## Implementation Plan ### Steps 1. Add `isInputExpanded` state using `rememberSaveable` and `manualExpandToggle` state in `ChatArea.SuccessStateDisplay`, with derived logic combining newline count (`inputContent.count { it == '\n' } >= 4`) and manual toggle. 2. Restructure `InputArea` to have `TextField` alone in first row, then add new action row below with expand/collapse toggle button (left) and Send/Stop button (right-aligned), accepting `isExpanded` and `onToggleExpansion` parameters. 3. Update `TextField` in `InputArea` to remove `maxLines` constraint when `isExpanded == true`, adjust shape/padding for cleaner look without adjacent button. 4. Modify `MessageList` `LazyColumn` to add `InputArea` as last item when `isInputExpanded == true` with `AnimatedVisibility`, auto-scrolling to keep it visible while typing. 5. Update `ChatArea.SuccessStateDisplay` to wrap bottom `InputArea` in `AnimatedVisibility` that shows only when `!isInputExpanded`, passing expansion state and callbacks. ## Technical Details - **State management**: Pure Compose solution using `rememberSaveable`, no ViewModel changes needed - **Line counting**: Based on newline characters (`\n`) for simplicity - **Animation**: AnimatedVisibility with expand/shrink animations - **Auto-scroll**: Keep expanded input visible while typing using LazyListState ## Considerations 1. Auto-scroll should happen immediately on each keystroke in expanded mode to ensure input stays visible 2. Use minimal spacing (4-8dp) between TextField and action row to keep them visually grouped 3. Use `KeyboardArrowUp`/`KeyboardArrowDown` icons for expand/collapse button (most intuitive)