feat: API access key management #2846 (#2865)

### What problem does this PR solve?

feat: API access key management #2846
feat: Render markdown file with remark-loader #2846

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

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

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

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

@@ -0,0 +1,34 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { Modal, Typography } from 'antd';
+
+import styles from './index.less';
+
+const { Paragraph } = Typography;
+
+const ChatIdModal = ({
+  visible,
+  hideModal,
+  id,
+}: IModalProps<any> & { id: string; name?: string; idKey: string }) => {
+  const { t } = useTranslate('chat');
+
+  return (
+    <>
+      <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>
+      </Modal>
+    </>
+  );
+};
+
+export default ChatIdModal;

web/src/pages/chat/index.tsx

@@ -1,6 +1,6 @@
 import { ReactComponent as ChatAppCube } from '@/assets/svg/chat-app-cube.svg';
 import RenameModal from '@/components/rename-modal';
-import { CloudOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined, KeyOutlined } from '@ant-design/icons';
 import {
   Avatar,
   Button,
@@ -29,7 +29,6 @@ import {
   useSelectDerivedConversationList,
 } from './hooks';
 
-import ChatOverviewModal from '@/components/api-service/chat-overview-modal';
 import SvgIcon from '@/components/svg-icon';
 import {
   useClickConversationCard,
@@ -40,6 +39,7 @@ import {
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { useSetSelectedRecord } from '@/hooks/logic-hooks';
 import { IDialog } from '@/interfaces/database/chat';
+import ChatIdModal from './chat-id-modal';
 import styles from './index.less';
 
 const { Text } = Typography;
@@ -190,7 +190,7 @@ const Chat = () => {
         onClick: handleShowOverviewModal(dialog),
         label: (
           <Space>
-            <CloudOutlined />
+            <KeyOutlined />
             {t('overview')}
           </Space>
         ),
@@ -367,13 +367,13 @@ const Chat = () => {
         loading={conversationRenameLoading}
       ></RenameModal>
       {overviewVisible && (
-        <ChatOverviewModal
+        <ChatIdModal
           visible={overviewVisible}
           hideModal={hideOverviewModal}
           id={currentRecord.id}
           name={currentRecord.name}
           idKey="dialogId"
-        ></ChatOverviewModal>
+        ></ChatIdModal>
       )}
     </Flex>
   );