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 { UserOutlined, RobotOutlined, LoadingOutlined } from '@ant-design/icons';
|
||||||
import ReactMarkdown from 'react-markdown';
|
import ReactMarkdown from 'react-markdown';
|
||||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
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 remarkGfm from 'remark-gfm';
|
||||||
import './MessageList.css';
|
import './MessageList.css';
|
||||||
|
|
||||||
@@ -47,9 +47,16 @@ const MessageList: React.FC<MessageListProps> = ({
|
|||||||
const match = /language-(\w+)/.exec(className || '');
|
const match = /language-(\w+)/.exec(className || '');
|
||||||
return !inline && match ? (
|
return !inline && match ? (
|
||||||
<SyntaxHighlighter
|
<SyntaxHighlighter
|
||||||
style={vscDarkPlus}
|
style={oneLight}
|
||||||
language={match[1]}
|
language={match[1]}
|
||||||
PreTag="div"
|
PreTag="div"
|
||||||
|
customStyle={{
|
||||||
|
backgroundColor: '#fafafa',
|
||||||
|
border: '1px solid #e8e8e8',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '13px',
|
||||||
|
margin: '12px 0',
|
||||||
|
}}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{String(children).replace(/\n$/, '')}
|
{String(children).replace(/\n$/, '')}
|
||||||
|
|||||||
@@ -68,7 +68,6 @@ const ModelSelector: React.FC<ModelSelectorProps> = ({
|
|||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
style={{ width: 200 }}
|
style={{ width: 200 }}
|
||||||
className="model-selector"
|
className="model-selector"
|
||||||
popupClassName="model-selector-dropdown"
|
|
||||||
>
|
>
|
||||||
{models.map(model => (
|
{models.map(model => (
|
||||||
<Option
|
<Option
|
||||||
@@ -118,7 +117,6 @@ const ModelSelector: React.FC<ModelSelectorProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
overlayStyle={{ maxWidth: 300 }}
|
|
||||||
>
|
>
|
||||||
<Tag
|
<Tag
|
||||||
color={currentModel.color}
|
color={currentModel.color}
|
||||||
|
|||||||
Reference in New Issue
Block a user