pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
### 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)
This commit is contained in:
balibabu
2024-09-09 19:20:16 +08:00
committed by GitHub
parent 7241c73c7a
commit 42eeb38247
14 changed files with 390 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
web/src/pages/search/index.tsx
View File

@ -19,18 +19,26 @@ import MarkdownContent from '../chat/markdown-content';
import { useSendQuestion } from './hooks';
import SearchSidebar from './sidebar';
import PdfDrawer from '@/components/pdf-drawer';
import { useClickDrawer } from '@/components/pdf-drawer/hooks';
import RetrievalDocuments from '@/components/retrieval-documents';
import { useFetchAppConf } from '@/hooks/logic-hooks';
import { useTranslation } from 'react-i18next';
import styles from './index.less';
const { Content } = Layout;
const { Search } = Input;
const SearchPage = () => {
const { t } = useTranslation();
const [checkedList, setCheckedList] = useState<string[]>([]);
const list = useSelectTestingResult();
const appConf = useFetchAppConf();
const {
sendQuestion,
handleClickRelatedQuestion,
handleSearchStrChange,
handleTestChunk,
answer,
sendingLoading,
relatedQuestions,
@ -40,12 +48,14 @@ const SearchPage = () => {
loading,
isFirstRender,
} = useSendQuestion(checkedList);
const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
useClickDrawer();
const InputSearch = (
<Search
value={searchStr}
onChange={handleSearchStrChange}
placeholder="input search text"
placeholder={t('header.search')}
allowClear
enterButton
onSearch={sendQuestion}
@ -57,88 +67,107 @@ const SearchPage = () => {
);
return (
<Layout className={styles.searchPage}>
<SearchSidebar
checkedList={checkedList}
setCheckedList={setCheckedList}
></SearchSidebar>
<Layout>
<Content>
{isFirstRender ? (
<Flex
justify="center"
align="center"
className={styles.firstRenderContent}
>
{InputSearch}
</Flex>
) : (
<Flex className={styles.content}>
<section className={styles.main}>
{InputSearch}
{answer.answer && (
<div className={styles.answerWrapper}>
<MarkdownContent
loading={sendingLoading}
content={answer.answer}
reference={answer.reference ?? ({} as IReference)}
clickDocumentButton={() => {}}
></MarkdownContent>
</div>
)}
<Divider></Divider>
{list.chunks.length > 0 && (
<List
dataSource={list.chunks}
loading={loading}
renderItem={(item) => (
<List.Item>
<Card className={styles.card}>
<Space>
<ImageWithPopover
id={item.img_id}
></ImageWithPopover>
<HightLightMarkdown>
{item.highlight}
</HightLightMarkdown>
</Space>
</Card>
</List.Item>
)}
/>
)}
{relatedQuestions?.length > 0 && (
<Card>
<Flex wrap="wrap" gap={'10px 0'}>
{relatedQuestions?.map((x, idx) => (
<Tag
key={idx}
className={styles.tag}
onClick={handleClickRelatedQuestion(x)}
>
{x}
</Tag>
))}
</Flex>
</Card>
)}
</section>
<section className={styles.graph}>
{mindMapLoading ? (
<Skeleton active />
) : (
<IndentedTree
data={mindMap}
show
style={{ width: '100%', height: '100%' }}
></IndentedTree>
)}
</section>
</Flex>
)}
</Content>
<>
<Layout className={styles.searchPage}>
<SearchSidebar
checkedList={checkedList}
setCheckedList={setCheckedList}
></SearchSidebar>
<Layout>
<Content>
{isFirstRender ? (
<Flex
justify="center"
align="center"
className={styles.firstRenderContent}
>
<Flex vertical align="center" gap={'large'}>
<Space size={30}>
<img src="/logo.svg" alt="" className={styles.appIcon} />
<span className={styles.appName}>{appConf.appName}</span>
</Space>
{InputSearch}
</Flex>
</Flex>
) : (
<Flex className={styles.content}>
<section className={styles.main}>
{InputSearch}
{answer.answer && (
<div className={styles.answerWrapper}>
<MarkdownContent
loading={sendingLoading}
content={answer.answer}
reference={answer.reference ?? ({} as IReference)}
clickDocumentButton={clickDocumentButton}
></MarkdownContent>
</div>
)}
<Divider></Divider>
<RetrievalDocuments
selectedDocumentIdsLength={0}
onTesting={handleTestChunk}
></RetrievalDocuments>
<Divider></Divider>
{list.chunks.length > 0 && (
<List
dataSource={list.chunks}
loading={loading}
renderItem={(item) => (
<List.Item>
<Card className={styles.card}>
<Space>
<ImageWithPopover
id={item.img_id}
></ImageWithPopover>
<HightLightMarkdown>
{item.highlight}
</HightLightMarkdown>
</Space>
</Card>
</List.Item>
)}
/>
)}
{relatedQuestions?.length > 0 && (
<Card>
<Flex wrap="wrap" gap={'10px 0'}>
{relatedQuestions?.map((x, idx) => (
<Tag
key={idx}
className={styles.tag}
onClick={handleClickRelatedQuestion(x)}
>
{x}
</Tag>
))}
</Flex>
</Card>
)}
</section>
<section className={styles.graph}>
{mindMapLoading ? (
<Skeleton active />
) : (
<IndentedTree
data={mindMap}
show
style={{ width: '100%', height: '100%' }}
></IndentedTree>
)}
</section>
</Flex>
)}
</Content>
</Layout>
</Layout>
</Layout>
<PdfDrawer
visible={visible}
hideModal={hideModal}
documentId={documentId}
chunk={selectedChunk}
></PdfDrawer>
</>
);
};