Citations

1"use client";
2// beui.dev/components/agents/citations
3 
4import { BookOpenText, ChevronDown, ExternalLink, Globe2 } from "lucide-react";
5import { AnimatePresence, motion, useReducedMotion } from "motion/react";
6import {
7  type ReactNode,
8  useCallback,
9  useId,
10  useState,
11} from "react";
12import { AgentDisclosure } from "@/components/agents/agent-disclosure";
13import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "@/lib/ease";
14import { getFaviconUrl } from "@/lib/favicon";
15import { cn } from "@/lib/utils";
16 
17export interface CitationItem {
18  id: string;
19  title: ReactNode;
20  domain?: ReactNode;
21  url?: string;
22}
23 
24export interface CitationsProps {
25  citations: CitationItem[];
26  title?: ReactNode;
27  open?: boolean;
28  defaultOpen?: boolean;
29  onOpenChange?: (open: boolean) => void;
30  idPrefix?: string;
31  className?: string;
32}
33 
34export interface CitationProps {
35  citationId: string;
36  index: number;
37  /** Must match the related Citations idPrefix. */
38  idPrefix: string;
39  className?: string;
40}
41 
42export interface CitationListProps {
43  citations: CitationItem[];
44  idPrefix?: string;
45  className?: string;
46}
47 
48export interface CitationStackProps {
49  citations: CitationItem[];
50  limit?: number;
51  className?: string;
52}
53 
54function citationTargetId(prefix: string, citationId: string) {
55  return `${prefix}-${citationId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
56}
57 
58export function Citation({
59  citationId,
60  index,
61  idPrefix,
62  className,
63}: CitationProps) {
64  return (
65    <a
66      href={`#${citationTargetId(idPrefix, citationId)}`}
67      aria-label={`View citation ${index}`}
68      className={cn(
69        "mx-0.5 inline-flex min-w-4 -translate-y-0.5 items-center justify-center rounded-md bg-muted/60 px-1 py-0.5 text-[10px] font-semibold leading-none text-muted-foreground no-underline outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
70        className,
71      )}
72    >
73      {index}
74    </a>
75  );
76}
77 
78export function CitationFavicon({
79  url,
80  className,
81}: {
82  url?: string;
83  className?: string;
84}) {
85  const favicon = url ? getFaviconUrl(url) : null;
86  const [failedUrl, setFailedUrl] = useState<string | null>(null);
87 
88  return (
89    <span
90      aria-hidden="true"
91      className={cn(
92        "grid size-5 shrink-0 place-items-center text-muted-foreground",
93        className,
94      )}
95    >
96      {favicon && failedUrl !== favicon ? (
97// … truncated