Update src/streamlit_app.py

src/streamlit_app.py

@@ -86,49 +86,6 @@ st.markdown("""
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
-    .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;
-        gap: 0.3rem;
-        flex-wrap: wrap;
-        margin-top: 0.5rem;
-    }
-    .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.2rem;
-    }
-    .tech-available {
-        background-color: #28a745;
-    }
-    .tech-demo {
-        background-color: #ffc107;
-        color: #000;
-    }
-    .tech-unavailable {
-        background-color: #6c757d;
-    }
     .role-badge {
         background-color: #28a745;
         color: white;
@@ -194,97 +151,89 @@ 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_popup():
-    """Display small popup tech stack status that auto-disappears"""
+def display_tech_stack_notification():
+    """Display tech stack status as a Streamlit notification"""
     # 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()
+    if 'show_tech_notification' not in st.session_state:
+        st.session_state.show_tech_notification = True
+        st.session_state.notification_start_time = time.time()
     
-    # Auto-hide popup after 4 seconds
-    if st.session_state.show_tech_popup:
+    # Auto-hide notification after 5 seconds
+    if st.session_state.show_tech_notification:
         current_time = time.time()
-        if current_time - st.session_state.popup_start_time > 4:
-            st.session_state.show_tech_popup = False
+        if current_time - st.session_state.notification_start_time > 5:
+            st.session_state.show_tech_notification = False
             st.rerun()
     
-    # Show popup if enabled
-    if st.session_state.show_tech_popup:
+    # Show notification if enabled
+    if st.session_state.show_tech_notification:
         tech_status = check_tech_stack()
         
-        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">
-        """
+        # Create a container for the notification
+        with st.container():
+            st.info("🏗️ **Tech Stack Status** - Auto-hiding in 5 seconds...")
+            
+            # Create columns for status items
+            cols = st.columns(5)
+            
+            component_names = {
+                'python': 'Python',
+                'streamlit': 'Streamlit', 
+                'vector_store': 'Vector Store',
+                'llm': 'LLM',
+                'fastapi': 'FastAPI'
+            }
+            
+            for i, (component, info) in enumerate(tech_status.items()):
+                with cols[i]:
+                    if info['available']:
+                        if component == 'fastapi':
+                            icon = "🔄"
+                            color = "orange"
+                        else:
+                            icon = "✅"
+                            color = "green"
+                    else:
+                        icon = "⚠️"
+                        color = "red"
+                    
+                    st.markdown(f"""
+                    <div style="text-align: center; padding: 0.5rem;">
+                        <div style="font-size: 1.2rem;">{icon}</div>
+                        <div style="font-size: 0.8rem; font-weight: bold;">{component_names.get(component, component)}</div>
+                        <div style="font-size: 0.7rem; color: {color};">{info['status']}</div>
+                    </div>
+                    """, unsafe_allow_html=True)
+
+def display_tech_status_sidebar():
+    """Display tech status in sidebar"""
+    with st.sidebar:
+        st.markdown("---")
+        st.markdown("### 🔧 Tech Stack")
+        
+        tech_status = check_tech_stack()
         
         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',
+                '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>
-        """
-        
-        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)
+            st.markdown(f"{icon} **{component_names.get(component, component)}**: {info['status']}")
 
 def initialize_session_state():
     """Initialize session state variables"""
@@ -332,11 +281,11 @@ def demo_role_switch():
     st.markdown('</div>', unsafe_allow_html=True)
 
 def login_page():
-    """Display enhanced login page with small tech stack popup"""
+    """Display enhanced login page with tech stack notification"""
     st.markdown('<div class="main-header"><h1>🤖 FinSolve AI Assistant</h1><p>Complete Tech Stack Implementation</p></div>', unsafe_allow_html=True)
     
-    # Display small tech stack popup
-    display_tech_stack_popup()
+    # Display tech stack notification
+    display_tech_stack_notification()
     
     col1, col2, col3 = st.columns([1, 2, 1])
     
@@ -354,9 +303,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()
+                    # Reset notification for next page
+                    st.session_state.show_tech_notification = True
+                    st.session_state.notification_start_time = time.time()
                     st.success(f"Welcome {username}! Your role: {st.session_state.user_role}")
                     st.rerun()
                 else:
@@ -450,21 +399,12 @@ def display_system_metrics():
             system_health = "🟢 Healthy" if status.get('system_initialized') else "🔴 Error"
             st.markdown(f"**Status:** {system_health}")
         
-        # Tech stack details
-        tech_stack = status.get('tech_stack', {})
-        st.markdown("**🔧 Tech Stack:**")
-        for component, status_text in tech_stack.items():
-            st.markdown(f"• **{component.title()}**: {status_text}")
-        
         st.markdown('</div>', unsafe_allow_html=True)
 
 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()
+    # Display tech stack notification on app entry
+    display_tech_stack_notification()
     
     # Initialize Enhanced RAG system if not done
     if st.session_state.enhanced_rag_system is None:
@@ -472,7 +412,7 @@ def main_app():
             st.session_state.enhanced_rag_system = EnhancedRAGSystem()
             st.session_state.enhanced_rag_system.initialize_system()
     
-    # Header without tech stack status (now in popup)
+    # Header without tech stack status (now in notification)
     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)
@@ -564,6 +504,9 @@ def main_app():
         # System metrics for all users
         st.markdown("---")
         display_system_metrics()
+        
+        # Tech stack status in sidebar
+        display_tech_status_sidebar()
     
     # Main chat interface
     st.header("💬 AI-Powered Chat with Complete RAG")