updated code UI ✅✅

mediSync/app.py

@@ -727,65 +727,89 @@ def create_interface():
             outputs=[end_consultation_status]
         )
 
-        # JavaScript for appointment ID auto-population (as in working_hugging_face_code.py)
+        # --- FIXED: Improved JavaScript for appointment ID auto-population ---
+        # This script will robustly set the value of the Gradio textbox, even in Gradio 4.x shadow DOM.
         gr.HTML("""
         <script>
-        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 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;
+        (function() {
+            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, ' '));
             }
-            // 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 }));
+
+            function setAppointmentIdValue(val) {
+                // Try by element 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 }));
+                    input.dispatchEvent(new Event('change', { bubbles: true }));
+                    return true;
+                }
+                // Try Gradio 4.x shadow DOM
+                var gradioApp = document.querySelector('gradio-app');
+                if (gradioApp && gradioApp.shadowRoot) {
+                    // Try to find textbox by label text
+                    var labels = gradioApp.shadowRoot.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 }));
+                                textbox.dispatchEvent(new Event('change', { bubbles: true }));
+                                return true;
+                            }
+                        }
+                    }
+                    // Fallback: try all textboxes in shadowRoot
+                    var allInputs = gradioApp.shadowRoot.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 }));
+                            allInputs[i].dispatchEvent(new Event('change', { bubbles: true }));
                             return true;
                         }
                     }
                 }
+                // Try all textboxes for fallback (outside shadow DOM)
+                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 }));
+                        allInputs[i].dispatchEvent(new Event('change', { bubbles: true }));
+                        return true;
+                    }
+                }
+                return false;
             }
-            // 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;
+
+            function tryPopulateAppointmentId() {
+                var appointmentId = getUrlParameter('appointment_id');
+                if (appointmentId) {
+                    setAppointmentIdValue(appointmentId);
                 }
             }
-            return false;
-        }
-        function tryPopulateAppointmentId() {
-            var appointmentId = getUrlParameter('appointment_id');
-            if (appointmentId) {
-                setAppointmentIdValue(appointmentId);
+
+            // Try multiple times and on different events for robustness
+            document.addEventListener('DOMContentLoaded', function() {
+                setTimeout(tryPopulateAppointmentId, 200);
+                setTimeout(tryPopulateAppointmentId, 800);
+            });
+            window.addEventListener('load', function() {
+                setTimeout(tryPopulateAppointmentId, 1200);
+            });
+            // Also try periodically for 3 seconds
+            for (let t = 0; t <= 3000; t += 400) {
+                setTimeout(tryPopulateAppointmentId, t);
             }
-        }
-        document.addEventListener('DOMContentLoaded', function() {
-            setTimeout(tryPopulateAppointmentId, 400);
-        });
-        window.addEventListener('load', function() {
-            setTimeout(tryPopulateAppointmentId, 1000);
-        });
-        setTimeout(tryPopulateAppointmentId, 2000);
+        })();
         </script>
         """)