feat: Add agent interface document link to agent page #3189 (#3190)

### What problem does this PR solve?

feat: Add agent interface document link to agent page #3189

### Type of change

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

web/src/pages/flow/flow-id-modal/index.less

@@ -0,0 +1,3 @@
+.id {
+  .linkText();
+}

web/src/pages/flow/flow-id-modal/index.tsx

@@ -0,0 +1,36 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { Modal, Typography } from 'antd';
+
+import { useParams } from 'umi';
+import styles from './index.less';
+
+const { Paragraph, Link } = Typography;
+
+const FlowIdModal = ({ hideModal }: IModalProps<any>) => {
+  const { t } = useTranslate('flow');
+  const { id } = useParams();
+
+  return (
+    <Modal
+      title={'Agent ID'}
+      open
+      onCancel={hideModal}
+      cancelButtonProps={{ style: { display: 'none' } }}
+      onOk={hideModal}
+      okText={t('close', { keyPrefix: 'common' })}
+    >
+      <Paragraph copyable={{ text: id }} className={styles.id}>
+        {id}
+      </Paragraph>
+      <Link
+        href="https://ragflow.io/docs/dev/http_api_reference#create-agent-session"
+        target="_blank"
+      >
+        {t('howUseId')}
+      </Link>
+    </Modal>
+  );
+};
+
+export default FlowIdModal;

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

@@ -4,6 +4,7 @@ import { useFetchFlow } from '@/hooks/flow-hooks';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import { Button, Flex, Space } from 'antd';
 import { Link, useParams } from 'umi';
+import FlowIdModal from '../flow-id-modal';
 import { useSaveGraph, useSaveGraphBeforeOpeningDebugDrawer } from '../hooks';
 import styles from './index.less';
 
@@ -21,6 +22,7 @@ const FlowHeader = ({ showChatDrawer }: IProps) => {
     hideModal: hideOverviewModal,
     showModal: showOverviewModal,
   } = useSetModalState();
+  const { visible, hideModal, showModal } = useSetModalState();
   const { id } = useParams();
 
   return (
@@ -44,8 +46,11 @@ const FlowHeader = ({ showChatDrawer }: IProps) => {
           <Button type="primary" onClick={saveGraph}>
             <b>{t('save')}</b>
           </Button>
-          <Button type="primary" onClick={showOverviewModal} disabled>
+          {/* <Button type="primary" onClick={showOverviewModal} disabled>
             <b>{t('publish')}</b>
+          </Button> */}
+          <Button type="primary" onClick={showModal}>
+            <b>Agent ID</b>
           </Button>
         </Space>
       </Flex>
@@ -57,6 +62,7 @@ const FlowHeader = ({ showChatDrawer }: IProps) => {
           idKey="canvasId"
         ></ChatOverviewModal>
       )}
+      {visible && <FlowIdModal hideModal={hideModal}></FlowIdModal>}
     </>
   );
 };