Upload app.py

app.py

@@ -20,7 +20,7 @@ def chatbot_response(message):
     response = query_engine.query(message)
     return str(response)
 
-# Custom CSS for purple button styling
+# Custom CSS for purple button styling with JavaScript
 custom_css = """
 /* Target all possible Gradio button selectors */
 button,
@@ -94,36 +94,6 @@ button.primary {
     color: white !important;
 }
 
-/* NUCLEAR OPTION: Override ALL buttons in the examples section */
-div:has(> *:contains("Examples")) ~ * button,
-div:has(> *:contains("Examples")) button,
-*[class*="example"] button,
-*[class*="Example"] button {
-    background: #374151 !important;
-    color: white !important;
-    border: 1px solid #4B5563 !important;
-    border-radius: 8px !important;
-}
-
-div:has(> *:contains("Examples")) ~ * button:hover,
-div:has(> *:contains("Examples")) button:hover,
-*[class*="example"] button:hover,
-*[class*="Example"] button:hover {
-    background: #4B5563 !important;
-    color: white !important;
-}
-
-/* Universal override for anything that might be an example */
-button:nth-of-type(n+3) {
-    background: #374151 !important;
-    color: white !important;
-    border: 1px solid #4B5563 !important;
-}
-
-button:nth-of-type(n+3):hover {
-    background: #4B5563 !important;
-}
-
 /* Clear/secondary buttons */
 .secondary,
 .btn-secondary,
@@ -138,6 +108,68 @@ button:nth-of-type(n+3):hover {
 .gr-button-secondary:hover {
     background: #F3F4F6 !important;
 }
+
+/* JavaScript to style example buttons */
+<script>
+function styleExampleButtons() {
+    // Wait for the page to fully load
+    setTimeout(function() {
+        console.log('Attempting to style example buttons...');
+        
+        // Find all buttons on the page
+        const allButtons = document.querySelectorAll('button');
+        console.log('Found', allButtons.length, 'buttons');
+        
+        // Skip the first two buttons (Clear and Submit) and style the rest
+        allButtons.forEach((btn, index) => {
+            if (index >= 2) {
+                console.log('Styling button', index, ':', btn.textContent);
+                btn.style.setProperty('background', '#374151', 'important');
+                btn.style.setProperty('color', 'white', 'important');
+                btn.style.setProperty('border', '1px solid #4B5563', 'important');
+                btn.style.setProperty('border-radius', '8px', 'important');
+                
+                // Add hover effect
+                btn.addEventListener('mouseenter', function() {
+                    this.style.setProperty('background', '#4B5563', 'important');
+                });
+                btn.addEventListener('mouseleave', function() {
+                    this.style.setProperty('background', '#374151', 'important');
+                });
+            }
+        });
+        
+        // Alternative approach: look for buttons containing example text
+        const exampleTexts = [
+            'Provide a summary of Donald',
+            'Has Donald worked with Python',
+            'Tell me something interesting',
+            'What technical skills',
+            'How did Donald build'
+        ];
+        
+        exampleTexts.forEach(text => {
+            const buttons = Array.from(allButtons).filter(btn => 
+                btn.textContent.includes(text) || 
+                btn.innerText.includes(text)
+            );
+            buttons.forEach(btn => {
+                console.log('Found example button:', btn.textContent);
+                btn.style.setProperty('background', '#374151', 'important');
+                btn.style.setProperty('color', 'white', 'important');
+                btn.style.setProperty('border', '1px solid #4B5563', 'important');
+            });
+        });
+    }, 2000); // Wait 2 seconds for Gradio to fully render
+}
+
+// Run immediately and also when DOM content loads
+styleExampleButtons();
+document.addEventListener('DOMContentLoaded', styleExampleButtons);
+
+// Also run when the window loads (backup)
+window.addEventListener('load', styleExampleButtons);
+</script>
 """
 
 iface = gr.Interface(