Feat: Display the data flow log on the far right. #9869 (#10214)

### What problem does this PR solve?

Feat: Display the data flow log on the far right. #9869
### Type of change


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

web/src/pages/data-flow/canvas/index.tsx

@@ -153,7 +153,11 @@ function DataFlowCanvas({ drawerVisible, hideDrawer }: IProps) {
     hideModal: hideLogSheet,
   } = useSetModalState();
 
-  const { run, loading: running, messageId } = useRunDataflow(showLogSheet!);
+  const {
+    run,
+    loading: running,
+    messageId,
+  } = useRunDataflow(showLogSheet!, hideRunOrChatDrawer);
 
   const onConnect = (connection: Connection) => {
     originalOnConnect(connection);

web/src/pages/data-flow/hooks/use-download-output.ts

@@ -1,3 +1,4 @@
+import { useFetchAgent } from '@/hooks/use-agent-request';
 import { ITraceData } from '@/interfaces/database/agent';
 import { downloadJsonFile } from '@/utils/file-util';
 import { get, isEmpty } from 'lodash';
@@ -22,12 +23,14 @@ export function isEndOutputEmpty(list?: ITraceData[]) {
   return isEmpty(findEndOutput(list));
 }
 export function useDownloadOutput(data?: ITraceData[]) {
+  const { data: agent } = useFetchAgent();
+
   const handleDownloadJson = useCallback(() => {
     const output = findEndOutput(data);
     if (!isEndOutputEmpty(data)) {
-      downloadJsonFile(output, `output.json`);
+      downloadJsonFile(output, `${agent.title}.json`);
     }
-  }, [data]);
+  }, [agent.title, data]);
 
   return {
     handleDownloadJson,

web/src/pages/data-flow/hooks/use-run-dataflow.ts

@@ -5,7 +5,10 @@ import { useCallback, useState } from 'react';
 import { useParams } from 'umi';
 import { useSaveGraphBeforeOpeningDebugDrawer } from './use-save-graph';
 
-export function useRunDataflow(showLogSheet: () => void) {
+export function useRunDataflow(
+  showLogSheet: () => void,
+  hideRunOrChatDrawer: () => void,
+) {
   const { send } = useSendMessageBySSE(api.runCanvas);
   const { id } = useParams();
   const [messageId, setMessageId] = useState();
@@ -26,6 +29,7 @@ export function useRunDataflow(showLogSheet: () => void) {
 
       if (res && res?.response.status === 200 && get(res, 'data.code') === 0) {
         // fetch canvas
+        hideRunOrChatDrawer();
 
         const msgId = get(res, 'data.data.message_id');
         if (msgId) {
@@ -35,7 +39,7 @@ export function useRunDataflow(showLogSheet: () => void) {
         return msgId;
       }
     },
-    [id, saveGraph, send],
+    [hideRunOrChatDrawer, id, saveGraph, send],
   );
 
   return { run, loading: loading, messageId };

web/src/pages/data-flow/log-sheet/index.tsx

@@ -10,6 +10,7 @@ import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
 import { NotebookText, SquareArrowOutUpRight } from 'lucide-react';
 import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import 'react18-json-view/src/style.css';
 import {
   isEndOutputEmpty,
@@ -20,6 +21,7 @@ import { DataflowTimeline } from './dataflow-timeline';
 type LogSheetProps = IModalProps<any> & { messageId?: string };
 
 export function LogSheet({ hideModal, messageId }: LogSheetProps) {
+  const { t } = useTranslation();
   const { setMessageId, data } = useFetchMessageTrace(false);
 
   const { handleDownloadJson } = useDownloadOutput(data);
@@ -32,7 +34,7 @@ export function LogSheet({ hideModal, messageId }: LogSheetProps) {
 
   return (
     <Sheet open onOpenChange={hideModal} modal={false}>
-      <SheetContent className={cn('top-20 right-[620px]')}>
+      <SheetContent className={cn('top-20')}>
         <SheetHeader>
           <SheetTitle className="flex items-center gap-1">
             <NotebookText className="size-4" />
@@ -46,7 +48,7 @@ export function LogSheet({ hideModal, messageId }: LogSheetProps) {
             className="w-full mt-8"
           >
             <SquareArrowOutUpRight />
-            Export JSON
+            {t('dataflow.exportJson')}
           </Button>
         </section>
       </SheetContent>