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

refactor: upgrade gpt-vis (#1883)

Browse Source
This commit is contained in:
hustcc
2024-08-28 13:37:45 +08:00
committed by GitHub
parent 131bc7b89b
commit 1cb7e35295
12 changed files with 518 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode, memo, useContext, useMemo } from 'react';
import { CheckOutlined, ClockCircleOutlined, CloseOutlined, CodeOutlined, LoadingOutlined, RobotOutlined, UserOutlined } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import { GPTVis } from '@antv/gpt-vis';
import { IChatDialogueMessageSchema } from '@/types/chat';
import rehypeRaw from 'rehype-raw';
import classNames from 'classnames';
@@ -22,7 +22,7 @@ interface Props {
onLinkClick?: () => void;
}
type MarkdownComponent = Parameters<typeof ReactMarkdown>['0']['components'];
type MarkdownComponent = Parameters<typeof GPTVis>["0"]["components"];
type DBGPTView = {
name: string;
@@ -112,15 +112,23 @@ function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithC
const { bgClass, icon } = pluginViewStatusMapper[status] ?? {};
return (
<div className="bg-white dark:bg-[#212121] rounded-lg overflow-hidden my-2 flex flex-col lg:max-w-[80%]">
<div className={classNames('flex px-4 md:px-6 py-2 items-center text-white text-sm', bgClass)}>
<div
className={classNames(
"flex px-4 md:px-6 py-2 items-center text-white text-sm",
bgClass
)}
>
{name}
{icon}
</div>
{result ? (
<div className="px-4 md:px-6 py-4 text-sm">
<ReactMarkdown components={markdownComponents} rehypePlugins={[rehypeRaw]}>
{result ?? ''}
</ReactMarkdown>
<GPTVis
components={markdownComponents}
rehypePlugins={[rehypeRaw]}
>
{result ?? ""}
</GPTVis>
</div>
) : (
<div className="px-4 md:px-6 py-4 text-sm">{err_msg}</div>
@@ -136,32 +144,48 @@ function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithC
return (
<div
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),
})}
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 />}
{isRobot ? (
renderModelIcon(model_name) || <RobotOutlined />
) : (
<UserOutlined />
)}
</div>
<div className="flex-1 overflow-hidden items-center text-md leading-8 pb-2">
{/* User Input */}
{!isRobot && typeof context === 'string' && context}
{!isRobot && typeof context === "string" && context}
{/* Render Report */}
{isRobot && isChartChat && typeof context === 'object' && (
{isRobot && isChartChat && typeof context === "object" && (
<div>
{`[${context.template_name}]: `}
<span className="text-theme-primary cursor-pointer" onClick={onLinkClick}>
<span
className="text-theme-primary cursor-pointer"
onClick={onLinkClick}
>
<CodeOutlined className="mr-1" />
{context.template_introduce || 'More Details'}
{context.template_introduce || "More Details"}
</span>
</div>
)}
{/* Markdown */}
{isRobot && typeof context === 'string' && (
<ReactMarkdown components={{ ...markdownComponents, ...extraMarkdownComponents }} rehypePlugins={[rehypeRaw]}>
{isRobot && typeof context === "string" && (
<GPTVis
components={{ ...markdownComponents, ...extraMarkdownComponents }}
rehypePlugins={[rehypeRaw]}
>
{formatMarkdownVal(value)}
</ReactMarkdown>
</GPTVis>
)}
{!!relations?.length && (
<div className="flex flex-wrap mt-2">