"use client"; import * as React from "react"; import { motion, AnimatePresence, type Transition } from "motion/react"; import { cn } from "@/lib/utils"; import { useReducedMotion, useCopy, useDisclosure, scrollIntoViewWithin, streamItemVariants } from "@/lib/motiq"; /** * SourceCitationRail — attributes an answer to its sources by keeping inline * `[n]` citation markers and a side rail of sources in sync. Selecting a marker * highlights (and scrolls to) its source in the rail; selecting a source in the * rail highlights (and scrolls to) its marker in the text. * * It is a *presentation* component. The application owns every source and the * text: it passes them in and decides what "active" means. This component never * generates a citation, never retrieves anything, never verifies a source, and * never invents a confidence or relevance number. It only renders the * `CitationSource[]` you give it and reports selection back through callbacks. * A `verified` flag, when present, is displayed as an *app-provided* state and * labelled as such — the component makes no claim of its own. * * Accessibility: markers are real ); } /* -------------------------------------------------------------------------- */ /* Rail source row */ /* -------------------------------------------------------------------------- */ const chip = "inline-flex items-center gap-1 rounded-md border border-[var(--color-border)] bg-[var(--color-bg-secondary)] px-1.5 py-px text-[10.5px] font-medium text-[var(--color-muted)]"; /* Touch-first: 44px tall while the rail is narrow, back to the dense form once THIS rail is wide enough — a 320px rail on a 27" monitor is still 320px, so this reads `@md/citations`, never `sm:`. The dense form still measures ~28px, clear of the 24px WCAG 2.2 AA target minimum. */ const footBtn = "inline-flex min-h-[44px] items-center gap-1.5 rounded-md px-1.5 py-1 text-[12px] font-medium text-[var(--color-muted)] outline-none transition-colors hover:text-[var(--color-fg)] focus-visible:ring-2 focus-visible:ring-[var(--color-focus)] @md/citations:min-h-0"; interface SourceRowProps { source: CitationSource; active: boolean; tabbable: boolean; variant: CitationLayout; showExcerpts: boolean; reduce: boolean; formatDate: (d: Date) => string; onSelect: (id: string) => void; onOpen?: (source: CitationSource) => void; registerSelect: (id: string, el: HTMLButtonElement | null) => void; registerItem: (id: string, el: HTMLElement | null) => void; onSelectKeyDown: (e: React.KeyboardEvent) => void; } function SourceRow({ source, active, tabbable, variant, showExcerpts, reduce, formatDate, onSelect, onOpen, registerSelect, registerItem, onSelectKeyDown, }: SourceRowProps) { const excerpt = useDisclosure({ idPrefix: "citation-excerpt" }); // Give the excerpt panel its own descriptive name (drop the trigger-derived // aria-labelledby, which would otherwise win over aria-label). const { "aria-labelledby": _excerptLabelledBy, ...excerptPanelProps } = excerpt.panelProps; const { copied, copy } = useCopy(); const dense = variant === "list"; const published = toDate(source.publishedAt); const retrieved = toDate(source.retrievedAt); const relPct = typeof source.relevance === "number" ? Math.max(0, Math.min(100, Math.round(source.relevance * 100))) : null; const hasExcerpt = showExcerpts && Boolean(source.excerpt); const itemRef = React.useCallback((el: HTMLLIElement | null) => registerItem(source.id, el), [registerItem, source.id]); const selectRef = React.useCallback( (el: HTMLButtonElement | null) => registerSelect(source.id, el), [registerSelect, source.id], ); return ( {/* Active accent bar — a shared, moving indicator (not colour alone). */} {active ? ( ) : null} {/* Select header — sets the active source. Siblings (excerpt / copy / open) are never nested inside it. */} {/* Footer: excerpt toggle + copy link + open — all siblings of the select button. */} {(hasExcerpt || source.url) && !dense ? (

{source.url ? ( ) : null} {source.url ? ( onOpen?.(source)} aria-label={`Open ${source.title} in a new tab`} className={cn( footBtn, "text-[var(--color-accent)] hover:text-[var(--color-accent)] hover:underline", )} > Open ) : null}

) : null} {/* Dense (list) layout keeps only the open link, inline. */} {dense && source.url ? (

onOpen?.(source)} aria-label={`Open ${source.title} in a new tab`} className={cn(footBtn, "text-[var(--color-accent)] hover:underline")} > Open

) : null} {hasExcerpt && excerpt.open ? (

{source.excerpt}

{retrieved ? (

Provided by the app · {formatDate(retrieved)}

) : null} ) : null} ); } /* -------------------------------------------------------------------------- */ /* Component */ /* -------------------------------------------------------------------------- */ export function SourceCitationRail({ sources, children, activeSourceId, defaultActiveSourceId = null, onActiveSourceChange, onOpenSource, layout = "rail", showExcerpts = true, title = "Sources", mobileBehavior = "stacked", formatDate = defaultFormatDate, renderSource, className, }: SourceCitationRailProps) { const reduce = useReducedMotion(); const isControlled = activeSourceId !== undefined; const [internalActive, setInternalActive] = React.useState(defaultActiveSourceId); const activeId = isControlled ? activeSourceId ?? null : internalActive; const sourcesById = React.useMemo(() => { const m = new Map(); for (const s of sources) m.set(s.id, s); return m; }, [sources]); const markerRefs = React.useRef>(new Map()); const railItemRefs = React.useRef>(new Map()); const selectRefs = React.useRef>(new Map()); const lastOrigin = React.useRef<"marker" | "rail" | "external">("external"); const registerMarker = React.useCallback((id: string, el: HTMLElement | null) => { if (el) markerRefs.current.set(id, el); else markerRefs.current.delete(id); }, []); const registerItem = React.useCallback((id: string, el: HTMLElement | null) => { if (el) railItemRefs.current.set(id, el); else railItemRefs.current.delete(id); }, []); const registerSelect = React.useCallback((id: string, el: HTMLButtonElement | null) => { if (el) selectRefs.current.set(id, el); else selectRefs.current.delete(id); }, []); const setActive = React.useCallback( (id: string | null, origin: "marker" | "rail" | "external" = "external") => { lastOrigin.current = origin; if (!isControlled) setInternalActive(id); onActiveSourceChange?.(id); }, [isControlled, onActiveSourceChange], ); // Keep marker ↔ rail in sync when the active source changes (either direction). // Skip the first run so we never scroll on mount. const mounted = React.useRef(false); React.useEffect(() => { if (!mounted.current) { mounted.current = true; return; } if (activeId == null) return; const raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => { scrollIntoViewSafe(railItemRefs.current.get(activeId), reduce); if (lastOrigin.current === "rail") scrollIntoViewSafe(markerRefs.current.get(activeId), reduce); }) : null; return () => { if (raf != null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(raf); }; }, [activeId, reduce]); const ctx = React.useMemo( () => ({ activeId, setActive, sourcesById, registerMarker, reduce }), [activeId, setActive, sourcesById, registerMarker, reduce], ); // Roving Up/Down/Home/End selection across the rail. const onSelectKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return; e.preventDefault(); const ids = sources.map((s) => s.id); if (ids.length === 0) return; const cur = activeId && ids.includes(activeId) ? ids.indexOf(activeId) : -1; let next: number; if (e.key === "Home") next = 0; else if (e.key === "End") next = ids.length - 1; else if (e.key === "ArrowDown") next = cur < 0 ? 0 : Math.min(ids.length - 1, cur + 1); else next = cur < 0 ? ids.length - 1 : Math.max(0, cur - 1); const nid = ids[next]; setActive(nid, "rail"); if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => selectRefs.current.get(nid)?.focus()); else selectRefs.current.get(nid)?.focus(); }, [sources, activeId, setActive], ); const tabbableId = activeId && sourcesById.has(activeId) ? activeId : sources[0]?.id; const railBody = sources.length === 0 ? (

No sources provided.

) : (

{sources.map((source) => { const active = source.id === activeId; if (renderSource) { return (

registerItem(source.id, el)} data-active={active || undefined}> {renderSource(source, { active })}

); } return ( setActive(active ? null : id, "rail")} onOpen={onOpenSource} registerSelect={registerSelect} registerItem={registerItem} onSelectKeyDown={onSelectKeyDown} /> ); })}

); const rail = ( ); return (

{children}

{rail}

); } export default SourceCitationRail;