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/components/pdf-previewer/index.less

@@ -0,0 +1,12 @@
+.documentContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  :global(.PdfHighlighter) {
+    overflow-x: hidden;
+  }
+  :global(.Highlight--scrolledTo .Highlight__part) {
+    overflow-x: hidden;
+    background-color: rgba(255, 226, 143, 1);
+  }
+}

web/src/components/pdf-previewer/index.tsx

@@ -0,0 +1,116 @@
+import {
+  useGetChunkHighlights,
+  useGetDocumentUrl,
+} from '@/hooks/documentHooks';
+import { IChunk } from '@/interfaces/database/knowledge';
+import { Skeleton } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import {
+  AreaHighlight,
+  Highlight,
+  IHighlight,
+  PdfHighlighter,
+  PdfLoader,
+  Popup,
+} from 'react-pdf-highlighter';
+
+import styles from './index.less';
+
+interface IProps {
+  chunk: IChunk;
+  documentId: string;
+  visible: boolean;
+}
+
+const HighlightPopup = ({
+  comment,
+}: {
+  comment: { text: string; emoji: string };
+}) =>
+  comment.text ? (
+    <div className="Highlight__popup">
+      {comment.emoji} {comment.text}
+    </div>
+  ) : null;
+
+const DocumentPreviewer = ({ chunk, documentId, visible }: IProps) => {
+  const url = useGetDocumentUrl(documentId);
+  const state = useGetChunkHighlights(chunk);
+  const ref = useRef<(highlight: IHighlight) => void>(() => {});
+  const [loaded, setLoaded] = useState(false);
+
+  const resetHash = () => {};
+
+  useEffect(() => {
+    setLoaded(visible);
+  }, [visible]);
+
+  useEffect(() => {
+    if (state.length > 0 && loaded) {
+      setLoaded(false);
+      ref.current(state[0]);
+    }
+  }, [state, loaded]);
+
+  return (
+    <div className={styles.documentContainer}>
+      <PdfLoader url={url} beforeLoad={<Skeleton active />}>
+        {(pdfDocument) => (
+          <PdfHighlighter
+            pdfDocument={pdfDocument}
+            enableAreaSelection={(event) => event.altKey}
+            onScrollChange={resetHash}
+            scrollRef={(scrollTo) => {
+              ref.current = scrollTo;
+              setLoaded(true);
+            }}
+            onSelectionFinished={() => null}
+            highlightTransform={(
+              highlight,
+              index,
+              setTip,
+              hideTip,
+              viewportToScaled,
+              screenshot,
+              isScrolledTo,
+            ) => {
+              const isTextHighlight = !Boolean(
+                highlight.content && highlight.content.image,
+              );
+
+              const component = isTextHighlight ? (
+                <Highlight
+                  isScrolledTo={isScrolledTo}
+                  position={highlight.position}
+                  comment={highlight.comment}
+                />
+              ) : (
+                <AreaHighlight
+                  isScrolledTo={isScrolledTo}
+                  highlight={highlight}
+                  onChange={() => {}}
+                />
+              );
+
+              return (
+                <Popup
+                  popupContent={<HighlightPopup {...highlight} />}
+                  onMouseOver={(popupContent) =>
+                    setTip(highlight, () => popupContent)
+                  }
+                  onMouseOut={hideTip}
+                  key={index}
+                >
+                  {component}
+                </Popup>
+              );
+            }}
+            highlights={state}
+          />
+        )}
+      </PdfLoader>
+    </div>
+  );
+};
+
+export default DocumentPreviewer;