feat(knowledge-base): Knowledge Base UI — browse/edit, modal, project links
- Knowledge Bases list page + sidebar entry + "+ New" create modal - Detail page with a recursive structure tree: add/edit/delete topics, categories and facts inline, including name + description editing - Create/metadata-edit modal (title, description) - Project edit modal gains a link/remove knowledge base section - Types and routes for /knowledge-bases and /knowledge-bases/:id - Scoped .kb-* styles (contained panel, topic cards, hierarchy guides) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
275
src/components/KnowledgeBaseTree.tsx
Normal file
275
src/components/KnowledgeBaseTree.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
import { useState } from 'react'
|
||||
import api from '@/services/api'
|
||||
import type { KnowledgeBaseTree as Tree, KnowledgeTopicNode, KnowledgeCategoryNode, KnowledgeFact } from '@/types'
|
||||
|
||||
type Reload = () => void | Promise<void>
|
||||
|
||||
function errMsg(err: any, fallback: string): string {
|
||||
return err?.response?.data?.detail || fallback
|
||||
}
|
||||
|
||||
/** A toggle button that reveals a single-line input with save/cancel. */
|
||||
function InlineForm({ label, placeholder, onSubmit }: {
|
||||
label: string
|
||||
placeholder: string
|
||||
onSubmit: (value: string) => Promise<void>
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [value, setValue] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
if (!open) {
|
||||
return <button className="kb-mini-btn" onClick={() => { setValue(''); setOpen(true) }}>{label}</button>
|
||||
}
|
||||
const save = async () => {
|
||||
if (!value.trim()) return
|
||||
setBusy(true)
|
||||
try { await onSubmit(value.trim()); setOpen(false) }
|
||||
finally { setBusy(false) }
|
||||
}
|
||||
return (
|
||||
<span className="kb-inline-form">
|
||||
<input
|
||||
autoFocus
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
disabled={busy}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') setOpen(false) }}
|
||||
/>
|
||||
<button className="kb-mini-btn" disabled={busy} onClick={save}>✓</button>
|
||||
<button className="kb-mini-btn" disabled={busy} onClick={() => setOpen(false)}>✕</button>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
/** Inline editor for a node's name + description (used by topics & categories). */
|
||||
function NodeEditForm({ initialName, initialDesc, namePlaceholder, onSave, onCancel }: {
|
||||
initialName: string
|
||||
initialDesc: string
|
||||
namePlaceholder: string
|
||||
onSave: (name: string, description: string) => Promise<void>
|
||||
onCancel: () => void
|
||||
}) {
|
||||
const [name, setName] = useState(initialName)
|
||||
const [desc, setDesc] = useState(initialDesc)
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
const save = async () => {
|
||||
if (!name.trim()) return
|
||||
setBusy(true)
|
||||
try { await onSave(name.trim(), desc) } finally { setBusy(false) }
|
||||
}
|
||||
return (
|
||||
<div className="kb-edit-form">
|
||||
<input
|
||||
autoFocus
|
||||
placeholder={namePlaceholder}
|
||||
value={name}
|
||||
disabled={busy}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') onCancel() }}
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Description (optional)"
|
||||
rows={2}
|
||||
value={desc}
|
||||
disabled={busy}
|
||||
onChange={(e) => setDesc(e.target.value)}
|
||||
/>
|
||||
<span className="kb-row-actions">
|
||||
<button className="kb-mini-btn" disabled={busy} onClick={save}>save</button>
|
||||
<button className="kb-mini-btn" disabled={busy} onClick={onCancel}>cancel</button>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FactRow({ fact, onChange }: { fact: KnowledgeFact; onChange: Reload }) {
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [value, setValue] = useState(fact.fact)
|
||||
|
||||
const save = async () => {
|
||||
try {
|
||||
await api.patch(`/knowledge-facts/${fact.id}`, { fact: value })
|
||||
setEditing(false)
|
||||
await onChange()
|
||||
} catch (err) { alert(errMsg(err, 'Failed to update fact')) }
|
||||
}
|
||||
const remove = async () => {
|
||||
if (!confirm('Delete this fact?')) return
|
||||
try { await api.delete(`/knowledge-facts/${fact.id}`); await onChange() }
|
||||
catch (err) { alert(errMsg(err, 'Failed to delete fact')) }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="kb-fact">
|
||||
<span className="kb-bullet">•</span>
|
||||
{editing ? (
|
||||
<span className="kb-inline-form kb-inline-grow">
|
||||
<input autoFocus value={value} onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') setEditing(false) }} />
|
||||
<button className="kb-mini-btn" onClick={save}>✓</button>
|
||||
<button className="kb-mini-btn" onClick={() => { setValue(fact.fact); setEditing(false) }}>✕</button>
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="kb-fact-text">{fact.fact}</span>
|
||||
<span className="kb-row-actions">
|
||||
<button className="kb-mini-btn" onClick={() => setEditing(true)}>edit</button>
|
||||
<button className="kb-mini-btn kb-danger" onClick={remove}>del</button>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CategoryNode({ cat, onChange }: { cat: KnowledgeCategoryNode; onChange: Reload }) {
|
||||
const [editing, setEditing] = useState(false)
|
||||
|
||||
const saveEdit = async (name: string, description: string) => {
|
||||
try {
|
||||
await api.patch(`/knowledge-categories/${cat.id}`, { name, description: description || null })
|
||||
setEditing(false)
|
||||
await onChange()
|
||||
} catch (err) { alert(errMsg(err, 'Failed to update category')) }
|
||||
}
|
||||
const remove = async () => {
|
||||
if (!confirm('Delete this category and everything under it?')) return
|
||||
try { await api.delete(`/knowledge-categories/${cat.id}`); await onChange() }
|
||||
catch (err) { alert(errMsg(err, 'Failed to delete category')) }
|
||||
}
|
||||
const addSubcategory = async (value: string) => {
|
||||
try { await api.post('/knowledge-categories', { topic_id: cat.topic_id, parent: cat.id, name: value }); await onChange() }
|
||||
catch (err) { alert(errMsg(err, 'Failed to add category')) }
|
||||
}
|
||||
const addFact = async (value: string) => {
|
||||
try { await api.post('/knowledge-facts', { topic_id: cat.topic_id, category_id: cat.id, fact: value }); await onChange() }
|
||||
catch (err) { alert(errMsg(err, 'Failed to add fact')) }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="kb-node kb-category">
|
||||
{editing ? (
|
||||
<div className="kb-node-header">
|
||||
<NodeEditForm
|
||||
initialName={cat.name}
|
||||
initialDesc={cat.description || ''}
|
||||
namePlaceholder="Category name"
|
||||
onSave={saveEdit}
|
||||
onCancel={() => setEditing(false)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="kb-node-header">
|
||||
<span className="kb-node-title">📂 {cat.name}</span>
|
||||
<span className="kb-row-actions">
|
||||
<InlineForm label="+ category" placeholder="Category name" onSubmit={addSubcategory} />
|
||||
<InlineForm label="+ fact" placeholder="Fact" onSubmit={addFact} />
|
||||
<button className="kb-mini-btn" onClick={() => setEditing(true)}>edit</button>
|
||||
<button className="kb-mini-btn kb-danger" onClick={remove}>del</button>
|
||||
</span>
|
||||
</div>
|
||||
{cat.description && <div className="kb-node-desc">{cat.description}</div>}
|
||||
</>
|
||||
)}
|
||||
<div className="kb-children">
|
||||
{cat.facts.map((f) => <FactRow key={f.id} fact={f} onChange={onChange} />)}
|
||||
{cat.categories.map((c) => <CategoryNode key={c.id} cat={c} onChange={onChange} />)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TopicNode({ topic, onChange }: { topic: KnowledgeTopicNode; onChange: Reload }) {
|
||||
const [editing, setEditing] = useState(false)
|
||||
|
||||
const saveEdit = async (name: string, description: string) => {
|
||||
try {
|
||||
await api.patch(`/knowledge-topics/${topic.id}`, { topic: name, description: description || null })
|
||||
setEditing(false)
|
||||
await onChange()
|
||||
} catch (err) { alert(errMsg(err, 'Failed to update topic')) }
|
||||
}
|
||||
const remove = async () => {
|
||||
if (!confirm('Delete this topic and everything under it?')) return
|
||||
try { await api.delete(`/knowledge-topics/${topic.id}`); await onChange() }
|
||||
catch (err) { alert(errMsg(err, 'Failed to delete topic')) }
|
||||
}
|
||||
const addCategory = async (value: string) => {
|
||||
try { await api.post('/knowledge-categories', { topic_id: topic.id, name: value }); await onChange() }
|
||||
catch (err) { alert(errMsg(err, 'Failed to add category')) }
|
||||
}
|
||||
const addFact = async (value: string) => {
|
||||
try { await api.post('/knowledge-facts', { topic_id: topic.id, fact: value }); await onChange() }
|
||||
catch (err) { alert(errMsg(err, 'Failed to add fact')) }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="kb-node kb-topic">
|
||||
{editing ? (
|
||||
<div className="kb-node-header">
|
||||
<NodeEditForm
|
||||
initialName={topic.topic}
|
||||
initialDesc={topic.description || ''}
|
||||
namePlaceholder="Topic name"
|
||||
onSave={saveEdit}
|
||||
onCancel={() => setEditing(false)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="kb-node-header">
|
||||
<span className="kb-node-title kb-topic-title"># {topic.topic}</span>
|
||||
<span className="kb-row-actions">
|
||||
<InlineForm label="+ category" placeholder="Category name" onSubmit={addCategory} />
|
||||
<InlineForm label="+ fact" placeholder="Fact" onSubmit={addFact} />
|
||||
<button className="kb-mini-btn" onClick={() => setEditing(true)}>edit</button>
|
||||
<button className="kb-mini-btn kb-danger" onClick={remove}>del</button>
|
||||
</span>
|
||||
</div>
|
||||
{topic.description && <div className="kb-node-desc">{topic.description}</div>}
|
||||
</>
|
||||
)}
|
||||
<div className="kb-children">
|
||||
{topic.facts.map((f) => <FactRow key={f.id} fact={f} onChange={onChange} />)}
|
||||
{topic.categories.map((c) => <CategoryNode key={c.id} cat={c} onChange={onChange} />)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function KnowledgeBaseTree({ tree, onChange }: { tree: Tree; onChange: Reload }) {
|
||||
const [addingTopic, setAddingTopic] = useState(false)
|
||||
const [topicName, setTopicName] = useState('')
|
||||
|
||||
const addTopic = async () => {
|
||||
if (!topicName.trim()) return
|
||||
try {
|
||||
await api.post(`/knowledge-bases/${tree.id}/topics`, { topic: topicName.trim() })
|
||||
setTopicName(''); setAddingTopic(false)
|
||||
await onChange()
|
||||
} catch (err) { alert(errMsg(err, 'Failed to add topic')) }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="kb-tree">
|
||||
<div className="kb-tree-toolbar">
|
||||
{addingTopic ? (
|
||||
<span className="kb-inline-form">
|
||||
<input autoFocus placeholder="Topic name" value={topicName} onChange={(e) => setTopicName(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') addTopic(); if (e.key === 'Escape') setAddingTopic(false) }} />
|
||||
<button className="kb-mini-btn" onClick={addTopic}>✓</button>
|
||||
<button className="kb-mini-btn" onClick={() => setAddingTopic(false)}>✕</button>
|
||||
</span>
|
||||
) : (
|
||||
<button className="btn-secondary" onClick={() => setAddingTopic(true)}>+ Add topic</button>
|
||||
)}
|
||||
</div>
|
||||
{tree.topics.length === 0 && <p className="empty">No topics yet. Add one above.</p>}
|
||||
{tree.topics.map((t) => <TopicNode key={t.id} topic={t} onChange={onChange} />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user