From be4cdedfa19484ad96bc63c89d7b4839d3452a5c Mon Sep 17 00:00:00 2001
From: ArnoChen <arnochen101@gmail.com>
Date: Mon, 17 Feb 2025 01:04:14 +0800
Subject: [PATCH] add API tab to display backend documentation

---
 lightrag_webui/src/App.tsx                 |  4 ++
 lightrag_webui/src/features/ApiSite.tsx    |  5 ++
 lightrag_webui/src/features/SiteHeader.tsx | 82 ++++++++++++----------
 3 files changed, 53 insertions(+), 38 deletions(-)
 create mode 100644 lightrag_webui/src/features/ApiSite.tsx

diff --git a/lightrag_webui/src/App.tsx b/lightrag_webui/src/App.tsx
index 30767c07..1d63b3c1 100644
--- a/lightrag_webui/src/App.tsx
+++ b/lightrag_webui/src/App.tsx
@@ -12,6 +12,7 @@ import SiteHeader from '@/features/SiteHeader'
 import GraphViewer from '@/features/GraphViewer'
 import DocumentManager from '@/features/DocumentManager'
 import RetrievalTesting from '@/features/RetrievalTesting'
+import ApiSite from '@/features/ApiSite'
 
 import { Tabs, TabsContent } from '@/components/ui/Tabs'
 
@@ -57,6 +58,9 @@ function App() {
             <TabsContent value="retrieval" className="absolute top-0 right-0 bottom-0 left-0">
               <RetrievalTesting />
             </TabsContent>
+            <TabsContent value="api" className="absolute top-0 right-0 bottom-0 left-0">
+              <ApiSite />
+            </TabsContent>
           </div>
         </Tabs>
         {enableHealthCheck && <StatusIndicator />}
diff --git a/lightrag_webui/src/features/ApiSite.tsx b/lightrag_webui/src/features/ApiSite.tsx
new file mode 100644
index 00000000..681f6a95
--- /dev/null
+++ b/lightrag_webui/src/features/ApiSite.tsx
@@ -0,0 +1,5 @@
+import { backendBaseUrl } from '@/lib/constants'
+
+export default function ApiSite() {
+  return <iframe src={backendBaseUrl + '/docs'} className="size-full" />
+}
\ No newline at end of file
diff --git a/lightrag_webui/src/features/SiteHeader.tsx b/lightrag_webui/src/features/SiteHeader.tsx
index e1ade6cf..3b60e14b 100644
--- a/lightrag_webui/src/features/SiteHeader.tsx
+++ b/lightrag_webui/src/features/SiteHeader.tsx
@@ -7,9 +7,50 @@ import { cn } from '@/lib/utils'
 
 import { ZapIcon, GithubIcon } from 'lucide-react'
 
-export default function SiteHeader() {
+interface NavigationTabProps {
+  value: string
+  currentTab: string
+  children: React.ReactNode
+}
+
+function NavigationTab({ value, currentTab, children }: NavigationTabProps) {
+  return (
+    <TabsTrigger
+      value={value}
+      className={cn(
+        'cursor-pointer px-2 py-1 transition-all',
+        currentTab === value ? '!bg-emerald-400 !text-zinc-50' : 'hover:bg-background/60'
+      )}
+    >
+      {children}
+    </TabsTrigger>
+  )
+}
+
+function TabsNavigation() {
   const currentTab = useSettingsStore.use.currentTab()
 
+  return (
+    <div className="flex h-8 self-center">
+      <TabsList className="h-full gap-2">
+        <NavigationTab value="documents" currentTab={currentTab}>
+          Documents
+        </NavigationTab>
+        <NavigationTab value="knowledge-graph" currentTab={currentTab}>
+          Knowledge Graph
+        </NavigationTab>
+        <NavigationTab value="retrieval" currentTab={currentTab}>
+          Retrieval
+        </NavigationTab>
+        <NavigationTab value="api" currentTab={currentTab}>
+          API
+        </NavigationTab>
+      </TabsList>
+    </div>
+  )
+}
+
+export default function SiteHeader() {
   return (
     <header className="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 flex h-10 w-full border-b px-4 backdrop-blur">
       <a href="/" className="mr-6 flex items-center gap-2">
@@ -18,43 +59,7 @@ export default function SiteHeader() {
       </a>
 
       <div className="flex h-10 flex-1 justify-center">
-        <div className="flex h-8 self-center">
-          <TabsList className="h-full gap-2">
-            <TabsTrigger
-              value="documents"
-              className={cn(
-                'cursor-pointer px-2 py-1 transition-all',
-                currentTab === 'documents'
-                  ? '!bg-emerald-400 !text-zinc-50'
-                  : 'hover:bg-background/60'
-              )}
-            >
-              Documents
-            </TabsTrigger>
-            <TabsTrigger
-              value="knowledge-graph"
-              className={cn(
-                'cursor-pointer px-2 py-1 transition-all',
-                currentTab === 'knowledge-graph'
-                  ? '!bg-emerald-400 !text-zinc-50'
-                  : 'hover:bg-background/60'
-              )}
-            >
-              Knowledge Graph
-            </TabsTrigger>
-            <TabsTrigger
-              value="retrieval"
-              className={cn(
-                'cursor-pointer px-2 py-1 transition-all',
-                currentTab === 'retrieval'
-                  ? '!bg-emerald-400 !text-zinc-50'
-                  : 'hover:bg-background/60'
-              )}
-            >
-              Retrieval
-            </TabsTrigger>
-          </TabsList>
-        </div>
+        <TabsNavigation />
       </div>
 
       <nav className="flex items-center">
@@ -68,3 +73,4 @@ export default function SiteHeader() {
     </header>
   )
 }
+