From 22be0816aa60edc794098350d77a372a76de9284 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= Date: Tue, 19 Nov 2024 09:06:12 +0800 Subject: [PATCH] feat: add TOC to app develop doc (#10799) --- web/app/components/develop/doc.tsx | 72 +++++++++++++++---- .../develop/template/template.en.mdx | 2 +- .../template/template_advanced_chat.en.mdx | 4 +- .../develop/template/template_chat.en.mdx | 4 +- .../develop/template/template_workflow.en.mdx | 4 +- web/i18n/en-US/app-api.ts | 1 + web/i18n/zh-Hans/app-api.ts | 1 + 7 files changed, 67 insertions(+), 21 deletions(-) diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx index eddc07d916..abf54fd39d 100644 --- a/web/app/components/develop/doc.tsx +++ b/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>([]) 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 ( -
- {(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && ( - locale !== LanguagesSupported[1] ? : - )} - {appDetail?.mode === 'advanced-chat' && ( - locale !== LanguagesSupported[1] ? : - )} - {appDetail?.mode === 'workflow' && ( - locale !== LanguagesSupported[1] ? : - )} - {appDetail?.mode === 'completion' && ( - locale !== LanguagesSupported[1] ? : - )} -
+
+ +
+ {(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && ( + locale !== LanguagesSupported[1] ? : + )} + {appDetail?.mode === 'advanced-chat' && ( + locale !== LanguagesSupported[1] ? : + )} + {appDetail?.mode === 'workflow' && ( + locale !== LanguagesSupported[1] ? : + )} + {appDetail?.mode === 'completion' && ( + locale !== LanguagesSupported[1] ? : + )} +
+
) } diff --git a/web/app/components/develop/template/template.en.mdx b/web/app/components/develop/template/template.en.mdx index 61ecd7ae97..c923ea30db 100755 --- a/web/app/components/develop/template/template.en.mdx +++ b/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 diff --git a/web/app/components/develop/template/template_advanced_chat.en.mdx b/web/app/components/develop/template/template_advanced_chat.en.mdx index c3c3f7c6f3..7d64caa769 100644 --- a/web/app/components/develop/template/template_advanced_chat.en.mdx +++ b/web/app/components/develop/template/template_advanced_chat.en.mdx @@ -480,7 +480,7 @@ Chat applications support session persistence, allowing previous chat history to @@ -884,7 +884,7 @@ Chat applications support session persistence, allowing previous chat history to diff --git a/web/app/components/develop/template/template_chat.en.mdx b/web/app/components/develop/template/template_chat.en.mdx index f44f991b89..ac8ee9d657 100644 --- a/web/app/components/develop/template/template_chat.en.mdx +++ b/web/app/components/develop/template/template_chat.en.mdx @@ -444,7 +444,7 @@ Chat applications support session persistence, allowing previous chat history to @@ -918,7 +918,7 @@ Chat applications support session persistence, allowing previous chat history to diff --git a/web/app/components/develop/template/template_workflow.en.mdx b/web/app/components/develop/template/template_workflow.en.mdx index 6cb02bf844..be2ef54743 100644 --- a/web/app/components/develop/template/template_workflow.en.mdx +++ b/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 @@ -505,7 +505,7 @@ Workflow applications offers non-session support and is ideal for translation, a diff --git a/web/i18n/en-US/app-api.ts b/web/i18n/en-US/app-api.ts index 355ff30602..1fba63c977 100644 --- a/web/i18n/en-US/app-api.ts +++ b/web/i18n/en-US/app-api.ts @@ -78,6 +78,7 @@ const translation = { requestBody: 'Request Body', pathParams: 'Path Params', query: 'Query', + toc: 'Contents', }, } diff --git a/web/i18n/zh-Hans/app-api.ts b/web/i18n/zh-Hans/app-api.ts index a0defdab62..f59d9065a6 100644 --- a/web/i18n/zh-Hans/app-api.ts +++ b/web/i18n/zh-Hans/app-api.ts @@ -78,6 +78,7 @@ const translation = { requestBody: 'Request Body', pathParams: 'Path Params', query: 'Query', + toc: '目录', }, }