Update app.py

app.py

@@ -226,33 +226,38 @@ def submit():
         if st.session_state.pipeline is None:
             st.error("❌ ไม่สามารถเชื่อมต่อกับระบบได้ กรุณาลองใหม่อีกครั้ง")
             return
-            
+
+        # Add user query to chat history first (so the spinner appears after it)
+        st.session_state.chat_history.append(("user", st.session_state.query_input))
+        
         try:
-            st.session_state.loading = True
-            st.rerun()  # Trigger rerun to show loading state
-            
-            result = st.session_state.pipeline.process_query(st.session_state.query_input)
-            
-            # Update session state
-            st.session_state.chat_history.append(("user", st.session_state.query_input))
+            # Display spinner in the correct position (after user input)
+            with st.container():
+                st.markdown(f"""
+                    <div class="chat-message user-message">
+                        <strong>🧑 คำถาม:</strong><br>
+                        {st.session_state.query_input}
+                    </div>
+                """, unsafe_allow_html=True)
+
+                with st.spinner("🔍 กำลังค้นหาคำตอบ..."):
+                    result = st.session_state.pipeline.process_query(st.session_state.query_input)
+
+            # Append the assistant's response
             st.session_state.chat_history.append(("assistant", {
                 "answer": result["answer"],
                 "documents": result["documents"],
                 "query_info": result["query_info"]
             }))
-            
-            # Reset states
+
+            # Reset input
             st.session_state.query_input = ""
-            st.session_state.loading = False
-            
-            # Rerun to update the UI
-            st.rerun()
-                
+
         except Exception as e:
             st.error(f"❌ เกิดข้อผิดพลาด: {str(e)}")
-            st.session_state.loading = False
     else:
         st.warning("⚠️ กรุณาระบุคำถาม")
+
         
 def main():
     # Page config
@@ -275,9 +280,6 @@ def main():
         
     if 'query' not in st.session_state:
         st.session_state.query = ''
-    
-    if 'loading' not in st.session_state:
-        st.session_state.loading = False
 
     # Load QA history at startup
     if 'qa_history_loaded' not in st.session_state:
@@ -300,74 +302,55 @@ def main():
     chat_col, info_col = st.columns([7, 3])
     
     with chat_col:
-        # Chat container for displaying messages
-        chat_container = st.container()
-        
-        # Input container at the bottom
-        input_container = st.container()
-        
-        # Display chat history in chat container
-        with chat_container:
-            for i, (role, content) in enumerate(st.session_state.chat_history):
-                if role == "user":
-                    st.markdown(f"""
-                        <div class="chat-message user-message">
-                            <strong>🧑 คำถาม:</strong><br>
-                            {content}
-                        </div>
-                    """, unsafe_allow_html=True)
-                else:
-                    st.markdown(f"""
-                        <div class="chat-message assistant-message">
-                            <strong>🤖 คำตอบ:</strong><br>
-                            {content['answer']}
-                        </div>
-                    """, unsafe_allow_html=True)
-                    
-                    # Add expanders right after the answer
-                    with st.expander("📚 แสดงข้อมูลอ้างอิง", expanded=False):
-                        for i, doc in enumerate(content['documents'], 1):
-                            st.markdown(f"""
-                                <div style="padding: 1rem; background-color: #F3F4F6; border-radius: 8px; margin: 0.5rem 0;">
-                                    <strong>เอกสารที่ {i}:</strong><br>
-                                    {doc.content}
-                                </div>
-                            """, unsafe_allow_html=True)
-                    
-                    with st.expander("🔍 รายละเอียดการวิเคราะห์คำถาม", expanded=False):
-                        st.json(content['query_info'])
+        # Chat history display first
+        for i, (role, content) in enumerate(st.session_state.chat_history):
+            if role == "user":
+                st.markdown(f"""
+                    <div class="chat-message user-message">
+                        <strong>🧑 คำถาม:</strong><br>
+                        {content}
+                    </div>
+                """, unsafe_allow_html=True)
+            else:
+                st.markdown(f"""
+                    <div class="chat-message assistant-message">
+                        <strong>🤖 คำตอบ:</strong><br>
+                        {content['answer']}
+                    </div>
+                """, unsafe_allow_html=True)
+                
+                # Add expanders right after the answer
+                with st.expander("📚 แสดงข้อมูลอ้างอิง", expanded=False):
+                    for i, doc in enumerate(content['documents'], 1):
+                        st.markdown(f"""
+                            <div style="padding: 1rem; background-color: #000000; border-radius: 8px; margin: 0.5rem 0;">
+                                <strong>เอกสารที่ {i}:</strong><br>
+                                {doc.content}
+                            </div>
+                        """, unsafe_allow_html=True)
+                
+                with st.expander("🔍 รายละเอียดการวิเคราะห์คำถาม", expanded=False):
+                    st.json(content['query_info'])
 
-        # Input section
-        with input_container:
+        # Input section at the bottom
+        with st.container():
+            # Replace this section in your code:
             st.markdown("""
-                <div style="margin-top: 2rem;">
-                    <label for="query_input" style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; display: block;">
-                        <span style="color: #1F2937; border-left: 4px solid #2563EB; padding-left: 0.8rem;">
-                            โปรดระบุคำถามเกี่ยวกับปฏิทินการศึกษา:
-                        </span>
-                    </label>
-                </div>
+                <label for="query_input" style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; display: block;">
+                    <span style="color: #ffffff; border-left: 4px solid #ffffff; padding-left: 0.8rem;">
+                        โปรดระบุคำถามเกี่ยวกับปฏิทินการศึกษา:
+                    </span>
+                </label>
             """, unsafe_allow_html=True)
             
-            # Loading indicator placeholder
-            loading_placeholder = st.empty()
-            
             # Text input with enter key handling
-            query = st.text_input(
+            st.text_input(
                 "",
                 key="query_input",
                 placeholder="เช่น: วันสุดท้ายของการสอบปากเปล่าในภาคเรียนที่ 1/2567 คือวันที่เท่าไร?",
                 on_change=submit
             )
 
-            # Show loading indicator in the correct position
-            if st.session_state.get('loading', False):
-                loading_placeholder.markdown("""
-                    <div style="color: #2563EB; margin: 0.5rem 0;">
-                        🔍 กำลังค้นหาคำตอบ...
-                    </div>
-                """, unsafe_allow_html=True)
-
             # Button layout
             col1, col2, col3 = st.columns([1, 1, 4])
             
@@ -379,33 +362,33 @@ def main():
                     st.session_state.chat_history = []
                     st.rerun()
 
-    # Info column
+    # Info column remains the same
     with info_col:
         st.markdown("""
             <div style="background-color: #F9FAFB; padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem;">
                 <h3 style="color: #1E3A8A;">ℹ️ เกี่ยวกับระบบ</h3>
-                <p style="color: #1F2937;">
+                <p style="color: #000000;">
                     ระบบนี้ใช้เทคโนโลยี <strong>RAG (Retrieval-Augmented Generation)</strong> 
                     ในการค้นหาและตอบคำถามเกี่ยวกับปฏิทินการศึกษา
                 </p>
                 <h4 style="color: #1E3A8A; margin-top: 1rem;">สามารถสอบถามข้อมูลเกี่ยวกับ:</h4>
                 <ul style="list-style-type: none; padding-left: 0;">
-                    <li style="color: #1F2937; margin-bottom: 0.5rem;">📅 กำหนดการต่างๆ ในปฏิทินการศึกษา</li>
-                    <li style="color: #1F2937; margin-bottom: 0.5rem;">🎯 วันสำคัญและกิจกรรม</li>
-                    <li style="color: #1F2937; margin-bottom: 0.5rem;">📝 การลงทะเบียนเรียน</li>
-                    <li style="color: #1F2937; margin-bottom: 0.5rem;">📚 กำหนดการสอบ</li>
-                    <li style="color: #1F2937; margin-bottom: 0.5rem;">🏖️ วันหยุดการศึกษา</li>
+                    <li style="color: #000000; margin-bottom: 0.5rem;">📅 กำ���นดการต่างๆ ในปฏิทินการศึกษา</li>
+                    <li style="color: #000000; margin-bottom: 0.5rem;">🎯 วันสำคัญและกิจกรรม</li>
+                    <li style="color: #000000; margin-bottom: 0.5rem;">📝 การลงทะเบียนเรียน</li>
+                    <li style="color: #000000; margin-bottom: 0.5rem;">📚 กำหนดการสอบ</li>
+                    <li style="color: #000000; margin-bottom: 0.5rem;">🏖️ วันหยุดการศึกษา</li>
                 </ul>
             </div>
         """, unsafe_allow_html=True)
         
         st.markdown("""
-            <div style="background-color: #F9FAFB; padding: 1.5rem; border-radius: 12px;">
+            <div style="background-color: #f9fafb; padding: 1.5rem; border-radius: 12px;">
                 <h3 style="color: #1E3A8A;">🔄 สถานะระบบ</h3>
                 <div style="margin-top: 1rem;">
-                    <p><strong style="color: #1F2937;">⏰ เวลาปัจจุบัน:</strong><br>
-                    <span style="color: #1F2937;">{}</span></p>
-                    <p><strong style="color: #1F2937;">📡 สถานะระบบ:</strong><br>
+                    <p><strong style="color: #000000;">⏰ เวลาปัจจุบัน:</strong><br>
+                    <span style="color: #000000;">{}</span></p>
+                    <p><strong style="color: #000000;">📡 สถานะระบบ:</strong><br>
                     <span class="status-indicator {}">
                         {} {}
                     </span></p>