Update app.py

app.py

@@ -365,38 +365,43 @@ css = '''
 #gallery .grid-wrap{height: 10vh}
 #lora_list{background: var(--block-background-fill);padding: 0 1em .3em; font-size: 90%}
 .card_internal{display: flex;height: 100px;margin-top: .5em}
-.card_internal img{margin-right: 1em}
-.styler{--form-gap-width: 0px !important}
-#progress{height:30px}
-#progress .generating{display:none}
-.progress-container {width: 100%;height: 30px;background-color: #f0f0f0;border-radius: 15px;overflow: hidden;margin-bottom: 20px}
-.progress-bar {height: 100%;background-color: #4f46e5;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
+.card_internal img{margin-right: 1em}.styler{--form-gap-width: 0px !important}
+#progress{height:30px}#progress .generating{display:none}.progress-container {width: 100%;height: 30px;background-color: #f0f0f0;border-radius: 15px;overflow: hidden;margin-bottom: 20px}.progress-bar {height: 100%;background-color: #4f46e5;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
+
+/* Add this to make the chatbot bigger */
+.chat-container {
+    height: 600px; /* Adjust as needed */
+    overflow-y: scroll; /* Add scrollbar if content overflows */
+}
 '''
+
 with gr.Blocks(theme="CultriX/gradio-theme", css=css, delete_cache=(60, 60)) as demo:
     gr.Markdown("## Multi-Agent Task Solver with Human-in-the-Loop")
-    
+
     with gr.Row():
-        # Chatbot displays conversation messages.
-        chat_output = gr.Chatbot(label="Conversation", type="messages")
+        # Wrap the Chatbot in a div with the class "chat-container"
+        with gr.Column(): # Add a column for better layout
+            with gr.Box(elem_classes="chat-container"):  # Use gr.Box for styling
+                chat_output = gr.Chatbot(label="Conversation", type="messages")
+
     # Hidden state to store the plain-text log.
     log_state = gr.State(value="")
-    
+
     with gr.Row():
         with gr.Column(scale=8):
             message_input = gr.Textbox(label="Enter your task", placeholder="Type your task here...", lines=3)
         with gr.Column(scale=2):
             api_key_input = gr.Textbox(label="API Key (optional)", type="password", placeholder="Leave blank to use env variable")
-    
-    send_button = gr.Button("Send")
-    
+        send_button = gr.Button("Send")
+
     # The multi_agent_chat function now outputs two values: one for the chat and one for the log.
     send_button.click(fn=multi_agent_chat, inputs=[message_input, api_key_input], outputs=[chat_output, log_state])
-    
+
     with gr.Row():
         download_button = gr.Button("Download Log")
         download_file = gr.File(label="Download your log file")
-    
-    download_button.click(fn=download_log, inputs=log_state, outputs=download_file)
+        download_button.click(fn=download_log, inputs=log_state, outputs=download_file)
 
 if __name__ == "__main__":
     demo.launch(share=True)
+