Skip to content

Commit 22be081

Browse files
hjlarryhjlarry
authored
feat: add TOC to app develop doc (#10799)
1 parent 49e8832 commit 22be081

File tree

7 files changed

+67
-21
lines changed

7 files changed

+67
-21
lines changed

‎web/app/components/develop/doc.tsx

+58-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
'use client'
2+
import { useEffect, useState } from 'react'
23
import { useContext } from 'use-context-selector'
4+
import { useTranslation } from 'react-i18next'
35
import TemplateEn from './template/template.en.mdx'
46
import TemplateZh from './template/template.zh.mdx'
57
import TemplateAdvancedChatEn from './template/template_advanced_chat.en.mdx'
@@ -17,28 +19,70 @@ type IDocProps = {
1719

1820
const Doc = ({ appDetail }: IDocProps) => {
1921
const { locale } = useContext(I18n)
22+
const { t } = useTranslation()
23+
const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
2024

2125
const variables = appDetail?.model_config?.configs?.prompt_variables || []
2226
const inputs = variables.reduce((res: any, variable: any) => {
2327
res[variable.key] = variable.name || ''
2428
return res
2529
}, {})
2630

31+
useEffect(() => {
32+
const extractTOC = () => {
33+
const article = document.querySelector('article')
34+
if (article) {
35+
const headings = article.querySelectorAll('h2')
36+
const tocItems = Array.from(headings).map((heading) => {
37+
const anchor = heading.querySelector('a')
38+
if (anchor) {
39+
return {
40+
href: anchor.getAttribute('href') || '',
41+
text: anchor.textContent || '',
42+
}
43+
}
44+
return null
45+
}).filter((item): item is { href: string; text: string } => item !== null)
46+
setToc(tocItems)
47+
}
48+
}
49+
50+
// Run after component has rendered
51+
setTimeout(extractTOC, 0)
52+
}, [appDetail, locale])
53+
2754
return (
28-
<article className="prose prose-xl" >
29-
{(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
30-
locale !== LanguagesSupported[1] ? <TemplateChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateChatZh appDetail={appDetail} variables={variables} inputs={inputs} />
31-
)}
32-
{appDetail?.mode === 'advanced-chat' && (
33-
locale !== LanguagesSupported[1] ? <TemplateAdvancedChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateAdvancedChatZh appDetail={appDetail} variables={variables} inputs={inputs} />
34-
)}
35-
{appDetail?.mode === 'workflow' && (
36-
locale !== LanguagesSupported[1] ? <TemplateWorkflowEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateWorkflowZh appDetail={appDetail} variables={variables} inputs={inputs} />
37-
)}
38-
{appDetail?.mode === 'completion' && (
39-
locale !== LanguagesSupported[1] ? <TemplateEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateZh appDetail={appDetail} variables={variables} inputs={inputs} />
40-
)}
41-
</article>
55+
<div className="flex">
56+
<nav className="toc w-64 fixed right-8 top-32 bg-gray-50 p-4 rounded-lg shadow-md z-10">
57+
<h3 className="text-lg font-semibold mb-4">{t('appApi.develop.toc')}</h3>
58+
<ul className="space-y-2">
59+
{toc.map((item, index) => (
60+
<li key={index}>
61+
<a
62+
href={item.href}
63+
className="text-gray-600 hover:text-gray-900 hover:underline transition-colors duration-200"
64+
>
65+
{item.text}
66+
</a>
67+
</li>
68+
))}
69+
</ul>
70+
</nav>
71+
<article className="prose prose-xl" >
72+
{(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
73+
locale !== LanguagesSupported[1] ? <TemplateChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateChatZh appDetail={appDetail} variables={variables} inputs={inputs} />
74+
)}
75+
{appDetail?.mode === 'advanced-chat' && (
76+
locale !== LanguagesSupported[1] ? <TemplateAdvancedChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateAdvancedChatZh appDetail={appDetail} variables={variables} inputs={inputs} />
77+
)}
78+
{appDetail?.mode === 'workflow' && (
79+
locale !== LanguagesSupported[1] ? <TemplateWorkflowEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateWorkflowZh appDetail={appDetail} variables={variables} inputs={inputs} />
80+
)}
81+
{appDetail?.mode === 'completion' && (
82+
locale !== LanguagesSupported[1] ? <TemplateEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateZh appDetail={appDetail} variables={variables} inputs={inputs} />
83+
)}
84+
</article>
85+
</div>
4286
)
4387
}
4488

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -503,7 +503,7 @@ The text generation application offers non-session support and is ideal for tran
503503
<Heading
504504
url='/text-to-audio'
505505
method='POST'
506-
title='text to audio'
506+
title='Text to Audio'
507507
name='#audio'
508508
/>
509509
<Row>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -480,7 +480,7 @@ Chat applications support session persistence, allowing previous chat history to
480480
<Heading
481481
url='/messages/{message_id}/suggested'
482482
method='GET'
483-
title='next suggested questions'
483+
title='Next Suggested Questions'
484484
name='#suggested'
485485
/>
486486
<Row>
@@ -884,7 +884,7 @@ Chat applications support session persistence, allowing previous chat history to
884884
<Heading
885885
url='/text-to-audio'
886886
method='POST'
887-
title='text to audio'
887+
title='Text to Audio'
888888
name='#audio'
889889
/>
890890
<Row>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -444,7 +444,7 @@ Chat applications support session persistence, allowing previous chat history to
444444
<Heading
445445
url='/messages/{message_id}/suggested'
446446
method='GET'
447-
title='next suggested questions'
447+
title='Next Suggested Questions'
448448
name='#suggested'
449449
/>
450450
<Row>
@@ -918,7 +918,7 @@ Chat applications support session persistence, allowing previous chat history to
918918
<Heading
919919
url='/text-to-audio'
920920
method='POST'
921-
title='text to audio'
921+
title='Text to Audio'
922922
name='#audio'
923923
/>
924924
<Row>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Workflow applications offers non-session support and is ideal for translation, a
3232
<Heading
3333
url='/workflows/run'
3434
method='POST'
35-
title='Execute workflow'
35+
title='Execute Workflow'
3636
name='#Execute-Workflow'
3737
/>
3838
<Row>
@@ -505,7 +505,7 @@ Workflow applications offers non-session support and is ideal for translation, a
505505
<Heading
506506
url='/workflows/logs'
507507
method='GET'
508-
title='Get workflow logs'
508+
title='Get Workflow Logs'
509509
name='#Get-Workflow-Logs'
510510
/>
511511
<Row>

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

+1
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ const translation = {
7878
requestBody: 'Request Body',
7979
pathParams: 'Path Params',
8080
query: 'Query',
81+
toc: 'Contents',
8182
},
8283
}
8384

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

+1
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ const translation = {
7878
requestBody: 'Request Body',
7979
pathParams: 'Path Params',
8080
query: 'Query',
81+
toc: '目录',
8182
},
8283
}
8384

0 commit comments

Comments
 (0)