github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-09-03 10:05:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): 🎨 Unified color theme, AntV light/dark theme switching, Antd first-screen style loading. (#1020)

Browse Source 
Co-authored-by: 黄振洪 <hzh01509324@alibaba-inc.com>
Co-authored-by: Aralhi <xiaoping0501@gmail.com>
This commit is contained in:
Hzh_97
2024-01-12 09:44:52 +08:00
committed by GitHub
parent 2706e27ae5
commit 99ea6ac1a4
99 changed files with 1125 additions and 1410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/chat/chat-content/code-preview.tsx
View File

@@ -1,10 +1,13 @@
import { Button, message } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { oneDark, coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import copy from 'copy-to-clipboard';
import { useColorScheme } from '@mui/joy';
export function CodePreview({ code, language }: { code: string; language: string }) {
const { mode } = useColorScheme();
return (
<div className="relative">
<Button
@@ -16,7 +19,7 @@ export function CodePreview({ code, language }: { code: string; language: string
message[success ? 'success' : 'error'](success ? 'Copy success' : 'Copy failed');
}}
/>
<SyntaxHighlighter language={language} style={oneDark}>
<SyntaxHighlighter language={language} style={mode === 'dark' ? coldarkDark : oneDark}>
{code}
</SyntaxHighlighter>
</div>

4
web/components/chat/chat-content/config.tsx
View File

@@ -37,10 +37,10 @@ const basicComponents: MarkdownComponent = {
return (
<>
{!inline && match ? (
{!inline ? (
<CodePreview code={context} language={match?.[1] ?? 'javascript'} />
) : (
<code {...props} style={style} className="px-[6px] py-[2px] rounded bg-gray-700 text-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm">
<code {...props} style={style} className="p-1 mx-1 rounded bg-theme-light dark:bg-theme-dark text-sm">
{children}
</code>
)}

8
web/components/chat/chat-content/index.tsx
View File

@@ -136,22 +136,22 @@ function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithC
return (
<div
className={classNames('relative flex flex-wrap w-full px-2 sm:px-4 py-2 sm:py-4 rounded-xl break-words', {
'bg-slate-100 dark:bg-[#353539]': isRobot,
className={classNames('relative flex flex-wrap w-full p-2 md:p-4 rounded-xl break-words', {
'bg-white dark:bg-[#232734]': isRobot,
'lg:w-full xl:w-full pl-0': ['chat_with_db_execute', 'chat_dashboard'].includes(scene),
})}
>
<div className="mr-2 flex flex-shrink-0 items-center justify-center h-7 w-7 rounded-full text-lg sm:mr-4">
{isRobot ? renderModelIcon(model_name) || <RobotOutlined /> : <UserOutlined />}
</div>
<div className="flex-1 overflow-hidden items-center text-md leading-8">
<div className="flex-1 overflow-hidden items-center text-md leading-8 pb-2">
{/* User Input */}
{!isRobot && typeof context === 'string' && context}
{/* Render Report */}
{isRobot && isChartChat && typeof context === 'object' && (
<div>
{`[${context.template_name}]: `}
<span className="text-[#1677ff] cursor-pointer" onClick={onLinkClick}>
<span className="text-theme-primary cursor-pointer" onClick={onLinkClick}>
<CodeOutlined className="mr-1" />
{context.template_introduce || 'More Details'}
</span>