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 bottom
    function scrollToBottom() {
        if (target) {
            target.scrollTop = target.scrollHeight;
        }
    }

    // Function to scroll if needed
    function scrollToBottomIfNeeded() {
        if (target) {
            target.scrollTop = target.scrollHeight;
        }
    }

    // Mutation Observer with Debounce
    let 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 bottom
        scrollToBottom();

        // Scroll on window resize
        window.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 进行元素选择，并在元素绑定事件来进行事件控制的。写起来还是比较费劲，如果是比较复杂的效果还是通过自定义组件来实现，希望社区提供这个功能。