mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-07-27 13:57:46 +00:00
Co-authored-by: Fangyin Cheng <staneyffer@gmail.com> Co-authored-by: 谨欣 <echo.cmy@antgroup.com> Co-authored-by: 严志勇 <yanzhiyong@tiansuixiansheng.com> Co-authored-by: yanzhiyong <932374019@qq.com>
75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import { GPTVis } from '@antv/gpt-vis';
|
|
import { CheckOutlined, CloseOutlined } from '@mui/icons-material';
|
|
import classNames from 'classnames';
|
|
import { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
|
import remarkGfm from 'remark-gfm';
|
|
import { CodePreview } from './code-preview';
|
|
import markdownComponents from './config';
|
|
|
|
interface Props {
|
|
data: {
|
|
code: string[];
|
|
exit_success: true;
|
|
language: string;
|
|
log: string;
|
|
};
|
|
}
|
|
|
|
function VisCode({ data }: Props) {
|
|
const { t } = useTranslation();
|
|
|
|
const [show, setShow] = useState(0);
|
|
|
|
return (
|
|
<div className='bg-[#EAEAEB] rounded overflow-hidden border border-theme-primary dark:bg-theme-dark text-sm'>
|
|
<div>
|
|
<div className='flex'>
|
|
{data.code.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={classNames('px-4 py-2 text-[#121417] dark:text-white cursor-pointer', {
|
|
'bg-white dark:bg-theme-dark-container': index === show,
|
|
})}
|
|
onClick={() => {
|
|
setShow(index);
|
|
}}
|
|
>
|
|
CODE {index + 1}: {item[0]}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{data.code.length && (
|
|
<CodePreview
|
|
language={data.code[show][0]}
|
|
code={data.code[show][1]}
|
|
customStyle={{ maxHeight: 300, margin: 0 }}
|
|
light={oneLight}
|
|
dark={oneDark}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div className='flex'>
|
|
<div className='bg-white dark:bg-theme-dark-container px-4 py-2 text-[#121417] dark:text-white'>
|
|
{t('Terminal')}{' '}
|
|
{data.exit_success ? (
|
|
<CheckOutlined className='text-green-600' />
|
|
) : (
|
|
<CloseOutlined className='text-red-600' />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className='p-4 max-h-72 overflow-y-auto whitespace-normal bg-white dark:dark:bg-theme-dark'>
|
|
<GPTVis components={markdownComponents} remarkPlugins={[remarkGfm]}>
|
|
{data.log}
|
|
</GPTVis>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VisCode;
|