gardel/lightrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance web UI with retrieval testing and UI improvements

Browse Source
This commit is contained in:
ArnoChen
2025-02-16 04:34:22 +08:00
parent 1fe456666a
commit d1358c30f3
11 changed files with 347 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
lightrag_webui/src/App.tsx
View File

@@ -1,3 +1,4 @@
import { useState, useCallback } from 'react'
import ThemeProvider from '@/components/ThemeProvider'
import MessageAlert from '@/components/MessageAlert'
import StatusIndicator from '@/components/StatusIndicator'
@@ -10,14 +11,16 @@ import SiteHeader from '@/features/SiteHeader'
import GraphViewer from '@/features/GraphViewer'
import DocumentManager from '@/features/DocumentManager'
import RetrievalTesting from '@/features/RetrievalTesting'
import { Tabs, TabsContent } from '@/components/ui/Tabs'
function App() {
const message = useBackendState.use.message()
const enableHealthCheck = useSettingsStore.use.enableHealthCheck()
const [currentTab] = useState(() => useSettingsStore.getState().currentTab)
// health check
// Health check
useEffect(() => {
if (!enableHealthCheck) return
@@ -30,25 +33,36 @@ function App() {
return () => clearInterval(interval)
}, [enableHealthCheck])
const handleTabChange = useCallback(
(tab: string) => useSettingsStore.getState().setCurrentTab(tab as any),
[]
)
return (
<ThemeProvider>
<div className="flex h-screen w-screen">
<Tabs defaultValue="knowledge-graph" className="flex size-full flex-col">
<main className="flex h-screen w-screen overflow-x-hidden">
<Tabs
defaultValue={currentTab}
className="!m-0 flex grow flex-col !p-0"
onValueChange={handleTabChange}
>
<SiteHeader />
<TabsContent value="documents" className="flex-1">
<DocumentManager />
</TabsContent>
<TabsContent value="knowledge-graph" className="flex-1">
<GraphViewer />
</TabsContent>
<TabsContent value="settings" className="size-full">
<h1> Settings </h1>
</TabsContent>
<div className="relative grow">
<TabsContent value="documents" className="absolute top-0 right-0 bottom-0 left-0">
<DocumentManager />
</TabsContent>
<TabsContent value="knowledge-graph" className="absolute top-0 right-0 bottom-0 left-0">
<GraphViewer />
</TabsContent>
<TabsContent value="retrieval" className="absolute top-0 right-0 bottom-0 left-0">
<RetrievalTesting />
</TabsContent>
</div>
</Tabs>
</div>
{enableHealthCheck && <StatusIndicator />}
{message !== null && <MessageAlert />}
<Toaster />
{enableHealthCheck && <StatusIndicator />}
{message !== null && <MessageAlert />}
<Toaster />
</main>
</ThemeProvider>
)
}