Update PanelInterface.py

PanelInterface.py

@@ -93,34 +93,89 @@ def build_interface(respondent_agents_dict, processor_llm):
             with gr.Column():
                 gr.Markdown(ui_texts["footer_html"])
 
-        modal_script = """
+        # Inject the bios object for the modal JS
+        bios_json = json.dumps(bios_js_object)
+        permitted_topics = ui_texts.get("permitted_topics_html", "")
+        prohibited_topics = ui_texts.get("prohibited_topics_html", "")
+        modal_script = f"""
 <script>
-function showModal(event, id) {
+const bios = {bios_json};
+function showModal(event, name) {{
     event.preventDefault();
-    const bios = %s;
-    const content = bios[id] || "No bio available.";
-
-    const modal = document.createElement("div");
-    modal.id = "custom-modal";
-    modal.style.position = "fixed";
-    modal.style.top = "50%%";
-    modal.style.left = "50%%";
-    modal.style.transform = "translate(-50%%, -50%%)";
-    modal.style.background = "black";
-    modal.style.padding = "20px";
-    modal.style.border = "1px solid #ccc";
-    modal.style.zIndex = 1000;
-
-    modal.innerHTML = `
-        <div style='max-height: 400px; overflow-y: auto;'>${content}</div>
-        <button onclick="document.body.removeChild(document.getElementById('custom-modal'))">Close</button>
-    `;
-
-    document.body.appendChild(modal);
-}
+    const modal = document.getElementById('bioModal');
+    const backdrop = document.getElementById('modalBackdrop');
+    const closeButton = document.getElementById('closeButton');
+    const bioContent = document.getElementById('bioContent');
+    bioContent.innerHTML = bios[name] || 'Bio not found.';
+    modal.style.display = 'block';
+    backdrop.style.display = 'block';
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (prefersDark) {{
+        modal.style.backgroundColor = '#1e1e1e';
+        modal.style.color = '#ffffff';
+        modal.style.border = '1px solid #444';
+        modal.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.8)';
+        closeButton.style.backgroundColor = '#007bff';
+        closeButton.style.color = 'white';
+        backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+    }} else {{
+        modal.style.backgroundColor = '#ffffff';
+        modal.style.color = '#000000';
+        modal.style.border = '1px solid #ccc';
+        modal.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.2)';
+        closeButton.style.backgroundColor = '#007bff';
+        closeButton.style.color = 'white';
+        backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+    }}
+    closeButton.style.marginTop = '10px';
+    closeButton.style.padding = '5px 10px';
+    closeButton.style.border = 'none';
+    closeButton.style.borderRadius = '5px';
+    closeButton.style.cursor = 'pointer';
+}}
+function closeModal() {{
+    document.getElementById('bioModal').style.display = 'none';
+    document.getElementById('modalBackdrop').style.display = 'none';
+}}
+function showTopicsModal(event) {{
+    event.preventDefault();
+    const modal = document.getElementById('topicsModal');
+    const backdrop = document.getElementById('topicsBackdrop');
+    const closeButton = document.getElementById('closeTopicsButton');
+    const topicsContent = document.getElementById('topicsContent');
+    topicsContent.innerHTML = `{permitted_topics}{prohibited_topics}`;
+    modal.style.display = 'block';
+    backdrop.style.display = 'block';
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (prefersDark) {{
+        modal.style.backgroundColor = '#1e1e1e';
+        modal.style.color = '#ffffff';
+        modal.style.border = '1px solid #444';
+        modal.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.8)';
+        closeButton.style.backgroundColor = '#007bff';
+        closeButton.style.color = 'white';
+        backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+    }} else {{
+        modal.style.backgroundColor = '#ffffff';
+        modal.style.color = '#000000';
+        modal.style.border = '1px solid #ccc';
+        modal.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.2)';
+        closeButton.style.backgroundColor = '#007bff';
+        closeButton.style.color = 'white';
+        backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+    }}
+    closeButton.style.marginTop = '10px';
+    closeButton.style.padding = '5px 10px';
+    closeButton.style.border = 'none';
+    closeButton.style.borderRadius = '5px';
+    closeButton.style.cursor = 'pointer';
+}}
+function closeTopicsModal() {{
+    document.getElementById('topicsModal').style.display = 'none';
+    document.getElementById('topicsBackdrop').style.display = 'none';
+}}
 </script>
-""" % json.dumps(bios_js_object)
-
+"""
         gr.HTML(modal_script)
 
     logging.info("Interface build complete.")