AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 04:39:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
非法操作 2024-11-19 09:06:12 +08:00 committed by GitHub
parent 49e88322de
commit 22be0816aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 67 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/app/components/develop/doc.tsx
View File

@ -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>
)
}

2
web/app/components/develop/template/template.en.mdx
View File

@ -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>

4
web/app/components/develop/template/template_advanced_chat.en.mdx
View File

@ -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>

4
web/app/components/develop/template/template_chat.en.mdx
View File

@ -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>

4
web/app/components/develop/template/template_workflow.en.mdx
View File

@ -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>

1
web/i18n/en-US/app-api.ts
View File

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

1
web/i18n/zh-Hans/app-api.ts
View File

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