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
269
frontend/src/components/kb-accelerator/UploadScreen.tsx
Normal file
269
frontend/src/components/kb-accelerator/UploadScreen.tsx
Normal file
@@ -0,0 +1,269 @@
|
||||
import { useState, useCallback, useRef } from 'react'
|
||||
import { Upload, FileText, ClipboardPaste, FileUp, Sparkles, AlertCircle } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Textarea } from '@/components/ui/Textarea'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import type { KBQuotaResponse } from '@/types/kbAccelerator'
|
||||
|
||||
type TargetType = 'troubleshooting' | 'procedural' | 'auto'
|
||||
|
||||
interface UploadScreenProps {
|
||||
quota: KBQuotaResponse | null
|
||||
onSubmitText: (content: string, title: string, targetType: TargetType) => void
|
||||
onSubmitFile: (file: File, targetType: TargetType) => void
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
const TARGET_TYPES = [
|
||||
{
|
||||
value: 'troubleshooting' as const,
|
||||
label: 'Troubleshooting Flow',
|
||||
description: 'Decision tree with diagnostic questions and resolutions',
|
||||
},
|
||||
{
|
||||
value: 'procedural' as const,
|
||||
label: 'Project Flow',
|
||||
description: 'Step-by-step procedure with warnings and variables',
|
||||
},
|
||||
{
|
||||
value: 'auto' as const,
|
||||
label: 'Let AI Decide',
|
||||
description: 'AI will determine the best flow type from your content',
|
||||
},
|
||||
]
|
||||
|
||||
const FORMAT_LABELS: Record<string, string> = {
|
||||
txt: 'TXT',
|
||||
paste: 'Paste',
|
||||
docx: 'DOCX',
|
||||
pdf: 'PDF',
|
||||
html: 'HTML',
|
||||
md: 'Markdown',
|
||||
}
|
||||
|
||||
export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: UploadScreenProps) {
|
||||
const [mode, setMode] = useState<'paste' | 'file'>('paste')
|
||||
const [content, setContent] = useState('')
|
||||
const [title, setTitle] = useState('')
|
||||
const [targetType, setTargetType] = useState<TargetType>('auto')
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [dragOver, setDragOver] = useState(false)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const canSubmit = mode === 'paste'
|
||||
? content.trim().length >= 10
|
||||
: file !== null
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (loading) return
|
||||
if (mode === 'paste') {
|
||||
onSubmitText(content, title, targetType)
|
||||
} else if (file) {
|
||||
onSubmitFile(file, targetType)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
setDragOver(false)
|
||||
const droppedFile = e.dataTransfer.files[0]
|
||||
if (droppedFile) {
|
||||
setFile(droppedFile)
|
||||
setMode('file')
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selected = e.target.files?.[0]
|
||||
if (selected) {
|
||||
setFile(selected)
|
||||
}
|
||||
}
|
||||
|
||||
const allowedFormats = quota?.allowed_formats ?? ['txt', 'paste']
|
||||
const fileFormats = allowedFormats.filter(f => f !== 'paste')
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto space-y-6">
|
||||
{/* Quota info */}
|
||||
{quota && (
|
||||
<div className="glass-card-static p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Sparkles size={18} className="text-primary" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{quota.lifetime_conversions_limit
|
||||
? `${quota.lifetime_conversions_limit - quota.lifetime_conversions_used} conversions remaining`
|
||||
: 'Unlimited conversions'}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{quota.plan.charAt(0).toUpperCase() + quota.plan.slice(1)} plan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{!quota.can_convert && (
|
||||
<div className="flex items-center gap-2 text-amber-400 text-sm">
|
||||
<AlertCircle size={16} />
|
||||
<span>Conversion limit reached</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mode toggle */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setMode('paste')}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-4 py-2 rounded-[10px] text-sm font-medium transition-colors',
|
||||
mode === 'paste'
|
||||
? 'bg-primary/10 text-foreground border border-primary/30'
|
||||
: '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)]'
|
||||
)}
|
||||
>
|
||||
<ClipboardPaste size={16} />
|
||||
Paste Text
|
||||
</button>
|
||||
{fileFormats.length > 0 && (
|
||||
<button
|
||||
onClick={() => setMode('file')}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-4 py-2 rounded-[10px] text-sm font-medium transition-colors',
|
||||
mode === 'file'
|
||||
? 'bg-primary/10 text-foreground border border-primary/30'
|
||||
: '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)]'
|
||||
)}
|
||||
>
|
||||
<FileUp size={16} />
|
||||
Upload File
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content area */}
|
||||
<div className="glass-card-static p-5 space-y-4">
|
||||
{mode === 'paste' ? (
|
||||
<>
|
||||
<div>
|
||||
<label htmlFor="kb-title" className="block font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5">
|
||||
Title (optional)
|
||||
</label>
|
||||
<Input
|
||||
id="kb-title"
|
||||
value={title}
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
placeholder="e.g., Outlook Connectivity Troubleshooting"
|
||||
maxLength={255}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="kb-content" className="block font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5">
|
||||
KB Article Content
|
||||
</label>
|
||||
<Textarea
|
||||
id="kb-content"
|
||||
value={content}
|
||||
onChange={e => setContent(e.target.value)}
|
||||
placeholder="Paste your KB article text here..."
|
||||
rows={12}
|
||||
maxLength={500000}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{content.length.toLocaleString()} / 500,000 characters
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
onDragOver={e => { e.preventDefault(); setDragOver(true) }}
|
||||
onDragLeave={() => setDragOver(false)}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-center gap-3 p-10 rounded-xl border-2 border-dashed cursor-pointer transition-colors',
|
||||
dragOver
|
||||
? 'border-primary/50 bg-primary/5'
|
||||
: 'border-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.15)]'
|
||||
)}
|
||||
>
|
||||
{file ? (
|
||||
<>
|
||||
<FileText size={32} className="text-primary" />
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium text-foreground">{file.name}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{(file.size / 1024).toFixed(1)} KB
|
||||
</p>
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); setFile(null) }}
|
||||
className="mt-2 text-xs text-primary hover:underline"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload size={32} className="text-muted-foreground" />
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-foreground">
|
||||
Drop a file here or <span className="text-primary">browse</span>
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Supported: {fileFormats.map(f => FORMAT_LABELS[f] || f.toUpperCase()).join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept={fileFormats.map(f => `.${f}`).join(',')}
|
||||
onChange={handleFileSelect}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Target type selector */}
|
||||
<div>
|
||||
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
|
||||
Target Flow Type
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
{TARGET_TYPES.map(t => (
|
||||
<button
|
||||
key={t.value}
|
||||
onClick={() => setTargetType(t.value)}
|
||||
className={cn(
|
||||
'glass-card-static p-4 text-left transition-all',
|
||||
targetType === t.value
|
||||
? 'border-primary/30 bg-primary/5'
|
||||
: 'hover:border-[rgba(255,255,255,0.12)]'
|
||||
)}
|
||||
>
|
||||
<p className="text-sm font-medium text-foreground">{t.label}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">{t.description}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={!canSubmit || loading || (quota != null && !quota.can_convert)}
|
||||
className={cn(
|
||||
'w-full flex items-center justify-center gap-2 px-6 py-3 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'
|
||||
)}
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
{loading ? 'Converting...' : 'Convert to Flow'}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user