Upload app.py

app.py

@@ -348,38 +348,39 @@ def generate_response(message: str, history: List[List[str]], system_prompt: str
 
 # CSS to fix avatar distortion and positioning issues
 avatar_css = """
-/* Fix avatar image distortion and positioning */
-.avatar-container img {
+/* Fix avatar image distortion with multiple selectors for compatibility */
+#chatbot .avatar-container img,
+#chatbot .message-row img, 
+#chatbot .message img,
+#chatbot img[src*="twemoji"],
+#chatbot img[src*="huggingface"],
+.gr-chatbot img {
     width: 40px !important;
     height: 40px !important;
+    min-width: 40px !important;
+    min-height: 40px !important;
+    max-width: 40px !important;
+    max-height: 40px !important;
     border-radius: 50% !important;
     object-fit: cover !important;
+    aspect-ratio: 1 / 1 !important;
     margin: 0px !important;
     padding: 0px !important;
     display: block !important;
+    flex-shrink: 0 !important;
 }
 
-/* Fix message row positioning */
-.message-row img {
-    margin: 0px !important;
-    padding: 0px !important;
-}
-
-/* Additional fix for Gradio v5 centering issues */
-.message img {
+/* Force square containers */
+#chatbot .avatar-container,
+.gr-chatbot .avatar-container {
     width: 40px !important;
     height: 40px !important;
-    border-radius: 50% !important;
-    object-fit: cover !important;
-    margin: 0px !important;
-    padding: 0px !important;
-}
-
-/* Ensure proper aspect ratio for all chatbot images */
-#chatbot img {
-    aspect-ratio: 1 !important;
-    object-fit: cover !important;
-    border-radius: 50% !important;
+    min-width: 40px !important;
+    min-height: 40px !important;
+    flex-shrink: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
 }
 """