feat: set width of chunk text to 100% and add Skeleton to Preview of document and remove react-pdf (#94)

* feat: remove react-pdf

* feat: add Skeleton to Preview of document

* feat: set width of chunk text to 100%

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

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 {

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>
         );
       })}