Update src/streamlit_app.py

src/streamlit_app.py

@@ -14,6 +14,7 @@ import sys
 from typing import Dict, List, Optional
 from datetime import datetime
 import json
+import time
 
 # Add the src directory to Python path for imports
 sys.path.append(os.path.dirname(os.path.abspath(__file__)))
@@ -72,7 +73,8 @@ def check_tech_stack():
             tech_status['fastapi'] = {'available': True, 'status': 'Simulated API'}
     
     return tech_status
-# Enhanced CSS with tech stack indicators
+
+# Enhanced CSS with small popup tech stack indicators
 st.markdown("""
 <style>
     .main-header {
@@ -84,22 +86,38 @@ st.markdown("""
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
-    .tech-stack-status {
+    .tech-stack-popup {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        z-index: 1000;
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 8px;
+        padding: 0.8rem;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        border-left: 4px solid #1f4e79;
+        max-width: 300px;
+        animation: slideIn 0.5s ease-out;
+    }
+    @keyframes slideIn {
+        from { transform: translateX(100%); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    .tech-stack-mini {
         display: flex;
-        justify-content: center;
-        gap: 0.5rem;
-        margin: 1rem 0;
+        gap: 0.3rem;
         flex-wrap: wrap;
+        margin-top: 0.5rem;
     }
-    .tech-item {
-        padding: 0.3rem 0.6rem;
-        border-radius: 12px;
-        font-size: 0.75rem;
+    .tech-item-mini {
+        padding: 0.2rem 0.4rem;
+        border-radius: 6px;
+        font-size: 0.65rem;
         font-weight: bold;
         color: white;
         display: flex;
         align-items: center;
-        gap: 0.3rem;
+        gap: 0.2rem;
     }
     .tech-available {
         background-color: #28a745;
@@ -176,42 +194,97 @@ st.markdown("""
         padding: 0.25rem 0;
         border-bottom: 1px solid #dee2e6;
     }
+    .tech-status-toggle {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        background: #1f4e79;
+        color: white;
+        border: none;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        cursor: pointer;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        font-size: 1.2rem;
+    }
+    .tech-status-toggle:hover {
+        background: #2d5aa0;
+        transform: scale(1.05);
+    }
 </style>
 """, unsafe_allow_html=True)
 
-def display_tech_stack_status():
-    """Display current tech stack status"""
-    tech_status = check_tech_stack()
-    
-    st.markdown('<div class="tech-stack-status">', unsafe_allow_html=True)
+def display_tech_stack_popup():
+    """Display small popup tech stack status that auto-disappears"""
+    # Initialize popup state
+    if 'show_tech_popup' not in st.session_state:
+        st.session_state.show_tech_popup = True
+        st.session_state.popup_start_time = time.time()
+    
+    # Auto-hide popup after 4 seconds
+    if st.session_state.show_tech_popup:
+        current_time = time.time()
+        if current_time - st.session_state.popup_start_time > 4:
+            st.session_state.show_tech_popup = False
+            st.rerun()
     
-    for component, info in tech_status.items():
-        if info['available']:
-            if component == 'fastapi':
-                css_class = "tech-demo"
-                icon = "🔄"
-            else:
-                css_class = "tech-available"
-                icon = "✅"
-        else:
-            css_class = "tech-unavailable"
-            icon = "⚠️"
+    # Show popup if enabled
+    if st.session_state.show_tech_popup:
+        tech_status = check_tech_stack()
         
-        component_names = {
-            'python': 'Python',
-            'streamlit': 'Streamlit',
-            'vector_store': 'Vector Store',
-            'llm': 'LLM',
-            'fastapi': 'FastAPI'
-        }
+        popup_html = f"""
+        <div class="tech-stack-popup">
+            <div style="font-weight: bold; color: #1f4e79; margin-bottom: 0.5rem;">
+                🏗️ Tech Stack Status
+            </div>
+            <div class="tech-stack-mini">
+        """
         
-        st.markdown(f"""
-        <div class="tech-item {css_class}">
-            {icon} {component_names.get(component, component)}: {info['status']}
+        for component, info in tech_status.items():
+            if info['available']:
+                if component == 'fastapi':
+                    css_class = "tech-demo"
+                    icon = "🔄"
+                else:
+                    css_class = "tech-available"
+                    icon = "✅"
+            else:
+                css_class = "tech-unavailable"
+                icon = "⚠️"
+            
+            component_names = {
+                'python': 'Python',
+                'streamlit': 'Streamlit',
+                'vector_store': 'Vector Store',
+                'llm': 'LLM',
+                'fastapi': 'FastAPI'
+            }
+            
+            popup_html += f"""
+            <div class="tech-item-mini {css_class}">
+                {icon} {component_names.get(component, component)}
+            </div>
+            """
+        
+        popup_html += """
+            </div>
+            <div style="font-size: 0.6rem; color: #666; margin-top: 0.5rem; text-align: center;">
+                Auto-hiding in 4 seconds...
+            </div>
         </div>
-        """, unsafe_allow_html=True)
-    
-    st.markdown('</div>', unsafe_allow_html=True)
+        """
+        
+        st.markdown(popup_html, unsafe_allow_html=True)
+
+def display_tech_status_toggle():
+    """Display floating button to show tech status"""
+    st.markdown("""
+    <button class="tech-status-toggle" onclick="window.parent.location.reload();" title="Show Tech Stack Status">
+        🔧
+    </button>
+    """, unsafe_allow_html=True)
 
 def initialize_session_state():
     """Initialize session state variables"""
@@ -259,12 +332,11 @@ def demo_role_switch():
     st.markdown('</div>', unsafe_allow_html=True)
 
 def login_page():
-    """Display enhanced login page with tech stack status"""
+    """Display enhanced login page with small tech stack popup"""
     st.markdown('<div class="main-header"><h1>🤖 FinSolve AI Assistant</h1><p>Complete Tech Stack Implementation</p></div>', unsafe_allow_html=True)
     
-    # Display tech stack status
-    st.markdown("### 🏗️ **Tech Stack Status**")
-    display_tech_stack_status()
+    # Display small tech stack popup
+    display_tech_stack_popup()
     
     col1, col2, col3 = st.columns([1, 2, 1])
     
@@ -282,6 +354,9 @@ def login_page():
                     st.session_state.authenticated = True
                     st.session_state.username = username
                     st.session_state.user_role = auth_system.get_user_role(username)
+                    # Reset popup for next page
+                    st.session_state.show_tech_popup = True
+                    st.session_state.popup_start_time = time.time()
                     st.success(f"Welcome {username}! Your role: {st.session_state.user_role}")
                     st.rerun()
                 else:
@@ -385,17 +460,22 @@ def display_system_metrics():
 
 def main_app():
     """Enhanced main application interface"""
+    # Display small tech stack popup on every page
+    display_tech_stack_popup()
+    
+    # Display floating tech status toggle button
+    display_tech_status_toggle()
+    
     # Initialize Enhanced RAG system if not done
     if st.session_state.enhanced_rag_system is None:
         with st.spinner("🚀 Initializing Complete RAG System..."):
             st.session_state.enhanced_rag_system = EnhancedRAGSystem()
             st.session_state.enhanced_rag_system.initialize_system()
     
-    # Header with tech stack status
+    # Header without tech stack status (now in popup)
     col1, col2, col3 = st.columns([3, 2, 1])
     with col1:
         st.markdown('<div class="main-header"><h1>🤖 FinSolve AI Assistant</h1><p>Complete Tech Stack RAG System</p></div>', unsafe_allow_html=True)
-        display_tech_stack_status()
     with col2:
         current_role = st.session_state.demo_role if st.session_state.demo_mode else st.session_state.user_role
         demo_indicator = " (Demo)" if st.session_state.demo_mode else ""