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)

web/src/interfaces/database/knowledge.ts

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

web/src/pages/search/index.less

@@ -3,7 +3,6 @@
   background-size: cover;
   .card {
     width: 100%;
-    cursor: pointer;
     :global(.ant-card-body) {
       padding: 14px;
     }
@@ -101,6 +100,9 @@
       font-style: normal;
     }
   }
+  .documentReference {
+    cursor: pointer;
+  }
 }
 .answerWrapper {
   margin-top: 16px;

web/src/pages/search/index.tsx

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