feat: When the mindmap data is empty, it will not be displayed on the search page #2247 (#2414)

### What problem does this PR solve?

feat: When the mindmap data is empty, it will not be displayed 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)
This commit is contained in:
balibabu 2024-09-13 14:30:51 +08:00 committed by GitHub
parent 2bd71d722b
commit ec4def9a44
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 49 additions and 39 deletions

View File

@ -101,6 +101,7 @@ export interface ITestingChunk {
vector_similarity: number; vector_similarity: number;
highlight: string; highlight: string;
positions: number[][]; positions: number[][];
docnm_kwd: string;
} }
export interface ITestingDocument { export interface ITestingDocument {

View File

@ -3,7 +3,6 @@
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;
} }
@ -101,6 +100,9 @@
font-style: normal; font-style: normal;
} }
} }
.documentReference {
cursor: pointer;
}
} }
.answerWrapper { .answerWrapper {
margin-top: 16px; margin-top: 16px;

View File

@ -1,3 +1,4 @@
import FileIcon from '@/components/file-icon';
import HightLightMarkdown from '@/components/highlight-markdown'; import HightLightMarkdown from '@/components/highlight-markdown';
import { ImageWithPopover } from '@/components/image'; import { ImageWithPopover } from '@/components/image';
import IndentedTree from '@/components/indented-tree/indented-tree'; import IndentedTree from '@/components/indented-tree/indented-tree';
@ -56,7 +57,6 @@ const SearchPage = () => {
sendingLoading, sendingLoading,
relatedQuestions, relatedQuestions,
mindMap, mindMap,
mindMapLoading,
searchStr, searchStr,
loading, loading,
isFirstRender, isFirstRender,
@ -74,11 +74,10 @@ const SearchPage = () => {
const isMindMapEmpty = useMemo(() => { const isMindMapEmpty = useMemo(() => {
return ( return (
!mindMapLoading && (Array.isArray(mindMap?.children) && mindMap.children.length === 0) ||
((Array.isArray(mindMap?.children) && mindMap.children.length === 0) || !Array.isArray(mindMap?.children)
!Array.isArray(mindMap?.children))
); );
}, [mindMap, mindMapLoading]); }, [mindMap]);
const InputSearch = ( const InputSearch = (
<Search <Search
@ -160,34 +159,46 @@ const SearchPage = () => {
className={styles.chunks} className={styles.chunks}
renderItem={(item) => ( renderItem={(item) => (
<List.Item> <List.Item>
<Card <Card className={styles.card}>
className={styles.card}
onClick={() =>
clickDocumentButton(item.doc_id, item as any)
}
>
<Space> <Space>
<ImageWithPopover <ImageWithPopover
id={item.img_id} id={item.img_id}
></ImageWithPopover> ></ImageWithPopover>
<Popover <Flex vertical gap={10}>
content={ <Popover
<div className={styles.popupMarkdown}> content={
<HightLightMarkdown> <div className={styles.popupMarkdown}>
{item.content_with_weight} <HightLightMarkdown>
</HightLightMarkdown> {item.content_with_weight}
</div> </HightLightMarkdown>
} </div>
> }
<div >
dangerouslySetInnerHTML={{ <div
__html: DOMPurify.sanitize( dangerouslySetInnerHTML={{
item.highlight, __html: DOMPurify.sanitize(
), `${item.highlight}...`,
}} ),
className={styles.highlightContent} }}
></div> className={styles.highlightContent}
</Popover> ></div>
</Popover>
<Space
className={styles.documentReference}
onClick={() =>
clickDocumentButton(
item.doc_id,
item as any,
)
}
>
<FileIcon
id={item.img_id}
name={item.docnm_kwd}
></FileIcon>
{item.docnm_kwd}
</Space>
</Flex>
</Space> </Space>
</Card> </Card>
</List.Item> </List.Item>
@ -220,15 +231,11 @@ const SearchPage = () => {
<section <section
className={isMindMapEmpty ? styles.hide : styles.graph} className={isMindMapEmpty ? styles.hide : styles.graph}
> >
{mindMapLoading ? ( <IndentedTree
<Skeleton active /> data={mindMap}
) : ( show
<IndentedTree style={{ width: '100%', height: '100%' }}
data={mindMap} ></IndentedTree>
show
style={{ width: '100%', height: '100%' }}
></IndentedTree>
)}
</section> </section>
</Flex> </Flex>
)} )}