Fix API documentation layout and dark mode contrast issues (#23462)

web/app/(commonLayout)/datasets/Datasets.tsx

 }
 
 type Props = {
-  containerRef: React.RefObject<HTMLDivElement>
+  containerRef: React.RefObject<HTMLDivElement | null>
   tags: string[]
   keywords: string
   includeAll: boolean

web/app/(commonLayout)/datasets/Doc.tsx

       <div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
         {isTocExpanded
           ? (
-            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-components-panel-bg p-4 shadow-md">
+            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-4 shadow-md">
               <div className="mb-4 flex items-center justify-between">
                 <h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
                 <button
           : (
             <button
               onClick={() => setIsTocExpanded(true)}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
+              className="flex h-10 w-10 items-center justify-center rounded-full border border-components-panel-border bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
             >
               <RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
             </button>

web/app/(commonLayout)/datasets/template/template.en.mdx

   </CodeGroup>
 </div>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-text'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-file'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-text'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-file'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{batch}/indexing-status'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
   </Col>
 </Row>
 ___
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/status/{action}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/upload-file'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/retrieve'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/built-in/{action}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/metadata'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
  
 <Heading
  url='/workspaces/current/models/model-types/text-embedding'
    </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 Okay, I will translate the Chinese text in your document while keeping all formatting and code content unchanged.
 
 <Heading
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/binding'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/unbinding'
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/<uuid:dataset_id>/tags'
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Row>

web/app/(commonLayout)/datasets/template/template.ja.mdx

   </CodeGroup>
 </div>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-text'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-file'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-text'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-file'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{batch}/indexing-status'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
   </Col>
 </Row>
 ___
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   method='DELETE'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   method='POST'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/upload-file'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/retrieve'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/built-in/{action}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/metadata'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 <Heading
   url='/datasets/tags'
   method='POST'
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/binding'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/unbinding'
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/<uuid:dataset_id>/tags'
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Row>
   <Col>

web/app/(commonLayout)/datasets/template/template.zh.mdx

   </CodeGroup>
 </div>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-text'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-file'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-text'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-file'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{batch}/indexing-status'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
   </Col>
 </Row>
 ___
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   method='POST'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Row>
   <Col>
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/upload-file'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/retrieve'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/built-in/{action}'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/metadata'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
  
 <Heading
  url='/workspaces/current/models/model-types/text-embedding'
    </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/binding'
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/unbinding'
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/<uuid:dataset_id>/tags'
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Row>
   <Col>

web/app/components/develop/doc.tsx

       <div className={`fixed right-8 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
         {isTocExpanded
           ? (
-            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-components-panel-bg p-4 shadow-md">
+            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-4 shadow-md">
               <div className="mb-4 flex items-center justify-between">
                 <h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
                 <button
           : (
             <button
               onClick={() => setIsTocExpanded(true)}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
+              className="flex h-10 w-10 items-center justify-center rounded-full border border-components-panel-border bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
             >
               <RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
             </button>

web/global.d.ts

 declare module 'lamejs/src/js/Lame';
 declare module 'lamejs/src/js/BitStream';
 declare module 'react-18-input-autosize';
+
+declare module '*.mdx' {
+  let MDXComponent: (props: any) => JSX.Element
+  export default MDXComponent
+}