[improvement][headless-fe] Added a simplified mode to the question-answering system. (#1051)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. * [improvement][semantic-fe] Fixing the logic error in the dimension value setting. * [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information. * [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience. * [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas. * [improvement][semantic-fe] Changing the line type for canvas connections. * [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless". * [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model. * [improvement][semantic-fe] Updating the logic for the fieldName. * [improvement][semantic-fe] Adjusting the position of the metrics tab. * [improvement][semantic-fe] Changing the 字段名称 to 英文名称. * [improvement][semantic-fe] Fix metric measurement deletion. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI adjustment for metric details page. * [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty. * [improvement][semantic-fe] Added field type and metric type to the metric creation options. * [improvement][semantic-fe] The organization structure selection feature has been added to the permission management. * [improvement][semantic-fe] Improved user experience for the metric list. * [improvement][semantic-fe] fix update the metric list. * [improvement][headless-fe] Added view management functionality. * [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system. * [improvement][headless-fe] Added model editing side effect detection. * [improvement][headless-fe] Fixed the logic error in view editing. * [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings. * [improvement][headless-fe] Added the ability to hide the Q&A settings entry point. * [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation. * [improvement][headless-fe] Added search functionality to the field list in model editing. * [improvement][headless-fe] fix the field list in model editing * [improvement][headless-fe] Restructured the data for the dimension value settings interface. * [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts. * [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function. * [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process. * [improvement][headless-fe] Replaced the term "view" with "dataset" * [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target. * [improvement][headless-fe] Enhanced dataset creation to support the tag mode. * [improvement][headless-fe] Added tag value setting. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead. * [improvement][headless-fe] Added search functionality to model management. * [improvement][headless-fe] Removed field null validation during model editing. * [improvement][headless-fe] Updated the batch operation button component. * [improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings. * [improvement][headless-fe] Adjusted the length of the input field for model editing names. * [improvement][headless-fe] Lock the version of the @ant-design/pro-table component and replace it with @ant-design/pro-components. * [improvement][headless-fe] Optimized the style of the metrics market and tags market. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] Fixed the issue where the conditions for metric measurement creation were not being saved correctly. * [improvement][headless-fe] Default value setting for hiding dimensions. * [improvement][headless-fe] Updated the file imports in the project. * [improvement][headless-fe] Adjusted the logic for displaying the tab in the theme domain. * [improvement][headless-fe] Added term management functionality. * [improvement][headless-fe] When creating a model, the current metric operator now allows for clearance. * [improvement][headless-fe] Term management interface transformation * [improvement][headless-fe] Migrating scaffold version to @umi/max * [improvement][headless-fe] remove modle column * [improvement][headless-fe] 1.Added configuration for the large language model in the agent; 2.upgraded React version from 17 to 18; 3.modified some UI effects. * [improvement][headless-fe] Added a simplified mode to the question-answering system.
2025-12-10 11:07:06 +00:00 · 2024-05-30 11:26:37 +08:00
parent 40b3142730
commit 3b09a5c0ed
15 changed files with 358 additions and 142 deletions
--- a/webapp/packages/chat-sdk/package.json
+++ b/webapp/packages/chat-sdk/package.json
@@ -9,16 +9,22 @@
    "@ant-design/icons": "^4.7.0",
    "@uiw/react-watermark": "^0.0.5",
    "ahooks": "^3.7.8",
-    "antd": "^5.11.2",
+    "antd": "^5.17.4",
    "axios": "^0.21.1",
    "classnames": "^2.3.2",
    "dayjs": "^1.11.10",
    "echarts": "^5.4.2",
+    "github-markdown-css": "^5.5.1",
+    "highlight.js": "^11.9.0",
    "lodash": "^4.17.11",
    "moment": "^2.29.4",
    "react-copy-to-clipboard": "^5.1.0",
+    "react-grid-layout": "^1.4.4",
+    "react-markdown": "^9.0.1",
    "react-spinners": "^0.13.8",
    "react-syntax-highlighter": "^15.5.0",
+    "rehype-highlight": "^7.0.0",
+    "remark-gfm": "^4.0.0",
    "sql-formatter": "^2.3.3",
    "tslib": "^2.5.2"
  },
--- a/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
@@ -18,6 +18,7 @@ type Props = {
  chatVisible?: boolean;
  isDeveloper?: boolean;
  integrateSystem?: string;
+  isSimpleMode?: boolean;
  onMsgDataLoaded: (
    data: MsgDataType,
    questionId: string | number,
@@ -37,6 +38,7 @@ const MessageContainer: React.FC<Props> = ({
  chatVisible,
  isDeveloper,
  integrateSystem,
+  isSimpleMode,
  onMsgDataLoaded,
  onSendMsg,
 }) => {
@@ -65,7 +67,7 @@ const MessageContainer: React.FC<Props> = ({
  return (
    <div id={id} className={messageContainerClass}>
      <div className={styles.messageList}>
-        {messageList.map((msgItem: MessageItem, index: number) => {
+        {messageList.map((msgItem: MessageItem) => {
          const {
            id: msgId,
            modelId,
@@ -92,6 +94,7 @@ const MessageContainer: React.FC<Props> = ({
                  <Text position="right" data={msg} />
                  {identityMsg && <Text position="left" data={identityMsg} />}
                  <ChatItem
+                    isSimpleMode={isSimpleMode}
                    msg={msgValue || msg || ''}
                    parseInfos={parseInfos}
                    parseTimeCostValue={parseTimeCost}
@@ -126,7 +129,8 @@ function areEqual(prevProps: Props, nextProps: Props) {
    isEqual(prevProps.messageList, nextProps.messageList) &&
    prevProps.historyVisible === nextProps.historyVisible &&
    prevProps.currentAgent === nextProps.currentAgent &&
-    prevProps.chatVisible === nextProps.chatVisible
+    prevProps.chatVisible === nextProps.chatVisible &&
+    prevProps.isSimpleMode === nextProps.isSimpleMode
  ) {
    return true;
  }
--- a/webapp/packages/chat-sdk/src/Chat/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/index.tsx
@@ -21,7 +21,7 @@ import MobileAgents from './MobileAgents';
 import { HistoryMsgItemType, MsgDataType, SendMsgParamsType } from '../common/type';
 import { getHistoryMsg } from '../service';
 import ShowCase from '../ShowCase';
-import { Drawer, Modal } from 'antd';
+import { Drawer, Modal, Row, Col, Space, Switch, Tooltip } from 'antd';

 type Props = {
  token?: string;
@@ -66,6 +66,8 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
  const [agentListVisible, setAgentListVisible] = useState(true);
  const [showCaseVisible, setShowCaseVisible] = useState(false);

+  const [isSimpleMode, setIsSimpleMode] = useState<boolean>(false);
+
  const conversationRef = useRef<any>();
  const chatFooterRef = useRef<any>();

@@ -370,12 +372,32 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
              <div className={styles.chatContent}>
                {currentAgent && !isMobile && !noInput && (
                  <div className={styles.chatHeader}>
+                    <Row style={{ width: '100%' }}>
+                      <Col flex="1 1 200px">
+                        <Space>
                          <div className={styles.chatHeaderTitle}>{currentAgent.name}</div>
                          <div className={styles.chatHeaderTip}>{currentAgent.description}</div>
+                          <Tooltip title="精简模式下，问答结果将以文本形式输出">
+                            <Switch
+                              style={{ position: 'relative', top: -1 }}
+                              size="small"
+                              value={isSimpleMode}
+                              checkedChildren="精简模式"
+                              unCheckedChildren="精简模式"
+                              onChange={checked => {
+                                setIsSimpleMode(checked);
+                              }}
+                            />
+                          </Tooltip>
+                        </Space>
+                      </Col>
+                      <Col flex="0 1 118px"></Col>
+                    </Row>
                  </div>
                )}
                <MessageContainer
                  id="messageContainer"
+                  isSimpleMode={isSimpleMode}
                  messageList={messageList}
                  chatId={currentConversation?.chatId}
                  historyVisible={historyVisible}
--- a/webapp/packages/chat-sdk/src/Chat/style.module.less
+++ b/webapp/packages/chat-sdk/src/Chat/style.module.less
@@ -46,8 +46,8 @@
            }

            .chatHeaderTip {
-              width: 600px;
-              margin-left: 16px;
+              max-width: 600px;
+              margin-left: 5px;
              overflow: hidden;
              color: var(--text-color-third);
              font-size: 12px;
--- a/webapp/packages/chat-sdk/src/common/constants.ts
+++ b/webapp/packages/chat-sdk/src/common/constants.ts
@@ -20,9 +20,24 @@ export const CHART_SECONDARY_COLOR = 'rgba(153, 153, 153, 0.3)';
 export const CLS_PREFIX = 'ss-chat';

 export const DATE_TYPES = {
-  DAY: [{ label: '近7天', value: 7 }, { label: '近30天', value: 30 }, { label: '近60天', value: 60 }, { label: '近90天', value: 90 }],
-  WEEK: [{ label: '近4周', value: 4 }, { label: '近12周', value: 12 }, { label: '近24周', value: 24 }, { label: '近52周', value: 52 }],
-  MONTH: [{ label: '近3个月', value: 3 }, { label: '近6个月', value: 6 }, { label: '近12个月', value: 12 }, { label: '近24个月', value: 24  }],
+  DAY: [
+    { label: '近7天', value: 7 },
+    { label: '近30天', value: 30 },
+    { label: '近60天', value: 60 },
+    { label: '近90天', value: 90 },
+  ],
+  WEEK: [
+    { label: '近4周', value: 4 },
+    { label: '近12周', value: 12 },
+    { label: '近24周', value: 24 },
+    { label: '近52周', value: 52 },
+  ],
+  MONTH: [
+    { label: '近3个月', value: 3 },
+    { label: '近6个月', value: 6 },
+    { label: '近12个月', value: 12 },
+    { label: '近24个月', value: 24 },
+  ],
 };

 export const THEME_COLOR_LIST = [
@@ -42,7 +57,8 @@ export const THEME_COLOR_LIST = [

 export const PARSE_ERROR_TIP = '智能助理不太懂您说什么呐，回去一定补充知识';

-export const SEARCH_EXCEPTION_TIP = '查询出错啦，数据库可能出现异常或者负载繁忙，请联系管理员或者稍后重试';
+export const SEARCH_EXCEPTION_TIP =
+  '查询出错啦，数据库可能出现异常或者负载繁忙，请联系管理员或者稍后重试';

 export const MSG_VALID_TIP = {
  [MsgValidTypeEnum.SEARCH_EXCEPTION]: '数据查询异常',
@@ -56,4 +72,13 @@ export const AGG_TYPE_MAP = {
  AVG: '平均值',
  MAX: '最大值',
  MIN: '最小值',
+};
+
+export enum MsgContentTypeEnum {
+  TEXT = 'TEXT',
+  METRIC_CARD = 'METRIC_CARD',
+  TABLE = 'TABLE',
+  METRIC_TREND = 'METRIC_TREND',
+  METRIC_BAR = 'METRIC_BAR',
+  MARKDOWN = 'MARKDOWN',
 }
--- a/webapp/packages/chat-sdk/src/common/type.ts
+++ b/webapp/packages/chat-sdk/src/common/type.ts
@@ -93,10 +93,11 @@ export type ChatContextType = {
  elementMatches: any[];
  nativeQuery: boolean;
  queryMode: string;
-  queryType: 'METRIC' | 'METRIC_ID' | 'ID' | 'TAG' | 'OTHER';
+  queryType: 'METRIC' | 'METRIC_TAG' | 'ID' | 'DETAIL' | 'OTHER';
  dimensionFilters: FilterItemType[];
  properties: any;
  sqlInfo: SqlInfoType;
+  textInfo: string;
 };

 export enum MsgValidTypeEnum {
@@ -143,6 +144,7 @@ export type MsgDataType = {
  queryTimeCost?: number;
  similarQueries: SimilarQuestionType[];
  recommendedDimensions: DrillDownDimensionType[];
+  textResult: string;
 };

 export enum ParseStateEnum {
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx
@@ -1,11 +1,11 @@
-import { Spin } from 'antd';
+import { Spin, Row, Col, Switch } from 'antd';
 import { CheckCircleFilled } from '@ant-design/icons';
-import { PREFIX_CLS } from '../../common/constants';
+import { PREFIX_CLS, MsgContentTypeEnum } from '../../common/constants';
 import { MsgDataType } from '../../common/type';
 import ChatMsg from '../ChatMsg';
 import WebPage from '../ChatMsg/WebPage';
 import Loading from './Loading';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useState } from 'react';

 type Props = {
  queryId?: number;
@@ -18,6 +18,7 @@ type Props = {
  data?: MsgDataType;
  triggerResize?: boolean;
  isDeveloper?: boolean;
+  isSimpleMode?: boolean;
 };

 const ExecuteItem: React.FC<Props> = ({
@@ -31,8 +32,11 @@ const ExecuteItem: React.FC<Props> = ({
  data,
  triggerResize,
  isDeveloper,
+  isSimpleMode,
 }) => {
  const prefixCls = `${PREFIX_CLS}-item`;
+  const [showMsgContentTable, setShowMsgContentTable] = useState<boolean>(false);
+  const [msgContentType, setMsgContentType] = useState<MsgContentTypeEnum>();

  const getNodeTip = (title: ReactNode, tip?: string) => {
    return (
@@ -73,11 +77,28 @@ const ExecuteItem: React.FC<Props> = ({
    <>
      <div className={`${prefixCls}-title-bar`}>
        <CheckCircleFilled className={`${prefixCls}-step-icon`} />
-        <div className={`${prefixCls}-step-title`}>
+        <div className={`${prefixCls}-step-title`} style={{ width: '100%' }}>
+          <Row style={{ width: '100%' }}>
+            <Col flex="1 1 auto">
              数据查询
              {data?.queryTimeCost && isDeveloper && (
                <span className={`${prefixCls}-title-tip`}>(耗时: {data.queryTimeCost}ms)</span>
              )}
+            </Col>
+            <Col flex="0 1 70px">
+              {[MsgContentTypeEnum.METRIC_TREND, MsgContentTypeEnum.METRIC_BAR].includes(
+                msgContentType as MsgContentTypeEnum
+              ) && (
+                <Switch
+                  checkedChildren="表格"
+                  unCheckedChildren="表格"
+                  onChange={checked => {
+                    setShowMsgContentTable(checked);
+                  }}
+                />
+              )}
+            </Col>
+          </Row>
        </div>
      </div>
      <div className={`${prefixCls}-content-container`}>
@@ -91,10 +112,15 @@ const ExecuteItem: React.FC<Props> = ({
            <WebPage id={queryId!} data={data} />
          ) : (
            <ChatMsg
+              isSimpleMode={isSimpleMode}
+              forceShowTable={showMsgContentTable}
              queryId={queryId}
              data={data}
              chartIndex={chartIndex}
              triggerResize={triggerResize}
+              onMsgContentTypeChange={type => {
+                setMsgContentType(type);
+              }}
            />
          )}
        </Spin>
--- a/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
@@ -126,7 +126,7 @@ const FilterItem: React.FC<Props> = ({
    onFiltersChange(newFilters);
  };

-  const onDateChange = (_: any, date: string) => {
+  const onDateChange = (_: any, date: string | string[]) => {
    const newFilters = filters.map((item, indexValue) => {
      if (item.bizName === filter.bizName && index === indexValue) {
        item.value = date;
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
@@ -5,6 +5,7 @@ import { Button, DatePicker } from 'antd';
 import { CheckCircleFilled, ReloadOutlined } from '@ant-design/icons';
 import Loading from './Loading';
 import FilterItem from './FilterItem';
+import MarkDown from '../ChatMsg/MarkDown';
 import classNames from 'classnames';
 import { isMobile } from '../../utils/utils';
 import dayjs from 'dayjs';
@@ -23,6 +24,7 @@ type Props = {
  integrateSystem?: string;
  parseTimeCost?: number;
  isDeveloper?: boolean;
+  isSimpleMode?: boolean;
  onSelectParseInfo: (parseInfo: ChatContextType) => void;
  onSwitchEntity: (entityId: string) => void;
  onFiltersChange: (filters: FilterItemType[]) => void;
@@ -44,6 +46,7 @@ const ParseTip: React.FC<Props> = ({
  integrateSystem,
  parseTimeCost,
  isDeveloper,
+  isSimpleMode,
  onSelectParseInfo,
  onSwitchEntity,
  onFiltersChange,
@@ -51,7 +54,6 @@ const ParseTip: React.FC<Props> = ({
  onRefresh,
 }) => {
  const prefixCls = `${PREFIX_CLS}-item`;
-
  const getNode = (tipTitle: ReactNode, tipNode?: ReactNode) => {
    return (
      <div className={`${prefixCls}-parse-tip`}>
@@ -99,6 +101,7 @@ const ParseTip: React.FC<Props> = ({
    entity,
    elementMatches,
    nativeQuery,
+    textInfo = '',
  } = currentParseInfo || {};

  const entityAlias = entity?.alias?.[0]?.split('.')?.[0];
@@ -152,15 +155,15 @@ const ParseTip: React.FC<Props> = ({
                <div className={itemValueClass}>{dataSet?.name}</div>
              </div>
            )}
-            {(queryType === 'METRIC' || queryType === 'METRIC_ID' || queryType === 'TAG') && (
+            {(queryType === 'METRIC' || queryType === 'METRIC_TAG' || queryType === 'DETAIL') && (
              <div className={`${prefixCls}-tip-item`}>
                <div className={`${prefixCls}-tip-item-name`}>查询模式：</div>
                <div className={itemValueClass}>
-                  {queryType === 'METRIC' || queryType === 'METRIC_ID' ? '指标模式' : '标签模式'}
+                  {queryType === 'METRIC' || queryType === 'METRIC_TAG' ? '指标模式' : '明细模式'}
                </div>
              </div>
            )}
-            {queryType !== 'TAG' &&
+            {queryType !== 'DETAIL' &&
              metrics &&
              metrics.length > 0 &&
              !dimensions?.some(item => item.bizName?.includes('_id')) && (
@@ -315,7 +318,7 @@ const ParseTip: React.FC<Props> = ({
        </div>
      )}
    </div>,
-    tipNode
+    isSimpleMode ? <MarkDown markdown={textInfo} /> : tipNode
  );
 };

--- a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
@@ -162,6 +162,20 @@ const SqlItem: React.FC<Props> = ({
                <div className={`${prefixCls}-schema-content`}>{priorExts}</div>
              </div>
            )}
+            {schema?.terms?.length > 0 && (
+              <div className={`${prefixCls}-schema-row`}>
+                <div className={`${prefixCls}-schema-title`}>术语：</div>
+                <div className={`${prefixCls}-schema-content`}>
+                  {schema.terms
+                    .map((item: any) => {
+                      return `${item.name}${
+                        item.alias?.length > 0 ? `(${item.alias.join(',')})` : ''
+                      }: ${item.description}`;
+                    })
+                    .join('、')}
+                </div>
+              </div>
+            )}
          </div>
        )}
        {sqlType === 'fewShots' && (
--- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
@@ -36,6 +36,7 @@ type Props = {
  integrateSystem?: string;
  executeItemNode?: React.ReactNode;
  renderCustomExecuteNode?: boolean;
+  isSimpleMode?: boolean;
  onMsgDataLoaded?: (data: MsgDataType, valid: boolean, isRefresh?: boolean) => void;
  onUpdateMessageScroll?: () => void;
  onSendMsg?: (msg: string) => void;
@@ -56,6 +57,7 @@ const ChatItem: React.FC<Props> = ({
  integrateSystem,
  executeItemNode,
  renderCustomExecuteNode,
+  isSimpleMode,
  onMsgDataLoaded,
  onUpdateMessageScroll,
  onSendMsg,
@@ -318,6 +320,7 @@ const ChatItem: React.FC<Props> = ({
      <div className={isMobile ? `${prefixCls}-mobile-msg-card` : `${prefixCls}-msg-card`}>
        <div className={contentClass}>
          <ParseTip
+            isSimpleMode={isSimpleMode}
            parseLoading={parseLoading}
            parseInfoOptions={parseInfoOptions}
            parseTip={parseTip}
@@ -337,7 +340,11 @@ const ChatItem: React.FC<Props> = ({
          />
          {executeMode && (
            <>
-              {!isMobile && parseInfo?.sqlInfo && isDeveloper && integrateSystem !== 'c2' && (
+              {!isMobile &&
+                parseInfo?.sqlInfo &&
+                isDeveloper &&
+                integrateSystem !== 'c2' &&
+                !isSimpleMode && (
                  <SqlItem
                    llmReq={llmReq}
                    llmResp={llmResp}
@@ -348,6 +355,7 @@ const ChatItem: React.FC<Props> = ({
                  />
                )}
              <ExecuteItem
+                isSimpleMode={isSimpleMode}
                queryId={parseInfo?.queryId}
                executeLoading={executeLoading}
                entitySwitchLoading={entitySwitchLoading}
@@ -361,7 +369,9 @@ const ChatItem: React.FC<Props> = ({
              />
            </>
          )}
-          {(parseTip !== '' || (executeMode && !executeLoading)) && integrateSystem !== 'c2' && (
+          {(parseTip !== '' || (executeMode && !executeLoading)) &&
+            integrateSystem !== 'c2' &&
+            !isSimpleMode && (
              <SimilarQuestionItem
                queryId={parseInfo?.queryId}
                defaultExpanded={parseTip !== '' || executeTip !== '' || integrateSystem === 'wiki'}
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MarkDown/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MarkDown/index.tsx
@@ -0,0 +1,31 @@
+import { MsgDataType } from '../../../common/type';
+import { CLS_PREFIX } from '../../../common/constants';
+import { SizeType } from 'antd/es/config-provider/SizeContext';
+import rehypeHighlight from 'rehype-highlight';
+import remarkGfm from 'remark-gfm';
+import Markdown from 'react-markdown';
+import 'github-markdown-css/github-markdown.css';
+import 'highlight.js/styles/github.css';
+
+type Props = {
+  // data: MsgDataType;
+  // size?: SizeType;
+  markdown: string;
+  loading?: boolean;
+  onApplyAuth?: (model: string) => void;
+};
+
+const MarkDown: React.FC<Props> = ({ markdown, loading, onApplyAuth }) => {
+  // const { textResult } = data;
+  const prefixCls = `${CLS_PREFIX}-markdown`;
+
+  return (
+    <div className={`${prefixCls} markdown-body`} style={{ fontSize: 14 }}>
+      <Markdown rehypePlugins={[rehypeHighlight]} remarkPlugins={[remarkGfm]}>
+        {markdown}
+      </Markdown>
+    </div>
+  );
+};
+
+export default MarkDown;
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MarkDown/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MarkDown/style.less
@@ -0,0 +1,9 @@
+@import '../../../styles/index.less';
+
+@markdown-prefix-cls: ~'@{supersonic-chat-prefix}-markdown';
+
+.@{markdown-prefix-cls} {
+  margin-top: 6px;
+
+
+}
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx
@@ -33,10 +33,14 @@ const Table: React.FC<Props> = ({ data, size, loading, onApplyAuth }) => {
          if (dataFormatType === 'percent') {
            return (
              <div className={`${prefixCls}-formatted-value`}>
-                {`${formatByDecimalPlaces(
+                {`${
+                  value
+                    ? formatByDecimalPlaces(
                        dataFormat?.needMultiply100 ? +value * 100 : value,
                        dataFormat?.decimalPlaces || 2
-                )}%`}
+                      )
+                    : 0
+                }%`}
              </div>
            );
          }
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
@@ -1,12 +1,13 @@
 import Bar from './Bar';
 import MetricCard from './MetricCard';
 import MetricTrend from './MetricTrend';
+import MarkDown from './MarkDown';
 import Table from './Table';
 import { ColumnType, DrillDownDimensionType, FieldType, MsgDataType } from '../../common/type';
 import { useEffect, useState } from 'react';
 import { queryData } from '../../service';
 import classNames from 'classnames';
-import { PREFIX_CLS } from '../../common/constants';
+import { PREFIX_CLS, MsgContentTypeEnum } from '../../common/constants';
 import Text from './Text';
 import DrillDownDimensions from '../DrillDownDimensions';
 import MetricOptions from '../MetricOptions';
@@ -17,13 +18,24 @@ type Props = {
  data: MsgDataType;
  chartIndex: number;
  triggerResize?: boolean;
+  forceShowTable?: boolean;
+  isSimpleMode?: boolean;
+  onMsgContentTypeChange?: (MsgContentTypeEnum) => void;
 };

-const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize }) => {
+const ChatMsg: React.FC<Props> = ({
+  queryId,
+  data,
+  chartIndex,
+  triggerResize,
+  forceShowTable = false,
+  isSimpleMode,
+  onMsgContentTypeChange,
+}) => {
  const { queryColumns, queryResults, chatContext, queryMode } = data || {};
  const { dimensionFilters, elementMatches } = chatContext || {};

-  const [columns, setColumns] = useState<ColumnType[]>();
+  const [columns, setColumns] = useState<ColumnType[]>([]);
  const [referenceColumn, setReferenceColumn] = useState<ColumnType>();
  const [dataSource, setDataSource] = useState<any[]>(queryResults);
  const [drillDownDimension, setDrillDownDimension] = useState<DrillDownDimensionType>();
@@ -53,16 +65,21 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
    setDrillDownDimension(undefined);
    setSecondDrillDownDimension(undefined);
  }, [data]);
-
-  if (!queryColumns || !queryResults || !columns) {
-    return null;
-  }
-
+  const metricFields = columns.filter(item => item.showType === 'NUMBER');
+  const getMsgContentType = () => {
    const singleData = dataSource.length === 1;
    const dateField = columns.find(item => item.showType === 'DATE' || item.type === 'DATE');
    const categoryField = columns.filter(item => item.showType === 'CATEGORY');
    const metricFields = columns.filter(item => item.showType === 'NUMBER');
-
+    if (!columns) {
+      return;
+    }
+    if (isSimpleMode) {
+      return MsgContentTypeEnum.MARKDOWN;
+    }
+    if (forceShowTable) {
+      return MsgContentTypeEnum.TABLE;
+    }
    const isDslMetricCard =
      queryMode === 'LLM_S2SQL' && singleData && metricFields.length === 1 && columns.length === 1;

@@ -74,6 +91,13 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
      ((!queryMode.includes('METRIC') && !queryMode.includes('ENTITY')) ||
        queryMode === 'METRIC_INTERPRET') &&
      singleData;
+    if (isText) {
+      return MsgContentTypeEnum.TEXT;
+    }
+
+    if (isMetricCard) {
+      return MsgContentTypeEnum.METRIC_CARD;
+    }

    const isTable =
      !isText &&
@@ -83,31 +107,60 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
        queryMode === 'ENTITY_DIMENSION' ||
        (categoryField.length === 1 && metricFields.length === 0));

-  const getMsgContent = () => {
-    if (isText) {
-      return <Text columns={columns} referenceColumn={referenceColumn} dataSource={dataSource} />;
+    if (isTable) {
+      return MsgContentTypeEnum.TABLE;
    }
-    if (isMetricCard) {
+    const isMetricTrend =
+      dateField &&
+      metricFields.length > 0 &&
+      !dataSource.every(item => item[dateField.nameEn] === dataSource[0][dateField.nameEn]);
+
+    if (isMetricTrend) {
+      return MsgContentTypeEnum.METRIC_TREND;
+    }
+
+    const isMetricBar =
+      categoryField?.length > 0 &&
+      metricFields?.length > 0 &&
+      (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 50);
+
+    if (isMetricBar) {
+      return MsgContentTypeEnum.METRIC_BAR;
+    }
+    return MsgContentTypeEnum.TABLE;
+  };
+
+  useEffect(() => {
+    const type = getMsgContentType();
+    if (type) {
+      onMsgContentTypeChange?.(type);
+    }
+  }, [data, columns, isSimpleMode]);
+
+  if (!queryColumns || !queryResults || !columns) {
+    return null;
+  }
+
+  const getMsgContent = () => {
+    const contentType = getMsgContentType();
+    switch (contentType) {
+      case MsgContentTypeEnum.TEXT:
+        return <Text columns={columns} referenceColumn={referenceColumn} dataSource={dataSource} />;
+      case MsgContentTypeEnum.METRIC_CARD:
        return (
          <MetricCard
            data={{ ...data, queryColumns: columns, queryResults: dataSource }}
            loading={loading}
          />
        );
-    }
-    if (isTable) {
+      case MsgContentTypeEnum.TABLE:
        return (
          <Table
            data={{ ...data, queryColumns: columns, queryResults: dataSource }}
            loading={loading}
          />
        );
-    }
-    if (
-      dateField &&
-      metricFields.length > 0 &&
-      !dataSource.every(item => item[dateField.nameEn] === dataSource[0][dateField.nameEn])
-    ) {
+      case MsgContentTypeEnum.METRIC_TREND:
        return (
          <MetricTrend
            data={{
@@ -124,12 +177,7 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
            onSelectDateOption={selectDateOption}
          />
        );
-    }
-    if (
-      categoryField?.length > 0 &&
-      metricFields?.length > 0 &&
-      (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 50)
-    ) {
+      case MsgContentTypeEnum.METRIC_BAR:
        return (
          <Bar
            data={{ ...data, queryColumns: columns, queryResults: dataSource }}
@@ -138,13 +186,16 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
            metricField={metricFields[0]}
          />
        );
-    }
+      case MsgContentTypeEnum.MARKDOWN:
+        return <MarkDown markdown={data.textResult} loading={loading} />;
+      default:
        return (
          <Table
            data={{ ...data, queryColumns: columns, queryResults: dataSource }}
            loading={loading}
          />
        );
+    }
  };

  const onLoadData = async (value: any) => {
@@ -226,18 +277,25 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
    });
  };

-  const chartMsgClass = classNames({ [prefixCls]: !isTable });
+  const chartMsgClass = classNames({
+    [prefixCls]: ![MsgContentTypeEnum.TABLE, MsgContentTypeEnum.MARKDOWN].includes(
+      getMsgContentType() as MsgContentTypeEnum
+    ),
+  });

  const entityId = dimensionFilters?.length > 0 ? dimensionFilters[0].value : undefined;
  const entityName = elementMatches?.find((item: any) => item.element?.type === 'ID')?.element
    ?.name;

  const isEntityMode =
-    (queryMode === 'TAG_LIST_FILTER' || queryMode === 'METRIC_ID') &&
+    (queryMode === 'TAG_LIST_FILTER' || queryMode === 'METRIC_TAG') &&
    typeof entityId === 'string' &&
    entityName !== undefined;

-  const existDrillDownDimension = queryMode.includes('METRIC') && !isText && !isEntityMode;
+  const existDrillDownDimension =
+    queryMode.includes('METRIC') &&
+    getMsgContentType() !== MsgContentTypeEnum.TEXT &&
+    !isEntityMode;

  const recommendMetrics = chatContext?.metrics?.filter(metric =>
    queryColumns.every(queryColumn => queryColumn.nameEn !== metric.bizName)
@@ -258,7 +316,9 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
          {(isMultipleMetric || existDrillDownDimension) && (
            <div
              className={`${prefixCls}-bottom-tools ${
-                isMetricCard ? `${prefixCls}-metric-card-tools` : ''
+                getMsgContentType() === MsgContentTypeEnum.METRIC_CARD
+                  ? `${prefixCls}-metric-card-tools`
+                  : ''
              } ${isMobile ? 'mobile' : ''}`}
            >
              {isMultipleMetric && (