Fix UI issues and improve user experience

Bug fixes:
- Fix collapsible code blocks using native Streamlit expander
- Fix image display to show actual images instead of filenames
- Remove persistent "Data loaded successfully!" message

UI improvements:
- Reduce excessive whitespace and margins for tighter layout
- Move Quick Queries to top of sidebar for better accessibility
- Compact message styling with reduced padding
- Cleaner dataset info section with condensed layout

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

app.py

@@ -106,34 +106,24 @@ st.markdown("""
 .user-message {
     background: #3b82f6;
     color: white;
-    padding: 1rem 1.5rem;
+    padding: 0.75rem 1rem;
     border-radius: 12px;
-    margin: 2rem 0;
-    margin-left: auto;
-    margin-right: 0;
     max-width: 70%;
-    display: flex;
-    justify-content: flex-end;
 }
 
 .user-info {
     font-size: 0.875rem;
     opacity: 0.9;
-    margin-bottom: 5px;
+    margin-bottom: 3px;
 }
 
 /* Assistant message styling */
 .assistant-message {
     background: #f1f5f9;
     color: #334155;
-    padding: 1rem 1.5rem;
+    padding: 0.75rem 1rem;
     border-radius: 12px;
-    margin: 2rem 0;
-    margin-left: 0;
-    margin-right: auto;
     max-width: 70%;
-    display: flex;
-    justify-content: flex-start;
 }
 
 .assistant-info {
@@ -503,7 +493,7 @@ st.markdown("<hr style='margin: 1rem 0; border: none; border-top: 1px solid #e2e
 # Load data with error handling
 try:
     df = preprocess_and_load_df(join(self_path, "Data.csv"))
-    st.success("Data loaded successfully!")
+    # Data loaded silently - no success message needed
 except Exception as e:
     st.error(f"Error loading data: {e}")
     st.stop()
@@ -511,43 +501,9 @@ except Exception as e:
 inference_server = "https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.2"
 image_path = "IITGN_Logo.png"
 
-# Clean sidebar
+# Clean sidebar  
 with st.sidebar:
-    # Dataset Info Section
-    st.markdown("### Dataset Info")
-    st.markdown("""
-    <div style='background-color: #f1f5f9; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem;'>
-        <h4 style='margin: 0 0 0.5rem 0; color: #1e293b; font-size: 1rem;'>PM2.5 Air Quality Data</h4>
-        <p style='margin: 0.25rem 0; font-size: 0.875rem;'><strong>Time Range:</strong> Daily measurements</p>
-        <p style='margin: 0.25rem 0; font-size: 0.875rem;'><strong>Locations:</strong> Multiple cities in Gujarat</p>
-        <p style='margin: 0.25rem 0; font-size: 0.875rem;'><strong>Records:</strong> Air quality monitoring data</p>
-        <p style='margin: 0.25rem 0; font-size: 0.875rem;'><strong>Parameters:</strong> PM2.5, PM10, Location data</p>
-    </div>
-    """, unsafe_allow_html=True)
-    
-    # Current Model Info
-    st.markdown("### Current Model")
-    st.markdown(f"**{model_name}**")
-    
-    model_descriptions = {
-        "llama3.1": "Fast and efficient for general queries",
-        "llama3.3": "Most advanced LLaMA model for complex reasoning",
-        "mistral": "Balanced performance and speed",
-        "gemma": "Google's lightweight model",
-        "gemini-pro": "Google's most powerful model",
-        "gpt-oss-20b": "OpenAI's compact open-weight GPT for everyday tasks",
-        "gpt-oss-120b": "OpenAI's massive open-weight GPT for nuanced responses",
-        "deepseek-R1": "DeepSeek's distilled LLaMA model for efficient reasoning",
-        "llama4 maverik": "Meta's LLaMA 4 Maverick — high-performance instruction model",
-        "llama4 scout": "Meta's LLaMA 4 Scout — optimized for adaptive reasoning"
-    }
-    
-    if model_name in model_descriptions:
-        st.caption(model_descriptions[model_name])
-    
-    st.markdown("---")
-    
-    # Quick Queries Section
+    # Quick Queries Section - moved to top
     st.markdown("### Quick Queries")
     
     # Load quick prompts
@@ -585,6 +541,38 @@ with st.sidebar:
     
     st.markdown("---")
     
+    # Dataset Info Section
+    st.markdown("### Dataset Info")
+    st.markdown("""
+    <div style='background-color: #f1f5f9; padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem;'>
+        <h4 style='margin: 0 0 0.25rem 0; color: #1e293b; font-size: 0.9rem;'>PM2.5 Air Quality Data</h4>
+        <p style='margin: 0.125rem 0; font-size: 0.75rem;'><strong>Locations:</strong> Gujarat cities</p>
+        <p style='margin: 0.125rem 0; font-size: 0.75rem;'><strong>Parameters:</strong> PM2.5, PM10</p>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # Current Model Info
+    st.markdown("### Current Model")
+    st.markdown(f"**{model_name}**")
+    
+    model_descriptions = {
+        "llama3.1": "Fast and efficient for general queries",
+        "llama3.3": "Most advanced LLaMA model for complex reasoning",
+        "mistral": "Balanced performance and speed",
+        "gemma": "Google's lightweight model",
+        "gemini-pro": "Google's most powerful model",
+        "gpt-oss-20b": "OpenAI's compact open-weight GPT for everyday tasks",
+        "gpt-oss-120b": "OpenAI's massive open-weight GPT for nuanced responses",
+        "deepseek-R1": "DeepSeek's distilled LLaMA model for efficient reasoning",
+        "llama4 maverik": "Meta's LLaMA 4 Maverick — high-performance instruction model",
+        "llama4 scout": "Meta's LLaMA 4 Scout — optimized for adaptive reasoning"
+    }
+    
+    if model_name in model_descriptions:
+        st.caption(model_descriptions[model_name])
+    
+    st.markdown("---")
+    
     # Clear Chat Button
     if st.button("Clear Chat", use_container_width=True):
         st.session_state.responses = []
@@ -609,18 +597,18 @@ def show_custom_response(response):
     content = response.get("content", "")
     
     if role == "user":
-        # User message with right alignment
+        # User message with right alignment - reduced margins
         st.markdown(f"""
-        <div style='display: flex; justify-content: flex-end; margin: 2rem 0;'>
+        <div style='display: flex; justify-content: flex-end; margin: 1rem 0;'>
             <div class='user-message'>
                 {content}
             </div>
         </div>
         """, unsafe_allow_html=True)
     elif role == "assistant":
-        # Assistant message with left alignment
+        # Assistant message with left alignment - reduced margins
         st.markdown(f"""
-        <div style='display: flex; justify-content: flex-start; margin: 2rem 0;'>
+        <div style='display: flex; justify-content: flex-start; margin: 1rem 0;'>
             <div class='assistant-message'>
                 <div class='assistant-info'>VayuChat</div>
                 {content if isinstance(content, str) else str(content)}
@@ -628,32 +616,28 @@ def show_custom_response(response):
         </div>
         """, unsafe_allow_html=True)
         
-        # Show generated code with collapsible container
+        # Show generated code with Streamlit expander
         if response.get("gen_code"):
-            st.markdown("""
-            <div class='code-container'>
-                <div class='code-header' onclick='toggleCode(this)'>
-                    <div class='code-title'>Generated Python Code</div>
-                    <div class='toggle-text'>Click to expand</div>
-                </div>
-                <div class='code-block' style='display: none;'>
-            """, unsafe_allow_html=True)
-            
-            st.code(response["gen_code"], language="python")
-            
-            st.markdown("</div></div>", unsafe_allow_html=True)
+            with st.expander("📋 View Generated Code", expanded=False):
+                st.code(response["gen_code"], language="python")
         
         # Try to display image if content is a file path
         try:
             if isinstance(content, str) and (content.endswith('.png') or content.endswith('.jpg')):
                 if os.path.exists(content):
-                    # Chart container styling
-                    st.markdown("""
-                    <div style='background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem; margin: 1rem 0;'>
-                    """, unsafe_allow_html=True)
-                    st.image(content)
-                    st.markdown("</div>", unsafe_allow_html=True)
+                    # Display image without showing filename
+                    st.image(content, use_column_width=True)
                     return {"is_image": True}
+            # Also handle case where content shows filename but we want to show image
+            elif isinstance(content, str) and any(ext in content for ext in ['.png', '.jpg']):
+                # Extract potential filename from content
+                import re
+                filename_match = re.search(r'([^/\\]+\.(?:png|jpg|jpeg))', content)
+                if filename_match:
+                    filename = filename_match.group(1)
+                    if os.path.exists(filename):
+                        st.image(filename, use_column_width=True)
+                        return {"is_image": True}
         except:
             pass