feat: Disable automatic saving of agent during running agent #3349 (#3350)

### What problem does this PR solve?

feat: Disable automatic saving of agent during running agent #3349

### Type of change


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

web/src/pages/flow/chat/drawer.tsx

@@ -1,6 +1,7 @@
 import { useFetchFlow } from '@/hooks/flow-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { Drawer } from 'antd';
+import { getDrawerWidth } from '../utils';
 import FlowChatBox from './box';
 
 const ChatDrawer = ({ visible, hideModal }: IModalProps<any>) => {
@@ -13,7 +14,7 @@ const ChatDrawer = ({ visible, hideModal }: IModalProps<any>) => {
       onClose={hideModal}
       open={visible}
       getContainer={false}
-      width={window.innerWidth > 1278 ? '40%' : 470}
+      width={getDrawerWidth()}
       mask={false}
       // zIndex={10000}
     >

web/src/pages/flow/flow-drawer/index.tsx

@@ -39,6 +39,7 @@ import OperatorIcon from '../operator-icon';
 
 import { CloseOutlined } from '@ant-design/icons';
 import { lowerFirst } from 'lodash';
+import { getDrawerWidth } from '../utils';
 import styles from './index.less';
 
 interface IProps {
@@ -135,7 +136,7 @@ const FlowDrawer = ({
       open={visible}
       getContainer={false}
       mask={false}
-      width={500}
+      width={getDrawerWidth()}
       closeIcon={null}
     >
       <section className={styles.formWrapper}>

web/src/pages/flow/form/generate-form/index.tsx

@@ -28,7 +28,7 @@ const GenerateForm = ({ onValuesChange, form, node }: IOperatorForm) => {
       </Form.Item>
       <Form.Item
         name={['prompt']}
-        label={t('prompt', { keyPrefix: 'knowledgeConfiguration' })}
+        label="System"
         initialValue={t('promptText')}
         tooltip={t('promptTip', { keyPrefix: 'knowledgeConfiguration' })}
         rules={[

web/src/pages/flow/header/index.tsx

@@ -14,9 +14,10 @@ import styles from './index.less';
 
 interface IProps {
   showChatDrawer(): void;
+  chatDrawerVisible: boolean;
 }
 
-const FlowHeader = ({ showChatDrawer }: IProps) => {
+const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
   const { saveGraph } = useSaveGraph();
   const handleRun = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
   const { data } = useFetchFlow();
@@ -28,7 +29,7 @@ const FlowHeader = ({ showChatDrawer }: IProps) => {
   } = useSetModalState();
   const { visible, hideModal, showModal } = useSetModalState();
   const { id } = useParams();
-  const time = useWatchAgentChange();
+  const time = useWatchAgentChange(chatDrawerVisible);
 
   return (
     <>

web/src/pages/flow/hooks.ts

@@ -681,7 +681,7 @@ export const useCopyPaste = () => {
   }, [onPasteCapture]);
 };
 
-export const useWatchAgentChange = () => {
+export const useWatchAgentChange = (chatDrawerVisible: boolean) => {
   const [time, setTime] = useState<string>();
   const nodes = useGraphStore((state) => state.nodes);
   const edges = useGraphStore((state) => state.edges);
@@ -697,9 +697,11 @@ export const useWatchAgentChange = () => {
   }, [flowDetail, setSaveTime]);
 
   const saveAgent = useCallback(async () => {
-    const ret = await saveGraph();
-    setSaveTime(ret.data.update_time);
-  }, [saveGraph, setSaveTime]);
+    if (!chatDrawerVisible) {
+      const ret = await saveGraph();
+      setSaveTime(ret.data.update_time);
+    }
+  }, [chatDrawerVisible, saveGraph, setSaveTime]);
 
   useDebounceEffect(
     () => {

web/src/pages/flow/index.tsx

@@ -25,7 +25,10 @@ function RagFlow() {
       <ReactFlowProvider>
         <Sider setCollapsed={setCollapsed} collapsed={collapsed}></Sider>
         <Layout>
-          <FlowHeader showChatDrawer={showChatDrawer}></FlowHeader>
+          <FlowHeader
+            showChatDrawer={showChatDrawer}
+            chatDrawerVisible={chatDrawerVisible}
+          ></FlowHeader>
           <Content style={{ margin: 0 }}>
             <FlowCanvas
               chatDrawerVisible={chatDrawerVisible}

web/src/pages/flow/utils.ts

@@ -317,3 +317,7 @@ export const duplicateNodeForm = (nodeData?: NodeData) => {
     form,
   };
 };
+
+export const getDrawerWidth = () => {
+  return window.innerWidth > 1278 ? '40%' : 470;
+};