Feat: Control interface documentation directory display and hiding (#13008)

### What problem does this PR solve?

Feat: Control interface documentation directory display and hiding

### Type of change


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

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>

web/src/components/api-service/chat-overview-modal/api-content.tsx

@@ -1,5 +1,6 @@
 import { useIsDarkTheme } from '@/components/theme-provider';
-import { useSetModalState } from '@/hooks/common-hooks';
+import { Button } from '@/components/ui/button';
+import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { LangfuseCard } from '@/pages/user-setting/setting-model/langfuse';
 import apiDoc from '@parent/docs/references/http_api_reference.md?raw';
 import MarkdownPreview from '@uiw/react-markdown-preview';
@@ -8,21 +9,33 @@ import BackendServiceApi from './backend-service-api';
 import MarkdownToc from './markdown-toc';
 
 const ApiContent = ({ id, idKey }: { id?: string; idKey: string }) => {
+  const { t } = useTranslate('setting');
+
   const {
     visible: apiKeyVisible,
     hideModal: hideApiKeyModal,
     showModal: showApiKeyModal,
   } = useSetModalState();
 
+  const {
+    visible: tocVisible,
+    hideModal: hideToc,
+    showModal: showToc,
+  } = useSetModalState();
+
   const isDarkTheme = useIsDarkTheme();
 
   return (
-    <div className="pb-2">
+    <div className="pb-2 flex flex-col w-full">
-      <section className="flex flex-col gap-2 pb-5">
+      <BackendServiceApi show={showApiKeyModal}></BackendServiceApi>
-        <BackendServiceApi show={showApiKeyModal}></BackendServiceApi>
+      <div className="text-left py-4">
-
+        <Button onClick={tocVisible ? hideToc : showToc}>
+          {tocVisible ? t('hideToc') : t('showToc')}
+        </Button>
+      </div>
+      <section className="flex flex-col gap-2 pb-5 flex-1 min-h-0 overflow-auto mb-4">
         <div style={{ position: 'relative' }}>
-          <MarkdownToc content={apiDoc} />
+          {tocVisible && <MarkdownToc content={apiDoc} />}
         </div>
         <MarkdownPreview
           source={apiDoc}

web/src/components/api-service/chat-overview-modal/markdown-toc.tsx

@@ -72,7 +72,7 @@ const MarkdownToc: React.FC<MarkdownTocProps> = ({ content }) => {
         padding: '10px',
         maxHeight: 'calc(100vh - 170px)',
         overflowY: 'auto',
-        zIndex: 1000,
+        zIndex: 100,
       }}
     >
       <Anchor items={items} />

web/src/locales/en.ts

@@ -1320,6 +1320,8 @@ Example: Virtual Hosted Style`,
         image2text: 'OCR',
         speech2text: 'ASR',
       },
+      showToc: 'Show TOC',
+      hideToc: 'Hide TOC',
     },
     message: {
       registered: 'Registered!',

web/src/locales/zh.ts

@@ -1143,6 +1143,8 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
         modelNameRequired: '模型名称为必填项',
         apiUrlRequired: 'PaddleOCR API URL 为必填项',
       },
+      showToc: '显示目录',
+      hideToc: '隐藏目录',
     },
     message: {
       registered: '注册成功',

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

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