feat: Fetch mind map in search page #2247 (#2292)

### What problem does this PR solve?
feat: Fetch mind map in search page #2247

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/search/index.tsx

@@ -2,12 +2,13 @@ import HightLightMarkdown from '@/components/highlight-markdown';
 import { ImageWithPopover } from '@/components/image';
 import { useSelectTestingResult } from '@/hooks/knowledge-hooks';
 import { IReference } from '@/interfaces/database/chat';
-import { Card, Flex, Input, Layout, List, Space } from 'antd';
+import { Card, Flex, Input, Layout, List, Skeleton, Space, Tag } from 'antd';
 import { useState } from 'react';
 import MarkdownContent from '../chat/markdown-content';
 import { useSendQuestion } from './hooks';
 import SearchSidebar from './sidebar';
 
+import IndentedTree from '@/components/indented-tree/indented-tree';
 import styles from './index.less';
 
 const { Content } = Layout;
@@ -16,7 +17,14 @@ const { Search } = Input;
 const SearchPage = () => {
   const [checkedList, setCheckedList] = useState<string[]>([]);
   const list = useSelectTestingResult();
-  const { sendQuestion, answer, sendingLoading } = useSendQuestion(checkedList);
+  const {
+    sendQuestion,
+    answer,
+    sendingLoading,
+    relatedQuestions,
+    mindMap,
+    mindMapLoading,
+  } = useSendQuestion(checkedList);
 
   return (
     <Layout className={styles.searchPage}>
@@ -56,8 +64,29 @@ const SearchPage = () => {
                   </List.Item>
                 )}
               />
+              {relatedQuestions?.length > 0 && (
+                <Card>
+                  <Flex wrap="wrap" gap={'10px 0'}>
+                    {relatedQuestions?.map((x, idx) => (
+                      <Tag key={idx} className={styles.tag}>
+                        {x}
+                      </Tag>
+                    ))}
+                  </Flex>
+                </Card>
+              )}
+            </section>
+            <section className={styles.graph}>
+              {mindMapLoading ? (
+                <Skeleton active />
+              ) : (
+                <IndentedTree
+                  data={mindMap}
+                  show
+                  style={{ width: '100%', height: '100%' }}
+                ></IndentedTree>
+              )}
             </section>
-            <section className={styles.graph}></section>
           </Flex>
         </Content>
       </Layout>