(feature)(webapp) add multiple parse infos in history message (#256)

Co-authored-by: williamhliu <williamhliu@tencent.com>

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

@@ -6,6 +6,8 @@ import { CheckCircleFilled } from '@ant-design/icons';
 import Loading from './Loading';
 import FilterItem from './FilterItem';
 import moment from 'moment';
+import classNames from 'classnames';
+import { isMobile } from '../../utils/utils';
 
 const { RangePicker } = DatePicker;
 
@@ -84,9 +86,7 @@ const ParseTip: React.FC<Props> = ({
     nativeQuery,
   } = currentParseInfo || {};
 
-  const { type } = properties || {};
   const entityAlias = entity?.alias?.[0]?.split('.')?.[0];
-  const entityName = elementMatches?.find(item => item.element?.type === 'ID')?.element.name;
 
   const entityDimensions = entityInfo?.dimensions?.filter(
     item =>
@@ -172,16 +172,15 @@ const ParseTip: React.FC<Props> = ({
                 </div>
               )}
             {queryMode !== 'ENTITY_ID' &&
-              entityDimensions &&
-              entityDimensions?.length > 0 &&
               !dimensions?.some(item => item.bizName?.includes('_id')) &&
-              entityDimensions.some(dimension => dimension.value != null) &&
-              entityDimensions.map(dimension => (
-                <div className={`${prefixCls}-tip-item`} key={dimension.itemId}>
-                  <div className={`${prefixCls}-tip-item-name`}>{dimension.name}：</div>
-                  <div className={itemValueClass}>{dimension.value}</div>
-                </div>
-              ))}
+              entityDimensions
+                ?.filter(dimension => dimension.value != null)
+                .map(dimension => (
+                  <div className={`${prefixCls}-tip-item`} key={dimension.itemId}>
+                    <div className={`${prefixCls}-tip-item-name`}>{dimension.name}：</div>
+                    <div className={itemValueClass}>{dimension.value}</div>
+                  </div>
+                ))}
             {(queryMode === 'METRIC_ORDERBY' || queryMode === 'METRIC_MODEL') &&
               aggType &&
               aggType !== 'NONE' && (
@@ -199,9 +198,12 @@ const ParseTip: React.FC<Props> = ({
   const getFilterContent = (filters: any) => {
     const itemValueClass = `${prefixCls}-tip-item-value`;
     const { startDate, endDate } = dateInfo || {};
+    const tipItemOptionClass = classNames(`${prefixCls}-tip-item-option`, {
+      [`${prefixCls}-mobile-tip-item-option`]: isMobile,
+    });
     return (
       <div className={`${prefixCls}-tip-item-filter-content`}>
-        <div className={`${prefixCls}-tip-item-option`}>
+        <div className={tipItemOptionClass}>
           <span className={`${prefixCls}-tip-item-filter-name`}>数据时间：</span>
           {nativeQuery ? (
             <span className={itemValueClass}>
@@ -209,9 +211,9 @@ const ParseTip: React.FC<Props> = ({
             </span>
           ) : (
             <RangePicker
-              className={`${prefixCls}-range-picker`}
               value={[moment(startDate), moment(endDate)]}
               onChange={onDateInfoChange}
+              getPopupContainer={trigger => trigger.parentNode as HTMLElement}
               allowClear={false}
             />
           )}

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

@@ -53,7 +53,7 @@ const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo }) => {
                 setSqlType(sqlType === 's2QL' ? '' : 's2QL');
               }}
             >
-              LLM解析SQL
+              S2QL
             </div>
           )}
           {sqlInfo.logicSql && (

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

@@ -28,6 +28,7 @@ type Props = {
   score?: number;
   filter?: any[];
   isLastMessage?: boolean;
+  parseInfos?: ChatContextType[];
   msgData?: MsgDataType;
   triggerResize?: boolean;
   isDeveloper?: boolean;
@@ -48,6 +49,7 @@ const ChatItem: React.FC<Props> = ({
   filter,
   isLastMessage,
   triggerResize,
+  parseInfos,
   msgData,
   isDeveloper,
   integrateSystem,
@@ -152,11 +154,15 @@ const ChatItem: React.FC<Props> = ({
       return;
     }
     if (msgData) {
-      const parseInfoValue = { ...msgData.chatContext, queryId: msgData.queryId };
-      setParseInfoOptions([parseInfoValue]);
+      const parseInfoOptionsValue =
+        parseInfos && parseInfos.length > 0
+          ? parseInfos.map(item => ({ ...item, queryId: msgData.queryId }))
+          : [{ ...msgData.chatContext, queryId: msgData.queryId }];
+      const parseInfoValue = parseInfoOptionsValue[0];
+      setParseInfoOptions(parseInfoOptionsValue);
       setParseInfo(parseInfoValue);
-      setDimensionFilters(msgData.chatContext?.dimensionFilters || []);
-      setDateInfo(msgData.chatContext?.dateInfo);
+      setDimensionFilters(parseInfoValue.dimensionFilters || []);
+      setDateInfo(parseInfoValue.dateInfo);
       setExecuteMode(true);
       updateData({ code: 200, data: msgData, msg: 'success' });
     } else if (msg) {
@@ -238,10 +244,6 @@ const ChatItem: React.FC<Props> = ({
     [`${prefixCls}-content-mobile`]: isMobile,
   });
 
-  const isMetricCard =
-    (data?.queryMode === 'METRIC_DOMAIN' || data?.queryMode === 'METRIC_FILTER') &&
-    data?.queryResults?.length === 1;
-
   return (
     <div className={prefixCls}>
       {!isMobile && integrateSystem !== 'wiki' && (
@@ -266,7 +268,7 @@ const ChatItem: React.FC<Props> = ({
           />
           {executeMode && (
             <>
-              {parseInfo?.sqlInfo && isDeveloper && integrateSystem !== 'c2' && (
+              {!isMobile && parseInfo?.sqlInfo && isDeveloper && integrateSystem !== 'c2' && (
                 <SqlItem integrateSystem={integrateSystem} sqlInfo={parseInfo.sqlInfo} />
               )}
               <ExecuteItem
@@ -292,13 +294,11 @@ const ChatItem: React.FC<Props> = ({
             />
           )}
         </div>
-        {integrateSystem !== 'showcase' && (
-          <Tools
-            queryId={parseInfo?.queryId || 0}
-            scoreValue={score}
-            // isLastMessage={isLastMessage}
-          />
-        )}
+        {(parseTip !== '' || (executeMode && !executeLoading)) &&
+          integrateSystem !== 'c2' &&
+          integrateSystem !== 'showcase' && (
+            <Tools queryId={parseInfo?.queryId || 0} scoreValue={score} />
+          )}
       </div>
     </div>
   );

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

@@ -265,6 +265,20 @@
     row-gap: 6px;
   }
 
+  &-tip-item-option {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    row-gap: 6px;
+  }
+
+  &-mobile-tip-item-option {
+    .ant-picker-panel-container .ant-picker-panels {
+      flex-wrap: wrap !important;
+      width: 280px !important;
+    }
+  }
+
   &-tip-item-filter-name {
     color: var(--text-color-secondary);
     font-weight: 500;
@@ -342,6 +356,8 @@
 .@{filter-item-prefix-cls} {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: 6px;
   font-weight: 500;
 
   &-filter-name {

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

@@ -12,6 +12,7 @@
     align-items: center;
     flex-wrap: wrap;
     column-gap: 6px;
+    row-gap: 4px;
   }
 
   &-metric-card {