Update app.py

app.py

@@ -202,8 +202,9 @@ def show_emergency_resources():
 # Get available times for selected therapist
 def get_available_times(therapist):
     if therapist and therapist in therapists:
-        return therapists[therapist]["times"], f"Available times for {therapist} loaded."
-    return ["Select time"], "Please select a therapist."
+        times = therapists[therapist]["times"]
+        return times, f"Available times for {therapist}: {', '.join(times)}"
+    return [], "Please select a therapist."
 
 # Create MIME message for Gmail API
 def create_message(to, subject, message_text):
@@ -286,8 +287,8 @@ Mental Health Chatbot
 def schedule_appointment(therapist, time_slot, date, user_email, state):
     if not therapist or therapist not in therapists:
         return "Please select a therapist.", state
-    if not time_slot or time_slot == "Select time":
-        return "Please select a time slot.", state
+    if not time_slot:
+        return "Please select a time.", state
     if not date:
         return "Please select a date.", state
     if not user_email or not re.match(r"[^@]+@[^@]+\.[^@]+", user_email):
@@ -303,7 +304,7 @@ def schedule_appointment(therapist, time_slot, date, user_email, state):
     try:
         appointment_time = datetime.strptime(time_slot, "%H:%M").strftime("%H:%M")
         if appointment_time not in therapists[therapist]["times"]:
-            return f"Time {appointment_time} is not available for {therapist}.", state
+            return f"Time {appointment_time} is not available for {therapist}. Please choose from available times.", state
     except ValueError:
         return "Invalid time format (use HH:MM).", state
     
@@ -324,28 +325,40 @@ 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
+# Minimal CSS for date and time pickers
 custom_css = """
-#date-picker input[type="date"] {
+#date-picker input[type="date"], #time-picker input[type="time"] {
     width: 100%;
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    padding: 10px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
     font-size: 16px;
+    box-sizing: border-box;
 }
-#date-picker input[type="date"]::-webkit-calendar-picker-indicator {
+#date-picker input[type="date"]:focus, #time-picker input[type="time"]:focus {
+    border-color: #3b82f6;
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+#date-picker input[type="date"]::-webkit-calendar-picker-indicator,
+#time-picker input[type="time"]::-webkit-calendar-picker-indicator {
     cursor: pointer;
 }
 """
 
-# JavaScript for date picker
+# JavaScript for date and time pickers
 custom_js = """
 document.addEventListener('DOMContentLoaded', function() {
     const dateInput = document.querySelector('#date-picker input');
+    const timeInput = document.querySelector('#time-picker input');
     if (dateInput) {
         dateInput.type = 'date';
         dateInput.placeholder = 'YYYY-MM-DD';
     }
+    if (timeInput) {
+        timeInput.type = 'time';
+        timeInput.placeholder = 'HH:MM';
+    }
 });
 """
 
@@ -415,12 +428,12 @@ with gr.Blocks(title="Mental Health Support Chatbot", css=custom_css, js=custom_
             placeholder="Select date (YYYY-MM-DD)",
             elem_id="date-picker"
         )
-        time_slot = gr.Dropdown(
-            choices=["Select time"],
+        time_slot = gr.Textbox(
             label="Appointment Time",
-            interactive=True,
-            allow_custom_value=True
+            placeholder="Select time (HH:MM)",
+            elem_id="time-picker"
         )
+        time_suggestions = gr.Markdown("Select a therapist to see available times.")
         user_email = gr.Textbox(
             label="Your Email",
             placeholder="e.g., [email protected]"
@@ -466,7 +479,7 @@ with gr.Blocks(title="Mental Health Support Chatbot", css=custom_css, js=custom_
     therapist.change(
         fn=get_available_times,
         inputs=therapist,
-        outputs=[time_slot, schedule_output]
+        outputs=[time_slot, time_suggestions]
     )
     schedule_btn.click(
         fn=schedule_appointment,