Aurora AI Inline Citation

1"use client"
2 
3import * as React from "react"
4import { safeHttpUrl } from "@/registry/aurora/lib/safe-url"
5 
6export interface InlineCitationProps
7  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
8  /** 1-based citation number rendered inside the chip. */
9  index: number
10  /** Source title shown in the hover/focus preview popover. */
11  title?: string
12  /** Optional context line shown below the title. */
13  description?: string
14  /** Source URL shown in the hover/focus preview popover. */
15  url?: string
16}
17 
18/**
19 * InlineCitation — a compact rose citation chip rendered inline with body text.
20 * When `title`/`url` are supplied it reveals a source preview on hover and
21 * keyboard focus; otherwise it renders as a plain numbered chip.
22 */
23const InlineCitation = (
24    { ref,
25      className,
26      index,
27      title,
28      description,
29      url,
30      style,
31      children,
32      href,
33      target,
34      rel,
35      tabIndex,
36      onMouseEnter,
37      onMouseLeave,
38      onFocus,
39      onBlur,
40      ...props
41    }: InlineCitationProps & { ref?: React.Ref<HTMLAnchorElement> }
42  ) => {
43    const [open, setOpen] = React.useState(false)
44    const resolvedHref = safeHttpUrl(href ?? url)
45    const hasPreview = Boolean(title || description || url)
46    const previewId = React.useId()
47    const resolvedTarget = target ?? (resolvedHref ? "_blank" : undefined)
48    const resolvedRel = rel ?? (resolvedHref ? "noreferrer noopener" : undefined)
49 
50    const handleMouseEnter = React.useCallback(
51      (event: React.MouseEvent<HTMLAnchorElement>) => {
52        if (hasPreview) setOpen(true)
53        onMouseEnter?.(event)
54      },
55      [hasPreview, onMouseEnter]
56    )
57    const handleMouseLeave = React.useCallback(
58      (event: React.MouseEvent<HTMLAnchorElement>) => {
59        if (hasPreview) setOpen(false)
60        onMouseLeave?.(event)
61      },
62      [hasPreview, onMouseLeave]
63    )
64    const handleFocus = React.useCallback(
65      (event: React.FocusEvent<HTMLAnchorElement>) => {
66        if (hasPreview) setOpen(true)
67        onFocus?.(event)
68      },
69      [hasPreview, onFocus]
70    )
71    const handleBlur = React.useCallback(
72      (event: React.FocusEvent<HTMLAnchorElement>) => {
73        if (hasPreview) setOpen(false)
74        onBlur?.(event)
75      },
76      [hasPreview, onBlur]
77    )
78 
79    const chip = (
80      <a
81        ref={ref}
82        className={[
83          "inline-flex items-center justify-center rounded-[5px] border align-baseline no-underline",
84// … truncated