How to implement two-step update for gradio.Chatbot?

[Jason-cs18]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
My goal is to update question and answer sequentially in gr.Chatbot instead of (question, answer) together. In my application, users hope to see the question immediately and then wait for answer/response. But I cannot find any solutions to implement this.

The following is my code:

def greet2dv1(input, history):
    # 1. update chatbot_cartoon with input 
    answer = llm(prompt=input) # 2. wait for answer
    video = avatar(prompt=answer) # 3. generate avatar video
    history.append((None, answer))    
    return history, video 

with gr.Blocks(title="avatar app", js=js, css=css, theme=gr.themes.Monochrome(radius_size=gr.themes.sizes.radius_md)) as avatar2:
    with gr.Row():
        avatar_cartoon=gr.Video(label="video", scale=0.5, interactive=False, value=f'/home/ecs-user/Avatar-Platfrom/src/web/template_data/avatar_cartoon_template_short.mp4', height=550, autoplay=True)
        with gr.Column():
            chatbot_cartoon=gr.Chatbot(label="chatbot", value=chat_history, height=350)   
            msg_cartoon=gr.Textbox(label="Your Question", value="Nice to meet you.")

    msg_cartoon.submit(greet2dv1, [msg_cartoon, chatbot_cartoon], [chatbot_cartoon, avatar_cartoon])  

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

[Jason-cs18]

@abidlabs

[freddyaboulton]

Hi @Jason-cs18 - the best pattern is to chain the submit event of the textbox with a then to do the chatbot response. See this demo: https://github.com/gradio-app/gradio/blob/main/demo/chatbot_multimodal/run.py