From 68df54ff01583715a0c590c70f712586f8a7160a Mon Sep 17 00:00:00 2001
From: billchen <yibie_jingnian@163.com>
Date: Mon, 4 Mar 2024 19:23:44 +0800
Subject: [PATCH] feat: add Skeleton to Preview of document

---
 web/src/layouts/index.tsx                     |  4 +--
 .../components/document-preview/preview.tsx   |  4 +--
 .../components/knowledge-file/index.tsx       |  2 +-
 .../parsing-status-cell/index.less            | 16 ++++++++--
 .../parsing-status-cell/index.tsx             | 26 ++++++++++-----
 web/src/pages/add-knowledge/index.less        |  1 +
 web/src/pages/knowledge/index.less            |  8 +++--
 web/src/pages/knowledge/index.tsx             | 32 +++++++++++++------
 8 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/web/src/layouts/index.tsx b/web/src/layouts/index.tsx
index 06eb101e8..ded00fa81 100644
--- a/web/src/layouts/index.tsx
+++ b/web/src/layouts/index.tsx
@@ -1,15 +1,14 @@
 import { Divider, Layout, theme } from 'antd';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Outlet } from 'umi';
 import '../locales/config';
 import Header from './components/header';
+
 import styles from './index.less';
 
 const { Content } = Layout;
 
 const App: React.FC = () => {
-  const { t } = useTranslation();
   const {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();
@@ -25,6 +24,7 @@ const App: React.FC = () => {
             background: colorBgContainer,
             borderRadius: borderRadiusLG,
             overflow: 'auto',
+            display: 'flex',
           }}
         >
           <Outlet />
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx
index aafe2ecb9..e5c26c23f 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx
@@ -1,4 +1,4 @@
-import { Spin } from 'antd';
+import { Skeleton } from 'antd';
 import { useEffect, useRef } from 'react';
 import {
   AreaHighlight,
@@ -43,7 +43,7 @@ const Preview = ({ selectedChunkId }: IProps) => {
 
   return (
     <div className={styles.documentContainer}>
-      <PdfLoader url={url} beforeLoad={<Spin />}>
+      <PdfLoader url={url} beforeLoad={<Skeleton active />}>
         {(pdfDocument) => (
           <PdfHighlighter
             pdfDocument={pdfDocument}
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/index.tsx b/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
index 70576f86f..5fe88b443 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
@@ -288,7 +288,7 @@ const KnowledgeFile = () => {
         dataSource={data}
         loading={loading}
         pagination={pagination}
-        scroll={{ scrollToFirstRowOnChange: true, x: true, y: 'fill' }}
+        scroll={{ scrollToFirstRowOnChange: true, x: 1300, y: 'fill' }}
       />
       <CreateEPModal getKfList={getKfList} kb_id={knowledgeBaseId} />
       <SegmentSetModal
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less
index ada0866af..62dc54208 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less
+++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less
@@ -1,5 +1,17 @@
-.popover-content {
-  width: 300px;
+.popoverContent {
+  width: 40vw;
+
+  .popoverContentItem {
+    display: flex;
+    gap: 10px;
+  }
+
+  .popoverContentText {
+    white-space: pre-line;
+    .popoverContentErrorLabel {
+      color: red;
+    }
+  }
 }
 
 .operationIcon {
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx
index 22f840b69..a6053f01c 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx
@@ -1,11 +1,11 @@
 import { ReactComponent as RefreshIcon } from '@/assets/svg/refresh.svg';
 import { ReactComponent as RunIcon } from '@/assets/svg/run.svg';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
-import { Badge, DescriptionsProps, Flex, Popover, Space, Tag } from 'antd';
-import { RunningStatus, RunningStatusMap } from '../constant';
-
 import { CloseCircleOutlined } from '@ant-design/icons';
+import { Badge, DescriptionsProps, Flex, Popover, Space, Tag } from 'antd';
+import reactStringReplace from 'react-string-replace';
 import { useDispatch } from 'umi';
+import { RunningStatus, RunningStatusMap } from '../constant';
 import styles from './index.less';
 
 const iconMap = {
@@ -35,17 +35,27 @@ const PopoverContent = ({ record }: IProps) => {
     {
       key: 'progress_msg',
       label: 'Progress Msg',
-      children: record.progress_msg,
+      children: reactStringReplace(
+        record.progress_msg.trim(),
+        /(\[ERROR\].+\s)/g,
+        (match, i) => {
+          return (
+            <span key={i} className={styles.popoverContentErrorLabel}>
+              {match}
+            </span>
+          );
+        },
+      ),
     },
   ];
 
   return (
-    <Flex vertical className={styles['popover-content']}>
-      {items.map((x) => {
+    <Flex vertical className={styles.popoverContent}>
+      {items.map((x, idx) => {
         return (
-          <div key={x.key}>
+          <div key={x.key} className={idx < 2 ? styles.popoverContentItem : ''}>
             <b>{x.label}:</b>
-            <p>{x.children}</p>
+            <div className={styles.popoverContentText}>{x.children}</div>
           </div>
         );
       })}
diff --git a/web/src/pages/add-knowledge/index.less b/web/src/pages/add-knowledge/index.less
index 10a8f02da..122898c4c 100644
--- a/web/src/pages/add-knowledge/index.less
+++ b/web/src/pages/add-knowledge/index.less
@@ -1,6 +1,7 @@
 .container {
   display: flex;
   height: 100%;
+  width: 100%;
   .contentWrapper {
     flex: 1;
     overflow-x: auto;
diff --git a/web/src/pages/knowledge/index.less b/web/src/pages/knowledge/index.less
index 37174f960..ba92f652b 100644
--- a/web/src/pages/knowledge/index.less
+++ b/web/src/pages/knowledge/index.less
@@ -1,14 +1,14 @@
 // @import '~@/less/variable.less';
 
 .knowledge {
-  padding: 48px 60px;
+  padding: 48px 0;
 }
 
 .topWrapper {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  padding-bottom: 72px;
+  padding: 0 60px 72px;
 
   .title {
     font-family: Inter;
@@ -41,3 +41,7 @@
     .topButton();
   }
 }
+.knowledgeCardContainer {
+  padding: 0 60px;
+  overflow: auto;
+}
diff --git a/web/src/pages/knowledge/index.tsx b/web/src/pages/knowledge/index.tsx
index 02921b603..76ad3713e 100644
--- a/web/src/pages/knowledge/index.tsx
+++ b/web/src/pages/knowledge/index.tsx
@@ -1,21 +1,25 @@
 import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
 import ModalManager from '@/components/modal-manager';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Flex, Space } from 'antd';
+import { Button, Empty, Flex, Space } from 'antd';
 import KnowledgeCard from './knowledge-card';
 import KnowledgeCreatingModal from './knowledge-creating-modal';
 
 import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
+import { useSelectUserInfo } from '@/hooks/userSettingHook';
 import styles from './index.less';
 
 const Knowledge = () => {
-  const data = useFetchKnowledgeList();
+  const list = useFetchKnowledgeList();
+  const userInfo = useSelectUserInfo();
 
   return (
-    <div className={styles.knowledge}>
+    <Flex className={styles.knowledge} vertical flex={1}>
       <div className={styles.topWrapper}>
         <div>
-          <span className={styles.title}>Welcome back, Zing</span>
+          <span className={styles.title}>
+            Welcome back, {userInfo.nickname}
+          </span>
           <p className={styles.description}>
             Which database are we going to use today?
           </p>
@@ -46,12 +50,22 @@ const Knowledge = () => {
           </ModalManager>
         </Space>
       </div>
-      <Flex gap="large" wrap="wrap">
-        {data.map((item: any) => {
-          return <KnowledgeCard item={item} key={item.name}></KnowledgeCard>;
-        })}
+      <Flex
+        gap="large"
+        wrap="wrap"
+        flex={1}
+        // justify="center"
+        className={styles.knowledgeCardContainer}
+      >
+        {list.length > 0 ? (
+          list.map((item: any) => {
+            return <KnowledgeCard item={item} key={item.name}></KnowledgeCard>;
+          })
+        ) : (
+          <Empty></Empty>
+        )}
       </Flex>
-    </div>
+    </Flex>
   );
 };