import type { BodyElement } from "../../lib/api";
interface UpdateNotificationProps {
updatedBy: "user" | "llm" | "system";
localBody: BodyElement[];
remoteBody: BodyElement[];
onRefresh: () => void;
onDismiss: () => void;
}
// Get text content from a body element for comparison
function getElementText(element: BodyElement): string {
switch (element.type) {
case "heading":
case "paragraph":
return element.text;
case "chart":
return `[Chart: ${element.title || element.chartType}]`;
case "image":
return `[Image: ${element.alt || element.src}]`;
default:
return "[Unknown element]";
}
}
// Get element type label
function getElementTypeLabel(element: BodyElement): string {
switch (element.type) {
case "heading":
return `H${element.level}`;
case "paragraph":
return "P";
case "chart":
return "Chart";
case "image":
return "Image";
default:
return "?";
}
}
interface DiffItem {
type: "added" | "removed" | "modified" | "unchanged";
localElement?: BodyElement;
remoteElement?: BodyElement;
localIndex?: number;
remoteIndex?: number;
}
// Simple diff algorithm - compares elements by their text content
function computeDiff(localBody: BodyElement[], remoteBody: BodyElement[]): DiffItem[] {
const diffs: DiffItem[] = [];
const maxLen = Math.max(localBody.length, remoteBody.length);
for (let i = 0; i < maxLen; i++) {
const local = localBody[i];
const remote = remoteBody[i];
if (!local && remote) {
// Element added remotely
diffs.push({ type: "added", remoteElement: remote, remoteIndex: i });
} else if (local && !remote) {
// Element removed remotely (exists locally but not remotely)
diffs.push({ type: "removed", localElement: local, localIndex: i });
} else if (local && remote) {
const localText = getElementText(local);
const remoteText = getElementText(remote);
if (localText !== remoteText || local.type !== remote.type) {
// Element modified
diffs.push({
type: "modified",
localElement: local,
remoteElement: remote,
localIndex: i,
remoteIndex: i,
});
}
// Skip unchanged elements
}
}
return diffs;
}
export function UpdateNotification({
updatedBy,
localBody,
remoteBody,
onRefresh,
onDismiss,
}: UpdateNotificationProps) {
const source = updatedBy === "llm" ? "AI assistant" : "another session";
const diffs = computeDiff(localBody, remoteBody);
const hasChanges = diffs.length > 0;
return (
<div className="fixed bottom-4 right-4 w-[480px] max-h-[70vh] flex flex-col bg-[#1a2332] border border-[#3f6fb3]/50 shadow-lg z-50">
{/* Header */}
<div className="p-4 border-b border-[#3f6fb3]/30">
<div className="flex items-start gap-3">
<div className="text-[#75aafc] text-xl font-bold shrink-0">i</div>
<div className="flex-1 min-w-0">
<h3 className="font-mono text-sm text-[#9bc3ff] font-semibold mb-1">
Remote Changes Detected
</h3>
<p className="font-mono text-xs text-white/70">
This file was updated by {source}.
{hasChanges
? ` ${diffs.length} change${diffs.length > 1 ? "s" : ""} found.`
: " No content changes detected."}
</p>
</div>
</div>
</div>
{/* Diff Content */}
{hasChanges && (
<div className="flex-1 overflow-y-auto p-4 space-y-3 min-h-0">
<div className="font-mono text-xs text-[#555] uppercase tracking-wider mb-2">
Changes
</div>
{diffs.map((diff, index) => (
<DiffItemView key={index} diff={diff} />
))}
</div>
)}
{/* Actions */}
<div className="p-4 border-t border-[#3f6fb3]/30 flex gap-2">
<button
onClick={onRefresh}
className="flex-1 px-3 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors"
>
Accept Remote Changes
</button>
<button
onClick={onDismiss}
className="px-3 py-2 font-mono text-xs text-[#555] border border-[#333] hover:text-white/70 hover:border-[#555] transition-colors"
>
Keep Local
</button>
</div>
</div>
);
}
function DiffItemView({ diff }: { diff: DiffItem }) {
if (diff.type === "added") {
return (
<div className="border border-green-500/30 bg-green-500/5 p-3">
<div className="flex items-center gap-2 mb-1">
<span className="text-green-400 text-xs font-mono font-bold">+ ADDED</span>
<span className="text-[#555] text-xs font-mono">
[{getElementTypeLabel(diff.remoteElement!)}]
</span>
</div>
<div className="font-mono text-sm text-green-300/80 break-words">
{truncateText(getElementText(diff.remoteElement!), 150)}
</div>
</div>
);
}
if (diff.type === "removed") {
return (
<div className="border border-red-500/30 bg-red-500/5 p-3">
<div className="flex items-center gap-2 mb-1">
<span className="text-red-400 text-xs font-mono font-bold">- REMOVED</span>
<span className="text-[#555] text-xs font-mono">
[{getElementTypeLabel(diff.localElement!)}]
</span>
</div>
<div className="font-mono text-sm text-red-300/80 break-words line-through">
{truncateText(getElementText(diff.localElement!), 150)}
</div>
</div>
);
}
if (diff.type === "modified") {
return (
<div className="border border-yellow-500/30 bg-yellow-500/5 p-3">
<div className="flex items-center gap-2 mb-2">
<span className="text-yellow-400 text-xs font-mono font-bold">~ MODIFIED</span>
<span className="text-[#555] text-xs font-mono">
[{getElementTypeLabel(diff.localElement!)}]
</span>
</div>
<div className="space-y-2">
<div>
<div className="text-[#555] text-[10px] font-mono uppercase mb-1">Your version:</div>
<div className="font-mono text-xs text-red-300/70 break-words bg-red-500/10 p-2 border-l-2 border-red-500/50">
{truncateText(getElementText(diff.localElement!), 120)}
</div>
</div>
<div>
<div className="text-[#555] text-[10px] font-mono uppercase mb-1">Remote version:</div>
<div className="font-mono text-xs text-green-300/70 break-words bg-green-500/10 p-2 border-l-2 border-green-500/50">
{truncateText(getElementText(diff.remoteElement!), 120)}
</div>
</div>
</div>
</div>
);
}
return null;
}
function truncateText(text: string, maxLength: number): string {
if (text.length <= maxLength) return text;
return text.slice(0, maxLength) + "...";
}
