Fix/unformatted message (#42)

## What Fix overflowed image inside the conversation message ## Screenshot ![iScreen Shoter - Google Chrome - 230713090829](https://github.com/CoderPush/chatlit/assets/65232736/d186a927-626a-4e4e-b9ff-1310f830b0b1)
CoderPush · Jul 13, 2023 · 309470e · 309470e
1 parent 6bf77f4
commit 309470e
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/render_conversation.py b/render_conversation.py
@@ -2,19 +2,29 @@
 
 
 def render_message(st, message, profile_url, role):
+    css = """
+        <style>
+            .conversation-message img {
+                max-width: 100%;
+            }
+        </style>
+        """
+
+    st.markdown(css, unsafe_allow_html=True)
+
     user_message = ""
     if role == "user":
         user_message = f"""
             <div style="width: 80%; display:flex; justify-content: flex-end; margin-left: auto; background-color: rgba(146, 108, 5, 0.1); margin-bottom: 20px; border-radius: 4px; padding: 10px">
-                <div style="margin-right: 10px"><p>{message}</p></div>
-                <img src={profile_url} width=32 height=32 alt="Profile Picture">
+                <div class="conversation-message" style="margin-right: 10px; overflow: auto; max-width: 100%"><p>{message}</p></div>
+                <div style="max-width: 15%"><img src={profile_url} width=32 height=32 alt="Profile Picture" style="display: block"></div>
             </div>
         """
     elif role == "assistant":
         user_message = f"""
             <div style="width: 80%; display:flex; background-color: rgba(28, 131, 225, 0.1); margin-bottom: 20px; border-radius: 4px; padding: 10px">
-                <div style="width: 32px; height: 32px">🤖</div>
-                <div style="margin-left: 10px"><p>{message}</p></div>
+                <div style="display: block; width: 32px; height: 32px">🤖</div>
+                <div class="conversation-message" style="margin-left: 10px; overflow: auto; max-width: 100%">{message}</div>
             </div>
         """