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>
   );

web/src/pages/home/applications.tsx

@@ -10,18 +10,21 @@ import { useNavigate } from 'umi';
 import { Agents } from './agent-list';
 import { SeeAllAppCard } from './application-card';
 import { ChatList } from './chat-list';
+import { MemoryList } from './memory-list';
 import { SearchList } from './search-list';
 
 const IconMap = {
   [Routes.Chats]: 'chats',
   [Routes.Searches]: 'searches',
   [Routes.Agents]: 'agents',
+  [Routes.Memories]: 'memory',
 };
 
 const EmptyTypeMap = {
   [Routes.Chats]: EmptyCardType.Chat,
   [Routes.Searches]: EmptyCardType.Search,
   [Routes.Agents]: EmptyCardType.Agent,
+  [Routes.Memories]: EmptyCardType.Memory,
 };
 
 export function Applications() {
@@ -47,6 +50,7 @@ export function Applications() {
       { value: Routes.Chats, label: t('chat.chatApps') },
       { value: Routes.Searches, label: t('search.searchApps') },
       { value: Routes.Agents, label: t('header.flow') },
+      { value: Routes.Memories, label: t('memories.memory') },
     ],
     [t],
   );
@@ -96,6 +100,12 @@ export function Applications() {
             setLoading={(loading: boolean) => setLoading(loading)}
           ></SearchList>
         )}
+        {val === Routes.Memories && (
+          <MemoryList
+            setListLength={(length: number) => setListLength(length)}
+            setLoading={(loading: boolean) => setLoading(loading)}
+          ></MemoryList>
+        )}
         {listLength > 0 && (
           <SeeAllAppCard
             click={() => handleNavigate({ isCreate: false })}

web/src/pages/home/memory-list.tsx

@@ -0,0 +1,79 @@
+import { HomeCard } from '@/components/home-card';
+import { MoreButton } from '@/components/more-button';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { useEffect } from 'react';
+import { AddOrEditModal } from '../memories/add-or-edit-modal';
+import { useFetchMemoryList, useRenameMemory } from '../memories/hooks';
+import { ICreateMemoryProps } from '../memories/interface';
+import { MemoryDropdown } from '../memories/memory-dropdown';
+
+export function MemoryList({
+  setListLength,
+  setLoading,
+}: {
+  setListLength: (length: number) => void;
+  setLoading?: (loading: boolean) => void;
+}) {
+  const { data, refetch: refetchList, isLoading } = useFetchMemoryList();
+  const { navigateToMemory } = useNavigatePage();
+  // const {
+  //   openCreateModal,
+  //   showSearchRenameModal,
+  //   hideSearchRenameModal,
+  //   searchRenameLoading,
+  //   onSearchRenameOk,
+  //   initialSearchName,
+  // } = useRenameSearch();
+  const {
+    openCreateModal,
+    showMemoryRenameModal,
+    hideMemoryModal,
+    searchRenameLoading,
+    onMemoryRenameOk,
+    initialMemory,
+  } = useRenameMemory();
+  const onMemoryConfirm = (data: ICreateMemoryProps) => {
+    onMemoryRenameOk(data, () => {
+      refetchList();
+    });
+  };
+
+  useEffect(() => {
+    setListLength(data?.data?.memory_list?.length || 0);
+    setLoading?.(isLoading || false);
+  }, [data, setListLength, isLoading, setLoading]);
+  return (
+    <>
+      {data?.data.memory_list.slice(0, 10).map((x) => (
+        <HomeCard
+          key={x.id}
+          data={{
+            name: x?.name,
+            avatar: x?.avatar,
+            description: x?.description,
+            update_time: x?.create_time,
+          }}
+          onClick={navigateToMemory(x.id)}
+          moreDropdown={
+            <MemoryDropdown
+              memory={x}
+              showMemoryRenameModal={showMemoryRenameModal}
+            >
+              <MoreButton></MoreButton>
+            </MemoryDropdown>
+          }
+        ></HomeCard>
+      ))}
+      {openCreateModal && (
+        <AddOrEditModal
+          initialMemory={initialMemory}
+          isCreate={false}
+          open={openCreateModal}
+          loading={searchRenameLoading}
+          onClose={hideMemoryModal}
+          onSubmit={onMemoryConfirm}
+        />
+      )}
+    </>
+  );
+}