InlineCitation

1"use client";
2 
3import { PreviewCard } from "@base-ui/react/preview-card";
4import type { ComponentProps } from "react";
5import { useState } from "react";
6 
7import { cn } from "@/lib/utils";
8 
9/** Strip a URL down to its readable hostname. */
10const hostnameOf = (url: string): string => {
11  try {
12    return new URL(url).hostname.replace(/^www\./u, "");
13  } catch {
14    return url;
15  }
16};
17 
18const faviconOf = (url: string): string | null => {
19  try {
20    const host = new URL(url).hostname;
21    return `https://www.google.com/s2/favicons?domain=${host}&sz=64`;
22  } catch {
23    return null;
24  }
25};
26 
27/**
28 * The source site's favicon, resolved through Google's favicon
29 * service. Decorative — vanishes silently if it fails to load, so
30 * the pill never shows a broken-image glyph.
31 */
32const SourceFavicon = ({
33  className,
34  url,
35}: {
36  url: string;
37  className?: string;
38}) => {
39  const [failed, setFailed] = useState(false);
40  const src = faviconOf(url);
41 
42  if (!src || failed) {
43    return null;
44  }
45 
46  return (
47    // oxlint-disable-next-line react/no-unknown-property -- plain img: registry components stay framework-agnostic
48    <img
49      alt=""
50      aria-hidden="true"
51      className={cn("size-3 shrink-0 select-none rounded-[2px]", className)}
52      data-slot="inline-citation-favicon"
53      loading="lazy"
54      onError={() => setFailed(true)}
55      src={src}
56    />
57  );
58};
59 
60export type InlineCitationProps = ComponentProps<"span">;
61 
62/* ─────────────────────────────────────────────────────
63 * A sourced claim inline with prose: the text reads
64 * normally, a small mono pill names where it came from,
65 * and hovering (or focusing) the pill previews the
66 * source without leaving the paragraph. Sources stack
67 * in one readable list — no carousel to page through.
68 * Inspired by Inline Citation from Vercel's AI SDK
69 * Elements (elements.ai-sdk.dev), rebuilt on Base UI.
70 * ─────────────────────────────────────────────────── */
71export const InlineCitation = ({
72  className,
73  ...props
74}: InlineCitationProps) => (
75  <span
76    className={cn("group/citation inline items-baseline", className)}
77    data-slot="inline-citation"
78    {...props}
79  />
80);
81 
82export type InlineCitationTextProps = ComponentProps<"span">;
83 
84/** The cited span itself; tints gently while its pill is hovered. */
85// … truncated