diff --git a/web/src/components/pdf-previewer/index.less b/web/src/components/pdf-previewer/index.less
new file mode 100644
index 000000000..b65199342
--- /dev/null
+++ b/web/src/components/pdf-previewer/index.less
@@ -0,0 +1,12 @@
+.documentContainer {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ :global(.PdfHighlighter) {
+ overflow-x: hidden;
+ }
+ :global(.Highlight--scrolledTo .Highlight__part) {
+ overflow-x: hidden;
+ background-color: rgba(255, 226, 143, 1);
+ }
+}
diff --git a/web/src/components/pdf-previewer/index.tsx b/web/src/components/pdf-previewer/index.tsx
new file mode 100644
index 000000000..e6f72ef1e
--- /dev/null
+++ b/web/src/components/pdf-previewer/index.tsx
@@ -0,0 +1,116 @@
+import {
+ useGetChunkHighlights,
+ useGetDocumentUrl,
+} from '@/hooks/documentHooks';
+import { IChunk } from '@/interfaces/database/knowledge';
+import { Skeleton } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import {
+ AreaHighlight,
+ Highlight,
+ IHighlight,
+ PdfHighlighter,
+ PdfLoader,
+ Popup,
+} from 'react-pdf-highlighter';
+
+import styles from './index.less';
+
+interface IProps {
+ chunk: IChunk;
+ documentId: string;
+ visible: boolean;
+}
+
+const HighlightPopup = ({
+ comment,
+}: {
+ comment: { text: string; emoji: string };
+}) =>
+ comment.text ? (
+
+ {comment.emoji} {comment.text}
+
+ ) : null;
+
+const DocumentPreviewer = ({ chunk, documentId, visible }: IProps) => {
+ const url = useGetDocumentUrl(documentId);
+ const state = useGetChunkHighlights(chunk);
+ const ref = useRef<(highlight: IHighlight) => void>(() => {});
+ const [loaded, setLoaded] = useState(false);
+
+ const resetHash = () => {};
+
+ useEffect(() => {
+ setLoaded(visible);
+ }, [visible]);
+
+ useEffect(() => {
+ if (state.length > 0 && loaded) {
+ setLoaded(false);
+ ref.current(state[0]);
+ }
+ }, [state, loaded]);
+
+ return (
+
+
}>
+ {(pdfDocument) => (
+
event.altKey}
+ onScrollChange={resetHash}
+ scrollRef={(scrollTo) => {
+ ref.current = scrollTo;
+ setLoaded(true);
+ }}
+ onSelectionFinished={() => null}
+ highlightTransform={(
+ highlight,
+ index,
+ setTip,
+ hideTip,
+ viewportToScaled,
+ screenshot,
+ isScrolledTo,
+ ) => {
+ const isTextHighlight = !Boolean(
+ highlight.content && highlight.content.image,
+ );
+
+ const component = isTextHighlight ? (
+
+ ) : (
+ {}}
+ />
+ );
+
+ return (
+ }
+ onMouseOver={(popupContent) =>
+ setTip(highlight, () => popupContent)
+ }
+ onMouseOut={hideTip}
+ key={index}
+ >
+ {component}
+
+ );
+ }}
+ highlights={state}
+ />
+ )}
+
+ 
-
+
+
)}
);
},
- [reference, fileThumbnails],
+ [reference, fileThumbnails, handleDocumentButtonClick],
);
const renderReference = useCallback(
@@ -191,6 +215,8 @@ const ChatContainer = () => {
addNewestConversation,
} = useFetchConversationOnMount();
const { sendMessage } = useSendMessage();
+ const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
+ useClickDrawer();
const loading = useOneNamespaceEffectsLoading('chatModel', [
'completeConversation',
@@ -210,41 +236,56 @@ const ChatContainer = () => {
};
return (
-
-
-
- {conversation?.message?.map((message) => {
- const assistantMessages = conversation?.message
- ?.filter((x) => x.role === MessageType.Assistant)
- .slice(1);
- const referenceIndex = assistantMessages.findIndex(
- (x) => x.id === message.id,
- );
- const reference = conversation.reference[referenceIndex];
- return (
-
- );
- })}
-
-
+ <>
+
+
+
+ {conversation?.message?.map((message) => {
+ const assistantMessages = conversation?.message
+ ?.filter((x) => x.role === MessageType.Assistant)
+ .slice(1);
+ const referenceIndex = assistantMessages.findIndex(
+ (x) => x.id === message.id,
+ );
+ const reference = conversation.reference[referenceIndex];
+ return (
+
+ );
+ })}
+
+
+
+
+ Send
+
+ }
+ onPressEnter={handlePressEnter}
+ onChange={handleInputChange}
+ />
-
- Send
-
- }
- onPressEnter={handlePressEnter}
- onChange={handleInputChange}
- />
-
+
+
+
+
);
};
diff --git a/web/src/pages/chat/hooks.ts b/web/src/pages/chat/hooks.ts
index 52e1553e2..1c8926be5 100644
--- a/web/src/pages/chat/hooks.ts
+++ b/web/src/pages/chat/hooks.ts
@@ -4,6 +4,7 @@ import { fileIconMap } from '@/constants/common';
import { useSetModalState } from '@/hooks/commonHooks';
import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
import { IConversation, IDialog } from '@/interfaces/database/chat';
+import { IChunk } from '@/interfaces/database/knowledge';
import { getFileExtension } from '@/utils';
import omit from 'lodash/omit';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -662,4 +663,28 @@ export const useRenameConversation = () => {
};
};
+export const useClickDrawer = () => {
+ const { visible, showModal, hideModal } = useSetModalState();
+ const [selectedChunk, setSelectedChunk] = useState({} as IChunk);
+ const [documentId, setDocumentId] = useState('');
+
+ const clickDocumentButton = useCallback(
+ (documentId: string, chunk: IChunk) => {
+ showModal();
+ setSelectedChunk(chunk);
+ setDocumentId(documentId);
+ },
+ [showModal],
+ );
+
+ return {
+ clickDocumentButton,
+ visible,
+ showModal,
+ hideModal,
+ selectedChunk,
+ documentId,
+ };
+};
+
//#endregion
diff --git a/web/src/pages/knowledge/index.tsx b/web/src/pages/knowledge/index.tsx
index 76ad3713e..78f2af55d 100644
--- a/web/src/pages/knowledge/index.tsx
+++ b/web/src/pages/knowledge/index.tsx
@@ -50,13 +50,7 @@ const Knowledge = () => {
-
+
{list.length > 0 ? (
list.map((item: any) => {
return ;
diff --git a/web/src/utils/documentUtils.ts b/web/src/utils/documentUtils.ts
new file mode 100644
index 000000000..a2fb1e072
--- /dev/null
+++ b/web/src/utils/documentUtils.ts
@@ -0,0 +1,34 @@
+import { IChunk } from '@/interfaces/database/knowledge';
+import { v4 as uuid } from 'uuid';
+
+export const buildChunkHighlights = (selectedChunk: IChunk) => {
+ return Array.isArray(selectedChunk?.positions) &&
+ selectedChunk.positions.every((x) => Array.isArray(x))
+ ? selectedChunk?.positions?.map((x) => {
+ const actualPositions = x.map((y, index) =>
+ index !== 0 ? y / 0.7 : y,
+ );
+ const boundingRect = {
+ width: 849,
+ height: 1200,
+ x1: actualPositions[1],
+ x2: actualPositions[2],
+ y1: actualPositions[3],
+ y2: actualPositions[4],
+ };
+ return {
+ id: uuid(),
+ comment: {
+ text: '',
+ emoji: '',
+ },
+ content: { text: selectedChunk.content_with_weight },
+ position: {
+ boundingRect: boundingRect,
+ rects: [boundingRect],
+ pageNumber: x[0],
+ },
+ };
+ })
+ : [];
+};