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'}

web/src/pages/next-chats/share/index.tsx

@@ -3,6 +3,7 @@ import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/next-message-item';
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
+import { useSwitchToDarkThemeOnMount } from '@/components/theme-provider';
 import { MessageType } from '@/constants/chat';
 import {
   useFetchExternalAgentInputs,
@@ -91,6 +92,8 @@ const ChatContainer = () => {
     }
   }, [data, showParameterDialog]);
 
+  useSwitchToDarkThemeOnMount();
+
   if (!conversationId) {
     return <div>empty</div>;
   }

web/src/pages/profile-setting/mcp/index.tsx

@@ -32,7 +32,7 @@ export default function McpServer() {
   );
 
   return (
-    <section className="p-4">
+    <section className="p-4 w-full">
       <div className="text-text-title text-2xl">MCP Servers</div>
       <section className="flex items-center justify-between pb-5">
         <div className="text-text-sub-title">

web/src/pages/profile-setting/sidebar/index.tsx

@@ -2,6 +2,7 @@ import { useIsDarkTheme, useTheme } from '@/components/theme-provider';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
+import { ThemeEnum } from '@/constants/common';
 import { useLogout } from '@/hooks/login-hooks';
 import { useSecondPathName } from '@/hooks/route-hook';
 import { cn } from '@/lib/utils';
@@ -60,7 +61,7 @@ export function SideBar() {
 
   const handleThemeChange = useCallback(
     (checked: boolean) => {
-      setTheme(checked ? 'dark' : 'light');
+      setTheme(checked ? ThemeEnum.Dark : ThemeEnum.Light);
     },
     [setTheme],
   );