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
130
frontend/src/components/kb-accelerator/ReviewScreen.tsx
Normal file
130
frontend/src/components/kb-accelerator/ReviewScreen.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { useState } from 'react'
|
||||
import { CheckCircle2, AlertTriangle, BarChart3 } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { NodeCard } from './NodeCard'
|
||||
import { SourcePanel } from './SourcePanel'
|
||||
import type { KBImport, KBNodeEditRequest, KBCommitRequest } from '@/types/kbAccelerator'
|
||||
|
||||
interface ReviewScreenProps {
|
||||
kbImport: KBImport
|
||||
onEditNode: (nodeId: string, data: KBNodeEditRequest) => Promise<void>
|
||||
onCommit: (data?: KBCommitRequest) => Promise<void>
|
||||
onDiscard: () => Promise<void>
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
export function ReviewScreen({ kbImport, onEditNode, onCommit, onDiscard, loading }: ReviewScreenProps) {
|
||||
const [highlightExcerpt, setHighlightExcerpt] = useState<string | null>(null)
|
||||
|
||||
const nodes = kbImport.nodes
|
||||
const approvedCount = nodes.filter(n => n.user_approved).length
|
||||
const lowConfidenceCount = nodes.filter(n => n.confidence_score < 0.65).length
|
||||
const avgConfidence = kbImport.confidence_avg ?? 0
|
||||
|
||||
const title = (kbImport.source_metadata as Record<string, unknown> | null)
|
||||
?._conversion as Record<string, unknown> | undefined
|
||||
const flowTitle = (title?.title as string) ?? 'Untitled Flow'
|
||||
const flowDescription = (title?.description as string) ?? ''
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full gap-4">
|
||||
{/* Header */}
|
||||
<div className="glass-card-static p-4 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-lg font-heading font-semibold text-foreground">{flowTitle}</h2>
|
||||
{flowDescription && (
|
||||
<p className="text-sm text-muted-foreground mt-0.5">{flowDescription}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<BarChart3 size={14} className="text-muted-foreground" />
|
||||
<span className="text-muted-foreground">
|
||||
Avg confidence: <span className="text-foreground font-medium">{Math.round(avgConfidence * 100)}%</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle2 size={14} className="text-emerald-400" />
|
||||
<span className="text-muted-foreground">
|
||||
{approvedCount}/{nodes.length} approved
|
||||
</span>
|
||||
</div>
|
||||
{lowConfidenceCount > 0 && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<AlertTriangle size={14} className="text-amber-400" />
|
||||
<span className="text-amber-400">
|
||||
{lowConfidenceCount} low confidence
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Two-panel layout */}
|
||||
<div className="flex-1 grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-0">
|
||||
{/* Source panel */}
|
||||
<div className="overflow-hidden">
|
||||
<SourcePanel
|
||||
sourceText={kbImport.source_text}
|
||||
sourceFormat={kbImport.source_format}
|
||||
highlightExcerpt={highlightExcerpt}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Nodes panel */}
|
||||
<div className="flex flex-col glass-card-static overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--glass-border)' }}>
|
||||
<span className="text-sm font-medium text-foreground">Generated Flow</span>
|
||||
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground ml-auto">
|
||||
{kbImport.target_type === 'troubleshooting' ? 'Troubleshooting' : 'Project'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{nodes.map(node => (
|
||||
<NodeCard
|
||||
key={node.id}
|
||||
node={node}
|
||||
onEdit={onEditNode}
|
||||
onHighlight={setHighlightExcerpt}
|
||||
/>
|
||||
))}
|
||||
{nodes.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
No nodes generated. Try converting again.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<button
|
||||
onClick={onDiscard}
|
||||
disabled={loading}
|
||||
className={cn(
|
||||
'px-4 py-2.5 rounded-[10px] text-sm font-medium transition-colors',
|
||||
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-muted-foreground',
|
||||
'hover:text-foreground hover:border-[rgba(255,255,255,0.12)]',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
Discard
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onCommit()}
|
||||
disabled={loading || nodes.length === 0}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-6 py-2.5 rounded-[10px] text-sm font-semibold transition-all',
|
||||
'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
|
||||
'hover:opacity-90 active:scale-[0.97]',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
<CheckCircle2 size={16} />
|
||||
{loading ? 'Committing...' : 'Commit to Library'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user