(feature)(webapp) add show case and support multiple selection and deletion of filter conditions (#251)

2025-12-17 16:02:14 +00:00 · 2023-10-18 09:56:35 +08:00
parent 8d81f63e08
commit 36052cb4f2
36 changed files with 492 additions and 134 deletions
--- a/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
@@ -13,6 +13,7 @@ type Props = {
  chatContext: ChatContextType;
  agentId?: number;
  entityAlias?: string;
+  integrateSystem?: string;
  onFiltersChange: (filters: FilterItemType[]) => void;
  onSwitchEntity: (entityId: string) => void;
 };
@@ -24,6 +25,7 @@ const FilterItem: React.FC<Props> = ({
  chatContext,
  agentId,
  entityAlias,
+  integrateSystem,
  onFiltersChange,
  onSwitchEntity,
 }) => {
@@ -50,7 +52,11 @@ const FilterItem: React.FC<Props> = ({
  };

  useEffect(() => {
-    if ((typeof filter.value === 'string' || isArray(filter.value)) && options.length === 0) {
+    if (
+      (typeof filter.value === 'string' || isArray(filter.value)) &&
+      options.length === 0 &&
+      integrateSystem !== 'showcase'
+    ) {
      initData();
    }
  }, []);
@@ -148,17 +154,24 @@ const FilterItem: React.FC<Props> = ({
          onSearch={debounceFetcher}
          notFoundContent={loading ? <Spin size="small" /> : null}
          onChange={onChange}
-          mode={isArray(filter.value) ? 'multiple' : undefined}
+          mode="multiple"
          showSearch
+          allowClear
        />
      ) : entityAlias &&
        ['歌曲', '艺人'].includes(entityAlias) &&
        filter.bizName?.includes('_id') ? (
-        <SwicthEntity
-          entityName={filter.value}
-          chatContext={chatContext}
-          onSwitchEntity={onSwitchEntity}
-        />
+        <>
+          <SwicthEntity
+            entityName={filter.value}
+            chatContext={chatContext}
+            onSwitchEntity={onSwitchEntity}
+          />
+          <span className={`${prefixCls}-switch-entity-tip`}>
+            (如未匹配到相关{entityAlias}，可点击{entityAlias === '艺人' ? '歌手' : entityAlias}
+            ID切换)
+          </span>
+        </>
      ) : (
        <span className={`${prefixCls}-filter-value`}>{filter.value}</span>
      )}
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
@@ -18,6 +18,7 @@ type Props = {
  dimensionFilters: FilterItemType[];
  dateInfo: DateInfoType;
  entityInfo: EntityInfoType;
+  integrateSystem?: string;
  onSelectParseInfo: (parseInfo: ChatContextType) => void;
  onSwitchEntity: (entityId: string) => void;
  onFiltersChange: (filters: FilterItemType[]) => void;
@@ -35,6 +36,7 @@ const ParseTip: React.FC<Props> = ({
  dimensionFilters,
  dateInfo,
  entityInfo,
+  integrateSystem,
  onSelectParseInfo,
  onSwitchEntity,
  onFiltersChange,
@@ -115,14 +117,14 @@ const ParseTip: React.FC<Props> = ({

    return (
      <div className={`${prefixCls}-tip-content`}>
-        {!!agentType && queryMode !== 'DSL' ? (
+        {!!agentType && queryMode !== 'LLM_S2QL' ? (
          <div className={`${prefixCls}-tip-item`}>
            将由{agentType === 'plugin' ? '插件' : '内置'}工具
            <span className={itemValueClass}>{agentName}</span>来解答
          </div>
        ) : (
          <>
-            {(queryMode?.includes('ENTITY') || queryMode === 'DSL') &&
+            {(queryMode?.includes('ENTITY') || queryMode === 'LLM_S2QL') &&
            typeof entityId === 'string' &&
            !!entityAlias &&
            !!entityName ? (
@@ -144,12 +146,14 @@ const ParseTip: React.FC<Props> = ({
                  <div className={itemValueClass}>{metric.name}</div>
                </div>
              )}
-            {['METRIC_GROUPBY', 'METRIC_ORDERBY', 'ENTITY_DETAIL', 'DSL'].includes(queryMode!) &&
+            {['METRIC_GROUPBY', 'METRIC_ORDERBY', 'ENTITY_DETAIL', 'LLM_S2QL'].includes(
+              queryMode!
+            ) &&
              fields &&
              fields.length > 0 && (
                <div className={`${prefixCls}-tip-item`}>
                  <div className={`${prefixCls}-tip-item-name`}>
-                    {queryMode === 'DSL'
+                    {queryMode === 'LLM_S2QL'
                      ? nativeQuery
                        ? '查询字段'
                        : '下钻维度'
@@ -178,12 +182,14 @@ const ParseTip: React.FC<Props> = ({
                  <div className={itemValueClass}>{dimension.value}</div>
                </div>
              ))}
-            {queryMode === 'METRIC_ORDERBY' && aggType && aggType !== 'NONE' && (
-              <div className={`${prefixCls}-tip-item`}>
-                <div className={`${prefixCls}-tip-item-name`}>聚合方式：</div>
-                <div className={itemValueClass}>{AGG_TYPE_MAP[aggType]}</div>
-              </div>
-            )}
+            {(queryMode === 'METRIC_ORDERBY' || queryMode === 'METRIC_MODEL') &&
+              aggType &&
+              aggType !== 'NONE' && (
+                <div className={`${prefixCls}-tip-item`}>
+                  <div className={`${prefixCls}-tip-item-name`}>聚合方式：</div>
+                  <div className={itemValueClass}>{AGG_TYPE_MAP[aggType]}</div>
+                </div>
+              )}
          </>
        )}
      </div>
@@ -218,6 +224,7 @@ const ParseTip: React.FC<Props> = ({
            chatContext={currentParseInfo!}
            entityAlias={entityAlias}
            agentId={agentId}
+            integrateSystem={integrateSystem}
            onFiltersChange={onFiltersChange}
            onSwitchEntity={onSwitchEntity}
            key={filter.name}
@@ -240,11 +247,6 @@ const ParseTip: React.FC<Props> = ({
    <div className={`${prefixCls}-tip`}>
      {getTipNode()}
      {getFiltersNode()}
-      {(!type || queryMode === 'DSL') && entityAlias && entityAlias !== '厂牌' && entityName && (
-        <div className={`${prefixCls}-switch-entity-tip`}>
-          (如未匹配到相关{entityAlias}，可点击{entityAlias === '艺人' ? '歌手' : entityAlias}ID切换)
-        </div>
-      )}
    </div>
  );

--- a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
@@ -27,7 +27,7 @@ const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo }) => {
    setSqlType('');
  };

-  if (!sqlInfo.llmParseSql && !sqlInfo.logicSql && !sqlInfo.querySql) {
+  if (!sqlInfo.s2QL && !sqlInfo.logicSql && !sqlInfo.querySql) {
    return null;
  }

@@ -44,13 +44,13 @@ const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo }) => {
          )}
        </div>
        <div className={`${tipPrefixCls}-content-options`}>
-          {sqlInfo.llmParseSql && (
+          {sqlInfo.s2QL && (
            <div
              className={`${tipPrefixCls}-content-option ${
-                sqlType === 'llmParseSql' ? `${tipPrefixCls}-content-option-active` : ''
+                sqlType === 's2QL' ? `${tipPrefixCls}-content-option-active` : ''
              }`}
              onClick={() => {
-                setSqlType(sqlType === 'llmParseSql' ? '' : 'llmParseSql');
+                setSqlType(sqlType === 's2QL' ? '' : 's2QL');
              }}
            >
              LLM解析SQL
--- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
@@ -25,6 +25,7 @@ type Props = {
  conversationId?: number;
  modelId?: number;
  agentId?: number;
+  score?: number;
  filter?: any[];
  isLastMessage?: boolean;
  msgData?: MsgDataType;
@@ -33,7 +34,7 @@ type Props = {
  integrateSystem?: string;
  executeItemNode?: React.ReactNode;
  renderCustomExecuteNode?: boolean;
-  onMsgDataLoaded?: (data: MsgDataType, valid: boolean) => void;
+  onMsgDataLoaded?: (data: MsgDataType, valid: boolean, isRefresh?: boolean) => void;
  onUpdateMessageScroll?: () => void;
  onSendMsg?: (msg: string) => void;
 };
@@ -43,6 +44,7 @@ const ChatItem: React.FC<Props> = ({
  conversationId,
  modelId,
  agentId,
+  score,
  filter,
  isLastMessage,
  triggerResize,
@@ -68,8 +70,6 @@ const ChatItem: React.FC<Props> = ({
  const [dateInfo, setDateInfo] = useState<DateInfoType>({} as DateInfoType);
  const [entityInfo, setEntityInfo] = useState<EntityInfoType>({} as EntityInfoType);

-  // const [chartIndex, setChartIndex] = useState(0);
-
  const prefixCls = `${PREFIX_CLS}-item`;

  const updateData = (res: Result<MsgDataType>) => {
@@ -208,9 +208,7 @@ const ChatItem: React.FC<Props> = ({
      const resChatContext = res.data?.chatContext;
      const contextValue = { ...(resChatContext || chatContextValue), queryId };
      const dataValue = { ...res.data, chatContext: contextValue };
-      if (onMsgDataLoaded) {
-        onMsgDataLoaded(dataValue, true);
-      }
+      onMsgDataLoaded?.(dataValue, true, true);
      setData(dataValue);
      setParseInfo(contextValue);
    }
@@ -230,7 +228,6 @@ const ChatItem: React.FC<Props> = ({
    } else {
      getEntityInfo(parseInfoValue);
    }
-    onUpdateMessageScroll?.();
  };

  const onSelectQuestion = (question: SimilarQuestionType) => {
@@ -261,6 +258,7 @@ const ChatItem: React.FC<Props> = ({
            dimensionFilters={dimensionFilters}
            dateInfo={dateInfo}
            entityInfo={entityInfo}
+            integrateSystem={integrateSystem}
            onSelectParseInfo={onSelectParseInfo}
            onSwitchEntity={onSwitchEntity}
            onFiltersChange={onFiltersChange}
@@ -294,11 +292,11 @@ const ChatItem: React.FC<Props> = ({
            />
          )}
        </div>
-        {!isMetricCard && data && (
+        {integrateSystem !== 'showcase' && (
          <Tools
            queryId={parseInfo?.queryId || 0}
-            scoreValue={undefined}
-            isLastMessage={isLastMessage}
+            scoreValue={score}
+            // isLastMessage={isLastMessage}
          />
        )}
      </div>
--- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/style.less
@@ -164,15 +164,6 @@
    line-height: 20px;
  }

-  &-switch-entity-tip {
-    display: flex;
-    align-items: center;
-    column-gap: 6px;
-    color: var(--text-color-fourth);
-    font-size: 13px;
-    font-weight: normal;
-  }
-
  &-switch-entity {
    cursor: pointer;
  }
@@ -372,6 +363,16 @@
    min-width: 100px;
  }

+  &-switch-entity-tip {
+    display: flex;
+    align-items: center;
+    column-gap: 6px;
+    margin-left: 4px;
+    color: var(--text-color-fourth);
+    font-size: 13px;
+    font-weight: normal;
+  }
+
  .ant-select-selector, .ant-input-number-input {
    background-color: #f5f8fb !important;
    border-color: #ececec !important;
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx
@@ -28,11 +28,7 @@ const MetricCard: React.FC<Props> = ({ data, loading, onApplyAuth }) => {
  const prefixCls = `${PREFIX_CLS}-metric-card`;

  const matricCardClass = classNames(prefixCls, {
-    [`${PREFIX_CLS}-metric-card-dsl`]: queryMode === 'DSL',
-  });
-
-  const indicatorClass = classNames(`${prefixCls}-indicator`, {
-    [`${prefixCls}-indicator-period-compare`]: metricInfos?.length > 0,
+    [`${PREFIX_CLS}-metric-card-dsl`]: queryMode === 'LLM_S2QL',
  });

  const [isNumber, setIsNumber] = useState(false);
@@ -50,7 +46,7 @@ const MetricCard: React.FC<Props> = ({ data, loading, onApplyAuth }) => {
        )}
      </div>
      <Spin spinning={loading}>
-        <div className={indicatorClass}>
+        <div className={`${prefixCls}-indicator`}>
          {indicatorColumn && !indicatorColumn?.authorized ? (
            <ApplyAuth model={entityInfo?.modelInfo.name || ''} onApplyAuth={onApplyAuth} />
          ) : (
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/style.less
@@ -55,12 +55,8 @@
  &-indicator {
    display: flex;
    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  &-indicator-period-compare {
    align-items: flex-start;
+    justify-content: flex-start;
  }

  &-date-range {
@@ -90,6 +86,7 @@
    column-gap: 40px;
    font-size: 13px;
    overflow-x: auto;
+    margin-bottom: 12px;
  }

  &-period-compare-item {
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
@@ -13,6 +13,7 @@ import moment from 'moment';
 import { ColumnType } from '../../../common/type';
 import NoPermissionChart from '../NoPermissionChart';
 import classNames from 'classnames';
+import { isArray } from 'lodash';

 type Props = {
  model?: string;
@@ -83,7 +84,9 @@ const MetricTrendChart: React.FC<Props> = ({
    });

    const xData = groupData[sortedGroupKeys[0]]?.map((item: any) => {
-      const date = `${item[dateColumnName]}`;
+      const date = isArray(item[dateColumnName])
+        ? item[dateColumnName].join('-')
+        : `${item[dateColumnName]}`;
      return date.length === 10 ? moment(date).format('MM-DD') : date;
    });

--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MultiMetricsTrendChart.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MultiMetricsTrendChart.tsx
@@ -0,0 +1,148 @@
+import { CHART_SECONDARY_COLOR, CLS_PREFIX, THEME_COLOR_LIST } from '../../../common/constants';
+import { getFormattedValue } from '../../../utils/utils';
+import type { ECharts } from 'echarts';
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState } from 'react';
+import moment from 'moment';
+import { ColumnType } from '../../../common/type';
+import { isArray } from 'lodash';
+
+type Props = {
+  dateColumnName: string;
+  metricFields: ColumnType[];
+  resultList: any[];
+  triggerResize?: boolean;
+};
+
+const MultiMetricsTrendChart: React.FC<Props> = ({
+  dateColumnName,
+  metricFields,
+  resultList,
+  triggerResize,
+}) => {
+  const chartRef = useRef<any>();
+  const [instance, setInstance] = useState<ECharts>();
+
+  const renderChart = () => {
+    let instanceObj: any;
+    if (!instance) {
+      instanceObj = echarts.init(chartRef.current);
+      setInstance(instanceObj);
+    } else {
+      instanceObj = instance;
+      instanceObj.clear();
+    }
+
+    const xData = resultList?.map((item: any) => {
+      const date = isArray(item[dateColumnName])
+        ? item[dateColumnName].join('-')
+        : `${item[dateColumnName]}`;
+      return date.length === 10 ? moment(date).format('MM-DD') : date;
+    });
+
+    instanceObj.setOption({
+      legend: {
+        left: 0,
+        top: 0,
+        icon: 'rect',
+        itemWidth: 15,
+        itemHeight: 5,
+        type: 'scroll',
+      },
+      xAxis: {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+          lineStyle: {
+            color: CHART_SECONDARY_COLOR,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: CHART_SECONDARY_COLOR,
+          },
+        },
+        axisLabel: {
+          showMaxLabel: true,
+          color: '#999',
+        },
+        data: xData,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            opacity: 0.3,
+          },
+        },
+        axisLabel: {
+          formatter: function (value: any) {
+            return value === 0 ? 0 : getFormattedValue(value);
+          },
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: function (params: any[]) {
+          const param = params[0];
+          const valueLabels = params
+            .sort((a, b) => b.value - a.value)
+            .map(
+              (item: any) =>
+                `<div style="margin-top: 3px;">${
+                  item.marker
+                } <span style="display: inline-block; width: 70px; margin-right: 12px;">${
+                  item.seriesName
+                }</span><span style="display: inline-block; width: 90px; text-align: right; font-weight: 500;">${
+                  item.value === '' ? '-' : getFormattedValue(item.value)
+                }</span></div>`
+            )
+            .join('');
+          return `${param.name}<br />${valueLabels}`;
+        },
+      },
+      grid: {
+        left: '1%',
+        right: '4%',
+        bottom: '3%',
+        top: 45,
+        containLabel: true,
+      },
+      series: metricFields.map((metricField, index) => {
+        return {
+          type: 'line',
+          name: metricField.name,
+          symbol: 'circle',
+          showSymbol: resultList.length === 1,
+          smooth: true,
+          data: resultList.map((item: any) => {
+            const value = item[metricField.nameEn];
+            return (metricField.dataFormatType === 'percent' ||
+              metricField.dataFormatType === 'decimal') &&
+              metricField.dataFormat?.needMultiply100
+              ? value * 100
+              : value;
+          }),
+          color: THEME_COLOR_LIST[index],
+        };
+      }),
+    });
+    instanceObj.resize();
+  };
+
+  useEffect(() => {
+    renderChart();
+  }, [resultList]);
+
+  useEffect(() => {
+    if (triggerResize && instance) {
+      instance.resize();
+    }
+  }, [triggerResize]);
+
+  const prefixCls = `${CLS_PREFIX}-metric-trend`;
+
+  return <div className={`${prefixCls}-flow-trend-chart`} ref={chartRef} />;
+};
+
+export default MultiMetricsTrendChart;
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
@@ -1,11 +1,12 @@
 import { CLS_PREFIX } from '../../../common/constants';
-import { FieldType, MsgDataType } from '../../../common/type';
+import { DrillDownDimensionType, FieldType, MsgDataType } from '../../../common/type';
 import { isMobile } from '../../../utils/utils';
 import MetricTrendChart from './MetricTrendChart';
 import { Spin } from 'antd';
 import Table from '../Table';
 import MetricInfo from './MetricInfo';
 import DateOptions from '../DateOptions';
+import MultiMetricsTrendChart from './MultiMetricsTrendChart';

 type Props = {
  data: MsgDataType;
@@ -13,6 +14,7 @@ type Props = {
  triggerResize?: boolean;
  loading: boolean;
  activeMetricField?: FieldType;
+  drillDownDimension?: DrillDownDimensionType;
  currentDateOption?: number;
  onApplyAuth?: (model: string) => void;
  onSelectDateOption: (value: number) => void;
@@ -24,6 +26,7 @@ const MetricTrend: React.FC<Props> = ({
  triggerResize,
  loading,
  activeMetricField,
+  drillDownDimension,
  currentDateOption,
  onApplyAuth,
  onSelectDateOption,
@@ -36,6 +39,7 @@ const MetricTrend: React.FC<Props> = ({
  const dateColumnName = dateField?.nameEn || '';
  const categoryColumnName =
    queryColumns?.find((column: any) => column.showType === 'CATEGORY')?.nameEn || '';
+  const metricFields = queryColumns?.filter((column: any) => column.showType === 'NUMBER');

  const currentMetricField = queryColumns?.find((column: any) => column.showType === 'NUMBER');

@@ -48,19 +52,23 @@ const MetricTrend: React.FC<Props> = ({
  return (
    <div className={prefixCls}>
      <div className={`${prefixCls}-charts`}>
-        <div className={`${prefixCls}-top-bar`}>
-          <div
-            className={`${prefixCls}-metric-fields ${prefixCls}-metric-field-single`}
-            key={activeMetricField?.bizName}
-          >
-            {activeMetricField?.name}
+        {metricFields?.length === 1 && (
+          <div className={`${prefixCls}-top-bar`}>
+            <div
+              className={`${prefixCls}-metric-fields ${prefixCls}-metric-field-single`}
+              key={activeMetricField?.bizName}
+            >
+              {activeMetricField?.name}
+            </div>
          </div>
-        </div>
+        )}
        <Spin spinning={loading}>
          <div className={`${prefixCls}-content`}>
-            {!isMobile && aggregateInfo?.metricInfos?.length > 0 && (
-              <MetricInfo aggregateInfo={aggregateInfo} currentMetricField={currentMetricField} />
-            )}
+            {!isMobile &&
+              aggregateInfo?.metricInfos?.length > 0 &&
+              drillDownDimension === undefined && (
+                <MetricInfo aggregateInfo={aggregateInfo} currentMetricField={currentMetricField} />
+              )}
            <DateOptions
              chatContext={chatContext}
              currentDateOption={currentDateOption}
@@ -68,6 +76,13 @@ const MetricTrend: React.FC<Props> = ({
            />
            {queryResults?.length === 1 || chartIndex % 2 === 1 ? (
              <Table data={{ ...data, queryResults }} onApplyAuth={onApplyAuth} />
+            ) : metricFields.length > 1 ? (
+              <MultiMetricsTrendChart
+                dateColumnName={dateColumnName}
+                metricFields={metricFields}
+                resultList={queryResults}
+                triggerResize={triggerResize}
+              />
            ) : (
              <MetricTrendChart
                model={entityInfo?.modelInfo.name}
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
@@ -59,11 +59,9 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
  const metricFields = columns.filter(item => item.showType === 'NUMBER');

  const isDslMetricCard =
-    queryMode === 'DSL' && singleData && metricFields.length === 1 && columns.length === 1;
+    queryMode === 'LLM_S2QL' && singleData && metricFields.length === 1 && columns.length === 1;

-  const isMetricCard =
-    (queryMode.includes('METRIC') || isDslMetricCard) &&
-    (singleData || chatContext?.dateInfo?.startDate === chatContext?.dateInfo?.endDate);
+  const isMetricCard = (queryMode.includes('METRIC') || isDslMetricCard) && singleData;

  const isText =
    columns.length === 1 &&
@@ -95,24 +93,27 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
    if (isTable) {
      return <Table data={{ ...data, queryColumns: columns, queryResults: dataSource }} />;
    }
-    if (dateField && metricFields.length > 0) {
-      if (!dataSource.every(item => item[dateField.nameEn] === dataSource[0][dateField.nameEn])) {
-        return (
-          <MetricTrend
-            data={{
-              ...data,
-              queryColumns: columns,
-              queryResults: dataSource,
-            }}
-            loading={loading}
-            chartIndex={chartIndex}
-            triggerResize={triggerResize}
-            activeMetricField={activeMetricField}
-            currentDateOption={currentDateOption}
-            onSelectDateOption={selectDateOption}
-          />
-        );
-      }
+    if (
+      dateField &&
+      metricFields.length > 0 &&
+      !dataSource.every(item => item[dateField.nameEn] === dataSource[0][dateField.nameEn])
+    ) {
+      return (
+        <MetricTrend
+          data={{
+            ...data,
+            queryColumns: columns,
+            queryResults: dataSource,
+          }}
+          loading={loading}
+          chartIndex={chartIndex}
+          triggerResize={triggerResize}
+          activeMetricField={activeMetricField}
+          drillDownDimension={drillDownDimension}
+          currentDateOption={currentDateOption}
+          onSelectDateOption={selectDateOption}
+        />
+      );
    }
    if (categoryField?.length > 0 && metricFields?.length > 0) {
      return (
@@ -209,7 +210,11 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
        <div>
          {getMsgContent()}
          {(isMultipleMetric || existDrillDownDimension) && (
-            <div className={`${prefixCls}-bottom-tools`}>
+            <div
+              className={`${prefixCls}-bottom-tools ${
+                isMetricCard ? `${prefixCls}-metric-card-tools` : ''
+              }`}
+            >
              {isMultipleMetric && (
                <MetricOptions
                  metrics={chatContext.metrics}
@@ -221,6 +226,7 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
              {existDrillDownDimension && (
                <DrillDownDimensions
                  modelId={chatContext.modelId}
+                  metricId={activeMetricField?.id || defaultMetricField?.id}
                  drillDownDimension={drillDownDimension}
                  originDimensions={chatContext.dimensions}
                  dimensionFilters={chatContext.dimensionFilters}
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/style.less
@@ -14,5 +14,10 @@
    column-gap: 20px;
    font-size: 14px;
    margin-top: 6px;
+    margin-bottom: 2px;
+  }
+
+  &-metric-card-tools {
+    margin-top: 0;
  }
 }
--- a/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';

 type Props = {
  modelId: number;
+  metricId?: number;
  drillDownDimension?: DrillDownDimensionType;
  isMetricCard?: boolean;
  originDimensions?: DrillDownDimensionType[];
@@ -17,8 +18,11 @@ type Props = {

 const MAX_DIMENSION_COUNT = 20;

+const DEFAULT_DIMENSION_COUNT = 5;
+
 const DrillDownDimensions: React.FC<Props> = ({
  modelId,
+  metricId,
  drillDownDimension,
  isMetricCard,
  originDimensions,
@@ -27,12 +31,10 @@ const DrillDownDimensions: React.FC<Props> = ({
 }) => {
  const [dimensions, setDimensions] = useState<DrillDownDimensionType[]>([]);

-  const DEFAULT_DIMENSION_COUNT = isMetricCard ? 3 : 5;
-
  const prefixCls = `${CLS_PREFIX}-drill-down-dimensions`;

  const initData = async () => {
-    const res = await queryDrillDownDimensions(modelId);
+    const res = await queryDrillDownDimensions(modelId, metricId);
    setDimensions(
      res.data.dimensions
        .filter(
--- a/webapp/packages/chat-sdk/src/components/DrillDownDimensions/style.less
+++ b/webapp/packages/chat-sdk/src/components/DrillDownDimensions/style.less
@@ -5,7 +5,6 @@
 .@{drill-down-dimensions-prefix-cls} {
  display: flex;
  flex-direction: column;
-  margin-top: 2px;

  &-section {
    width: 100%;
@@ -13,7 +12,6 @@
    align-items: center;
    flex-wrap: wrap;
    column-gap: 6px;
-    margin-top: 6px;
  }

  &-metric-card {
--- a/webapp/packages/chat-sdk/src/components/IconFont/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/IconFont/index.tsx
@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';

 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4120566_46xw04fpzii.js',
+  scriptUrl: '//at.alicdn.com/t/c/font_4120566_2vn019wsui6.js',
 });

 export default IconFont;
--- a/webapp/packages/chat-sdk/src/components/MetricOptions/style.less
+++ b/webapp/packages/chat-sdk/src/components/MetricOptions/style.less
@@ -12,8 +12,6 @@
    align-items: center;
    flex-wrap: wrap;
    column-gap: 6px;
-    margin-top: 8px;
-    margin-bottom: 4px;
  }

  &-metric-card {
--- a/webapp/packages/chat-sdk/src/components/Tools/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/Tools/index.tsx
@@ -35,7 +35,7 @@ const Tools: React.FC<Props> = ({ queryId, scoreValue, isLastMessage }) => {

  return (
    <div className={prefixCls}>
-      {!isMobile && isLastMessage && (
+      {!isMobile && (
        <div className={`${prefixCls}-feedback`}>
          <div>这个回答正确吗？</div>
          <LikeOutlined className={likeClass} onClick={like} />