From 9e4513f7ca9c7118ea629255d260967c725ecb51 Mon Sep 17 00:00:00 2001 From: williamhliu <137068196+williamhliu@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:22:24 +0800 Subject: [PATCH] (improvement)(chat-sdk) add parse error detail (#1476) --- webapp/packages/chat-sdk/src/common/type.ts | 4 ++ .../src/components/ChatItem/ParseTip.tsx | 65 +++++++++++-------- .../src/components/ChatItem/index.tsx | 13 ++-- .../src/components/ChatItem/style.less | 9 +++ 4 files changed, 57 insertions(+), 34 deletions(-) diff --git a/webapp/packages/chat-sdk/src/common/type.ts b/webapp/packages/chat-sdk/src/common/type.ts index 09d409ad8..42facb727 100644 --- a/webapp/packages/chat-sdk/src/common/type.ts +++ b/webapp/packages/chat-sdk/src/common/type.ts @@ -1,3 +1,5 @@ +import { Dayjs } from 'dayjs'; + export type SearchRecommendItem = { complete: boolean; modelId: number; @@ -257,3 +259,5 @@ export type ParseTimeCostType = { parseTime: number; sqlTime: number; }; + +export type RangeValue = [Dayjs, Dayjs]; diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx index d45664788..1d5df8614 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx @@ -2,7 +2,7 @@ import React, { ReactNode } from 'react'; import { AGG_TYPE_MAP, PREFIX_CLS } from '../../common/constants'; import { ChatContextType, DateInfoType, EntityInfoType, FilterItemType } from '../../common/type'; import { Button, DatePicker, Row, Col } from 'antd'; -import { CheckCircleFilled, ReloadOutlined } from '@ant-design/icons'; +import { CheckCircleFilled, CloseCircleFilled, ReloadOutlined } from '@ant-design/icons'; import Loading from './Loading'; import FilterItem from './FilterItem'; import MarkDown from '../ChatMsg/MarkDown'; @@ -37,11 +37,9 @@ type Props = { const MAX_OPTION_VALUES_COUNT = 2; - type RangeValue = [Dayjs, Dayjs]; type RangeKeys = '近7日' | '近14日' | '近30日' | '本周' | '本月' | '上月' | '本季度' | '本年'; - const ParseTip: React.FC = ({ parseLoading, parseInfoOptions, @@ -60,24 +58,33 @@ const ParseTip: React.FC = ({ onFiltersChange, onDateInfoChange, onRefresh, - handlePresetClick + handlePresetClick, }) => { const ranges: Record = { - '近7日': [dayjs().subtract(7, 'day'), dayjs()], - '近14日': [dayjs().subtract(14, 'day'), dayjs()], - '近30日': [dayjs().subtract(30, 'day'), dayjs()], - '本周': [dayjs().startOf('week'), dayjs().endOf('week')], - '本月': [dayjs().startOf('month'), dayjs().endOf('month')], - '上月': [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')], - '本季度': [dayjs().startOf('quarter'), dayjs().endOf('quarter')], // 使用 quarterOfYear 插件 - '本年': [dayjs().startOf('year'), dayjs().endOf('year')], + 近7日: [dayjs().subtract(7, 'day'), dayjs()], + 近14日: [dayjs().subtract(14, 'day'), dayjs()], + 近30日: [dayjs().subtract(30, 'day'), dayjs()], + 本周: [dayjs().startOf('week'), dayjs().endOf('week')], + 本月: [dayjs().startOf('month'), dayjs().endOf('month')], + 上月: [ + dayjs().subtract(1, 'month').startOf('month'), + dayjs().subtract(1, 'month').endOf('month'), + ], + 本季度: [dayjs().startOf('quarter'), dayjs().endOf('quarter')], // 使用 quarterOfYear 插件 + 本年: [dayjs().startOf('year'), dayjs().endOf('year')], }; + const prefixCls = `${PREFIX_CLS}-item`; - const getNode = (tipTitle: ReactNode, tipNode?: ReactNode) => { + + const getNode = (tipTitle: ReactNode, tipNode?: ReactNode, failed?: boolean) => { return (
- + {!failed ? ( + + ) : ( + + )}
{tipTitle} {tipNode === undefined && } @@ -85,8 +92,11 @@ const ParseTip: React.FC = ({
{(tipNode || tipNode === null) && (
{tipNode}
@@ -107,7 +117,8 @@ const ParseTip: React.FC = ({ (耗时: {parseTimeCost}ms) )} , - parseTip + parseTip, + true ); } @@ -167,9 +178,9 @@ const ParseTip: React.FC = ({ ) : ( <> {(queryMode?.includes('ENTITY') || queryMode === 'LLM_S2SQL') && - typeof entityId === 'string' && - !!entityAlias && - !!entityName ? ( + typeof entityId === 'string' && + !!entityAlias && + !!entityName ? (
{entityAlias}：
{entityName}
@@ -262,7 +273,7 @@ const ParseTip: React.FC = ({ format="YYYY/MM/DD" renderExtraFooter={() => ( - {Object.keys(ranges).map((key) => ( + {Object.keys(ranges).map(key => ( @@ -281,8 +293,6 @@ const ParseTip: React.FC = ({ )} /> - - )}
{filters?.map((filter: any, index: number) => ( @@ -343,8 +353,9 @@ const ParseTip: React.FC = ({
{parseInfoOptions.map((parseInfo, index) => (
{ onSelectParseInfo(parseInfo); }} diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx index fbb014630..3b8a84084 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx @@ -6,6 +6,7 @@ import { MsgDataType, ParseStateEnum, ParseTimeCostType, + RangeValue, SimilarQuestionType, } from '../../common/type'; import { useEffect, useState } from 'react'; @@ -79,6 +80,7 @@ const ChatItem: React.FC = ({ const [dataCache, setDataCache] = useState>( {} ); + const [selectedRange, setSelectedRange] = useState(null); const prefixCls = `${PREFIX_CLS}-item`; @@ -167,7 +169,7 @@ const ChatItem: React.FC = ({ const parseData: any = await chatParse(msg, conversationId, modelId, agentId, filter); setParseLoading(false); const { code, data } = parseData || {}; - const { state, selectedParses, candidateParses, queryId, parseTimeCost } = data || {}; + const { state, selectedParses, candidateParses, queryId, parseTimeCost, errorMsg } = data || {}; const parses = selectedParses?.concat(candidateParses || []) || []; if ( code !== 200 || @@ -175,7 +177,7 @@ const ChatItem: React.FC = ({ !parses.length || (!parses[0]?.properties?.type && !parses[0]?.queryMode) ) { - setParseTip(PARSE_ERROR_TIP); + setParseTip(state === ParseStateEnum.FAILED && errorMsg ? errorMsg : PARSE_ERROR_TIP); setParseInfo({ queryId } as any); return; } @@ -234,9 +236,6 @@ const ChatItem: React.FC = ({ setDimensionFilters(dimensionFilters); }; - type RangeValue = [Dayjs, Dayjs]; - const [selectedRange, setSelectedRange] = useState(null); - const onDateInfoChange = (dates: [Dayjs | null, Dayjs | null] | null) => { if (dates && dates[0] && dates[1]) { const [start, end] = dates; @@ -264,7 +263,6 @@ const ChatItem: React.FC = ({ }); }; - const onRefresh = async () => { setEntitySwitchLoading(true); const { dimensions, metrics, id, queryId } = parseInfo || {}; @@ -391,7 +389,8 @@ const ChatItem: React.FC = ({ /> )} - {(parseTip !== '' || (executeMode && !executeLoading)) && + {executeMode && + !executeLoading && !isSimpleMode && parseInfo?.queryMode !== 'PLAIN_TEXT' && (