Update app.py

app.py

@@ -5,6 +5,15 @@ from helpers import text_to_speech, autoplay_audio, speech_to_text, get_api_key
 from generate_answer import base_model_chatbot, with_pdf_chatbot
 from audio_recorder_streamlit import audio_recorder
 from streamlit_float import *
+import streamlit.components.v1 as components
+
+# Load Custom CSS
+def load_css(file_path):
+    with open(file_path) as f:
+        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+
+# Load your CSS file
+load_css("style.css")
 
 def main(answer_mode: str):
     # Float feature initialization
@@ -32,8 +41,9 @@ def main(answer_mode: str):
         audio_bytes = audio_recorder()
 
     for message in st.session_state.messages:
+        role_class = "assistant" if message["role"] == "assistant" else "user"
         with st.chat_message(message["role"]):
-            st.write(message["content"])
+            st.markdown(f'<div class="chat-message {role_class}">{message["content"]}</div>', unsafe_allow_html=True)
 
     if audio_bytes:
         # Write the audio bytes to a file
@@ -68,9 +78,9 @@ def main(answer_mode: str):
             st.session_state.messages.append({"role": "assistant", "content": final_response})
             os.remove(audio_file)
 
-
     # Float the footer container and provide CSS to target it with
     footer_container.float("bottom: 0rem;")
+    footer_container.markdown('<div class="footer"><p class="footer-text">Powered by OpenAI API | Streamlit</p></div>', unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main(answer_mode='base_model')  # Or: answer_mode='pdf_chat'