(improvement)(chat-sdk) optimize message card width and show table when metrics count is greater than 1 (#1496)

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

@@ -157,6 +157,7 @@
         }
 
         .ant-select-selection-placeholder {
+          margin-bottom: 0 !important;
           padding-left: 0 !important;
           line-height: 38px !important;
         }

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

@@ -127,9 +127,7 @@ const ExecuteItem: React.FC<Props> = ({
               data={data}
               chartIndex={chartIndex}
               triggerResize={triggerResize}
-              onMsgContentTypeChange={type => {
+              onMsgContentTypeChange={setMsgContentType}
-                setMsgContentType(type);
-              }}
             />
           )}
         </Spin>

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

@@ -80,14 +80,13 @@ const ChatItem: React.FC<Props> = ({
   const [dataCache, setDataCache] = useState<Record<number, { tip: string; data?: MsgDataType }>>(
     {}
   );
-  const [selectedRange, setSelectedRange] = useState<RangeValue | null>(null);
 
   const prefixCls = `${PREFIX_CLS}-item`;
 
   const updateData = (res: Result<MsgDataType>) => {
     let tip: string = '';
     let data: MsgDataType | undefined = undefined;
-    const { queryColumns, queryResults, queryState, queryMode, response, chatContext, textResult } =
+    const { queryColumns, queryResults, queryState, queryMode, response, chatContext } =
       res.data || {};
     if (res.code === 400 || res.code === 401 || res.code === 412) {
       tip = res.msg;
@@ -239,7 +238,6 @@ const ChatItem: React.FC<Props> = ({
   const onDateInfoChange = (dates: [Dayjs | null, Dayjs | null] | null) => {
     if (dates && dates[0] && dates[1]) {
       const [start, end] = dates;
-      setSelectedRange([start, end] as RangeValue);
       setDateInfo({
         ...(dateInfo || {}),
         startDate: dayjs(start).format('YYYY-MM-DD'),
@@ -247,13 +245,10 @@ const ChatItem: React.FC<Props> = ({
         dateMode: 'BETWEEN',
         unit: 0,
       });
-    } else {
-      setSelectedRange(null);
     }
   };
 
   const handlePresetClick = (range: RangeValue) => {
-    setSelectedRange(range);
     setDateInfo({
       ...(dateInfo || {}),
       startDate: dayjs(range[0]).format('YYYY-MM-DD'),
@@ -329,10 +324,8 @@ const ChatItem: React.FC<Props> = ({
 
   return (
     <div className={prefixCls}>
-      {!isMobile && integrateSystem !== 'wiki' && (
+      {!isMobile && <IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />}
-        <IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />
+      <div className={isMobile ? `${prefixCls}-mobile-msg-card` : ''}>
-      )}
-      <div className={isMobile ? `${prefixCls}-mobile-msg-card` : `${prefixCls}-msg-card`}>
         <div className={contentClass}>
           <ParseTip
             isSimpleMode={isSimpleMode}

webapp/packages/chat-sdk/src/components/ChatItem/style.less

@@ -97,18 +97,13 @@
     width: 100%;
   }
 
-  &-msg-card {
-    flex: 1;
-  }
-
   &-content {
     position: relative;
     box-sizing: border-box;
     min-width: 1px;
     max-width: 100%;
-    padding: 12px 16px;
+    padding: 12px 20px 12px 16px;
     background: #fff;
-    min-height: 100px;
     border: 1px solid transparent;
     border-radius: 12px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);

webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx

@@ -20,7 +20,7 @@ type Props = {
   triggerResize?: boolean;
   forceShowTable?: boolean;
   isSimpleMode?: boolean;
-  onMsgContentTypeChange?: (MsgContentTypeEnum) => void;
+  onMsgContentTypeChange: (msgContentType: MsgContentTypeEnum) => void;
 };
 
 const ChatMsg: React.FC<Props> = ({
@@ -65,7 +65,9 @@ const ChatMsg: React.FC<Props> = ({
     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');
@@ -123,7 +125,7 @@ const ChatMsg: React.FC<Props> = ({
 
     const isMetricBar =
       categoryField?.length > 0 &&
-      metricFields?.length > 0 &&
+      metricFields?.length === 1 &&
       (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 50);
 
     if (isMetricBar) {
@@ -132,6 +134,28 @@ const ChatMsg: React.FC<Props> = ({
     return MsgContentTypeEnum.TABLE;
   };
 
+  const getMsgStyle = (type: MsgContentTypeEnum) => {
+    if (isMobile) {
+      return { maxWidth: 'calc(100vw - 20px)' };
+    }
+    if (!queryResults?.length || !queryColumns.length) {
+      return;
+    }
+    if (type === MsgContentTypeEnum.METRIC_BAR) {
+      return {
+        [queryResults.length > 5 ? 'width' : 'minWidth']: queryResults.length * 150,
+      };
+    }
+    if (type === MsgContentTypeEnum.TABLE) {
+      return {
+        [queryColumns.length > 5 ? 'width' : 'minWidth']: queryColumns.length * 150,
+      };
+    }
+    if (type === MsgContentTypeEnum.METRIC_TREND) {
+      return { width: 'calc(100vw - 410px)' };
+    }
+  };
+
   useEffect(() => {
     const type = getMsgContentType();
     if (type) {
@@ -312,8 +336,11 @@ const ChatMsg: React.FC<Props> = ({
     recommendMetrics?.length > 0 &&
     queryColumns?.filter(column => column.showType === 'NUMBER').length === 1;
 
+  const type = getMsgContentType();
+  const style = type ? getMsgStyle(type) : undefined;
+
   return (
-    <div className={chartMsgClass}>
+    <div className={chartMsgClass} style={style}>
       {dataSource?.length === 0 ? (
         <div>暂无数据，如有疑问请联系管理员</div>
       ) : (

webapp/packages/chat-sdk/src/components/ChatMsg/style.less

@@ -7,6 +7,7 @@
   border: 1px solid var(--border-color-base);
   border-radius: 4px;
   background: #f5f8fb;
+  max-width: calc(100vw - 410px);
 
   &-bottom-tools {
     display: flex;
@@ -24,4 +25,4 @@
   &-metric-card-tools {
     margin-top: 0;
   }
-}
+}

webapp/packages/chat-sdk/src/service/index.ts

@@ -1,7 +1,6 @@
 import axios from './axiosInstance';
 import {
   ChatContextType,
-  EntityInfoType,
   HistoryMsgItemType,
   HistoryType,
   MsgDataType,