Modern ChatGPT-style UI redesign

streamlit_app/app.py

@@ -1,18 +1,9 @@
 """
 Streamlit App for RAG Chatbot - Agentic AI eBook
-
-This is the main UI for the RAG chatbot. It provides:
-- Chat interface for asking questions
-- Configuration sidebar (API keys, top_k, etc.)
-- Display of retrieved chunks and confidence scores
-- Raw JSON response viewer
+Modern ChatGPT/Gemini-style UI
 
 Usage:
     streamlit run streamlit_app/app.py
-
-For Hugging Face Spaces deployment:
-    - Set secrets in Space settings for PINECONE_API_KEY, OPENAI_API_KEY
-    - Or let users input keys in the sidebar
 """
 
 import os
@@ -24,7 +15,7 @@ from dotenv import load_dotenv
 # Add parent directory to path for imports
 sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 
-# Load environment variables from the project root .env file
+# Load environment variables
 env_path = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), '.env')
 load_dotenv(env_path)
 
@@ -38,79 +29,135 @@ from app.rag_pipeline import RAGPipeline
 st.set_page_config(
     page_title="Agentic AI eBook Chatbot",
     page_icon="🤖",
-    layout="wide",
-    initial_sidebar_state="expanded"
+    layout="centered",
+    initial_sidebar_state="collapsed"
 )
 
-# Custom CSS for better styling
+# Modern CSS styling
 st.markdown("""
 <style>
-    /* Main container styling */
-    .main-header {
+    /* Hide default streamlit elements */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    
+    /* Header styling */
+    .main-title {
+        text-align: center;
         font-size: 2.5rem;
-        font-weight: bold;
-        color: #1E88E5;
+        font-weight: 700;
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-bottom: 0.5rem;
+    }
+    
+    .subtitle {
         text-align: center;
-        margin-bottom: 1rem;
+        color: #888;
+        font-size: 1rem;
+        margin-bottom: 2rem;
     }
     
-    /* Answer card styling */
-    .answer-card {
-        background-color: #f0f7ff;
-        border-left: 4px solid #1E88E5;
-        padding: 1rem;
-        border-radius: 0 8px 8px 0;
-        margin: 1rem 0;
+    /* Chat message styling */
+    .user-message {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: 20px 20px 5px 20px;
+        margin: 0.5rem 0;
+        max-width: 80%;
+        margin-left: auto;
+        word-wrap: break-word;
     }
     
-    /* Confidence badge styling */
+    .assistant-message {
+        background: #f0f2f6;
+        color: #1a1a2e;
+        padding: 1rem 1.5rem;
+        border-radius: 20px 20px 20px 5px;
+        margin: 0.5rem 0;
+        max-width: 90%;
+        border: 1px solid #e0e0e0;
+        word-wrap: break-word;
+    }
+    
+    /* Confidence badge */
     .confidence-badge {
         display: inline-block;
-        padding: 0.25rem 0.75rem;
-        border-radius: 1rem;
-        font-weight: bold;
-        font-size: 0.9rem;
+        padding: 0.3rem 0.8rem;
+        border-radius: 20px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        margin-top: 0.5rem;
     }
     
-    .confidence-high {
-        background-color: #c8e6c9;
-        color: #2e7d32;
+    .conf-high {
+        background: #d4edda;
+        color: #155724;
     }
     
-    .confidence-medium {
-        background-color: #fff3e0;
-        color: #ef6c00;
+    .conf-medium {
+        background: #fff3cd;
+        color: #856404;
     }
     
-    .confidence-low {
-        background-color: #ffcdd2;
-        color: #c62828;
+    .conf-low {
+        background: #f8d7da;
+        color: #721c24;
     }
     
-    /* Chunk card styling */
-    .chunk-card {
-        background-color: #fafafa;
-        border: 1px solid #e0e0e0;
-        padding: 0.75rem;
-        border-radius: 8px;
-        margin: 0.5rem 0;
+    /* Source chips */
+    .source-chip {
+        display: inline-block;
+        background: #e9ecef;
+        color: #495057;
+        padding: 0.2rem 0.6rem;
+        border-radius: 12px;
+        font-size: 0.7rem;
+        margin: 0.1rem;
     }
     
-    /* Footer styling */
-    .footer {
+    /* Welcome container */
+    .welcome-box {
         text-align: center;
-        color: #666;
-        font-size: 0.8rem;
-        margin-top: 2rem;
-        padding-top: 1rem;
-        border-top: 1px solid #e0e0e0;
+        padding: 2rem;
+        background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
+        border-radius: 20px;
+        margin: 2rem 0;
+    }
+    
+    /* Sample question buttons */
+    .stButton > button {
+        border-radius: 20px !important;
+        border: 1px solid #667eea !important;
+        background: white !important;
+        color: #667eea !important;
+        font-size: 0.85rem !important;
+        padding: 0.5rem 1rem !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    .stButton > button:hover {
+        background: #667eea !important;
+        color: white !important;
+    }
+    
+    /* Status indicator */
+    .status-ready {
+        color: #28a745;
+        font-weight: 600;
+    }
+    
+    .status-not-ready {
+        color: #dc3545;
+        font-weight: 600;
     }
 </style>
 """, unsafe_allow_html=True)
 
 
 # ============================================================================
-# Session State Initialization
+# Session State
 # ============================================================================
 
 if "messages" not in st.session_state:
@@ -124,249 +171,255 @@ if "last_response" not in st.session_state:
 
 
 # ============================================================================
-# Sidebar Configuration
+# Helper Functions
+# ============================================================================
+
+def initialize_pipeline(pinecone_key, index_name, openai_key, groq_key, local_mode):
+    """Initialize the RAG pipeline with given credentials."""
+    try:
+        pipeline = RAGPipeline(
+            pinecone_api_key=pinecone_key if not local_mode else None,
+            index_name=index_name,
+            namespace="agentic-ai",
+            openai_api_key=openai_key if openai_key else None,
+            groq_api_key=groq_key if groq_key else None,
+            local_mode=local_mode
+        )
+        return pipeline, None
+    except Exception as e:
+        return None, str(e)
+
+
+def get_confidence_class(confidence):
+    """Get CSS class based on confidence score."""
+    if confidence >= 0.7:
+        return "conf-high"
+    elif confidence >= 0.4:
+        return "conf-medium"
+    return "conf-low"
+
+
+# ============================================================================
+# Sidebar for Settings
 # ============================================================================
 
 with st.sidebar:
-    st.header("⚙️ Configuration")
+    st.markdown("## ⚙️ Settings")
     
-    st.markdown("---")
-    
-    # API Keys section
-    st.subheader("🔑 API Keys")
-    
-    # Pinecone API Key
     pinecone_key = st.text_input(
         "Pinecone API Key",
         type="password",
         value=os.getenv("PINECONE_API_KEY", ""),
-        help="Required for vector search. Get your key at pinecone.io"
+        key="pinecone_key"
     )
     
-    # Pinecone Index Name
     index_name = st.text_input(
-        "Pinecone Index Name",
+        "Pinecone Index",
         value=os.getenv("PINECONE_INDEX", "agentic-ai-ebook"),
-        help="Name of your Pinecone index"
+        key="index_name"
     )
     
-    # OpenAI API Key (optional)
-    openai_key = st.text_input(
-        "OpenAI API Key (optional)",
-        type="password",
-        value=os.getenv("OPENAI_API_KEY", ""),
-        help="For LLM-powered answers. Leave empty if using Groq."
-    )
-    
-    # Groq API Key (optional - FREE!)
     groq_key = st.text_input(
-        "Groq API Key (FREE LLM)",
+        "Groq API Key (FREE)",
         type="password",
         value=os.getenv("GROQ_API_KEY", ""),
-        help="Free LLM alternative! Get key at console.groq.com"
-    )
-    
-    st.markdown("---")
-    
-    # Retrieval settings
-    st.subheader("🔍 Retrieval Settings")
-    
-    top_k = st.slider(
-        "Number of chunks to retrieve (top_k)",
-        min_value=1,
-        max_value=10,
-        value=6,
-        help="More chunks = more context but potentially more noise"
+        key="groq_key",
+        help="Get free key at console.groq.com"
     )
     
-    use_llm = st.checkbox(
-        "Use LLM for answer generation",
-        value=True,
-        help="Uncheck to always use extractive mode"
-    )
-    
-    local_mode = st.checkbox(
-        "Local Mode (no Pinecone)",
-        value=False,
-        help="Use local vector storage instead of Pinecone"
+    openai_key = st.text_input(
+        "OpenAI Key (optional)",
+        type="password",
+        value=os.getenv("OPENAI_API_KEY", ""),
+        key="openai_key"
     )
     
     st.markdown("---")
     
-    # Initialize/Reinitialize button
-    if st.button("🔄 Initialize Pipeline", use_container_width=True):
-        with st.spinner("Initializing RAG pipeline..."):
-            try:
-                st.session_state.pipeline = RAGPipeline(
-                    pinecone_api_key=pinecone_key if pinecone_key else None,
-                    openai_api_key=openai_key if openai_key else None,
-                    groq_api_key=groq_key if groq_key else None,
-                    index_name=index_name,
-                    local_only=local_mode,
-                    top_k=top_k
-                )
-                st.success("✅ Pipeline initialized!")
-            except Exception as e:
-                st.error(f"❌ Error: {str(e)}")
+    top_k = st.slider("Chunks to retrieve", 1, 10, 6, key="top_k")
+    use_llm = st.checkbox("Use LLM", value=True, key="use_llm")
+    local_mode = st.checkbox("Local Mode", value=False, key="local_mode")
     
-    # Status indicator
     st.markdown("---")
-    st.subheader("📊 Status")
     
+    if st.button("🚀 Initialize", type="primary", use_container_width=True):
+        with st.spinner("Initializing..."):
+            pipeline, error = initialize_pipeline(
+                pinecone_key, index_name, openai_key, groq_key, local_mode
+            )
+            if error:
+                st.error(f"❌ {error}")
+            else:
+                st.session_state.pipeline = pipeline
+                st.success("✅ Ready!")
+    
+    # Status
     if st.session_state.pipeline:
-        st.success("Pipeline: Ready")
-        if st.session_state.pipeline.groq_client:
-            st.info("Mode: Groq LLM (FREE)")
-        elif st.session_state.pipeline.openai_client:
-            st.info("Mode: OpenAI LLM")
-        else:
-            st.warning("Mode: Extractive (no LLM)")
+        st.markdown('<p class="status-ready">● Pipeline Ready</p>', unsafe_allow_html=True)
     else:
-        st.warning("Pipeline: Not initialized")
-        st.caption("Click 'Initialize Pipeline' to start")
+        st.markdown('<p class="status-not-ready">● Not Initialized</p>', unsafe_allow_html=True)
 
 
 # ============================================================================
-# Main Content Area
+# Auto-initialize if env vars are set
+# ============================================================================
+
+if st.session_state.pipeline is None:
+    pk = os.getenv("PINECONE_API_KEY", "")
+    gk = os.getenv("GROQ_API_KEY", "")
+    
+    if pk and gk:
+        pipeline, _ = initialize_pipeline(
+            pk,
+            os.getenv("PINECONE_INDEX", "agentic-ai-ebook"),
+            os.getenv("OPENAI_API_KEY", ""),
+            gk,
+            False
+        )
+        if pipeline:
+            st.session_state.pipeline = pipeline
+
+
+# ============================================================================
+# Main UI
 # ============================================================================
 
 # Header
-st.markdown('<div class="main-header">🤖 Agentic AI eBook Chatbot</div>', unsafe_allow_html=True)
+st.markdown('<h1 class="main-title">🤖 Agentic AI Chatbot</h1>', unsafe_allow_html=True)
+st.markdown('<p class="subtitle">Ask questions about the Agentic AI eBook • Grounded answers only</p>', unsafe_allow_html=True)
 
-st.markdown("""
-<p style="text-align: center; color: #666;">
-    Ask questions about the Agentic AI eBook. Answers are strictly grounded in the document.
-</p>
-""", unsafe_allow_html=True)
 
-st.markdown("---")
+# ============================================================================
+# Chat Display
+# ============================================================================
 
-# Check if pipeline is initialized
-if not st.session_state.pipeline:
-    st.info("👈 Please configure your API keys and click 'Initialize Pipeline' in the sidebar to start.")
+# Welcome screen if no messages
+if not st.session_state.messages:
+    st.markdown("""
+    <div class="welcome-box">
+        <h2>👋 Welcome!</h2>
+        <p style="color: #666; max-width: 500px; margin: 0 auto 1rem auto;">
+            I'm your AI assistant for the Agentic AI eBook. 
+            Ask me anything about the document and I'll find relevant answers.
+        </p>
+    </div>
+    """, unsafe_allow_html=True)
     
-    # Show sample queries
-    st.subheader("📝 Sample Questions to Try")
-    sample_queries = [
-        "What is the definition of 'agentic AI' described in the eBook?",
-        "List the three risks of agentic systems the eBook mentions.",
-        "What are the recommended safeguards for deploying agentic AI?",
-        "How does the eBook distinguish between autonomous agents and traditional automation?",
-        "What future research directions does the eBook propose?"
+    st.markdown("### 💡 Try these questions:")
+    
+    sample_questions = [
+        "What is the definition of agentic AI?",
+        "What are the key characteristics of agentic systems?",
+        "What risks does the eBook mention?",
+        "What safeguards are recommended?"
     ]
     
-    for query in sample_queries:
-        st.markdown(f"- {query}")
+    cols = st.columns(2)
+    for i, q in enumerate(sample_questions):
+        with cols[i % 2]:
+            if st.button(q, key=f"sample_{i}", use_container_width=True):
+                if st.session_state.pipeline:
+                    st.session_state.messages.append({"role": "user", "content": q})
+                    st.rerun()
+                else:
+                    st.warning("Please initialize the pipeline first (click sidebar)")
 
 else:
-    # Chat input MUST be outside columns/containers
-    user_input = st.chat_input("Ask a question about the Agentic AI eBook...")
-    
-    # Chat interface
-    col1, col2 = st.columns([2, 1])
-    
-    with col1:
-        st.subheader("💬 Chat")
-        
-        # Display chat history
-        chat_container = st.container()
-        
-        with chat_container:
-            for message in st.session_state.messages:
-                with st.chat_message(message["role"]):
-                    st.write(message["content"])
-        
-        if user_input:
-            # Add user message to chat
-            st.session_state.messages.append({"role": "user", "content": user_input})
+    # Display all messages
+    for message in st.session_state.messages:
+        if message["role"] == "user":
+            st.markdown(f"""
+            <div style="display: flex; justify-content: flex-end; margin: 1rem 0;">
+                <div class="user-message">{message["content"]}</div>
+            </div>
+            """, unsafe_allow_html=True)
+        else:
+            content = message["content"]
+            confidence = message.get("confidence", 0)
+            sources = message.get("sources", [])
             
-            # Display user message
-            with st.chat_message("user"):
-                st.write(user_input)
+            conf_class = get_confidence_class(confidence)
             
-            # Get response from pipeline
-            with st.chat_message("assistant"):
-                with st.spinner("Searching document and generating answer..."):
-                    try:
-                        response = st.session_state.pipeline.query(
-                            user_input,
-                            top_k=top_k,
-                            use_llm=use_llm
-                        )
-                        
-                        # Store response for display
-                        st.session_state.last_response = response
-                        
-                        # Display answer
-                        answer = response.get("final_answer", "No answer generated")
-                        st.write(answer)
-                        
-                        # Display confidence
-                        confidence = response.get("confidence", 0.0)
-                        if confidence >= 0.7:
-                            conf_class = "confidence-high"
-                        elif confidence >= 0.4:
-                            conf_class = "confidence-medium"
-                        else:
-                            conf_class = "confidence-low"
-                        
-                        st.markdown(
-                            f'<span class="confidence-badge {conf_class}">Confidence: {confidence:.3f}</span>',
-                            unsafe_allow_html=True
-                        )
-                        
-                        # Add assistant message to chat
-                        st.session_state.messages.append({
-                            "role": "assistant",
-                            "content": answer
-                        })
-                        
-                    except Exception as e:
-                        st.error(f"Error: {str(e)}")
-                        st.session_state.messages.append({
-                            "role": "assistant",
-                            "content": f"Error: {str(e)}"
-                        })
-        
-        # Clear chat button
+            # Build sources HTML
+            sources_html = ""
+            if sources:
+                chips = " ".join([f'<span class="source-chip">📄 Page {s}</span>' for s in sources[:5]])
+                sources_html = f'<div style="margin-top: 0.5rem;">{chips}</div>'
+            
+            st.markdown(f"""
+            <div style="margin: 1rem 0;">
+                <div class="assistant-message">
+                    <div style="white-space: pre-wrap;">{content}</div>
+                    <div style="margin-top: 0.75rem;">
+                        <span class="confidence-badge {conf_class}">
+                            Confidence: {confidence:.0%}
+                        </span>
+                    </div>
+                    {sources_html}
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+    
+    # Clear chat button
+    col1, col2, col3 = st.columns([1, 1, 1])
+    with col2:
         if st.button("🗑️ Clear Chat", use_container_width=True):
             st.session_state.messages = []
             st.session_state.last_response = None
             st.rerun()
-    
-    with col2:
-        st.subheader("📚 Retrieved Chunks")
+
+
+# ============================================================================
+# Chat Input (MUST be at top level, not in any container)
+# ============================================================================
+
+user_input = st.chat_input("Ask a question about the Agentic AI eBook...")
+
+if user_input:
+    if st.session_state.pipeline is None:
+        st.warning("⚠️ Please initialize the pipeline first (open sidebar → click Initialize)")
+    else:
+        # Add user message
+        st.session_state.messages.append({"role": "user", "content": user_input})
         
-        if st.session_state.last_response:
-            response = st.session_state.last_response
-            chunks = response.get("retrieved_chunks", [])
-            
-            if chunks:
-                for i, chunk in enumerate(chunks):
-                    with st.expander(
-                        f"Chunk {i+1} (Page {chunk.get('page', '?')}, Score: {chunk.get('score', 0):.3f})",
-                        expanded=(i == 0)
-                    ):
-                        st.markdown(f"**ID:** `{chunk.get('id', 'unknown')}`")
-                        st.markdown(f"**Page:** {chunk.get('page', 'unknown')}")
-                        st.markdown(f"**Relevance Score:** {chunk.get('score', 0):.4f}")
-                        st.markdown("**Text:**")
-                        st.text_area(
-                            "Chunk text",
-                            value=chunk.get("text", ""),
-                            height=150,
-                            label_visibility="collapsed",
-                            key=f"chunk_{i}"
-                        )
-            else:
-                st.info("No chunks retrieved yet. Ask a question!")
-            
-            # Raw JSON viewer
-            st.markdown("---")
-            with st.expander("🔍 Show Raw JSON Response"):
-                st.json(response)
-        else:
-            st.info("Ask a question to see retrieved chunks.")
+        # Get response
+        try:
+            with st.spinner("🔍 Searching document..."):
+                response = st.session_state.pipeline.query(
+                    user_input,
+                    top_k=st.session_state.get("top_k", 6),
+                    use_llm=st.session_state.get("use_llm", True)
+                )
+                
+                # Extract data
+                answer = response.get("final_answer", "I couldn't find an answer.")
+                confidence = response.get("confidence", 0.0)
+                chunks = response.get("retrieved_chunks", [])
+                
+                # Get source pages
+                sources = list(set([c.get("page", "?") for c in chunks]))
+                sources.sort()
+                
+                # Add assistant message
+                st.session_state.messages.append({
+                    "role": "assistant",
+                    "content": answer,
+                    "confidence": confidence,
+                    "sources": sources
+                })
+                
+                st.session_state.last_response = response
+                st.rerun()
+                
+        except Exception as e:
+            st.error(f"❌ Error: {str(e)}")
+            st.session_state.messages.append({
+                "role": "assistant",
+                "content": f"Sorry, an error occurred: {str(e)}",
+                "confidence": 0,
+                "sources": []
+            })
+            st.rerun()
 
 
 # ============================================================================
@@ -375,39 +428,8 @@ else:
 
 st.markdown("---")
 st.markdown("""
-<div class="footer">
-    <p>
-        <strong>Built for AI Engineer Intern Assignment</strong><br>
-        Answers are strictly grounded in the Agentic AI eBook.<br>
-        Using: LangGraph • Pinecone • Sentence-Transformers • Streamlit
-    </p>
+<div style="text-align: center; color: #888; font-size: 0.8rem; padding-bottom: 2rem;">
+    Built with LangGraph • Pinecone • Groq • Streamlit<br>
+    <em>Answers are strictly grounded in the Agentic AI eBook</em>
 </div>
 """, unsafe_allow_html=True)
-
-
-# ============================================================================
-# Auto-initialize if env vars are set
-# ============================================================================
-
-# Try to auto-initialize on first load if env vars are present
-if st.session_state.pipeline is None:
-    env_pinecone = os.getenv("PINECONE_API_KEY")
-    env_groq = os.getenv("GROQ_API_KEY")
-    if env_pinecone:
-        try:
-            st.session_state.pipeline = RAGPipeline(
-                pinecone_api_key=env_pinecone,
-                openai_api_key=os.getenv("OPENAI_API_KEY"),
-                groq_api_key=env_groq,
-                index_name=os.getenv("PINECONE_INDEX", "agentic-ai-ebook"),
-                local_only=False
-            )
-            # Debug: show which LLM is being used
-            if st.session_state.pipeline.groq_client:
-                st.sidebar.success("✅ Groq LLM connected!")
-            elif st.session_state.pipeline.openai_client:
-                st.sidebar.info("ℹ️ OpenAI LLM connected")
-            else:
-                st.sidebar.warning("⚠️ No LLM - using extractive mode")
-        except Exception as e:
-            st.sidebar.error(f"Auto-init failed: {e}")