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: Modify the style of the answer card on the search page #2247 (#2412)

Browse Source 
### What problem does this PR solve?

feat: Modify the style of the answer card on the search page #2247

### Type of change

- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2024-09-13 12:31:31 +08:00
committed by GitHub
parent 8f2c0176b4
commit 2bd71d722b
6 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,13 +25,14 @@ import {
Spin,
Tag,
} from 'antd';
import DOMPurify from 'dompurify';
import { isEmpty } from 'lodash';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import MarkdownContent from '../chat/markdown-content';
import { useFetchBackgroundImage, useSendQuestion } from './hooks';
import SearchSidebar from './sidebar';
import styles from './index.less';
import SearchSidebar from './sidebar';
const { Content } = Layout;
const { Search } = Input;
@ -123,16 +124,28 @@ const SearchPage = () => {
className={isMindMapEmpty ? styles.largeMain : styles.main}
>
{InputSearch}
{answer.answer && (
<div className={styles.answerWrapper}>
<MarkdownContent
loading={sendingLoading}
content={answer.answer}
reference={answer.reference ?? ({} as IReference)}
clickDocumentButton={clickDocumentButton}
></MarkdownContent>
</div>
)}
<Card
title={
<Flex gap={10}>
<img src="/logo.svg" alt="" width={20} />
{t('chat.answerTitle')}
</Flex>
}
className={styles.answerWrapper}
>
{isEmpty(answer) && sendingLoading ? (
<Skeleton active />
) : (
answer.answer && (
<MarkdownContent
loading={sendingLoading}
content={answer.answer}
reference={answer.reference ?? ({} as IReference)}
clickDocumentButton={clickDocumentButton}
></MarkdownContent>
)
)}
</Card>
<Divider></Divider>
<RetrievalDocuments
selectedDocumentIds={selectedDocumentIds}
@ -166,11 +179,14 @@ const SearchPage = () => {
</div>
}
>
<div>
<HightLightMarkdown>
{item.highlight}
</HightLightMarkdown>
</div>
<div
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(
item.highlight,
),
}}
className={styles.highlightContent}
></div>
</Popover>
</Space>
</Card>