enhance web UI with retrieval testing and UI improvements
This commit is contained in:
ArnoChen
@@ -16,23 +16,23 @@ import ClearDocumentsDialog from '@/components/document/ClearDocumentsDialog'
|
||||
|
||||
import {
|
||||
getDocuments,
|
||||
getDocumentsScanProgress,
|
||||
scanNewDocuments,
|
||||
LightragDocumentsScanProgress
|
||||
// getDocumentsScanProgress,
|
||||
scanNewDocuments
|
||||
// LightragDocumentsScanProgress
|
||||
} from '@/api/lightrag'
|
||||
import { errorMessage } from '@/lib/utils'
|
||||
import { toast } from 'sonner'
|
||||
import { useBackendState } from '@/stores/state'
|
||||
// import { useBackendState } from '@/stores/state'
|
||||
|
||||
import { RefreshCwIcon, TrashIcon } from 'lucide-react'
|
||||
|
||||
// type DocumentStatus = 'indexed' | 'pending' | 'indexing' | 'error'
|
||||
|
||||
export default function DocumentManager() {
|
||||
const health = useBackendState.use.health()
|
||||
// const health = useBackendState.use.health()
|
||||
const [files, setFiles] = useState<string[]>([])
|
||||
const [indexedFiles, setIndexedFiles] = useState<string[]>([])
|
||||
const [scanProgress, setScanProgress] = useState<LightragDocumentsScanProgress | null>(null)
|
||||
// const [scanProgress, setScanProgress] = useState<LightragDocumentsScanProgress | null>(null)
|
||||
|
||||
const fetchDocuments = useCallback(async () => {
|
||||
try {
|
||||
@@ -45,7 +45,7 @@ export default function DocumentManager() {
|
||||
|
||||
useEffect(() => {
|
||||
fetchDocuments()
|
||||
}, [])
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const scanDocuments = useCallback(async () => {
|
||||
try {
|
||||
@@ -54,26 +54,26 @@ export default function DocumentManager() {
|
||||
} catch (err) {
|
||||
toast.error('Failed to load documents\n' + errorMessage(err))
|
||||
}
|
||||
}, [setFiles])
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(async () => {
|
||||
try {
|
||||
if (!health) return
|
||||
const progress = await getDocumentsScanProgress()
|
||||
setScanProgress((pre) => {
|
||||
if (pre?.is_scanning === progress.is_scanning && progress.is_scanning === false) {
|
||||
return pre
|
||||
}
|
||||
return progress
|
||||
})
|
||||
console.log(progress)
|
||||
} catch (err) {
|
||||
toast.error('Failed to get scan progress\n' + errorMessage(err))
|
||||
}
|
||||
}, 2000)
|
||||
return () => clearInterval(interval)
|
||||
}, [health])
|
||||
// useEffect(() => {
|
||||
// const interval = setInterval(async () => {
|
||||
// try {
|
||||
// if (!health) return
|
||||
// const progress = await getDocumentsScanProgress()
|
||||
// setScanProgress((pre) => {
|
||||
// if (pre?.is_scanning === progress.is_scanning && progress.is_scanning === false) {
|
||||
// return pre
|
||||
// }
|
||||
// return progress
|
||||
// })
|
||||
// console.log(progress)
|
||||
// } catch (err) {
|
||||
// toast.error('Failed to get scan progress\n' + errorMessage(err))
|
||||
// }
|
||||
// }, 2000)
|
||||
// return () => clearInterval(interval)
|
||||
// }, [health])
|
||||
|
||||
const handleDelete = async (fileName: string) => {
|
||||
console.log(`deleting ${fileName}`)
|
||||
@@ -88,19 +88,19 @@ export default function DocumentManager() {
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
tooltip="Scan Documents"
|
||||
onClick={scanDocuments}
|
||||
side="bottom"
|
||||
tooltip="Scan documents"
|
||||
size="sm"
|
||||
>
|
||||
<RefreshCwIcon />
|
||||
<RefreshCwIcon /> Scan
|
||||
</Button>
|
||||
<div className="flex-1" />
|
||||
<ClearDocumentsDialog />
|
||||
<UploadDocumentsDialog />
|
||||
</div>
|
||||
|
||||
{scanProgress?.is_scanning && (
|
||||
{/* {scanProgress?.is_scanning && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Indexing {scanProgress.current_file}</span>
|
||||
@@ -108,7 +108,7 @@ export default function DocumentManager() {
|
||||
</div>
|
||||
<Progress value={scanProgress.progress} />
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
||||
170
lightrag_webui/src/features/RetrievalTesting.tsx
Normal file
170
lightrag_webui/src/features/RetrievalTesting.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import Input from '@/components/ui/Input'
|
||||
import Button from '@/components/ui/Button'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { queryTextStream, QueryMode } from '@/api/lightrag'
|
||||
import { errorMessage } from '@/lib/utils'
|
||||
import { useSettingsStore } from '@/stores/settings'
|
||||
import { useDebounce } from '@/hooks/useDebounce'
|
||||
import { EraserIcon, SendIcon, LoaderIcon } from 'lucide-react'
|
||||
|
||||
type Message = {
|
||||
id: string
|
||||
content: string
|
||||
role: 'User' | 'LightRAG'
|
||||
}
|
||||
|
||||
export default function RetrievalTesting() {
|
||||
const [messages, setMessages] = useState<Message[]>(
|
||||
() => useSettingsStore.getState().retrievalHistory || []
|
||||
)
|
||||
const [inputValue, setInputValue] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [mode, setMode] = useState<QueryMode>('mix')
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const scrollToBottom = useCallback(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, [])
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!inputValue.trim() || isLoading) return
|
||||
|
||||
const userMessage: Message = {
|
||||
id: Date.now().toString(),
|
||||
content: inputValue,
|
||||
role: 'User'
|
||||
}
|
||||
|
||||
const assistantMessage: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
content: '',
|
||||
role: 'LightRAG'
|
||||
}
|
||||
|
||||
setMessages((prev) => {
|
||||
const newMessages = [...prev, userMessage, assistantMessage]
|
||||
return newMessages
|
||||
})
|
||||
|
||||
setInputValue('')
|
||||
setIsLoading(true)
|
||||
|
||||
// Create a function to update the assistant's message
|
||||
const updateAssistantMessage = (chunk: string) => {
|
||||
assistantMessage.content += chunk
|
||||
setMessages((prev) => {
|
||||
const newMessages = [...prev]
|
||||
const lastMessage = newMessages[newMessages.length - 1]
|
||||
if (lastMessage.role === 'LightRAG') {
|
||||
lastMessage.content = assistantMessage.content
|
||||
}
|
||||
return newMessages
|
||||
})
|
||||
}
|
||||
|
||||
try {
|
||||
await queryTextStream(
|
||||
{
|
||||
query: userMessage.content,
|
||||
mode: mode,
|
||||
stream: true
|
||||
},
|
||||
updateAssistantMessage
|
||||
)
|
||||
} catch (err) {
|
||||
updateAssistantMessage(`Error: Failed to get response\n${errorMessage(err)}`)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
useSettingsStore
|
||||
.getState()
|
||||
.setRetrievalHistory([
|
||||
...useSettingsStore.getState().retrievalHistory,
|
||||
userMessage,
|
||||
assistantMessage
|
||||
])
|
||||
}
|
||||
},
|
||||
[inputValue, isLoading, mode, setMessages]
|
||||
)
|
||||
|
||||
const debouncedMessages = useDebounce(messages, 100)
|
||||
useEffect(() => scrollToBottom(), [debouncedMessages, scrollToBottom])
|
||||
|
||||
const clearMessages = useCallback(() => {
|
||||
setMessages([])
|
||||
useSettingsStore.getState().setRetrievalHistory([])
|
||||
}, [setMessages])
|
||||
|
||||
return (
|
||||
<div className="flex size-full flex-col gap-4 px-32 py-6">
|
||||
<div className="relative grow">
|
||||
<div className="bg-primary-foreground/60 absolute inset-0 flex flex-col overflow-auto rounded-lg border p-2">
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-2">
|
||||
{messages.length === 0 ? (
|
||||
<div className="text-muted-foreground flex h-full items-center justify-center text-lg">
|
||||
Start a retrieval by typing your query below
|
||||
</div>
|
||||
) : (
|
||||
messages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`flex ${message.role === 'User' ? 'justify-end' : 'justify-start'}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[80%] rounded-lg px-4 py-2 ${
|
||||
message.role === 'User' ? 'bg-primary text-primary-foreground' : 'bg-muted'
|
||||
}`}
|
||||
>
|
||||
<pre className="break-words whitespace-pre-wrap">{message.content}</pre>
|
||||
{message.content.length === 0 && (
|
||||
<LoaderIcon className="animate-spin duration-2000" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div ref={messagesEndRef} className="pb-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex shrink-0 items-center gap-2 pb-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={clearMessages}
|
||||
disabled={isLoading}
|
||||
size="sm"
|
||||
>
|
||||
<EraserIcon />
|
||||
Clear
|
||||
</Button>
|
||||
<select
|
||||
className="border-input bg-background ring-offset-background h-9 rounded-md border px-3 py-1 text-sm"
|
||||
value={mode}
|
||||
onChange={(e) => setMode(e.target.value as QueryMode)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<option value="naive">Naive</option>
|
||||
<option value="local">Local</option>
|
||||
<option value="global">Global</option>
|
||||
<option value="hybrid">Hybrid</option>
|
||||
<option value="mix">Mix</option>
|
||||
</select>
|
||||
<Input
|
||||
className="flex-1"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
placeholder="Type your query..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<Button type="submit" variant="default" disabled={isLoading} size="sm">
|
||||
<SendIcon />
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -2,14 +2,18 @@ import Button from '@/components/ui/Button'
|
||||
import { SiteInfo } from '@/lib/constants'
|
||||
import ThemeToggle from '@/components/ThemeToggle'
|
||||
import { TabsList, TabsTrigger } from '@/components/ui/Tabs'
|
||||
import { useSettingsStore } from '@/stores/settings'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import { ZapIcon, GithubIcon } from 'lucide-react'
|
||||
|
||||
export default function SiteHeader() {
|
||||
const currentTab = useSettingsStore.use.currentTab()
|
||||
|
||||
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">
|
||||
<ZapIcon className="size-4 text-teal-400" aria-hidden="true" />
|
||||
<ZapIcon className="size-4 text-emerald-400" aria-hidden="true" />
|
||||
<span className="font-bold md:inline-block">{SiteInfo.name}</span>
|
||||
</a>
|
||||
|
||||
@@ -18,28 +22,43 @@ export default function SiteHeader() {
|
||||
<TabsList className="h-full gap-2">
|
||||
<TabsTrigger
|
||||
value="documents"
|
||||
className="hover:bg-background/60 cursor-pointer px-2 py-1 transition-all"
|
||||
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="hover:bg-background/60 cursor-pointer px-2 py-1 transition-all"
|
||||
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="settings"
|
||||
className="hover:bg-background/60 cursor-pointer px-2 py-1 transition-all"
|
||||
<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'
|
||||
)}
|
||||
>
|
||||
Settings
|
||||
</TabsTrigger> */}
|
||||
Retrieval
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex items-center">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Button variant="ghost" size="icon" side="bottom" tooltip="Project Repository">
|
||||
<a href={SiteInfo.github} target="_blank" rel="noopener noreferrer">
|
||||
<GithubIcon className="size-4" aria-hidden="true" />
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user