[feature](webapp) merge query steps to one card

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

@@ -1,13 +1,14 @@
 import { Spin } from 'antd';
+import { CheckCircleFilled } from '@ant-design/icons';
 import { PREFIX_CLS } from '../../common/constants';
 import { MsgDataType } from '../../common/type';
 import ChatMsg from '../ChatMsg';
-import Tools from '../Tools';
-import Text from './Text';
-import Typing from './Typing';
+import WebPage from '../ChatMsg/WebPage';
+import Loading from './Loading';
 
 type Props = {
   question: string;
+  queryId?: number;
   executeLoading: boolean;
   entitySwitchLoading: boolean;
   chartIndex: number;
@@ -15,13 +16,12 @@ type Props = {
   data?: MsgDataType;
   isMobileMode?: boolean;
   triggerResize?: boolean;
-  isLastMessage?: boolean;
-  onSwitchEntity: (entityId: string) => void;
   onChangeChart: () => void;
 };
 
 const ExecuteItem: React.FC<Props> = ({
   question,
+  queryId,
   executeLoading,
   entitySwitchLoading,
   chartIndex,
@@ -29,49 +29,59 @@ const ExecuteItem: React.FC<Props> = ({
   data,
   isMobileMode,
   triggerResize,
-  isLastMessage,
-  onSwitchEntity,
   onChangeChart,
 }) => {
   const prefixCls = `${PREFIX_CLS}-item`;
 
+  const getNodeTip = (title: string, tip?: string) => {
+    return (
+      <>
+        <div className={`${prefixCls}-title-bar`}>
+          <CheckCircleFilled className={`${prefixCls}-step-icon`} />
+          <div className={`${prefixCls}-step-title`}>
+            {title}
+            {!tip && <Loading />}
+          </div>
+        </div>
+        {tip && <div className={`${prefixCls}-content-container`}>{tip}</div>}
+      </>
+    );
+  };
+
   if (executeLoading) {
-    return <Typing />;
+    return getNodeTip('数据查询中');
   }
 
   if (executeTip) {
-    return <Text data={executeTip} />;
+    return getNodeTip('数据查询失败', executeTip);
   }
 
-  if (!data || data.queryMode === 'WEB_PAGE') {
+  if (!data) {
     return null;
   }
 
-  const isMetricCard =
-    (data.queryMode === 'METRIC_DOMAIN' || data.queryMode === 'METRIC_FILTER') &&
-    data.queryResults?.length === 1;
-
   return (
-    <div className={`${prefixCls}-msg-content`}>
-      <Spin spinning={entitySwitchLoading}>
-        <ChatMsg
-          question={question}
-          data={data}
-          chartIndex={chartIndex}
-          isMobileMode={isMobileMode}
-          triggerResize={triggerResize}
-        />
-      </Spin>
-      {!isMetricCard && (
-        <Tools
-          data={data}
-          isLastMessage={isLastMessage}
-          isMobileMode={isMobileMode}
-          onSwitchEntity={onSwitchEntity}
-          onChangeChart={onChangeChart}
-        />
-      )}
-    </div>
+    <>
+      <div className={`${prefixCls}-title-bar`}>
+        <CheckCircleFilled className={`${prefixCls}-step-icon`} />
+        <div className={`${prefixCls}-step-title`}>数据查询结果</div>
+      </div>
+      <div className={`${prefixCls}-content-container ${prefixCls}-last-node`}>
+        <Spin spinning={entitySwitchLoading}>
+          {data?.queryMode === 'WEB_PAGE' ? (
+            <WebPage id={queryId!} data={data} />
+          ) : (
+            <ChatMsg
+              question={question}
+              data={data}
+              chartIndex={chartIndex}
+              isMobileMode={isMobileMode}
+              triggerResize={triggerResize}
+            />
+          )}
+        </Spin>
+      </div>
+    </>
   );
 };