Update app.py

app.py

@@ -111,10 +111,8 @@ class FastGPTChat:
             return "", chat_history
 
 def create_chat_interface():
-    # 创建FastGPT聊天实例
     fastgpt_chat = FastGPTChat()
     
-    # 创建美化后的Gradio界面
     with gr.Blocks(
         title="AI用药咨询助手",
         css="""
@@ -170,42 +168,55 @@ def create_chat_interface():
             background-color: #ff6b81 !important;
             transform: translateY(-2px);
         }
-        /* 优化对话区域样式 */
         .chatbot {
             background-color: #f8f9fa;
             border-radius: 10px;
             padding: 15px;
             margin-bottom: 20px;
         }
-/* 用户消息样式 */
-.chatbot .user-message {
-    background-color: #fce4ec !important;  /* 浅粉色背景 */
-    border-radius: 15px 15px 2px 15px !important;
-    padding: 10px 15px !important;
-    margin: 5px 0 !important;
-    max-width: 85% !important;
-    float: right !important;
-    clear: both !important;
-    border: 1px solid #f48fb1 !important;  /* 稍深一点的粉色边框 */
-}
+        /* 移除消息背景的白色遮盖，优化对话样式 */
+        .chatbot > div {
+            background: transparent !important;
+        }
+        /* 用户消息样式 */
+        .chatbot .user-message {
+            background-color: #fce4ec !important;
+            border-radius: 15px 15px 2px 15px !important;
+            padding: 12px 18px !important;
+            margin: 8px 0 !important;
+            max-width: 85% !important;
+            float: right !important;
+            clear: both !important;
+            border: 1px solid #f48fb1 !important;
+            color: #1a1a1a !important;
+            font-size: 15px !important;
+        }
         /* AI响应消息样式 */
         .chatbot .bot-message {
-            background-color: #ffffff !important;
+            background-color: #e8f5e9 !important;
             border-radius: 15px 15px 15px 2px !important;
-            padding: 10px 15px !important;
-            margin: 5px 0 !important;
+            padding: 12px 18px !important;
+            margin: 8px 0 !important;
             max-width: 85% !important;
             float: left !important;
             clear: both !important;
-            border: 1px solid #e0e0e0 !important;
-        }
-        /* 消息文本样式 */
-        .chatbot .message-text {
+            border: 1px solid #a5d6a7 !important;
+            color: #1a1a1a !important;
             font-size: 15px !important;
-            line-height: 1.5 !important;
-            color: #2c3e50 !important;
-            margin: 0 !important;
-            word-wrap: break-word !important;
+        }
+        /* 消息容器样式 */
+        .chatbot > div > div {
+            padding: 0 !important;
+            gap: 2rem !important;
+        }
+        /* 头像样式 */
+        .chatbot span.avatar {
+            padding: 8px !important;
+            margin: 8px !important;
+        }
+        /* 确保消息之间有适当的间距 */
+        .chatbot > div > div:not(:last-child) {
+            margin-bottom: 15px !important;
         }
         """
     ) as interface:
@@ -258,19 +269,16 @@ def create_chat_interface():
             api_name="chat"
         )
         
-        # 添加回车发送支持
         message.submit(
             fastgpt_chat.chat,
             inputs=[message, chatbot],
             outputs=[message, chatbot]
         )
         
-        # 清空对话
         clear.click(lambda: None, None, chatbot, queue=False)
         
     return interface
 
-# 使用示例
 if __name__ == "__main__":
     demo = create_chat_interface()
     demo.launch(debug=True)