Refactoring: Integrating the file preview component (#11523)

### What problem does this PR solve?

Refactoring: Integrating the file preview component

### Type of change

- [x] Refactoring

web/src/components/document-preview/hooks.ts

@@ -0,0 +1,167 @@
+import { Authorization } from '@/constants/authorization';
+import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
+import { useGetPipelineResultSearchParams } from '@/pages/dataflow-result/hooks';
+import api, { api_host } from '@/utils/api';
+import { getAuthorization } from '@/utils/authorization-util';
+import jsPreviewExcel from '@js-preview/excel';
+import { useSize } from 'ahooks';
+import axios from 'axios';
+import mammoth from 'mammoth';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+export const useDocumentResizeObserver = () => {
+  const [containerWidth, setContainerWidth] = useState<number>();
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const size = useSize(containerRef);
+
+  const onResize = useCallback((width?: number) => {
+    if (width) {
+      setContainerWidth(width);
+    }
+  }, []);
+
+  useEffect(() => {
+    onResize(size?.width);
+  }, [size?.width, onResize]);
+
+  return { containerWidth, setContainerRef };
+};
+
+function highlightPattern(text: string, pattern: string, pageNumber: number) {
+  if (pageNumber === 2) {
+    return `<mark>${text}</mark>`;
+  }
+  if (text.trim() !== '' && pattern.match(text)) {
+    // return pattern.replace(text, (value) => `<mark>${value}</mark>`);
+    return `<mark>${text}</mark>`;
+  }
+  return text.replace(pattern, (value) => `<mark>${value}</mark>`);
+}
+
+export const useHighlightText = (searchText: string = '') => {
+  const textRenderer = useCallback(
+    (textItem: any) => {
+      return highlightPattern(textItem.str, searchText, textItem.pageNumber);
+    },
+    [searchText],
+  );
+
+  return textRenderer;
+};
+
+export const useGetDocumentUrl = (isAgent: boolean) => {
+  const { documentId } = useGetKnowledgeSearchParams();
+  const { createdBy, documentId: id } = useGetPipelineResultSearchParams();
+
+  const url = useMemo(() => {
+    if (isAgent) {
+      return api.downloadFile + `?id=${id}&created_by=${createdBy}`;
+    }
+    return `${api_host}/document/get/${documentId}`;
+  }, [createdBy, documentId, id, isAgent]);
+
+  return url;
+};
+
+export const useCatchError = (api: string) => {
+  const [error, setError] = useState('');
+  const fetchDocument = useCallback(async () => {
+    const ret = await axios.get(api);
+    const { data } = ret;
+    if (!(data instanceof ArrayBuffer) && data.code !== 0) {
+      setError(data.message);
+    }
+    return ret;
+  }, [api]);
+
+  useEffect(() => {
+    fetchDocument();
+  }, [fetchDocument]);
+
+  return { fetchDocument, error };
+};
+
+export const useFetchDocument = () => {
+  const fetchDocument = useCallback(async (api: string) => {
+    const ret = await axios.get(api, {
+      headers: {
+        [Authorization]: getAuthorization(),
+      },
+      responseType: 'arraybuffer',
+    });
+    return ret;
+  }, []);
+
+  return { fetchDocument };
+};
+
+export const useFetchExcel = (filePath: string) => {
+  const [status, setStatus] = useState(true);
+  const { fetchDocument } = useFetchDocument();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { error } = useCatchError(filePath);
+
+  const fetchDocumentAsync = useCallback(async () => {
+    let myExcelPreviewer;
+    if (containerRef.current) {
+      myExcelPreviewer = jsPreviewExcel.init(containerRef.current);
+    }
+    const jsonFile = await fetchDocument(filePath);
+    myExcelPreviewer
+      ?.preview(jsonFile.data)
+      .then(() => {
+        console.log('succeed');
+        setStatus(true);
+      })
+      .catch((e) => {
+        console.warn('failed', e);
+        myExcelPreviewer.destroy();
+        setStatus(false);
+      });
+  }, [filePath, fetchDocument]);
+
+  useEffect(() => {
+    fetchDocumentAsync();
+  }, [fetchDocumentAsync]);
+
+  return { status, containerRef, error };
+};
+
+export const useFetchDocx = (filePath: string) => {
+  const [succeed, setSucceed] = useState(true);
+  const [error, setError] = useState<string>();
+  const { fetchDocument } = useFetchDocument();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const fetchDocumentAsync = useCallback(async () => {
+    try {
+      const jsonFile = await fetchDocument(filePath);
+      mammoth
+        .convertToHtml(
+          { arrayBuffer: jsonFile.data },
+          { includeDefaultStyleMap: true },
+        )
+        .then((result) => {
+          setSucceed(true);
+          const docEl = document.createElement('div');
+          docEl.className = 'document-container';
+          docEl.innerHTML = result.value;
+          const container = containerRef.current;
+          if (container) {
+            container.innerHTML = docEl.outerHTML;
+          }
+        })
+        .catch(() => {
+          setSucceed(false);
+        });
+    } catch (error: any) {
+      setError(error.toString());
+    }
+  }, [filePath, fetchDocument]);
+
+  useEffect(() => {
+    fetchDocumentAsync();
+  }, [fetchDocumentAsync]);
+
+  return { succeed, containerRef, error };
+};