Update app.py

app.py

@@ -103,20 +103,18 @@ def predict(user_input, history, access_granted):
     return history, ""
 
 with gr.Blocks(theme, css="""
-    #chatbot { flex-grow: 1; height: 460px; overflow-y: auto; }
-    .gradio-container { height: 680px; max-width: 100% !important; padding: 0 !important; }
+    #chatbot { height: calc(100% - 100px) !important; overflow-y: auto; }
+    .gradio-container { height: 100vh; max-width: 100% !important; padding: 0 !important; }
     #component-0 { height: 100%; }
-    #component-3 { height: calc(100% - 250px); }
     footer { display: none !important; }
+    .message-wrap { overflow-y: auto !important; max-height: none !important; }
+    .chat-wrap { max-height: none !important; }
+    .scroll-hide { max-height: none !important; }
     #submit-btn { margin-top: 10px; }
     #code_submit {
         height: 50px !important;
         font-size: 1.2em !important;
     }
-    /* Add these new rules here */
-    .message-wrap { max-height: 300px !important; overflow-y: auto !important; }
-    .chat-wrap { max-height: 400px !important; overflow-y: auto !important; }
-    .gradio-container { height: auto !important; min-height: 0 !important; }
     @media (max-width: 600px) {
         #code_submit {
             height: 60px !important;
@@ -131,30 +129,20 @@ with gr.Blocks(theme, css="""
     access_granted = gr.State(False)
 
     with gr.Tab("Access"):
-        with gr.Tab("Access"):
-            gr.Markdown("Enter the Access Code displayed in the upper-left corner.")
-            code_input = gr.Textbox(label="Access Code", type="text", placeholder="Enter CODE here...")
-            code_submit = gr.Button("Submit Code", elem_id="code_submit")
-            code_message = gr.Label(label="Status", elem_id="code_message")
+        gr.Markdown("Enter the Access Code displayed in the upper-left corner.")
+        code_input = gr.Textbox(label="Access Code", type="text", placeholder="Enter CODE here...")
+        code_submit = gr.Button("Submit Code", elem_id="code_submit")
+        code_message = gr.Label(label="Status", elem_id="code_message")
 
     with gr.Tab("Chat"):
-        chatbot = gr.Chatbot(label="Conversation", height=340)  # Height adjusted as needed
+        chatbot = gr.Chatbot(label="Conversation", elem_id="chatbot", height=340)
         with gr.Row():
             msg = gr.Textbox(
                 label=f"Chat with {coach_name_short}", 
                 placeholder="Type your message here... (MAX: 1000 characters)",
                 interactive=False
             )
-            submit = gr.Button("Submit Message", interactive=False, scale=0.15)
-
-    # Make sure to add this part outside of the with gr.Tab("Chat") block, 
-    # where you define other event handlers:
-    submit.click(
-        predict,
-        inputs=[msg, chatbot, access_granted],
-        outputs=[chatbot, msg],
-        scroll_to_output=True
-    )
+            submit = gr.Button("Submit", interactive=False, scale=0.15)
 
     def submit_code(code, access_granted):
         success, _, _, message = verify_code(code, access_granted)