Feat: Replace the link of the old version of the agent module #3221 (#9130)

### What problem does this PR solve?
Feat: Automatically save agent canvas content
Feat: Replace the link of the old version of the agent module #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/hooks/use-save-graph.ts

@@ -4,16 +4,16 @@ import {
   useSetAgent,
 } from '@/hooks/use-agent-request';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { formatDate } from '@/utils/date';
 import { useDebounceEffect } from 'ahooks';
-import dayjs from 'dayjs';
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'umi';
 import useGraphStore from '../store';
 import { useBuildDslData } from './use-build-dsl';
 
-export const useSaveGraph = () => {
+export const useSaveGraph = (showMessage: boolean = true) => {
   const { data } = useFetchAgent();
-  const { setAgent, loading } = useSetAgent();
+  const { setAgent, loading } = useSetAgent(showMessage);
   const { id } = useParams();
   const { buildDslData } = useBuildDslData();
 
@@ -57,11 +57,11 @@ export const useWatchAgentChange = (chatDrawerVisible: boolean) => {
   const [time, setTime] = useState<string>();
   const nodes = useGraphStore((state) => state.nodes);
   const edges = useGraphStore((state) => state.edges);
-  const { saveGraph } = useSaveGraph();
+  const { saveGraph } = useSaveGraph(false);
   const { data: flowDetail } = useFetchAgent();
 
   const setSaveTime = useCallback((updateTime: number) => {
-    setTime(dayjs(updateTime).format('YYYY-MM-DD HH:mm:ss'));
+    setTime(formatDate(updateTime));
   }, []);
 
   useEffect(() => {
@@ -77,7 +77,7 @@ export const useWatchAgentChange = (chatDrawerVisible: boolean) => {
 
   useDebounceEffect(
     () => {
-      // saveAgent();
+      saveAgent();
     },
     [nodes, edges],
     {

web/src/pages/agent/index.tsx

@@ -1,4 +1,5 @@
 import { PageHeader } from '@/components/page-header';
+import { useSwitchToDarkThemeOnMount } from '@/components/theme-provider';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -40,6 +41,7 @@ import { useGetBeginNodeDataInputs } from './hooks/use-get-begin-query';
 import {
   useSaveGraph,
   useSaveGraphBeforeOpeningDebugDrawer,
+  useWatchAgentChange,
 } from './hooks/use-save-graph';
 import { useShowEmbedModal } from './hooks/use-show-dialog';
 import { UploadAgentDialog } from './upload-agent-dialog';
@@ -94,23 +96,31 @@ export default function Agent() {
   const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
     useShowEmbedModal();
   const { navigateToAgentLogs } = useNavigatePage();
+  const time = useWatchAgentChange(chatDrawerVisible);
+
+  useSwitchToDarkThemeOnMount();
 
   return (
     <section className="h-full">
       <PageHeader>
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink onClick={navigateToAgentList}>
-                Agent
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{agentDetail.title}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
+        <section>
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink onClick={navigateToAgentList}>
+                  Agent
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>{agentDetail.title}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <div className="text-xs text-text-sub-title translate-y-3">
+            {t('flow.autosaved')} {time}
+          </div>
+        </section>
         <div className="flex items-center gap-5">
           <ButtonLoading
             variant={'secondary'}