(feature)(webapp) add display of time consumption at each stage (#331)

webapp/packages/chat-sdk/src/ShowCase/index.tsx

@@ -1,62 +1,117 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import styles from './style.module.less';
-import { ShowCaseMapType } from './type';
+import { ShowCaseItemType } from './type';
 import { queryShowCase } from './service';
 import Text from '../Chat/components/Text';
 import ChatItem from '../components/ChatItem';
 import { HistoryMsgItemType } from '../common/type';
 import { Spin } from 'antd';
+import classNames from 'classnames';
+import { isMobile } from '../utils/utils';
+import { useThrottleFn } from 'ahooks';
 
 type Props = {
+  height?: number | string;
   agentId: number;
   onSendMsg?: (msg: string) => void;
 };
 
-const ShowCase: React.FC<Props> = ({ agentId, onSendMsg }) => {
-  const [showCaseMap, setShowCaseMap] = useState<ShowCaseMapType>({});
+const ShowCase: React.FC<Props> = ({ height, agentId, onSendMsg }) => {
+  const [showCaseList, setShowCaseList] = useState<ShowCaseItemType[]>([]);
   const [loading, setLoading] = useState(false);
+  const [pageNo, setPageNo] = useState(1);
 
-  const updateData = async () => {
-    setLoading(true);
-    const res = await queryShowCase(agentId, 1, 30);
-    setLoading(false);
-    setShowCaseMap(res.data.showCaseMap);
+  const showcaseRef = useRef<any>(null);
+
+  const updateData = async (pageNoValue: number) => {
+    if (pageNoValue === 1) {
+      setLoading(true);
+    }
+    const res = await queryShowCase(agentId, pageNoValue, isMobile ? 10 : 20);
+    if (pageNoValue === 1) {
+      setLoading(false);
+    }
+    const showCaseMapRes: any = res.data.showCaseMap;
+    const list = Object.keys(showCaseMapRes)
+      .reduce((result: ShowCaseItemType[], key: string) => {
+        result.push({ msgList: showCaseMapRes[key], caseId: key });
+        return result;
+      }, [])
+      .sort((a, b) => {
+        return (b.msgList?.[0]?.score || 3) - (a.msgList?.[0]?.score || 3);
+      });
+    setShowCaseList(pageNoValue === 1 ? list : [...showCaseList, ...list]);
   };
 
+  const { run: handleScroll } = useThrottleFn(
+    e => {
+      const bottom =
+        e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight ||
+        e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight + 0.5;
+      if (bottom) {
+        updateData(pageNo + 1);
+        setPageNo(pageNo + 1);
+      }
+    },
+    {
+      leading: true,
+      trailing: true,
+      wait: 200,
+    }
+  );
+
+  useEffect(() => {
+    if (isMobile) {
+      return;
+    }
+    const el = showcaseRef.current;
+    el?.addEventListener('scroll', handleScroll);
+    return () => {
+      el.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   useEffect(() => {
     if (agentId) {
-      updateData();
+      setShowCaseList([]);
+      updateData(1);
+      setPageNo(1);
     }
   }, [agentId]);
 
+  const showCaseClass = classNames(styles.showCase, { [styles.mobile]: isMobile });
+
   return (
     <Spin spinning={loading} size="large">
-      <div className={styles.showCase}>
-        {Object.keys(showCaseMap || {}).map(key => {
-          const showCaseItem = showCaseMap?.[key] || [];
-          return (
-            <div key={key} className={styles.showCaseItem}>
-              {showCaseItem
-                .filter((chatItem: HistoryMsgItemType) => !!chatItem.queryResult)
-                .slice(0, 10)
-                .map((chatItem: HistoryMsgItemType) => {
-                  return (
-                    <div className={styles.showCaseChatItem} key={chatItem.questionId}>
-                      <Text position="right" data={chatItem.queryText} anonymousUser />
-                      <ChatItem
-                        msg={chatItem.queryText}
-                        msgData={chatItem.queryResult}
-                        conversationId={chatItem.chatId}
-                        agentId={agentId}
-                        integrateSystem="showcase"
-                        onSendMsg={onSendMsg}
-                      />
-                    </div>
-                  );
-                })}
-            </div>
-          );
-        })}
+      <div className={showCaseClass} style={{ height }} ref={showcaseRef}>
+        <div className={styles.showCaseContent}>
+          {showCaseList.map(showCaseItem => {
+            return (
+              <div key={showCaseItem.caseId} className={styles.showCaseItem}>
+                {showCaseItem.msgList
+                  .filter((chatItem: HistoryMsgItemType) => !!chatItem.queryResult)
+                  .slice(0, 1)
+                  .map((chatItem: HistoryMsgItemType) => {
+                    return (
+                      <div className={styles.showCaseChatItem} key={chatItem.questionId}>
+                        <Text position="right" data={chatItem.queryText} anonymousUser />
+                        <ChatItem
+                          msg={chatItem.queryText}
+                          parseInfos={chatItem.parseInfos}
+                          msgData={chatItem.queryResult}
+                          conversationId={chatItem.chatId}
+                          agentId={agentId}
+                          integrateSystem="showcase"
+                          score={chatItem.score}
+                          onSendMsg={onSendMsg}
+                        />
+                      </div>
+                    );
+                  })}
+              </div>
+            );
+          })}
+        </div>
       </div>
     </Spin>
   );

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

@@ -1,27 +1,46 @@
 .showCase {
-  column-count: 2;
-  column-gap: 20px;
+  position: relative;
   height: 100%;
-  min-height: 400px;
+  padding: 0 20px;
   overflow-y: auto;
+  padding-bottom: 2px;
 
-  .showCaseItem {
-    display: flex;
-    flex-direction: column;
-    row-gap: 12px;
-    padding: 12px;
-    margin-bottom: 20px;
-    max-height: 800px;
-    overflow-y: auto;
-    border-radius: 12px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
-    background: linear-gradient(180deg, rgba(23, 74, 228, 0) 29.44%, rgba(23, 74, 228, 0.06) 100%),
-    linear-gradient(90deg, #f3f3f7 0%, #f3f3f7 20%, #ebf0f9 60%, #f3f3f7 80%, #f3f3f7 100%);
+  .showCaseContent {
+    column-count: 2;
+    column-gap: 20px;
 
-    .showCaseChatItem {
+    .showcaseLoading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 400px;
+    }
+
+    .showCaseItem {
       display: flex;
       flex-direction: column;
       row-gap: 12px;
+      padding: 12px;
+      margin-bottom: 20px;
+      overflow-y: auto;
+      border-radius: 12px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
+      background: linear-gradient(180deg, rgba(23, 74, 228, 0) 29.44%, rgba(23, 74, 228, 0.06) 100%),
+      linear-gradient(90deg, #f3f3f7 0%, #f3f3f7 20%, #ebf0f9 60%, #f3f3f7 80%, #f3f3f7 100%);
+
+      .showCaseChatItem {
+        display: flex;
+        flex-direction: column;
+        row-gap: 12px;
+      }
+    }
+  }
+
+  &.mobile {
+    padding: 0 4px;
+    .showCaseContent {
+      column-count: 1;
     }
   }
 }

webapp/packages/chat-sdk/src/ShowCase/type.ts

@@ -2,6 +2,11 @@ import { HistoryMsgItemType } from "../common/type";
 
 export type ShowCaseMapType = Record<number, HistoryMsgItemType[]>;
 
+export type ShowCaseItemType = {
+  caseId: string;
+  msgList: HistoryMsgItemType[];
+}
+
 export type ShowCaseType = {
   showCaseMap: ShowCaseMapType,
   current: number,