KMS/ragflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Use Spin to wrap the chunk list on the search page #2247 (#2409)

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

feat: Use Spin to wrap the chunk list on the search page #2247
### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):
This commit is contained in:
balibabu 2024-09-13 11:38:09 +08:00 committed by GitHub
parent b261b6aac0
commit 8f2c0176b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 56 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/pages/search/hooks.ts
View File

@ -25,24 +25,39 @@ export const useSendQuestion = (kbIds: string[]) => {
const [isFirstRender, setIsFirstRender] = useState(true); const [isFirstRender, setIsFirstRender] = useState(true);
const [selectedDocumentIds, setSelectedDocumentIds] = useState<string[]>([]); const [selectedDocumentIds, setSelectedDocumentIds] = useState<string[]>([]);
const { pagination } = useGetPaginationWithRouter(); const { pagination, setPagination } = useGetPaginationWithRouter();
const sendQuestion = useCallback( const sendQuestion = useCallback(
(question: string) => { (question: string) => {
const q = trim(question); const q = trim(question);
if (isEmpty(q)) return; if (isEmpty(q)) return;
setPagination({ page: 1 });
setIsFirstRender(false); setIsFirstRender(false);
setCurrentAnswer({} as IAnswer); setCurrentAnswer({} as IAnswer);
setSendingLoading(true); setSendingLoading(true);
send({ kb_ids: kbIds, question: q }); send({ kb_ids: kbIds, question: q });
testChunk({ kb_id: kbIds, highlight: true, question: q }); testChunk({
kb_id: kbIds,
highlight: true,
question: q,
page: 1,
size: pagination.pageSize,
});
fetchMindMap({ fetchMindMap({
question: q, question: q,
kb_ids: kbIds, kb_ids: kbIds,
}); });
fetchRelatedQuestions(q); fetchRelatedQuestions(q);
}, },
[send, testChunk, kbIds, fetchRelatedQuestions, fetchMindMap], [
send,
testChunk,
kbIds,
fetchRelatedQuestions,
fetchMindMap,
setPagination,
pagination.pageSize,
],
); );
const handleSearchStrChange: ChangeEventHandler<HTMLInputElement> = const handleSearchStrChange: ChangeEventHandler<HTMLInputElement> =

1
web/src/pages/search/index.less
View File

@ -3,6 +3,7 @@
background-size: cover; background-size: cover;
.card { .card {
width: 100%; width: 100%;
cursor: pointer;
:global(.ant-card-body) { :global(.ant-card-body) {
padding: 14px; padding: 14px;
} }

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

@ -22,6 +22,7 @@ import {
Popover, Popover,
Skeleton, Skeleton,
Space, Space,
Spin,
Tag, Tag,
} from 'antd'; } from 'antd';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
@ -139,44 +140,45 @@ const SearchPage = () => {
onTesting={handleTestChunk} onTesting={handleTestChunk}
></RetrievalDocuments> ></RetrievalDocuments>
<Divider></Divider> <Divider></Divider>
{chunks.length > 0 && ( <Spin spinning={loading}>
<List {chunks.length > 0 && (
dataSource={chunks} <List
loading={loading} dataSource={chunks}
className={styles.chunks} className={styles.chunks}
renderItem={(item) => ( renderItem={(item) => (
<List.Item> <List.Item>
<Card <Card
className={styles.card} className={styles.card}
onClick={() => onClick={() =>
clickDocumentButton(item.doc_id, item as any) clickDocumentButton(item.doc_id, item as any)
} }
> >
<Space> <Space>
<ImageWithPopover <ImageWithPopover
id={item.img_id} id={item.img_id}
></ImageWithPopover> ></ImageWithPopover>
<Popover <Popover
content={ content={
<div className={styles.popupMarkdown}> <div className={styles.popupMarkdown}>
<HightLightMarkdown>
{item.content_with_weight}
</HightLightMarkdown>
</div>
}
>
<div>
<HightLightMarkdown> <HightLightMarkdown>
{item.content_with_weight} {item.highlight}
</HightLightMarkdown> </HightLightMarkdown>
</div> </div>
} </Popover>
> </Space>
<div> </Card>
<HightLightMarkdown> </List.Item>
{item.highlight} )}
</HightLightMarkdown> />
</div> )}
</Popover> </Spin>
</Space>
</Card>
</List.Item>
)}
/>
)}
{relatedQuestions?.length > 0 && ( {relatedQuestions?.length > 0 && (
<Card title={t('chat.relatedQuestion')}> <Card title={t('chat.relatedQuestion')}>
<Flex wrap="wrap" gap={'10px 0'}> <Flex wrap="wrap" gap={'10px 0'}>