Skip to content

Chatbot does not autoscroll inside of a Tab #3603

Description

@abidlabs

Looks like there's an issue with the Chatbot not autoscrolling when it is inside of a Tab:

Recording 2023-03-24 at 07 33 57

The code here is:

import gradio as gr

def add_text(history, text):
    history = history + [(text, None)]
    return history, ""

def add_file(history, file):
    history = history + [((file.name,), None)]
    return history

def bot(history):
    response = "**That's cool!**"
    history[-1][1] = response
    return history

with gr.Blocks() as demo:
    with gr.Tabs():
        with gr.Tab("def"):
            gr.Textbox()
        with gr.Tab("ab"):
            chatbot = gr.Chatbot([], elem_id="chatbot").style(height=750)
            
            with gr.Row():
                with gr.Column(scale=0.85):
                    txt = gr.Textbox(
                        show_label=False,
                        placeholder="Enter text and press enter, or upload an image",
                    ).style(container=False)
                with gr.Column(scale=0.15, min_width=0):
                    btn = gr.UploadButton("📁", file_types=["image", "video", "audio"])
                    
            txt.submit(add_text, [chatbot, txt], [chatbot, txt]).then(
                bot, chatbot, chatbot
            )
            btn.upload(add_file, [chatbot, btn], [chatbot]).then(
                bot, chatbot, chatbot
    )

if __name__ == "__main__":
    demo.launch()

Originally posted by @abidlabs in https://github.com/gradio-app/gradio/discussions/3596#discussioncomment-5418748

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions