Gradio 中如何让 Chatbot 自动滚动

在 Gradio 中， Chatbot 是对话组件，接受 history 参数，在目前版本中 （gradio==4.44.0），不支持自动滚动，用起来很不方便，该功能在社区中已经提出了，目前该功能还没有发布。本文将通过自定义 JS 来实现滚动事件。

Gradio 中支持自定义 JS，通过 JS 添加滚动事件，启动时间传入 JS 代码，JS代码如下

js = """
function createScrollListener() {const target = document.querySelector('.chatbot .bubble-wrap');// Function to scroll to the bottomfunction scrollToBottom() {if (target) {target.scrollTop = target.scrollHeight;}}// Function to scroll if neededfunction scrollToBottomIfNeeded() {if (target) {target.scrollTop = target.scrollHeight;}}// Mutation Observer with Debouncelet timeout;function debounce(func, delay) {clearTimeout(timeout);timeout = setTimeout(func, delay);}if (target) {const observer = new MutationObserver((mutations) => {debounce(scrollToBottomIfNeeded, 100);});observer.observe(target, { childList: true, subtree: true });// Initial scroll to bottomscrollToBottom();// Scroll on window resizewindow.addEventListener('resize', scrollToBottom);}console.log(target)
}
"""
with gr.Blocks(js=js) as demo:chatbot = gr.Chatbot(elem_classes="chatbot")msg = gr.Textbox()clear = gr.Button("Clear")

总结

Gradio 中使用自定义 JS 是通过原生的 JS 进行元素选择，并在元素绑定事件来进行事件控制的。写起来还是比较费劲，如果是比较复杂的效果还是通过自定义组件来实现，希望社区提供这个功能。