wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add detail view functionality for documents and FAQs with localization support

Browse Source
This commit is contained in:
mlogclub
2026-06-02 19:55:26 +08:00
parent 9c7bf29b41
commit ffd2227e5e
6 changed files with 299 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/knowledge/_components/document-list.tsx
+36
View File
@@ -3,6 +3,7 @@
import {
FileTextIcon,
FolderInputIcon,
EyeIcon,
MoreHorizontalIcon,
PencilIcon,
SearchIcon,
@@ -61,6 +62,7 @@ import {
} from "@/lib/generated/enums";
import { cn, formatDateTime } from "@/lib/utils";
import { DocumentEditDialog } from "./document-edit";
import { KnowledgeContentDetailDialog } from "./knowledge-content-detail";
import { KnowledgeBulkMoveDialog } from "./knowledge-bulk-move-dialog";
import { KnowledgeDirectoryPanel } from "./knowledge-directory-panel";
@@ -154,6 +156,8 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [moveTargetIds, setMoveTargetIds] = useState<number[]>([]);
const [contextMenuDocumentId, setContextMenuDocumentId] = useState<number | null>(null);
const [detailItemId, setDetailItemId] = useState<number | null>(null);
const [detailOpen, setDetailOpen] = useState(false);
const [selectedDirectoryId, setSelectedDirectoryId] = useState<number | null>(null);
const [actionLoadingMap, setActionLoadingMap] = useState<Record<number, { rebuildIndex: boolean; delete: boolean }>>({});
const [dialogOpen, setDialogOpen] = useState(false);
@@ -302,6 +306,11 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
setDialogOpen(true);
}
function openDetailDialog(item: KnowledgeDocumentListItem) {
setDetailItemId(item.id);
setDetailOpen(true);
}
function handleDialogOpenChange(open: boolean) {
if (saving) {
return;
@@ -544,6 +553,10 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
<MoreHorizontalIcon className="size-3.5" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-32 min-w-32">
<DropdownMenuItem onClick={() => openDetailDialog(item)}>
<EyeIcon className="mr-2 size-3.5" />
{t("knowledge.view")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => openEditDialog(item)}>
<PencilIcon className="mr-2 size-3.5" />
{t("knowledge.edit")}
@@ -569,6 +582,10 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
</div>
</ContextMenuTrigger>
<ContextMenuContent className="w-40">
<ContextMenuItem onClick={() => openDetailDialog(item)}>
<EyeIcon className="mr-2 size-3.5" />
{t("knowledge.view")}
</ContextMenuItem>
<ContextMenuItem onClick={() => openEditDialog(item)}>
<PencilIcon className="mr-2 size-3.5" />
{t("knowledge.edit")}
@@ -638,6 +655,10 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
<MoreHorizontalIcon className="size-3.5" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-32 min-w-32">
<DropdownMenuItem onClick={() => openDetailDialog(item)}>
<EyeIcon className="mr-2 size-3.5" />
{t("knowledge.view")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => openEditDialog(item)}>
<PencilIcon className="mr-2 size-3.5" />
{t("knowledge.edit")}
@@ -662,6 +683,10 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
</div>
</ContextMenuTrigger>
<ContextMenuContent className="w-40">
<ContextMenuItem onClick={() => openDetailDialog(item)}>
<EyeIcon className="mr-2 size-3.5" />
{t("knowledge.view")}
</ContextMenuItem>
<ContextMenuItem onClick={() => openEditDialog(item)}>
<PencilIcon className="mr-2 size-3.5" />
{t("knowledge.edit")}
@@ -757,6 +782,17 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
onOpenChange={handleDialogOpenChange}
onSubmit={handleSubmit}
/>
<KnowledgeContentDetailDialog
open={detailOpen}
type="document"
itemId={detailItemId}
onOpenChange={(open) => {
setDetailOpen(open);
if (!open) {
setDetailItemId(null);
}
}}
/>
<KnowledgeBulkMoveDialog
open={bulkMoveOpen}
knowledgeBaseId={knowledgeBaseId}
web/app/dashboard/knowledge/_components/faq-list.tsx
+28
View File
@@ -1,6 +1,7 @@
"use client";
import {
EyeIcon,
FolderInputIcon,
MoreHorizontalIcon,
PencilIcon,
@@ -58,6 +59,7 @@ import { useI18n } from "@/i18n/provider";
import { cn, formatDateTime } from "@/lib/utils";
import { FAQEditDialog } from "./faq-edit";
import { FAQImportDialog } from "./faq-import-dialog";
import { KnowledgeContentDetailDialog } from "./knowledge-content-detail";
import { KnowledgeBulkMoveDialog } from "./knowledge-bulk-move-dialog";
import { KnowledgeDirectoryPanel } from "./knowledge-directory-panel";
@@ -143,6 +145,8 @@ export function FAQList({
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [moveTargetIds, setMoveTargetIds] = useState<number[]>([]);
const [contextMenuFAQId, setContextMenuFAQId] = useState<number | null>(null);
const [detailItemId, setDetailItemId] = useState<number | null>(null);
const [detailOpen, setDetailOpen] = useState(false);
const [importing, setImporting] = useState(false);
const [importDialogOpen, setImportDialogOpen] = useState(false);
const [selectedDirectoryId, setSelectedDirectoryId] = useState<number | null>(null);
@@ -263,6 +267,11 @@ export function FAQList({
setDialogOpen(true);
}
function openDetailDialog(item: KnowledgeFAQ) {
setDetailItemId(item.id);
setDetailOpen(true);
}
function handleDialogOpenChange(open: boolean) {
if (saving) {
return;
@@ -475,6 +484,10 @@ export function FAQList({
<MoreHorizontalIcon className="size-3.5" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-32 min-w-32">
<DropdownMenuItem onClick={() => openDetailDialog(item)}>
<EyeIcon className="mr-2 size-3.5" />
{t("knowledge.view")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => openEditDialog(item)}>
<PencilIcon className="mr-2 size-3.5" />
{t("knowledge.edit")}
@@ -499,6 +512,10 @@ export function FAQList({
</div>
</ContextMenuTrigger>
<ContextMenuContent className="w-40">
<ContextMenuItem onClick={() => openDetailDialog(item)}>
<EyeIcon className="mr-2 size-3.5" />
{t("knowledge.view")}
</ContextMenuItem>
<ContextMenuItem onClick={() => openEditDialog(item)}>
<PencilIcon className="mr-2 size-3.5" />
{t("knowledge.edit")}
@@ -594,6 +611,17 @@ export function FAQList({
onOpenChange={handleDialogOpenChange}
onSubmit={handleSubmit}
/>
<KnowledgeContentDetailDialog
open={detailOpen}
type="faq"
itemId={detailItemId}
onOpenChange={(open) => {
setDetailOpen(open);
if (!open) {
setDetailItemId(null);
}
}}
/>
<FAQImportDialog
open={importDialogOpen}
web/app/dashboard/knowledge/_components/knowledge-content-detail.tsx
+211
View File
@@ -0,0 +1,211 @@
"use client";
import { useEffect, useState } from "react";
import { ProjectDialog } from "@/components/project-dialog";
import { SafeRichHTML } from "@/components/safe-rich-html";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
fetchKnowledgeDocument,
fetchKnowledgeFAQ,
type KnowledgeDocument,
type KnowledgeFAQ,
} from "@/lib/api/admin";
import { markdownToHtml } from "@/components/content-editor/convert";
import { KnowledgeDocumentContentType } from "@/lib/generated/enums";
import { useI18n } from "@/i18n/provider";
import { formatDateTime } from "@/lib/utils";
type KnowledgeContentDetailDialogProps = {
open: boolean;
type: "document" | "faq";
itemId: number | null;
onOpenChange: (open: boolean) => void;
};
type DetailFieldProps = {
label: string;
value: string;
};
function DetailField({ label, value }: DetailFieldProps) {
return (
<div className="min-w-0 space-y-1">
<div className="text-xs text-muted-foreground">{label}</div>
<div className="truncate text-sm">{value || "-"}</div>
</div>
);
}
function getDirectoryLabel(item: KnowledgeDocument | KnowledgeFAQ, rootLabel: string) {
return item.directoryPath || item.directoryName || (item.directoryId === 0 ? rootLabel : "-");
}
function renderDocumentContent(item: KnowledgeDocument) {
if (item.contentType === KnowledgeDocumentContentType.Markdown) {
return markdownToHtml(item.content || "");
}
return item.content || "";
}
export function KnowledgeContentDetailDialog({
open,
type,
itemId,
onOpenChange,
}: KnowledgeContentDetailDialogProps) {
const t = useI18n();
const [loading, setLoading] = useState(false);
const [documentDetail, setDocumentDetail] = useState<KnowledgeDocument | null>(null);
const [faqDetail, setFAQDetail] = useState<KnowledgeFAQ | null>(null);
useEffect(() => {
if (!open || !itemId) {
return;
}
const id = itemId;
let cancelled = false;
async function loadDetail() {
setLoading(true);
try {
if (type === "document") {
const data = await fetchKnowledgeDocument(id);
if (!cancelled) {
setDocumentDetail(data);
setFAQDetail(null);
}
return;
}
const data = await fetchKnowledgeFAQ(id);
if (!cancelled) {
setFAQDetail(data);
setDocumentDetail(null);
}
} finally {
if (!cancelled) {
setLoading(false);
}
}
}
void loadDetail();
return () => {
cancelled = true;
};
}, [itemId, open, type]);
const item = type === "document" ? documentDetail : faqDetail;
const title =
type === "document"
? documentDetail?.title || t("knowledge.viewDocumentTitle")
: faqDetail?.question || t("knowledge.viewFAQTitle");
return (
<ProjectDialog
open={open}
onOpenChange={onOpenChange}
title={title}
size="xl"
allowFullscreen
footer={
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
{t("common.close")}
</Button>
}
>
{loading || !item ? (
<div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
{t("knowledge.loading")}
</div>
) : (
<div className="space-y-5">
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
<DetailField
label={t("knowledge.directory")}
value={getDirectoryLabel(item, t("knowledge.rootContent"))}
/>
<div className="space-y-1">
<div className="text-xs text-muted-foreground">{t("knowledge.status")}</div>
<Badge variant="outline">{item.statusName || item.status}</Badge>
</div>
<div className="space-y-1">
<div className="text-xs text-muted-foreground">{t("knowledge.indexStatus")}</div>
<Badge variant="secondary">{item.indexStatusName || item.indexStatus}</Badge>
</div>
<DetailField
label={t("knowledge.createdAt")}
value={formatDateTime(item.createdAt)}
/>
<DetailField
label={t("knowledge.updatedAt")}
value={formatDateTime(item.updatedAt)}
/>
<DetailField
label={t("knowledge.createUser")}
value={item.createUserName || "-"}
/>
<DetailField
label={t("knowledge.updateUser")}
value={item.updateUserName || "-"}
/>
<DetailField
label={t("knowledge.indexedAtLabel")}
value={item.indexedAt ? formatDateTime(item.indexedAt) : "-"}
/>
</div>
{item.indexError ? (
<div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
{item.indexError}
</div>
) : null}
{type === "document" && documentDetail ? (
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="text-sm font-medium">{t("knowledge.content")}</div>
<Badge variant="outline">{documentDetail.contentType || "-"}</Badge>
</div>
<div className="max-h-[52vh] overflow-auto rounded-md border bg-background p-4">
<SafeRichHTML html={renderDocumentContent(documentDetail)} />
</div>
</div>
) : null}
{type === "faq" && faqDetail ? (
<div className="space-y-5">
<div className="space-y-2">
<div className="text-sm font-medium">{t("knowledge.standardQuestion")}</div>
<div className="rounded-md border bg-muted/20 p-3 text-sm">{faqDetail.question}</div>
</div>
<div className="space-y-2">
<div className="text-sm font-medium">{t("knowledge.answer")}</div>
<pre className="max-h-[36vh] overflow-auto whitespace-pre-wrap rounded-md border bg-muted/20 p-4 text-sm leading-6">
{faqDetail.answer || "-"}
</pre>
</div>
{faqDetail.similarQuestions.length > 0 ? (
<div className="space-y-2">
<div className="text-sm font-medium">{t("knowledge.similarQuestions")}</div>
<div className="flex flex-wrap gap-2">
{faqDetail.similarQuestions.map((question) => (
<Badge key={question} variant="outline">
{question}
</Badge>
))}
</div>
</div>
) : null}
{faqDetail.remark ? (
<div className="space-y-2">
<div className="text-sm font-medium">{t("knowledge.remark")}</div>
<div className="rounded-md border bg-muted/20 p-3 text-sm">{faqDetail.remark}</div>
</div>
) : null}
</div>
) : null}
</div>
)}
</ProjectDialog>
);
}
web/components/safe-rich-html.tsx
+10 -2
View File
@@ -26,17 +26,24 @@ const allowedTags = new Set([
"h6",
"hr",
"i",
"img",
"li",
"ol",
"p",
"pre",
"span",
"strong",
"table",
"tbody",
"td",
"th",
"thead",
"tr",
"u",
"ul",
])
const allowedAttrs = new Set(["class", "href", "rel", "target", "title"])
const allowedAttrs = new Set(["alt", "class", "height", "href", "rel", "src", "target", "title", "width"])
function escapeHTML(value: string) {
return value
@@ -101,7 +108,7 @@ function sanitizeRichHTML(value: string) {
element.removeAttribute(attr.name)
continue
}
if (name === "href" && !isSafeURL(attrValue)) {
if ((name === "href" || name === "src") && !isSafeURL(attrValue)) {
element.removeAttribute(attr.name)
}
}
@@ -140,6 +147,7 @@ export function SafeRichHTML({ html, fallback = "-", className }: SafeRichHTMLPr
<div
className={cn(
"break-words text-sm leading-6 [&_a]:text-primary [&_a]:underline [&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-muted-foreground/40 [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_h1]:mb-2 [&_h1]:text-lg [&_h1]:font-semibold [&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_h3]:mb-1 [&_h3]:font-semibold [&_li]:my-1 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:m-0 [&_p+*]:mt-2 [&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_strong]:font-semibold [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5",
"break-words text-sm leading-6 [&_a]:text-primary [&_a]:underline [&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-muted-foreground/40 [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_h1]:mb-2 [&_h1]:text-lg [&_h1]:font-semibold [&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_h3]:mb-1 [&_h3]:font-semibold [&_img]:my-3 [&_img]:max-w-full [&_img]:rounded-md [&_li]:my-1 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:m-0 [&_p+*]:mt-2 [&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_strong]:font-semibold [&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:bg-muted [&_th]:px-2 [&_th]:py-1 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5",
className,
)}
dangerouslySetInnerHTML={{ __html: safeHTML }}
web/messages/en-US.json
+7
View File
@@ -1764,6 +1764,7 @@
"ragDebug": "RAG Debug",
"title": "Knowledge Base",
"allStatus": "All statuses",
"status": "Status",
"statusOk": "Enabled",
"statusDisabled": "Disabled",
"statusDeleted": "Deleted",
@@ -1793,6 +1794,7 @@
"sortUpdated": "Knowledge base order updated.",
"sortUpdateFailed": "Could not update knowledge base order.",
"moreActions": "More actions for {name}",
"view": "View",
"edit": "Edit",
"rebuilding": "Rebuilding...",
"rebuildIndex": "Rebuild Index",
@@ -1902,6 +1904,7 @@
"contentRequired": "Content is required.",
"editDocumentTitle": "Edit Document",
"createDocumentTitle": "New Document",
"viewDocumentTitle": "View Document",
"documentTitle": "Title",
"documentTitlePlaceholder": "Document title",
"content": "Content",
@@ -1918,8 +1921,11 @@
"searchFAQ": "Search FAQs by question",
"question": "Question",
"indexStatus": "Index Status",
"indexedAtLabel": "Indexed At",
"similarQuestions": "Similar Questions",
"updatedAt": "Updated",
"createUser": "Created By",
"updateUser": "Updated By",
"actions": "Actions",
"emptyFAQ": "This knowledge base has no FAQs yet",
"faqQuestionRequired": "Question is required.",
@@ -1927,6 +1933,7 @@
"faqAnswerRequired": "Answer is required.",
"editFAQTitle": "Edit FAQ",
"createFAQTitle": "New FAQ",
"viewFAQTitle": "View FAQ",
"standardQuestion": "Primary Question",
"questionPlaceholder": "Enter the primary question",
"answer": "Answer",
web/messages/zh-CN.json
+7
View File
@@ -1573,6 +1573,7 @@
},
"skillDefinition": {
"allStatus": "全部状态",
"status": "状态",
"statusOk": "启用",
"statusDisabled": "停用",
"statusDeleted": "已删除",
@@ -1793,6 +1794,7 @@
"sortUpdated": "知识库排序已更新",
"sortUpdateFailed": "更新知识库排序失败",
"moreActions": "更多操作 {name}",
"view": "查看",
"edit": "编辑",
"rebuilding": "重建中...",
"rebuildIndex": "重建索引",
@@ -1902,6 +1904,7 @@
"contentRequired": "内容不能为空",
"editDocumentTitle": "编辑文档",
"createDocumentTitle": "新建文档",
"viewDocumentTitle": "查看文档",
"documentTitle": "标题",
"documentTitlePlaceholder": "文档标题",
"content": "内容",
@@ -1918,8 +1921,11 @@
"searchFAQ": "按问题搜索FAQ",
"question": "问题",
"indexStatus": "索引状态",
"indexedAtLabel": "索引时间",
"similarQuestions": "相似问题",
"updatedAt": "更新时间",
"createUser": "创建人",
"updateUser": "更新人",
"actions": "操作",
"emptyFAQ": "当前知识库还没有FAQ",
"faqQuestionRequired": "问题不能为空",
@@ -1927,6 +1933,7 @@
"faqAnswerRequired": "答案不能为空",
"editFAQTitle": "编辑FAQ",
"createFAQTitle": "新建FAQ",
"viewFAQTitle": "查看FAQ",
"standardQuestion": "标准问题",
"questionPlaceholder": "请输入标准问题",
"answer": "答案",