(feature)(webapp) add display of time consumption at each stage (#331)

webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react';
 import { AGG_TYPE_MAP, PREFIX_CLS } from '../../common/constants';
 import { ChatContextType, DateInfoType, EntityInfoType, FilterItemType } from '../../common/type';
-import { DatePicker } from 'antd';
-import { CheckCircleFilled } from '@ant-design/icons';
+import { Button, DatePicker } from 'antd';
+import { CheckCircleFilled, ReloadOutlined } from '@ant-design/icons';
 import Loading from './Loading';
 import FilterItem from './FilterItem';
 import moment from 'moment';
@@ -21,10 +21,13 @@ type Props = {
   dateInfo: DateInfoType;
   entityInfo: EntityInfoType;
   integrateSystem?: string;
+  parseTimeCost?: number;
+  isDeveloper?: boolean;
   onSelectParseInfo: (parseInfo: ChatContextType) => void;
   onSwitchEntity: (entityId: string) => void;
   onFiltersChange: (filters: FilterItemType[]) => void;
   onDateInfoChange: (dateRange: any) => void;
+  onRefresh: () => void;
 };
 
 const MAX_OPTION_VALUES_COUNT = 2;
@@ -39,10 +42,13 @@ const ParseTip: React.FC<Props> = ({
   dateInfo,
   entityInfo,
   integrateSystem,
+  parseTimeCost,
+  isDeveloper,
   onSelectParseInfo,
   onSwitchEntity,
   onFiltersChange,
   onDateInfoChange,
+  onRefresh,
 }) => {
   const prefixCls = `${PREFIX_CLS}-item`;
 
@@ -66,7 +72,15 @@ const ParseTip: React.FC<Props> = ({
   }
 
   if (parseTip) {
-    return getNode('意图解析失败', parseTip);
+    return getNode(
+      <>
+        意图解析失败
+        {parseTimeCost && isDeveloper && (
+          <span className={`${prefixCls}-title-tip`}>(耗时: {parseTimeCost}ms)</span>
+        )}
+      </>,
+      parseTip
+    );
   }
 
   if (parseInfoOptions.length === 0) {
@@ -218,18 +232,19 @@ const ParseTip: React.FC<Props> = ({
             />
           )}
         </div>
-        {filters?.map((filter: any) => (
+        {filters?.map((filter: any, index: number) => (
           <FilterItem
             modelId={modelId!}
             filters={dimensionFilters}
             filter={filter}
+            index={index}
             chatContext={currentParseInfo!}
             entityAlias={entityAlias}
             agentId={agentId}
             integrateSystem={integrateSystem}
             onFiltersChange={onFiltersChange}
             onSwitchEntity={onSwitchEntity}
-            key={filter.name}
+            key={`${filter.name}_${index}`}
           />
         ))}
       </div>
@@ -238,23 +253,39 @@ const ParseTip: React.FC<Props> = ({
 
   const getFiltersNode = () => {
     return (
-      <div className={`${prefixCls}-tip-item`}>
-        <div className={`${prefixCls}-tip-item-name`}>筛选条件：</div>
-        <div className={`${prefixCls}-tip-item-content`}>{getFilterContent(dimensionFilters)}</div>
-      </div>
+      <>
+        <div className={`${prefixCls}-tip-item`}>
+          <div className={`${prefixCls}-tip-item-name`}>筛选条件：</div>
+          <div className={`${prefixCls}-tip-item-content`}>
+            {getFilterContent(dimensionFilters)}
+          </div>
+        </div>
+        <Button className={`${prefixCls}-reload`} size="small" onClick={onRefresh}>
+          <ReloadOutlined />
+          重新查询
+        </Button>
+      </>
     );
   };
 
+  const { type: agentType } = properties || {};
+
   const tipNode = (
     <div className={`${prefixCls}-tip`}>
       {getTipNode()}
-      {getFiltersNode()}
+      {!(!!agentType && queryMode !== 'LLM_S2QL') && getFiltersNode()}
     </div>
   );
 
   return getNode(
     <div className={`${prefixCls}-title-bar`}>
-      <div>意图解析{parseInfoOptions?.length > 1 ? '：' : ''}</div>
+      <div>
+        意图解析
+        {parseTimeCost && isDeveloper && (
+          <span className={`${prefixCls}-title-tip`}>(耗时: {parseTimeCost}ms)</span>
+        )}
+        {parseInfoOptions?.length > 1 ? '：' : ''}
+      </div>
       {parseInfoOptions?.length > 1 && (
         <div className={`${prefixCls}-content-options`}>
           {parseInfoOptions.map((parseInfo, index) => (