Option3_app.py

import streamlit as st
from rag_query import query_rag, vector_store

# Custom CSS for styling
st.markdown("""
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

    .main {
        background-color: #f5f5f5;
        font-family: 'Roboto', sans-serif;
    }
    .stTextInput > div > div > input {
        border: 2px solid #C8102E;
        border-radius: 5px;
        background-color: #FFFFFF;
        padding: 10px;
        font-size: 16px;
    }
    .stSelectbox > div > div > select {
        border: 2px solid #C8102E;
        border-radius: 5px;
        background-color: #FFFFFF;
        padding: 10px;
        font-size: 16px;
    }
    .stButton > button {
        background-color: #333333; /* Dark grey */
        color: white;
        border-radius: 5px;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        transition: background-color 0.3s;
    }
    .stButton > button:hover {
        background-color: #C8102E; /* Green on hover */
        color: white;
    }
    .new-chat-button > button {
        background-color: #FF0000; /* Red */
        color: white;
        border-radius: 5px;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        transition: background-color 0.3s;
    }
    .new-chat-button > button:hover {
        background-color: #CC0000; /* Darker red on hover */
        color: white;
    }
    .umc-header {
        font-size: 24px;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 20px;
        color: #333333;
    }
    .spacer {
        margin-top: 30px;
    }
    .chunk-dropdown {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .header-banner {
        background-color: #FFFFFF;
        padding: 10px 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .header-text {
        font-size: 28px;
        font-weight: bold;
        color: #C8102E;
    }
    .query-card {
        background-color: #FFFFFF;
        border-radius: 10px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
    .query-title {
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        border-bottom: 2px solid #C8102E;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }
    .sidebar {
        background-color: #E8ECEF;
        padding: 20px;
    }
    .divider {
        border-top: 1px solid #C8102E;
        margin: 10px 0;
    }
    .footer {
        background-color: #E8ECEF;
        padding: 10px;
        text-align: center;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
        font-size: 14px;
        color: #333333;
    }
    .footer a {
        color: #C8102E;
        text-decoration: none;
    }
    .footer a:hover {
        text-decoration: underline;
    }
    @media (max-width: 768px) {
        .header-banner {
            flex-direction: column;
            align-items: flex-start;
        }
        .header-text {
            font-size: 20px;
            margin-top: 10px;
        }
    }
    </style>
""", unsafe_allow_html=True)

# Initialize session state for password and query history
if "authenticated" not in st.session_state:
    st.session_state.authenticated = False
if "query_history" not in st.session_state:
    st.session_state.query_history = []  # Store queries and responses
if "retrieved_chunks" not in st.session_state:
    st.session_state.retrieved_chunks = []  # Store retrieved chunks
if "new_query_input" not in st.session_state:
    st.session_state.new_query_input = ""  # Store new query input

# Header banner with logo and text
st.markdown('<div class="header-banner">', unsafe_allow_html=True)
col1, col2 = st.columns([1, 4])
with col1:
    st.image("UMC_Logo.png", width=100)  # Smaller logo for header
with col2:
    st.markdown('<p class="header-text">United Methodist Communications</p>', unsafe_allow_html=True)
st.markdown('</div>', unsafe_allow_html=True)

# Main app title (shown on all screens)
st.title("United Methodist Church Discipline Assistant")

# Header with description and New Chat button
col1, col2 = st.columns([3, 1])
with col1:
    st.write("Ask questions about The Book of Discipline 2020-2024, including its Constitution and history!")
with col2:
    if st.button("New Chat", key="new_chat"):
        st.session_state.query_history = []
        st.session_state.retrieved_chunks = []
        st.session_state.new_query_input = ""
        st.rerun()

# Password form (shown only if not authenticated)
if not st.session_state.authenticated:
    with st.form(key="password_form"):
        password = st.text_input("Enter password:", type="password", key="password")
        submit_password = st.form_submit_button("Login")
        if submit_password:
            if password == "umc2024":  # Password as set
                st.session_state.authenticated = True
                st.rerun()  # Refresh to show main app
            else:
                st.error("Incorrect password. Please try again.")

# Main app content (shown only if authenticated)
if st.session_state.authenticated:
    # Interactive input with sample questions
    sample_questions = [
        "Who were the key figures in the early history of Methodism in America, and what did they do?",
        "What does the United Methodist Church Constitution say about inclusiveness and racial justice?",
        "What is the role of the General Conference in the United Methodist Church?",
        "How did the United Methodist Church form through mergers over time?",
        "What challenges did the UMC face during the Civil War, and how did they impact the church?",
        "What is the UMC’s stance on ecumenical relations according to the Constitution?",
        "How has the UMC addressed issues of racism throughout its history?",
        "What changes has the UMC faced in the 21st century, particularly around gender and sexuality?",
        "How has the UMC expanded globally since its formation?",
        "What does the UMC say about social justice through its Special Sundays?",
        "How does the UMC support Native American ministries according to its organizational practices?",
        "What is the UMC’s stance on marriage and homosexuality in the 21st century?",
        "How has the UMC’s position on social issues like abortion evolved over time?",
        "What are the Special Sundays in the UMC, and how are they celebrated?",
        "How does the UMC observe Heritage Sunday, and what is its significance?",
        "What is the role of a Certified Lay Minister in the UMC, and how do they contribute to the church?",
        "How does the UMC organize its local churches, particularly in terms of financial responsibilities?",
        "How does the UMC support community outreach through its local church organization?",
        "What are the UMC’s guidelines for organizing a new local church or mission congregation?"
    ]
    query = st.selectbox("Pick a question or type your own:", [""] + sample_questions, key="query_select") or st.text_input("Your question:", key="query_input")

    # Process query and display response
    if st.button("Submit"):
        with st.spinner("UMCOM AI Bot is thinking..."):
            # Retrieve chunks and response
            results = vector_store.similarity_search(query, k=5)
            st.session_state.retrieved_chunks = results  # Store retrieved chunks
            response = query_rag(query)
            st.session_state.query_history.append((query, response))  # Store query and response
            st.session_state.new_query_input = ""  # Clear the new query input
            st.rerun()  # Refresh to show response

    # Display query history
    for i, (q, r) in enumerate(st.session_state.query_history):
        st.markdown('<div class="query-card">', unsafe_allow_html=True)
        st.markdown(f'<div class="query-title">Query {i+1}: {q}</div>', unsafe_allow_html=True)
        st.markdown(r)
        # Display retrieved chunks in a dropdown
        if st.session_state.retrieved_chunks:
            chunk_options = [f"Chunk {j+1}: {chunk.page_content[:100]}..." for j, chunk in enumerate(st.session_state.retrieved_chunks)]
            selected_chunk = st.selectbox("View Retrieved Chunks:", ["Select a chunk"] + chunk_options, key=f"chunk_select_{i}")
            if selected_chunk != "Select a chunk":
                chunk_index = int(selected_chunk.split(":")[0].split(" ")[1]) - 1
                chunk = st.session_state.retrieved_chunks[chunk_index]
                st.markdown("**Retrieved Chunk Details:**")
                st.markdown(f"**Source:** {chunk.metadata['source']}")
                if chunk.metadata["part"]:
                    st.markdown(f"**Part:** {chunk.metadata['part']}")
                st.markdown(f"**Heading:** {chunk.metadata['heading']}")
                if chunk.metadata["paragraph_number"]:
                    st.markdown(f"**Paragraph {chunk.metadata['paragraph_number']}:** {chunk.metadata['paragraph_title']}")
                st.markdown(f"**Text:** {chunk.page_content}")
        st.markdown('</div>', unsafe_allow_html=True)
        st.markdown("---")

    # New prompt window with sample questions
    if st.session_state.query_history:  # Show only after at least one query
        st.markdown("### Explore More Insights")
        selected_query = st.selectbox("Pick another question or type your own:", [""] + sample_questions, key="new_query_select")
        custom_query = st.text_input("What else would you like to know?", value=st.session_state.new_query_input, key=f"new_query_input_{len(st.session_state.query_history)}")
        # Use custom query if provided, otherwise use selected query
        new_query = custom_query if custom_query else selected_query
        if st.button("Submit New Query"):
            if new_query:  # Ensure a query is provided
                with st.spinner("UMCOM AI Bot is thinking..."):
                    results = vector_store.similarity_search(new_query, k=5)
                    st.session_state.retrieved_chunks = results
                    response = query_rag(new_query)
                    st.session_state.query_history.append((new_query, response))
                    st.session_state.new_query_input = ""  # Clear the input for the next query
                    st.rerun()  # Refresh to show new response
            else:
                st.warning("Please select a question or enter a new one.")

# Sidebar with logo, text, and instructions (always shown)
st.sidebar.image("UMC_Logo.png", width=200)  # Adjusted logo size for sidebar
st.sidebar.markdown('<p class="umc-header">United Methodist Communications</p>', unsafe_allow_html=True)
st.sidebar.markdown('<div class="divider"></div>', unsafe_allow_html=True)  # Add divider
st.sidebar.header("Instructions")
st.sidebar.write("Enter a question about The United Methodist Church's Book of Discipline 2020-2024. The assistant will retrieve relevant sections and explain them in simple language, citing parts, paragraphs, and titles as needed.")
st.sidebar.header("About This AI Bot")
st.sidebar.markdown("""
### 
The United Methodist Church Discipline Assistant is an AI-powered tool designed to help you explore *The Book of Discipline of The United Methodist Church 2020-2024*. Whether you're seeking insights into the UMC's history, constitutional principles, organizational structure, social justice initiatives, or worship practices, this bot provides clear, user-friendly answers with precise citations. By leveraging Retrieval-Augmented Generation (RAG), the assistant retrieves relevant sections from the Book of Discipline and explains them in simple language, making it an invaluable resource for church leaders, members, and researchers.

**How It Can Help:**
- **Historical Insights:** Learn about the UMC’s origins, key figures like John Wesley, and its global expansion.
- **Constitutional Guidance:** Understand the UMC’s governance, inclusiveness, and social principles.
- **Practical Applications:** Explore guidelines for local church organization, Special Sundays, and community outreach.
- **Social and Ethical Stances:** Discover the UMC’s positions on issues like marriage, social justice, and more.

**Limitations:**
Please note that the dataset for this assistant covers *The Book of Discipline 2020-2024* up to Paragraph 269 on page 223. Content beyond this point, including later paragraphs or sections, is not included in the current dataset. For the most comprehensive information, refer directly to the full Book of Discipline.
""")
# Footer
st.markdown('<div class="footer">Powered by <a href="https://www.eksource.com/" target="_blank">ekSource Technologies, Inc</a></div>', unsafe_allow_html=True)