[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.

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"
   },

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;
   }

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}>
-                    <div className={styles.chatHeaderTitle}>{currentAgent.name}</div>
+                    <Row style={{ width: '100%' }}>
-                    <div className={styles.chatHeaderTip}>{currentAgent.description}</div>
+                      <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}

webapp/packages/chat-sdk/src/Chat/style.module.less

@@ -46,8 +46,8 @@
             }
 
             .chatHeaderTip {
-              width: 600px;
+              max-width: 600px;
-              margin-left: 16px;
+              margin-left: 5px;
               overflow: hidden;
               color: var(--text-color-third);
               font-size: 12px;

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 }],
+  DAY: [
-  WEEK: [{ label: '近4周', value: 4 }, { label: '近12周', value: 12 }, { label: '近24周', value: 24 }, { label: '近52周', value: 52 }],
+    { label: '近7天', value: 7 },
-  MONTH: [{ label: '近3个月', value: 3 }, { label: '近6个月', value: 6 }, { label: '近12个月', value: 12 }, { label: '近24个月', value: 24  }],
+    { 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',
+}

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 {

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%' }}>
-          {data?.queryTimeCost && isDeveloper && (
+            <Col flex="1 1 auto">
-            <span className={`${prefixCls}-title-tip`}>(耗时: {data.queryTimeCost}ms)</span>
+              数据查询
-          )}
+              {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>

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;

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
   );
 };
 

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' && (

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,17 +340,22 @@ const ChatItem: React.FC<Props> = ({
           />
           {executeMode && (
             <>
-              {!isMobile && parseInfo?.sqlInfo && isDeveloper && integrateSystem !== 'c2' && (
+              {!isMobile &&
-                <SqlItem
+                parseInfo?.sqlInfo &&
-                  llmReq={llmReq}
+                isDeveloper &&
-                  llmResp={llmResp}
+                integrateSystem !== 'c2' &&
-                  integrateSystem={integrateSystem}
+                !isSimpleMode && (
-                  queryMode={parseInfo.queryMode}
+                  <SqlItem
-                  sqlInfo={parseInfo.sqlInfo}
+                    llmReq={llmReq}
-                  sqlTimeCost={parseTimeCost?.sqlTime}
+                    llmResp={llmResp}
-                />
+                    integrateSystem={integrateSystem}
-              )}
+                    queryMode={parseInfo.queryMode}
+                    sqlInfo={parseInfo.sqlInfo}
+                    sqlTimeCost={parseTimeCost?.sqlTime}
+                  />
+                )}
               <ExecuteItem
+                isSimpleMode={isSimpleMode}
                 queryId={parseInfo?.queryId}
                 executeLoading={executeLoading}
                 entitySwitchLoading={entitySwitchLoading}
@@ -361,14 +369,16 @@ const ChatItem: React.FC<Props> = ({
               />
             </>
           )}
-          {(parseTip !== '' || (executeMode && !executeLoading)) && integrateSystem !== 'c2' && (
+          {(parseTip !== '' || (executeMode && !executeLoading)) &&
-            <SimilarQuestionItem
+            integrateSystem !== 'c2' &&
-              queryId={parseInfo?.queryId}
+            !isSimpleMode && (
-              defaultExpanded={parseTip !== '' || executeTip !== '' || integrateSystem === 'wiki'}
+              <SimilarQuestionItem
-              similarQueries={data?.similarQueries}
+                queryId={parseInfo?.queryId}
-              onSelectQuestion={onSelectQuestion}
+                defaultExpanded={parseTip !== '' || executeTip !== '' || integrateSystem === 'wiki'}
-            />
+                similarQueries={data?.similarQueries}
-          )}
+                onSelectQuestion={onSelectQuestion}
+              />
+            )}
         </div>
         {(parseTip !== '' || (executeMode && !executeLoading)) && integrateSystem !== 'c2' && (
           <Tools queryId={parseInfo?.queryId || 0} scoreValue={score} />

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;

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;
+
+
+}

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(
+                {`${
-                  dataFormat?.needMultiply100 ? +value * 100 : value,
+                  value
-                  dataFormat?.decimalPlaces || 2
+                    ? formatByDecimalPlaces(
-                )}%`}
+                        dataFormat?.needMultiply100 ? +value * 100 : value,
+                        dataFormat?.decimalPlaces || 2
+                      )
+                    : 0
+                }%`}
               </div>
             );
           }

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,98 +65,137 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
     setDrillDownDimension(undefined);
     setSecondDrillDownDimension(undefined);
   }, [data]);
+  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;
+
+    const isMetricCard = (queryMode.includes('METRIC') || isDslMetricCard) && singleData;
+
+    const isText =
+      columns.length === 1 &&
+      columns[0].showType === 'CATEGORY' &&
+      ((!queryMode.includes('METRIC') && !queryMode.includes('ENTITY')) ||
+        queryMode === 'METRIC_INTERPRET') &&
+      singleData;
+    if (isText) {
+      return MsgContentTypeEnum.TEXT;
+    }
+
+    if (isMetricCard) {
+      return MsgContentTypeEnum.METRIC_CARD;
+    }
+
+    const isTable =
+      !isText &&
+      !isMetricCard &&
+      (categoryField.length > 1 ||
+        queryMode === 'TAG_DETAIL' ||
+        queryMode === 'ENTITY_DIMENSION' ||
+        (categoryField.length === 1 && metricFields.length === 0));
+
+    if (isTable) {
+      return MsgContentTypeEnum.TABLE;
+    }
+    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 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');
-
-  const isDslMetricCard =
-    queryMode === 'LLM_S2SQL' && singleData && metricFields.length === 1 && columns.length === 1;
-
-  const isMetricCard = (queryMode.includes('METRIC') || isDslMetricCard) && singleData;
-
-  const isText =
-    columns.length === 1 &&
-    columns[0].showType === 'CATEGORY' &&
-    ((!queryMode.includes('METRIC') && !queryMode.includes('ENTITY')) ||
-      queryMode === 'METRIC_INTERPRET') &&
-    singleData;
-
-  const isTable =
-    !isText &&
-    !isMetricCard &&
-    (categoryField.length > 1 ||
-      queryMode === 'TAG_DETAIL' ||
-      queryMode === 'ENTITY_DIMENSION' ||
-      (categoryField.length === 1 && metricFields.length === 0));
-
   const getMsgContent = () => {
-    if (isText) {
+    const contentType = getMsgContentType();
-      return <Text columns={columns} referenceColumn={referenceColumn} dataSource={dataSource} />;
+    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}
+          />
+        );
+      case MsgContentTypeEnum.TABLE:
+        return (
+          <Table
+            data={{ ...data, queryColumns: columns, queryResults: dataSource }}
+            loading={loading}
+          />
+        );
+      case MsgContentTypeEnum.METRIC_TREND:
+        return (
+          <MetricTrend
+            data={{
+              ...data,
+              queryColumns: columns,
+              queryResults: dataSource,
+            }}
+            loading={loading}
+            chartIndex={chartIndex}
+            triggerResize={triggerResize}
+            activeMetricField={activeMetricField}
+            drillDownDimension={drillDownDimension}
+            currentDateOption={currentDateOption}
+            onSelectDateOption={selectDateOption}
+          />
+        );
+      case MsgContentTypeEnum.METRIC_BAR:
+        return (
+          <Bar
+            data={{ ...data, queryColumns: columns, queryResults: dataSource }}
+            triggerResize={triggerResize}
+            loading={loading}
+            metricField={metricFields[0]}
+          />
+        );
+      case MsgContentTypeEnum.MARKDOWN:
+        return <MarkDown markdown={data.textResult} loading={loading} />;
+      default:
+        return (
+          <Table
+            data={{ ...data, queryColumns: columns, queryResults: dataSource }}
+            loading={loading}
+          />
+        );
     }
-    if (isMetricCard) {
-      return (
-        <MetricCard
-          data={{ ...data, queryColumns: columns, queryResults: dataSource }}
-          loading={loading}
-        />
-      );
-    }
-    if (isTable) {
-      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])
-    ) {
-      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 &&
-      (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 50)
-    ) {
-      return (
-        <Bar
-          data={{ ...data, queryColumns: columns, queryResults: dataSource }}
-          triggerResize={triggerResize}
-          loading={loading}
-          metricField={metricFields[0]}
-        />
-      );
-    }
-    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 && (