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/hooks.ts

@@ -1,3 +1,4 @@
+import { useFetchMindMap, useFetchRelatedQuestions } from '@/hooks/chat-hooks';
 import { useTestChunkRetrieval } from '@/hooks/knowledge-hooks';
 import { useSendMessageWithSse } from '@/hooks/logic-hooks';
 import { IAnswer } from '@/interfaces/database/chat';
@@ -10,6 +11,13 @@ export const useSendQuestion = (kbIds: string[]) => {
   const { testChunk, loading } = useTestChunkRetrieval();
   const [sendingLoading, setSendingLoading] = useState(false);
   const [currentAnswer, setCurrentAnswer] = useState({} as IAnswer);
+  const { fetchRelatedQuestions, data: relatedQuestions } =
+    useFetchRelatedQuestions();
+  const {
+    fetchMindMap,
+    data: mindMap,
+    loading: mindMapLoading,
+  } = useFetchMindMap();
 
   const sendQuestion = useCallback(
     (question: string) => {
@@ -17,8 +25,13 @@ export const useSendQuestion = (kbIds: string[]) => {
       setSendingLoading(true);
       send({ kb_ids: kbIds, question });
       testChunk({ kb_id: kbIds, highlight: true, question });
+      fetchMindMap({
+        question,
+        kb_ids: kbIds,
+      });
+      fetchRelatedQuestions(question);
     },
-    [send, testChunk, kbIds],
+    [send, testChunk, kbIds, fetchRelatedQuestions, fetchMindMap],
   );
 
   useEffect(() => {
@@ -33,5 +46,13 @@ export const useSendQuestion = (kbIds: string[]) => {
     }
   }, [done]);
 
-  return { sendQuestion, loading, sendingLoading, answer: currentAnswer };
+  return {
+    sendQuestion,
+    loading,
+    sendingLoading,
+    answer: currentAnswer,
+    relatedQuestions: relatedQuestions?.slice(0, 5) ?? [],
+    mindMap,
+    mindMapLoading,
+  };
 };

web/src/pages/search/index.less

@@ -2,6 +2,10 @@
   .card {
     width: 100%;
   }
+  .tag {
+    padding: 4px 8px;
+    font-size: 14px;
+  }
 }
 
 .searchSide {
@@ -49,6 +53,6 @@
 
   .graph {
     width: 40%;
-    background-color: bisque;
+    padding-right: 10px;
   }
 }

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>

web/src/pages/search/sidebar.tsx

@@ -30,20 +30,23 @@ const SearchSidebar = ({ checkedList, setCheckedList }: IProps) => {
   const indeterminate =
     checkedList.length > 0 && checkedList.length < list.length;
 
-  const onChange = useCallback((list: CheckboxValueType[]) => {
-    setCheckedList(list as string[]);
-  }, []);
+  const onChange = useCallback(
+    (list: CheckboxValueType[]) => {
+      setCheckedList(list as string[]);
+    },
+    [setCheckedList],
+  );
 
   const onCheckAllChange: CheckboxProps['onChange'] = useCallback(
     (e: CheckboxChangeEvent) => {
       setCheckedList(e.target.checked ? ids : []);
     },
-    [ids],
+    [ids, setCheckedList],
   );
 
   useEffect(() => {
     setCheckedList(ids);
-  }, [ids]);
+  }, [ids, setCheckedList]);
 
   return (
     <Sider className={styles.searchSide} theme={'light'} width={240}>
@@ -53,7 +56,7 @@ const SearchSidebar = ({ checkedList, setCheckedList }: IProps) => {
         onChange={onCheckAllChange}
         checked={checkAll}
       >
-        Check all
+        All
       </Checkbox>
       <Checkbox.Group
         className={styles.checkGroup}