Fix: metadata data synchronization issues; add memory tab in home page (#12368)

### What problem does this PR solve?

fix: metadata data synchronization issues; add memory tab in home page

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/dataset/dataset-setting/configuration/common-item.tsx

@@ -25,13 +25,14 @@ import { useComposeLlmOptionsByModelTypes } from '@/hooks/use-llm-request';
 import { cn } from '@/lib/utils';
 import { t } from 'i18next';
 import { Settings } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import {
   ControllerRenderProps,
   FieldValues,
   useFormContext,
 } from 'react-hook-form';
-import { useLocation } from 'umi';
+import { history, useLocation } from 'umi';
+import { DataSetContext } from '..';
 import {
   MetadataType,
   useManageMetadata,
@@ -371,6 +372,7 @@ export function AutoMetadata({
   // get metadata field
   const location = useLocation();
   const form = useFormContext();
+  const datasetContext = useContext(DataSetContext);
   const {
     manageMetadataVisible,
     showManageMetadataModal,
@@ -394,13 +396,14 @@ export function AutoMetadata({
     const locationState = location.state as
       | { openMetadata?: boolean }
       | undefined;
-    if (locationState?.openMetadata) {
+    if (locationState?.openMetadata && !datasetContext?.loading) {
       setTimeout(() => {
         handleClickOpenMetadata();
-      }, 100);
+      }, 0);
       locationState.openMetadata = false;
+      history.replace({ ...location }, locationState);
     }
-  }, [location, handleClickOpenMetadata]);
+  }, [location, handleClickOpenMetadata, datasetContext]);
 
   const autoMetadataField: FormFieldConfig = {
     name: 'parser_config.enable_metadata',

web/src/pages/dataset/dataset-setting/hooks.ts

@@ -37,7 +37,8 @@ export function useHasParsedDocument(isEdit?: boolean) {
 export const useFetchKnowledgeConfigurationOnMount = (
   form: UseFormReturn<z.infer<typeof formSchema>, any, undefined>,
 ) => {
-  const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
+  const { data: knowledgeDetails, loading } =
+    useFetchKnowledgeBaseConfiguration();
 
   useEffect(() => {
     const parser_config = {
@@ -71,7 +72,7 @@ export const useFetchKnowledgeConfigurationOnMount = (
     form.reset(formValues);
   }, [form, knowledgeDetails]);
 
-  return knowledgeDetails;
+  return { knowledgeDetails, loading };
 };
 
 export const useSelectKnowledgeDetailsLoading = () =>

web/src/pages/dataset/dataset-setting/index.tsx

@@ -7,11 +7,11 @@ import { Form } from '@/components/ui/form';
 import { FormLayout } from '@/constants/form';
 import { DocumentParserType } from '@/constants/knowledge';
 import { PermissionRole } from '@/constants/permission';
-import { IConnector } from '@/interfaces/database/knowledge';
+import { IConnector, IKnowledge } from '@/interfaces/database/knowledge';
 import { useDataSourceInfo } from '@/pages/user-setting/data-source/constant';
 import { IDataSourceBase } from '@/pages/user-setting/data-source/interface';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect, useState } from 'react';
+import { createContext, useEffect, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
@@ -35,6 +35,10 @@ const enum DocumentType {
   DeepDOC = 'DeepDOC',
   PlainText = 'Plain Text',
 }
+export const DataSetContext = createContext<{
+  loading: boolean;
+  knowledgeDetails: IKnowledge;
+}>({ loading: false, knowledgeDetails: {} as IKnowledge });
 
 const initialEntityTypes = [
   'organization',
@@ -102,7 +106,8 @@ export default function DatasetSettings() {
     },
   });
   const { dataSourceInfo } = useDataSourceInfo();
-  const knowledgeDetails = useFetchKnowledgeConfigurationOnMount(form);
+  const { knowledgeDetails, loading: datasetSettingLoading } =
+    useFetchKnowledgeConfigurationOnMount(form);
   // const [pipelineData, setPipelineData] = useState<IDataPipelineNodeProps>();
   const [sourceData, setSourceData] = useState<IDataSourceNodeProps[]>();
   const [graphRagGenerateData, setGraphRagGenerateData] =
@@ -254,81 +259,90 @@ export default function DatasetSettings() {
         description={t('knowledgeConfiguration.titleDescription')}
       ></TopTitle>
       <div className="flex gap-14 flex-1 min-h-0">
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 ">
-            <div className="w-[768px] h-[calc(100vh-240px)] pr-1 overflow-y-auto scrollbar-auto">
-              <MainContainer className="text-text-secondary">
-                <div className="text-base font-medium text-text-primary">
-                  {t('knowledgeConfiguration.baseInfo')}
-                </div>
-                <GeneralForm></GeneralForm>
+        <DataSetContext.Provider
+          value={{
+            loading: datasetSettingLoading,
+            knowledgeDetails: knowledgeDetails,
+          }}
+        >
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 ">
+              <div className="w-[768px] h-[calc(100vh-240px)] pr-1 overflow-y-auto scrollbar-auto">
+                <MainContainer className="text-text-secondary">
+                  <div className="text-base font-medium text-text-primary">
+                    {t('knowledgeConfiguration.baseInfo')}
+                  </div>
+                  <GeneralForm></GeneralForm>
 
-                <Divider />
-                <div className="text-base font-medium text-text-primary">
-                  {t('knowledgeConfiguration.dataPipeline')}
-                </div>
-                <ParseTypeItem line={1} />
-                {parseType === 1 && (
-                  <ChunkMethodItem line={1}></ChunkMethodItem>
-                )}
-                {parseType === 2 && (
-                  <DataFlowSelect
-                    isMult={false}
-                    showToDataPipeline={true}
-                    formFieldName="pipeline_id"
-                    layout={FormLayout.Horizontal}
-                  />
-                )}
+                  <Divider />
+                  <div className="text-base font-medium text-text-primary">
+                    {t('knowledgeConfiguration.dataPipeline')}
+                  </div>
+                  <ParseTypeItem line={1} />
+                  {parseType === 1 && (
+                    <ChunkMethodItem line={1}></ChunkMethodItem>
+                  )}
+                  {parseType === 2 && (
+                    <DataFlowSelect
+                      isMult={false}
+                      showToDataPipeline={true}
+                      formFieldName="pipeline_id"
+                      layout={FormLayout.Horizontal}
+                    />
+                  )}
 
-                {/* <Divider /> */}
-                {parseType === 1 && <ChunkMethodForm />}
+                  {/* <Divider /> */}
+                  {parseType === 1 && <ChunkMethodForm />}
 
-                {/* <LinkDataPipeline
+                  {/* <LinkDataPipeline
                   data={pipelineData}
                   handleLinkOrEditSubmit={handleLinkOrEditSubmit}
                 /> */}
-                <Divider />
-                <LinkDataSource
-                  data={sourceData}
-                  handleLinkOrEditSubmit={handleLinkOrEditSubmit}
-                  unbindFunc={unbindFunc}
-                  handleAutoParse={handleAutoParse}
-                />
-                <Divider />
-                <div className="text-base font-medium text-text-primary">
-                  {t('knowledgeConfiguration.globalIndex')}
-                </div>
-                <GraphRagItems
-                  className="border-none p-0"
-                  data={graphRagGenerateData as IGenerateLogButtonProps}
-                  onDelete={() =>
-                    handleDeletePipelineTask(GenerateType.KnowledgeGraph)
-                  }
-                ></GraphRagItems>
-                <Divider />
-                <RaptorFormFields
-                  data={raptorGenerateData as IGenerateLogButtonProps}
-                  onDelete={() => handleDeletePipelineTask(GenerateType.Raptor)}
-                ></RaptorFormFields>
-              </MainContainer>
-            </div>
-            <div className="text-right items-center flex justify-end gap-3 w-[768px]">
-              <Button
-                type="reset"
-                className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
-                onClick={() => {
-                  form.reset();
-                }}
-              >
-                {t('knowledgeConfiguration.cancel')}
-              </Button>
-              <SavingButton></SavingButton>
-            </div>
-          </form>
-        </Form>
-        <div className="flex-1">
-          {parseType === 1 && <ChunkMethodLearnMore parserId={selectedTag} />}
-        </div>
+                  <Divider />
+                  <LinkDataSource
+                    data={sourceData}
+                    handleLinkOrEditSubmit={handleLinkOrEditSubmit}
+                    unbindFunc={unbindFunc}
+                    handleAutoParse={handleAutoParse}
+                  />
+                  <Divider />
+                  <div className="text-base font-medium text-text-primary">
+                    {t('knowledgeConfiguration.globalIndex')}
+                  </div>
+                  <GraphRagItems
+                    className="border-none p-0"
+                    data={graphRagGenerateData as IGenerateLogButtonProps}
+                    onDelete={() =>
+                      handleDeletePipelineTask(GenerateType.KnowledgeGraph)
+                    }
+                  ></GraphRagItems>
+                  <Divider />
+                  <RaptorFormFields
+                    data={raptorGenerateData as IGenerateLogButtonProps}
+                    onDelete={() =>
+                      handleDeletePipelineTask(GenerateType.Raptor)
+                    }
+                  ></RaptorFormFields>
+                </MainContainer>
+              </div>
+              <div className="text-right items-center flex justify-end gap-3 w-[768px]">
+                <Button
+                  type="reset"
+                  className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
+                  onClick={() => {
+                    form.reset();
+                  }}
+                >
+                  {t('knowledgeConfiguration.cancel')}
+                </Button>
+                <SavingButton></SavingButton>
+              </div>
+            </form>
+          </Form>
+          <div className="flex-1">
+            {parseType === 1 && <ChunkMethodLearnMore parserId={selectedTag} />}
+          </div>
+        </DataSetContext.Provider>
       </div>
     </section>
   );