Current challenges with the chat UI (help wanted)

[oobabooga]

EDIT: made some partial progress on this here #3601

I have been making several improvements to the chat UI, but there are some specific things that have been kind of challenging.

Scroll position while streaming

After each new received token, the chat window scrolls all the way to the bottom. This makes it impossible to scroll up to see previous text while the generation is taking place.

It happens due to

.chat {
    display: flex;
    flex-direction: column-reverse;
}

It would be better to replace this style with javascript code that

1. Scrolls all the way down if the chat box was already scrolled all the way down.
2. Scrolls to the previous scroll position otherwise.

In Python, this is the typical problem that would be solved through some kind of monkey patch that overrides the "chat update" event, but I don't know how to do it in javascript.

Input box with multiple lines

The input box grows downwards instead of upwards when more lines are added, which is awkward:

Before	After

[badgids]

Flex direction perhaps?

In JavaScript you can use the window.scroll() methods. window.scrollBy(), window.scrollByLines(), etc.

[oobabooga]

This works for scrolling all the way down:

element = document.getElementsByClassName("messages")[0].parentNode;
element.scrollTop = el.scrollHeight

But it needs to be automatically executed after every update. Including this code inside <script> tags in the HTML code that is fed to gr.HTML doesn't do anything, as mentioned here.