feat: add Preview with react-pdf-highlighter (#89)

* feat: add selected style to chunk item

* feat: hightlight pdf

* feat: add Preview with react-pdf-highlighter
This commit is contained in:
balibabu
2024-03-01 18:49:21 +08:00
committed by GitHub
parent 5fb8989bb1
commit 7f174fb9d3
13 changed files with 426 additions and 42 deletions

View File

@ -8,8 +8,9 @@ import CreatingModal from './components/chunk-creating-modal';
import { useDeleteChunkByIds } from '@/hooks/knowledgeHook';
import ChunkCard from './components/chunk-card';
import ChunkToolBar from './components/chunk-toolbar';
import DocumentPreview from './components/document-preview';
import { useSelectDocumentInfo } from './hooks';
// import DocumentPreview from './components/document-preview';
import DocumentPreview from './components/document-preview/preview';
import { useHandleChunkCardClick, useSelectDocumentInfo } from './hooks';
import styles from './index.less';
import { ChunkModelState } from './model';
@ -36,6 +37,7 @@ const Chunk = () => {
const [chunkId, setChunkId] = useState<string | undefined>();
const { removeChunk } = useDeleteChunkByIds();
const documentInfo = useSelectDocumentInfo();
const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
const getChunkList = useCallback(() => {
const payload: PayloadType = {
@ -180,6 +182,8 @@ const Chunk = () => {
)}
handleCheckboxClick={handleSingleCheckboxClick}
switchChunk={switchChunk}
clickChunkCard={handleChunkCardClick}
selected={item.chunk_id === selectedChunkId}
></ChunkCard>
))}
</Space>
@ -202,7 +206,9 @@ const Chunk = () => {
{documentInfo.type === 'pdf' && (
<section className={styles.documentPreview}>
<DocumentPreview></DocumentPreview>
<DocumentPreview
selectedChunkId={selectedChunkId}
></DocumentPreview>
</section>
)}
</Flex>