UI v34

app.py

@@ -249,7 +249,7 @@ Answer:"""
             if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>OpenAI</a>.</div>"
             if not state or state == "Select a state..." or "Error" in state:
-                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the dropdown.</div>"
+                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the list.</div>" # Changed dropdown to list
             if not query or not query.strip():
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please enter your question in the text box.</div>"
 
@@ -269,14 +269,15 @@ Answer:"""
         try:
             available_states_list = self.get_states()
             # DEBUG: Print states to console to verify if data is loaded
-            print(f"DEBUG: States loaded for dropdown: {available_states_list}")
+            print(f"DEBUG: States loaded for selection: {available_states_list}")
             # Ensure "Select a state..." is always the first option
-            dropdown_choices = ["Select a state..."] + (available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"])
-            initial_value = dropdown_choices[0] # Set initial value to the prompt
+            # For Radio, we might want a distinct initial "no selection" state
+            radio_choices = ["Select a state..."] + (available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"])
+            initial_value_radio = radio_choices[0] # Set initial value to the prompt
         except Exception as e: # Catch-all for safety
-            print(f"DEBUG: Error loading states for dropdown: {e}")
-            dropdown_choices = ["Error: Critical failure loading states"]
-            initial_value = dropdown_choices[0]
+            print(f"DEBUG: Error loading states for selection: {e}")
+            radio_choices = ["Error: Critical failure loading states"]
+            initial_value_radio = radio_choices[0]
 
 
         # Define example queries, filtering based on available states
@@ -447,15 +448,17 @@ Answer:"""
             transform: translateY(-3px) !important; /* More pronounced lift */
         }
 
-        /* NEW: Class to center content within Markdown blocks */
-        .text-center-markdown {
-            text-align: center !important;
-            width: 100% !important; /* Ensure it takes full width to center its content */
-            display: block !important; /* Make sure it's a block level container */
+        /* NEW: Class for Markdown blocks to center their content */
+        .full-width-center {
+            display: flex !important;
+            justify-content: center !important;
+            align-items: center !important;
+            width: 100% !important;
+            flex-direction: column !important; /* Ensure content stacks vertically if needed */
         }
 
         /* Section titles (h3 inside markdown) */
-        .sub-section-title {
+        .section-title { /* Renamed from sub-section-title for clarity */
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important; /* Slightly larger */
             font-weight: 700 !important; /* Bolder */
@@ -463,9 +466,12 @@ Answer:"""
             margin: 0 0 1.25rem 0 !important; /* More space below title */
             padding-bottom: 0.75rem !important;
             border-bottom: 2px solid var(--border-color) !important; /* Underline effect */
-            display: inline-block !important; /* Allow it to shrink-wrap its content for proper border-bottom width */
+            display: block !important; /* Ensure it's a block-level element for proper width/border */
+            text-align: center !important; /* Ensure the text within the h3 is centered */
+            width: fit-content !important; /* Make it shrink-wrap its content */
+            margin-left: auto !important; /* Auto margins to center block-level element */
+            margin-right: auto !important;
             letter-spacing: -0.01em !important;
-            /* To center this inline-block, its parent (.text-center-markdown) must have text-align: center */
         }
         
         /* Specific styling for the welcome/disclaimer markdown content */
@@ -480,17 +486,11 @@ Answer:"""
         }
 
         /* Improved input styling with clear boundaries and focus */
-        .gradio-textbox, .gradio-dropdown {
+        .gradio-textbox {
             margin-bottom: 0.75rem !important;
         }
-        /* Directly targeting internal Gradio input elements for specific background/border */
         .gradio-textbox textarea,
-        .gradio-textbox input,
-        /* Specific targeting for dropdown elements */
-        .gradio-dropdown > div.primary-wrap > div > input, /* The input field within the dropdown */
-        .gradio-dropdown > div.primary-wrap, /* The main clickable wrapper of the dropdown */
-        .gradio-dropdown > div.scroll-hide /* The actual dropdown options list container */
-        {
+        .gradio-textbox input {
             background-color: var(--background-primary) !important; /* Explicitly set background to primary cream */
             border: 2px solid var(--border-color) !important; /* Clear border */
             border-radius: 8px !important;
@@ -501,39 +501,88 @@ Answer:"""
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important; /* Smooth transitions */
             box-shadow: var(--shadow-sm) !important;
         }
-        /* Focus styles */
+        /* Focus styles for textboxes */
         .gradio-textbox textarea:focus,
-        .gradio-textbox input:focus,
-        .gradio-dropdown > div.primary-wrap > div > input:focus, /* Focus for dropdown input */
-        .gradio-dropdown > div.primary-wrap.focused { /* Focus for dropdown wrapper */
+        .gradio-textbox input:focus {
             outline: none !important;
             border-color: var(--border-focus) !important; /* Distinct border on focus */
             box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important; /* Broader, softer glow on focus */
         }
-        /* Ensure dropdown arrow is styled correctly */
-        .gradio-dropdown .primary-wrap .text-lg { /* Targeting the arrow icon itself */
-            color: var(--text-secondary) !important; /* Use a neutral color for the arrow */
+
+        /* Styling for the radio button group (state selection) */
+        .gradio-radio {
+            /* Adjust padding/margins for overall radio group container */
+            padding: 0 !important; /* Remove any default padding */
+            margin-top: 0.5rem !important; /* Add a little space above */
         }
-        /* Handle active/selected state for dropdown options */
-        .gradio-dropdown .secondary-wrap > div:hover,
-        .gradio-dropdown .secondary-wrap > div.focused,
-        .gradio-dropdown .secondary-wrap > div[aria-selected="true"] {
-            background-color: var(--background-secondary) !important; /* Highlight on hover/focus/selection */
-            color: var(--primary-color) !important; /* Primary color for selected text */
+
+        .gradio-radio .gr-radio-input { /* Targeting the actual radio button inputs (hidden) */
+            display: none !important;
         }
 
+        .gradio-radio label {
+            /* Style the clickable area for each radio option */
+            display: flex !important; /* Use flexbox for internal alignment */
+            justify-content: center !important; /* Center content horizontally */
+            align-items: center !important;
+            padding: 0.75rem 1rem !important;
+            border: 2px solid var(--border-color) !important;
+            border-radius: 8px !important;
+            background-color: var(--background-primary) !important; /* Matches card background */
+            color: var(--text-primary) !important;
+            font-weight: 500 !important;
+            cursor: pointer !important;
+            transition: all 0.2s ease-out !important;
+            box-shadow: var(--shadow-sm) !important;
+            margin: 0.25rem 0 !important; /* Small vertical margin between options */
+            width: 100% !important; /* Ensure options take full width of their column */
+            box-sizing: border-box !important; /* Include padding/border in width */
+        }
 
-        /* Label styling for better readability */
+        /* Style the text/content within the radio label */
+        .gradio-radio label span.text-lg { /* Gradio uses text-lg for the label text by default */
+            font-weight: 600 !important; /* Make text bold */
+            color: var(--text-primary) !important;
+            font-size: 0.98rem !important; /* Match input text size */
+        }
+
+        /* Hover effect for radio options */
+        .gradio-radio label:hover {
+            background-color: var(--background-secondary) !important; /* Slightly darker cream on hover */
+            border-color: var(--primary-color) !important; /* Highlight border with primary color */
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-2px) !important;
+        }
+
+        /* Selected state for radio options */
+        .gradio-radio label.selected { /* Gradio adds a 'selected' class to the label of the chosen option */
+            background-color: var(--primary-color) !important; /* Primary color for selected item */
+            color: white !important; /* White text on selected */
+            border-color: var(--primary-hover) !important;
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-1px) !important;
+        }
+        .gradio-radio label.selected span.text-lg {
+            color: white !important; /* Ensure text is white when selected */
+        }
+        /* Gradio's internal wrapper for radio buttons, ensure it doesn't add unwanted padding */
+        .gradio-radio .gr-form {
+            padding: 0 !important;
+        }
+
+
+        /* Label styling for better readability (for Query, State labels) */
         .gradio-textbox label,
-        .gradio-dropdown label {
+        .gradio-radio label.gr-form-label { /* Target the main label for the radio group */
             font-weight: 600 !important; /* Bolder labels */
             color: var(--text-primary) !important;
             font-size: 1rem !important;
             margin-bottom: 0.6rem !important;
             display: block !important;
+            text-align: left !important; /* Ensure these labels are left-aligned */
         }
-        /* Info text styling below inputs (typically .gr-prose or .gr-form in Gradio) */
-        .gr-prose { 
+        /* Info text styling below inputs (e.g., for API Key) */
+        .gr-prose { /* This class is used by Gradio for info text */
             font-size: 0.9rem !important;
             color: var(--text-secondary) !important;
             margin-top: 0.4rem !important; /* More space for info text */
@@ -765,7 +814,7 @@ Answer:"""
             .app-header-tagline {
                 font-size: 1rem !important;
             }
-            .sub-section-title {
+            .section-title {
                 font-size: 1.4rem !important;
             }
             .input-row {
@@ -794,19 +843,24 @@ Answer:"""
         with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
             # Header Section - uses gr.Group for distinct card-like styling
             with gr.Group(elem_classes="app-header-wrapper"):
-                # Using separate Markdown components for each part of the header
-                # with the new 'text-center-markdown' class for robust centering.
-                gr.Markdown("<span class='app-header-logo'>⚖️</span>", elem_classes="text-center-markdown")
-                gr.Markdown("<h1 class='app-header-title'>Landlord-Tenant Rights Assistant</h1>", elem_classes="text-center-markdown")
-                gr.Markdown("<p class='app-header-tagline'>Empowering You with State-Specific Legal Insights</p>", elem_classes="text-center-markdown")
+                # Using a single Markdown component for header for easier robust centering
+                # The 'full-width-center' class applies flexbox centering to the Markdown content
+                gr.Markdown(
+                    """
+                    <span class='app-header-logo'>⚖️</span>
+                    <h1 class='app-header-title'>Landlord-Tenant Rights Assistant</h1>
+                    <p class='app-header-tagline'>Empowering You with State-Specific Legal Insights</p>
+                    """,
+                    elem_classes="full-width-center"
+                )
 
             # Main Dashboard Container - acts as a column to stack various sections
             with gr.Column(elem_classes="main-dashboard-container"):
 
                 # Introduction and Disclaimer Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Apply 'text-center-markdown' for section titles
-                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>", elem_classes="text-center-markdown")
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>Welcome & Disclaimer</h3>", elem_classes="full-width-center")
                     gr.Markdown(
                         """
                         Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.
@@ -817,8 +871,8 @@ Answer:"""
 
                 # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Apply 'text-center-markdown' for section titles
-                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>", elem_classes="text-center-markdown")
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>OpenAI API Key</h3>", elem_classes="full-width-center")
                     api_key_input = gr.Textbox(
                         label="API Key",
                         type="password", # Hides the input for security
@@ -830,8 +884,8 @@ Answer:"""
 
                 # Query Input and State Selection Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Apply 'text-center-markdown' for section titles
-                    gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>", elem_classes="text-center-markdown")
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>Ask Your Question</h3>", elem_classes="full-width-center")
                     with gr.Row(elem_classes="input-row"): # Row for side-by-side query and state
                         with gr.Column(elem_classes="input-field", scale=3): # Query text area takes more space
                             query_input = gr.Textbox(
@@ -841,13 +895,12 @@ Answer:"""
                                 max_lines=8,
                                 elem_classes=["input-field-group"]
                             )
-                        with gr.Column(elem_classes="input-field", scale=1): # State dropdown takes less space
-                            state_input = gr.Dropdown(
+                        with gr.Column(elem_classes="input-field", scale=1): # State radio buttons take less space
+                            state_input = gr.Radio(
                                 label="Select State",
-                                choices=dropdown_choices,
-                                value=initial_value,
-                                allow_custom_value=False,
-                                elem_classes=["input-field-group"] 
+                                choices=radio_choices,
+                                value=initial_value_radio,
+                                elem_classes=["input-field-group", "gradio-radio-custom"] # Added custom class for specific styling
                             )
                     with gr.Row(elem_classes="button-row"): # Row for action buttons
                         clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
@@ -855,8 +908,8 @@ Answer:"""
 
                 # Output Display Card - Using gr.HTML for better animation control
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Apply 'text-center-markdown' for section titles
-                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>", elem_classes="text-center-markdown")
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>Legal Assistant's Response</h3>", elem_classes="full-width-center")
                     output = gr.HTML( # Changed to gr.HTML to wrap content with animation class
                         value="<div class='placeholder'>The answer will appear here after submitting your query.</div>",
                         elem_classes="output-content-wrapper" # Custom class for output styling
@@ -864,8 +917,8 @@ Answer:"""
 
                 # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    # Apply 'text-center-markdown' for section titles
-                    gr.Markdown("<h3 class='sub-section-title'>Example Questions</h3>", elem_classes="text-center-markdown")
+                    # Apply 'full-width-center' for section titles
+                    gr.Markdown("<h3 class='section-title'>Example Questions</h3>", elem_classes="full-width-center")
                     if example_queries:
                         gr.Examples(
                             examples=example_queries,
@@ -897,7 +950,7 @@ Answer:"""
                 fn=lambda: (
                     "", # Clear API key input
                     "", # Clear query input
-                    initial_value, # Reset state dropdown to default prompt
+                    initial_value_radio, # Reset state radio to default prompt
                     "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>" # Reset output message
                 ),
                 inputs=[],