Citation list

"use client";

import * as React from "react";
import { ExternalLink } from "lucide-react";
import { cn } from "@/lib/utils";

export interface Citation {
  id: number;
  title: string;
  url: string;
  snippet?: string;
}

/** Numbered sources for an AI answer. Pair with <CitationMark id={n} /> inline. */
export function CitationList({ sources, className }: { sources: Citation[]; className?: string }) {
  return (
    <ol className={cn("grid gap-2 sm:grid-cols-2", className)}>
      {sources.map((s) => {
        let host = s.url;
        try {
          host = new URL(s.url).hostname.replace(/^www\./, "");
        } catch {}
        return (
          <li key={s.id} id={`source-${s.id}`}>
            <a href={s.url} target="_blank" rel="noreferrer" className="group flex h-full gap-3 rounded-lg border border-border p-3 text-sm transition-colors hover:bg-muted/50">
              <span className="grid size-5 shrink-0 place-items-center rounded bg-muted font-mono text-[10px]">{s.id}</span>
              <span className="min-w-0">
                <span className="flex items-center gap-1 font-medium">
                  <span className="truncate">{s.title}</span>
                  <ExternalLink className="size-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-60" />
                </span>
                <span className="block truncate text-xs text-muted-foreground">{host}</span>
                {s.snippet && <span className="mt-1 line-clamp-2 block text-xs text-muted-foreground">{s.snippet}</span>}
              </span>
            </a>
          </li>
        );
      })}
    </ol>
  );
}

/** Inline superscript marker that jumps to its source. */
export function CitationMark({ id }: { id: number }) {
  return (
    <a href={`#source-${id}`} aria-label={`Source ${id}`} className="mx-0.5 inline-grid size-4 -translate-y-1 place-items-center rounded bg-muted align-baseline font-mono text-[9px] text-muted-foreground no-underline hover:bg-accent hover:text-foreground">
      {id}
    </a>
  );
}