feat: make toc panel can collapse (langgenius#10875)

AlwaysBluer · Nov 20, 2024 · 7e66e5a · 7e66e5a
1 parent 07b5bba
commit 7e66e5a
Showing 1 changed file with 43 additions and 15 deletions.
diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx
@@ -2,6 +2,7 @@
 import { useEffect, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
+import { RiListUnordered } from '@remixicon/react'
 import TemplateEn from './template/template.en.mdx'
 import TemplateZh from './template/template.zh.mdx'
 import TemplateAdvancedChatEn from './template/template_advanced_chat.en.mdx'
@@ -21,13 +22,19 @@ const Doc = ({ appDetail }: IDocProps) => {
   const { locale } = useContext(I18n)
   const { t } = useTranslation()
   const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
+  const [isTocExpanded, setIsTocExpanded] = useState(false)
 
   const variables = appDetail?.model_config?.configs?.prompt_variables || []
   const inputs = variables.reduce((res: any, variable: any) => {
     res[variable.key] = variable.name || ''
     return res
   }, {})
 
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 1280px)')
+    setIsTocExpanded(mediaQuery.matches)
+  }, [])
+
   useEffect(() => {
     const extractTOC = () => {
       const article = document.querySelector('article')
@@ -53,21 +60,42 @@ const Doc = ({ appDetail }: IDocProps) => {
 
   return (
     <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>
+      <div className={`fixed right-8 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
+        {isTocExpanded
+          ? (
+            <nav className="toc w-full bg-gray-50 p-4 rounded-lg shadow-md">
+              <div className="flex justify-between items-center mb-4">
+                <h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
+                <button
+                  onClick={() => setIsTocExpanded(false)}
+                  className="text-gray-500 hover:text-gray-700"
+                >
+                  ✕
+                </button>
+              </div>
+              <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>
+          )
+          : (
+            <button
+              onClick={() => setIsTocExpanded(true)}
+              className="w-10 h-10 bg-gray-50 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors duration-200"
+            >
+              <RiListUnordered className="w-6 h-6" />
+            </button>
+          )}
+      </div>
       <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} />