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

web/app/dashboard/knowledge/_components/document-list.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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": "答案",