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/chat/chat-configuration-modal/assistant-setting.tsx

@@ -90,7 +90,7 @@ const AssistantSetting = ({ show }: ISegmentedContentProps) => {
       >
         <Switch />
       </Form.Item>
-      <Form.Item
+      {/* <Form.Item
         label={t('selfRag')}
         valuePropName="checked"
         name={['prompt_config', 'self_rag']}
@@ -98,7 +98,7 @@ const AssistantSetting = ({ show }: ISegmentedContentProps) => {
         initialValue={false}
       >
         <Switch />
-      </Form.Item>
+      </Form.Item> */}
       {/* <Form.Item
         label={t('tts')}
         valuePropName="checked"

web/src/pages/flow/message-form/index.tsx

@@ -74,7 +74,7 @@ const MessageForm = ({ onValuesChange, form }: IOperatorForm) => {
                 style={{ width: '80%' }}
                 icon={<PlusOutlined />}
               >
-                {t('addField')}
+                {t('addMessage')}
               </Button>
             </Form.Item>
           </>

web/src/pages/force-graph/index.tsx

@@ -1,112 +1,3 @@
-import { Graph } from '@antv/g6';
-import { useSize } from 'ahooks';
-import { useEffect, useRef } from 'react';
-import { graphData } from './constant';
 import InputWithUpload from './input-upload';
 
-import styles from './index.less';
-import { Converter } from './util';
-
-const converter = new Converter();
-
-const nextData = converter.buildNodesAndCombos(
-  graphData.nodes,
-  graphData.edges,
-);
-console.log('🚀 ~ nextData:', nextData);
-
-const finalData = { ...graphData, ...nextData };
-
-const ForceGraph = () => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const size = useSize(containerRef);
-  let graph: Graph;
-
-  const render = () => {
-    graph = new Graph({
-      container: containerRef.current!,
-      autoFit: 'view',
-      behaviors: [
-        'drag-element',
-        'drag-canvas',
-        'zoom-canvas',
-        'collapse-expand',
-        {
-          type: 'hover-activate',
-          degree: 1, // 👈🏻 Activate relations.
-        },
-      ],
-      plugins: [
-        {
-          type: 'tooltip',
-          getContent: (e, items) => {
-            if (items.every((x) => x?.description)) {
-              let result = ``;
-              items.forEach((item) => {
-                if (item?.description) {
-                  result += `<p>${item?.description}</p>`;
-                }
-              });
-              return result;
-            }
-            return undefined;
-          },
-        },
-      ],
-      layout: {
-        type: 'combo-combined',
-        preventOverlap: true,
-        comboPadding: 1,
-        spacing: 20,
-      },
-      node: {
-        style: {
-          size: 20,
-          labelText: (d) => d.id,
-          labelPadding: 30,
-          //   labelOffsetX: 20,
-          // labelOffsetY: 5,
-          labelPlacement: 'center',
-          labelWordWrap: true,
-        },
-        palette: {
-          type: 'group',
-          field: (d) => d.combo,
-        },
-        // state: {
-        //   highlight: {
-        //     fill: '#D580FF',
-        //     halo: true,
-        //     lineWidth: 0,
-        //   },
-        //   dim: {
-        //     fill: '#99ADD1',
-        //   },
-        // },
-      },
-      edge: {
-        style: (model) => {
-          const { size, color } = model.data;
-          return {
-            stroke: color || '#99ADD1',
-            lineWidth: size || 1,
-          };
-        },
-      },
-      //   data: graphData,
-    });
-
-    graph.setData(finalData);
-
-    graph.render();
-  };
-
-  useEffect(() => {
-    console.info('rendered');
-    render();
-  }, []);
-
-  return <div ref={containerRef} className={styles.container} />;
-};
-
 export default InputWithUpload;

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}