Rename option1_app.py to option2_app.py

option1_app.py → option2_app.py

@@ -4,9 +4,24 @@ from rag_query import query_rag, vector_store  # Added vector_store import
 # Custom CSS for styling
 st.markdown("""
     <style>
-    .main {background-color: #f5f5f5;}
-    .stTextInput > div > div > input {border: 2px solid #4CAF50; border-radius: 5px;}
-    .stSelectbox > div > div > select {border: 2px solid #4CAF50; border-radius: 5px;}
+     @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;
@@ -14,6 +29,7 @@ st.markdown("""
         border: none;
         padding: 10px 20px;
         font-size: 16px;
+        transition: background-color 0.3s;
     }
     .stButton > button:hover {
         background-color: #4CAF50; /* Green on hover */
@@ -26,6 +42,7 @@ st.markdown("""
         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 */
@@ -44,6 +61,55 @@ st.markdown("""
         margin-top: 20px;
         margin-bottom: 20px;
     }
+    .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)
 
@@ -114,7 +180,7 @@ if st.session_state.authenticated:
     if st.button("Submit"):
         with st.spinner("UMC AI Bot is thinking..."):
             # Retrieve chunks and response
-            results = vector_store.similarity_search(query, k=5)  # Assuming vector_store is accessible
+            results = vector_store.similarity_search(query, k=8)  # Assuming vector_store is accessible
             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
@@ -123,7 +189,8 @@ if st.session_state.authenticated:
             
     # Display query history
     for i, (q, r) in enumerate(st.session_state.query_history):
-        st.markdown(f"**Query {i+1}: {q}**")
+        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:
@@ -140,6 +207,7 @@ if st.session_state.authenticated:
                 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
@@ -167,5 +235,16 @@ st.sidebar.markdown('<p class="umc-header">United Methodist Communications</p>',
 st.sidebar.markdown('<div class="spacer"></div>', unsafe_allow_html=True)  # Add space
 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")
-st.sidebar.write("Powered by ekSource Technologies, Inc")
+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)