(feature)(webapp) agent defaults to list mode, supports switching to card mode (#362)

This commit is contained in:
williamhliu
2023-11-10 18:21:59 +08:00
committed by GitHub
parent f998f27c6f
commit bd541e1199
6 changed files with 263 additions and 93 deletions

View File

@@ -9,18 +9,19 @@ import { CheckCircleFilled, UpOutlined } from '@ant-design/icons';
import { SqlInfoType } from '../../common/type';
type Props = {
llmReq?: any;
integrateSystem?: string;
sqlInfo: SqlInfoType;
sqlTimeCost?: number;
};
const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo, sqlTimeCost }) => {
const SqlItem: React.FC<Props> = ({ llmReq, integrateSystem, sqlInfo, sqlTimeCost }) => {
const [sqlType, setSqlType] = useState('');
const tipPrefixCls = `${PREFIX_CLS}-item`;
const prefixCls = `${PREFIX_CLS}-sql-item`;
const handleCopy = (text, result) => {
const handleCopy = (_: string, result: any) => {
result ? message.success('复制SQL成功', 1) : message.error('复制SQL失败', 1);
};
@@ -28,10 +29,12 @@ const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo, sqlTimeCost }) =>
setSqlType('');
};
if (!sqlInfo.s2SQL && !sqlInfo.correctS2SQL && !sqlInfo.querySQL) {
if (!llmReq && !sqlInfo.s2SQL && !sqlInfo.correctS2SQL && !sqlInfo.querySQL) {
return null;
}
const { schema, linking, priorExts } = llmReq || {};
return (
<div className={`${tipPrefixCls}-parse-tip`}>
<div className={`${tipPrefixCls}-title-bar`}>
@@ -49,6 +52,18 @@ const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo, sqlTimeCost }) =>
)}
</div>
<div className={`${tipPrefixCls}-content-options`}>
{llmReq && (
<div
className={`${tipPrefixCls}-content-option ${
sqlType === 'schemaMap' ? `${tipPrefixCls}-content-option-active` : ''
}`}
onClick={() => {
setSqlType(sqlType === 'schemaMap' ? '' : 'schemaMap');
}}
>
Schema映射
</div>
)}
{sqlInfo.s2SQL && (
<div
className={`${tipPrefixCls}-content-option ${
@@ -96,6 +111,38 @@ const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo, sqlTimeCost }) =>
: ''
}`}
>
{sqlType === 'schemaMap' && (
<div className={`${prefixCls}-code`}>
{schema?.fieldNameList?.length > 0 && (
<div className={`${prefixCls}-schema-row`}>
<div className={`${prefixCls}-schema-title`}></div>
<div className={`${prefixCls}-schema-content`}>
{schema.fieldNameList.join('、')}
</div>
</div>
)}
{linking?.length > 0 && (
<div className={`${prefixCls}-schema-row`}>
<div className={`${prefixCls}-schema-title`}></div>
<div className={`${prefixCls}-schema-content`}>
{linking.map((item: any) => {
return (
<span>
{item.fieldName}: {item.fieldValue}
</span>
);
})}
</div>
</div>
)}
{priorExts && (
<div className={`${prefixCls}-schema-row`}>
<div className={`${prefixCls}-schema-title`}></div>
<div className={`${prefixCls}-schema-content`}>{priorExts}</div>
</div>
)}
</div>
)}
{sqlType && sqlInfo[sqlType] && (
<>
<SyntaxHighlighter