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/api/index.tsx

@@ -0,0 +1,11 @@
+import ApiContent from '@/components/api-service/chat-overview-modal/api-content';
+
+const ApiPage = () => {
+  return (
+    <div>
+      <ApiContent idKey="dialogId"></ApiContent>
+    </div>
+  );
+};
+
+export default ApiPage;

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>
   );

web/src/pages/user-setting/constants.tsx

@@ -1,3 +1,4 @@
+import { ReactComponent as ApiIcon } from '@/assets/svg/api.svg';
 import { ReactComponent as LogoutIcon } from '@/assets/svg/logout.svg';
 import { ReactComponent as ModelIcon } from '@/assets/svg/model-providers.svg';
 import { ReactComponent as PasswordIcon } from '@/assets/svg/password.svg';
@@ -13,6 +14,7 @@ export const UserSettingIconMap = {
   [UserSettingRouteKey.System]: <MonitorOutlined style={{ fontSize: 24 }} />,
   [UserSettingRouteKey.Team]: <TeamIcon />,
   [UserSettingRouteKey.Logout]: <LogoutIcon />,
+  [UserSettingRouteKey.Api]: <ApiIcon />,
 };
 
 export * from '@/constants/setting';

web/src/pages/user-setting/setting-api/index.less

@@ -0,0 +1,7 @@
+.apiWrapper {
+  width: 100%;
+
+  div[class^='chartWrapper'] {
+    height: auto !important;
+  }
+}

web/src/pages/user-setting/setting-api/index.tsx

@@ -0,0 +1,13 @@
+import ApiContent from '@/components/api-service/chat-overview-modal/api-content';
+
+import styles from './index.less';
+
+const ApiPage = () => {
+  return (
+    <div className={styles.apiWrapper}>
+      <ApiContent idKey="dialogId" hideChatPreviewCard></ApiContent>
+    </div>
+  );
+};
+
+export default ApiPage;