updated UI code ✅✅

mediSync/app.py

@@ -555,19 +555,12 @@ def create_interface():
         )
 
         with gr.Row():
-            import urllib.parse
-            try:
-                url_params = {}
-                # Use window.location.search if available, fallback to gradio's get_current_url
-                # This logic is for server-side, so we will use a placeholder and rely on JS for actual population
-                default_appointment_id = ""
-            except:
-                default_appointment_id = ""
+            # The value will be set by JS, so leave it empty here
             appointment_id_input = gr.Textbox(
                 label="Appointment ID",
                 placeholder="Enter your appointment ID here...",
                 info="This will be automatically populated if you came from the doctors page",
-                value=default_appointment_id,
+                value="",
                 elem_id="appointment_id_input"
             )
 
@@ -759,32 +752,71 @@ def create_interface():
             outputs=[end_consultation_status]
         )
 
-        # JavaScript for appointment ID auto-population (reference template logic)
+        # JavaScript for appointment ID auto-population (improved for Gradio 4.x and all browsers)
         gr.HTML("""
         <script>
+        // Try to robustly set the appointment ID textbox value, supporting Gradio 3.x/4.x and shadow DOM
+        function setAppointmentIdValue(val) {
+            // Try by ID (Gradio 3.x and some 4.x)
+            var input = document.getElementById('appointment_id_input');
+            if (input) {
+                input.value = val;
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+                return true;
+            }
+            // Try Gradio 4.x shadow DOM
+            var gradioApp = document.querySelector('gradio-app') || document.querySelector('body');
+            if (gradioApp) {
+                // Find textbox by label
+                var labels = gradioApp.querySelectorAll('label');
+                for (var i = 0; i < labels.length; i++) {
+                    if (labels[i].textContent.trim().toLowerCase().includes('appointment id')) {
+                        // Find the input in the same parent
+                        var parent = labels[i].parentElement;
+                        var textbox = parent.querySelector('input[type="text"], textarea');
+                        if (textbox) {
+                            textbox.value = val;
+                            textbox.dispatchEvent(new Event('input', { bubbles: true }));
+                            return true;
+                        }
+                    }
+                }
+            }
+            // Try all textboxes for fallback
+            var allInputs = document.querySelectorAll('input[type="text"], textarea');
+            for (var i = 0; i < allInputs.length; i++) {
+                if (allInputs[i].placeholder && allInputs[i].placeholder.toLowerCase().includes('appointment id')) {
+                    allInputs[i].value = val;
+                    allInputs[i].dispatchEvent(new Event('input', { bubbles: true }));
+                    return true;
+                }
+            }
+            return false;
+        }
+
         function getUrlParameter(name) {
             name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
             var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
             var results = regex.exec(window.location.search);
             return results === null ? '' : decodeURIComponent(results[1].replace(/\\+/g, ' '));
         }
-        function populateAppointmentId() {
+
+        function tryPopulateAppointmentId() {
             var appointmentId = getUrlParameter('appointment_id');
             if (appointmentId) {
-                var input = document.getElementById('appointment_id_input');
-                if (input) {
-                    input.value = appointmentId;
-                    var event = new Event('input', { bubbles: true });
-                    input.dispatchEvent(event);
-                }
+                setAppointmentIdValue(appointmentId);
             }
         }
+
+        // Try on DOMContentLoaded, on load, and after a delay to ensure Gradio is ready
         document.addEventListener('DOMContentLoaded', function() {
-            setTimeout(populateAppointmentId, 800);
+            setTimeout(tryPopulateAppointmentId, 400);
         });
         window.addEventListener('load', function() {
-            setTimeout(populateAppointmentId, 1200);
+            setTimeout(tryPopulateAppointmentId, 1000);
         });
+        // Also try again after 2 seconds in case Gradio loads slowly
+        setTimeout(tryPopulateAppointmentId, 2000);
         </script>
         """)