Improve Chat()'s auto-scroll behavior

[cpsievert]

With this PR:

1. .append_message() and .append_message_stream() now (correctly) scroll to the bottom of the chat window (after the message gets appended/updated).
2. During a .append_message_stream(), the scroll stays at the bottom (unless the user scrolls up).
3. During a resize, the scroll stays at the bottom (unless the user scrolls up).
4. When a scroll is triggered outside of a streaming/resizing context, it's done with a smooth transition.

Testing app

import os

from langchain_openai import ChatOpenAI

from shiny.express import input, ui

# Provide your API key here (or set the environment variable)
llm = ChatOpenAI(
    api_key=os.environ.get("OPENAI_API_KEY"),
)

# Set some Shiny page options
ui.page_opts(
    title="Enter a message; the chat should scroll to bottom",
    fillable=True,
    fillable_mobile=True,
)

ipsum = """
Elit fames nascetur cubilia vulputate donec habitant pulvinar? Tempor
nam laoreet est pellentesque, nostra hendrerit mus id torquent –
molestie habitant turpis dis felis. Praesent laoreet montes neque
volutpat nulla pellentesque non pretium turpis dapibus nibh. Faucibus
interdum nascetur quis: semper facilisis fusce, quis felis? Felis dis
lectus, fringilla integer facilisis, felis ridiculus parturient purus
venenatis. Vivamus euismod.

Adipiscing mauris ullamcorper rutrum justo dis lectus. Felis habitasse
dui habitant neque ornare tempor velit placerat tellus. Sed turpis
laoreet, nunc pellentesque, maecenas commodo quis. Auctor tempor
quisque nisl eget urna quis mollis commodo. Odio ultrices dui fermentum
fermentum id conubia proin nulla habitant penatibus netus vestibulum
etiam urna duis gravida pharetra.

Ipsum inceptos sociis, fusce magna potenti quisque pretium blandit a
volutpat nascetur. Cursus potenti mattis erat phasellus, rhoncus
fermentum placerat, interdum mus tempor eleifend! Aliquet placerat
massa quis phasellus cubilia euismod luctus tempus. Etiam magnis dis
phasellus, potenti netus volutpat.
"""

chat = ui.Chat(
    id="chat",
    messages=[ipsum],
)

chat.ui()

chat.set_user_message("Tell me a story")


@chat.on_user_submit
async def _():

    if input.stream():
        msg = llm.astream(chat.user_input())
        await chat.append_message_stream(msg)
    else:
        msg = await llm.ainvoke(chat.user_input())
        await chat.append_message(msg)


ui.input_switch("stream", "Stream messages", True)

[cpsievert]

This part is a bit tangental to the rest of this PR -- the intention here is to prevent message content from being visible below the input

Before

After

[wch]

I haven't tried these changes yet, but I think that it would be good if the behavior were as follows:

• If it is currently scrolled to the bottom of the chat, then whenever new content is added (even just a single word), it should auto-scroll to the bottom.
• If it is not currently at the bottom of the chat, then do not auto-scroll at all.

[cpsievert]

If it is not currently at the bottom of the chat, then do not auto-scroll at all.

I'm not sure I like this is better than the current behavior. Here are a few points to consider:

1. When first loading a Chat(), if there are already overflowing messages, should submitting an input message not scroll to the bottom? If we don't in that case, it might not be clear to the user that a message has been appended.
2. If other code/controls (other than the chat's input) are allowed to .append_message(), it could also lead to a situation where the user is left wondering what effect their action has made?
3. This behavior deviates from what ChatGPT does.

All that considered, I think I could come around your suggestion, but in that case, we definitely need a better visual cue that messages have been added to the chat.

[wch]

The behavior of ChatGPT is what I had in mind. Notice that when it's scrolled to the bottom, the chat auto-scrolls as text is added. When it's not scrolled to the bottom, then the chat does not auto scroll.

chatgpt-scroll.mp4

[cpsievert]

Ohhhh, I thought you meant that, when a new call to .append_message()/.append_message_stream() happens, then we shouldn't scroll to the bottom (unless we're already at the bottom). That's different than what happens during a stream.

[wch]

Note that there is an issue with the z-index of the clipboard icon in code blocks.