"use client"; import { ChevronDown, ExternalLink, FileText, Globe, Quote, } from "lucide-react"; import { useCallback, useMemo, useState } from "react"; import { cn } from "@/lib/utils"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/registry/new-york/ui/collapsible"; import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/registry/new-york/ui/empty"; 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; } export interface AICitationsProps { citations: Citation[]; className?: string; defaultExpanded?: boolean; showInlineNumbers?: boolean; 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 { 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; "aria-label"?: string; } function CitationNumber({ number, onClick, className, asButton = true, "aria-label": ariaLabel, }: CitationNumberProps) { const baseClassName = cn( "inline-flex items-center justify-center rounded-full border bg-primary/10 font-mono font-semibold text-primary text-xs transition-colors", "size-6 min-h-6 min-w-6 md:size-[24px] md:min-h-[24px] md:min-w-[24px]", asButton && onClick && "cursor-pointer [-webkit-tap-highlight-color:transparent] hover:bg-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 active:bg-primary/30", !asButton && "pointer-events-none", className ); const label = ariaLabel || `Citation ${number}`; if (asButton && onClick) { return ( ); } return ( {number} ); } interface SourceIconProps { type?: CitationSource["type"]; className?: string; } function SourceIcon({ type, className }: SourceIconProps) { const IconComponent = SOURCE_ICONS[type || "other"] || SOURCE_ICONS.web; return ; } interface SourceMetadataProps { source: CitationSource; } function SourceMetadata({ source }: SourceMetadataProps) { const domain = source.domain || formatDomain(source.url); return (

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

); } interface SourceSnippetProps { snippet: string; } function SourceSnippet({ snippet }: SourceSnippetProps) { return (

); } interface SourcePreviewProps { source: CitationSource; citationNumber: number; onSourceClick?: (source: CitationSource) => void; } function SourcePreview({ source, citationNumber, onSourceClick, }: SourcePreviewProps) { const [isSnippetOpen, setIsSnippetOpen] = useState(false); const handleClick = useCallback(() => { onSourceClick?.(source); }, [onSourceClick, source]); return (

{source.title}

{source.snippet && ( e.stopPropagation()} type="button" > )} e.stopPropagation()} rel="noopener noreferrer" target="_blank" >

{source.snippet && ( )}

); } interface CitationItemHeaderProps { citation: Citation; isOpen: boolean; onToggle: () => void; } function CitationItemHeader({ citation, isOpen, onToggle, }: CitationItemHeaderProps) { const hasMultipleSources = citation.sources.length > 1; const sourceCount = citation.sources.length; if (hasMultipleSources) { return (

{sourceCount} {sourceCount === 1 ? "source" : "sources"} {citation.text && ( {citation.text} )}

); } return (

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

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

{hasMultipleSources ? (

) : (

)}

); } interface CitationsHeaderProps { count: number; } function CitationsHeader({ count }: CitationsHeaderProps) { return (

Sources & Citations

({count})

); } interface CitationsListProps { citations: Citation[]; onSourceClick?: (source: CitationSource) => void; defaultExpanded?: boolean; } function CitationsList({ citations, onSourceClick, defaultExpanded = false, }: CitationsListProps) { const validCitations = useMemo( () => citations.filter((c) => c.sources.length > 0), [citations] ); if (validCitations.length === 0) { return null; } return (

); } interface CitationsEmptyStateProps { className?: string; } function CitationsEmptyState({ className }: CitationsEmptyStateProps) { return ( No citations available Citations will appear here when sources are referenced in the conversation. ); } export default function AICitations({ citations, className, defaultExpanded = false, onSourceClick, }: AICitationsProps) { const validCitations = useMemo( () => citations?.filter((c) => c.sources && c.sources.length > 0) || [], [citations] ); const handleSourceClick = useCallback( (source: CitationSource) => { onSourceClick?.(source); }, [onSourceClick] ); if (!citations || validCitations.length === 0) { return ; } return (

); } interface InlineCitationProps { number: number; onClick?: () => void; } function InlineCitation({ number, onClick }: InlineCitationProps) { return ( ); } export { InlineCitation, CitationNumber };

React Component Patterns - Best Practices

Tailwind CSS Documentation - Utility-First Fundamentals

Example Usage

React Component Patterns - Best Practices

Tailwind CSS Documentation - Utility-First Fundamentals