Enhance VayuChat UI with professional improvements

- Add enhanced processing indicators with contextual progress steps
- Implement quick action follow-up buttons after responses
- Improve error message display with better styling and user guidance
- Add response timestamps to assistant messages
- Optimize sidebar scrolling with custom scrollbar styling
- Complete follow-up prompt handling integration

All improvements maintain existing functionality while enhancing UX.

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

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

app.py

@@ -3,8 +3,8 @@ import os
 import json
 import pandas as pd
 import random
-from os.path import join
 from datetime import datetime
+from os.path import join
 from src import (
     preprocess_and_load_df,
     get_from_user,
@@ -62,6 +62,31 @@ st.markdown("""
     padding: 1rem;
 }
 
+/* Optimize sidebar scrolling */
+[data-testid="stSidebar"] > div:first-child {
+    height: 100vh;
+    overflow-y: auto;
+    padding-bottom: 2rem;
+}
+
+[data-testid="stSidebar"]::-webkit-scrollbar {
+    width: 6px;
+}
+
+[data-testid="stSidebar"]::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+[data-testid="stSidebar"]::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+
+[data-testid="stSidebar"]::-webkit-scrollbar-thumb:hover {
+    background: #a1a1a1;
+}
+
 /* Main title */
 .main-title {
     text-align: center;
@@ -676,22 +701,40 @@ def show_custom_response(response):
         import pandas as pd
         is_dataframe = isinstance(content, pd.DataFrame)
         
+        # Check for errors first and display them with special styling
+        error = response.get("error")
+        timestamp = response.get("timestamp", "")
+        timestamp_display = f" • {timestamp}" if timestamp else ""
+        
+        if error:
+            st.markdown(f"""
+            <div style='display: flex; justify-content: flex-start; margin: 1rem 0;'>
+                <div class='assistant-message'>
+                    <div class='assistant-info'>VayuChat{timestamp_display}</div>
+                    <div class='error-message'>
+                        ⚠️ <strong>Error:</strong> {error}
+                        <br><br>
+                        <em>💡 Try rephrasing your question or being more specific about what you'd like to analyze.</em>
+                    </div>
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
         # Assistant message with left alignment - reduced margins
-        if not is_image_path and not is_dataframe:
+        elif not is_image_path and not is_dataframe:
             st.markdown(f"""
             <div style='display: flex; justify-content: flex-start; margin: 1rem 0;'>
                 <div class='assistant-message'>
-                    <div class='assistant-info'>VayuChat</div>
+                    <div class='assistant-info'>VayuChat{timestamp_display}</div>
                     {content if isinstance(content, str) else str(content)}
                 </div>
             </div>
             """, unsafe_allow_html=True)
         elif is_dataframe:
             # Display DataFrame with nice formatting
-            st.markdown("""
+            st.markdown(f"""
             <div style='display: flex; justify-content: flex-start; margin: 1rem 0;'>
                 <div class='assistant-message'>
-                    <div class='assistant-info'>VayuChat</div>
+                    <div class='assistant-info'>VayuChat{timestamp_display}</div>
                     Here are the results:
                 </div>
             </div>
@@ -734,18 +777,29 @@ def show_custom_response(response):
         return {"is_image": False}
 
 def show_processing_indicator(model_name, question):
-    """Show processing indicator with clear question and status"""
+    """Show enhanced processing indicator with progress steps"""
+    # Estimate processing steps based on question type
+    if any(word in question.lower() for word in ["plot", "chart", "visualize", "show"]):
+        steps = ["🔍 Analyzing query", "📊 Generating code", "📈 Creating visualization"]
+    elif any(word in question.lower() for word in ["compare", "calculate", "rank"]):
+        steps = ["🔍 Analyzing query", "🧮 Processing calculations", "📋 Formatting results"]
+    else:
+        steps = ["🔍 Analyzing query", "🤖 Generating response", "✨ Finalizing answer"]
+    
     st.markdown(f"""
     <div style='display: flex; justify-content: flex-start; margin: 1rem 0;'>
-        <div class='processing-indicator'>
-            <div style='font-size: 0.875rem; color: #6b7280; margin-bottom: 8px;'>🤖 VayuChat • Processing with {model_name}</div>
-            <div style='background: rgba(255,255,255,0.9); padding: 0.75rem; border-radius: 8px; margin-bottom: 8px; border-left: 3px solid #3b82f6;'>
-                <strong style='color: #1e293b;'>Your Question:</strong><br>
-                <span style='color: #374151; font-size: 0.95rem;'>{question}</span>
-            </div>
-            <div style='display: flex; align-items: center; gap: 8px;'>
+        <div class='processing-indicator' style='min-width: 400px;'>
+            <div style='display: flex; align-items: center; gap: 8px; margin-bottom: 12px;'>
                 <div style='width: 16px; height: 16px; border: 2px solid #3b82f6; border-top: 2px solid transparent; border-radius: 50%; animation: spin 1s linear infinite;'></div>
-                <span style='color: #374151; font-style: italic;'>Analyzing data and generating response...</span>
+                <span style='font-weight: 600; color: #1e293b;'>🤖 VayuChat • {model_name}</span>
+            </div>
+            
+            <div style='background: rgba(255,255,255,0.9); padding: 0.75rem; border-radius: 8px; margin-bottom: 12px; border-left: 3px solid #3b82f6;'>
+                <div style='color: #374151; font-size: 0.9rem; line-height: 1.4;'>{question}</div>
+            </div>
+            
+            <div style='display: flex; flex-direction: column; gap: 4px;'>
+                {chr(10).join([f"<div style='display: flex; align-items: center; gap: 8px; color: #6b7280; font-size: 0.8rem;'><div style='width: 6px; height: 6px; background: #22c55e; border-radius: 50%; animation: pulse 1.5s infinite;'></div>{step}</div>" for step in steps])}
             </div>
         </div>
     </div>
@@ -754,6 +808,10 @@ def show_processing_indicator(model_name, question):
         0% {{ transform: rotate(0deg); }}
         100% {{ transform: rotate(360deg); }}
     }}
+    @keyframes pulse {{
+        0%, 100% {{ opacity: 0.4; transform: scale(0.8); }}
+        50% {{ opacity: 1; transform: scale(1.2); }}
+    }}
     </style>
     """, unsafe_allow_html=True)
 
@@ -777,6 +835,45 @@ with chat_container:
             last_prompt = response.get("last_prompt", "")
             code = response.get("gen_code", "")
 
+            # Add quick action buttons for follow-up questions (only if no error)
+            if not error and output:
+                st.markdown("---")
+                st.markdown("**💡 Quick Follow-ups:**")
+                
+                action_col1, action_col2, action_col3 = st.columns(3)
+                
+                # Generate contextual follow-up suggestions based on the original question
+                original_question = last_prompt.lower()
+                
+                with action_col1:
+                    if "month" in original_question:
+                        if st.button("📈 Show yearly trend", key=f"action_yearly_{response_id}", use_container_width=True):
+                            yearly_prompt = f"Plot yearly trend analysis for the same data as: {last_prompt}"
+                            st.session_state.follow_up_prompt = yearly_prompt
+                            st.rerun()
+                    elif "city" in original_question:
+                        if st.button("🏙️ Compare top 5 cities", key=f"action_compare_{response_id}", use_container_width=True):
+                            compare_prompt = f"Compare top 5 cities based on: {last_prompt}"
+                            st.session_state.follow_up_prompt = compare_prompt
+                            st.rerun()
+                    else:
+                        if st.button("📊 Show detailed breakdown", key=f"action_detail_{response_id}", use_container_width=True):
+                            detail_prompt = f"Provide detailed breakdown of: {last_prompt}"
+                            st.session_state.follow_up_prompt = detail_prompt
+                            st.rerun()
+                
+                with action_col2:
+                    if st.button("🌍 Compare with WHO standards", key=f"action_who_{response_id}", use_container_width=True):
+                        who_prompt = f"Compare the results from '{last_prompt}' with WHO air quality guidelines"
+                        st.session_state.follow_up_prompt = who_prompt
+                        st.rerun()
+                
+                with action_col3:
+                    if st.button("📅 Seasonal analysis", key=f"action_seasonal_{response_id}", use_container_width=True):
+                        seasonal_prompt = f"Show seasonal patterns for: {last_prompt}"
+                        st.session_state.follow_up_prompt = seasonal_prompt
+                        st.rerun()
+
             if "feedback" in st.session_state.responses[response_id]:
                 feedback_data = st.session_state.responses[response_id]["feedback"]
                 st.markdown(f"""
@@ -842,6 +939,11 @@ prompt = st.chat_input("💬 Ask about air quality trends, compare cities, or re
 if selected_prompt:
     prompt = selected_prompt
 
+# Handle follow-up prompts from quick action buttons
+if st.session_state.get("follow_up_prompt") and not st.session_state.get("processing"):
+    prompt = st.session_state.follow_up_prompt
+    st.session_state.follow_up_prompt = None  # Clear the follow-up prompt
+
 # Handle new queries
 if prompt and not st.session_state.get("processing"):
     # Prevent duplicate processing
@@ -879,7 +981,8 @@ if st.session_state.get("processing"):
                 "gen_code": "",
                 "ex_code": "",
                 "last_prompt": prompt,
-                "error": "Invalid response format"
+                "error": "Invalid response format",
+                "timestamp": datetime.now().strftime("%H:%M")
             }
         
         response.setdefault("role", "assistant")
@@ -888,6 +991,7 @@ if st.session_state.get("processing"):
         response.setdefault("ex_code", "")
         response.setdefault("last_prompt", prompt)
         response.setdefault("error", None)
+        response.setdefault("timestamp", datetime.now().strftime("%H:%M"))
         
     except Exception as e:
         response = {
@@ -896,7 +1000,8 @@ if st.session_state.get("processing"):
             "gen_code": "",
             "ex_code": "",
             "last_prompt": prompt,
-            "error": str(e)
+            "error": str(e),
+            "timestamp": datetime.now().strftime("%H:%M")
         }
 
     st.session_state.responses.append(response)