feat(knowledge): add FAQ Excel import export

This commit is contained in:
mlogclub
2026-06-01 13:57:49 +08:00
parent d8692b45cd
commit 8933e963f5
15 changed files with 1133 additions and 363 deletions
@@ -1,209 +1,36 @@
"use client";
"use client"
import { DownloadIcon, FileUpIcon, InfoIcon } from "lucide-react";
import { useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import { DownloadIcon, FileUpIcon, InfoIcon } from "lucide-react"
import { useMemo, useRef, useState } from "react"
import { toast } from "sonner"
import { ProjectDialog } from "@/components/project-dialog";
import { Button } from "@/components/ui/button";
import { OptionCombobox } from "@/components/option-combobox"
import { ProjectDialog } from "@/components/project-dialog"
import { Button } from "@/components/ui/button"
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { createKnowledgeFAQ, type CreateKnowledgeFAQPayload } from "@/lib/api/admin";
import { useI18n } from "@/i18n/provider";
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
downloadKnowledgeFAQImportTemplate,
importKnowledgeFAQs,
type KnowledgeFAQImportMode,
type KnowledgeFAQImportResult,
} from "@/lib/api/admin"
import { useI18n } from "@/i18n/provider"
type FAQImportDialogProps = {
open: boolean;
knowledgeBaseId: number | null;
importing: boolean;
onOpenChange: (open: boolean) => void;
onImportingChange: (importing: boolean) => void;
onImported: () => Promise<void>;
};
type ParsedFAQRow = {
rowNo: number;
question: string;
answer: string;
similarQuestions: string[];
remark: string;
};
type ParseResult = {
rows: ParsedFAQRow[];
warnings: string[];
};
type TFunction = (key: string, values?: Record<string, string | number>) => string;
const acceptedHeaderMap: Record<string, keyof Omit<ParsedFAQRow, "rowNo">> = {
question: "question",
answer: "answer",
similarquestions: "similarQuestions",
"similarQuestions": "similarQuestions",
remark: "remark",
"\u6807\u51c6\u95ee\u9898": "question",
"\u95ee\u9898": "question",
"\u7b54\u6848": "answer",
"\u76f8\u4f3c\u95ee": "similarQuestions",
"\u76f8\u4f3c\u95ee\u9898": "similarQuestions",
"\u5907\u6ce8": "remark",
};
function normalizeHeader(value: string) {
return value.trim().replace(/^\uFEFF/, "").toLowerCase();
}
function parseDelimitedText(input: string): string[][] {
const text = input.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
const rows: string[][] = [];
let row: string[] = [];
let cell = "";
let inQuotes = false;
let delimiter = ",";
function pushCell() {
row.push(cell.trim());
cell = "";
}
function pushRow() {
if (row.length === 1 && row[0] === "" && rows.length === 0) {
row = [];
return;
}
if (row.some((item) => item !== "")) {
rows.push(row);
}
row = [];
}
for (let i = 0; i < text.length; i += 1) {
const char = text[i];
const next = text[i + 1];
if (!inQuotes && rows.length === 0 && row.length === 0 && cell.length > 0 && char === "\t") {
delimiter = "\t";
}
if (char === '"') {
if (inQuotes && next === '"') {
cell += '"';
i += 1;
continue;
}
inQuotes = !inQuotes;
continue;
}
if (!inQuotes && char === delimiter) {
pushCell();
continue;
}
if (!inQuotes && char === "\n") {
pushCell();
pushRow();
continue;
}
cell += char;
}
if (cell.length > 0 || row.length > 0) {
pushCell();
pushRow();
}
return rows;
}
function parseSimilarQuestions(value: string) {
return value
.split(/\r?\n|\|/g)
.map((item) => item.trim())
.filter(Boolean);
}
function parseFAQFileContent(input: string, t: TFunction): ParseResult {
const table = parseDelimitedText(input);
if (table.length === 0) {
throw new Error(t("knowledge.fileEmpty"));
}
const headerRow = table[0];
const headerMap = new Map<keyof Omit<ParsedFAQRow, "rowNo">, number>();
for (let index = 0; index < headerRow.length; index += 1) {
const header = acceptedHeaderMap[normalizeHeader(headerRow[index])];
if (header && !headerMap.has(header)) {
headerMap.set(header, index);
}
}
if (!headerMap.has("question") || !headerMap.has("answer")) {
throw new Error(t("knowledge.missingFAQColumns"));
}
const rows: ParsedFAQRow[] = [];
const warnings: string[] = [];
for (let index = 1; index < table.length; index += 1) {
const current = table[index];
const rowNo = index + 1;
const question = current[headerMap.get("question") ?? -1]?.trim() ?? "";
const answer = current[headerMap.get("answer") ?? -1]?.trim() ?? "";
const similarQuestionsRaw = current[headerMap.get("similarQuestions") ?? -1]?.trim() ?? "";
const remark = current[headerMap.get("remark") ?? -1]?.trim() ?? "";
if (!question && !answer && !similarQuestionsRaw && !remark) {
continue;
}
if (!question || !answer) {
warnings.push(t("knowledge.skipRowMissingFAQ", { row: rowNo }));
continue;
}
rows.push({
rowNo,
question,
answer,
similarQuestions: parseSimilarQuestions(similarQuestionsRaw),
remark,
});
}
return { rows, warnings };
}
function downloadTemplate() {
const templateContent = [
"question,answer,similarQuestions,remark",
'"How do I reset my password?","Open profile settings and choose Reset Password.","forgot password|where is reset password","Account FAQ"',
'"Which channels are supported?","Web chat and WeCom customer service channels are currently supported.","available channels|supported channels","Channel guide"',
].join("\n");
const blob = new Blob([templateContent], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "knowledge-faq-import-template.csv";
link.click();
URL.revokeObjectURL(url);
}
function buildPayload(row: ParsedFAQRow, knowledgeBaseId: number): CreateKnowledgeFAQPayload {
return {
knowledgeBaseId,
question: row.question,
answer: row.answer,
similarQuestions: row.similarQuestions,
remark: row.remark,
};
open: boolean
knowledgeBaseId: number | null
importing: boolean
onOpenChange: (open: boolean) => void
onImportingChange: (importing: boolean) => void
onImported: () => Promise<void>
}
export function FAQImportDialog({
@@ -214,85 +41,86 @@ export function FAQImportDialog({
onImportingChange,
onImported,
}: FAQImportDialogProps) {
const t = useI18n();
const fileInputRef = useRef<HTMLInputElement | null>(null);
const [fileName, setFileName] = useState("");
const [rows, setRows] = useState<ParsedFAQRow[]>([]);
const [warnings, setWarnings] = useState<string[]>([]);
const t = useI18n()
const fileInputRef = useRef<HTMLInputElement | null>(null)
const [file, setFile] = useState<File | null>(null)
const [mode, setMode] = useState<KnowledgeFAQImportMode>("append")
const [result, setResult] = useState<KnowledgeFAQImportResult | null>(null)
const previewRows = useMemo(() => rows.slice(0, 5), [rows]);
const modeOptions = useMemo(
() => [
{ value: "append", label: t("knowledge.importModeAppend") },
{ value: "overwrite", label: t("knowledge.importModeOverwrite") },
],
[t],
)
function resetState() {
setFileName("");
setRows([]);
setWarnings([]);
setFile(null)
setMode("append")
setResult(null)
if (fileInputRef.current) {
fileInputRef.current.value = "";
fileInputRef.current.value = ""
}
}
async function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
const file = event.target.files?.[0];
if (!file) {
return;
function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
const nextFile = event.target.files?.[0] ?? null
setResult(null)
if (!nextFile) {
setFile(null)
return
}
try {
const content = await file.text();
const parsed = parseFAQFileContent(content, t);
setFileName(file.name);
setRows(parsed.rows);
setWarnings(parsed.warnings);
if (parsed.rows.length === 0) {
toast.error(t("knowledge.importNoRows"));
} else {
toast.success(t("knowledge.parsedFAQRows", { count: parsed.rows.length }));
if (!nextFile.name.toLowerCase().endsWith(".xlsx")) {
setFile(null)
if (fileInputRef.current) {
fileInputRef.current.value = ""
}
toast.error(t("knowledge.importXlsxOnly"))
return
}
setFile(nextFile)
}
async function handleDownloadTemplate() {
try {
await downloadKnowledgeFAQImportTemplate()
} catch (error) {
resetState();
toast.error(error instanceof Error ? error.message : t("knowledge.parseImportFailed"));
toast.error(error instanceof Error ? error.message : t("knowledge.downloadTemplateFailed"))
}
}
async function handleImport() {
if (!knowledgeBaseId || rows.length === 0 || importing) {
return;
if (!knowledgeBaseId || !file || importing) {
return
}
onImportingChange(true);
let successCount = 0;
const failedRows: string[] = [];
onImportingChange(true)
setResult(null)
try {
for (const row of rows) {
try {
await createKnowledgeFAQ(buildPayload(row, knowledgeBaseId));
successCount += 1;
} catch (error) {
failedRows.push(
t("knowledge.importRowFailed", {
row: row.rowNo,
message: error instanceof Error ? error.message : t("knowledge.importFailed"),
})
);
}
const data = await importKnowledgeFAQs({
knowledgeBaseId,
mode,
file,
})
setResult(data)
await onImported()
toast.success(
t("knowledge.importFAQResultToast", {
created: data.created,
updated: data.updated,
skipped: data.skipped,
failed: data.failed,
}),
)
if (data.failed === 0) {
resetState()
onOpenChange(false)
}
await onImported();
if (successCount > 0) {
toast.success(t("knowledge.importSuccess", { count: successCount }));
}
if (failedRows.length > 0) {
toast.error(t("knowledge.importSomeFailed", { count: failedRows.length }));
setWarnings((current) => [...current, ...failedRows]);
return;
}
resetState();
onOpenChange(false);
} catch (error) {
toast.error(error instanceof Error ? error.message : t("knowledge.importFailed"))
} finally {
onImportingChange(false);
onImportingChange(false)
}
}
@@ -301,33 +129,49 @@ export function FAQImportDialog({
open={open}
onOpenChange={(nextOpen) => {
if (!nextOpen && !importing) {
resetState();
resetState()
}
onOpenChange(nextOpen);
onOpenChange(nextOpen)
}}
title={t("knowledge.importFAQTitle")}
description={t("knowledge.importFAQDescription")}
size="lg"
footer={
<>
<Button type="button" variant="outline" onClick={() => downloadTemplate()}>
<Button type="button" variant="outline" onClick={() => void handleDownloadTemplate()}>
<DownloadIcon className="size-4" />
{t("knowledge.downloadTemplate")}
</Button>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={importing}>
{t("knowledge.cancel")}
</Button>
<Button type="button" onClick={() => void handleImport()} disabled={importing || rows.length === 0}>
{importing
? t("knowledge.importing")
: rows.length > 0
? t("knowledge.startImportWithCount", { count: rows.length })
: t("knowledge.startImport")}
<Button type="button" onClick={() => void handleImport()} disabled={importing || !file}>
{importing ? t("knowledge.importing") : t("knowledge.startImport")}
</Button>
</>
}
>
<FieldGroup>
<Field>
<FieldLabel>{t("knowledge.importMode")}</FieldLabel>
<FieldContent>
<OptionCombobox
value={mode}
options={modeOptions}
placeholder={t("knowledge.selectImportMode")}
searchPlaceholder={t("knowledge.searchImportMode")}
emptyText={t("knowledge.emptyImportMode")}
disabled={importing}
onChange={(value) => setMode(value as KnowledgeFAQImportMode)}
/>
<FieldDescription>
{mode === "overwrite"
? t("knowledge.importModeOverwriteDescription")
: t("knowledge.importModeAppendDescription")}
</FieldDescription>
</FieldContent>
</Field>
<Field>
<FieldLabel htmlFor="faq-import-file">{t("knowledge.importFile")}</FieldLabel>
<FieldContent>
@@ -336,79 +180,76 @@ export function FAQImportDialog({
id="faq-import-file"
ref={fileInputRef}
type="file"
accept=".csv,text/csv,.txt"
onChange={(event) => void handleFileChange(event)}
accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
disabled={importing}
onChange={handleFileChange}
/>
<Button
type="button"
variant="outline"
disabled={importing}
onClick={() => fileInputRef.current?.click()}
>
<FileUpIcon className="size-4" />
{t("knowledge.chooseFile")}
</Button>
</div>
<FieldDescription>
{t("knowledge.importFileDescription")}
</FieldDescription>
<FieldDescription>{t("knowledge.importFileDescription")}</FieldDescription>
</FieldContent>
</Field>
{fileName ? (
{file ? (
<div className="rounded-md border bg-muted/20 px-3 py-2 text-sm">
{t("knowledge.currentFile", { name: fileName })}
{t("knowledge.currentFile", { name: file.name })}
</div>
) : null}
{warnings.length > 0 ? (
<div className="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
<div className="mb-2 flex items-center gap-2 font-medium">
<InfoIcon className="size-4" />
{t("knowledge.importHint")}
</div>
<ul className="space-y-1">
{warnings.map((item, index) => (
<li key={`${item}-${index}`}>{item}</li>
))}
</ul>
<div className="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
<div className="mb-2 flex items-center gap-2 font-medium">
<InfoIcon className="size-4" />
{t("knowledge.importHint")}
</div>
) : null}
<div className="rounded-md border">
<div className="border-b px-4 py-3 text-sm font-medium">
{t("knowledge.importPreview")}
</div>
{previewRows.length > 0 ? (
<ScrollArea className="max-h-80">
<div className="divide-y">
{previewRows.map((row) => (
<div key={row.rowNo} className="space-y-2 px-4 py-3 text-sm">
<div>
<span className="text-muted-foreground">{t("knowledge.rowNumber", { row: row.rowNo })}</span>
</div>
<div>
<div className="font-medium">{row.question}</div>
<div className="mt-1 whitespace-pre-wrap text-muted-foreground">
{row.answer}
</div>
</div>
<div className="text-muted-foreground">
{t("knowledge.similarQuestionShort", {
value: row.similarQuestions.length > 0 ? row.similarQuestions.join(" / ") : t("knowledge.none"),
})}
</div>
<div className="text-muted-foreground">{t("knowledge.remark")}{row.remark || t("knowledge.none")}</div>
</div>
))}
</div>
</ScrollArea>
) : (
<div className="px-4 py-12 text-center text-sm text-muted-foreground">
{t("knowledge.previewAfterUpload")}
</div>
)}
<div>{t("knowledge.importXlsxHint")}</div>
</div>
{result ? (
<div className="rounded-md border">
<div className="border-b px-4 py-3 text-sm font-medium">
{t("knowledge.importResult")}
</div>
<div className="grid grid-cols-2 gap-3 p-4 text-sm sm:grid-cols-5">
<ImportMetric label={t("knowledge.importTotal")} value={result.total} />
<ImportMetric label={t("knowledge.importCreated")} value={result.created} />
<ImportMetric label={t("knowledge.importUpdated")} value={result.updated} />
<ImportMetric label={t("knowledge.importSkipped")} value={result.skipped} />
<ImportMetric label={t("knowledge.importFailedCount")} value={result.failed} />
</div>
{result.errors.length > 0 ? (
<ScrollArea className="max-h-64 border-t">
<ul className="divide-y text-sm">
{result.errors.map((item, index) => (
<li key={`${item.row}-${index}`} className="px-4 py-2">
{t("knowledge.importRowFailed", {
row: item.row,
message: item.message,
})}
</li>
))}
</ul>
</ScrollArea>
) : null}
</div>
) : null}
</FieldGroup>
</ProjectDialog>
);
)
}
function ImportMetric({ label, value }: { label: string; value: number }) {
return (
<div className="rounded-md bg-muted/30 px-3 py-2">
<div className="text-xs text-muted-foreground">{label}</div>
<div className="mt-1 text-lg font-semibold">{value}</div>
</div>
)
}
+31 -2
View File
@@ -9,6 +9,7 @@ import {
} from "@/components/ui/sheet"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import type { KnowledgeBase } from "@/lib/api/admin"
import { exportKnowledgeFAQs } from "@/lib/api/admin"
import { useI18n } from "@/i18n/provider"
import {
Bug,
@@ -18,9 +19,11 @@ import {
PanelLeftCloseIcon,
PanelLeftOpenIcon,
PlusIcon,
RefreshCwIcon
RefreshCwIcon,
UploadIcon,
} from "lucide-react"
import { useState } from "react"
import { toast } from "sonner"
import { DebugPanel } from "./_components/debug-panel"
import { DocumentList, type DocumentListActionState } from "./_components/document-list"
import { FAQList, type FAQListActionState } from "./_components/faq-list"
@@ -35,8 +38,24 @@ export default function DashboardKnowledgeDocumentsPage() {
const [activeTab, setActiveTab] = useState("documents")
const [documentActionState, setDocumentActionState] = useState<DocumentListActionState | null>(null)
const [faqActionState, setFAQActionState] = useState<FAQListActionState | null>(null)
const [exportingFAQ, setExportingFAQ] = useState(false)
const isFAQKnowledgeBase = selectedKnowledgeBase?.knowledgeType === "faq"
async function handleExportFAQ() {
if (!selectedKnowledgeBase || exportingFAQ) {
return
}
setExportingFAQ(true)
try {
await exportKnowledgeFAQs(selectedKnowledgeBase.id)
toast.success(t("knowledge.exportFAQSuccess"))
} catch (error) {
toast.error(error instanceof Error ? error.message : t("knowledge.exportFAQFailed"))
} finally {
setExportingFAQ(false)
}
}
return (
<div className="flex h-[calc(100vh-4rem)]">
<div
@@ -142,7 +161,17 @@ export default function DashboardKnowledgeDocumentsPage() {
disabled={faqActionState.importing}
aria-label={t("knowledge.importFAQ")}
>
<DownloadIcon className="size-4" />
<UploadIcon className="size-4" />
</Button>
<Button
variant="ghost"
size="icon"
className="size-7"
onClick={() => void handleExportFAQ()}
disabled={exportingFAQ}
aria-label={t("knowledge.exportFAQ")}
>
<DownloadIcon className={exportingFAQ ? "size-4 animate-pulse" : "size-4"} />
</Button>
<Button
variant="ghost"