Update htmlTemplates.py

htmlTemplates.py

@@ -26,19 +26,25 @@ css = '''
 '''
 
 bot_template = '''
-<div class="chat-message bot">
-    <div class="avatar">
-        <img src="https://i.imgur.com/AJ122mE.png" style="max-height: 78px; max-width: 78px; border-radius: 50%; object-fit: cover;">
+<div style="display: flex; align-items: center; margin-bottom: 10px; background-color: #B22222; padding: 10px; border-radius: 10px; border: 1px solid #7A0000;">
+    <div style="flex-shrink: 0; margin-right: 10px;">
+        <img src="https://raw.githubusercontent.com/AalaaAyman24/Test/main/chatbot.png" 
+             style="max-height: 50px; max-width: 50px; object-fit: cover;">
+    </div>
+    <div style="background-color: #B22222; color: white; padding: 10px; border-radius: 10px; max-width: 75%; word-wrap: break-word; overflow-wrap: break-word;">
+        {{MSG}}
     </div>
-    <div class="message">{{MSG}}</div>
 </div>
 '''
 
 user_template = '''
-<div class="chat-message user">
-    <div class="avatar">
-        <img src="https://i.imgur.com/Jy4Pssw.png">
+<div style="display: flex; align-items: center; margin-bottom: 10px; justify-content: flex-end;">
+    <div style="flex-shrink: 0; margin-left: 10px;">
+        <img src="https://raw.githubusercontent.com/AalaaAyman24/Test/main/question.png"
+             style="max-height: 50px; max-width: 50px; border-radius: 50%; object-fit: cover;">
     </div>    
-    <div class="message">{{MSG}}</div>
+    <div style="background-color: #757882; color: white; padding: 10px; border-radius: 10px; max-width: 75%; word-wrap: break-word; overflow-wrap: break-word;">
+        {{MSG}}
+    </div>
 </div>
 '''