feat: KB Accelerator — convert KB articles into interactive flows
Full-stack implementation of the KB Accelerator feature that converts static MSP knowledge base articles into interactive troubleshooting and procedural flows using AI. Backend: - Migrations 054/055: kb_imports, kb_import_nodes tables + plan_limits KB columns - SQLAlchemy models with relationships and self-referential node hierarchy - Text extraction service (txt, paste, docx with structural metadata) - AI conversion service with MSP-specialist prompts for both flow types - 8 API endpoints: upload, get, list, convert, edit node, commit, delete, quota - Tier-gated access via plan_limits (free: 3 lifetime, pro/team: unlimited) - 8 integration tests covering upload, get/list, quota, commit, delete Frontend: - TypeScript types and API client for all KB Accelerator endpoints - Multi-step wizard page: upload → processing → review → success - Upload screen with paste/file tabs, drag-drop, target type selector - Two-panel review screen with source highlighting and node cards - Per-node actions: approve, edit, regenerate, insert, delete - Confidence color indicators (green/amber/red) - Sidebar navigation with Sparkles icon - Code-split lazy-loaded route at /kb-accelerator Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
201
frontend/src/components/kb-accelerator/NodeCard.tsx
Normal file
201
frontend/src/components/kb-accelerator/NodeCard.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import { useState } from 'react'
|
||||
import { Check, X, Pencil, Trash2, RotateCcw, Plus, ChevronDown, ChevronUp } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { KBImportNode, KBNodeEditRequest } from '@/types/kbAccelerator'
|
||||
|
||||
interface NodeCardProps {
|
||||
node: KBImportNode
|
||||
onEdit: (nodeId: string, data: KBNodeEditRequest) => Promise<void>
|
||||
onHighlight: (excerpt: string | null) => void
|
||||
}
|
||||
|
||||
function confidenceColor(score: number): string {
|
||||
if (score >= 0.85) return 'border-emerald-400/40'
|
||||
if (score >= 0.65) return 'border-amber-400/40'
|
||||
return 'border-rose-500/40'
|
||||
}
|
||||
|
||||
function confidenceLabel(score: number): string {
|
||||
if (score >= 0.85) return 'High'
|
||||
if (score >= 0.65) return 'Medium'
|
||||
return 'Low'
|
||||
}
|
||||
|
||||
function confidenceTextColor(score: number): string {
|
||||
if (score >= 0.85) return 'text-emerald-400'
|
||||
if (score >= 0.65) return 'text-amber-400'
|
||||
return 'text-rose-500'
|
||||
}
|
||||
|
||||
export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const [editMode, setEditMode] = useState(false)
|
||||
const [editContent, setEditContent] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
const question = (node.content?.question as string) ?? ''
|
||||
const options = (node.content?.options as Array<{ label: string; next_node_id?: string }>) ?? []
|
||||
const stepContent = (node.content?.content as string) ?? question
|
||||
|
||||
const handleAction = async (operation: KBNodeEditRequest['operation'], extra?: Partial<KBNodeEditRequest>) => {
|
||||
setBusy(true)
|
||||
try {
|
||||
await onEdit(node.id, { operation, ...extra })
|
||||
if (operation === 'edit') setEditMode(false)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const startEdit = () => {
|
||||
setEditContent(stepContent || question)
|
||||
setEditMode(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'glass-card-static border-l-4 p-4 transition-all',
|
||||
confidenceColor(node.confidence_score),
|
||||
node.user_approved && 'opacity-75',
|
||||
)}
|
||||
onMouseEnter={() => onHighlight(node.source_excerpt)}
|
||||
onMouseLeave={() => onHighlight(null)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
{node.node_type}
|
||||
</span>
|
||||
<span className={cn('font-label text-[0.625rem]', confidenceTextColor(node.confidence_score))}>
|
||||
{confidenceLabel(node.confidence_score)} ({Math.round(node.confidence_score * 100)}%)
|
||||
</span>
|
||||
{node.user_approved && (
|
||||
<span className="font-label text-[0.625rem] text-emerald-400">Approved</span>
|
||||
)}
|
||||
{node.user_edited && (
|
||||
<span className="font-label text-[0.625rem] text-blue-400">Edited</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode ? (
|
||||
<div className="space-y-2">
|
||||
<textarea
|
||||
value={editContent}
|
||||
onChange={e => setEditContent(e.target.value)}
|
||||
className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary/30 focus:outline-hidden"
|
||||
rows={3}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleAction('edit', { content: { ...node.content, question: editContent, content: editContent } })}
|
||||
disabled={busy}
|
||||
className="px-3 py-1.5 text-xs font-medium rounded-md bg-gradient-brand text-[#101114] hover:opacity-90"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditMode(false)}
|
||||
className="px-3 py-1.5 text-xs font-medium rounded-md bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-foreground">{stepContent || question}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
{!editMode && (
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{!node.user_approved && (
|
||||
<button
|
||||
onClick={() => handleAction('approve')}
|
||||
disabled={busy}
|
||||
className="p-1.5 rounded-md text-muted-foreground hover:text-emerald-400 hover:bg-emerald-400/10 transition-colors"
|
||||
title="Approve"
|
||||
>
|
||||
<Check size={14} />
|
||||
</button>
|
||||
)}
|
||||
{node.user_approved && (
|
||||
<button
|
||||
onClick={() => handleAction('reject')}
|
||||
disabled={busy}
|
||||
className="p-1.5 rounded-md text-muted-foreground hover:text-amber-400 hover:bg-amber-400/10 transition-colors"
|
||||
title="Unapprove"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={startEdit}
|
||||
disabled={busy}
|
||||
className="p-1.5 rounded-md text-muted-foreground hover:text-blue-400 hover:bg-blue-400/10 transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAction('regenerate')}
|
||||
disabled={busy}
|
||||
className="p-1.5 rounded-md text-muted-foreground hover:text-primary hover:bg-primary/10 transition-colors"
|
||||
title="Regenerate"
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAction('insert_after', { content: { question: 'New node', type: node.node_type } })}
|
||||
disabled={busy}
|
||||
className="p-1.5 rounded-md text-muted-foreground hover:text-primary hover:bg-primary/10 transition-colors"
|
||||
title="Insert after"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAction('delete')}
|
||||
disabled={busy}
|
||||
className="p-1.5 rounded-md text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Options (troubleshooting) */}
|
||||
{options.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{expanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
|
||||
{options.length} option{options.length !== 1 ? 's' : ''}
|
||||
</button>
|
||||
{expanded && (
|
||||
<div className="mt-2 space-y-1 pl-3 border-l border-border">
|
||||
{options.map((opt, i) => (
|
||||
<p key={i} className="text-xs text-muted-foreground">
|
||||
{opt.label} {opt.next_node_id && <span className="text-[#5a6170]">→ {opt.next_node_id}</span>}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Source excerpt */}
|
||||
{node.source_excerpt && (
|
||||
<p className="mt-2 text-xs text-[#5a6170] italic truncate" title={node.source_excerpt}>
|
||||
Source: {node.source_excerpt}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user