CodeForPhilly / CodeForPhilly/balancer-main

Dynamic Input Box Resizing in Chatbot Interface

Open
#180 0 comments 0 reactions 1 assignee Claimed by @sahilds1 View on GitHub
Dominant language
TypeScript
Stars
21
Forks
19
PR merge metrics
No merged PRs in 30d

Description

Feature Description:
The chatbot input box should dynamically resize to accommodate multi-line text input when the user presses Shift + Enter. This will improve readability and user experience, especially for longer messages.

Functional Requirements:
Trigger for Resizing:

The input box should increase in height each time the user presses Shift + Enter.
Standard Enter should send the message without changing the input box size.
Dynamic Resizing Behavior:

Each Shift + Enter press should expand the height of the input box by a specified amount (e.g., one additional line or a defined pixel value).
The input box should not exceed a maximum height to prevent excessive growth, maintaining a clear and visually pleasing interface.
Auto-Shrink on Clear Input:

After the message is sent (or input box is cleared), the height should reset to its default size.
Error Handling:

If a user repeatedly presses Shift + Enter beyond the maximum height, no further resizing should occur.

![Image](https://github.com/user-attachments/assets/c822365f-e0ce-44a8-853c-01aa90c87adf)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.