From 57f23e0808a46e758a0be3b956f8d20830026b3d Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:04:35 +0800
Subject: [PATCH] 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/locales/en.ts                       |  2 ++
 web/src/locales/zh-traditional.ts           |  2 ++
 web/src/locales/zh.ts                       |  2 ++
 web/src/pages/chat/chat-id-modal/index.tsx  | 32 ++++++++++--------
 web/src/pages/flow/flow-id-modal/index.less |  3 ++
 web/src/pages/flow/flow-id-modal/index.tsx  | 36 +++++++++++++++++++++
 web/src/pages/flow/header/index.tsx         |  8 ++++-
 7 files changed, 70 insertions(+), 15 deletions(-)
 create mode 100644 web/src/pages/flow/flow-id-modal/index.less
 create mode 100644 web/src/pages/flow/flow-id-modal/index.tsx

diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 56309b1ec..265c9b1fa 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -447,6 +447,7 @@ The above is the content you need to summarize.`,
       multiTurn: 'Multi-turn optimization',
       multiTurnTip:
         'In multi-round conversations, the query to the knowledge base is optimized. The large model will be called to consume additional tokens.',
+      howUseId: 'How to use chat ID?',
     },
     setting: {
       profile: 'Profile',
@@ -1031,6 +1032,7 @@ The above is the content you need to summarize.`,
       reference: 'Reference',
       input: 'Input',
       parameter: 'Parameter',
+      howUseId: 'How to use agent ID?',
     },
     footer: {
       profile: 'All rights reserved @ React',
diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts
index 6c3f9f252..a3f45a098 100644
--- a/web/src/locales/zh-traditional.ts
+++ b/web/src/locales/zh-traditional.ts
@@ -416,6 +416,7 @@ export default {
       multiTurn: '多輪對話優化',
       multiTurnTip:
         '在多輪對話的中，對去知識庫查詢的問題進行最佳化。會呼叫大模型額外消耗token。',
+      howUseId: '如何使用聊天ID？',
     },
     setting: {
       profile: '概述',
@@ -979,6 +980,7 @@ export default {
       reference: '引用',
       input: '輸入',
       parameter: '參數',
+      howUseId: '如何使用Agent ID？',
     },
     footer: {
       profile: '“保留所有權利 @ react”',
diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts
index 51db5ed4d..f5ab425bf 100644
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@@ -433,6 +433,7 @@ export default {
       multiTurn: '多轮对话优化',
       multiTurnTip:
         '在多轮对话的中，对去知识库查询的问题进行优化。会调用大模型额外消耗token。',
+      howUseId: '如何使用聊天ID？',
     },
     setting: {
       profile: '概要',
@@ -999,6 +1000,7 @@ export default {
       reference: '引用',
       input: '输入',
       parameter: '参数',
+      howUseId: '如何使用Agent ID？',
     },
     footer: {
       profile: 'All rights reserved @ React',
diff --git a/web/src/pages/chat/chat-id-modal/index.tsx b/web/src/pages/chat/chat-id-modal/index.tsx
index 9ea92a180..2439633ec 100644
--- a/web/src/pages/chat/chat-id-modal/index.tsx
+++ b/web/src/pages/chat/chat-id-modal/index.tsx
@@ -4,7 +4,7 @@ import { Modal, Typography } from 'antd';
 
 import styles from './index.less';
 
-const { Paragraph } = Typography;
+const { Paragraph, Link } = Typography;
 
 const ChatIdModal = ({
   visible,
@@ -14,20 +14,24 @@ const ChatIdModal = ({
   const { t } = useTranslate('chat');
 
   return (
-    <>
-      <Modal
-        title={t('overview')}
-        open={visible}
-        onCancel={hideModal}
-        cancelButtonProps={{ style: { display: 'none' } }}
-        onOk={hideModal}
-        okText={t('close', { keyPrefix: 'common' })}
+    <Modal
+      title={t('overview')}
+      open={visible}
+      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-session"
+        target="_blank"
       >
-        <Paragraph copyable={{ text: id }} className={styles.id}>
-          {id}
-        </Paragraph>
-      </Modal>
-    </>
+        {t('howUseId')}
+      </Link>
+    </Modal>
   );
 };
 
diff --git a/web/src/pages/flow/flow-id-modal/index.less b/web/src/pages/flow/flow-id-modal/index.less
new file mode 100644
index 000000000..c95b34c95
--- /dev/null
+++ b/web/src/pages/flow/flow-id-modal/index.less
@@ -0,0 +1,3 @@
+.id {
+  .linkText();
+}
diff --git a/web/src/pages/flow/flow-id-modal/index.tsx b/web/src/pages/flow/flow-id-modal/index.tsx
new file mode 100644
index 000000000..fd9dbea47
--- /dev/null
+++ b/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;
diff --git a/web/src/pages/flow/header/index.tsx b/web/src/pages/flow/header/index.tsx
index 38f16b785..e03b03a77 100644
--- a/web/src/pages/flow/header/index.tsx
+++ b/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>}
     </>
   );
 };