Update app.py

app.py

@@ -1,8 +1,7 @@
-import random
 import streamlit as st
 
 assistant_icon_path = "https://huggingface.co/spaces/randmimc/aitom/resolve/main/chat_icon/assistant.ico"
-user_icon_path = "chat_icon/user01.png"
+user_icon_path = "https://huggingface.co/spaces/randmimc/aitom/resolve/main/chat_icon/user01.png"
 
 # 세션 상태에서 approval_state 및 messages 초기화
 if "approval_state" not in st.session_state:
@@ -10,7 +9,7 @@ if "approval_state" not in st.session_state:
 if "messages" not in st.session_state:
     st.session_state.messages = []
 
-# Custom CSS to align messages
+# Custom CSS to align messages and wrap text
 st.markdown("""
     <style>
     .chat-container {
@@ -19,15 +18,17 @@ st.markdown("""
         margin-bottom: 10px;
     }
     .user-container {
-        justify-content: flex-start;
+        justify-content: flex-end;
     }
     .assistant-container {
-        justify-content: flex-end;
+        justify-content: flex-start;
     }
     .chat-bubble {
         padding: 10px;
         border-radius: 10px;
         max-width: 70%;
+        word-wrap: break-word;
+        white-space: pre-wrap;
     }
     .user-bubble {
         background-color: #d1e7dd;
@@ -51,16 +52,16 @@ for message in st.session_state.messages:
         st.markdown(
             f"""
             <div class="chat-container user-container">
-                <img src="{user_icon_path}" class="avatar">
                 <div class="chat-bubble user-bubble">{message["content"]}</div>
+                <img src="{user_icon_path}" class="avatar">
             </div>
             """, unsafe_allow_html=True)
     else:
         st.markdown(
             f"""
             <div class="chat-container assistant-container">
-                <div class="chat-bubble assistant-bubble">{message["content"]}</div>
                 <img src="{assistant_icon_path}" class="avatar">
+                <div class="chat-bubble assistant-bubble">{message["content"]}</div>
             </div>
             """, unsafe_allow_html=True)