app.py

import gradio as gr
import gradio as gr
import random
import time

CSS ="""
.contain { display: flex; flex-direction: column; }
.gradio-container { height: 100vh !important; }
#component-0 { height: 100%; }
#chat { flex-grow: 1; overflow: auto;}
"""

with gr.Blocks(css = CSS) as demo:
    chatbot = gr.Chatbot(elem_id='chat')
    msg = gr.Textbox()
    clear = gr.ClearButton([msg, chatbot])

    def respond(message, chat_history):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        chat_history.append((message, bot_message))
        time.sleep(2)
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])

demo.launch()