feat: Add RetrievalDocuments to SearchPage #2247 (#2327)

### What problem does this PR solve?
feat: Add RetrievalDocuments to SearchPage #2247
feat: Click on the link in the reference to display the pdf drawer #2247

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/pdf-drawer/hooks.ts

@@ -0,0 +1,27 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import { IChunk } from '@/interfaces/database/knowledge';
+import { useCallback, useState } from 'react';
+
+export const useClickDrawer = () => {
+  const { visible, showModal, hideModal } = useSetModalState();
+  const [selectedChunk, setSelectedChunk] = useState<IChunk>({} as IChunk);
+  const [documentId, setDocumentId] = useState<string>('');
+
+  const clickDocumentButton = useCallback(
+    (documentId: string, chunk: IChunk) => {
+      showModal();
+      setSelectedChunk(chunk);
+      setDocumentId(documentId);
+    },
+    [showModal],
+  );
+
+  return {
+    clickDocumentButton,
+    visible,
+    showModal,
+    hideModal,
+    selectedChunk,
+    documentId,
+  };
+};

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

@@ -0,0 +1,33 @@
+import { IModalProps } from '@/interfaces/common';
+import { IChunk } from '@/interfaces/database/knowledge';
+import { Drawer } from 'antd';
+import DocumentPreviewer from '../pdf-previewer';
+
+interface IProps extends IModalProps<any> {
+  documentId: string;
+  chunk: IChunk;
+}
+
+export const PdfDrawer = ({
+  visible = false,
+  hideModal,
+  documentId,
+  chunk,
+}: IProps) => {
+  return (
+    <Drawer
+      title="Document Previewer"
+      onClose={hideModal}
+      open={visible}
+      width={'50vw'}
+    >
+      <DocumentPreviewer
+        documentId={documentId}
+        chunk={chunk}
+        visible={visible}
+      ></DocumentPreviewer>
+    </Drawer>
+  );
+};
+
+export default PdfDrawer;