Add auto-scroll down to the bottom of the Gradio chat box whenever there's a new LLM response or show down arrow button

[smartdatatech]

• Yes, I have searched to see if a similar issue already exists.

While using the Gradio chat interface I noticed that when I scroll up to see previous LLM responses, and then submit a new question, the latest LLM response is not shown. The chat box does not automatically scroll down to the bottom to show the latest response. It just stays there.

What would be nice enhancement to see (and I think it would be helpful for many users) is that when there's a new answer/response, it should scroll down automatically and show the latest response (bubble). Alternatively, if not auto-scroll, then it should display a down arrow at the bottom center of the chatbox textarea to let the user know there's a new response which when clicked should scroll down to the latest response bubble (similar to ChatGPT interface).

Example Solution (down arrow button indicating there's new response):

[abidlabs]

Related (but not the same): https://github.com/gradio-app/gradio/issues/5785

[revolvedai]

+1 on this, would be great to see the autoscroll functionality added to textbox was also added to chatbot!

[ndespujol]

You can add this javascript with gr.Blocks(js="scrolldown.js") (either as a file in the same folder as the python script or as a text variable in the script)

function Scrolldown() { let targetNode = document.querySelector('[aria-label="chatbot conversation"]'> // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed const callback = (mutationList, observer) => { targetNode.scrollTop = targetNode.scrollHeight; };

// Create an observer instance linked to the callback function const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations observer.observe(targetNode, config); }

[git-hamza]

Any Update on this feature?

@ndespujol your solution works, thanks.

[abidlabs]

It would be great if we could add an autoscroll parameter similar to gr.Textbox and set it to True (since it could be considered a breaking change, would be good to include it in 5.0)

[abidlabs]

Closed via https://github.com/gradio-app/gradio/pull/9582, thanks @whitphx!