Update app.py

app.py

@@ -335,6 +335,11 @@ def clear_user_input():
     
 from datetime import datetime
 
+def clear_user_input():
+    st.session_state.user_input = ""
+
+from datetime import datetime
+
 def clear_user_input():
     st.session_state.user_input = ""
 
@@ -357,39 +362,47 @@ def main():
 
     st.header("Chat with MODTRAN Documents 📄")
 
-    # Add custom CSS for chat bubbles
+    # Inject CSS for chat-style alignment
     st.markdown("""
         <style>
+            .chat-container {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+            }
             .user-bubble {
-                background-color: #f0f0f0;
+                align-self: flex-end;
+                background-color: rgba(30, 30, 30, 0.85);
+                color: white;
                 padding: 1rem;
-                margin: 0.5rem 0;
-                border-radius: 1rem;
-                color: #333;
+                border-radius: 1rem 0.5rem 1rem 1rem;
+                max-width: 80%;
             }
             .bot-bubble {
+                align-self: flex-start;
                 background-color: #e8f4fd;
-                padding: 1rem;
-                margin: 0.5rem 0;
-                border-radius: 1rem;
                 color: #111;
+                padding: 1rem;
+                border-radius: 0.5rem 1rem 1rem 1rem;
+                max-width: 80%;
             }
             .rating-line {
-                color: #ffaa00;
                 font-weight: bold;
+                color: #ffaa00;
                 margin-top: -0.5rem;
                 margin-bottom: 1rem;
+                font-size: 0.95rem;
             }
             .feedback-counter {
-                color: #444;
-                font-size: 0.9rem;
-                margin-top: 1rem;
                 font-style: italic;
+                color: #666;
+                font-size: 0.9rem;
+                margin: 1rem 0;
             }
         </style>
     """, unsafe_allow_html=True)
 
-    # Preload documents and agent
+    # Load chatbot agent and vectorstore if not ready
     if not st.session_state.chat_ready:
         with st.spinner("Loading MODTRAN document..."):
             preload_modtran_document()
@@ -397,16 +410,19 @@ def main():
             st.session_state.chat_ready = True
             st.success("MODTRAN User Manual loaded successfully!")
 
-    # Display entire chat history
+    # 🟦 Chat History Output
+    st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+
     for i, exchange in enumerate(st.session_state.chat_history):
         st.markdown(f'<div class="user-bubble"><strong>You:</strong> {exchange["user"]}</div>', unsafe_allow_html=True)
         st.markdown(f'<div class="bot-bubble"><strong>MODTRAN Bot:</strong> {exchange["bot"]}</div>', unsafe_allow_html=True)
 
+        # Show rating if available
         if "rating" in exchange:
             st.markdown(f'<div class="rating-line">⭐️ You rated this: {exchange["rating"]}/5</div>', unsafe_allow_html=True)
 
+        # Show form for last unanswered item
         elif i == len(st.session_state.chat_history) - 1:
-            # Show feedback form for most recent response
             with st.form(key=f"feedback_form_{i}"):
                 rating = st.radio(
                     "Rate this response:",
@@ -434,10 +450,12 @@ def main():
                     st.session_state.feedback_submitted = True
                     st.rerun()
 
-    # Show feedback counter
-    #st.markdown(f'<div class="feedback-counter">📄 Feedbacks collected: <strong>{len(st.session_state.feedback_log)} / 5</strong></div>', unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
+
+    # Feedback status
+    st.markdown(f'<div class="feedback-counter">📄 Feedbacks collected: <strong>{len(st.session_state.feedback_log)} / 5</strong></div>', unsafe_allow_html=True)
+
 
-    # Ask next question
     user_question = st.text_input("Ask your next question:", key="user_input")
 
     if user_question and user_question != st.session_state.last_answered_question:
@@ -448,7 +466,6 @@ def main():
             except Exception as e:
                 response = f"⚠️ Something went wrong: {e}"
 
-        # Save chat
         st.session_state.chat_history.append({
             "user": user_question,
             "bot": response
@@ -457,8 +474,6 @@ def main():
         st.session_state.last_answered_question = user_question
         st.rerun()
 
-
-
 if __name__ == "__main__":
     load_environment()
     main()