github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-09-10 05:19:44 +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

6
web/components/chat/chat-container.tsx
View File

@@ -109,7 +109,7 @@ const ChatContainer = () => {
/>
<div className="px-4 flex flex-1 flex-wrap overflow-hidden relative">
{!!chartsData?.length && (
<div className="w-full xl:w-3/4 h-3/5 xl:pr-4 xl:h-full overflow-y-auto">
<div className="w-full pb-4 xl:w-3/4 h-3/5 xl:pr-4 xl:h-full overflow-y-auto">
<Chart chartsData={chartsData} />
</div>
)}
@@ -122,8 +122,8 @@ const ChatContainer = () => {
)}
{/** chat panel */}
<div
className={classNames('flex flex-1 flex-col overflow-hidden', {
'px-0 xl:pl-4 h-2/5 xl:h-full border-t xl:border-t-0 xl:border-l': scene === 'chat_dashboard',
className={classNames('flex flex-1 flex-col', {
'px-0 xl:pl-4 h-2/5 w-full xl:w-auto xl:h-full border-t xl:border-t-0 xl:border-l dark:border-gray-800': scene === 'chat_dashboard',
'h-full lg:px-8': scene !== 'chat_dashboard',
})}
>

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>

4
web/components/chat/completion.tsx
View File

@@ -156,7 +156,7 @@ const Completion = ({ messages, onSubmit }: Props) => {
}}
>
{content.role === 'view' && (
<div className="flex w-full pt-2 md:pt-4 border-t border-gray-200 mt-2 md:mt-4 pl-2">
<div className="flex w-full border-t border-gray-200 dark:border-theme-dark">
{scene === 'chat_knowledge' && content.retry ? (
<Button onClick={handleRetry} slots={{ root: IconButton }} slotProps={{ root: { variant: 'plain', color: 'primary' } }}>
<RedoOutlined />
@@ -198,7 +198,7 @@ const Completion = ({ messages, onSubmit }: Props) => {
</div>
<div
className={classNames(
'relative after:absolute after:-top-8 after:h-8 after:w-full after:bg-gradient-to-t after:from-white after:to-transparent dark:after:from-[#212121]',
'relative after:absolute after:-top-8 after:h-8 after:w-full after:bg-gradient-to-t after:from-theme-light after:to-transparent dark:after:from-theme-dark',
{
'cursor-not-allowed': scene === 'chat_excel' && !currentDialogue?.select_param,
},

2
web/components/chat/header/index.tsx
View File

@@ -18,7 +18,7 @@ function Header({ refreshHistory, modelChange }: Props) {
const { scene, refreshDialogList } = useContext(ChatContext);
return (
<div className="w-full py-2 px-4 md:px-4 flex flex-wrap items-center justify-center border-b border-gray-100 gap-1 md:gap-4">
<div className="w-full py-2 px-4 md:px-4 flex flex-wrap items-center justify-center gap-1 md:gap-4">
{/* Models Selector */}
<ModelSelector onChange={modelChange} />
{/* DB Selector */}