add drill down dimensions and metric period compare and modify layout (#22)

* [feature](webapp) add drill down dimensions and metric period compare and modify layout

* [feature](webapp) add drill down dimensions and metric period compare and modify layout

---------

Co-authored-by: williamhliu <williamhliu@tencent.com>

webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer.tsx

@@ -4,33 +4,30 @@ import { isEqual } from 'lodash';
 import { ChatItem } from 'supersonic-chat-sdk';
 import type { MsgDataType } from 'supersonic-chat-sdk';
 import { MessageItem, MessageTypeEnum } from './type';
-import classNames from 'classnames';
-import { Skeleton } from 'antd';
 import styles from './style.less';
+import RecommendQuestions from './components/RecommendQuestions';
 
 type Props = {
   id: string;
   chatId: number;
   messageList: MessageItem[];
-  miniProgramLoading: boolean;
   isMobileMode?: boolean;
+  conversationCollapsed: boolean;
   onClickMessageContainer: () => void;
   onMsgDataLoaded: (data: MsgDataType, questionId: string | number) => void;
   onSelectSuggestion: (value: string) => void;
   onCheckMore: (data: MsgDataType) => void;
-  onUpdateMessageScroll: () => void;
 };
 
 const MessageContainer: React.FC<Props> = ({
   id,
   chatId,
   messageList,
-  miniProgramLoading,
   isMobileMode,
+  conversationCollapsed,
   onClickMessageContainer,
   onMsgDataLoaded,
   onSelectSuggestion,
-  onUpdateMessageScroll,
 }) => {
   const [triggerResize, setTriggerResize] = useState(false);
 
@@ -41,6 +38,10 @@ const MessageContainer: React.FC<Props> = ({
     }, 0);
   }, []);
 
+  useEffect(() => {
+    onResize();
+  }, [conversationCollapsed]);
+
   useEffect(() => {
     window.addEventListener('resize', onResize);
     return () => {
@@ -48,10 +49,6 @@ const MessageContainer: React.FC<Props> = ({
     };
   }, []);
 
-  const messageListClass = classNames(styles.messageList, {
-    [styles.miniProgramLoading]: miniProgramLoading,
-  });
-
   const getFollowQuestions = (index: number) => {
     const followQuestions: string[] = [];
     const currentMsg = messageList[index];
@@ -82,8 +79,7 @@ const MessageContainer: React.FC<Props> = ({
 
   return (
     <div id={id} className={styles.messageContainer} onClick={onClickMessageContainer}>
-      {miniProgramLoading && <Skeleton className={styles.messageLoading} paragraph={{ rows: 5 }} />}
-      <div className={messageListClass}>
+      <div className={styles.messageList}>
         {messageList.map((msgItem: MessageItem, index: number) => {
           const { id: msgId, domainId, type, msg, msgValue, identityMsg, msgData } = msgItem;
 
@@ -91,6 +87,9 @@ const MessageContainer: React.FC<Props> = ({
 
           return (
             <div key={msgId} id={`${msgId}`} className={styles.messageItem}>
+              {type === MessageTypeEnum.RECOMMEND_QUESTIONS && (
+                <RecommendQuestions onSelectQuestion={onSelectSuggestion} />
+              )}
               {type === MessageTypeEnum.TEXT && <Text position="left" data={msg} />}
               {type === MessageTypeEnum.QUESTION && (
                 <>
@@ -108,8 +107,6 @@ const MessageContainer: React.FC<Props> = ({
                     onMsgDataLoaded={(data: MsgDataType) => {
                       onMsgDataLoaded(data, msgId);
                     }}
-                    onSelectSuggestion={onSelectSuggestion}
-                    onUpdateMessageScroll={onUpdateMessageScroll}
                   />
                 </>
               )}
@@ -125,7 +122,7 @@ function areEqual(prevProps: Props, nextProps: Props) {
   if (
     prevProps.id === nextProps.id &&
     isEqual(prevProps.messageList, nextProps.messageList) &&
-    prevProps.miniProgramLoading === nextProps.miniProgramLoading
+    prevProps.conversationCollapsed === nextProps.conversationCollapsed
   ) {
     return true;
   }