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;

web/src/components/retrieval-documents/index.less

@@ -0,0 +1,11 @@
+.selectFilesCollapse {
+  :global(.ant-collapse-header) {
+    padding-left: 22px;
+  }
+  margin-bottom: 32px;
+  overflow-y: auto;
+}
+
+.selectFilesTitle {
+  padding-right: 10px;
+}

web/src/components/retrieval-documents/index.tsx

@@ -0,0 +1,55 @@
+import { ReactComponent as SelectedFilesCollapseIcon } from '@/assets/svg/selected-files-collapse.svg';
+import { Collapse, Flex, Space } from 'antd';
+import SelectFiles from './select-files';
+
+import { useSelectTestingResult } from '@/hooks/knowledge-hooks';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './index.less';
+
+interface IProps {
+  selectedDocumentIdsLength?: number;
+  onTesting(documentIds: string[]): void;
+}
+
+const RetrievalDocuments = ({ onTesting }: IProps) => {
+  const { t } = useTranslation();
+  const { documents } = useSelectTestingResult();
+  const [selectedDocumentIds, setSelectedDocumentIds] = useState<string[]>([]);
+
+  return (
+    <Collapse
+      expandIcon={() => <SelectedFilesCollapseIcon></SelectedFilesCollapseIcon>}
+      className={styles.selectFilesCollapse}
+      items={[
+        {
+          key: '1',
+          label: (
+            <Flex
+              justify={'space-between'}
+              align="center"
+              className={styles.selectFilesTitle}
+            >
+              <Space>
+                <span>
+                  {selectedDocumentIds.length ?? 0}/{documents.length}
+                </span>
+                {t('knowledgeDetails.filesSelected')}
+              </Space>
+            </Flex>
+          ),
+          children: (
+            <div>
+              <SelectFiles
+                setSelectedDocumentIds={setSelectedDocumentIds}
+                handleTesting={onTesting}
+              ></SelectFiles>
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+};
+
+export default RetrievalDocuments;

web/src/components/retrieval-documents/select-files.tsx

@@ -0,0 +1,73 @@
+import NewDocumentLink from '@/components/new-document-link';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useSelectTestingResult } from '@/hooks/knowledge-hooks';
+import { ITestingDocument } from '@/interfaces/database/knowledge';
+import { EyeOutlined } from '@ant-design/icons';
+import { Button, Table, TableProps, Tooltip } from 'antd';
+
+interface IProps {
+  handleTesting: (ids: string[]) => void;
+  setSelectedDocumentIds: (ids: string[]) => void;
+}
+
+const SelectFiles = ({ setSelectedDocumentIds, handleTesting }: IProps) => {
+  const { documents } = useSelectTestingResult();
+  const { t } = useTranslate('fileManager');
+
+  const columns: TableProps<ITestingDocument>['columns'] = [
+    {
+      title: 'Name',
+      dataIndex: 'doc_name',
+      key: 'doc_name',
+      render: (text) => <p>{text}</p>,
+    },
+
+    {
+      title: 'Hits',
+      dataIndex: 'count',
+      key: 'count',
+      width: 80,
+    },
+    {
+      title: 'View',
+      key: 'view',
+      width: 50,
+      render: (_, { doc_id, doc_name }) => (
+        <NewDocumentLink
+          documentName={doc_name}
+          documentId={doc_id}
+          prefix="document"
+        >
+          <Tooltip title={t('preview')}>
+            <Button type="text">
+              <EyeOutlined size={20} />
+            </Button>
+          </Tooltip>
+        </NewDocumentLink>
+      ),
+    },
+  ];
+
+  const rowSelection = {
+    onChange: (selectedRowKeys: React.Key[]) => {
+      handleTesting(selectedRowKeys as string[]);
+      setSelectedDocumentIds(selectedRowKeys as string[]);
+    },
+    getCheckboxProps: (record: ITestingDocument) => ({
+      disabled: record.doc_name === 'Disabled User', // Column configuration not to be checked
+      name: record.doc_name,
+    }),
+  };
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={documents}
+      showHeader={false}
+      rowSelection={rowSelection}
+      rowKey={'doc_id'}
+    />
+  );
+};
+
+export default SelectFiles;