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:
@@ -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$/, '')}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user