Update app.py

app.py

@@ -29,34 +29,125 @@ st.markdown("""
 <style>
 .main-title {
     font-size: 2.5rem;
-    color: #FF5722;
+    color: #c0392b;
     text-align: center;
     margin-bottom: 1rem;
 }
+
+/* Button styling */
 .stButton>button {
-    background-color: #4CAF50 !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 8px !important;
+    background-color: #fff0f0 !important;
+    color: #3f51b5 !important;
+    border: 1px solid #e1e4f2 !important;
+    border-radius: 20px !important;
     padding: 8px 16px !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+/* Form submit button specific styling */
+button[type="submit"], 
+.stFormSubmit>button, 
+[data-testid="stFormSubmitButton"]>button {
+    background-color: #fff0f0 !important;
+    color: #3f51b5 !important;
 }
 .stButton>button:hover {
-    background-color: #45A049 !important;
+    background-color: #fafbff !important;
+    border-color: #c5cae9 !important;
 }
-/* Default input box - Green */
+
+/* Input field styling */
 div[data-baseweb="input"] {
-    border: 2px solid #4CAF50 !important;
+    border: 1px solid #fff0f0 !important;
     border-radius: 8px !important;
+    background-color: #ffffff !important;
 }
-/* While editing - Red */
 div[data-baseweb="input"]:focus-within {
-    border: 2px solid #FF5722 !important;
+    border: 1px solid #3f51b5 !important;
+}
+div[data-baseweb="input"]:active {
+    border: 1px solid #fff0f0 !important;
+}
+
+/* Style the st.info boxes */
+div.stInfo {
+    background-color: #f8faff !important;
+    color: #3f51b5 !important;
+    border: 1px solid #e1e4f2 !important;
     border-radius: 8px !important;
 }
+
+/* COMBINED SCROLL CONTAINER */
+.questions-scroll-container {
+    width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.questions-scroll-container::-webkit-scrollbar {
+    display: none;
+}
+
+/* Inner content that holds both rows */
+.questions-content {
+    display: inline-flex;
+    flex-direction: column;
+    min-width: max-content;
+    gap: 10px;
+    padding: 5px 0;
+}
+
+/* Individual rows */
+.questions-row {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+/* Placeholder for buttons */
+.button-placeholder {
+    min-height: 38px;
+    min-width: 120px;
+    margin: 0 5px;
+}
 </style>
 <div class="main-title">Spirituality Q&A</div>
 """, unsafe_allow_html=True)
 
+# Function to handle query selection
+def set_query(query):
+    st.session_state.last_query = query
+    st.session_state.submit_clicked = True
+    st.rerun()
+
+# Function to group questions into rows based on length
+def group_buttons(questions, max_chars_per_row=100):
+    rows = []
+    current_row = []
+    current_length = 0
+    
+    for q in questions:
+        # Add some buffer for button padding/margins
+        q_length = len(q) + 5
+        
+        if current_length + q_length > max_chars_per_row and current_row:
+            rows.append(current_row)
+            current_row = [q]
+            current_length = q_length
+        else:
+            current_row.append(q)
+            current_length += q_length
+    
+    if current_row:
+        rows.append(current_row)
+    
+    return rows
+
 # Handle initialization and success message timing
 init_message = st.empty()
 
@@ -82,17 +173,47 @@ elif st.session_state.init_time is not None:
         init_message.empty()
         st.session_state.init_time = None
 
-# Function to handle form submission
+# All common questions in a single list
+common_questions = [
+    "What is the Atman or the soul?",
+    "Are there rebirths?",
+    "What is Karma?",
+    "What is the ultimate truth?",
+    "What is Swami Vivekananda's opinion about the SELF?",
+    "Explain moksha or salvation. is that for real?",
+    "Destiny or free will?",
+    "What is the ultimate goal of human life?",
+    "Do we really die?",
+    "How can you attain self-realization?"
+]
+
+# Display heading for common questions
+st.markdown("### Common questions to try:")
+
+# Group questions into rows
+question_rows = group_buttons(common_questions, max_chars_per_row=80)
+
+# Create buttons for each row
+for row_idx, row in enumerate(question_rows):
+    cols = st.columns(len(row))
+    for i, (col, q) in enumerate(zip(cols, row)):
+        with col:
+            if st.button(q, key=f"r{row_idx}_q{i}", use_container_width=True):
+                set_query(q)
+
+# Function to handle form submission with enter key handling
 def handle_form_submit():
     if st.session_state.query_input and st.session_state.query_input.strip():
         st.session_state.last_query = st.session_state.query_input.strip()
         st.session_state.submit_clicked = True
-        # Increment the form key to force a reset
-        st.session_state.form_key += 1
+        # Clear input and focus out to reset border color
+        st.session_state.query_input = ""
+        st.rerun()
 
 # Create a form with dynamic key for resetting
 with st.form(key=f"query_form_{st.session_state.form_key}"):
-    query = st.text_input("Ask your question:", key="query_input", placeholder="Press enter to submit question")
+    query = st.text_input("Ask your question:", key="query_input", 
+                         placeholder="Press enter to submit your question")
     submit_button = st.form_submit_button("Get Answer", on_click=handle_form_submit)
 
 # Display the current question if there is one
@@ -114,6 +235,11 @@ if st.session_state.submit_clicked and st.session_state.last_query:
     with st.spinner("Processing your question..."):
         try:
             result = process_query(st.session_state.last_query, top_k=top_k, word_limit=word_limit)
+            # Mock answer for testing
+            result = {
+                "answer_with_rag": "🔹 This is a placeholder answer for testing UI.",
+                "citations": "🔹 Sample Source 1\n🔹 Sample Source 2"
+            }
             st.subheader("Answer:")
             st.write(result["answer_with_rag"])
             st.subheader("Sources:")