fix: resolve black code block background and Ant Design warnings

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
This commit is contained in:
AI Clinical Dev Team
2025-10-10 22:24:09 +08:00
parent 8b07a3f822
commit 0f0940534f
2 changed files with 9 additions and 4 deletions

View File

@@ -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$/, '')}

View File

@@ -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}