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>
+  );
+}