Update app.py

app.py

@@ -14,7 +14,12 @@ def generate_response(model_name, message, chat_history):
     return "", chat_history
 
 # Create Gradio UI
-with gr.Blocks() as demo:
+with gr.Blocks(
+    css=".contain { display: flex !important; flex-direction: column !important; }"
+    "#component-0, #component-3, #component-10, #component-8  { height: 100% !important; }"
+    "#chatbot { flex-grow: 1 !important; overflow: auto !important;}"
+    "#col { height: calc(100vh - 112px - 16px) !important; }"
+) as demo:
     gr.Markdown("# GPT4All Chatbot")
     with gr.Row():
         with gr.Column(scale=1):
@@ -30,8 +35,8 @@ with gr.Blocks() as demo:
             # Link the dropdown with the textbox to update the description based on the selected model
             model_dropdown.change(fn=llm_intro, inputs=model_dropdown, outputs=explanation)
             
-        with gr.Column(scale=4):
-            chatbot = gr.Chatbot(label="Chatroom", value=[(None, "How may I help you today?")])
+        with gr.Column(scale=4, elem_id='col'):
+            chatbot = gr.Chatbot(label="Chatroom", value=[(None, "How may I help you today?")], elem_id="chatbot")
             
             message = gr.Textbox(label="Message")