mlogclub
331 lines
12 KiB
TypeScript
331 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react"
|
|
import { RefreshCwIcon, SearchIcon } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
import {
|
|
fetchKnowledgeRetrieveLogs,
|
|
type KnowledgeRetrieveLog,
|
|
type PageResult,
|
|
} from "@/lib/api/admin"
|
|
import {
|
|
KnowledgeAnswerStatus,
|
|
KnowledgeRetrieveChannel,
|
|
KnowledgeRetrieveScene,
|
|
} from "@/lib/generated/enums"
|
|
import {
|
|
getKnowledgeAnswerStatusLabel,
|
|
getKnowledgeChunkProviderLabel,
|
|
getKnowledgeRetrieveChannelLabel,
|
|
getKnowledgeRetrieveSceneLabel,
|
|
} from "@/lib/knowledge-i18n"
|
|
import { formatDateTime } from "@/lib/utils"
|
|
import { useI18n } from "@/i18n/provider"
|
|
import { ListPagination } from "@/components/list-pagination"
|
|
import { OptionCombobox } from "@/components/option-combobox"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import { RetrieveLogDetailDrawer } from "./retrieve-log-detail"
|
|
|
|
type RetrieveLogListProps = {
|
|
knowledgeBaseId: number | null
|
|
}
|
|
|
|
type TFunction = (key: string, values?: Record<string, string | number>) => string
|
|
|
|
function getChannelOptions(t: TFunction) {
|
|
return [
|
|
{ value: "all", label: t("knowledge.allChannels") },
|
|
{ value: KnowledgeRetrieveChannel.IM, label: t("knowledge.channelIM") },
|
|
{ value: KnowledgeRetrieveChannel.AgentAssist, label: t("knowledge.channelAgentAssist") },
|
|
{ value: KnowledgeRetrieveChannel.API, label: t("knowledge.channelAPI") },
|
|
{ value: KnowledgeRetrieveChannel.Debug, label: t("knowledge.channelDebug") },
|
|
]
|
|
}
|
|
|
|
function getSceneOptions(t: TFunction) {
|
|
return [
|
|
{ value: "all", label: t("knowledge.allScenes") },
|
|
{ value: KnowledgeRetrieveScene.FirstResponse, label: t("knowledge.sceneFirstResponse") },
|
|
{ value: KnowledgeRetrieveScene.Assist, label: t("knowledge.sceneAssist") },
|
|
{ value: KnowledgeRetrieveScene.QA, label: t("knowledge.sceneQA") },
|
|
]
|
|
}
|
|
|
|
function getAnswerStatusOptions(t: TFunction) {
|
|
return [
|
|
{ value: "all", label: t("knowledge.allAnswerStatus") },
|
|
{ value: String(KnowledgeAnswerStatus.Normal), label: t("knowledge.answerNormal") },
|
|
{ value: String(KnowledgeAnswerStatus.NoAnswer), label: t("knowledge.answerNoAnswer") },
|
|
{ value: String(KnowledgeAnswerStatus.Fallback), label: t("knowledge.answerFallback") },
|
|
{ value: String(KnowledgeAnswerStatus.Blocked), label: t("knowledge.answerBlocked") },
|
|
]
|
|
}
|
|
|
|
function getProviderOptions(t: TFunction) {
|
|
return [
|
|
{ value: "all", label: t("knowledge.allChunkProviders") },
|
|
{ value: "fixed", label: t("knowledge.chunkFixed") },
|
|
{ value: "structured", label: t("knowledge.chunkStructured") },
|
|
{ value: "faq", label: t("knowledge.chunkFAQ") },
|
|
{ value: "semantic", label: t("knowledge.chunkSemantic") },
|
|
]
|
|
}
|
|
|
|
function getRerankOptions(t: TFunction) {
|
|
return [
|
|
{ value: "all", label: t("knowledge.allRerank") },
|
|
{ value: "1", label: t("knowledge.rerankEnabled") },
|
|
{ value: "0", label: t("knowledge.rerankDisabled") },
|
|
]
|
|
}
|
|
|
|
function channelLabel(value: string, fallback: string, t: TFunction) {
|
|
return getKnowledgeRetrieveChannelLabel(value, fallback, t)
|
|
}
|
|
|
|
function sceneLabel(value: string, fallback: string, t: TFunction) {
|
|
return getKnowledgeRetrieveSceneLabel(value, fallback, t)
|
|
}
|
|
|
|
function answerStatusLabel(value: number, fallback: string, t: TFunction) {
|
|
return getKnowledgeAnswerStatusLabel(value, fallback, t)
|
|
}
|
|
|
|
function providerLabel(value: string, t: TFunction) {
|
|
return getKnowledgeChunkProviderLabel(value, t)
|
|
}
|
|
|
|
function getAnswerStatusVariant(status: number): "default" | "secondary" | "outline" | "destructive" {
|
|
switch (status) {
|
|
case 1:
|
|
return "default"
|
|
case 2:
|
|
return "secondary"
|
|
case 3:
|
|
return "outline"
|
|
case 4:
|
|
return "destructive"
|
|
default:
|
|
return "outline"
|
|
}
|
|
}
|
|
|
|
export function RetrieveLogList({
|
|
knowledgeBaseId,
|
|
}: RetrieveLogListProps) {
|
|
const t = useI18n()
|
|
const [questionInput, setQuestionInput] = useState("")
|
|
const [question, setQuestion] = useState("")
|
|
const [channel, setChannel] = useState("all")
|
|
const [scene, setScene] = useState("all")
|
|
const [answerStatus, setAnswerStatus] = useState("all")
|
|
const [chunkProvider, setChunkProvider] = useState("all")
|
|
const [rerankEnabled, setRerankEnabled] = useState("all")
|
|
const [page, setPage] = useState(1)
|
|
const [limit, setLimit] = useState(20)
|
|
const [loading, setLoading] = useState(false)
|
|
const [detailOpen, setDetailOpen] = useState(false)
|
|
const [selectedLogId, setSelectedLogId] = useState<number | null>(null)
|
|
const [result, setResult] = useState<PageResult<KnowledgeRetrieveLog>>({
|
|
results: [],
|
|
page: { page: 1, limit: 20, total: 0 },
|
|
})
|
|
const channelOptions = useMemo(() => getChannelOptions(t), [t])
|
|
const sceneOptions = useMemo(() => getSceneOptions(t), [t])
|
|
const answerStatusOptions = useMemo(() => getAnswerStatusOptions(t), [t])
|
|
const providerOptions = useMemo(() => getProviderOptions(t), [t])
|
|
const rerankOptions = useMemo(() => getRerankOptions(t), [t])
|
|
|
|
const loadData = useCallback(async () => {
|
|
if (!knowledgeBaseId) {
|
|
setResult({ results: [], page: { page: 1, limit: 20, total: 0 } })
|
|
setLoading(false)
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
try {
|
|
const data = await fetchKnowledgeRetrieveLogs({
|
|
knowledgeBaseId,
|
|
question: question.trim() || undefined,
|
|
channel: channel === "all" ? undefined : channel,
|
|
scene: scene === "all" ? undefined : scene,
|
|
answerStatus: answerStatus === "all" ? undefined : Number(answerStatus),
|
|
chunkProvider: chunkProvider === "all" ? undefined : chunkProvider,
|
|
rerankEnabled: rerankEnabled === "all" ? undefined : Number(rerankEnabled),
|
|
page,
|
|
limit,
|
|
})
|
|
setResult(data)
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("knowledge.loadRetrieveLogsFailed"))
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [answerStatus, channel, chunkProvider, knowledgeBaseId, limit, page, question, rerankEnabled, scene, t])
|
|
|
|
useEffect(() => {
|
|
void loadData()
|
|
}, [loadData])
|
|
|
|
useEffect(() => {
|
|
setPage(1)
|
|
setSelectedLogId(null)
|
|
setDetailOpen(false)
|
|
}, [knowledgeBaseId])
|
|
|
|
const emptyStateText = useMemo(() => {
|
|
if (!knowledgeBaseId) {
|
|
return t("knowledge.selectBaseForLogs")
|
|
}
|
|
if (loading) {
|
|
return t("knowledge.loadingRetrieveLogs")
|
|
}
|
|
return t("knowledge.emptyRetrieveLogs")
|
|
}, [knowledgeBaseId, loading, t])
|
|
|
|
function applyFilters() {
|
|
setQuestion(questionInput)
|
|
setPage(1)
|
|
}
|
|
|
|
function handleQuestionKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
|
|
if (event.key !== "Enter") {
|
|
return
|
|
}
|
|
event.preventDefault()
|
|
applyFilters()
|
|
}
|
|
|
|
function handleOpenDetail(logId: number) {
|
|
setSelectedLogId(logId)
|
|
setDetailOpen(true)
|
|
}
|
|
|
|
if (!knowledgeBaseId) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
|
{emptyStateText}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="flex h-full flex-col">
|
|
<div className="flex flex-col gap-3 border-b bg-background px-6 py-2">
|
|
<div className="grid gap-3 xl:grid-cols-[minmax(0,1.8fr)_repeat(5,minmax(0,0.8fr))_auto]">
|
|
<div className="relative">
|
|
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
value={questionInput}
|
|
onChange={(event) => setQuestionInput(event.target.value)}
|
|
onKeyDown={handleQuestionKeyDown}
|
|
placeholder={t("knowledge.filterQuestion")}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
<OptionCombobox value={channel} options={channelOptions} placeholder={t("knowledge.selectChannel")} onChange={setChannel} />
|
|
<OptionCombobox value={scene} options={sceneOptions} placeholder={t("knowledge.selectScene")} onChange={setScene} />
|
|
<OptionCombobox value={answerStatus} options={answerStatusOptions} placeholder={t("knowledge.answerStatus")} onChange={setAnswerStatus} />
|
|
<OptionCombobox value={chunkProvider} options={providerOptions} placeholder={t("knowledge.chunkStrategy")} onChange={setChunkProvider} />
|
|
<OptionCombobox value={rerankEnabled} options={rerankOptions} placeholder="Rerank" onChange={setRerankEnabled} />
|
|
<Button onClick={applyFilters}>{t("knowledge.filter")}</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 overflow-auto px-6 py-4">
|
|
<div className="overflow-hidden rounded-xl border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-42">{t("knowledge.time")}</TableHead>
|
|
<TableHead>{t("knowledge.question")}</TableHead>
|
|
<TableHead className="w-28">{t("knowledge.answerStatus")}</TableHead>
|
|
<TableHead className="w-24 text-right">{t("knowledge.hitCount")}</TableHead>
|
|
<TableHead className="w-24 text-right">TopScore</TableHead>
|
|
<TableHead className="w-28">Provider</TableHead>
|
|
<TableHead className="w-24">Rerank</TableHead>
|
|
<TableHead className="w-24 text-right">{t("knowledge.citations")}</TableHead>
|
|
<TableHead className="w-28 text-right">{t("knowledge.duration")}</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{result.results.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={9} className="h-32 text-center text-muted-foreground">
|
|
{emptyStateText}
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
result.results.map((item) => (
|
|
<TableRow
|
|
key={item.id}
|
|
className="cursor-pointer"
|
|
onClick={() => handleOpenDetail(item.id)}
|
|
>
|
|
<TableCell className="text-xs text-muted-foreground">{formatDateTime(item.createdAt)}</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-1">
|
|
<div className="line-clamp-2 font-medium">{item.question || "-"}</div>
|
|
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
|
<span>{channelLabel(item.channel, item.channelName, t)}</span>
|
|
<span>{sceneLabel(item.scene, item.sceneName, t)}</span>
|
|
{item.knowledgeBaseName ? <span>{item.knowledgeBaseName}</span> : null}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant={getAnswerStatusVariant(item.answerStatus)}>
|
|
{answerStatusLabel(item.answerStatus, item.answerStatusName, t)}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">{item.hitCount}</TableCell>
|
|
<TableCell className="text-right font-mono text-xs">{item.topScore.toFixed(4)}</TableCell>
|
|
<TableCell>{item.chunkProvider ? providerLabel(item.chunkProvider, t) : "-"}</TableCell>
|
|
<TableCell>{item.rerankEnabled ? `${t("knowledge.yes")} (${item.rerankLimit})` : t("knowledge.no")}</TableCell>
|
|
<TableCell className="text-right">{item.citationCount}</TableCell>
|
|
<TableCell className="text-right">{item.latencyMs} ms</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t px-6 py-4">
|
|
<ListPagination
|
|
page={result.page.page}
|
|
total={result.page.total}
|
|
limit={result.page.limit}
|
|
loading={loading}
|
|
onPageChange={setPage}
|
|
onLimitChange={(nextLimit) => {
|
|
setLimit(nextLimit)
|
|
setPage(1)
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<RetrieveLogDetailDrawer
|
|
open={detailOpen}
|
|
retrieveLogId={selectedLogId}
|
|
onOpenChange={setDetailOpen}
|
|
/>
|
|
</>
|
|
)
|
|
}
|