Citation chip

CitationChip.tsxA chip on the clause it belongs to, a card with the domain, the date and the passage, and a mark on the sentence that has none.Copy

import { Lock } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

/**
 * A source is four things, and the date is one of them. A chip that cannot
 * say when its page was written is pointing at something the reader cannot
 * weigh, so `date` is required rather than an optional line in the card.
 */
export type Source = {
  title: string;
  /** What the chip shows. Short, because it sits inside a sentence. */
  site: string;
  /** The full host, shown in the card. Domain is the fastest trust signal. */
  domain: string;
  /** As the source states it: "March 2026", "12 May 2024". */
  date: string;
  url: string;
  /** The passage the claim was drawn from. Missing means the attribution was reconstructed, and the card says so. */
  passage?: string;
  /** Paywalled or permission-restricted. Marked before the reader clicks, since a chip they cannot open is worse than none. */
  gated?: boolean;
};

/** One sentence and what stands behind it. `null` is a real value: it means the
 *  sentence is the model's own, and the paragraph shows that rather than hiding it. */
export type Claim = { text: string; source: Source | null };

export function CitationChip({ source, defaultOpen = false, onOpen }: {
  source: Source;
  /** Start with the card showing, as in a demo. */
  defaultOpen?: boolean;
  /** Fires when the card opens. Count these against clicks through: it is the number this pattern is measured by. */
  onOpen?: (source: Source) => void;
}) {
  return (
    <HoverCard defaultOpen={defaultOpen} openDelay={150} closeDelay={200} onOpenChange={(o) => o && onOpen?.(source)}>
      <HoverCardTrigger asChild>
        <a href={source.url} target="_blank" rel="noreferrer" className="ml-1.5 inline-flex align-baseline no-underline">
          <Badge variant="outline" className="h-4 gap-1 rounded-full px-1.5 py-0 text-[10px] font-normal text-chart-1 border-chart-1">
            {source.gated && <Lock className="size-2.5" aria-label="sign-in required" />}
            {source.site}
          </Badge>
        </a>
      </HoverCardTrigger>
      <HoverCardContent side="bottom" align="end" className="w-72 p-3">
        <p className="text-sm text-card-foreground">{source.title}</p>
        <p className="mt-1 text-[11px] text-muted-foreground">{source.domain} · {source.date}</p>
        <p className="mt-2.5 border-t pt-2.5 text-xs leading-relaxed text-muted-foreground">
          {source.passage ?? "No passage recorded. The link was matched to this sentence after the answer was written."}
        </p>
      </HoverCardContent>
    </HoverCard>
  );
}

/**
 * The paragraph, with the chip on the clause it belongs to. A sentence with
 * nothing behind it is marked, because chips only mean something when the
 * reader can see which parts have none.
 */
export function CitedParagraph({ claims, openSource, onOpen }: {
  claims: Claim[];
  /** Which source's card starts open, by url. */
  openSource?: string;
  onOpen?: (source: Source) => void;
}) {
  // A div, not a p: the chip is a hover card whose content holds paragraphs,
  // and a p cannot contain them.
  return (
    <div className="text-sm leading-7 text-card-foreground">
      {claims.map((c, i) => (
        <span key={i} className={c.source ? undefined : "decoration-status-warn/60 underline decoration-dotted underline-offset-4"}>
          {c.text}
          {c.source
            ? <CitationChip source={c.source} defaultOpen={c.source.url === openSource} onOpen={onOpen} />
            : <span className="ml-1.5 text-[10px] text-status-warn">no source</span>}
          {i < claims.length - 1 && " "}
        </span>
      ))}
    </div>
  );
}

demo.tsxHow it is called: three claims, two sourced, the MDN card open.Copy

import { CitedParagraph, type Source } from "./CitationChip";

/**
 * Three sentences about the slow build's log stream. Two are drawn from pages
 * the assistant retrieved and carry a chip; the third is the model's own
 * inference and is marked as such. The MDN card starts open.
 */
const W3C: Source = {
  title: "Server-Sent Events, W3C Recommendation",
  site: "w3.org",
  domain: "www.w3.org",
  date: "February 2015",
  url: "https://www.w3.org/TR/eventsource/",
  passage: "The EventSource interface is used to receive server-sent events. It connects to a server over HTTP and receives events in text/event-stream format without closing the connection.",
};

const MDN: Source = {
  title: "Using server-sent events",
  site: "mdn.org",
  domain: "developer.mozilla.org",
  date: "March 2026",
  url: "https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events",
  passage: "The event stream is a simple stream of text data which must be encoded using UTF-8. Messages in the event stream are separated by a pair of newline characters.",
};

export default function Demo() {
  return (
    <div className="rounded-lg border bg-card p-4 pb-32">
      <CitedParagraph
        openSource={MDN.url}
        onOpen={(s) => console.log("opened", s.domain)}
        claims={[
          { text: "Server-sent events keep one HTTP response open and push text down it as the build writes.", source: W3C },
          { text: "Each message is a block of data: lines ended by a blank line, and the browser's EventSource object hands it to a listener and reconnects on its own if the connection drops.", source: MDN },
          { text: "For a build log this is cheaper than polling and simpler than a WebSocket.", source: null },
        ]}
      />
    </div>
  );
}