Update 2026-05-13 16:43:53
This commit is contained in:
yi
@@ -0,0 +1,624 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Save, Loader2, RefreshCw, Pencil, Trash2, FileText, Plus, BookOpen, GripVertical } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { useProjectStore } from "@/store/projectStore";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { KnowledgeBaseForm, type KnowledgeBaseFormValues } from "@/components/KnowledgeBaseForm";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors
|
||||
} from '@dnd-kit/core';
|
||||
import type { DragEndEvent } from '@dnd-kit/core';
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
rectSortingStrategy,
|
||||
useSortable
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
|
||||
interface KnowledgeBase {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
project_id?: number | null;
|
||||
embedding_model?: string | null;
|
||||
chunk_size: number;
|
||||
chunk_overlap: number;
|
||||
top_k: number;
|
||||
is_active: boolean;
|
||||
updated_at: string;
|
||||
documents?: Array<{ id: string }>;
|
||||
}
|
||||
|
||||
interface KnowledgeDocument {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
metadata?: Record<string, unknown>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
const defaultKnowledgeDocumentForm = {
|
||||
title: '',
|
||||
content: '',
|
||||
metadata: '',
|
||||
};
|
||||
|
||||
export function KnowledgeBases() {
|
||||
const { t } = useTranslation();
|
||||
const { currentProject } = useProjectStore();
|
||||
const [knowledgeBases, setKnowledgeBases] = useState<KnowledgeBase[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// KB Form Dialog State
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [editingKb, setEditingKb] = useState<KnowledgeBase | null>(null);
|
||||
const [isSavingKb, setIsSavingKb] = useState(false);
|
||||
const [reindexingKbId, setReindexingKbId] = useState('');
|
||||
|
||||
// Docs Dialog State
|
||||
const [docsDialogOpen, setDocsDialogOpen] = useState(false);
|
||||
const [selectedKbForDocs, setSelectedKbForDocs] = useState<KnowledgeBase | null>(null);
|
||||
const [knowledgeDocuments, setKnowledgeDocuments] = useState<KnowledgeDocument[]>([]);
|
||||
const [isLoadingDocs, setIsLoadingDocs] = useState(false);
|
||||
|
||||
// Doc Form State inside Docs Dialog
|
||||
const [isSavingDoc, setIsSavingDoc] = useState(false);
|
||||
const [editingDocId, setEditingDocId] = useState('');
|
||||
const [docForm, setDocForm] = useState(defaultKnowledgeDocumentForm);
|
||||
const [uploadingDocs, setUploadingDocs] = useState(false);
|
||||
const [uploadFiles, setUploadFiles] = useState<File[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
void fetchKnowledgeBases();
|
||||
}, [currentProject?.id]);
|
||||
|
||||
const fetchKnowledgeBases = async () => {
|
||||
if (!currentProject) {
|
||||
setKnowledgeBases([]);
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await api.get<KnowledgeBase[]>(`/api/v1/knowledge-bases?project_id=${currentProject.id}`);
|
||||
|
||||
// 从 localStorage 中恢复顺序
|
||||
const savedOrderStr = localStorage.getItem(`knowledge_bases_order_${currentProject.id}`);
|
||||
if (savedOrderStr) {
|
||||
try {
|
||||
const savedOrder = JSON.parse(savedOrderStr) as string[];
|
||||
data.sort((a, b) => {
|
||||
const indexA = savedOrder.indexOf(a.id);
|
||||
const indexB = savedOrder.indexOf(b.id);
|
||||
if (indexA === -1 && indexB === -1) return 0;
|
||||
if (indexA === -1) return 1;
|
||||
if (indexB === -1) return -1;
|
||||
return indexA - indexB;
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Failed to parse saved kb order", e);
|
||||
}
|
||||
}
|
||||
|
||||
setKnowledgeBases(data);
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateKb = () => {
|
||||
setEditingKb(null);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleEditKb = (kb: KnowledgeBase) => {
|
||||
setEditingKb(kb);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleSaveKb = async (data: KnowledgeBaseFormValues) => {
|
||||
if (!currentProject) return;
|
||||
setIsSavingKb(true);
|
||||
try {
|
||||
const payload = {
|
||||
...data,
|
||||
project_id: currentProject.id,
|
||||
};
|
||||
if (editingKb) {
|
||||
await api.put(`/api/v1/knowledge-bases/${editingKb.id}`, payload);
|
||||
} else {
|
||||
await api.post('/api/v1/knowledge-bases', payload);
|
||||
}
|
||||
setIsFormOpen(false);
|
||||
await fetchKnowledgeBases();
|
||||
} finally {
|
||||
setIsSavingKb(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteKb = async (id: string) => {
|
||||
if (!window.confirm(t('confirmDeleteKnowledgeBase', 'Are you sure to delete this knowledge base?'))) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await api.delete(`/api/v1/knowledge-bases/${id}`);
|
||||
await fetchKnowledgeBases();
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReindexKb = async (id: string) => {
|
||||
setReindexingKbId(id);
|
||||
try {
|
||||
await api.post(`/api/v1/knowledge-bases/${id}/reindex`, {});
|
||||
alert(t('knowledgeBaseReindexSuccess', 'Knowledge base reindexed successfully'));
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
alert(t('knowledgeBaseReindexFailed', 'Failed to reindex knowledge base'));
|
||||
} finally {
|
||||
setReindexingKbId('');
|
||||
}
|
||||
};
|
||||
|
||||
// --- Document Management Methods ---
|
||||
|
||||
const handleManageDocs = async (kb: KnowledgeBase) => {
|
||||
setSelectedKbForDocs(kb);
|
||||
setDocsDialogOpen(true);
|
||||
setEditingDocId('');
|
||||
setDocForm(defaultKnowledgeDocumentForm);
|
||||
await fetchKnowledgeDocuments(kb.id);
|
||||
};
|
||||
|
||||
const fetchKnowledgeDocuments = async (kbId: string) => {
|
||||
if (!kbId) return;
|
||||
setIsLoadingDocs(true);
|
||||
try {
|
||||
const data = await api.get<KnowledgeDocument[]>(`/api/v1/knowledge-bases/${kbId}/documents`);
|
||||
setKnowledgeDocuments(data);
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setIsLoadingDocs(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetDocForm = () => {
|
||||
setEditingDocId('');
|
||||
setDocForm(defaultKnowledgeDocumentForm);
|
||||
};
|
||||
|
||||
const handleSaveDoc = async () => {
|
||||
if (!selectedKbForDocs) return;
|
||||
if (!docForm.title.trim() || !docForm.content.trim()) {
|
||||
alert(t('knowledgeDocumentTitleRequired', 'Document title and content are required'));
|
||||
return;
|
||||
}
|
||||
|
||||
let parsedMetadata = {};
|
||||
if (docForm.metadata.trim()) {
|
||||
try {
|
||||
parsedMetadata = JSON.parse(docForm.metadata.trim());
|
||||
} catch {
|
||||
alert(t('knowledgeDocumentMetadataInvalid', 'Document metadata must be valid JSON'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setIsSavingDoc(true);
|
||||
try {
|
||||
const payload = {
|
||||
title: docForm.title.trim(),
|
||||
content: docForm.content.trim(),
|
||||
metadata: parsedMetadata,
|
||||
};
|
||||
|
||||
if (editingDocId) {
|
||||
await api.put(`/api/v1/knowledge-bases/${selectedKbForDocs.id}/documents/${editingDocId}`, payload);
|
||||
} else {
|
||||
await api.post(`/api/v1/knowledge-bases/${selectedKbForDocs.id}/documents`, payload);
|
||||
}
|
||||
resetDocForm();
|
||||
await fetchKnowledgeDocuments(selectedKbForDocs.id);
|
||||
await fetchKnowledgeBases(); // To update doc count
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setIsSavingDoc(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditDoc = (doc: KnowledgeDocument) => {
|
||||
setEditingDocId(doc.id);
|
||||
setDocForm({
|
||||
title: doc.title || '',
|
||||
content: doc.content || '',
|
||||
metadata: doc.metadata && Object.keys(doc.metadata).length > 0 ? JSON.stringify(doc.metadata, null, 2) : '',
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteDoc = async (docId: string) => {
|
||||
if (!selectedKbForDocs) return;
|
||||
if (!window.confirm(t('confirmDeleteKnowledgeDocument', 'Are you sure to delete this document?'))) return;
|
||||
try {
|
||||
await api.delete(`/api/v1/knowledge-bases/${selectedKbForDocs.id}/documents/${docId}`);
|
||||
if (editingDocId === docId) resetDocForm();
|
||||
await fetchKnowledgeDocuments(selectedKbForDocs.id);
|
||||
await fetchKnowledgeBases();
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadDocs = async () => {
|
||||
if (!selectedKbForDocs || uploadFiles.length === 0) return;
|
||||
setUploadingDocs(true);
|
||||
try {
|
||||
const formData = new FormData();
|
||||
uploadFiles.forEach((file) => formData.append('files', file));
|
||||
await api.post(`/api/v1/knowledge-bases/${selectedKbForDocs.id}/documents/upload`, formData);
|
||||
setUploadFiles([]);
|
||||
await fetchKnowledgeDocuments(selectedKbForDocs.id);
|
||||
await fetchKnowledgeBases();
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
alert(t('knowledgeDocumentUploadFailed', 'Failed to upload knowledge documents'));
|
||||
} finally {
|
||||
setUploadingDocs(false);
|
||||
}
|
||||
};
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8,
|
||||
},
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
);
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
if (over && active.id !== over.id) {
|
||||
setKnowledgeBases((items) => {
|
||||
const oldIndex = items.findIndex((item) => item.id === active.id);
|
||||
const newIndex = items.findIndex((item) => item.id === over.id);
|
||||
|
||||
const newItems = arrayMove(items, oldIndex, newIndex);
|
||||
|
||||
// 保存新的顺序到 localStorage
|
||||
if (currentProject) {
|
||||
localStorage.setItem(
|
||||
`knowledge_bases_order_${currentProject.id}`,
|
||||
JSON.stringify(newItems.map(i => i.id))
|
||||
);
|
||||
}
|
||||
|
||||
return newItems;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const SortableKbCard = ({ kb }: { kb: KnowledgeBase }) => {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging
|
||||
} = useSortable({ id: kb.id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`group relative bg-background border border-border rounded-xl p-5 hover:shadow-md transition-all hover:border-border
|
||||
${isDragging ? 'opacity-50 z-50 ring-2 ring-indigo-500 shadow-xl' : ''}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="cursor-grab active:cursor-grabbing p-1 -ml-2 text-muted-foreground/50 hover:text-foreground/80 transition-colors"
|
||||
title="Drag to reorder"
|
||||
>
|
||||
<GripVertical className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||||
<BookOpen className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground flex items-center gap-2">
|
||||
{kb.name}
|
||||
{!kb.is_active && (
|
||||
<span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-muted text-muted-foreground">Inactive</span>
|
||||
)}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground font-mono mt-0.5">
|
||||
{kb.documents?.length || 0} Documents
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-blue-600" onClick={() => handleManageDocs(kb)} title={t('manageKnowledgeDocuments')}>
|
||||
<FileText className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-green-600" onClick={() => handleReindexKb(kb.id)} disabled={reindexingKbId === kb.id} title={t('reindexKnowledgeBase')}>
|
||||
{reindexingKbId === kb.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-muted-foreground" onClick={() => handleEditKb(kb)} title={t('editKnowledgeBase')}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-red-600 hover:bg-red-50" onClick={() => handleDeleteKb(kb.id)} title={t('deleteKnowledgeBase')}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 ml-8">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Model</span>
|
||||
<span className="font-medium text-foreground/80 truncate max-w-[150px]" title={kb.embedding_model || 'Default'}>
|
||||
{kb.embedding_model ? kb.embedding_model.substring(0, 15) + (kb.embedding_model.length > 15 ? '...' : '') : 'Default'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Chunking</span>
|
||||
<span className="font-medium text-foreground/80">
|
||||
{kb.chunk_size} / {kb.chunk_overlap}
|
||||
</span>
|
||||
</div>
|
||||
{kb.description && (
|
||||
<p className="text-xs text-muted-foreground mt-3 line-clamp-2" title={kb.description}>
|
||||
{kb.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-background">
|
||||
<div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
|
||||
<div className="flex items-center gap-2 text-foreground/80 font-medium">
|
||||
<BookOpen className="h-5 w-5 text-indigo-500" />
|
||||
{t('knowledgeBases')}
|
||||
</div>
|
||||
<Button onClick={handleCreateKb} className="h-9 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white gap-2 rounded-md px-3" disabled={!currentProject}>
|
||||
<Plus className="h-4 w-4" />
|
||||
{t('createKnowledgeBase', 'New Knowledge Base')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto p-8">
|
||||
{!currentProject ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-md p-4">
|
||||
{t('selectProjectBeforeManageKnowledgeBase')}
|
||||
</div>
|
||||
</div>
|
||||
) : isLoading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : knowledgeBases.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-border rounded-xl bg-muted/50/50">
|
||||
<BookOpen className="h-10 w-10 text-muted-foreground/50 mb-3" />
|
||||
<p className="text-muted-foreground font-medium">{t('noKnowledgeBases')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={knowledgeBases.map(kb => kb.id)}
|
||||
strategy={rectSortingStrategy}
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{knowledgeBases.map((kb) => (
|
||||
<SortableKbCard key={kb.id} kb={kb} />
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Form Dialog */}
|
||||
<Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
|
||||
<DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingKb ? t('updateKnowledgeBase', 'Edit Knowledge Base') : t('createKnowledgeBase', 'New Knowledge Base')}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<KnowledgeBaseForm
|
||||
initialData={editingKb ? {
|
||||
name: editingKb.name,
|
||||
description: editingKb.description || '',
|
||||
embedding_model: editingKb.embedding_model || '',
|
||||
chunk_size: editingKb.chunk_size,
|
||||
chunk_overlap: editingKb.chunk_overlap,
|
||||
top_k: editingKb.top_k,
|
||||
is_active: editingKb.is_active,
|
||||
} : null}
|
||||
onSubmit={handleSaveKb}
|
||||
onCancel={() => setIsFormOpen(false)}
|
||||
isSubmitting={isSavingKb}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Docs Management Dialog */}
|
||||
<Dialog open={docsDialogOpen} onOpenChange={(open) => {
|
||||
setDocsDialogOpen(open);
|
||||
if (!open) {
|
||||
setSelectedKbForDocs(null);
|
||||
setKnowledgeDocuments([]);
|
||||
}
|
||||
}}>
|
||||
<DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col overflow-hidden">
|
||||
<DialogHeader className="px-6 py-4 border-b border-border shrink-0">
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<FileText className="h-5 w-5 text-indigo-500" />
|
||||
{selectedKbForDocs ? t('knowledgeDocumentManagerTitle', { name: selectedKbForDocs.name }) : 'Manage Documents'}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
{/* Upload Section */}
|
||||
<div className="rounded-lg border border-border p-4 bg-muted/30">
|
||||
<div className="text-sm font-medium text-foreground mb-1">{t('knowledgeDocumentUploadTitle')}</div>
|
||||
<div className="text-xs text-muted-foreground mb-3">{t('knowledgeDocumentUploadHint')}</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Input
|
||||
type="file"
|
||||
multiple
|
||||
onChange={(e) => setUploadFiles(Array.from(e.target.files || []))}
|
||||
disabled={uploadingDocs}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button onClick={handleUploadDocs} disabled={uploadingDocs || uploadFiles.length === 0} className="shrink-0">
|
||||
{uploadingDocs ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Plus className="h-4 w-4 mr-2" />}
|
||||
{t('knowledgeDocumentUploadAction')}
|
||||
</Button>
|
||||
</div>
|
||||
{uploadFiles.length > 0 && (
|
||||
<div className="text-xs text-muted-foreground mt-2">
|
||||
{t('knowledgeDocumentUploadSelected', { count: uploadFiles.length })}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Edit/Create Doc Form */}
|
||||
<div className="rounded-lg border border-border p-4">
|
||||
<div className="text-sm font-medium text-foreground mb-3">
|
||||
{editingDocId ? t('updateKnowledgeDocument') : t('createKnowledgeDocument')}
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="doc-title">{t('knowledgeDocumentTitle')}</Label>
|
||||
<Input
|
||||
id="doc-title"
|
||||
value={docForm.title}
|
||||
placeholder={t('knowledgeDocumentTitlePlaceholder')}
|
||||
onChange={(e) => setDocForm((p) => ({ ...p, title: e.target.value }))}
|
||||
disabled={isSavingDoc}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="doc-content">{t('knowledgeDocumentContent')}</Label>
|
||||
<Textarea
|
||||
id="doc-content"
|
||||
value={docForm.content}
|
||||
placeholder={t('knowledgeDocumentContentPlaceholder')}
|
||||
onChange={(e) => setDocForm((p) => ({ ...p, content: e.target.value }))}
|
||||
disabled={isSavingDoc}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="doc-metadata">{t('knowledgeDocumentMetadata')} (JSON)</Label>
|
||||
<Textarea
|
||||
id="doc-metadata"
|
||||
value={docForm.metadata}
|
||||
placeholder='{"key": "value"}'
|
||||
onChange={(e) => setDocForm((p) => ({ ...p, metadata: e.target.value }))}
|
||||
disabled={isSavingDoc}
|
||||
rows={2}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 mt-2">
|
||||
{editingDocId && (
|
||||
<Button variant="outline" size="sm" onClick={resetDocForm} disabled={isSavingDoc}>
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" onClick={handleSaveDoc} disabled={isSavingDoc}>
|
||||
{isSavingDoc ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Save className="h-4 w-4 mr-2" />}
|
||||
{t('save')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Document List */}
|
||||
<div>
|
||||
<div className="font-medium text-sm text-foreground/80 mb-3 flex items-center justify-between">
|
||||
Documents ({knowledgeDocuments.length})
|
||||
<Button variant="ghost" size="sm" className="h-8 text-muted-foreground" onClick={() => selectedKbForDocs && fetchKnowledgeDocuments(selectedKbForDocs.id)}>
|
||||
<RefreshCw className={`h-4 w-4 mr-1 ${isLoadingDocs ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isLoadingDocs ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : knowledgeDocuments.length === 0 ? (
|
||||
<div className="text-center py-8 text-sm text-muted-foreground border border-dashed border-border rounded-lg bg-muted/20">
|
||||
{t('noKnowledgeDocuments')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto pr-2">
|
||||
{knowledgeDocuments.map((doc) => (
|
||||
<div key={doc.id} className="group rounded-lg border border-border p-3 flex items-start justify-between gap-3 bg-background hover:border-indigo-200 transition-colors">
|
||||
<div className="space-y-1 min-w-0 flex-1">
|
||||
<div className="font-medium text-sm text-foreground truncate">{doc.title}</div>
|
||||
<div className="text-xs text-muted-foreground truncate">{doc.content.slice(0, 100)}...</div>
|
||||
<div className="text-[10px] text-muted-foreground mt-1">
|
||||
{new Date(doc.updated_at).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-indigo-600" onClick={() => handleEditDoc(doc)}>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-red-600" onClick={() => handleDeleteDoc(doc.id)}>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user