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">
-      <section className="flex flex-col gap-2 pb-5">
-        <BackendServiceApi show={showApiKeyModal}></BackendServiceApi>
-
+    <div className="pb-2 flex flex-col w-full">
+      <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} />