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:
56
frontend/src/components/kb-accelerator/SuccessScreen.tsx
Normal file
56
frontend/src/components/kb-accelerator/SuccessScreen.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user