|
import { useState, useCallback, useEffect, useRef } from 'react' |
|
import ThemeProvider from '@/components/ThemeProvider' |
|
import TabVisibilityProvider from '@/contexts/TabVisibilityProvider' |
|
import ApiKeyAlert from '@/components/ApiKeyAlert' |
|
import StatusIndicator from '@/components/status/StatusIndicator' |
|
import { healthCheckInterval } from '@/lib/constants' |
|
import { useBackendState, useAuthStore } from '@/stores/state' |
|
import { useSettingsStore } from '@/stores/settings' |
|
import { getAuthStatus } from '@/api/lightrag' |
|
import SiteHeader from '@/features/SiteHeader' |
|
import { InvalidApiKeyError, RequireApiKeError } from '@/api/lightrag' |
|
|
|
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' |
|
|
|
function App() { |
|
const message = useBackendState.use.message() |
|
const enableHealthCheck = useSettingsStore.use.enableHealthCheck() |
|
const currentTab = useSettingsStore.use.currentTab() |
|
const [apiKeyAlertOpen, setApiKeyAlertOpen] = useState(false) |
|
const versionCheckRef = useRef(false); |
|
|
|
const handleApiKeyAlertOpenChange = useCallback((open: boolean) => { |
|
setApiKeyAlertOpen(open) |
|
if (!open) { |
|
useBackendState.getState().clear() |
|
} |
|
}, []) |
|
|
|
|
|
useEffect(() => { |
|
|
|
if (!enableHealthCheck || apiKeyAlertOpen) return; |
|
|
|
|
|
const performHealthCheck = async () => { |
|
await useBackendState.getState().check(); |
|
}; |
|
|
|
|
|
const interval = setInterval(performHealthCheck, healthCheckInterval * 1000); |
|
return () => clearInterval(interval); |
|
}, [enableHealthCheck, apiKeyAlertOpen]); |
|
|
|
|
|
useEffect(() => { |
|
const checkVersion = async () => { |
|
|
|
if (versionCheckRef.current) return; |
|
versionCheckRef.current = true; |
|
|
|
|
|
const versionCheckedFromLogin = sessionStorage.getItem('VERSION_CHECKED_FROM_LOGIN') === 'true'; |
|
if (versionCheckedFromLogin) return; |
|
|
|
|
|
const token = localStorage.getItem('LIGHTRAG-API-TOKEN'); |
|
if (!token) return; |
|
|
|
try { |
|
const status = await getAuthStatus(); |
|
if (status.core_version || status.api_version) { |
|
const isGuestMode = status.auth_mode === 'disabled' || useAuthStore.getState().isGuestMode; |
|
|
|
useAuthStore.getState().login( |
|
token, |
|
isGuestMode, |
|
status.core_version, |
|
status.api_version |
|
); |
|
|
|
|
|
sessionStorage.setItem('VERSION_CHECKED_FROM_LOGIN', 'true'); |
|
} |
|
} catch (error) { |
|
console.error('Failed to get version info:', error); |
|
} |
|
}; |
|
|
|
|
|
checkVersion(); |
|
}, []); |
|
|
|
const handleTabChange = useCallback( |
|
(tab: string) => useSettingsStore.getState().setCurrentTab(tab as any), |
|
[] |
|
) |
|
|
|
useEffect(() => { |
|
if (message) { |
|
if (message.includes(InvalidApiKeyError) || message.includes(RequireApiKeError)) { |
|
setApiKeyAlertOpen(true) |
|
} |
|
} |
|
}, [message]) |
|
|
|
return ( |
|
<ThemeProvider> |
|
<TabVisibilityProvider> |
|
<main className="flex h-screen w-screen overflow-hidden"> |
|
<Tabs |
|
defaultValue={currentTab} |
|
className="!m-0 flex grow flex-col !p-0 overflow-hidden" |
|
onValueChange={handleTabChange} |
|
> |
|
<SiteHeader /> |
|
<div className="relative grow"> |
|
<TabsContent value="documents" className="absolute top-0 right-0 bottom-0 left-0 overflow-auto"> |
|
<DocumentManager /> |
|
</TabsContent> |
|
<TabsContent value="knowledge-graph" className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden"> |
|
<GraphViewer /> |
|
</TabsContent> |
|
<TabsContent value="retrieval" className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden"> |
|
<RetrievalTesting /> |
|
</TabsContent> |
|
<TabsContent value="api" className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden"> |
|
<ApiSite /> |
|
</TabsContent> |
|
</div> |
|
</Tabs> |
|
{enableHealthCheck && <StatusIndicator />} |
|
<ApiKeyAlert open={apiKeyAlertOpen} onOpenChange={handleApiKeyAlertOpenChange} /> |
|
</main> |
|
</TabVisibilityProvider> |
|
</ThemeProvider> |
|
) |
|
} |
|
|
|
export default App |
|
|