Update app.py

app.py

@@ -28,7 +28,7 @@ qa_engine = QAEngine()
 os.makedirs("temp", exist_ok=True)
 
 # Sidebar for file upload
-st.sidebar.header("Upload a Document")
+st.sidebar.header("📂 Upload a Document")
 uploaded_file = st.sidebar.file_uploader("Choose a file", type=["pdf", "docx", "html", "pptx", "txt"])
 
 # Initialize chat memory
@@ -44,66 +44,45 @@ if uploaded_file and "document_uploaded" not in st.session_state:
     with open(file_path, "wb") as f:
         f.write(uploaded_file.read())
 
-    st.sidebar.success("File uploaded successfully!")
+    st.sidebar.success("✅ File uploaded successfully!")
 
-    with st.spinner("Processing document..."):
+    with st.spinner("🔄 Processing document..."):
         document_processor.process_document(file_path)
 
-    st.sidebar.success("Document processed successfully!")
+    st.sidebar.success("✅ Document processed successfully!")
     st.session_state["document_uploaded"] = True
 
 # Chat UI Header
-st.markdown("<h2 style='text-align: center;'>AI Chat Assistant</h2>", unsafe_allow_html=True)
-st.markdown("---")
+st.title("💬 AI Chat Assistant")
+st.divider()
 
-# Display chat history with avatars
+# Display chat history
 for message in memory_storage.messages:
     role = "user" if message.type == "human" else "assistant"
     avatar = user_avatar if role == "user" else ai_avatar  # Assign appropriate avatar
 
-    st.markdown(
-        f"""
-        <div style="display: flex; align-items: center; margin-bottom: 10px;">
-            <img src="data:image/jpeg;base64,{avatar}" width="40" height="40" style="border-radius: 50%; margin-right: 10px;">
-            <div style="background-color: #f1f1f1; padding: 10px; border-radius: 10px; max-width: 80%;">{message.content}</div>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
+    with st.chat_message(role, avatar=f"data:image/jpeg;base64,{avatar}"):
+        st.markdown(message.content)
 
 # User input at the bottom
-user_input = st.chat_input("Ask me anything...")
+user_input = st.chat_input("Type your message here...")
 
 if user_input:
     memory_storage.add_user_message(user_input)
 
-    with st.markdown(
-        f"""
-        <div style="display: flex; align-items: center; margin-bottom: 10px;">
-            <img src="data:image/jpeg;base64,{user_avatar}" width="40" height="40" style="border-radius: 50%; margin-right: 10px;">
-            <div style="background-color: #d9f7be; padding: 10px; border-radius: 10px; max-width: 80%;">{user_input}</div>
-        </div>
-        """,
-        unsafe_allow_html=True
-    ):
-        pass
-
-    with st.spinner("Generating response..."):
+    # Display user message
+    with st.chat_message("user", avatar=f"data:image/jpeg;base64,{user_avatar}"):
+        st.markdown(user_input)
+
+    with st.spinner("🤖 Thinking..."):
         if st.session_state.get("document_uploaded", False):
             answer = qa_engine.query(user_input)
         else:
             answer = llm_processor.generate_answer("", user_input)
-            st.warning("No document uploaded. This response is generated from general AI knowledge and may not be document-specific.")
+            st.warning("⚠️ No document uploaded. Response is from general AI knowledge.")
 
     memory_storage.add_ai_message(answer)
 
-    with st.markdown(
-        f"""
-        <div style="display: flex; align-items: center; margin-bottom: 10px;">
-            <img src="data:image/jpeg;base64,{ai_avatar}" width="40" height="40" style="border-radius: 50%; margin-right: 10px;">
-            <div style="background-color: #e6f7ff; padding: 10px; border-radius: 10px; max-width: 80%;">{answer.content}</div>
-        </div>
-        """,
-        unsafe_allow_html=True
-    ):
-        pass
+    # Display AI response
+    with st.chat_message("assistant", avatar=f"data:image/jpeg;base64,{ai_avatar}"):
+        st.markdown(answer.content)