feat: Catching errors with IndentedTree #2247

web/package.json

@@ -42,6 +42,7 @@
     "openai-speech-stream-player": "^1.0.8",
     "rc-tween-one": "^3.0.6",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-error-boundary": "^4.0.13",
     "react-force-graph": "^1.44.4",
     "react-i18next": "^14.0.0",
     "react-markdown": "^9.0.1",

web/src/components/indented-tree/indented-tree.tsx

@@ -17,6 +17,7 @@ import {
 import { TreeData } from '@antv/g6/lib/types';
 import isEmpty from 'lodash/isEmpty';
 import React, { useCallback, useEffect, useRef } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 
 const rootId = 'root';
 
@@ -297,6 +298,17 @@ interface IProps {
   style?: React.CSSProperties;
 }
 
+function fallbackRender({ error }: FallbackProps) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+    </div>
+  );
+}
+
 const IndentedTree = ({ data, show, style = {} }: IProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const graphRef = useRef<Graph | null>(null);
@@ -382,16 +394,18 @@ const IndentedTree = ({ data, show, style = {} }: IProps) => {
   }, [render, data]);
 
   return (
-    <div
-      id="tree"
-      ref={containerRef}
-      style={{
-        width: '90vw',
-        height: '80vh',
-        display: show ? 'block' : 'none',
-        ...style,
-      }}
-    />
+    <ErrorBoundary fallbackRender={fallbackRender}>
+      <div
+        id="tree"
+        ref={containerRef}
+        style={{
+          width: '90vw',
+          height: '80vh',
+          display: show ? 'block' : 'none',
+          ...style,
+        }}
+      />
+    </ErrorBoundary>
   );
 };
 

web/src/hooks/chat-hooks.ts

@@ -494,7 +494,7 @@ export const useFetchMindMap = () => {
     mutationFn: async (params: IAskRequestBody) => {
       try {
         const ret = await chatService.getMindMap(params);
-        return ret?.data?.data ?? [];
+        return ret?.data?.data ?? {};
       } catch (error) {
         if (has(error, 'message')) {
           message.error(error.message);

web/src/pages/search/index.less

@@ -57,15 +57,22 @@
 
 .content {
   height: 100%;
-  .main {
-    width: 60%;
-    // background-color: aqua;
+  .hide {
+    display: none;
+  }
+
+  .mainMixin() {
     overflow: auto;
     padding: 20px 10px 10px;
-    .chunks {
-      // overflow: auto;
-      // height: 60vh;
-    }
+  }
+
+  .largeMain {
+    width: 100%;
+    .mainMixin();
+  }
+  .main {
+    width: 60%;
+    .mainMixin();
   }
 
   .graph {
@@ -111,6 +118,9 @@
 }
 .partialInput {
   width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 1;
   .input();
 }
 

web/src/pages/search/index.tsx

@@ -20,7 +20,7 @@ import {
   Space,
   Tag,
 } from 'antd';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import MarkdownContent from '../chat/markdown-content';
 import { useFetchBackgroundImage, useSendQuestion } from './hooks';
@@ -35,7 +35,6 @@ const SearchPage = () => {
   const { t } = useTranslation();
   const [checkedList, setCheckedList] = useState<string[]>([]);
   const { chunks, total } = useSelectTestingResult();
-  // const appConf = useFetchAppConf();
   const {
     sendQuestion,
     handleClickRelatedQuestion,
@@ -62,6 +61,14 @@ const SearchPage = () => {
     handleTestChunk(selectedDocumentIds, pageNumber, pageSize);
   };
 
+  const isMindMapEmpty = useMemo(() => {
+    return (
+      !mindMapLoading &&
+      ((Array.isArray(mindMap?.children) && mindMap.children.length === 0) ||
+        !Array.isArray(mindMap?.children))
+    );
+  }, [mindMap, mindMapLoading]);
+
   const InputSearch = (
     <Search
       value={searchStr}
@@ -103,7 +110,9 @@ const SearchPage = () => {
               </Flex>
             ) : (
               <Flex className={styles.content}>
-                <section className={styles.main}>
+                <section
+                  className={isMindMapEmpty ? styles.largeMain : styles.main}
+                >
                   {InputSearch}
                   {answer.answer && (
                     <div className={styles.answerWrapper}>
@@ -165,7 +174,9 @@ const SearchPage = () => {
                     onChange={onChange}
                   />
                 </section>
-                <section className={styles.graph}>
+                <section
+                  className={isMindMapEmpty ? styles.hide : styles.graph}
+                >
                   {mindMapLoading ? (
                     <Skeleton active />
                   ) : (