From 5265def9677bcee9b8d70c06f6538821254c0e04 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 20 Apr 2026 19:24:13 +0800
Subject: [PATCH] Fix: The mind map on the search page does not display
 completely upon initial loading. (#14226)

### What problem does this PR solve?

Fix: The mind map on the search page does not display completely upon
initial loading.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/pages/next-search/index.tsx           |  1 -
 .../{mindmap-drawer.tsx => mindmap-sheet.tsx} |  6 +-
 web/src/pages/next-search/search-setting.tsx  |  3 +-
 web/src/pages/next-search/search-view.tsx     | 65 ++++++++++---------
 4 files changed, 39 insertions(+), 36 deletions(-)
 rename web/src/pages/next-search/{mindmap-drawer.tsx => mindmap-sheet.tsx} (91%)

diff --git a/web/src/pages/next-search/index.tsx b/web/src/pages/next-search/index.tsx
index 47d51cf7af..2d00e5eac0 100644
--- a/web/src/pages/next-search/index.tsx
+++ b/web/src/pages/next-search/index.tsx
@@ -64,7 +64,6 @@ export default function SearchPage() {
         </div>
         {openSetting && (
           <SearchSetting
-            className="mt-20 me-2"
             open={openSetting}
             setOpen={setOpenSetting}
             data={SearchData as ISearchAppDetailProps}
diff --git a/web/src/pages/next-search/mindmap-drawer.tsx b/web/src/pages/next-search/mindmap-sheet.tsx
similarity index 91%
rename from web/src/pages/next-search/mindmap-drawer.tsx
rename to web/src/pages/next-search/mindmap-sheet.tsx
index 559c445e23..54d32823a0 100644
--- a/web/src/pages/next-search/mindmap-drawer.tsx
+++ b/web/src/pages/next-search/mindmap-sheet.tsx
@@ -15,13 +15,13 @@ interface IProps extends IModalProps<any> {
   data: any;
 }
 
-const MindMapDrawer = ({ data, hideModal, loading, visible }: IProps) => {
+const MindMapSheet = ({ data, hideModal, loading, visible }: IProps) => {
   const { t } = useTranslation();
   const percent = usePendingMindMap();
   return (
     <Sheet open={visible} modal={false}>
       <SheetContent
-        className="top-16 p-0 flex flex-col gap-0"
+        className="top-24 p-0 flex flex-col gap-0 h-auto"
         closeIcon={false}
       >
         <SheetHeader className="border-b py-2 px-4">
@@ -56,4 +56,4 @@ const MindMapDrawer = ({ data, hideModal, loading, visible }: IProps) => {
   );
 };
 
-export default MindMapDrawer;
+export default MindMapSheet;
diff --git a/web/src/pages/next-search/search-setting.tsx b/web/src/pages/next-search/search-setting.tsx
index db10d2cb85..7b8203bf00 100644
--- a/web/src/pages/next-search/search-setting.tsx
+++ b/web/src/pages/next-search/search-setting.tsx
@@ -249,7 +249,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
   return (
     <div
       className={cn(
-        'text-text-primary border p-4 pb-12 rounded-lg ',
+        'text-text-primary border-l-0.5 p-4 pb-12',
         {
           'animate-fade-in-right': open,
           'animate-fade-out-right': !open,
@@ -257,7 +257,6 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
         width0,
         className,
       )}
-      style={{ maxHeight: 'calc(100dvh - 170px)' }}
     >
       <div className="flex justify-between items-center text-base mb-8">
         <div className="text-text-primary">{t('search.searchSettings')}</div>
diff --git a/web/src/pages/next-search/search-view.tsx b/web/src/pages/next-search/search-view.tsx
index 0ffc99cc51..c417dec1fd 100644
--- a/web/src/pages/next-search/search-view.tsx
+++ b/web/src/pages/next-search/search-view.tsx
@@ -24,7 +24,7 @@ import ExpandableContent from './expandable-content';
 import { ISearchReturnProps } from './hooks';
 import './index.less';
 import MarkdownContent from './markdown-content';
-import MindMapDrawer from './mindmap-drawer';
+import MindMapSheet from './mindmap-sheet';
 import { RAGFlowLogo } from './ragflow-logo';
 import RetrievalDocuments from './retrieval-documents';
 
@@ -65,12 +65,13 @@ export default function SearchingView({
 }) {
   const { t } = useTranslation();
 
-  const [searchtext, setSearchtext] = useState<string>('');
+  const [searchText, setSearchText] = useState<string>('');
   const [retrievalLoading, setRetrievalLoading] = useState(false);
 
   useEffect(() => {
-    setSearchtext(searchStr);
-  }, [searchStr, setSearchtext]);
+    setSearchText(searchStr);
+  }, [searchStr, setSearchText]);
+
   return (
     <section
       className={cn(
@@ -91,7 +92,7 @@ export default function SearchingView({
         ></RAGFlowLogo>
         <div
           className={cn(
-            ' rounded-lg text-primary text-xl sticky flex flex-col justify-center w-2/3 transform scale-100 ml-16 h-full',
+            ' rounded-lg text-primary text-xl sticky flex flex-col justify-center  transform scale-100 ml-16 h-full flex-1 3xl:w-2/3 3xl:flex-none',
           )}
         >
           <div className={cn('flex flex-col justify-start items-start w-full')}>
@@ -101,14 +102,14 @@ export default function SearchingView({
                 className={cn(
                   'w-full rounded-full py-6 pl-4 !pr-[8rem] text-primary text-lg bg-bg-base',
                 )}
-                value={searchtext}
+                value={searchText}
                 onChange={(e) => {
-                  setSearchtext(e.target.value);
+                  setSearchText(e.target.value);
                 }}
                 disabled={sendingLoading}
                 onKeyUp={(e) => {
                   if (e.key === 'Enter') {
-                    handleSearch(searchtext);
+                    handleSearch(searchText);
                   }
                 }}
               />
@@ -117,7 +118,7 @@ export default function SearchingView({
                   className="text-text-secondary cursor-pointer opacity-80"
                   size={14}
                   onClick={() => {
-                    setSearchtext('');
+                    setSearchText('');
                     handleClickRelatedQuestion('');
                   }}
                 />
@@ -129,7 +130,7 @@ export default function SearchingView({
                     if (sendingLoading) {
                       stopOutputMessage();
                     } else {
-                      handleSearch(searchtext);
+                      handleSearch(searchText);
                     }
                   }}
                 >
@@ -276,36 +277,40 @@ export default function SearchingView({
               ></RAGFlowPagination>
             </div>
           )}
+
+          {!mindMapVisible &&
+            !isFirstRender &&
+            !isSearchStrEmpty &&
+            !isEmpty(searchData.search_config.kb_ids) &&
+            searchData.search_config.query_mindmap && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    onClick={showMindMapModal}
+                    variant={'outline'}
+                    className="absolute top-16 translate-y-2 right-10 z-30 rounded-full size-6"
+                  >
+                    <ListTree />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-fit">
+                  {t('chunk.mind')}
+                </PopoverContent>
+              </Popover>
+            )}
         </div>
         {mindMapVisible && (
           <div className="flex-1 h-[88dvh] z-30 ml-32 mt-5">
-            <MindMapDrawer
+            <MindMapSheet
               visible={mindMapVisible}
               hideModal={hideMindMapModal}
               data={mindMap}
               loading={mindMapLoading}
-            ></MindMapDrawer>
+            ></MindMapSheet>
           </div>
         )}
       </div>
-      {!mindMapVisible &&
-        !isFirstRender &&
-        !isSearchStrEmpty &&
-        !isEmpty(searchData.search_config.kb_ids) &&
-        searchData.search_config.query_mindmap && (
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button
-                onClick={showMindMapModal}
-                variant={'outline'}
-                className="absolute top-28 right-3 z-30 rounded-full size-6"
-              >
-                <ListTree />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-fit">{t('chunk.mind')}</PopoverContent>
-          </Popover>
-        )}
+
       {visible && (
         <PdfDrawer
           visible={visible}