51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T458c,"use client"; /** * @author: @kokonutui * @description: AI Inline Citations * @version: 1.0.0 * @date: 2026-10-15 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ArrowUpRight, ChevronDown } from "lucide-react"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export interface CitationSource { id: string; title: string; url: string; /** Short site name for the chip, such as `MDN`. Defaults to the host. */ site?: string; /** The passage that backs the claim, shown in the preview. */ snippet?: string; } export interface AnswerPart { text: string; /** Ids of the sources that back this text. A chip follows it. */ cite?: string[]; } interface AICitationsProps { /** The answer, split where citations go. Demo content when omitted. */ parts?: AnswerPart[]; sources?: CitationSource[]; className?: string; } const EASE_OUT = [0.23, 1, 0.32, 1] as const; const CARD_WIDTH = 288; const OPEN_DELAY_MS = 120; const CLOSE_DELAY_MS = 90; /** After a preview closes, the next one within this window opens at once. */ const WARM_MS = 400; const DEMO_SOURCES: CitationSource[] = [ { id: "emil", title: "Great animations", url: "https://emilkowal.ski/ui/great-animations", site: "emilkowal.ski", snippet: "UI motion should be fast, mostly under 300ms, with an ease-out curve so movement starts right away. Popovers scale from their trigger.", }, { id: "webdev", title: "Animations and performance", url: "https://web.dev/articles/animations-and-performance", site: "web.dev", snippet: "Stick to transform and opacity where you can. Changing them skips layout and paint, so the compositor can run the animation.", }, { id: "mdn-perf", title: "CSS and JavaScript animation performance", url: "https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/CSS_JavaScript_animation_performance", site: "MDN", snippet: "Properties that trigger layout are expensive to animate. Transforms and opacity can be handed to the GPU.", }, { id: "mdn-reduce", title: "prefers-reduced-motion", url: "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion", site: "MDN", snippet: "Detects whether the user asked the system to minimize non-essential motion.", }, ]; const DEMO_PARTS: AnswerPart[] = [ { text: "Keep the dropdown quick. " }, { text: "Most UI motion should finish in under 300ms, and an ease-out curve feels faster than ease-in at the same duration.", cite: ["emil"], }, { text: " " }, { text: "Animate only transform and opacity, which the browser can run without layout or paint.", cite: ["webdev", "mdn-perf"], }, { text: " " }, { text: "When someone asks for reduced motion, swap the movement for a plain fade.", cite: ["mdn-reduce"], }, { text: " Finally, " }, { text: "scale the menu from its trigger rather than its center", cite: ["emil"], }, { text: ", so it feels attached to the button that opened it." }, ]; const hostOf = (url: string) => { try { return new URL(url).hostname.replace("www.", ""); } catch { return url; } }; const siteOf = (source: CitationSource) => source.site ?? hostOf(source.url); function Monogram({ source, className, }: { source: CitationSource; className?: string; }) { return ( ); } interface Preview { /** Index of the cited part the chip belongs to. */ part: number; x: number; y: number; } /** * Opens a preview after a short hover, and lets it glide from chip to chip * without re-entering while the user moves along a sentence. */ function usePreview() { const [preview, setPreview] = useState(null); const [warm, setWarm] = useState(false); const openTimer = useRef | null>(null); const closeTimer = useRef | null>(null); const lastClosed = useRef(0); const clear = useCallback(() => { if (openTimer.current) { clearTimeout(openTimer.current); } if (closeTimer.current) { clearTimeout(closeTimer.current); } }, []); const show = useCallback( (next: Preview, immediate = false) => { clear(); const isWarm = preview !== null || Date.now() - lastClosed.current < WARM_MS; if (immediate || isWarm) { setWarm(preview !== null); setPreview(next); return; } openTimer.current = setTimeout(() => { setWarm(false); setPreview(next); }, OPEN_DELAY_MS); }, [preview, clear] ); const hide = useCallback( (immediate = false) => { clear(); const close = () => { lastClosed.current = Date.now(); setPreview(null); }; if (immediate) { close(); return; } closeTimer.current = setTimeout(close, CLOSE_DELAY_MS); }, [clear] ); useEffect(() => clear, [clear]); return { preview, warm, show, hide }; } export default function AICitations({ parts = DEMO_PARTS, sources = DEMO_SOURCES, className, }: AICitationsProps) { const rootRef = useRef(null); const { preview, warm, show, hide } = usePreview(); const [hoveredSource, setHoveredSource] = useState(null); const [listOpen, setListOpen] = useState(false); const previewId = useId(); const listId = useId(); const byId = new Map(sources.map((source) => [source.id, source])); // Sources numbered in the order the answer first cites them. const order: string[] = []; for (const part of parts) { for (const id of part.cite ?? []) { if (!order.includes(id) && byId.has(id)) { order.push(id); } } } const cited = order .map((id) => byId.get(id)) .filter((source): source is CitationSource => Boolean(source)); const place = (index: number, chip: HTMLElement): Preview => { const root = rootRef.current?.getBoundingClientRect(); const rect = chip.getBoundingClientRect(); const width = Math.min(CARD_WIDTH, root?.width ?? CARD_WIDTH); const left = rect.left - (root?.left ?? 0) + rect.width / 2 - width / 2; const max = (root?.width ?? width) - width; return { part: index, x: Math.min(Math.max(0, left), Math.max(0, max)), y: rect.top - (root?.top ?? 0) - 8, }; }; const active = preview ? parts[preview.part] : null; const activeSources = (active?.cite ?? []) .map((id) => byId.get(id)) .filter((source): source is CitationSource => Boolean(source)); // Escape closes a preview opened by keyboard or tap. useEffect(() => { if (!preview) { return; } const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") { hide(true); } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [preview, hide]); return (

{parts.map((part, index) => { const partSources = (part.cite ?? []) .map((id) => byId.get(id)) .filter((source): source is CitationSource => Boolean(source)); if (partSources.length === 0) { // biome-ignore lint/suspicious/noArrayIndexKey: parts are an ordered, static answer return {part.text}; } const first = partSources[0]; const isActive = preview?.part === index; const isLinked = partSources.some( (source) => source.id === hoveredSource ); return ( // biome-ignore lint/suspicious/noArrayIndexKey: parts are an ordered, static answer {/* The claim a chip supports lights up while it's previewed. */} {part.text} {" "} ); })}

{/* One preview for every chip. It glides between chips once open, and fades in fresh after a pause. */} {preview && activeSources.length > 0 && ( )} {cited.length > 0 && (

{listOpen && ( {cited.map((source, index) => (

setHoveredSource(null)} onFocus={() => setHoveredSource(source.id)} onPointerEnter={() => setHoveredSource(source.id)} onPointerLeave={() => setHoveredSource(null)} rel="noopener noreferrer" target="_blank" > {index + 1} {source.title} {hostOf(source.url)}

))} )}

)}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@kokonutui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"/components/kokonutui/ai-citations.tsx","content":"$53","type":"registry:component","target":"components/kokonutui/ai-citations.tsx"}],"className":"h-[70svh] min-h-80"}]]}]