Update app.py

app.py

@@ -105,24 +105,20 @@ def predict(user_input, history, access_granted):
 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; }
-    #component-0 { height: 95%; }
-    #component-3 { height: calc(95% - 250px); }
+    #component-0 { height: 100%; }
+    #component-3 { height: calc(100% - 250px); }
     footer { display: none !important; }
     #submit-btn { margin-top: 10px; }
     #code_submit {
         height: 50px !important;
         font-size: 1.2em !important;
     }
-    #code_message { 
-        font-size: 1.4em !important; 
-        font-weight: bold !important; 
-        padding: 15px !important; 
-        margin-top: 15px !important;
-        border-radius: 5px !important;
-        text-align: center !important;
-    }
-    #code_message.error { color: #d32f2f !important; background-color: #ffcdd2 !important; }
-    #code_message.success { color: #388e3c !important; background-color: #c8e6c9 !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;
@@ -137,24 +133,26 @@ with gr.Blocks(theme, css="""
     access_granted = gr.State(False)
 
     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.Markdown(elem_id="code_message")
+        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")
 
     with gr.Tab("Chat"):
-        chatbot = gr.Chatbot(label="Conversation")
+        chatbot = gr.Chatbot(label="Conversation", height=340)  # Adjust the height as needed
         msg = gr.Textbox(
             label=f"Chat with {coach_name_short}", 
             placeholder="Type your message here... (MAX: 1000 characters)",
+            autofocus=True,
             interactive=False
         )
         submit = gr.Button("Submit Message", interactive=False)
 
     def submit_code(code, access_granted):
         success, _, _, message = verify_code(code, access_granted)
-        css_class = "success" if success else "error"
-        return success, gr.update(interactive=success), gr.update(interactive=success), gr.update(value=message, elem_classes=[css_class])
+        color = "#388e3c" if success else "#d32f2f"  # Green for success, Red for error
+        return success, gr.update(interactive=success), gr.update(interactive=success), gr.update(value=message, color=color)
 
     code_input.submit(submit_code, inputs=[code_input, access_granted], outputs=[access_granted, msg, submit, code_message])
     code_submit.click(submit_code, inputs=[code_input, access_granted], outputs=[access_granted, msg, submit, code_message])