feat: add TOC to app develop doc (#10799)

web/app/components/develop/doc.tsx

@@ -1,5 +1,7 @@
 'use client'
+import { useEffect, useState } from 'react'
 import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
 import TemplateEn from './template/template.en.mdx'
 import TemplateZh from './template/template.zh.mdx'
 import TemplateAdvancedChatEn from './template/template_advanced_chat.en.mdx'
@@ -17,6 +19,8 @@ type IDocProps = {
 
 const Doc = ({ appDetail }: IDocProps) => {
   const { locale } = useContext(I18n)
+  const { t } = useTranslation()
+  const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
 
   const variables = appDetail?.model_config?.configs?.prompt_variables || []
   const inputs = variables.reduce((res: any, variable: any) => {
@@ -24,21 +28,61 @@ const Doc = ({ appDetail }: IDocProps) => {
     return res
   }, {})
 
+  useEffect(() => {
+    const extractTOC = () => {
+      const article = document.querySelector('article')
+      if (article) {
+        const headings = article.querySelectorAll('h2')
+        const tocItems = Array.from(headings).map((heading) => {
+          const anchor = heading.querySelector('a')
+          if (anchor) {
+            return {
+              href: anchor.getAttribute('href') || '',
+              text: anchor.textContent || '',
+            }
+          }
+          return null
+        }).filter((item): item is { href: string; text: string } => item !== null)
+        setToc(tocItems)
+      }
+    }
+
+    // Run after component has rendered
+    setTimeout(extractTOC, 0)
+  }, [appDetail, locale])
+
   return (
-    <article className="prose prose-xl" >
-      {(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
-        locale !== LanguagesSupported[1] ? <TemplateChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateChatZh appDetail={appDetail} variables={variables} inputs={inputs} />
-      )}
-      {appDetail?.mode === 'advanced-chat' && (
-        locale !== LanguagesSupported[1] ? <TemplateAdvancedChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateAdvancedChatZh appDetail={appDetail} variables={variables} inputs={inputs} />
-      )}
-      {appDetail?.mode === 'workflow' && (
-        locale !== LanguagesSupported[1] ? <TemplateWorkflowEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateWorkflowZh appDetail={appDetail} variables={variables} inputs={inputs} />
-      )}
-      {appDetail?.mode === 'completion' && (
-        locale !== LanguagesSupported[1] ? <TemplateEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateZh appDetail={appDetail} variables={variables} inputs={inputs} />
-      )}
-    </article>
+    <div className="flex">
+      <nav className="toc w-64 fixed right-8 top-32 bg-gray-50 p-4 rounded-lg shadow-md z-10">
+        <h3 className="text-lg font-semibold mb-4">{t('appApi.develop.toc')}</h3>
+        <ul className="space-y-2">
+          {toc.map((item, index) => (
+            <li key={index}>
+              <a
+                href={item.href}
+                className="text-gray-600 hover:text-gray-900 hover:underline transition-colors duration-200"
+              >
+                {item.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      <article className="prose prose-xl" >
+        {(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
+          locale !== LanguagesSupported[1] ? <TemplateChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateChatZh appDetail={appDetail} variables={variables} inputs={inputs} />
+        )}
+        {appDetail?.mode === 'advanced-chat' && (
+          locale !== LanguagesSupported[1] ? <TemplateAdvancedChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateAdvancedChatZh appDetail={appDetail} variables={variables} inputs={inputs} />
+        )}
+        {appDetail?.mode === 'workflow' && (
+          locale !== LanguagesSupported[1] ? <TemplateWorkflowEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateWorkflowZh appDetail={appDetail} variables={variables} inputs={inputs} />
+        )}
+        {appDetail?.mode === 'completion' && (
+          locale !== LanguagesSupported[1] ? <TemplateEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateZh appDetail={appDetail} variables={variables} inputs={inputs} />
+        )}
+      </article>
+    </div>
   )
 }
 

web/app/components/develop/template/template.en.mdx

@@ -503,7 +503,7 @@ The text generation application offers non-session support and is ideal for tran
 <Heading
   url='/text-to-audio'
   method='POST'
-  title='text to audio'
+  title='Text to Audio'
   name='#audio'
 />
 <Row>

web/app/components/develop/template/template_advanced_chat.en.mdx

@@ -480,7 +480,7 @@ Chat applications support session persistence, allowing previous chat history to
 <Heading
   url='/messages/{message_id}/suggested'
   method='GET'
-  title='next suggested questions'
+  title='Next Suggested Questions'
   name='#suggested'
 />
 <Row>
@@ -884,7 +884,7 @@ Chat applications support session persistence, allowing previous chat history to
 <Heading
   url='/text-to-audio'
   method='POST'
-  title='text to audio'
+  title='Text to Audio'
   name='#audio'
 />
 <Row>

web/app/components/develop/template/template_chat.en.mdx

@@ -444,7 +444,7 @@ Chat applications support session persistence, allowing previous chat history to
 <Heading
   url='/messages/{message_id}/suggested'
   method='GET'
-  title='next suggested questions'
+  title='Next Suggested Questions'
   name='#suggested'
 />
 <Row>
@@ -918,7 +918,7 @@ Chat applications support session persistence, allowing previous chat history to
 <Heading
   url='/text-to-audio'
   method='POST'
-  title='text to audio'
+  title='Text to Audio'
   name='#audio'
 />
 <Row>

web/app/components/develop/template/template_workflow.en.mdx

@@ -32,7 +32,7 @@ Workflow applications offers non-session support and is ideal for translation, a
 <Heading
   url='/workflows/run'
   method='POST'
-  title='Execute workflow'
+  title='Execute Workflow'
   name='#Execute-Workflow'
 />
 <Row>
@@ -505,7 +505,7 @@ Workflow applications offers non-session support and is ideal for translation, a
 <Heading
   url='/workflows/logs'
   method='GET'
-  title='Get workflow logs'
+  title='Get Workflow Logs'
   name='#Get-Workflow-Logs'
 />
 <Row>

web/i18n/en-US/app-api.ts

@@ -78,6 +78,7 @@ const translation = {
     requestBody: 'Request Body',
     pathParams: 'Path Params',
     query: 'Query',
+    toc: 'Contents',
   },
 }
 

web/i18n/zh-Hans/app-api.ts

@@ -78,6 +78,7 @@ const translation = {
     requestBody: 'Request Body',
     pathParams: 'Path Params',
     query: 'Query',
+    toc: '目录',
   },
 }