[🐛 BUG] Chat control should automatically scroll down when a new message is added

[AlexandreSajus]

What went wrong? 🤔

This is needed in a patch version of the 4.0 version.

This issue comes from a customer who needs to solve this in December.

When a new message is added in the chat control, the chat should (or should at least have the option to) automatically scroll down to see the new message, even if the chat is not scrolled all the way down.

Steps to Reproduce Issue

Using the following:

from taipy.gui import Gui
import taipy.gui.builder as tgb

messages = []


def evaluate(state, var_name: str, payload: dict):
    state.messages.append(
        [10, "The MP5 is pretty fun to shoot actually, virtually no recoil", "Robot"]
    )
    state.messages = state.messages


with tgb.Page() as page_home:
    tgb.chat(
        messages="{messages}",
        on_action=evaluate,
        height="80vh",
    )

gui = Gui(page=page_home)
gui.run()

Type a bunch of messages until there is no more space left in the chat control. The newer messages won't be visible unless you scroll.

Browsers

Chrome

OS

Windows

Version of Taipy

4.0.1

Acceptance Criteria

• A unit test reproducing the bug is added.
• Any new code is covered by a unit tested.
• Check code coverage is at least 90%.
• The bug reporter validated the fix.
• Related issue(s) in taipy-doc are created for documentation and Release Notes are updated.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[Akashns007]

Hi, I'd like to contribute to solving this issue. I plan to implement an automatic scroll-to-bottom functionality for the chat control when a new message is added, with an optional setting to toggle this behavior. I'll make sure to consider the current implementation and test the changes thoroughly. Please let me know if there are any specific requirements or considerations I should keep in mind. Thanks!

[FlorianJacta]

I have assigned it to you!

This should automatically scroll down only if you are already scrolled down at the bottom

[FabienLelaquais]

@Akashns007. This issue suddenly appears to be a priority.
We are assigning someone from the team on this as well, and let the faster win.

Here are the requirements:

• When the chat receives its first messages, they should stack until the area becomes scrollable.
  Then the bottom area should remain visible, as if the user was scrolling down manually.
• If the user wants to go back in the history, this auto-scroll should stop, to let the user read what needs to be.
  When new messages come in, instead of scrolling, a little overlay indicator shows that new incoming message are to be read (this is already implemented). Clicking this indicator scrolls all down the way to reveal the new messages.
• If the chat area is scrolled entirely to the bottom (whether when it first becomes scrollable, or when the user manually scrolls all the way down, or if the 'new incoming messages' notification was clicked), then auto-scroll is re-enabled.

I see no point of providing a new property to handle this, which should be the normal behavior.

[FlorianJacta]

Fixed in 4.0.2