"use client"; import { ChevronDown, ExternalLink, FileText, Globe, Quote, } from "lucide-react"; import { useState } from "react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { cn } from "@/lib/utils"; export interface CitationSource { id: string; title: string; url: string; domain?: string; snippet?: string; author?: string; publishedAt?: Date; type?: "web" | "document" | "paper" | "other"; } export interface Citation { id: string; number: number; sources: CitationSource[]; text?: string; // Optional text that was cited } export interface AICitationsProps { citations: Citation[]; className?: string; defaultExpanded?: boolean; showInlineNumbers?: boolean; // Show citation numbers inline in text onSourceClick?: (source: CitationSource) => void; } const SOURCE_ICONS: Record< NonNullable, React.ComponentType<{ className?: string }> > = { document: FileText, paper: FileText, web: Globe, other: Globe, }; function formatDomain(url: string): string { try { const urlObj = new URL(url); return urlObj.hostname.replace(/^www\./, ""); } catch { return url; } } function formatDate(date: Date): string { // Use consistent format to avoid hydration mismatches const months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; const month = months[date.getMonth()]; const day = date.getDate(); const year = date.getFullYear(); return `${month} ${day}, ${year}`; } interface CitationNumberProps { number: number; onClick?: () => void; className?: string; asButton?: boolean; // When false, renders as span (for use inside buttons) } function CitationNumber({ number, onClick, className, asButton = true, }: CitationNumberProps) { const baseClassName = cn( "inline-flex size-5 items-center justify-center rounded-full border bg-primary/10 font-mono font-semibold text-primary text-xs transition-colors", asButton && onClick && "cursor-pointer hover:bg-primary/20 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2", !asButton && "pointer-events-none", className ); if (asButton && onClick) { return ( ); } return ( {number} ); } interface SourcePreviewProps { source: CitationSource; citationNumber: number; onSourceClick?: (source: CitationSource) => void; } function SourcePreview({ source, citationNumber, onSourceClick, }: SourcePreviewProps) { const domain = source.domain || formatDomain(source.url); const IconComponent = SOURCE_ICONS[source.type || "other"] || SOURCE_ICONS.web; return (

{source.title}

{domain} {source.author && ( <> {source.author} )} {source.publishedAt && ( <> {formatDate(source.publishedAt)} )}

{source.snippet && (

{source.snippet}

)}

); } interface CitationItemProps { citation: Citation; onSourceClick?: (source: CitationSource) => void; } function CitationItem({ citation, onSourceClick }: CitationItemProps) { const [isOpen, setIsOpen] = useState(false); if (citation.sources.length === 0) { return null; } const hasMultipleSources = citation.sources.length > 1; return (

{hasMultipleSources ? (

{citation.sources.length} sources {citation.text && ( {citation.text} )}

) : (

Source {citation.text && ( {citation.text} )}

)} {hasMultipleSources ? (

{citation.sources.map((source) => ( ))}

) : ( )}

); } interface InlineCitationProps { number: number; onClick?: () => void; } function InlineCitation({ number, onClick }: InlineCitationProps) { return ( ); } export default function AICitations({ citations, className, defaultExpanded = false, showInlineNumbers = false, onSourceClick, }: AICitationsProps) { if (!citations || citations.length === 0) { return null; } return (

Sources & Citations

({citations.length})

{citations.map((citation) => ( ))}

); } // Export helper component for inline citations in text export { InlineCitation, CitationNumber };

Sources & Citations

React Component Patterns - Best Practices

Structuring TypeScript for AI

Example Usage