avatar

app.py

@@ -230,6 +230,70 @@ img[alt="robot"] {
     object-fit: contain !important;
 }
 
+/* 解决头像被遮挡问题：
+   增大对话框内边距（给左侧留空间用于显示头像），
+   或直接调整 bot 消息容器的 padding-left
+*/
+.bot.svelte-1nr59td.message,
+.bot.message {
+    position: relative;
+    /* 保证可以用于定位头像，和防止头像溢出 */
+}
+.bot.svelte-1nr59td.message .message.svelte-1nr59td.panel-full-width,
+.bot .message {
+    padding-left: 76px !important;  /* 留出空间给头像, 必须大于头像尺寸 */
+    min-height: 60px !important;    /* 行高大于等于头像高度 */
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.bot.svelte-1nr59td.message img,
+.bot.message img,
+.gr-chatbot img,
+.gradio-chatbot img,
+img[alt="assistant"],
+img[alt="robot"] {
+    position: absolute !important;
+    left: 10px !important;
+    top: 16px !important;
+    width: 60px !important;
+    height: 60px !important;
+    max-width: 60px !important;
+    max-height: 60px !important;
+    min-width: 60px !important;
+    min-height: 60px !important;
+    object-fit: contain !important;
+    z-index: 2;
+    background: #fff;   /* 可选, 防止边缘被遮盖 */
+    border-radius: 50%; /* 可选, 更像头像 */
+    box-shadow: 0 2px 8px rgba(44,49,146,0.06);
+}
+
+/* 防止 .message-content 再次覆盖 padding */
+.bot.svelte-1nr59td.message .message-content,
+.bot .message-content {
+    padding-left: 0 !important;
+}
+
+@media (max-width: 600px) {
+    .bot.svelte-1nr59td.message .message.svelte-1nr59td.panel-full-width,
+    .bot .message {
+        padding-left: 68px !important;
+    }
+    .bot.svelte-1nr59td.message img,
+    .bot.message img {
+        left: 4px !important;
+        top: 8px !important;
+        width: 44px !important;
+        height: 44px !important;
+        min-width: 44px !important;
+        min-height: 44px !important;
+        max-width: 44px !important;
+        max-height: 44px !important;
+    }
+}
+
+
 /* 另外，如果class名每次构建random变化，可以更换为更通用选择器，比如：
    .custom-avatar img { ... }
    或直接用img[src^='https://jcccy-brainvlm.hf.space/gradio_api/file='] {}