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

Co-authored-by: williamhliu <williamhliu@tencent.com>
2025-12-11 03:58:14 +00:00 · 2023-10-18 17:26:43 +08:00
parent 7acdf9cb3d
commit 65614ed3ba
12 changed files with 58 additions and 129 deletions
--- a/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
@@ -75,6 +75,7 @@ const MessageContainer: React.FC<Props> = ({
            msgValue,
            score,
            identityMsg,
+            parseInfos,
            msgData,
            filters,
          } = msgItem;
@@ -91,6 +92,7 @@ const MessageContainer: React.FC<Props> = ({
                  {identityMsg && <Text position="left" data={identityMsg} />}
                  <ChatItem
                    msg={msgValue || msg || ''}
+                    parseInfos={parseInfos}
                    msgData={msgData}
                    conversationId={chatId}
                    modelId={modelId}
--- a/webapp/packages/chat-sdk/src/Chat/MessageContainer/style.module.less
+++ b/webapp/packages/chat-sdk/src/Chat/MessageContainer/style.module.less
@@ -41,101 +41,6 @@
        .ss-chat-table-even-row {
          background-color: #fbfbfb;
        }
-
-        .ant-table-wrapper .ant-table-pagination {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: center;
-          margin: 16px 0 1px;
-          row-gap: 8px;
-        }
-
-        .ant-pagination .ant-pagination-prev,
-        .ant-pagination .ant-pagination-next {
-          display: inline-block;
-          min-width: 32px;
-          height: 32px;
-          color: rgba(0, 0, 0, 0.88);
-          line-height: 32px;
-          text-align: center;
-          vertical-align: middle;
-          list-style: none;
-          border-radius: 6px;
-          cursor: pointer;
-          transition: all 0.2s;
-
-          .ant-pagination-item-link {
-            display: block;
-            width: 100%;
-            height: 100%;
-            padding: 0;
-            font-size: 12px;
-            text-align: center;
-            background-color: transparent;
-            border: 1px solid transparent;
-            border-radius: 6px;
-            outline: none;
-            transition: border 0.2s;
-          }
-        }
-
-        .ant-pagination-jump-prev,
-        .ant-pagination-jump-next {
-          .ant-pagination-item-link {
-            display: inline-block;
-            min-width: 32px;
-            height: 32px;
-            color: rgba(0, 0, 0, 0.25);
-            line-height: 32px;
-            text-align: center;
-            vertical-align: middle;
-            list-style: none;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-          }
-        }
-
-        .ant-pagination-options {
-          display: inline-block;
-          margin-left: 16px;
-          vertical-align: middle;
-        }
-
-        .ant-pagination .ant-pagination-item {
-          display: inline-block;
-          min-width: 32px;
-          height: 32px;
-          line-height: 30px;
-          text-align: center;
-          vertical-align: middle;
-          list-style: none;
-          background-color: transparent;
-          border: 1px solid transparent;
-          border-radius: 6px;
-          outline: 0;
-          cursor: pointer;
-          user-select: none;
-          margin-inline-end: 8px;
-        }
-
-        .ant-pagination .ant-pagination-item-active {
-          font-weight: 600;
-          background-color: #ffffff;
-          border-color: var(--primary-color);
-        }
-
-        .ant-pagination {
-          box-sizing: border-box;
-          margin: 0;
-          padding: 0;
-          color: #606266;
-          font-size: 14px;
-          font-variant: tabular-nums;
-          line-height: 1.5715;
-          list-style: none;
-          font-feature-settings: 'tnum', 'tnum';
-        }
      }
    }
  }
--- a/webapp/packages/chat-sdk/src/Chat/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/index.tsx
@@ -165,7 +165,7 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
      {
        id: uuid(),
        type: MessageTypeEnum.AGENT_LIST,
-        msg: agent?.name || currentAgent?.name || agentList?.[0].name,
+        msg: agent?.name || currentAgent?.name || agentList?.[0]?.name,
      },
    ]);
  };
@@ -175,6 +175,7 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
      id: item.questionId,
      type: MessageTypeEnum.QUESTION,
      msg: item.queryText,
+      parseInfos: item.parseInfos,
      msgData: item.queryResult,
      score: item.score,
      agentId: currentAgent?.id,
--- a/webapp/packages/chat-sdk/src/Chat/type.ts
+++ b/webapp/packages/chat-sdk/src/Chat/type.ts
@@ -1,4 +1,4 @@
-import { MsgDataType, SendMsgParamsType } from "../common/type";
+import { ChatContextType, MsgDataType, SendMsgParamsType } from "../common/type";

 export enum MessageTypeEnum {
  TEXT = 'text', // 指标文本
@@ -22,6 +22,7 @@ export type MessageItem = {
  modelId?: number;
  agentId?: number;
  entityId?: string;
+  parseInfos?: ChatContextType[];
  msgData?: MsgDataType;
  quote?: string;
  score?: number;
--- a/webapp/packages/chat-sdk/src/ShowCase/index.tsx
+++ b/webapp/packages/chat-sdk/src/ShowCase/index.tsx
@@ -20,7 +20,7 @@ const ShowCase: React.FC<Props> = ({ agentId, onSendMsg }) => {
    if (pageNo === 1) {
      setLoading(true);
    }
-    const res = await queryShowCase(agentId, pageNo, 20);
+    const res = await queryShowCase(agentId, pageNo, 30);
    if (pageNo === 1) {
      setLoading(false);
    }
--- a/webapp/packages/chat-sdk/src/common/type.ts
+++ b/webapp/packages/chat-sdk/src/common/type.ts
@@ -210,6 +210,7 @@ export type SuggestionDataType = {
 export type HistoryMsgItemType = {
  questionId: number;
  queryText: string;
+  parseInfos: ChatContextType[];
  queryResult: MsgDataType;
  chatId: number;
  createTime: string;
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
+++ b/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}
            />
          )}
--- a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
+++ b/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 && (
--- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
+++ b/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>
  );
--- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less
+++ b/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 {
--- a/webapp/packages/chat-sdk/src/components/MetricOptions/style.less
+++ b/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 {
--- a/webapp/packages/chat-sdk/src/styles/global.less
+++ b/webapp/packages/chat-sdk/src/styles/global.less
@@ -49,4 +49,4 @@
      background-color: #efefef !important;
    }
  } 
-}
+}