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/components/api-service/chat-overview-modal/api-content.tsx

@@ -0,0 +1,64 @@
+import HightLightMarkdown from '@/components/highlight-markdown';
+import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
+import { Button, Card, Flex, Space } from 'antd';
+import apiDoc from '../../../../../docs/references/api.md';
+import ChatApiKeyModal from '../chat-api-key-modal';
+import EmbedModal from '../embed-modal';
+import { usePreviewChat, useShowEmbedModal } from '../hooks';
+import BackendServiceApi from './backend-service-api';
+
+const ApiContent = ({
+  id,
+  idKey,
+  hideChatPreviewCard = false,
+}: {
+  id?: string;
+  idKey: string;
+  hideChatPreviewCard?: boolean;
+}) => {
+  const { t } = useTranslate('chat');
+  const {
+    visible: apiKeyVisible,
+    hideModal: hideApiKeyModal,
+    showModal: showApiKeyModal,
+  } = useSetModalState();
+  const { embedVisible, hideEmbedModal, showEmbedModal, embedToken } =
+    useShowEmbedModal(idKey, id);
+
+  const { handlePreview } = usePreviewChat(idKey, id);
+
+  return (
+    <div>
+      <Flex vertical gap={'middle'}>
+        <BackendServiceApi show={showApiKeyModal}></BackendServiceApi>
+        {!hideChatPreviewCard && (
+          <Card title={`${name} Web App`}>
+            <Flex gap={8} vertical>
+              <Space size={'middle'}>
+                <Button onClick={handlePreview}>{t('preview')}</Button>
+                <Button onClick={showEmbedModal}>{t('embedded')}</Button>
+              </Space>
+            </Flex>
+          </Card>
+        )}
+        <HightLightMarkdown>{apiDoc}</HightLightMarkdown>
+      </Flex>
+      {apiKeyVisible && (
+        <ChatApiKeyModal
+          hideModal={hideApiKeyModal}
+          dialogId={id}
+          idKey={idKey}
+        ></ChatApiKeyModal>
+      )}
+      {embedVisible && (
+        <EmbedModal
+          token={embedToken}
+          visible={embedVisible}
+          hideModal={hideEmbedModal}
+        ></EmbedModal>
+      )}
+    </div>
+  );
+};
+
+export default ApiContent;