Spaces:
Sleeping
Sleeping
File size: 3,368 Bytes
80d8c84 | 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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import { motion } from 'framer-motion';
import { GitCommitHorizontal, ArrowRight } from 'lucide-react';
import type { NegotiationMessage } from '@/types';
import { cn } from '@/lib/utils';
interface ProtocolTimelineProps {
messages: NegotiationMessage[];
className?: string;
}
interface ProtocolSnapshot {
round: number;
action_type: string;
role: string;
message: string;
}
export default function ProtocolTimeline({ messages, className }: ProtocolTimelineProps) {
// Extract protocol-changing events
const snapshots: ProtocolSnapshot[] = messages
.filter((m) => m.action_type && ['propose_protocol', 'revise_protocol', 'suggest_alternative', 'accept', 'reject'].includes(m.action_type))
.map((m) => ({
round: m.round,
action_type: m.action_type!,
role: m.role,
message: m.message.length > 100 ? m.message.slice(0, 100) + '...' : m.message,
}));
if (snapshots.length === 0) return null;
return (
<div className={cn('rounded-lg border border-border bg-card p-3', className)}>
<div className="mb-3 flex items-center gap-1.5">
<GitCommitHorizontal className="h-3.5 w-3.5 text-primary" />
<span className="text-xs font-semibold">Protocol Evolution</span>
</div>
{/* Horizontal scrollable timeline */}
<div className="overflow-x-auto">
<div className="flex items-start gap-0 min-w-max">
{snapshots.map((snap, i) => (
<div key={i} className="flex items-start">
<motion.div
className="flex flex-col items-center"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.1 }}
>
{/* Node */}
<div
className={cn(
'flex h-7 w-7 items-center justify-center rounded-full border-2 text-[10px] font-bold',
snap.role === 'scientist'
? 'border-scientist bg-scientist/10 text-scientist'
: 'border-lab-manager bg-lab-manager/10 text-lab-manager',
)}
>
R{snap.round}
</div>
{/* Action label */}
<span
className={cn(
'mt-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold',
snap.role === 'scientist'
? 'bg-scientist/10 text-scientist'
: 'bg-lab-manager/10 text-lab-manager',
)}
>
{snap.action_type.replace(/_/g, ' ')}
</span>
{/* Summary */}
<div className="mt-1 w-28 text-center text-[10px] leading-tight text-muted-foreground">
{snap.message.slice(0, 60)}...
</div>
</motion.div>
{/* Arrow connector */}
{i < snapshots.length - 1 && (
<div className="mt-2.5 flex items-center px-1">
<div className="h-px w-4 bg-border" />
<ArrowRight className="h-3 w-3 text-muted-foreground/40" />
<div className="h-px w-4 bg-border" />
</div>
)}
</div>
))}
</div>
</div>
</div>
);
}
|