Issue #15 - [FEATURE] Add Character Count to Message Input

[rogelio-cmj]

Current Behavior

The message input field in the MessageInput component allows users to type freely without any indication of the message length. Users only see word count and token estimates after the message is sent and appears in the chat history.

Reproduction Steps:

1. Launch the Chatbox application
2. Navigate to any chat session
3. Click in the message input field at the bottom
4. Begin typing a message of any length
5. Observe: No character count is displayed while typing

Expected Behavior

As users type in the message input field, a live character count should be displayed near the input area, updating in real-time as they type or delete characters.

Acceptance Criteria:

• A character count indicator appears below or near the message input field
• The count updates in real-time as the user types or deletes text
• The count displays the current number of characters (e.g., "450 characters")
• The counter has subtle styling that's informative but not distracting
• The character count resets to 0 after a message is successfully sent

Steps To Test

1. Start the application and open any chat session
2. Locate the message input field at the bottom of the screen
3. Verify you see a character count indicator showing "0 characters" or similar
4. Type a short message (e.g., "Hello world")
5. Verify the character count updates to show "11 characters"
6. Delete some text using backspace
7. Verify the count decreases appropriately
8. Send the message by pressing Enter or clicking SEND
9. Verify the character count resets to 0 for the next message

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx