Polish UI with compact design and better UX

Interface improvements:
- Add clear label for AI model dropdown
- Compact quick queries with smaller text and truncation
- Reduce header vertical space with smaller logo and fonts
- Hide image filename text when displaying charts
- Improve sidebar button styling with custom CSS

UX enhancements:
- Reduce UI jumping by limiting auto-scroll to processing only
- Better spacing throughout with reduced margins
- Cleaner visual hierarchy with appropriate font sizes
- More professional and academic appearance

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

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

app.py

@@ -201,6 +201,23 @@ st.markdown("""
     background-color: #0b5ed7;
 }
 
+/* Sidebar button styling */
+[data-testid="stSidebar"] .stButton > button {
+    background-color: #f8fafc;
+    color: #475569;
+    border: 1px solid #e2e8f0;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: normal;
+    text-align: left;
+}
+
+[data-testid="stSidebar"] .stButton > button:hover {
+    background-color: #e0f2fe;
+    border-color: #0ea5e9;
+    color: #0c4a6e;
+}
+
 /* Code container styling */
 .code-container {
     margin: 1rem 0;
@@ -469,16 +486,17 @@ header_col1, header_col2 = st.columns([2, 1])
 
 with header_col1:
     st.markdown("""
-    <div style='display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;'>
-        <div style='width: 32px; height: 32px; background: #3b82f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;'>V</div>
+    <div style='display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;'>
+        <div style='width: 28px; height: 28px; background: #3b82f6; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 0.875rem;'>V</div>
         <div>
-            <h1 style='margin: 0; font-size: 1.25rem; font-weight: 600; color: #1e293b;'>VayuChat</h1>
-            <p style='margin: 0; font-size: 0.875rem; color: #64748b;'>Environmental Data Analysis</p>
+            <h1 style='margin: 0; font-size: 1.125rem; font-weight: 600; color: #1e293b;'>VayuChat</h1>
+            <p style='margin: 0; font-size: 0.75rem; color: #64748b;'>Environmental Data Analysis</p>
         </div>
     </div>
     """, unsafe_allow_html=True)
 
 with header_col2:
+    st.markdown("<p style='margin: 0 0 0.25rem 0; font-size: 0.75rem; color: #6b7280;'>AI Model:</p>", unsafe_allow_html=True)
     model_name = st.selectbox(
         "Model:",
         available_models,
@@ -487,7 +505,7 @@ with header_col2:
         label_visibility="collapsed"
     )
 
-st.markdown("<hr style='margin: 1rem 0; border: none; border-top: 1px solid #e2e8f0;'>", unsafe_allow_html=True)
+st.markdown("<hr style='margin: 0.5rem 0; border: none; border-top: 1px solid #e2e8f0;'>", unsafe_allow_html=True)
 
 
 # Load data with error handling
@@ -528,15 +546,14 @@ with st.sidebar:
             "Plot monthly average PM2.5 for 2023"
         ]
     
-    # Quick query buttons in sidebar
+    # Quick query buttons in sidebar - compact style
     selected_prompt = None
     for i, question in enumerate(questions[:6]):  # Show only first 6
-        if st.button(
-            question, 
-            key=f"sidebar_prompt_{i}",
-            help=question,
-            use_container_width=True
-        ):
+        # Truncate long questions for display
+        display_text = question[:35] + "..." if len(question) > 35 else question
+        
+        # Use columns to make buttons more compact
+        if st.button(display_text, key=f"sidebar_prompt_{i}", help=question, use_container_width=True):
             selected_prompt = question
     
     st.markdown("---")
@@ -606,15 +623,19 @@ def show_custom_response(response):
         </div>
         """, unsafe_allow_html=True)
     elif role == "assistant":
+        # Check if content is an image filename - don't display the filename text
+        is_image_path = isinstance(content, str) and any(ext in content for ext in ['.png', '.jpg', '.jpeg'])
+        
         # Assistant message with left alignment - reduced margins
-        st.markdown(f"""
-        <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)}
+        if not is_image_path:
+            st.markdown(f"""
+            <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)}
+                </div>
             </div>
-        </div>
-        """, unsafe_allow_html=True)
+            """, unsafe_allow_html=True)
         
         # Show generated code with Streamlit expander
         if response.get("gen_code"):
@@ -792,8 +813,8 @@ if st.session_state.get("processing"):
     
     st.rerun()
 
-# Auto-scroll to bottom
-if st.session_state.responses:
+# Minimal auto-scroll - only scroll when processing
+if st.session_state.get("processing"):
     st.markdown("<script>scrollToBottom();</script>", unsafe_allow_html=True)
 
 # Beautiful sidebar footer