Update app.py

app.py

@@ -324,8 +324,33 @@ def schedule_appointment(therapist, time_slot, date, user_email, state):
         return (f"Appointment booked with {therapist} on {date} at {appointment_time}. "
                 f"Email sending failed: {error_msg}. Please contact {therapist_email}."), state
 
+# Minimal CSS for date picker alignment
+custom_css = """
+#date-picker input[type="date"] {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+}
+#date-picker input[type="date"]::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+}
+"""
+
+# JavaScript for date picker
+custom_js = """
+document.addEventListener('DOMContentLoaded', function() {
+    const dateInput = document.querySelector('#date-picker input');
+    if (dateInput) {
+        dateInput.type = 'date';
+        dateInput.placeholder = 'YYYY-MM-DD';
+    }
+});
+"""
+
 # Gradio Interface
-with gr.Blocks(title="Mental Health Support Chatbot") as demo:
+with gr.Blocks(title="Mental Health Support Chatbot", css=custom_css, js=custom_js) as demo:
     state = gr.State({"chat_history": [], "mood_journal": [], "feedback": [], "appointments": [], "failed_emails": []})
     
     gr.Markdown("## Mental Health Support Chatbot")
@@ -387,7 +412,8 @@ with gr.Blocks(title="Mental Health Support Chatbot") as demo:
         )
         date = gr.Textbox(
             label="Appointment Date",
-            placeholder="Enter date (YYYY-MM-DD)"
+            placeholder="Select date (YYYY-MM-DD)",
+            elem_id="date-picker"
         )
         time_slot = gr.Dropdown(
             choices=["Select time"],