File size: 1,734 Bytes
6e62ad1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | interface SourceBadgeProps {
source: string
confidence: number
}
const SOURCE_CONFIG: Record<string, { color: string; bg: string; label: string; icon: string }> = {
direct: { color: '#10b981', bg: 'rgba(16,185,129,0.12)', label: 'Direct Match', icon: '⚡' },
chained: { color: '#7c3aed', bg: 'rgba(124,58,237,0.12)', label: 'Fact Chained', icon: '🔗' },
corrected: { color: '#f59e0b', bg: 'rgba(245,158,11,0.12)', label: 'Corrected', icon: '✏️' },
curiosity: { color: '#06b6d4', bg: 'rgba(6,182,212,0.12)', label: 'Curiosity', icon: '🤔' },
fallback: { color: '#ef4444', bg: 'rgba(239,68,68,0.12)', label: 'No Match', icon: '❓' },
}
export function SourceBadge({ source, confidence }: SourceBadgeProps) {
const cfg = SOURCE_CONFIG[source] || SOURCE_CONFIG.fallback
const pct = Math.round(confidence * 100)
return (
<div className="flex items-center gap-2 flex-wrap">
<div
className="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold"
style={{ color: cfg.color, background: cfg.bg }}
>
<span>{cfg.icon}</span>
<span>{cfg.label}</span>
</div>
<div className="flex items-center gap-1.5">
<div className="w-20 h-1.5 rounded-full bg-pal-border overflow-hidden">
<div
className="h-full rounded-full transition-all duration-700"
style={{
width: `${pct}%`,
background: `linear-gradient(90deg, ${cfg.color}, ${cfg.color}cc)`,
boxShadow: `0 0 6px ${cfg.color}80`,
}}
/>
</div>
<span className="text-xs text-pal-muted font-mono">{pct}%</span>
</div>
</div>
)
}
|