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
2026-03-10 20:56:28 -04:00
parent c65aa4f0b7
commit 71ff4a8c35
27 changed files with 4426 additions and 2 deletions

View File

@@ -0,0 +1,56 @@
import { CheckCircle2, ArrowRight, Plus } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { KBCommitResponse } from '@/types/kbAccelerator'
interface SuccessScreenProps {
result: KBCommitResponse
onViewFlow: () => void
onConvertAnother: () => void
}
export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessScreenProps) {
return (
<div className="max-w-lg mx-auto text-center space-y-6 py-12">
<div className="flex justify-center">
<div className="w-16 h-16 rounded-full bg-emerald-400/10 flex items-center justify-center">
<CheckCircle2 size={32} className="text-emerald-400" />
</div>
</div>
<div>
<h2 className="text-xl font-heading font-semibold text-foreground">
Flow Created Successfully
</h2>
<p className="text-sm text-muted-foreground mt-2">
Your KB article has been converted into a {result.tree_type === 'troubleshooting' ? 'troubleshooting' : 'project'} flow
and added to your library.
</p>
</div>
<div className="flex flex-col sm:flex-row items-center justify-center gap-3">
<button
onClick={onViewFlow}
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]'
)}
>
View Flow
<ArrowRight size={16} />
</button>
<button
onClick={onConvertAnother}
className={cn(
'flex items-center gap-2 px-6 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-foreground',
'hover:border-[rgba(255,255,255,0.12)]'
)}
>
<Plus size={16} />
Convert Another
</button>
</div>
</div>
)
}