Upload app.py

app.py

@@ -20,64 +20,64 @@ def chatbot_response(message):
     response = query_engine.query(message)
     return str(response)
 
-# Custom CSS for purple button styling - Only target main action buttons
+# Custom CSS for purple button styling - Target Submit button specifically
 custom_css = """
-/* Target only main action buttons (Submit/Clear) - not example buttons */
-button.primary,
-.gradio-button.primary,
+/* Target Submit button with all its classes */
+button.lg.primary.svelte-cmf5ev,
+button.primary.svelte-cmf5ev,
 button.lg.primary,
-button.svelte-cmf5ev.primary {
+button.primary {
     background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
     border: none !important;
     color: white !important;
     border-radius: 8px !important;
 }
 
-button.primary:hover,
-.gradio-button.primary:hover,
+button.lg.primary.svelte-cmf5ev:hover,
+button.primary.svelte-cmf5ev:hover,
 button.lg.primary:hover,
-button.svelte-cmf5ev.primary:hover {
+button.primary:hover {
     background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
     transition: all 0.2s ease !important;
 }
 
-/* Secondary buttons (like Clear) - keep them distinguishable */
-button.secondary,
-.gradio-button.secondary,
+/* Keep Clear button as secondary (gray) */
+button.lg.secondary.svelte-cmf5ev,
+button.secondary.svelte-cmf5ev,
 button.lg.secondary,
-button.svelte-cmf5ev.secondary {
+button.secondary {
     background: #E5E7EB !important;
     color: #374151 !important;
     border: 1px solid #D1D5DB !important;
     border-radius: 8px !important;
 }
 
-button.secondary:hover,
-.gradio-button.secondary:hover,
+button.lg.secondary.svelte-cmf5ev:hover,
+button.secondary.svelte-cmf5ev:hover,
 button.lg.secondary:hover,
-button.svelte-cmf5ev.secondary:hover {
+button.secondary:hover {
     background: #F3F4F6 !important;
     color: #374151 !important;
     transform: translateY(-1px) !important;
 }
 
-/* Example buttons - ensure they have proper contrast */
-.gallery-item,
+/* Example buttons - ensure they stay readable */
+button.gallery-item.svelte-p5q82i,
+.gallery-item.svelte-p5q82i,
 button.gallery-item,
-.examples button,
-.examples .gallery-item {
+.gallery-item {
     background: white !important;
     color: #374151 !important;
     border: 1px solid #D1D5DB !important;
     border-radius: 8px !important;
 }
 
-.gallery-item:hover,
+button.gallery-item.svelte-p5q82i:hover,
+.gallery-item.svelte-p5q82i:hover,
 button.gallery-item:hover,
-.examples button:hover,
-.examples .gallery-item:hover {
+.gallery-item:hover {
     background: #F9FAFB !important;
     color: #374151 !important;
     border-color: #9CA3AF !important;
@@ -85,25 +85,29 @@ button.gallery-item:hover,
 }
 
 /* Force text color in example buttons to be dark */
-.gallery-item,
-.gallery-item *,
+button.gallery-item.svelte-p5q82i,
+button.gallery-item.svelte-p5q82i *,
+.gallery-item.svelte-p5q82i,
+.gallery-item.svelte-p5q82i *,
 button.gallery-item,
 button.gallery-item *,
-.examples button,
-.examples button * {
+.gallery-item,
+.gallery-item * {
     color: #374151 !important;
 }
 
-/* Specific targeting for HF Spaces compatibility */
+/* Additional selectors for HF Spaces compatibility */
 .gradio-container button.primary,
-.gradio-container .primary {
+.gradio-container .primary,
+[data-testid="primary-button"] {
     background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
     border: none !important;
     color: white !important;
 }
 
 .gradio-container button.primary:hover,
-.gradio-container .primary:hover {
+.gradio-container .primary:hover,
+[data-testid="primary-button"]:hover {
     background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
 }
 """