Update src/streamlit_app.py

src/streamlit_app.py

@@ -2,14 +2,7 @@ import streamlit as st
 import time
 import os
 
-# Import the backend logic from app.py
-try:
-    from app import get_rag_chain, search_archives
-except ImportError as e:
-    st.error(f"CRITICAL ERROR: Could not import app.py. Details: {e}")
-    st.stop()
-
-# --- PAGE CONFIGURATION ---
+# --- 1. PAGE CONFIGURATION (MUST BE FIRST) ---
 st.set_page_config(
     page_title="Voice of the Sign", 
     page_icon="🦅", 
@@ -17,141 +10,210 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# --- CUSTOM CSS STYLING ---
+# --- 2. ERROR HANDLING IMPORTS ---
+backend_loaded = False
+try:
+    from app import get_rag_chain, search_archives
+    backend_loaded = True
+except ImportError as e:
+    st.error(f"❌ CRITICAL SYSTEM ERROR: Could not load the Brain.\n\nDetails: {e}")
+
+# --- 3. PROFESSIONAL CSS STYLING ---
 st.markdown("""
 <style>
-    /* Chat Bubble Styling */
-    .stChatMessage {
-        border-radius: 12px;
-        border: 1px solid #E0E0E0;
-        padding: 10px;
+    /* IMPORT FONTS */
+    @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Inter:wght@300;400;600&display=swap');
+
+    /* GLOBAL TEXT STYLES */
+    html, body, [class*="css"] {
+        font-family: 'Inter', sans-serif;
     }
     
-    /* Force text color to black inside chat bubbles, even in Dark Mode */
-    div[data-testid="stChatMessage"] {
-        color: #31333F !important; /* Dark Grey Text */
+    h1, h2, h3 {
+        font-family: 'Merriweather', serif !important;
+        color: #2C3E50;
     }
-    
-    div[data-testid="stChatMessage"] p, 
-    div[data-testid="stChatMessage"] div {
-        color: #31333F !important;
+
+    /* CUSTOM HERO HEADER */
+    .hero-container {
+        text-align: center;
+        padding: 40px 20px;
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        border-radius: 15px;
+        margin-bottom: 30px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    }
+    .hero-title {
+        font-size: 2.5em;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin: 0;
+    }
+    .hero-subtitle {
+        font-size: 1.1em;
+        color: #555;
+        font-style: italic;
+        margin-top: 10px;
     }
 
-    div[data-testid="stChatMessage"]:nth-child(even) {
-        background-color: #FFFFFF;
-        border-left: 5px solid #8B5E3C; 
+    /* CHAT BUBBLES */
+    .stChatMessage {
+        background-color: transparent !important;
+        border: none !important;
     }
     
-    div[data-testid="stChatMessage"]:nth-child(odd) {
-        background-color: #F8F9FA;
+    /* User Message Bubble */
+    div[data-testid="stChatMessage"][data-test-role="user"] {
+        background-color: #E8F0FE !important; /* Soft Blue */
+        border-radius: 15px 15px 0px 15px !important;
+        padding: 20px !important;
+        margin-bottom: 15px;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+        border: 1px solid #D0E1FD;
     }
     
-    /* Quote Card Styling */
+    /* AI Message Bubble */
+    div[data-testid="stChatMessage"][data-test-role="assistant"] {
+        background-color: #FFFFFF !important;
+        border-radius: 15px 15px 15px 0px !important;
+        padding: 20px !important;
+        margin-bottom: 15px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        border: 1px solid #F0F0F0;
+    }
+
+    /* TEXT COLOR FIX FOR DARK MODE */
+    div[data-testid="stChatMessage"] p, 
+    div[data-testid="stChatMessage"] div {
+        color: #1a1a1a !important; /* Always dark text */
+    }
+
+    /* QUOTE CARDS (Search Mode) */
     .quote-card {
-        background-color: #f9f9f9;
-        border-left: 4px solid #8B5E3C;
-        padding: 15px;
-        margin-bottom: 10px;
-        border-radius: 5px;
-        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        background-color: white;
+        border-left: 5px solid #D4AF37; /* Gold Border */
+        padding: 20px;
+        margin-bottom: 15px;
+        border-radius: 8px;
+        box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+        transition: transform 0.2s;
+    }
+    .quote-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
     }
     .quote-meta {
-        color: #8B5E3C;
-        font-weight: bold;
-        font-size: 0.9em;
-        margin-bottom: 5px;
+        font-family: 'Inter', sans-serif;
+        font-size: 0.85em;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        color: #D4AF37; /* Gold */
+        font-weight: 700;
+        margin-bottom: 8px;
     }
     .quote-text {
-        font-family: "Georgia", serif;
-        font-style: italic;
+        font-family: 'Merriweather', serif;
+        font-size: 1.05em;
+        line-height: 1.6;
         color: #333;
+        font-style: italic;
     }
-    
-    /* Hide Branding */
+
+    /* HIDE STREAMLIT BRANDING */
     #MainMenu {visibility: hidden;}
     footer {visibility: hidden;}
+    header {visibility: hidden;}
 </style>
 """, unsafe_allow_html=True)
 
-# --- SIDEBAR ---
+# --- 4. SIDEBAR ---
 with st.sidebar:
-    st.title("🦅 Voice of the Sign")
+    st.markdown("<h2 style='text-align: center; color: #2C3E50;'>🦅 Settings</h2>", unsafe_allow_html=True)
+    st.divider()
     
-    # --- MODE TOGGLE ---
-    st.markdown("### ⚙️ Settings")
     mode = st.radio(
-        "Select Mode:", 
+        "Choose Experience:", 
         ["🗣️ Chat with Bro. Branham", "🔍 Search Quotes Only"],
-        help="Chat uses AI to speak like Branham. Search returns exact text from the sermons."
+        captions=["AI Persona asking & answering", "Direct text search from the tapes"]
     )
     
+    st.info("💡 **Tip:** Use 'Chat' for deep questions and 'Search' for finding specific quotes.")
+    
     st.divider()
-    if st.button("Clear History", use_container_width=True):
+    if st.button("🗑️ Start New Conversation", use_container_width=True):
         st.session_state.messages = []
         st.rerun()
 
-# --- INITIALIZE CHAT HISTORY ---
+# --- 5. INITIALIZE STATE ---
 if "messages" not in st.session_state:
     st.session_state.messages = []
 
-# --- LOAD RESOURCES (Cached) ---
+# --- 6. LOAD BACKEND ---
 @st.cache_resource(show_spinner=False)
 def load_system():
-    # Calling this initializes the retriever cache in app.py
-    return get_rag_chain()
+    if backend_loaded:
+        return get_rag_chain()
+    return None
 
-# --- DISPLAY PAGE HEADER ---
+# --- 7. MAIN HEADER ---
+# Custom HTML Hero Section
 if mode == "🗣️ Chat with Bro. Branham":
-    st.title("🦅 THE 7TH HANDLE")
-    st.caption("Interactive Archive • AI Persona Mode")
+    st.markdown("""
+    <div class="hero-container">
+        <div class="hero-title">🦅 The 7th Handle</div>
+        <div class="hero-subtitle">Interactive AI Archive • "He that has an ear, let him hear."</div>
+    </div>
+    """, unsafe_allow_html=True)
 else:
-    st.title("🔍 SERMON SEARCH")
-    st.caption("Direct Archive Search • Quote Mode")
+    st.markdown("""
+    <div class="hero-container">
+        <div class="hero-title">🔍 The Table</div>
+        <div class="hero-subtitle">Direct Reference Search • "Spoken Word is the Original Seed"</div>
+    </div>
+    """, unsafe_allow_html=True)
 
-st.divider()
+# Check backend status
+if not backend_loaded:
+    st.warning("⚠️ System is offline. Please check logs.")
+    st.stop()
 
-# --- DISPLAY HISTORY ---
+# --- 8. CHAT INTERFACE ---
 if mode == "🗣️ Chat with Bro. Branham":
     if not st.session_state.messages:
-         # Use markdown directly for the welcome message to ensure styling applies
          with st.chat_message("assistant", avatar="📖"):
-             st.markdown("God bless you. I am here to search the tapes for you. What is on your heart?")
+             st.markdown("God bless you, friend. I am here to search the tapes for you. What is on your heart today?")
          
     for msg in st.session_state.messages:
+        # We manually assign the role for CSS targeting
+        role_class = "user" if msg["role"] == "user" else "assistant"
         with st.chat_message(msg["role"], avatar="📖" if msg["role"] == "assistant" else "👤"):
             st.markdown(msg["content"])
-            # Display Sources if available
             if "sources" in msg and msg["sources"]:
                 with st.expander("📚 Sermon References"):
                     for src in msg["sources"]:
                         st.markdown(f"- *{src}*")
 
-# --- USER INPUT HANDLING ---
-placeholder_text = "Ask a question..." if mode == "🗣️ Chat with Bro. Branham" else "Search for a quote (e.g., 'Third Pull')..."
+# --- 9. INPUT & LOGIC ---
+placeholder_text = "Ask a difficult question..." if mode == "🗣️ Chat with Bro. Branham" else "Search for a specific quote..."
 
 if prompt := st.chat_input(placeholder_text):
     
-    # ==========================
-    # MODE A: CHAT (AI PERSONA)
-    # ==========================
+    # === MODE A: CHAT ===
     if mode == "🗣️ Chat with Bro. Branham":
-        # 1. Add User Message
         st.session_state.messages.append({"role": "user", "content": prompt})
         with st.chat_message("user", avatar="👤"):
             st.markdown(prompt)
 
-        # 2. Generate Response
         with st.chat_message("assistant", avatar="📖"):
-            with st.spinner("Searching the archives..."):
+            with st.spinner("Searching the mysteries..."):
                 try:
-                    # Load Chain (Lazy Load)
                     chain = load_system() 
+                    response = chain.invoke({"question": prompt}) 
                     
-                    response = chain.invoke({"query": prompt})
-                    result_text = response['result']
+                    result_text = response['answer']
                     source_docs = response.get('source_documents', [])
                     
-                    # Format Sources
+                    # Deduplicate Sources
                     formatted_sources = []
                     for doc in source_docs:
                         filename = doc.metadata.get('source', 'Unknown')
@@ -159,7 +221,7 @@ if prompt := st.chat_input(placeholder_text):
                         formatted_sources.append(f"{filename} {paragraph}")
                     unique_sources = list(dict.fromkeys(formatted_sources))
 
-                    # Typing Effect
+                    # Stream Response
                     placeholder = st.empty()
                     full_response = ""
                     for chunk in result_text.split():
@@ -168,14 +230,12 @@ if prompt := st.chat_input(placeholder_text):
                         placeholder.markdown(full_response + "▌")
                     placeholder.markdown(full_response)
 
-                    # Save to History
                     st.session_state.messages.append({
                         "role": "assistant",
                         "content": full_response,
                         "sources": unique_sources
                     })
                     
-                    # Show Sources
                     if unique_sources:
                         with st.expander("📚 Sermon References"):
                             for src in unique_sources:
@@ -184,31 +244,25 @@ if prompt := st.chat_input(placeholder_text):
                 except Exception as e:
                     st.error(f"An error occurred: {e}")
 
-    # ==========================
-    # MODE B: QUOTE SEARCH
-    # ==========================
+    # === MODE B: SEARCH ===
     else:
-        st.subheader(f"Results for: '{prompt}'")
-        
-        with st.spinner("Scanning tapes..."):
+        st.markdown(f"### 🔎 Results for: *'{prompt}'*")
+        with st.spinner("Scanning the tapes..."):
             try:
-                load_system() 
                 docs = search_archives(prompt)
-                
                 if not docs:
-                    st.warning("No results found in the archives.")
+                    st.warning("No results found.")
                 
                 for doc in docs:
                     filename = doc.metadata.get('source', 'Unknown Tape')
-                    paragraph = doc.metadata.get('paragraph', 'Unknown Para')
+                    paragraph = doc.metadata.get('paragraph', '')
                     content = doc.page_content
                     
                     st.markdown(f"""
                     <div class="quote-card">
-                        <div class="quote-meta">📼 {filename} (Para {paragraph})</div>
+                        <div class="quote-meta">📼 {filename} {paragraph}</div>
                         <div class="quote-text">"{content}"</div>
                     </div>
                     """, unsafe_allow_html=True)
-                    
             except Exception as e:
-                st.error(f"Search failed: {e}")
+                st.error(f"Search failed: {e}")