Fix: Add authentication validation to the document API interface for embedded pages. (#13078)

### What problem does this PR solve?

Fix: Add authentication validation to the document API interface for
embedded pages and modify the document display styles.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/document-preview/image-preview.tsx

@@ -51,7 +51,7 @@ export const ImagePreviewer: React.FC<ImagePreviewerProps> = ({
   return (
     <div
       className={classNames(
-        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md image-previewer',
+        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md image-previewer max-h-[80vh] overflow-auto',
         className,
       )}
     >
@@ -62,14 +62,12 @@ export const ImagePreviewer: React.FC<ImagePreviewerProps> = ({
       )}
 
       {!isLoading && imageSrc && (
-        <div className="max-h-[80vh] overflow-auto p-2">
-          <img
-            src={imageSrc}
-            alt={'image'}
-            className="w-full h-auto max-w-full object-contain"
-            onLoad={() => URL.revokeObjectURL(imageSrc!)}
-          />
-        </div>
+        <img
+          src={imageSrc}
+          alt={'image'}
+          className="w-full h-auto max-w-full object-contain"
+          onLoad={() => URL.revokeObjectURL(imageSrc!)}
+        />
       )}
     </div>
   );

web/src/components/document-preview/index.tsx

@@ -27,6 +27,7 @@ const Preview = ({
       {fileType === 'pdf' && highlights && setWidthAndHeight && (
         <section>
           <PdfPreviewer
+            className={className}
             highlights={highlights}
             setWidthAndHeight={setWidthAndHeight}
             url={url}

web/src/components/document-preview/pdf-preview.tsx

@@ -52,9 +52,15 @@ const PdfPreview = ({
   const resetHash = () => {};
 
   useEffect(() => {
+    let timer = null;
     if (state?.length && state?.length > 0) {
-      ref?.current(state[0]);
+      timer = setTimeout(() => {
+        ref?.current(state[0]);
+      }, 100);
     }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
   }, [state]);
 
   const httpHeaders = {

web/src/components/next-message-item/reference-document-list.tsx

@@ -1,17 +1,27 @@
 import { Card, CardContent } from '@/components/ui/card';
+import { useSetModalState } from '@/hooks/common-hooks';
 import { Docagg } from '@/interfaces/database/chat';
+import PdfDrawer from '@/pages/next-search/document-preview-modal';
 import { middleEllipsis } from '@/utils/common-util';
+import { useState } from 'react';
 import FileIcon from '../file-icon';
-import NewDocumentLink from '../new-document-link';
 
 export function ReferenceDocumentList({ list }: { list: Docagg[] }) {
+  const { visible, showModal, hideModal } = useSetModalState();
+  const [selectedDocument, setSelectedDocument] = useState<Docagg>();
   return (
     <section className="flex gap-3 flex-wrap">
       {list.map((item) => (
         <Card key={item.doc_id}>
-          <CardContent className="p-2 space-x-2">
+          <CardContent
+            className="flex items-center p-2 space-x-2 cursor-pointer"
+            onClick={() => {
+              setSelectedDocument(item);
+              showModal();
+            }}
+          >
             <FileIcon id={item.doc_id} name={item.doc_name}></FileIcon>
-            <NewDocumentLink
+            {/* <NewDocumentLink
               documentId={item.doc_id}
               documentName={item.doc_name}
               prefix="document"
@@ -19,10 +29,23 @@ export function ReferenceDocumentList({ list }: { list: Docagg[] }) {
               className="text-text-sub-title-invert"
             >
               {middleEllipsis(item.doc_name)}
-            </NewDocumentLink>
+            </NewDocumentLink> */}
+            <div className="text-text-sub-title-invert">
+              {middleEllipsis(item.doc_name)}
+            </div>
           </CardContent>
         </Card>
       ))}
+      {visible && selectedDocument && (
+        <PdfDrawer
+          visible={visible}
+          hideModal={hideModal}
+          documentId={selectedDocument.doc_id}
+          chunk={{
+            document_name: selectedDocument.doc_name,
+          }}
+        ></PdfDrawer>
+      )}
     </section>
   );
 }

web/src/hooks/use-document-request.ts

@@ -16,7 +16,8 @@ import {
 import i18n from '@/locales/config';
 import { EMPTY_METADATA_FIELD } from '@/pages/dataset/dataset/use-select-filters';
 import kbService, { listDocument } from '@/services/knowledge-service';
-import api, { api_host } from '@/utils/api';
+import api, { api_host, ExternalApi } from '@/utils/api';
+import { getSearchValue } from '@/utils/common-util';
 import { buildChunkHighlights } from '@/utils/document-util';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
@@ -464,11 +465,14 @@ export const useCreateDocument = () => {
 };
 
 export const useGetDocumentUrl = (documentId?: string) => {
+  const auth = getSearchValue('auth');
   const getDocumentUrl = useCallback(
     (id?: string) => {
-      return `${api_host}/document/get/${documentId || id}`;
+      return auth
+        ? `${ExternalApi}/v1/documents/${documentId || id}`
+        : `${api_host}/document/get/${documentId || id}`;
     },
-    [documentId],
+    [documentId, auth],
   );
 
   return getDocumentUrl;

web/src/pages/next-search/document-preview-modal/index.tsx

@@ -8,6 +8,7 @@ import {
 import { IModalProps } from '@/interfaces/common';
 import { IReferenceChunk } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
+import { cn } from '@/lib/utils';
 import { useEffect, useState } from 'react';
 
 interface IProps extends IModalProps<any> {
@@ -54,7 +55,9 @@ const PdfDrawer = ({
       showfooter={false}
     >
       <DocumentPreview
-        className={'!h-[calc(100dvh-300px)] overflow-auto'}
+        className={cn(
+          '!h-[calc(100dvh-300px)] overflow-auto border-none padding-0 max-h-full',
+        )}
         fileType={fileType}
         highlights={highlights}
         setWidthAndHeight={setWidthAndHeight}

web/src/routes.tsx

@@ -92,7 +92,6 @@ const withLazyRoute = (
     LazyComponent.name ||
     'Component'
   })`;
-  Wrapped.whyDidYouRender = false;
   return process.env.NODE_ENV === 'development' ? LazyComponent : memo(Wrapped);
 };
 

web/src/utils/api.ts

@@ -1,7 +1,7 @@
 let api_host = `/v1`;
 const ExternalApi = `/api`;
 
-export { api_host };
+export { ExternalApi, api_host };
 
 export default {
   // user