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