feat: add DocumentPreviewer for chunk of chat reference and remove duplicate \n from record.progress_msg (#97)

* feat: Remove duplicate \n from record.progress_msg

* feat: add DocumentPreviewer for chunk of chat reference

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.less

@@ -1,8 +1,6 @@
 .documentContainer {
   width: 100%;
   height: calc(100vh - 284px);
-  //   overflow-y: auto;
-  //   overflow-x: hidden;
   position: relative;
   :global(.PdfHighlighter) {
     overflow-x: hidden;

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx

@@ -16,7 +16,6 @@ import styles from './index.less';
 interface IProps {
   selectedChunkId: string;
 }
-
 const HighlightPopup = ({
   comment,
 }: {
@@ -28,6 +27,7 @@ const HighlightPopup = ({
     </div>
   ) : null;
 
+// TODO: merge with DocumentPreviewer
 const Preview = ({ selectedChunkId }: IProps) => {
   const url = useGetDocumentUrl();
   const state = useGetChunkHighlights(selectedChunkId);

web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts

@@ -1,8 +1,8 @@
 import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
+import { buildChunkHighlights } from '@/utils/documentUtils';
 import { useCallback, useMemo, useState } from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
 import { useSelector } from 'umi';
-import { v4 as uuid } from 'uuid';
 
 export const useSelectDocumentInfo = () => {
   const documentInfo: IKnowledgeFile = useSelector(
@@ -41,35 +41,7 @@ export const useGetChunkHighlights = (
   const selectedChunk: IChunk = useGetSelectedChunk(selectedChunkId);
 
   const highlights: IHighlight[] = useMemo(() => {
-    return Array.isArray(selectedChunk?.positions) &&
-      selectedChunk.positions.every((x) => Array.isArray(x))
-      ? selectedChunk?.positions?.map((x) => {
-          const actualPositions = x.map((y, index) =>
-            index !== 0 ? y / 0.7 : y,
-          );
-          const boundingRect = {
-            width: 849,
-            height: 1200,
-            x1: actualPositions[1],
-            x2: actualPositions[2],
-            y1: actualPositions[3],
-            y2: actualPositions[4],
-          };
-          return {
-            id: uuid(),
-            comment: {
-              text: '',
-              emoji: '',
-            },
-            content: { text: selectedChunk.content_with_weight },
-            position: {
-              boundingRect: boundingRect,
-              rects: [boundingRect],
-              pageNumber: x[0],
-            },
-          };
-        })
-      : [];
+    return buildChunkHighlights(selectedChunk);
   }, [selectedChunk]);
 
   return highlights;

web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less

@@ -8,6 +8,8 @@
 
   .popoverContentText {
     white-space: pre-line;
+    max-height: 50vh;
+    overflow: auto;
     .popoverContentErrorLabel {
       color: red;
     }

web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx

@@ -21,6 +21,25 @@ interface IProps {
 }
 
 const PopoverContent = ({ record }: IProps) => {
+  const replaceText = (text: string) => {
+    // Remove duplicate \n
+    const nextText = text.replace(/(\n)\1+/g, '$1');
+
+    const replacedText = reactStringReplace(
+      nextText,
+      /(\[ERROR\].+\s)/g,
+      (match, i) => {
+        return (
+          <span key={i} className={styles.popoverContentErrorLabel}>
+            {match}
+          </span>
+        );
+      },
+    );
+
+    return replacedText;
+  };
+
   const items: DescriptionsProps['items'] = [
     {
       key: 'process_begin_at',
@@ -35,17 +54,7 @@ const PopoverContent = ({ record }: IProps) => {
     {
       key: 'progress_msg',
       label: 'Progress Msg',
-      children: reactStringReplace(
-        record.progress_msg.trim(),
-        /(\[ERROR\].+\s)/g,
-        (match, i) => {
-          return (
-            <span key={i} className={styles.popoverContentErrorLabel}>
-              {match}
-            </span>
-          );
-        },
-      ),
+      children: replaceText(record.progress_msg.trim()),
     },
   ];