Scroll conversation to the latest response

[IshanRattan]

Discussed in #2075

^{Originally posted by IshanRattan October 17, 2024}
Hi,

The conversation box in my app does not auto scroll to the latest response. Is there a way in which I can run custom js to scroll into view the latest response?

This is how my pages looks like, anything I do with this?

page = """
<|layout|columns=300px 1|
<|part|class_name=sidebar|
# Taipy **Chat**{: .color-primary} # {: .logo-text}
<|New Conversation|button|class_name=fullwidth plain|id=reset_chat_button|on_action=reset_chat|>
### Chat History ### {: .h5 .mt2 .mb-half}
<|{selected_conv}|tree|lov={past_conversations}|class_name=past_prompts_list|multiple|adapter=tree_adapter|on_change=select_conv|>
<|Reset|button|class_name=fullwidth plain mt2|id=reset_app_button|on_action=reset_app|>
|>

<|part|class_name=chat-container|
<|part|class_name=message-list|
<|{conversation}|table|show_all|row_class_name=style_conv|>
|>

<|part|class_name=feedback-container|
<|part|if={show_feedback_buttons}|
<|Like|button|id=like_button|on_action={lambda s, i, p: collect_feedback(s, 1)}|class_name=like_button|active={show_feedback_buttons}|style={('background-color: green;' if show_feedback_buttons else '')}|>
<|Dislike|button|id=dislike_button|on_action={lambda s, i, p: collect_feedback(s, 0)}|class_name=dislike_button|active={show_feedback_buttons}|style={('background-color: red;' if show_feedback_buttons else '')}|>
|>
|>

<|part|class_name=input-container|
<|{current_user_message}|input|label=Write your message here...|on_action=send_message|class_name=fullwidth|change_delay=-1|disabled={is_processing}|>
|>
|>
|>
"""

This is how the messages look like, as you can see the last response is not automatically visible. I have to manually scroll.

[IshanRattan]

Downgraded Taipy to 3.0.0 and it is working now!

Replaced:

<|{conversation}|table|show_all|row_class_name=style_conv|>

With:

<|{conversation}|table|show_all|style=style_conv|selected={selected_row}|rebuild|>

[FlorianJacta]

This selected={selected_row} didn't work in 4.0?

[FlorianJacta]

I will reopen it until you tell me if this is solved in 4.0.

[IshanRattan]

I will recheck this one with 4.0 again

Edit: It is working for 4.0 as well. I was using selected_row={selected_row} by mistake.

[jrobinAV]

@IshanRattan Thank you for checking it again.
Good to hear it is working.