(improvement)(chat-sdk) add parse error detail (#1476)

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];

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<Props> = ({
   parseLoading,
   parseInfoOptions,
@@ -60,24 +58,33 @@ const ParseTip: React.FC<Props> = ({
   onFiltersChange,
   onDateInfoChange,
   onRefresh,
-  handlePresetClick
+  handlePresetClick,
 }) => {
   const ranges: Record<RangeKeys, RangeValue> = {
-    '近7日': [dayjs().subtract(7, 'day'), dayjs()],
+    近7日: [dayjs().subtract(7, 'day'), dayjs()],
-    '近14日': [dayjs().subtract(14, 'day'), dayjs()],
+    近14日: [dayjs().subtract(14, 'day'), dayjs()],
-    '近30日': [dayjs().subtract(30, 'day'), dayjs()],
+    近30日: [dayjs().subtract(30, 'day'), dayjs()],
-    '本周': [dayjs().startOf('week'), dayjs().endOf('week')],
+    本周: [dayjs().startOf('week'), dayjs().endOf('week')],
-    '本月': [dayjs().startOf('month'), dayjs().endOf('month')],
+    本月: [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().subtract(1, 'month').startOf('month'),
-    '本年': [dayjs().startOf('year'), dayjs().endOf('year')],
+      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 (
       <div className={`${prefixCls}-parse-tip`}>
         <div className={`${prefixCls}-title-bar`}>
-          <CheckCircleFilled className={`${prefixCls}-step-icon`} />
+          {!failed ? (
+            <CheckCircleFilled className={`${prefixCls}-step-icon`} />
+          ) : (
+            <CloseCircleFilled className={`${prefixCls}-step-error-icon`} />
+          )}
           <div className={`${prefixCls}-step-title`}>
             {tipTitle}
             {tipNode === undefined && <Loading />}
@@ -85,8 +92,11 @@ const ParseTip: React.FC<Props> = ({
         </div>
         {(tipNode || tipNode === null) && (
           <div
-            className={`${prefixCls}-content-container ${tipNode === null ? `${prefixCls}-empty-content-container` : ''
+            className={classNames(
-              }`}
+              `${prefixCls}-content-container`,
+              tipNode === null && `${prefixCls}-empty-content-container`,
+              failed && `${prefixCls}-content-container-failed`
+            )}
           >
             {tipNode}
           </div>
@@ -107,7 +117,8 @@ const ParseTip: React.FC<Props> = ({
           <span className={`${prefixCls}-title-tip`}>(耗时: {parseTimeCost}ms)</span>
         )}
       </>,
-      parseTip
+      parseTip,
+      true
     );
   }
 
@@ -167,9 +178,9 @@ const ParseTip: React.FC<Props> = ({
         ) : (
           <>
             {(queryMode?.includes('ENTITY') || queryMode === 'LLM_S2SQL') &&
-              typeof entityId === 'string' &&
+            typeof entityId === 'string' &&
-              !!entityAlias &&
+            !!entityAlias &&
-              !!entityName ? (
+            !!entityName ? (
               <div className={`${prefixCls}-tip-item`}>
                 <div className={`${prefixCls}-tip-item-name`}>{entityAlias}：</div>
                 <div className={itemValueClass}>{entityName}</div>
@@ -262,7 +273,7 @@ const ParseTip: React.FC<Props> = ({
               format="YYYY/MM/DD"
               renderExtraFooter={() => (
                 <Row gutter={[28, 28]}>
-                  {Object.keys(ranges).map((key) => (
+                  {Object.keys(ranges).map(key => (
                     <Col key={key}>
                       <label
                         style={{
@@ -271,9 +282,10 @@ const ParseTip: React.FC<Props> = ({
                           color: '#33BDFC',
                           borderWidth: 1,
                           borderStyle: 'solid',
-                          cursor: 'pointer'
+                          cursor: 'pointer',
                         }}
-                        onClick={() => handlePresetClick(ranges[key as RangeKeys])}>
+                        onClick={() => handlePresetClick(ranges[key as RangeKeys])}
+                      >
                         {key}
                       </label>
                     </Col>
@@ -281,8 +293,6 @@ const ParseTip: React.FC<Props> = ({
                 </Row>
               )}
             />
-
-
           )}
         </div>
         {filters?.map((filter: any, index: number) => (
@@ -343,8 +353,9 @@ const ParseTip: React.FC<Props> = ({
         <div className={`${prefixCls}-content-options`}>
           {parseInfoOptions.map((parseInfo, index) => (
             <div
-              className={`${prefixCls}-content-option ${parseInfo.id === currentParseInfo?.id ? `${prefixCls}-content-option-active` : ''
+              className={`${prefixCls}-content-option ${
-                }`}
+                parseInfo.id === currentParseInfo?.id ? `${prefixCls}-content-option-active` : ''
+              }`}
               onClick={() => {
                 onSelectParseInfo(parseInfo);
               }}

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<Props> = ({
   const [dataCache, setDataCache] = useState<Record<number, { tip: string; data?: MsgDataType }>>(
     {}
   );
+  const [selectedRange, setSelectedRange] = useState<RangeValue | null>(null);
 
   const prefixCls = `${PREFIX_CLS}-item`;
 
@@ -167,7 +169,7 @@ const ChatItem: React.FC<Props> = ({
     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<Props> = ({
       !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<Props> = ({
     setDimensionFilters(dimensionFilters);
   };
 
-  type RangeValue = [Dayjs, Dayjs];
-  const [selectedRange, setSelectedRange] = useState<RangeValue | null>(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<Props> = ({
     });
   };
 
-
   const onRefresh = async () => {
     setEntitySwitchLoading(true);
     const { dimensions, metrics, id, queryId } = parseInfo || {};
@@ -391,7 +389,8 @@ const ChatItem: React.FC<Props> = ({
               />
             </>
           )}
-          {(parseTip !== '' || (executeMode && !executeLoading)) &&
+          {executeMode &&
+            !executeLoading &&
             !isSimpleMode &&
             parseInfo?.queryMode !== 'PLAIN_TEXT' && (
               <SimilarQuestionItem

webapp/packages/chat-sdk/src/components/ChatItem/style.less

@@ -162,6 +162,11 @@
     font-size: 16px;
   }
 
+  &-step-error-icon {
+    color: var(--error-color);
+    font-size: 16px;
+  }
+
   &-content-container {
     margin: 2px 0 2px 7px;
     padding: 10px 0 4px 18px;
@@ -173,6 +178,10 @@
     padding-bottom: 0;
   }
 
+  &-content-container-failed {
+    border-left: 1px solid transparent;
+  }
+
   &-auth-tip {
     font-size: 13px;
     color: var(--text-color-secondary);