[feature](webapp) upgrade chat version

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

@@ -1,67 +1,55 @@
 import { EntityInfoType, ChatContextType } from '../../../common/type';
-import moment from 'moment';
 import { PREFIX_CLS } from '../../../common/constants';
 
 type Props = {
   position: 'left' | 'right';
   width?: number | string;
   height?: number | string;
+  title?: string;
+  followQuestions?: string[];
   bubbleClassName?: string;
-  noWaterMark?: boolean;
   chatContext?: ChatContextType;
   entityInfo?: EntityInfoType;
-  tip?: string;
-  aggregator?: string;
-  noTime?: boolean;
   children?: React.ReactNode;
+  isMobileMode?: boolean;
 };
 
 const Message: React.FC<Props> = ({
   position,
   width,
   height,
+  title,
+  followQuestions,
   children,
   bubbleClassName,
   chatContext,
   entityInfo,
-  aggregator,
-  noTime,
+  isMobileMode,
 }) => {
-  const { aggType, dateInfo, filters, metrics, domainName } = chatContext || {};
+  const { dimensionFilters, domainName } = chatContext || {};
 
   const prefixCls = `${PREFIX_CLS}-message`;
 
-  const timeSection =
-    !noTime && dateInfo?.text ? (
-      dateInfo.text
-    ) : (
-      <div>{`近${moment(dateInfo?.endDate).diff(dateInfo?.startDate, 'days') + 1}天`}</div>
-    );
+  const entityInfoList =
+    entityInfo?.dimensions?.filter(dimension => !dimension.bizName.includes('photo')) || [];
 
-  const metricSection =
-    metrics &&
-    metrics.map((metric, index) => {
-      let metricNode = <span className={`${PREFIX_CLS}-metric`}>{metric.name}</span>;
-      return (
-        <>
-          {metricNode}
-          {index < metrics.length - 1 && <span>、</span>}
-        </>
-      );
-    });
-
-  const aggregatorSection = aggregator !== 'tag' && aggType !== 'NONE' && aggType;
-
-  const hasFilterSection = filters && filters.length > 0;
+  const hasFilterSection =
+    dimensionFilters && dimensionFilters.length > 0 && entityInfoList.length === 0;
 
   const filterSection = hasFilterSection && (
     <div className={`${prefixCls}-filter-section`}>
       <div className={`${prefixCls}-field-name`}>筛选条件：</div>
       <div className={`${prefixCls}-filter-values`}>
-        {filters.map(filterItem => {
+        {dimensionFilters.map(filterItem => {
+          const filterValue =
+            typeof filterItem.value === 'string' ? [filterItem.value] : filterItem.value || [];
           return (
-            <div className={`${prefixCls}-filter-item`} key={filterItem.name}>
-              {filterItem.name}：{filterItem.value}
+            <div
+              className={`${prefixCls}-filter-item`}
+              key={filterItem.name}
+              title={filterValue.join('、')}
+            >
+              {filterItem.name}：{filterValue.join('、')}
             </div>
           );
         })}
@@ -69,14 +57,15 @@ const Message: React.FC<Props> = ({
     </div>
   );
 
-  const entityInfoList =
-    entityInfo?.dimensions?.filter(dimension => !dimension.bizName.includes('photo')) || [];
-
-  const hasEntityInfoSection =
-    entityInfoList.length > 0 && chatContext && chatContext.dimensions?.length > 0;
+  const leftTitle = title
+    ? followQuestions && followQuestions.length > 0
+      ? `多轮对话：${[title, ...followQuestions].join(' ← ')}`
+      : `单轮对话：${title}`
+    : '';
 
   return (
     <div className={prefixCls}>
+      {domainName && <div className={`${prefixCls}-domain-name`}>{domainName}</div>}
       <div className={`${prefixCls}-content`}>
         <div className={`${prefixCls}-body`}>
           <div
@@ -86,31 +75,30 @@ const Message: React.FC<Props> = ({
               e.stopPropagation();
             }}
           >
-            {position === 'left' && chatContext && (
-              <div className={`${prefixCls}-top-bar`}>
-                {domainName}
-                {/* {dimensionSection} */}
-                {timeSection}
-                {metricSection}
-                {aggregatorSection}
-                {/* {tipSection} */}
+            {position === 'left' && title && (
+              <div className={`${prefixCls}-top-bar`} title={leftTitle}>
+                {leftTitle}
               </div>
             )}
-            {(hasEntityInfoSection || hasFilterSection) && (
+            {(entityInfoList.length > 0 || hasFilterSection) && (
               <div className={`${prefixCls}-info-bar`}>
-                {hasEntityInfoSection && (
+                {filterSection}
+                {entityInfoList.length > 0 && (
                   <div className={`${prefixCls}-main-entity-info`}>
-                    {entityInfoList.slice(0, 3).map(dimension => {
+                    {entityInfoList.slice(0, 4).map(dimension => {
                       return (
                         <div className={`${prefixCls}-info-item`} key={dimension.bizName}>
                           <div className={`${prefixCls}-info-name`}>{dimension.name}：</div>
-                          <div className={`${prefixCls}-info-value`}>{dimension.value}</div>
+                          {dimension.bizName.includes('photo') ? (
+                            <img width={40} height={40} src={dimension.value} alt="" />
+                          ) : (
+                            <div className={`${prefixCls}-info-value`}>{dimension.value}</div>
+                          )}
                         </div>
                       );
                     })}
                   </div>
                 )}
-                {filterSection}
               </div>
             )}
             <div className={`${prefixCls}-children`}>{children}</div>