From 0f0940534f9c0ad65a2cbd793ac55cb4c1ae19d9 Mon Sep 17 00:00:00 2001
From: AI Clinical Dev Team <dev@ai-clinical.com>
Date: Fri, 10 Oct 2025 22:24:09 +0800
Subject: [PATCH] fix: resolve black code block background and Ant Design
 warnings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue 1: Black background appearing in chat (CRITICAL)
- Cause: Using vscDarkPlus (dark theme) for code syntax highlighting
- Solution: Changed to oneLight (light theme) + custom styling
- Result: Code blocks now have light gray background matching UI

Issue 2: Ant Design deprecation warnings
- Removed deprecated 'popupClassName' from Select
- Removed deprecated 'overlayStyle' from Tooltip
- These warnings don't affect functionality but cleaned up console

Changes:
- MessageList.tsx: vscDarkPlus 鈫?oneLight + custom styles
- ModelSelector.tsx: Removed deprecated props

Test: Ask AI to write code, should see light-themed code blocks
---
 frontend/src/components/chat/MessageList.tsx   | 11 +++++++++--
 frontend/src/components/chat/ModelSelector.tsx |  2 --
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/chat/MessageList.tsx b/frontend/src/components/chat/MessageList.tsx
index 56cd53ad..d2577569 100644
--- a/frontend/src/components/chat/MessageList.tsx
+++ b/frontend/src/components/chat/MessageList.tsx
@@ -3,7 +3,7 @@ import { Avatar, Typography, Space, Tag } from 'antd';
 import { UserOutlined, RobotOutlined, LoadingOutlined } from '@ant-design/icons';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import remarkGfm from 'remark-gfm';
 import './MessageList.css';
 
@@ -47,9 +47,16 @@ const MessageList: React.FC<MessageListProps> = ({
       const match = /language-(\w+)/.exec(className || '');
       return !inline && match ? (
         <SyntaxHighlighter
-          style={vscDarkPlus}
+          style={oneLight}
           language={match[1]}
           PreTag="div"
+          customStyle={{
+            backgroundColor: '#fafafa',
+            border: '1px solid #e8e8e8',
+            borderRadius: '6px',
+            fontSize: '13px',
+            margin: '12px 0',
+          }}
           {...props}
         >
           {String(children).replace(/\n$/, '')}
diff --git a/frontend/src/components/chat/ModelSelector.tsx b/frontend/src/components/chat/ModelSelector.tsx
index a3108bdf..a06148da 100644
--- a/frontend/src/components/chat/ModelSelector.tsx
+++ b/frontend/src/components/chat/ModelSelector.tsx
@@ -68,7 +68,6 @@ const ModelSelector: React.FC<ModelSelectorProps> = ({
           disabled={disabled}
           style={{ width: 200 }}
           className="model-selector"
-          popupClassName="model-selector-dropdown"
         >
           {models.map(model => (
             <Option
@@ -118,7 +117,6 @@ const ModelSelector: React.FC<ModelSelectorProps> = ({
                 </div>
               </div>
             }
-            overlayStyle={{ maxWidth: 300 }}
           >
             <Tag
               color={currentModel.color}