Feat: Refactoring the documentation page using shadcn. #10427 (#12376)

### What problem does this PR solve?

Feat: Refactoring the documentation page using shadcn. #10427

### Type of change


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

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

@@ -1,21 +1,27 @@
-import { Anchor } from 'antd';
-import type { AnchorLinkItemProps } from 'antd/es/anchor/Anchor';
 import React, { useEffect, useState } from 'react';
+import Anchor, { AnchorItem } from './anchor';
 
 interface MarkdownTocProps {
   content: string;
 }
 
 const MarkdownToc: React.FC<MarkdownTocProps> = ({ content }) => {
-  const [items, setItems] = useState<AnchorLinkItemProps[]>([]);
+  const [items, setItems] = useState<AnchorItem[]>([]);
 
   useEffect(() => {
     const generateTocItems = () => {
       const headings = document.querySelectorAll(
         '.wmde-markdown h2, .wmde-markdown h3',
       );
-      const tocItems: AnchorLinkItemProps[] = [];
-      let currentH2Item: AnchorLinkItemProps | null = null;
+
+      // If headings haven't rendered yet, wait for next frame
+      if (headings.length === 0) {
+        requestAnimationFrame(generateTocItems);
+        return;
+      }
+
+      const tocItems: AnchorItem[] = [];
+      let currentH2Item: AnchorItem | null = null;
 
       headings.forEach((heading) => {
         const title = heading.textContent || '';
@@ -23,7 +29,7 @@ const MarkdownToc: React.FC<MarkdownTocProps> = ({ content }) => {
         const isH2 = heading.tagName.toLowerCase() === 'h2';
 
         if (id && title) {
-          const item: AnchorLinkItemProps = {
+          const item: AnchorItem = {
             key: id,
             href: `#${id}`,
             title,
@@ -48,7 +54,10 @@ const MarkdownToc: React.FC<MarkdownTocProps> = ({ content }) => {
       setItems(tocItems.slice(1));
     };
 
-    setTimeout(generateTocItems, 100);
+    // Use requestAnimationFrame to ensure execution after DOM rendering
+    requestAnimationFrame(() => {
+      requestAnimationFrame(generateTocItems);
+    });
   }, [content]);
 
   return (
@@ -56,7 +65,7 @@ const MarkdownToc: React.FC<MarkdownTocProps> = ({ content }) => {
       className="markdown-toc bg-bg-base text-text-primary shadow shadow-text-secondary"
       style={{
         position: 'fixed',
-        right: 20,
+        right: 30,
         top: 100,
         bottom: 150,
         width: 200,
@@ -66,7 +75,7 @@ const MarkdownToc: React.FC<MarkdownTocProps> = ({ content }) => {
         zIndex: 1000,
       }}
     >
-      <Anchor items={items} affix={false} />
+      <Anchor items={items} />
     </div>
   );
 };